106 lines
3.8 KiB
JavaScript
106 lines
3.8 KiB
JavaScript
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);
|
|
}
|
|
});
|