@burdenoff/microfe-adaptercloud 2026.625.1 → 2026.625.2

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

@@ -6,8 +6,9 @@ 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 { EmphasisPanel as x } from "@burdenoff/fe-libs/ui";
 //#region src/adaptercloud/pages/customer/CheckoutPage.tsx
-var x = [
+var S = [
 	{
 		id: "cash",
 		label: "Cash on Delivery",
@@ -32,66 +33,66 @@ var x = [
 		icon: v,
 		description: "AdapterCloud Wallet Balance"
 	}
-], S = [
+], C = [
 	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 w() {
+	let { navigateTo: u, currentUser: _ } = e(), { data: v = [], isLoading: w } = r({ customerId: _?.id }), T = i(), E = o(() => v.find((e) => e.status === "pending") || v[0], [v]), [D, O] = s({
 		addressLine1: "",
 		addressLine2: "",
 		city: "Bangalore",
 		state: "Karnataka",
 		pincode: ""
-	}), [O, k] = s("cash"), [A, j] = s({
+	}), [k, A] = s("cash"), [j, M] = s({
 		cardNumber: "",
 		expiryDate: "",
 		cvv: "",
 		upiId: ""
-	}), [M, N] = s(0), [P, F] = s(""), [I, L] = s(""), [R, z] = s(!1), B = o(() => {
-		if (!T) return {
+	}), [N, P] = s(0), [F, I] = s(""), [L, R] = s(""), [z, B] = s(!1), V = o(() => {
+		if (!E) 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 = E.subtotal, t = E.deliveryFee, n = E.taxes, r = E.discount ?? 0;
 		return {
 			subtotal: e,
 			deliveryFee: t,
 			tax: n,
 			discount: r,
-			total: e + t + n + M - r
+			total: e + t + n + N - r
 		};
-	}, [T, M]), V = o(() => T ? T.items.reduce((e, t) => e + t.quantity, 0) : 0, [T]), H = (e, t) => {
-		D((n) => ({
+	}, [E, N]), H = o(() => E ? E.items.reduce((e, t) => e + t.quantity, 0) : 0, [E]), U = (e, t) => {
+		O((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, U = (e, t) => {
-		j((n) => ({
+	}, W = (e, t) => {
+		M((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;
+	}, G = () => {
+		if (!D.addressLine1.trim()) return alert("Please enter delivery address"), !1;
+		if (!D.pincode.trim() || D.pincode.length !== 6) return alert("Please enter a valid 6-digit pincode"), !1;
+		if (k === "card") {
+			if (!j.cardNumber || j.cardNumber.length < 16) return alert("Please enter a valid 16-digit card number"), !1;
+			if (!j.expiryDate) return alert("Please enter card expiry date"), !1;
+			if (!j.cvv || j.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 k === "upi" && !j.upiId.trim() ? (alert("Please enter UPI ID"), !1) : !0;
 	};
-	return C ? /* @__PURE__ */ y(n, {
+	return w ? /* @__PURE__ */ y(n, {
 		title: "Checkout",
 		children: /* @__PURE__ */ y("div", {
 			className: "flex h-[60vh] items-center justify-center",
 			children: /* @__PURE__ */ y(m, { className: "h-8 w-8 animate-spin text-primary" })
 		})
-	}) : T ? /* @__PURE__ */ y(n, {
+	}) : E ? /* @__PURE__ */ y(n, {
 		title: /* @__PURE__ */ b("div", {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ y("button", {
@@ -102,6 +103,7 @@ function C() {
 			}), /* @__PURE__ */ y("span", { children: "Checkout" })]
 		}),
 		description: "Review your order and complete payment",
+		purpose: "The final step before your order is placed — confirm what's in your cart, choose a delivery address and payment method, and pay securely. Check the totals here so there are no surprises.",
 		children: /* @__PURE__ */ b("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
 			children: [/* @__PURE__ */ b("div", {
@@ -124,8 +126,8 @@ function C() {
 								}), /* @__PURE__ */ y("input", {
 									type: "text",
 									placeholder: "Building, Street, Area",
-									value: E.addressLine1,
-									onChange: (e) => H("addressLine1", e.target.value),
+									value: D.addressLine1,
+									onChange: (e) => U("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", {
@@ -134,8 +136,8 @@ function C() {
 								}), /* @__PURE__ */ y("input", {
 									type: "text",
 									placeholder: "Apartment, Suite, Floor (Optional)",
-									value: E.addressLine2,
-									onChange: (e) => H("addressLine2", e.target.value),
+									value: D.addressLine2,
+									onChange: (e) => U("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", {
@@ -148,8 +150,8 @@ function C() {
 										})]
 									}), /* @__PURE__ */ y("input", {
 										type: "text",
-										value: E.city,
-										onChange: (e) => H("city", e.target.value),
+										value: D.city,
+										onChange: (e) => U("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", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
@@ -159,8 +161,8 @@ function C() {
 										})]
 									}), /* @__PURE__ */ y("input", {
 										type: "text",
-										value: E.state,
-										onChange: (e) => H("state", e.target.value),
+										value: D.state,
+										onChange: (e) => U("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)]"
 									})] })]
 								}),
@@ -174,8 +176,8 @@ function C() {
 									type: "text",
 									placeholder: "560001",
 									maxLength: 6,
-									value: E.pincode,
-									onChange: (e) => H("pincode", e.target.value.replace(/\D/g, "")),
+									value: D.pincode,
+									onChange: (e) => U("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)]"
 								})] })
 							]
@@ -190,12 +192,12 @@ function C() {
 							}),
 							/* @__PURE__ */ y("div", {
 								className: "space-y-2",
-								children: x.map((e) => {
+								children: S.map((e) => {
 									let n = e.icon;
 									return /* @__PURE__ */ b("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: () => A(e.id),
+										className: t("flex w-full items-center gap-4 rounded-lg border p-3 transition-colors text-left", k === e.id ? "border-foreground bg-accent" : "border-border-subtle bg-bg-surface hover:bg-accent"),
 										children: [
 											/* @__PURE__ */ y("div", {
 												className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-bg-sunken",
@@ -211,12 +213,12 @@ function C() {
 													children: e.description
 												})]
 											}),
-											O === e.id && /* @__PURE__ */ y(d, { className: "h-5 w-5 text-text-primary shrink-0" })
+											k === e.id && /* @__PURE__ */ y(d, { className: "h-5 w-5 text-text-primary shrink-0" })
 										]
 									}, e.id);
 								})
 							}),
-							O === "card" && /* @__PURE__ */ b("div", {
+							k === "card" && /* @__PURE__ */ b("div", {
 								className: "mt-4 space-y-4 border-t border-border-subtle pt-4",
 								children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
 									className: "block text-sm font-medium text-text-primary mb-1.5",
@@ -228,8 +230,8 @@ function C() {
 									type: "text",
 									placeholder: "1234 5678 9012 3456",
 									maxLength: 16,
-									value: A.cardNumber,
-									onChange: (e) => U("cardNumber", e.target.value.replace(/\D/g, "")),
+									value: j.cardNumber,
+									onChange: (e) => W("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", {
 									className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
@@ -243,10 +245,10 @@ function C() {
 										type: "text",
 										placeholder: "MM/YY",
 										maxLength: 5,
-										value: A.expiryDate,
+										value: j.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)), W("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", {
@@ -259,13 +261,13 @@ function C() {
 										type: "text",
 										placeholder: "123",
 										maxLength: 3,
-										value: A.cvv,
-										onChange: (e) => U("cvv", e.target.value.replace(/\D/g, "")),
+										value: j.cvv,
+										onChange: (e) => W("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", {
+							k === "upi" && /* @__PURE__ */ b("div", {
 								className: "mt-4 border-t border-border-subtle pt-4",
 								children: [/* @__PURE__ */ b("label", {
 									className: "block text-sm font-medium text-text-primary mb-1.5",
@@ -276,12 +278,12 @@ function C() {
 								}), /* @__PURE__ */ y("input", {
 									type: "text",
 									placeholder: "user@paytm",
-									value: A.upiId,
-									onChange: (e) => U("upiId", e.target.value),
+									value: j.upiId,
+									onChange: (e) => W("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", {
+							k === "wallet" && /* @__PURE__ */ b("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", {
 									className: "text-sm text-accent-blue",
@@ -304,22 +306,22 @@ function C() {
 								}),
 								/* @__PURE__ */ y("div", {
 									className: "flex flex-wrap gap-2 mb-3",
-									children: S.map((e) => /* @__PURE__ */ y("button", {
+									children: C.map((e) => /* @__PURE__ */ y("button", {
 										type: "button",
 										onClick: () => {
-											N(e), F("");
+											P(e), I("");
 										},
-										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", N === e && F === "" ? "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", {
 									type: "number",
 									placeholder: "Custom tip amount",
-									value: P,
+									value: F,
 									onChange: (e) => {
 										let t = e.target.value;
-										F(t), N(parseInt(t) || 0);
+										I(t), P(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)]"
 								})
@@ -329,8 +331,8 @@ function C() {
 							}), /* @__PURE__ */ y("textarea", {
 								rows: 3,
 								placeholder: "Any special requests for your order...",
-								value: I,
-								onChange: (e) => L(e.target.value),
+								value: L,
+								onChange: (e) => R(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"
 							})] })]
 						})]
@@ -338,8 +340,8 @@ function C() {
 				]
 			}), /* @__PURE__ */ y("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__ */ b(x, {
+					className: "sticky top-6 p-5",
 					children: [
 						/* @__PURE__ */ y("h2", {
 							className: "text-base font-semibold text-text-primary mb-4",
@@ -350,25 +352,25 @@ function C() {
 							children: [/* @__PURE__ */ y("div", {
 								className: "h-12 w-12 rounded-md bg-bg-sunken overflow-hidden",
 								children: /* @__PURE__ */ y("img", {
-									src: T.cartImage,
-									alt: T.cartName,
+									src: E.cartImage,
+									alt: E.cartName,
 									className: "h-full w-full object-cover"
 								})
 							}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 								className: "text-sm font-medium text-text-primary",
-								children: T.cartName
+								children: E.cartName
 							}), /* @__PURE__ */ b("p", {
 								className: "text-xs text-text-secondary",
 								children: [
-									T.items.length,
+									E.items.length,
 									" item",
-									T.items.length === 1 ? "" : "s"
+									E.items.length === 1 ? "" : "s"
 								]
 							})] })]
 						}),
 						/* @__PURE__ */ y("div", {
 							className: "space-y-2 mb-4",
-							children: T.items.map((e) => /* @__PURE__ */ b("div", {
+							children: E.items.map((e) => /* @__PURE__ */ b("div", {
 								className: "flex justify-between items-start",
 								children: [/* @__PURE__ */ b("div", {
 									className: "flex-1 min-w-0",
@@ -405,12 +407,12 @@ function C() {
 										className: "text-text-secondary",
 										children: [
 											"Subtotal (",
-											V,
+											H,
 											" items)"
 										]
 									}), /* @__PURE__ */ y("span", {
 										className: "text-text-primary",
-										children: a(B.subtotal, { minimumFractionDigits: 0 })
+										children: a(V.subtotal, { minimumFractionDigits: 0 })
 									})]
 								}),
 								/* @__PURE__ */ b("div", {
@@ -420,7 +422,7 @@ function C() {
 										children: "Delivery Fee"
 									}), /* @__PURE__ */ y("span", {
 										className: "text-text-primary",
-										children: B.deliveryFee === 0 ? "FREE" : a(B.deliveryFee, { minimumFractionDigits: 0 })
+										children: V.deliveryFee === 0 ? "FREE" : a(V.deliveryFee, { minimumFractionDigits: 0 })
 									})]
 								}),
 								/* @__PURE__ */ b("div", {
@@ -430,27 +432,27 @@ function C() {
 										children: "Tax"
 									}), /* @__PURE__ */ y("span", {
 										className: "text-text-primary",
-										children: a(B.tax, { minimumFractionDigits: 0 })
+										children: a(V.tax, { minimumFractionDigits: 0 })
 									})]
 								}),
-								M > 0 && /* @__PURE__ */ b("div", {
+								N > 0 && /* @__PURE__ */ b("div", {
 									className: "flex justify-between",
 									children: [/* @__PURE__ */ y("span", {
 										className: "text-text-secondary",
 										children: "Tip"
 									}), /* @__PURE__ */ y("span", {
 										className: "text-text-primary",
-										children: a(M, { minimumFractionDigits: 0 })
+										children: a(N, { minimumFractionDigits: 0 })
 									})]
 								}),
-								B.discount && B.discount > 0 && /* @__PURE__ */ b("div", {
+								V.discount && V.discount > 0 && /* @__PURE__ */ b("div", {
 									className: "flex justify-between",
 									children: [/* @__PURE__ */ y("span", {
 										className: "text-status-success-text",
 										children: "Discount"
 									}), /* @__PURE__ */ b("span", {
 										className: "text-status-success-text",
-										children: ["-", a(B.discount, { minimumFractionDigits: 0 })]
+										children: ["-", a(V.discount, { minimumFractionDigits: 0 })]
 									})]
 								})
 							]
@@ -462,37 +464,37 @@ function C() {
 								children: "Total"
 							}), /* @__PURE__ */ y("span", {
 								className: "text-base font-bold text-text-primary",
-								children: a(B.total, { minimumFractionDigits: 0 })
+								children: a(V.total, { minimumFractionDigits: 0 })
 							})]
 						}),
 						/* @__PURE__ */ b("button", {
 							type: "button",
 							onClick: async () => {
-								if (!(!W() || !T)) try {
-									let e = await w.mutateAsync({
-										providerId: T.cartId,
+								if (!(!G() || !E)) try {
+									let e = await T.mutateAsync({
+										providerId: E.cartId,
 										customerId: _?.id,
-										items: T.items.map((e) => ({
+										items: E.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: `${D.addressLine1}, ${D.addressLine2}, ${D.city}, ${D.state} - ${D.pincode}`,
+										paymentMethod: k.toUpperCase(),
+										notes: L,
+										deliveryFee: V.deliveryFee,
+										tax: V.tax,
+										tip: N,
+										total: V.total
 									});
 									alert("Order placed successfully!"), u(`/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: T.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", T.isPending ? "opacity-60 cursor-not-allowed" : "hover:opacity-90"),
+							children: [T.isPending ? /* @__PURE__ */ y(m, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ y(g, { className: "h-4 w-4" }), T.isPending ? "Placing Order..." : `Place Order - ${a(V.total, { minimumFractionDigits: 0 })}`]
 						}),
 						/* @__PURE__ */ y("p", {
 							className: "mt-3 text-center text-xs text-text-secondary",
@@ -527,6 +529,6 @@ function C() {
 	});
 }
 //#endregion
-export { C as CheckoutPage };
+export { w as CheckoutPage };
 
 //# sourceMappingURL=CheckoutPage.js.map