From f0b7c405fa6b13659517919d32bc12c9cf65aed8 Mon Sep 17 00:00:00 2001
From: Remo Zaros <remo@localhost.localdomain>
Date: Mon, 1 Jun 2026 12:02:59 +0200
Subject: [PATCH] add extra error messages

---
 session_dialog.php | 57 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/session_dialog.php b/session_dialog.php
index 09f8591..0bb3abf 100644
--- a/session_dialog.php
+++ b/session_dialog.php
@@ -43,9 +43,26 @@ function send_postcode_data()
     <script type="module">
         const postcodeModal = document.querySelector("#postcode_modal");
         const modalForm = document.querySelector("#postcode_modal_form");
+        const sndBtn = document.querySelector("#postcode_modal_submit");
+        const sndBtnLdr = sndBtn.querySelector(".btn_loader");
+        const sndBtnTxt = sndBtn.querySelector(".btn_text");
+        const errorMsg = document.querySelector("#error_message_modal_postcode");
+
+        modalForm.querySelectorAll("input").forEach(input => {
+          input.addEventListener("blur", ev => {
+            errorMsg.innerHTML = ""
+            if(!ev.target.validity.valid && ev.target.value !== "") {
+                errorMsg.innerHTML = ev.target.title;
+            }
+          })
+        })
 
         modalForm.addEventListener('submit', async (e) => {
             e.preventDefault();
+            errorMsg.innerHTML = "";
+            sndBtn.disabled = true;
+            sndBtnLdr.style.opacity = "1";
+            sndBtnTxt.style.opacity = "0";
             const formData = new FormData(e.target);
             const data = Object.fromEntries(formData.entries());
             const json = JSON.stringify(data);
@@ -67,6 +84,9 @@ function send_postcode_data()
               if(!resp.ok){
                 throw new Error(`HTTP Error! status: ${resp.status}` );
               }
+              sndBtn.disabled = false;
+              sndBtnLdr.style.opacity = "0";
+              sndBtnTxt.style.opacity = "1";
               const data = await resp.json();
               console.log("Data returnd", data);
 
@@ -76,15 +96,15 @@ function send_postcode_data()
 
                   switch (err) {
                     case "HUISNUMMER_NOT_FOUND":
-                      errmsg = "Adres niet gevonden.";
+                      errmsg = "Adres is niet gevonden.";
                       break;
                     case "HUISNUMMER_AMBIGUOUS":
                       errmsg = "Huisnummertovoeging mist.";
                       break;
                     default:
-                      errmsg = "Gegevens niet correct.";
+                      errmsg = "Gegevens zijn niet correct.";
                   }
-                  document.querySelector("#error_message_modal_postcode").innerHTML = errmsg;
+                  errorMsg.innerHTML = errmsg;
               }
 
               if (data.status === "success"){
@@ -108,15 +128,14 @@ function render_dialog_html()
         <p>Onze prijzen zijn afhankelijk van de regio. Vul daarom de postcode en het huisnummer in om de exacte prijzen te bekijken.</p>
         <form id="postcode_modal_form" method="post" action="" novalidate>
             <div class="form_fields">
-                <div>
                     <!-- Dutch Postcode Field -->
                     <input
                         type="text"
                         name="postcode"
-                        title="Voer een geldige Nederlandse postcode in (bijv. 1234AB of 1234 AB)."
+                        title="Voer een geldige postcode in (bijv. 1234AB of 1234 AB)."
                         pattern="[1-9][0-9]{3} ?(?!sa|sd|ss)[a-zA-Z]{2}"
                         placeholder="5010 AA"
-                        size="10"
+                        size="8"
                         required
                         autocomplete="off"
                     />
@@ -125,16 +144,23 @@ function render_dialog_html()
                     <input
                         type="text"
                         name="huisnummer"
-                        title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A, 1a)."
-                        pattern="\d+([- ]?[a-zA-Z]+)?"
+                        title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A)."
+                        pattern="\d+([\- ]?[a-zA-Z]+)?"
                         placeholder="10"
-                        size="5"
+                        size="3"
                         required
                         autocomplete="off"
                     />
+                    <button id="postcode_modal_submit" type="submit"><span class="btn_text">OK</span>
+                        <div class="btn_loader">
+                            <svg viewBox="0 0 128 30" xmlns="http://www.w3.org/2000/svg">
+                                <circle style="--i:0" cx="14" cy="15" r="14" />
+                                <circle style="--i:1" cx="64" cy="15" r="14" />
+                                <circle style="--i:2" cx="114" cy="15" r="14" />
+                            </svg>
+                        </div>
+                    </button>
                 </div>
-                <button id="postcode_modal_submit" type="submit">OK</button>
-            </div>
         </form>
         <div class="error_message_modal_postcode" id="error_message_modal_postcode" aria-live="polite"></div>
     </dialog>
@@ -325,7 +351,7 @@ function modify_checkout_with_js()
             if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch) {
               const store = 'wc/store/cart';
 
-              wp.data.dispatch(store).setBillingAddress({
+              wp.data.dispatch(store).setShippingAddress({
                   first_name: '',
                   last_name: '',
                   address_1: '<?php echo esc_js($address); ?>',
@@ -341,7 +367,7 @@ function modify_checkout_with_js()
               //make fields READONLY and ppstcode reset.
               setTimeout(() => {
                 // make prefilled fiields readonly.
-                $('#billing-postcode, #billing-city, #billing-address_1')
+                $('#shipping-postcode, #shipping-city, #shipping-address_1')
                   .prop('readonly', true)
                   .css('background', '#f9f9f9');
 
@@ -351,9 +377,8 @@ function modify_checkout_with_js()
                   div.setAttribute("class", "postcode-reset")
                   div.innerHTML = `
                     <a href="#" class="reset-postcode-show-comfirm" >Reset postcode.</a>
-                    <span class="bevestiging"> Weet je het zeker?
-                      <a href="#" class="accept">ja</a>/<a href="#" class="decline">nee</a>
-                      (Deze handeling leegt de winkelwagen.)
+                    <span class="bevestiging"> Deze handeling leegt ook de winkelwagen. Weet je het zeker?
+                      <a href="#" class="accept">&nbsp;&nbsp;JA&nbsp;</a>/<a href="#" class="decline">&nbsp;nee&nbsp;&nbsp;</a>
                     </span> `;
                   div.style.width = "100%";
                   document.querySelector(".wc-block-components-address-form__city").after(div);