@burdenoff/microfe-atheletebridge 2026.625.1 → 2026.626.1

package/dist/atheletebridge/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, PagePurpose as S } from "@burdenoff/fe-libs/ui";
 //#region src/atheletebridge/pages/customer/CheckoutPage.tsx
-var x = [
+var C = [
 	{
 		id: "cash",
 		label: "Cash on Delivery",
@@ -32,66 +33,66 @@ var x = [
 		icon: v,
 		description: "AthleteBridge Wallet Balance"
 	}
-], S = [
+], w = [
 	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 T() {
+	let { navigateTo: u, currentUser: _ } = e(), { data: v = [], isLoading: T } = r({ customerId: _?.id }), E = i(), D = o(() => v.find((e) => e.status === "pending") || v[0], [v]), [O, k] = s({
 		addressLine1: "",
 		addressLine2: "",
 		city: "Bangalore",
 		state: "Karnataka",
 		pincode: ""
-	}), [O, k] = s("cash"), [A, j] = s({
+	}), [A, j] = s("cash"), [M, N] = s({
 		cardNumber: "",
 		expiryDate: "",
 		cvv: "",
 		upiId: ""
-	}), [M, N] = s(0), [P, F] = s(""), [I, L] = s(""), [R, z] = s(!1), B = o(() => {
-		if (!T) return {
+	}), [P, F] = s(0), [I, L] = s(""), [R, z] = s(""), [B, V] = s(!1), H = o(() => {
+		if (!D) 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 = D.subtotal, t = D.deliveryFee, n = D.taxes, r = D.discount ?? 0;
 		return {
 			subtotal: e,
 			deliveryFee: t,
 			tax: n,
 			discount: r,
-			total: e + t + n + M - r
+			total: e + t + n + P - r
 		};
-	}, [T, M]), V = o(() => T ? T.items.reduce((e, t) => e + t.quantity, 0) : 0, [T]), H = (e, t) => {
-		D((n) => ({
+	}, [D, P]), U = o(() => D ? D.items.reduce((e, t) => e + t.quantity, 0) : 0, [D]), W = (e, t) => {
+		k((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, U = (e, t) => {
-		j((n) => ({
+	}, G = (e, t) => {
+		N((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;
+	}, K = () => {
+		if (!O.addressLine1.trim()) return alert("Please enter delivery address"), !1;
+		if (!O.pincode.trim() || O.pincode.length !== 6) return alert("Please enter a valid 6-digit pincode"), !1;
+		if (A === "card") {
+			if (!M.cardNumber || M.cardNumber.length < 16) return alert("Please enter a valid 16-digit card number"), !1;
+			if (!M.expiryDate) return alert("Please enter card expiry date"), !1;
+			if (!M.cvv || M.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 A === "upi" && !M.upiId.trim() ? (alert("Please enter UPI ID"), !1) : !0;
 	};
-	return C ? /* @__PURE__ */ y(n, {
+	return T ? /* @__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, {
+	}) : D ? /* @__PURE__ */ b(n, {
 		title: /* @__PURE__ */ b("div", {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ y("button", {
@@ -102,7 +103,10 @@ function C() {
 			}), /* @__PURE__ */ y("span", { children: "Checkout" })]
 		}),
 		description: "Review your order and complete payment",
-		children: /* @__PURE__ */ b("div", {
+		children: [/* @__PURE__ */ y(S, {
+			className: "mb-6",
+			children: "The final step before your order is on its way. Confirm where it should be delivered, pick how you'll pay, add a tip or any special instructions, then review the full price breakdown and place your order."
+		}), /* @__PURE__ */ b("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
 			children: [/* @__PURE__ */ b("div", {
 				className: "lg:col-span-2 space-y-6",
@@ -124,8 +128,8 @@ function C() {
 								}), /* @__PURE__ */ y("input", {
 									type: "text",
 									placeholder: "Building, Street, Area",
-									value: E.addressLine1,
-									onChange: (e) => H("addressLine1", e.target.value),
+									value: O.addressLine1,
+									onChange: (e) => W("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 +138,8 @@ function C() {
 								}), /* @__PURE__ */ y("input", {
 									type: "text",
 									placeholder: "Apartment, Suite, Floor (Optional)",
-									value: E.addressLine2,
-									onChange: (e) => H("addressLine2", e.target.value),
+									value: O.addressLine2,
+									onChange: (e) => W("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 +152,8 @@ function C() {
 										})]
 									}), /* @__PURE__ */ y("input", {
 										type: "text",
-										value: E.city,
-										onChange: (e) => H("city", e.target.value),
+										value: O.city,
+										onChange: (e) => W("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 +163,8 @@ function C() {
 										})]
 									}), /* @__PURE__ */ y("input", {
 										type: "text",
-										value: E.state,
-										onChange: (e) => H("state", e.target.value),
+										value: O.state,
+										onChange: (e) => W("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 +178,8 @@ function C() {
 									type: "text",
 									placeholder: "560001",
 									maxLength: 6,
-									value: E.pincode,
-									onChange: (e) => H("pincode", e.target.value.replace(/\D/g, "")),
+									value: O.pincode,
+									onChange: (e) => W("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 +194,12 @@ function C() {
 							}),
 							/* @__PURE__ */ y("div", {
 								className: "space-y-2",
-								children: x.map((e) => {
+								children: C.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: () => j(e.id),
+										className: t("flex w-full items-center gap-4 rounded-lg border p-3 transition-colors text-left", A === 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 +215,12 @@ function C() {
 													children: e.description
 												})]
 											}),
-											O === e.id && /* @__PURE__ */ y(d, { className: "h-5 w-5 text-text-primary shrink-0" })
+											A === e.id && /* @__PURE__ */ y(d, { className: "h-5 w-5 text-text-primary shrink-0" })
 										]
 									}, e.id);
 								})
 							}),
-							O === "card" && /* @__PURE__ */ b("div", {
+							A === "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 +232,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: M.cardNumber,
+									onChange: (e) => G("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 +247,10 @@ function C() {
 										type: "text",
 										placeholder: "MM/YY",
 										maxLength: 5,
-										value: A.expiryDate,
+										value: M.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)), G("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 +263,13 @@ function C() {
 										type: "text",
 										placeholder: "123",
 										maxLength: 3,
-										value: A.cvv,
-										onChange: (e) => U("cvv", e.target.value.replace(/\D/g, "")),
+										value: M.cvv,
+										onChange: (e) => G("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", {
+							A === "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 +280,12 @@ function C() {
 								}), /* @__PURE__ */ y("input", {
 									type: "text",
 									placeholder: "user@paytm",
-									value: A.upiId,
-									onChange: (e) => U("upiId", e.target.value),
+									value: M.upiId,
+									onChange: (e) => G("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", {
+							A === "wallet" && /* @__PURE__ */ b("div", {
 								className: "mt-4 flex items-start gap-3 rounded-lg bg-blue-500/10 p-4 border border-blue-500/20",
 								children: [/* @__PURE__ */ y(c, { className: "h-4 w-4 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" }), /* @__PURE__ */ y("p", {
 									className: "text-sm text-blue-600 dark:text-blue-400",
@@ -304,22 +308,22 @@ function C() {
 								}),
 								/* @__PURE__ */ y("div", {
 									className: "flex flex-wrap gap-2 mb-3",
-									children: S.map((e) => /* @__PURE__ */ y("button", {
+									children: w.map((e) => /* @__PURE__ */ y("button", {
 										type: "button",
 										onClick: () => {
-											N(e), F("");
+											F(e), L("");
 										},
-										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", P === e && I === "" ? "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: I,
 									onChange: (e) => {
 										let t = e.target.value;
-										F(t), N(parseInt(t) || 0);
+										L(t), F(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 +333,8 @@ function C() {
 							}), /* @__PURE__ */ y("textarea", {
 								rows: 3,
 								placeholder: "Any special requests for your order...",
-								value: I,
-								onChange: (e) => L(e.target.value),
+								value: R,
+								onChange: (e) => z(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 +342,8 @@ function C() {
 				]
 			}), /* @__PURE__ */ y("div", {
 				className: "lg:col-span-1",
-				children: /* @__PURE__ */ b("div", {
-					className: "sticky top-6 rounded-lg border border-border-subtle bg-bg-surface p-5",
+				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 +354,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: D.cartImage,
+									alt: D.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: D.cartName
 							}), /* @__PURE__ */ b("p", {
 								className: "text-xs text-text-secondary",
 								children: [
-									T.items.length,
+									D.items.length,
 									" item",
-									T.items.length === 1 ? "" : "s"
+									D.items.length === 1 ? "" : "s"
 								]
 							})] })]
 						}),
 						/* @__PURE__ */ y("div", {
 							className: "space-y-2 mb-4",
-							children: T.items.map((e) => /* @__PURE__ */ b("div", {
+							children: D.items.map((e) => /* @__PURE__ */ b("div", {
 								className: "flex justify-between items-start",
 								children: [/* @__PURE__ */ b("div", {
 									className: "flex-1 min-w-0",
@@ -405,12 +409,12 @@ function C() {
 										className: "text-text-secondary",
 										children: [
 											"Subtotal (",
-											V,
+											U,
 											" items)"
 										]
 									}), /* @__PURE__ */ y("span", {
 										className: "text-text-primary",
-										children: a(B.subtotal, { minimumFractionDigits: 0 })
+										children: a(H.subtotal, { minimumFractionDigits: 0 })
 									})]
 								}),
 								/* @__PURE__ */ b("div", {
@@ -420,7 +424,7 @@ function C() {
 										children: "Delivery Fee"
 									}), /* @__PURE__ */ y("span", {
 										className: "text-text-primary",
-										children: B.deliveryFee === 0 ? "FREE" : a(B.deliveryFee, { minimumFractionDigits: 0 })
+										children: H.deliveryFee === 0 ? "FREE" : a(H.deliveryFee, { minimumFractionDigits: 0 })
 									})]
 								}),
 								/* @__PURE__ */ b("div", {
@@ -430,27 +434,27 @@ function C() {
 										children: "Tax"
 									}), /* @__PURE__ */ y("span", {
 										className: "text-text-primary",
-										children: a(B.tax, { minimumFractionDigits: 0 })
+										children: a(H.tax, { minimumFractionDigits: 0 })
 									})]
 								}),
-								M > 0 && /* @__PURE__ */ b("div", {
+								P > 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(P, { minimumFractionDigits: 0 })
 									})]
 								}),
-								B.discount && B.discount > 0 && /* @__PURE__ */ b("div", {
+								H.discount && H.discount > 0 && /* @__PURE__ */ b("div", {
 									className: "flex justify-between",
 									children: [/* @__PURE__ */ y("span", {
 										className: "text-green-600 dark:text-green-400",
 										children: "Discount"
 									}), /* @__PURE__ */ b("span", {
 										className: "text-green-600 dark:text-green-400",
-										children: ["-", a(B.discount, { minimumFractionDigits: 0 })]
+										children: ["-", a(H.discount, { minimumFractionDigits: 0 })]
 									})]
 								})
 							]
@@ -462,37 +466,37 @@ function C() {
 								children: "Total"
 							}), /* @__PURE__ */ y("span", {
 								className: "text-base font-bold text-text-primary",
-								children: a(B.total, { minimumFractionDigits: 0 })
+								children: a(H.total, { minimumFractionDigits: 0 })
 							})]
 						}),
 						/* @__PURE__ */ b("button", {
 							type: "button",
 							onClick: async () => {
-								if (!(!W() || !T)) try {
-									let e = await w.mutateAsync({
-										providerId: T.cartId,
+								if (!(!K() || !D)) try {
+									let e = await E.mutateAsync({
+										providerId: D.cartId,
 										customerId: _?.id,
-										items: T.items.map((e) => ({
+										items: D.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: `${O.addressLine1}, ${O.addressLine2}, ${O.city}, ${O.state} - ${O.pincode}`,
+										paymentMethod: A.toUpperCase(),
+										notes: R,
+										deliveryFee: H.deliveryFee,
+										tax: H.tax,
+										tip: P,
+										total: H.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: E.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", E.isPending ? "opacity-60 cursor-not-allowed" : "hover:opacity-90"),
+							children: [E.isPending ? /* @__PURE__ */ y(m, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ y(g, { className: "h-4 w-4" }), E.isPending ? "Placing Order..." : `Place Order - ${a(H.total, { minimumFractionDigits: 0 })}`]
 						}),
 						/* @__PURE__ */ y("p", {
 							className: "mt-3 text-center text-xs text-text-secondary",
@@ -501,7 +505,7 @@ function C() {
 					]
 				})
 			})]
-		})
+		})]
 	}) : /* @__PURE__ */ y(n, {
 		title: "Checkout",
 		children: /* @__PURE__ */ b("div", {
@@ -527,6 +531,6 @@ function C() {
 	});
 }
 //#endregion
-export { C as CheckoutPage };
+export { T as CheckoutPage };
 
 //# sourceMappingURL=CheckoutPage.js.map