Make reset postcode button work

assets/postcode_modal.css

@@ -1,5 +1,4 @@
 .postcode_modal {
-    backgrounnd: green;
     border-radius: 20px;
     box-shadow(10px);
     border: none;
@@ -27,24 +26,45 @@
     input[type="text"] {
         padding: .3rem;
         font-size: 1.4rem;
+        caret-color: hsl(344 98 40);
     }
 
     button {
         border: none;
         font-size: 1.4rem;
+        color: hsl(233 100 100);
         padding: .4rem 1rem;
         border-radius: 5px;
-        background: dodgerblue;
+        background: hsl(344 98 40);
+        border: 1px hsl(344 98 40) solid;
         margin: 0 0 0 .3rem;
+        transition: .2s all linear;
+
+        &:hover{
+            color: hsl(344 98 40 );
+            background: hsl(344 98 100);
+            cursor: pointer;
+        }
     }
 
     .form_fields {
         display: flex;
         justify-content: space-between;
         align-items: center;
+
+        &>{
+            display: flex;
+        }
     }
 
     &::backdrop {
-        background-color: hsl(40deg 100 30 /0.5);
+        backdrop-filter: blur(1px);
+        background-color: hsl(40deg 100 0 /0.4);
+        background: radial-gradient(circle,rgba(33, 33, 33, 0.68) 0%, rgba(15, 15, 15, 0.8) 23%, rgba(0, 0, 0, 0.87) 100%);
     }
+
+    .error_message_modal_postcode {
+        min-height: 1lh;
+        color: hsl(344 98 40 );
+    }/* HTML: <div class="loader"></div> */
 }

assets/reset-postcode.css

@@ -0,0 +1,26 @@
+.postcode-reset {
+    font-size: var(--wp--preset--font-size--small, 13px);
+    line-height: 1.3;
+    margin-top: 11px;
+
+    a {
+        color: var(--wc-red);
+        cursor: pointer;
+
+        &.decline {
+            color: #111;
+        }
+
+        &:hover {
+            filter: brightness(160%);
+        }
+    }
+
+    .bevestiging {
+        display: none;
+
+        &[data-open="true"] {
+            display: inline;
+        }
+    }
+}

assets/reset-postcode.js

@@ -0,0 +1,32 @@
+document.addEventListener("click", function (event) {
+  if (event.target.matches(".reset-postcode-show-comfirm")) {
+    event.preventDefault();
+    document.querySelector(".bevestiging").dataset.open = true;
+  }
+
+  if (event.target.matches(".accept")) {
+    event.preventDefault();
+    console.log("link2 button clicked!");
+    fetch(ajax_object.ajax_url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: new URLSearchParams({
+        action: "unset_my_session",
+        nonce: ajax_object.nonce, // The nonce value
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.success) {
+          window.location.reload();
+        }
+      });
+  }
+
+  if (event.target.matches(".decline")) {
+    event.preventDefault();
+    document.querySelector(".bevestiging").dataset.open = false;
+  }
+});

prijs-per-postcode.php

@@ -3,10 +3,10 @@
 session_start();
 require_once "session_dialog.php";
 /*
- * Plugin Name: Prijs per Postcode
+ * Plugin Name: prijzen per poscode range
- * Description: veschillende prijzen per postdoce. een range posctcodes zijn "lokaal" andere zijn overig
+ * Description:  posctcodes in de 5000-5800 range krijgen een lokaal tarief aangeboden.
  * Author: Remo Zaros
- * Version: 0.0.1
+ * Version: 0.9.1
  * Text Domeain: prijs-per-postcode
  */
 
