100 lines
2.3 KiB
JavaScript
100 lines
2.3 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
||
const cartItemsContainer = document.getElementById("checkout-items");
|
||
const subtotalEl = document.getElementById("checkout-subtotal");
|
||
const totalEl = document.getElementById("checkout-total");
|
||
|
||
const qrWrapper = document.getElementById("qr-wrapper");
|
||
const form = document.getElementById("checkout-form");
|
||
|
||
const cart = Cart.getCart();
|
||
|
||
if (cart.length === 0) {
|
||
cartItemsContainer.innerHTML = "<p>Your cart is empty.</p>";
|
||
return;
|
||
}
|
||
|
||
let subtotal = 0;
|
||
|
||
cart.forEach((item) => {
|
||
subtotal += item.price * item.quantity;
|
||
|
||
const row = document.createElement("div");
|
||
row.className = "summary-row";
|
||
row.innerHTML = `
|
||
<span>${item.name} × ${item.quantity}</span>
|
||
<span>₹${(item.price * item.quantity).toFixed(2)}</span>
|
||
`;
|
||
cartItemsContainer.appendChild(row);
|
||
});
|
||
|
||
const total = subtotal;
|
||
|
||
subtotalEl.textContent = `₹${subtotal.toFixed(2)}`;
|
||
totalEl.textContent = `₹${total.toFixed(2)}`;
|
||
|
||
const orderBtn = document.getElementById("btn-order");
|
||
|
||
let billingData = null;
|
||
|
||
form.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
|
||
if (!form.checkValidity()) return;
|
||
|
||
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.disabled = true;
|
||
|
||
const orderPayload = {
|
||
...billingData,
|
||
order: Cart.getCart(),
|
||
};
|
||
|
||
const res = await fetch(`${CONFIG.API_BASE_URL}/order`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(orderPayload),
|
||
});
|
||
|
||
showToast({
|
||
title: "Order Placed, Redirecting to home in 3 seconds...",
|
||
icon: "✓",
|
||
});
|
||
|
||
Cart.clear();
|
||
|
||
setTimeout(() => {
|
||
window.location.href = "index.html";
|
||
}, 3000);
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert("Unable to place order.");
|
||
} finally {
|
||
orderBtn.classList.remove("loading");
|
||
orderBtn.disabled = false;
|
||
}
|
||
}
|
||
});
|
||
});
|