feat(api): integrated /cart and /order api's

assets/js/checkout.js

@@ -33,11 +33,53 @@ document.addEventListener("DOMContentLoaded", () => {
 	totalEl.textContent = `₹${total.toFixed(2)}`;
 
 	// Unlock QR on valid form submit
-	form.addEventListener("submit", (e) => {
+	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(".netlify/functions/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;
+		}
 	});
 });

cart.html

@@ -160,6 +160,38 @@
 		<script src="assets/js/cart.js"></script>
 
 		<script>
+			const checkoutBtn = document.getElementById("btn-checkout");
+
+			if (checkoutBtn) {
+				checkoutBtn.addEventListener("click", async () => {
+					try {
+						checkoutBtn.classList.add("loading");
+						checkoutBtn.disabled = true;
+
+						console.log("/api/cart hit");
+
+						const cart = Cart.getCart();
+
+						const res = await fetch("/.netlify/functions/cart", {
+							method: "POST",
+							headers: {
+								"Content-Type": "application/json",
+							},
+							body: JSON.stringify(cart),
+						});
+
+						console.log(res);
+
+						window.location.href = "checkout.html";
+					} catch (err) {
+						console.error("Cart API failed", err);
+					} finally {
+						checkoutBtn.classList.remove("loading");
+						checkoutBtn.disabled = false;
+					}
+				});
+			}
+
 			function applyCoupon() {
 				const code = document
 					.getElementById("coupon-input")

netlify.toml

@@ -0,0 +1,7 @@
+[build]
+ 	publish = "."
+  
+  functions = "netlify/functions"
+
+[functions]
+  node_bundler = "esbuild"

netlify/functions/cart.js

@@ -0,0 +1,28 @@
+export async function handler(event) {
+	console.log("cart called");
+	const API = process.env.API_BASE_URL;
+
+	try {
+		const res = await fetch(`${API}/cart`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: event.body,
+		});
+
+		console.log(res);
+
+		const data = await res.text();
+
+		return {
+			statusCode: res.status,
+			body: data,
+		};
+	} catch (err) {
+		return {
+			statusCode: 500,
+			body: JSON.stringify({ error: "Cart API failed" }),
+		};
+	}
+}

netlify/functions/order.js

@@ -0,0 +1,27 @@
+export async function handler(event) {
+	const API = process.env.API_BASE_URL;
+
+	try {
+		const res = await fetch(`${API}/order`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: event.body,
+		});
+
+		console.log(res);
+
+		const data = await res.text();
+
+		return {
+			statusCode: res.status,
+			body: data,
+		};
+	} catch (err) {
+		return {
+			statusCode: 500,
+			body: JSON.stringify({ error: "Order API failed" }),
+		};
+	}
+}