Make reset postcode button work

assets/reset-postcode.css

@@ -7,6 +7,10 @@
         color: var(--wc-red);
         cursor: pointer;
 
+        &.decline {
+            color: #111;
+        }
+
         &:hover {
             filter: brightness(160%);
         }

assets/reset-postcode.js

@@ -1,14 +1,32 @@
 document.addEventListener("click", function (event) {
-  event.preventDefault();
   if (event.target.matches(".reset-postcode-show-comfirm")) {
-    console.log("link1 button clicked!");
+    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")) {
-    console.log("link3 button clicked!");
+    event.preventDefault();
     document.querySelector(".bevestiging").dataset.open = false;
   }
 });

session_dialog.php

@@ -14,6 +14,8 @@ function init_postcode_handlers($uri)
             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");
 }
@@ -335,9 +337,9 @@ function modify_checkout_with_js()
                   const script = document.createElement('script');
                   div.setAttribute("class", "postcode-reset")
                   div.innerHTML = `
-                    <a class="reset-postcode-show-comfirm" >Reset postcode.</a>
+                    <a href="#" class="reset-postcode-show-comfirm" >Reset postcode.</a>
                     <span class="bevestiging"> Weet je het zeker?
-                      <a class="accept">ja</a>/<a class="decline">nee</a>
+                      <a href="#" class="accept">ja</a>/<a href="#" class="decline">nee</a>
                       (Deze handeling leegt de winkelwagen.)
                     </span> `;
                   div.style.width = "100%";
@@ -357,21 +359,42 @@ function modify_checkout_with_js()
 
 function load_assets_reset_postcode_on_checkout()
 {
-    // Only load on checkout page
     if (is_checkout() && !is_wc_endpoint_url()) {
         wp_enqueue_style(
-            "my-checkout-style",
-            plugin_dir_url(__FILE__) . "assets/reset-postcode.css", // Path to your CSS file
+            "reset-postcode-style",
+            plugin_dir_url(__FILE__) . "assets/reset-postcode.css",
             [],
             "1.0.0",
         );
 
         wp_enqueue_script(
-            "my-checkout-script",
+            "reset-postcode-script",
             plugin_dir_url(__FILE__) . "assets/reset-postcode.js",
-            [], // Dependency on jQuery
+            [],
             "1.0.0",
-            true, // Load in footer
+            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();
+}