update(checkout): updated '/order' api call logic
This commit is contained in:
+34
-20
@@ -32,32 +32,43 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
subtotalEl.textContent = `₹${subtotal.toFixed(2)}`;
|
subtotalEl.textContent = `₹${subtotal.toFixed(2)}`;
|
||||||
totalEl.textContent = `₹${total.toFixed(2)}`;
|
totalEl.textContent = `₹${total.toFixed(2)}`;
|
||||||
|
|
||||||
// Unlock QR on valid form submit
|
const orderBtn = document.getElementById("btn-order");
|
||||||
|
|
||||||
|
let billingData = null;
|
||||||
|
|
||||||
form.addEventListener("submit", async (e) => {
|
form.addEventListener("submit", async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
if (!form.checkValidity()) return;
|
if (!form.checkValidity()) return;
|
||||||
|
|
||||||
const orderBtn = document.getElementById("btn-order");
|
const step = orderBtn.dataset.step;
|
||||||
|
|
||||||
|
// STEP 1 — Unlock QR
|
||||||
|
if (step === "unlock") {
|
||||||
|
const formData = Object.fromEntries(new FormData(form));
|
||||||
|
|
||||||
|
billingData = formData;
|
||||||
|
|
||||||
|
qrWrapper.classList.remove("blurred");
|
||||||
|
|
||||||
|
orderBtn.dataset.step = "confirm";
|
||||||
|
orderBtn.querySelector(".btn-text").textContent =
|
||||||
|
"I Have Completed Payment";
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// STEP 2 — Place Order
|
||||||
|
if (step === "confirm") {
|
||||||
|
try {
|
||||||
orderBtn.classList.add("loading");
|
orderBtn.classList.add("loading");
|
||||||
orderBtn.disabled = true;
|
orderBtn.disabled = true;
|
||||||
|
|
||||||
const formData = new FormData(form);
|
|
||||||
|
|
||||||
const orderPayload = {
|
const orderPayload = {
|
||||||
first_name: formData.get("first_name"),
|
...billingData,
|
||||||
last_name: formData.get("last_name"),
|
|
||||||
email: formData.get("email"),
|
|
||||||
phone: formData.get("phone"),
|
|
||||||
address: formData.get("address"),
|
|
||||||
city: formData.get("city"),
|
|
||||||
state: formData.get("state"),
|
|
||||||
post_code: formData.get("post_code"),
|
|
||||||
order: Cart.getCart(),
|
order: Cart.getCart(),
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${CONFIG.API_BASE_URL}/order`, {
|
const res = await fetch(`${CONFIG.API_BASE_URL}/order`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
@@ -66,20 +77,23 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
body: JSON.stringify(orderPayload),
|
body: JSON.stringify(orderPayload),
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(res);
|
showToast({
|
||||||
|
title: "Order Placed, Redirecting to home in 3 seconds...",
|
||||||
|
icon: "✓",
|
||||||
|
});
|
||||||
|
|
||||||
// if (!res.ok) throw new Error("Order failed");
|
Cart.clear();
|
||||||
|
|
||||||
// unlock payment QR
|
setTimeout(() => {
|
||||||
qrWrapper.classList.remove("blurred");
|
window.location.href = "index.html";
|
||||||
|
}, 3000);
|
||||||
console.log("Order created");
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
alert("Unable to place order. Please try again.");
|
alert("Unable to place order.");
|
||||||
} finally {
|
} finally {
|
||||||
orderBtn.classList.remove("loading");
|
orderBtn.classList.remove("loading");
|
||||||
orderBtn.disabled = false;
|
orderBtn.disabled = false;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user