@burdenoff/microfe-coolandlovely 2026.625.1 → 2026.625.2

package/dist/coolandlovely/pages/customer/CheckoutPage.js

@@ -1,532 +1,529 @@
 import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
 import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
-import { useOrders as r, usePlaceOrder as i } from "../../hooks/useCoolAndLovelyApi.js";
-import { formatCurrency as a } from "../../utils/formatters.js";
-import { useMemo as o, useState as s } from "react";
-import { AlertCircle as c, ArrowLeft as l, Banknote as u, CheckCircle2 as d, CreditCard as f, Heart as p, Loader2 as m, MapPin as h, ShoppingBag as g, Smartphone as _, Wallet as v } from "lucide-react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { EmptyState as r } from "../../components/EmptyState.js";
+import { useOrders as i, usePlaceOrder as a } from "../../hooks/useCoolAndLovelyApi.js";
+import { formatCurrency as o } from "../../utils/formatters.js";
+import { useMemo as s, useState as c } from "react";
+import { AlertCircle as l, ArrowLeft as u, Banknote as d, CheckCircle2 as f, CreditCard as p, Heart as m, Loader2 as h, MapPin as g, ShoppingBag as _, Smartphone as v, Wallet as y } from "lucide-react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { EmphasisPanel as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/customer/CheckoutPage.tsx
-var x = [
+var w = [
 	{
 		id: "cash",
 		label: "Cash on Delivery",
-		icon: u,
+		icon: d,
 		description: "Pay when you receive"
 	},
 	{
 		id: "card",
 		label: "Credit / Debit Card",
-		icon: f,
+		icon: p,
 		description: "Visa, Mastercard, RuPay"
 	},
 	{
 		id: "upi",
 		label: "UPI",
-		icon: _,
+		icon: v,
 		description: "Google Pay, PhonePe, Paytm"
 	},
 	{
 		id: "wallet",
 		label: "Digital Wallet",
-		icon: v,
+		icon: y,
 		description: "CoolAndLovely Wallet Balance"
 	}
-], S = [
+], T = [
 	0,
 	10,
 	20,
 	30
 ];
-function C() {
-	let { navigateTo: u, currentUser: _ } = e(), { data: v = [], isLoading: C } = r({ customerId: _?.id }), w = i(), T = o(() => v.find((e) => e.status === "pending") || v[0], [v]), [E, D] = s({
+function E() {
+	let { navigateTo: d, currentUser: v } = e(), { data: y = [], isLoading: E } = i({ customerId: v?.id }), D = a(), O = s(() => y.find((e) => e.status === "pending") || y[0], [y]), [k, A] = c({
 		addressLine1: "",
 		addressLine2: "",
 		city: "Bangalore",
 		state: "Karnataka",
 		pincode: ""
-	}), [O, k] = s("cash"), [A, j] = s({
+	}), [j, M] = c("cash"), [N, P] = c({
 		cardNumber: "",
 		expiryDate: "",
 		cvv: "",
 		upiId: ""
-	}), [M, N] = s(0), [P, F] = s(""), [I, L] = s(""), [R, z] = s(!1), B = o(() => {
-		if (!T) return {
+	}), [F, I] = c(0), [L, R] = c(""), [z, B] = c(""), [V, H] = c(!1), U = s(() => {
+		if (!O) return {
 			subtotal: 0,
 			deliveryFee: 0,
 			tax: 0,
 			total: 0
 		};
-		let e = T.subtotal, t = T.deliveryFee, n = T.taxes, r = T.discount ?? 0;
+		let e = O.subtotal, t = O.deliveryFee, n = O.taxes, r = O.discount ?? 0;
 		return {
 			subtotal: e,
 			deliveryFee: t,
 			tax: n,
 			discount: r,
-			total: e + t + n + M - r
+			total: e + t + n + F - r
 		};
-	}, [T, M]), V = o(() => T ? T.items.reduce((e, t) => e + t.quantity, 0) : 0, [T]), H = (e, t) => {
-		D((n) => ({
+	}, [O, F]), W = s(() => O ? O.items.reduce((e, t) => e + t.quantity, 0) : 0, [O]), G = (e, t) => {
+		A((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, U = (e, t) => {
-		j((n) => ({
+	}, K = (e, t) => {
+		P((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, W = () => {
-		if (!E.addressLine1.trim()) return alert("Please enter delivery address"), !1;
-		if (!E.pincode.trim() || E.pincode.length !== 6) return alert("Please enter a valid 6-digit pincode"), !1;
-		if (O === "card") {
-			if (!A.cardNumber || A.cardNumber.length < 16) return alert("Please enter a valid 16-digit card number"), !1;
-			if (!A.expiryDate) return alert("Please enter card expiry date"), !1;
-			if (!A.cvv || A.cvv.length < 3) return alert("Please enter a valid 3-digit CVV"), !1;
+	}, q = () => {
+		if (!k.addressLine1.trim()) return alert("Please enter delivery address"), !1;
+		if (!k.pincode.trim() || k.pincode.length !== 6) return alert("Please enter a valid 6-digit pincode"), !1;
+		if (j === "card") {
+			if (!N.cardNumber || N.cardNumber.length < 16) return alert("Please enter a valid 16-digit card number"), !1;
+			if (!N.expiryDate) return alert("Please enter card expiry date"), !1;
+			if (!N.cvv || N.cvv.length < 3) return alert("Please enter a valid 3-digit CVV"), !1;
 		}
-		return O === "upi" && !A.upiId.trim() ? (alert("Please enter UPI ID"), !1) : !0;
+		return j === "upi" && !N.upiId.trim() ? (alert("Please enter UPI ID"), !1) : !0;
 	};
-	return C ? /* @__PURE__ */ y(n, {
+	return E ? /* @__PURE__ */ b(n, {
 		title: "Checkout",
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ b("div", {
 			className: "flex h-[60vh] items-center justify-center",
-			children: /* @__PURE__ */ y(m, { className: "h-8 w-8 animate-spin text-primary" })
+			children: /* @__PURE__ */ b(h, { className: "h-8 w-8 animate-spin text-primary" })
 		})
-	}) : T ? /* @__PURE__ */ y(n, {
-		title: /* @__PURE__ */ b("div", {
+	}) : O ? /* @__PURE__ */ x(n, {
+		title: /* @__PURE__ */ x("div", {
 			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ y("button", {
+			children: [/* @__PURE__ */ b("button", {
 				type: "button",
-				onClick: () => u("/customer/carts"),
+				onClick: () => d("/customer/carts"),
 				className: "rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
-				children: /* @__PURE__ */ y(l, { className: "h-5 w-5" })
-			}), /* @__PURE__ */ y("span", { children: "Checkout" })]
+				children: /* @__PURE__ */ b(u, { className: "h-5 w-5" })
+			}), /* @__PURE__ */ b("span", { children: "Checkout" })]
 		}),
 		description: "Review your order and complete payment",
-		children: /* @__PURE__ */ b("div", {
+		children: [/* @__PURE__ */ b(C, {
+			className: "mb-6",
+			icon: /* @__PURE__ */ b(_, { className: "h-4 w-4" }),
+			children: "The final step before your order is placed. Confirm where it should go, choose how you want to pay, add a tip or special instructions, and review the full price breakdown on the right before you place the order."
+		}), /* @__PURE__ */ x("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
-			children: [/* @__PURE__ */ b("div", {
+			children: [/* @__PURE__ */ x("div", {
 				className: "lg:col-span-2 space-y-6",
 				children: [
-					/* @__PURE__ */ b("section", {
+					/* @__PURE__ */ x("section", {
 						className: "rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
-						children: [/* @__PURE__ */ b("h2", {
+						children: [/* @__PURE__ */ x("h2", {
 							className: "text-base font-semibold text-text-primary mb-4 flex items-center gap-2",
-							children: [/* @__PURE__ */ y(h, { className: "h-4 w-4 text-text-secondary" }), "Delivery Address"]
-						}), /* @__PURE__ */ b("div", {
+							children: [/* @__PURE__ */ b(g, { className: "h-4 w-4 text-text-secondary" }), "Delivery Address"]
+						}), /* @__PURE__ */ x("div", {
 							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
+								/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("label", {
 									className: "block text-sm font-medium text-text-primary mb-1.5",
-									children: ["Address Line 1 ", /* @__PURE__ */ y("span", {
+									children: ["Address Line 1 ", /* @__PURE__ */ b("span", {
 										className: "text-status-error-text",
 										children: "*"
 									})]
-								}), /* @__PURE__ */ y("input", {
+								}), /* @__PURE__ */ b("input", {
 									type: "text",
 									placeholder: "Building, Street, Area",
-									value: E.addressLine1,
-									onChange: (e) => H("addressLine1", e.target.value),
+									value: k.addressLine1,
+									onChange: (e) => G("addressLine1", e.target.value),
 									className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] }),
-								/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
+								/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("label", {
 									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: "Address Line 2"
-								}), /* @__PURE__ */ y("input", {
+								}), /* @__PURE__ */ b("input", {
 									type: "text",
 									placeholder: "Apartment, Suite, Floor (Optional)",
-									value: E.addressLine2,
-									onChange: (e) => H("addressLine2", e.target.value),
+									value: k.addressLine2,
+									onChange: (e) => G("addressLine2", e.target.value),
 									className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] }),
-								/* @__PURE__ */ b("div", {
+								/* @__PURE__ */ x("div", {
 									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
+									children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: ["City ", /* @__PURE__ */ y("span", {
+										children: ["City ", /* @__PURE__ */ b("span", {
 											className: "text-status-error-text",
 											children: "*"
 										})]
-									}), /* @__PURE__ */ y("input", {
+									}), /* @__PURE__ */ b("input", {
 										type: "text",
-										value: E.city,
-										onChange: (e) => H("city", e.target.value),
+										value: k.city,
+										onChange: (e) => G("city", e.target.value),
 										className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-									})] }), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
+									})] }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: ["State ", /* @__PURE__ */ y("span", {
+										children: ["State ", /* @__PURE__ */ b("span", {
 											className: "text-status-error-text",
 											children: "*"
 										})]
-									}), /* @__PURE__ */ y("input", {
+									}), /* @__PURE__ */ b("input", {
 										type: "text",
-										value: E.state,
-										onChange: (e) => H("state", e.target.value),
+										value: k.state,
+										onChange: (e) => G("state", e.target.value),
 										className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 									})] })]
 								}),
-								/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
+								/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("label", {
 									className: "block text-sm font-medium text-text-primary mb-1.5",
-									children: ["Pincode ", /* @__PURE__ */ y("span", {
+									children: ["Pincode ", /* @__PURE__ */ b("span", {
 										className: "text-status-error-text",
 										children: "*"
 									})]
-								}), /* @__PURE__ */ y("input", {
+								}), /* @__PURE__ */ b("input", {
 									type: "text",
 									placeholder: "560001",
 									maxLength: 6,
-									value: E.pincode,
-									onChange: (e) => H("pincode", e.target.value.replace(/\D/g, "")),
+									value: k.pincode,
+									onChange: (e) => G("pincode", e.target.value.replace(/\D/g, "")),
 									className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] })
 							]
 						})]
 					}),
-					/* @__PURE__ */ b("section", {
+					/* @__PURE__ */ x("section", {
 						className: "rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
 						children: [
-							/* @__PURE__ */ b("h2", {
+							/* @__PURE__ */ x("h2", {
 								className: "text-base font-semibold text-text-primary mb-4 flex items-center gap-2",
-								children: [/* @__PURE__ */ y(f, { className: "h-4 w-4 text-text-secondary" }), "Payment Method"]
+								children: [/* @__PURE__ */ b(p, { className: "h-4 w-4 text-text-secondary" }), "Payment Method"]
 							}),
-							/* @__PURE__ */ y("div", {
+							/* @__PURE__ */ b("div", {
 								className: "space-y-2",
-								children: x.map((e) => {
+								children: w.map((e) => {
 									let n = e.icon;
-									return /* @__PURE__ */ b("button", {
+									return /* @__PURE__ */ x("button", {
 										type: "button",
-										onClick: () => k(e.id),
-										className: t("flex w-full items-center gap-4 rounded-lg border p-3 transition-colors text-left", O === e.id ? "border-foreground bg-accent" : "border-border-subtle bg-bg-surface hover:bg-accent"),
+										onClick: () => M(e.id),
+										className: t("flex w-full items-center gap-4 rounded-lg border p-3 transition-colors text-left", j === e.id ? "border-foreground bg-accent" : "border-border-subtle bg-bg-surface hover:bg-accent"),
 										children: [
-											/* @__PURE__ */ y("div", {
+											/* @__PURE__ */ b("div", {
 												className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-bg-sunken",
-												children: /* @__PURE__ */ y(n, { className: "h-4 w-4 text-text-secondary" })
+												children: /* @__PURE__ */ b(n, { className: "h-4 w-4 text-text-secondary" })
 											}),
-											/* @__PURE__ */ b("div", {
+											/* @__PURE__ */ x("div", {
 												className: "flex-1 min-w-0",
-												children: [/* @__PURE__ */ y("p", {
+												children: [/* @__PURE__ */ b("p", {
 													className: "text-sm font-medium text-text-primary",
 													children: e.label
-												}), /* @__PURE__ */ y("p", {
+												}), /* @__PURE__ */ b("p", {
 													className: "text-xs text-text-secondary",
 													children: e.description
 												})]
 											}),
-											O === e.id && /* @__PURE__ */ y(d, { className: "h-5 w-5 text-text-primary shrink-0" })
+											j === e.id && /* @__PURE__ */ b(f, { className: "h-5 w-5 text-text-primary shrink-0" })
 										]
 									}, e.id);
 								})
 							}),
-							O === "card" && /* @__PURE__ */ b("div", {
+							j === "card" && /* @__PURE__ */ x("div", {
 								className: "mt-4 space-y-4 border-t border-border-subtle pt-4",
-								children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
+								children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("label", {
 									className: "block text-sm font-medium text-text-primary mb-1.5",
-									children: ["Card Number ", /* @__PURE__ */ y("span", {
+									children: ["Card Number ", /* @__PURE__ */ b("span", {
 										className: "text-status-error-text",
 										children: "*"
 									})]
-								}), /* @__PURE__ */ y("input", {
+								}), /* @__PURE__ */ b("input", {
 									type: "text",
 									placeholder: "1234 5678 9012 3456",
 									maxLength: 16,
-									value: A.cardNumber,
-									onChange: (e) => U("cardNumber", e.target.value.replace(/\D/g, "")),
+									value: N.cardNumber,
+									onChange: (e) => K("cardNumber", e.target.value.replace(/\D/g, "")),
 									className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-								})] }), /* @__PURE__ */ b("div", {
+								})] }), /* @__PURE__ */ x("div", {
 									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
+									children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: ["Expiry Date ", /* @__PURE__ */ y("span", {
+										children: ["Expiry Date ", /* @__PURE__ */ b("span", {
 											className: "text-status-error-text",
 											children: "*"
 										})]
-									}), /* @__PURE__ */ y("input", {
+									}), /* @__PURE__ */ b("input", {
 										type: "text",
 										placeholder: "MM/YY",
 										maxLength: 5,
-										value: A.expiryDate,
+										value: N.expiryDate,
 										onChange: (e) => {
 											let t = e.target.value.replace(/\D/g, "");
-											t.length >= 2 && (t = t.slice(0, 2) + "/" + t.slice(2, 4)), U("expiryDate", t);
+											t.length >= 2 && (t = t.slice(0, 2) + "/" + t.slice(2, 4)), K("expiryDate", t);
 										},
 										className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-									})] }), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
+									})] }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: ["CVV ", /* @__PURE__ */ y("span", {
+										children: ["CVV ", /* @__PURE__ */ b("span", {
 											className: "text-status-error-text",
 											children: "*"
 										})]
-									}), /* @__PURE__ */ y("input", {
+									}), /* @__PURE__ */ b("input", {
 										type: "text",
 										placeholder: "123",
 										maxLength: 3,
-										value: A.cvv,
-										onChange: (e) => U("cvv", e.target.value.replace(/\D/g, "")),
+										value: N.cvv,
+										onChange: (e) => K("cvv", e.target.value.replace(/\D/g, "")),
 										className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 									})] })]
 								})]
 							}),
-							O === "upi" && /* @__PURE__ */ b("div", {
+							j === "upi" && /* @__PURE__ */ x("div", {
 								className: "mt-4 border-t border-border-subtle pt-4",
-								children: [/* @__PURE__ */ b("label", {
+								children: [/* @__PURE__ */ x("label", {
 									className: "block text-sm font-medium text-text-primary mb-1.5",
-									children: ["UPI ID ", /* @__PURE__ */ y("span", {
+									children: ["UPI ID ", /* @__PURE__ */ b("span", {
 										className: "text-status-error-text",
 										children: "*"
 									})]
-								}), /* @__PURE__ */ y("input", {
+								}), /* @__PURE__ */ b("input", {
 									type: "text",
 									placeholder: "user@paytm",
-									value: A.upiId,
-									onChange: (e) => U("upiId", e.target.value),
+									value: N.upiId,
+									onChange: (e) => K("upiId", e.target.value),
 									className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})]
 							}),
-							O === "wallet" && /* @__PURE__ */ b("div", {
+							j === "wallet" && /* @__PURE__ */ x("div", {
 								className: "mt-4 flex items-start gap-3 rounded-lg bg-accent-blue-subtle/10 p-4 border border-accent-blue-subtle/20",
-								children: [/* @__PURE__ */ y(c, { className: "h-4 w-4 text-accent-blue mt-0.5 shrink-0" }), /* @__PURE__ */ y("p", {
+								children: [/* @__PURE__ */ b(l, { className: "h-4 w-4 text-accent-blue mt-0.5 shrink-0" }), /* @__PURE__ */ b("p", {
 									className: "text-sm text-accent-blue",
 									children: "Digital wallet integration coming soon. Please choose another payment method."
 								})]
 							})
 						]
 					}),
-					/* @__PURE__ */ b("section", {
+					/* @__PURE__ */ x("section", {
 						className: "rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
-						children: [/* @__PURE__ */ b("h2", {
+						children: [/* @__PURE__ */ x("h2", {
 							className: "text-base font-semibold text-text-primary mb-4 flex items-center gap-2",
-							children: [/* @__PURE__ */ y(p, { className: "h-4 w-4 text-text-secondary" }), "Additional Options"]
-						}), /* @__PURE__ */ b("div", {
+							children: [/* @__PURE__ */ b(m, { className: "h-4 w-4 text-text-secondary" }), "Additional Options"]
+						}), /* @__PURE__ */ x("div", {
 							className: "space-y-5",
-							children: [/* @__PURE__ */ b("div", { children: [
-								/* @__PURE__ */ y("label", {
+							children: [/* @__PURE__ */ x("div", { children: [
+								/* @__PURE__ */ b("label", {
 									className: "block text-sm font-medium text-text-primary mb-2",
 									children: "Tip for delivery partner"
 								}),
-								/* @__PURE__ */ y("div", {
+								/* @__PURE__ */ b("div", {
 									className: "flex flex-wrap gap-2 mb-3",
-									children: S.map((e) => /* @__PURE__ */ y("button", {
+									children: T.map((e) => /* @__PURE__ */ b("button", {
 										type: "button",
 										onClick: () => {
-											N(e), F("");
+											I(e), R("");
 										},
-										className: t("flex-1 min-w-[64px] rounded-lg px-3 py-2.5 text-sm font-medium transition-colors", M === e && P === "" ? "bg-foreground text-background" : "bg-bg-sunken text-text-secondary hover:bg-accent hover:text-text-primary"),
+										className: t("flex-1 min-w-[64px] rounded-lg px-3 py-2.5 text-sm font-medium transition-colors", F === e && L === "" ? "bg-foreground text-background" : "bg-bg-sunken text-text-secondary hover:bg-accent hover:text-text-primary"),
 										children: e === 0 ? "No Tip" : `₹${e}`
 									}, e))
 								}),
-								/* @__PURE__ */ y("input", {
+								/* @__PURE__ */ b("input", {
 									type: "number",
 									placeholder: "Custom tip amount",
-									value: P,
+									value: L,
 									onChange: (e) => {
 										let t = e.target.value;
-										F(t), N(parseInt(t) || 0);
+										R(t), I(parseInt(t) || 0);
 									},
 									className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})
-							] }), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
+							] }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("label", {
 								className: "block text-sm font-medium text-text-primary mb-2",
 								children: "Special Instructions"
-							}), /* @__PURE__ */ y("textarea", {
+							}), /* @__PURE__ */ b("textarea", {
 								rows: 3,
 								placeholder: "Any special requests for your order...",
-								value: I,
-								onChange: (e) => L(e.target.value),
+								value: z,
+								onChange: (e) => B(e.target.value),
 								className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
 							})] })]
 						})]
 					})
 				]
-			}), /* @__PURE__ */ y("div", {
+			}), /* @__PURE__ */ b("div", {
 				className: "lg:col-span-1",
-				children: /* @__PURE__ */ b("div", {
-					className: "sticky top-6 rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
+				children: /* @__PURE__ */ x(S, {
+					className: "sticky top-6 p-5",
 					children: [
-						/* @__PURE__ */ y("h2", {
+						/* @__PURE__ */ b("h2", {
 							className: "text-base font-semibold text-text-primary mb-4",
 							children: "Order Summary"
 						}),
-						/* @__PURE__ */ b("div", {
+						/* @__PURE__ */ x("div", {
 							className: "flex items-center gap-3 mb-4 pb-4 border-b border-border-subtle",
-							children: [/* @__PURE__ */ y("div", {
+							children: [/* @__PURE__ */ b("div", {
 								className: "h-12 w-12 rounded-md bg-bg-sunken overflow-hidden",
-								children: /* @__PURE__ */ y("img", {
-									src: T.cartImage,
-									alt: T.cartName,
+								children: /* @__PURE__ */ b("img", {
+									src: O.cartImage,
+									alt: O.cartName,
 									className: "h-full w-full object-cover"
 								})
-							}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							}), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
 								className: "text-sm font-medium text-text-primary",
-								children: T.cartName
-							}), /* @__PURE__ */ b("p", {
+								children: O.cartName
+							}), /* @__PURE__ */ x("p", {
 								className: "text-xs text-text-secondary",
 								children: [
-									T.items.length,
+									O.items.length,
 									" item",
-									T.items.length === 1 ? "" : "s"
+									O.items.length === 1 ? "" : "s"
 								]
 							})] })]
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ b("div", {
 							className: "space-y-2 mb-4",
-							children: T.items.map((e) => /* @__PURE__ */ b("div", {
+							children: O.items.map((e) => /* @__PURE__ */ x("div", {
 								className: "flex justify-between items-start",
-								children: [/* @__PURE__ */ b("div", {
+								children: [/* @__PURE__ */ x("div", {
 									className: "flex-1 min-w-0",
 									children: [
-										/* @__PURE__ */ y("p", {
+										/* @__PURE__ */ b("p", {
 											className: "text-sm text-text-primary",
 											children: e.name
 										}),
-										e.customizations && e.customizations.length > 0 && /* @__PURE__ */ y("p", {
+										e.customizations && e.customizations.length > 0 && /* @__PURE__ */ b("p", {
 											className: "text-xs text-text-secondary mt-0.5",
 											children: e.customizations.join(", ")
 										}),
-										/* @__PURE__ */ b("p", {
+										/* @__PURE__ */ x("p", {
 											className: "text-xs text-text-secondary",
 											children: [
-												a(e.price, { minimumFractionDigits: 0 }),
+												o(e.price, { minimumFractionDigits: 0 }),
 												" x ",
 												e.quantity
 											]
 										})
 									]
-								}), /* @__PURE__ */ y("span", {
+								}), /* @__PURE__ */ b("span", {
 									className: "text-sm font-medium text-text-primary",
-									children: a(e.price * e.quantity, { minimumFractionDigits: 0 })
+									children: o(e.price * e.quantity, { minimumFractionDigits: 0 })
 								})]
 							}, e.id))
 						}),
-						/* @__PURE__ */ b("div", {
+						/* @__PURE__ */ x("div", {
 							className: "border-t border-border-subtle pt-4 space-y-2.5 text-sm",
 							children: [
-								/* @__PURE__ */ b("div", {
+								/* @__PURE__ */ x("div", {
 									className: "flex justify-between",
-									children: [/* @__PURE__ */ b("span", {
+									children: [/* @__PURE__ */ x("span", {
 										className: "text-text-secondary",
 										children: [
 											"Subtotal (",
-											V,
+											W,
 											" items)"
 										]
-									}), /* @__PURE__ */ y("span", {
+									}), /* @__PURE__ */ b("span", {
 										className: "text-text-primary",
-										children: a(B.subtotal, { minimumFractionDigits: 0 })
+										children: o(U.subtotal, { minimumFractionDigits: 0 })
 									})]
 								}),
-								/* @__PURE__ */ b("div", {
+								/* @__PURE__ */ x("div", {
 									className: "flex justify-between",
-									children: [/* @__PURE__ */ y("span", {
+									children: [/* @__PURE__ */ b("span", {
 										className: "text-text-secondary",
 										children: "Delivery Fee"
-									}), /* @__PURE__ */ y("span", {
+									}), /* @__PURE__ */ b("span", {
 										className: "text-text-primary",
-										children: B.deliveryFee === 0 ? "FREE" : a(B.deliveryFee, { minimumFractionDigits: 0 })
+										children: U.deliveryFee === 0 ? "FREE" : o(U.deliveryFee, { minimumFractionDigits: 0 })
 									})]
 								}),
-								/* @__PURE__ */ b("div", {
+								/* @__PURE__ */ x("div", {
 									className: "flex justify-between",
-									children: [/* @__PURE__ */ y("span", {
+									children: [/* @__PURE__ */ b("span", {
 										className: "text-text-secondary",
 										children: "Tax"
-									}), /* @__PURE__ */ y("span", {
+									}), /* @__PURE__ */ b("span", {
 										className: "text-text-primary",
-										children: a(B.tax, { minimumFractionDigits: 0 })
+										children: o(U.tax, { minimumFractionDigits: 0 })
 									})]
 								}),
-								M > 0 && /* @__PURE__ */ b("div", {
+								F > 0 && /* @__PURE__ */ x("div", {
 									className: "flex justify-between",
-									children: [/* @__PURE__ */ y("span", {
+									children: [/* @__PURE__ */ b("span", {
 										className: "text-text-secondary",
 										children: "Tip"
-									}), /* @__PURE__ */ y("span", {
+									}), /* @__PURE__ */ b("span", {
 										className: "text-text-primary",
-										children: a(M, { minimumFractionDigits: 0 })
+										children: o(F, { minimumFractionDigits: 0 })
 									})]
 								}),
-								B.discount && B.discount > 0 && /* @__PURE__ */ b("div", {
+								U.discount && U.discount > 0 && /* @__PURE__ */ x("div", {
 									className: "flex justify-between",
-									children: [/* @__PURE__ */ y("span", {
+									children: [/* @__PURE__ */ b("span", {
 										className: "text-status-success-text",
 										children: "Discount"
-									}), /* @__PURE__ */ b("span", {
+									}), /* @__PURE__ */ x("span", {
 										className: "text-status-success-text",
-										children: ["-", a(B.discount, { minimumFractionDigits: 0 })]
+										children: ["-", o(U.discount, { minimumFractionDigits: 0 })]
 									})]
 								})
 							]
 						}),
-						/* @__PURE__ */ b("div", {
+						/* @__PURE__ */ x("div", {
 							className: "mt-4 flex justify-between border-t border-border-subtle pt-4",
-							children: [/* @__PURE__ */ y("span", {
+							children: [/* @__PURE__ */ b("span", {
 								className: "text-base font-semibold text-text-primary",
 								children: "Total"
-							}), /* @__PURE__ */ y("span", {
+							}), /* @__PURE__ */ b("span", {
 								className: "text-base font-bold text-text-primary",
-								children: a(B.total, { minimumFractionDigits: 0 })
+								children: o(U.total, { minimumFractionDigits: 0 })
 							})]
 						}),
-						/* @__PURE__ */ b("button", {
+						/* @__PURE__ */ x("button", {
 							type: "button",
 							onClick: async () => {
-								if (!(!W() || !T)) try {
-									let e = await w.mutateAsync({
-										providerId: T.cartId,
-										customerId: _?.id,
-										items: T.items.map((e) => ({
+								if (!(!q() || !O)) try {
+									let e = await D.mutateAsync({
+										providerId: O.cartId,
+										customerId: v?.id,
+										items: O.items.map((e) => ({
 											offeringId: e.id,
 											quantity: e.quantity,
 											customizations: e.customizations
 										})),
-										deliveryAddress: `${E.addressLine1}, ${E.addressLine2}, ${E.city}, ${E.state} - ${E.pincode}`,
-										paymentMethod: O.toUpperCase(),
-										notes: I,
-										deliveryFee: B.deliveryFee,
-										tax: B.tax,
-										tip: M,
-										total: B.total
+										deliveryAddress: `${k.addressLine1}, ${k.addressLine2}, ${k.city}, ${k.state} - ${k.pincode}`,
+										paymentMethod: j.toUpperCase(),
+										notes: z,
+										deliveryFee: U.deliveryFee,
+										tax: U.tax,
+										tip: F,
+										total: U.total
 									});
-									alert("Order placed successfully!"), u(`/customer/order/${e.id}`);
+									alert("Order placed successfully!"), d(`/customer/order/${e.id}`);
 								} catch {
 									alert("Failed to place order. Please try again.");
 								}
 							},
-							disabled: w.isPending,
-							className: t("mt-6 flex w-full items-center justify-center gap-2 rounded-lg py-3 text-sm font-medium transition-opacity", "bg-foreground text-background", w.isPending ? "opacity-60 cursor-not-allowed" : "hover:opacity-90"),
-							children: [w.isPending ? /* @__PURE__ */ y(m, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ y(g, { className: "h-4 w-4" }), w.isPending ? "Placing Order..." : `Place Order - ${a(B.total, { minimumFractionDigits: 0 })}`]
+							disabled: D.isPending,
+							className: t("mt-6 flex w-full items-center justify-center gap-2 rounded-lg py-3 text-sm font-medium transition-opacity", "bg-foreground text-background", D.isPending ? "opacity-60 cursor-not-allowed" : "hover:opacity-90"),
+							children: [D.isPending ? /* @__PURE__ */ b(h, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ b(_, { className: "h-4 w-4" }), D.isPending ? "Placing Order..." : `Place Order - ${o(U.total, { minimumFractionDigits: 0 })}`]
 						}),
-						/* @__PURE__ */ y("p", {
+						/* @__PURE__ */ b("p", {
 							className: "mt-3 text-center text-xs text-text-secondary",
 							children: "By placing this order, you agree to our Terms of Service and Privacy Policy"
 						})
 					]
 				})
 			})]
-		})
-	}) : /* @__PURE__ */ y(n, {
+		})]
+	}) : /* @__PURE__ */ b(n, {
 		title: "Checkout",
-		children: /* @__PURE__ */ b("div", {
-			className: "flex flex-col items-center justify-center py-16 text-center",
-			children: [
-				/* @__PURE__ */ y(g, { className: "h-16 w-16 text-text-secondary/40 mb-4" }),
-				/* @__PURE__ */ y("h3", {
-					className: "text-lg font-semibold text-text-primary mb-2",
-					children: "Your cart is empty"
-				}),
-				/* @__PURE__ */ y("p", {
-					className: "text-sm text-text-secondary mb-6",
-					children: "Add some items to proceed with checkout"
-				}),
-				/* @__PURE__ */ y("button", {
-					type: "button",
-					onClick: () => u("/customer/carts"),
-					className: "rounded-lg bg-foreground px-6 py-3 text-sm font-medium text-background hover:opacity-90 transition-opacity",
-					children: "Browse Carts"
-				})
-			]
+		children: /* @__PURE__ */ b(r, {
+			illustration: "empty-generic",
+			title: "Your cart is empty",
+			description: "Add some items to proceed with checkout.",
+			action: /* @__PURE__ */ b("button", {
+				type: "button",
+				onClick: () => d("/customer/carts"),
+				className: "rounded-lg bg-foreground px-6 py-3 text-sm font-medium text-background hover:opacity-90 transition-opacity",
+				children: "Browse Carts"
+			})
 		})
 	});
 }
 //#endregion
-export { C as CheckoutPage };
+export { E as CheckoutPage };
 
 //# sourceMappingURL=CheckoutPage.js.map