@@ -26,36 +26,135 @@ class PrijsPerPostcode
     public function init()
     {
         $uri = $_SERVER["REQUEST_URI"];
-        if_needed_place_postcode_form($uri);
+        add_filter("woocommerce_sale_flash", "__return_null");
+        init_postcode_handlers($uri);
 
-        add_action("wp_footer", "set_checkout_fields_with_javascript");
+        //add_action("template_redirect", [$this, "redirect_if_missing_tag"]);
-        function set_checkout_fields_with_javascript()
+        add_action(
-        {
+            "woocommerce_variation_options_pricing",
-            // Only run on the checkout page
+            [$this, "add_local_price_field"],
-            if (!is_checkout() || is_wc_endpoint_url()) {
+            10,
-                return;
+            3,
-            }
+        );
+        add_action(
+            "woocommerce_save_product_variation",
+            [$this, "save_local_price_field"],
+            10,
+            2,
+        );
+        add_action("woocommerce_before_calculate_totals", [
+            $this,
+            "use_local_price_if_local_postcode",
+        ]);
 
-            // Define the values you want to set
+        add_filter(
-            $woonplaats = $SESSION["woonplaats"];
+            "woocommerce_get_price_html",
-            $postcode = $_SESSION["postcode"];
+            [$this, "display_local_price_on_product"],
-            $address_1 =
+            10,
-                $_SESSION["straatnaam"] . " " . $_SESSION["huisnummer"];
+            2,
-            // Output the JavaScript
+        );
-            ?>
+        add_action("template_redirect", [
-            <script type="text/javascript">
+            $this,
-            jQuery(document).ready(function($){
+            "controleer_postcode_op_woocommerce_paginas",
-                // Set the values for the checkout fields
+        ]);
-                $('#billing_city').val('<?php echo esc_js($woonplaats); ?>');
+    }
-                $('#billing_postcode').val('<?php echo esc_js($postcode); ?>');
+
-                $('#billing_address_1').val('<?php echo esc_js(
+    public function add_local_price_field($loop, $variation_data, $variation)
-                    $address_1,
+    {
-                ); ?>');
+        woocommerce_wp_text_input([
-            });
+            "id" => "_local_price[" . $loop . "]",
-            </script>
+            "label" =>
-            <?php
+                __("Lokale Prijs", "woocommerce") .
+                " (" .
+                get_woocommerce_currency_symbol() .
+                ")",
+            "value" => get_post_meta($variation->ID, "_local_price", true),
+            "data_type" => "price",
+            "wrapper_class" => "form-row form-row-first", // Left half
+        ]);
+    }
+
+    public function save_local_price_field($variation_id, $i)
+    {
+        $local_price = $_POST["_local_price"][$i];
+        if (isset($local_price)) {
+            update_post_meta(
+                $variation_id,
+                "_local_price",
+                wc_clean($local_price),
+            );
         }
     }
+
+    public function use_local_price_if_local_postcode($cart)
+    {
+        if (is_admin() && !defined("DOING_AJAX")) {
+            return;
+        }
+
+        foreach ($cart->get_cart() as $cart_item) {
+            $product = $cart_item["data"];
+            $variation_id = $product->is_type("variation")
+                ? $product->get_id()
+                : 0;
+
+            if (
+                $variation_id &&
+                isset($_SESSION["postcode_is_local"]) &&
+                $_SESSION["postcode_is_local"]
+            ) {
+                $local_price = get_post_meta(
+                    $variation_id,
+                    "_local_price",
+                    true,
+                );
+                if ($local_price) {
+                    $product->set_price($local_price);
+                }
+            }
+        }
+    }
+
+    public function controleer_postcode_op_woocommerce_paginas()
+    {
+        if (is_admin() || defined("DOING_AJAX")) {
+            return;
+        }
+
+        if (
+            (is_product() ||
+                is_product_category() ||
+                is_product_tag() ||
+                is_cart() ||
+                is_checkout() ||
+                is_account_page()) &&
+            !is_shop()
+        ) {
+            if (!isset($_SESSION["postcode_is_local"])) {
+                wp_redirect(home_url("/winkel/"));
+                exit();
+            }
+        }
+    }
+
+    public function display_local_price_on_product($price_html, $product)
+    {
+        if (
+            $product->is_type("variation") &&
+            isset($_SESSION["postcode_is_local"]) &&
+            $_SESSION["postcode_is_local"] === true
+        ) {
+            $local_price = get_post_meta(
+                $product->get_id(),
+                "_local_price",
+                true,
+            );
+            if ($local_price !== "") {
+                return wc_price($local_price);
+            }
+        }
+        return $price_html;
+    }
 }
 
 new PrijsPerPostcode();

read.md

@@ -1,3 +1,7 @@
-# Prijs per postcode
+# Goedkoop Tilburg
 
-Laat een modal zien op de /winkel pag. De modal vraagt om postcode en huisnummer. Na validatie worden vier sessievarablen gemaakt postcode, huisnummer, straatnaam, islokaal
+Deze plugin laat verschillende producten zien in Woocommerce naar aanleiding van de opgegeven postcode. 
+
+Een postcode in de 5000/5800 range laat producten zien met de tag "lokaal". Als een postcode buiten deze range ligt laat Woocommerce producten zien met de tag "algemeen". Een product moet de tag "lokaal" of "algemeen" hebben om in de winkel te verschijnen.
+
+Bij het opgeven van de postcode en huisnummer wordt de straatnaam en woonplaats opgezocht. Deze informatie wordt ingevuld tijdens het checkout process.

