86 lines
2.2 KiB
JavaScript
86 lines
2.2 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)}`;
|
||
|
||
// Unlock QR on valid form submit
|
||
form.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
|
||
if (!form.checkValidity()) return;
|
||
|
||
const orderBtn = document.getElementById("btn-order");
|
||
|
||
orderBtn.classList.add("loading");
|
||
orderBtn.disabled = true;
|
||
|
||
const formData = new FormData(form);
|
||
|
||
const orderPayload = {
|
||
first_name: formData.get("first_name"),
|
||
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(),
|
||
};
|
||
|
||
try {
|
||
const res = await fetch(`${CONFIG.API_BASE_URL}/order`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(orderPayload),
|
||
});
|
||
|
||
console.log(res);
|
||
|
||
// if (!res.ok) throw new Error("Order failed");
|
||
|
||
// unlock payment QR
|
||
qrWrapper.classList.remove("blurred");
|
||
|
||
console.log("Order created");
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert("Unable to place order. Please try again.");
|
||
} finally {
|
||
orderBtn.classList.remove("loading");
|
||
orderBtn.disabled = false;
|
||
}
|
||
});
|
||
});
|