Init project

Future fixes:
-Remove logic for showing current order reference in ajax.js. Instead grab from database using cart ID

views/js/index.js

@@ -0,0 +1,105 @@
+document.addEventListener("DOMContentLoaded", function () {
+    // Load saved reference on page load (with retry for dynamic content)
+    loadSavedReferenceWithRetry();
+
+    // Ajax submission
+    document.addEventListener("submit", function (e) {
+        if (e.target && e.target.id === "order_reference_form") {
+            e.preventDefault();
+            const form = e.target;
+            const url = typeof ajax_url !== "undefined" ? ajax_url : null;
+            const input = document.querySelector("#order_reference_input");
+            const inputValue = input.value.trim();
+
+            fetch(url, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                    Accept: "application/json",
+                },
+                body:
+                    "ajax=1&order_reference_input=" +
+                    encodeURIComponent(inputValue),
+            })
+                .then((response) => response.json())
+                .then((data) => {
+                    if (data.success) {
+                        // Save to localStorage
+                        localStorage.setItem("order_reference", inputValue);
+                        displaySavedReference(inputValue);
+                        input.value = "";
+                    }
+                    alertFadeOut(form, data);
+                })
+                .catch((error) => {
+                    console.error(error);
+                    alertFadeOut(form, {
+                        success: false,
+                        message: "An error occurred",
+                    });
+                });
+        }
+    });
+
+    // Load saved reference with retry mechanism for dynamic content
+    function loadSavedReferenceWithRetry(attempts = 0, maxAttempts = 10) {
+        const savedReference = localStorage.getItem("order_reference");
+        if (savedReference) {
+            const success = displaySavedReference(savedReference);
+
+            if (!success && attempts < maxAttempts) {
+                setTimeout(() => {
+                    loadSavedReferenceWithRetry(attempts + 1, maxAttempts);
+                }, 100);
+            }
+        }
+    }
+
+    function displaySavedReference(value) {
+        const form = document.querySelector("#order_reference_form");
+        if (!form) return false;
+
+        const lastSubmittedContainer = form.querySelector(
+            ".last-submitted-container",
+        );
+        if (lastSubmittedContainer) {
+            const lastSubmittedSpan =
+                lastSubmittedContainer.querySelector(".last-submitted");
+            if (lastSubmittedSpan) {
+                lastSubmittedSpan.textContent = value;
+                lastSubmittedContainer.classList.remove("d-none");
+                return true;
+            }
+        }
+        return false;
+    }
+
+    // Reset alert to initial state
+    function resetAlert(alert, messageEl) {
+        alert.classList.add("d-none");
+        alert.classList.remove("alert-success", "alert-danger", "fade-out");
+        messageEl.textContent = "";
+    }
+
+    // Fade out alert and reset
+    function alertFadeOut(form, data) {
+        const alert = form.querySelector(".alert");
+        if (!alert) return;
+
+        const messageEl = alert.querySelector(".alert-message");
+        if (!messageEl) return;
+
+        // Show alert with appropriate class and message
+        alert.classList.remove("d-none");
+        alert.classList.add(data.success ? "alert-success" : "alert-danger");
+        messageEl.textContent = data.message;
+
+        // Fade out after delay
+        setTimeout(() => {
+            alert.classList.add("fade-out");
+            setTimeout(() => {
+                resetAlert(alert, messageEl);
+            }, 750); // 750ms for fade-out animation - make sure it matches in styles.css
+        }, 5000);
+    }
+});