session_dialog.php

@@ -1,20 +1,23 @@
 <?php
 
 session_start();
-function if_needed_place_postcode_form($uri)
+function init_postcode_handlers($uri)
 {
-    if (
+    if (strpos($uri, "/winkel/") !== false) {
-        strpos($uri, "/shop") !== false ||
-        strpos($uri, "/winkel") !== false ||
-        strpos($uri, "/product") !== false
-    ) {
-        render_dialog_html();
         add_action("wp_enqueue_scripts", "modal_styles");
         add_action("wp_footer", "send_postcode_data");
         if (!has_postcode()) {
+            if (!is_admin()) {
+                WC()->cart->empty_cart();
+            }
             add_action("wp_footer", "show_modal");
+            render_dialog_html();
         }
     }
+    add_action("wp_ajax_unset_my_session", "handle_unset_session_fetch");
+    add_action("wp_ajax_nopriv_unset_my_session", "handle_unset_session_fetch");
+    add_action("wp_footer", "modify_checkout_with_js");
+    add_action("wp_enqueue_scripts", "load_assets_reset_postcode_on_checkout");
 }
 
 function modal_styles()
@@ -28,7 +31,7 @@ function modal_styles()
 function show_modal()
 {
     ?>
-        <script>
+    <script id="postcode_modal">
           const postcodeModal = document.querySelector("#postcode_modal");
           postcodeModal.showModal();
         </script>
@@ -40,20 +43,24 @@ function send_postcode_data()
     ?>
     <script type="module">
         const postcodeModal = document.querySelector("#postcode_modal");
-        const submitBtn = document.querySelector("#postcode_modal_form");
+        const modalForm = document.querySelector("#postcode_modal_form");
 
-        submitBtn.addEventListener('submit', async (e) => {
+        modalForm.addEventListener('submit', async (e) => {
             e.preventDefault();
             const formData = new FormData(e.target);
             const data = Object.fromEntries(formData.entries());
             const json = JSON.stringify(data);
 
             try {
-              const resp = await fetch('<? echo get_rest_url(null, "postcode-modal/v1/submit"); ?>', {
+              const resp = await fetch('<?php echo get_rest_url(
+                  null,
+                  "postcode-modal/v1/submit",
+              ); ?>', {
                 method: 'POST',
+                credentials: 'same-origin',
                 headers: {
                   'Content-Type': 'application/json',
-                  'X-WP-Nonce': '<? echo wp_create_nonce("wp_rest"); ?>'
+                  'X-WP-Nonce': '<?php echo wp_create_nonce("wp_rest"); ?>'
                 },
                 body: json
               });
@@ -65,11 +72,25 @@ function send_postcode_data()
               console.log("Data returnd", data);
 
               if (data.status === "error"){
+                  const err = data.message;
+                  let errmsg
 
+                  switch (err) {
+                    case "Huisnummer not found":
+                      errmsg = "Adres niet gevonden.";
+                      break;
+                    case "Multiple addresses match this huisnummer; add huisletter and/or huisnummertoevoeging":
+                      errmsg = "Huisnummertovoeging mist.";
+                      break;
+                    default:
+                      errmsg = "Gegevens niet correct.";
+                  }
+                  document.querySelector("#error_message_modal_postcode").innerHTML = errmsg;
               }
 
               if (data.status === "success"){
                 postcodeModal.close();
+                //location.reload();
               }
             }catch(err){
               console.error("Fetch Failed:", err);
@@ -85,7 +106,7 @@ function render_dialog_html()
     ?>
     <dialog id="postcode_modal" class="postcode_modal" closedby="none">
         <h2>Vul je postcode en huisnummer in.</h2>
-        <form id="postcode_modal_form" method="post" action="">
+        <form id="postcode_modal_form" method="post" action="" novalidation>
             <div class="form_fields">
                 <div>
                     <input type="text" name="postcode"
@@ -97,17 +118,18 @@ function render_dialog_html()
                     />
 
                     <input type="text" name="huisnummer"
-                        pattern="\d+([-\s]?[a-zA-Z]+)?"
+                        pattern="/\d+([-\\s]?[a-zA-Z]+)?/"
                         title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A, 1a)."
-                        placeholder= "12a"
+                        placeholder= "12A"
                         size="5"
                         required
                     />
                 </div>
                 <button id="postcode_modal_submit" type="submit">verzend</button>
             </div>
-        <form>
+        </form>
-        <div class="error_message" id="error_message"></div>
+        <div class="error_message_modal_postcode" id="error_message_modal_postcode" aria-live="polite"></div>
+        <div class="loader_modal"></div>
     </dialog>
     <?php
 }
@@ -159,7 +181,8 @@ function handle_postcode_modal($data)
         $_SESSION["huisnummer"] = $params["huisnummer"];
         $_SESSION["straatnaam"] = $result["straatnaam"];
         $_SESSION["woonplaats"] = $result["woonplaats"];
-        $_SESSION["lokaak_tarief"] = postcode_in_range(
+
+        $_SESSION["postcode_is_local"] = postcode_in_range(
             $params["postcode"],
             5000,
             5800,
@@ -259,3 +282,119 @@ function postcode_in_range($postcode, $start, $end)
 
     return $numberPart >= $start && $numberPart <= $end;
 }
+
+function modify_checkout_with_js()
+{
+    if (
+        !is_checkout() ||
+        (is_wc_endpoint_url() && !is_wc_endpoint_url("order-received"))
+    ) {
+        return;
+    }
+
+    $woonplaats = $_SESSION["woonplaats"];
+    $postcode = $formatted_postcode = preg_replace(
+        "/(\d+)([A-Z]+)/",
+        '$1 $2',
+        strtoupper($_SESSION["postcode"]),
+    );
+    $address =
+        $_SESSION["straatnaam"] . " " . strtoupper($_SESSION["huisnummer"]);
+    // Output the JavaScript
+    ?>
+        <script type="text/javascript" id="fill_address_fields">
+          jQuery(document).ready(function($) {
+              fillCheckoutFields();
+              $(document.body).on('updated_checkout', fillCheckoutFields);
+          });
+
+          function fillCheckoutFields() {
+            if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch) {
+              const store = 'wc/store/cart';
+
+              wp.data.dispatch(store).setShippingAddress({
+                  first_name: '',
+                  last_name: '',
+                  address_1: '<?php echo esc_js($address); ?>',
+                  address_2: '',
+                  city: '<?php echo esc_js($woonplaats); ?>',
+                  state: '',
+                  postcode: '<?php echo esc_js($postcode); ?>',
+                  country: 'NL',
+                  phone: '',
+                  email: ''
+              });
+
+              //make fields READONLY and ppstcode reset.
+              setTimeout(() => {
+                // make prefilled fiields readonly.
+                $('#shipping-postcode, #shipping-city, #shipping-address_1')
+                  .prop('readonly', true)
+                  .css('background', '#f9f9f9');
+
+                  // create postcode reset button
+                  const div = document.createElement("div");
+                  const script = document.createElement('script');
+                  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> `;
+                  div.style.width = "100%";
+                  document.querySelector(".wc-block-components-address-form__city").after(div);
+              }, 500);
+
+
+
+              jQuery(document.body).trigger('update_checkout');
+          } else {
+              console.error('WooCommerce Blocks API is niet beschikbaar');
+          }
+       }
+     </script>
+     <?php
+}
+
+function load_assets_reset_postcode_on_checkout()
+{
+    if (is_checkout() && !is_wc_endpoint_url()) {
+        wp_enqueue_style(
+            "reset-postcode-style",
+            plugin_dir_url(__FILE__) . "assets/reset-postcode.css",
+            [],
+            "1.0.0",
+        );
+
+        wp_enqueue_script(
+            "reset-postcode-script",
+            plugin_dir_url(__FILE__) . "assets/reset-postcode.js",
+            [],
+            "1.0.0",
+            true,
+        );
+
+        // Pass PHP variables to JavaScript
+        wp_localize_script("reset-postcode-script", "ajax_object", [
+            "ajax_url" => admin_url("admin-ajax.php"),
+            "nonce" => wp_create_nonce("reset_postcode_nonce"), // Creates a secure token
+        ]);
+    }
+}
+
+function handle_unset_session_fetch()
+{
+    // Verify the nonce for security
+    if (!wp_verify_nonce($_POST["nonce"], "reset_postcode_nonce")) {
+        wp_die("Security check failed.");
+    }
+
+    // Unset the specific session variable
+    if (isset($_SESSION["postcode"])) {
+        $_SESSION = [];
+    }
+
+    // Send a JSON response
+    wp_send_json_success();
+}