@burdenoff/microfe-kadaikodi 2026.626.2 → 2026.704.2

package/dist/kadaikodi/pages/customer/DirectServiceBookingPage.js

@@ -2,13 +2,13 @@ import { useKadaikodi as e } from "../../context/KadaikodiContext.js";
 import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
 import { EmptyState as r } from "../../components/EmptyState.js";
-import { formatCurrency as i } from "../../utils/formatters.js";
-import { getCartById as a } from "../../mocks/data.js";
-import { useMemo as o, useState as s } from "react";
-import { AlertCircle as c, ArrowLeft as l, ArrowRight as u, Calendar as d, CheckCircle2 as f, Clock as p, CreditCard as m, Home as h, Loader2 as g, MapPin as _, Navigation as v, Phone as y, Smartphone as b, Wallet as x } from "lucide-react";
-import { useParams as S } from "react-router-dom";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
-import { EmphasisPanel as E, PagePurpose as D } from "@burdenoff/fe-libs/ui";
+import { useOfferings as i, usePlaceOrder as a, useProvider as o } from "../../hooks/useKadaikodiApi.js";
+import { formatCurrency as s } from "../../utils/formatters.js";
+import { useState as c } from "react";
+import { AlertCircle as l, ArrowLeft as u, ArrowRight as d, Calendar as f, CheckCircle2 as p, Clock as m, CreditCard as h, Home as g, Loader2 as _, MapPin as v, Navigation as y, Phone as b, Smartphone as x, Wallet as S } from "lucide-react";
+import { useParams as C } from "react-router-dom";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { EmphasisPanel as ee, PagePurpose as D } from "@burdenoff/fe-libs/ui";
 //#region src/kadaikodi/pages/customer/DirectServiceBookingPage.tsx
 var O = [
 	"location",
@@ -36,23 +36,30 @@ function A() {
 	return e;
 }
 function j() {
-	let { cartId: j } = S(), { navigateTo: M } = e(), N = o(() => j ? a(j) : void 0, [j]), [P, F] = s("location"), [I, L] = s(!1), [R, z] = s({
+	let { cartId: j } = C(), { navigateTo: M, currentUser: N } = e(), { data: P, isLoading: F } = o(j), { data: I = [] } = i(j), L = a(), R = I[0], [z, B] = c("location"), [V, H] = c(!1), [U, W] = c({
 		address: "",
 		landmark: "",
 		instructions: "",
 		phoneNumber: ""
-	}), [B, V] = s({
+	}), [G, K] = c({
 		preferredTime: "",
 		specialInstructions: "",
 		isUrgent: !1
-	}), [H, U] = s("upi"), [W, G] = s(null);
-	if (!N) return /* @__PURE__ */ w(n, {
+	}), [q, J] = c("upi"), [Y, X] = c(null), Z = R?.price ?? 0, Q = Math.round(Z * .2), $ = Z - Q, te = Z;
+	if (F) return /* @__PURE__ */ T(n, {
+		title: "Book Direct Service",
+		children: /* @__PURE__ */ T("div", {
+			className: "flex items-center justify-center py-20",
+			children: /* @__PURE__ */ T("div", { className: "h-12 w-12 animate-spin rounded-full border-b-2 border-foreground" })
+		})
+	});
+	if (!P) return /* @__PURE__ */ T(n, {
 		title: "Cart Not Found",
-		children: /* @__PURE__ */ w(r, {
-			icon: /* @__PURE__ */ w(h, { className: "h-12 w-12" }),
+		children: /* @__PURE__ */ T(r, {
+			icon: /* @__PURE__ */ T(g, { className: "h-12 w-12" }),
 			title: "Service not available",
 			description: "Direct service is not available for this cart.",
-			action: /* @__PURE__ */ w("button", {
+			action: /* @__PURE__ */ T("button", {
 				type: "button",
 				onClick: () => M("/customer/carts"),
 				className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
@@ -60,154 +67,187 @@ function j() {
 			})
 		})
 	});
-	let K = A(), q = O.indexOf(P), J = () => {
+	let ne = A(), re = O.indexOf(z), ie = () => {
 		if (!navigator.geolocation) {
 			alert("Geolocation is not supported by this browser.");
 			return;
 		}
 		navigator.geolocation.getCurrentPosition(() => {
-			z((e) => ({
+			W((e) => ({
 				...e,
 				address: e.address || "Current location detected"
 			})), alert("Location detected successfully!");
 		}, () => {
 			alert("Failed to get your location. Please enter address manually.");
 		});
-	}, Y = () => R.address.trim() ? R.phoneNumber.trim() ? !0 : (alert("Please enter your phone number."), !1) : (alert("Please enter your address."), !1), X = () => B.preferredTime ? !0 : (alert("Please select a preferred time slot."), !1), Z = () => {
-		P === "location" && Y() ? F("details") : P === "details" && X() ? F("payment") : P === "payment" && $();
-	}, Q = () => {
-		P === "details" ? F("location") : P === "payment" && F("details");
-	}, $ = () => {
-		L(!0), setTimeout(() => {
-			G({
-				bookingId: `BK-${Date.now()}`,
-				transactionId: `TXN-${Date.now()}`,
-				estimatedArrival: new Date(Date.now() + 30 * 6e4).toISOString()
-			}), F("confirmation"), L(!1);
-		}, 1500);
+	}, ae = () => U.address.trim() ? U.phoneNumber.trim() ? !0 : (alert("Please enter your phone number."), !1) : (alert("Please enter your address."), !1), oe = () => G.preferredTime ? !0 : (alert("Please select a preferred time slot."), !1), se = () => {
+		z === "location" && ae() ? B("details") : z === "details" && oe() ? B("payment") : z === "payment" && le();
+	}, ce = () => {
+		z === "details" ? B("location") : z === "payment" && B("details");
+	}, le = () => {
+		H(!0);
+		let e = new Date(Date.now() + 30 * 6e4).toISOString();
+		if (P && R && N?.id) {
+			L.mutate({
+				providerId: P.id,
+				customerId: N.id,
+				fulfillmentType: "delivery",
+				paymentMethod: q,
+				tax: 0,
+				items: [{
+					name: R.name,
+					offeringId: R.id,
+					quantity: 1,
+					unitPrice: Z
+				}],
+				notes: [U.instructions, G.specialInstructions].filter(Boolean).join(" | ") || void 0,
+				deliveryAddress: {
+					street: U.address,
+					landmark: U.landmark
+				}
+			}, {
+				onSuccess: (t) => {
+					X({
+						bookingId: t.orderNumber || t.id,
+						transactionId: `TXN-${t.id}`,
+						estimatedArrival: e
+					}), B("confirmation"), H(!1);
+				},
+				onError: () => {
+					H(!1), alert("Could not place your booking. Please try again.");
+				}
+			});
+			return;
+		}
+		let t = `BK-${Date.now()}`;
+		X({
+			bookingId: t,
+			transactionId: t,
+			estimatedArrival: e
+		}), B("confirmation"), H(!1);
 	};
-	return /* @__PURE__ */ T(n, {
-		title: /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ E(n, {
+		title: /* @__PURE__ */ E("div", {
 			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ w("button", {
+			children: [/* @__PURE__ */ T("button", {
 				type: "button",
-				onClick: () => M(`/customer/carts/${N.id}`),
+				onClick: () => M(`/customer/carts/${P.id}`),
 				className: "rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
-				children: /* @__PURE__ */ w(l, { className: "h-5 w-5" })
-			}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", { children: "Book Direct Service" }), /* @__PURE__ */ w("p", {
+				children: /* @__PURE__ */ T(u, { className: "h-5 w-5" })
+			}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", { children: "Book Direct Service" }), /* @__PURE__ */ T("p", {
 				className: "text-xs font-normal text-text-secondary",
-				children: N.name
+				children: P.name
 			})] })]
 		}),
 		children: [
-			/* @__PURE__ */ w(D, {
+			/* @__PURE__ */ T(D, {
 				className: "mb-6",
 				children: "Book a service directly from this cart in a few guided steps — tell us where and when you need it, add any details, then confirm. Follow the progress bar below to know what's left."
 			}),
-			/* @__PURE__ */ w(E, {
+			/* @__PURE__ */ T(ee, {
 				className: "mb-6",
-				children: /* @__PURE__ */ w("div", {
+				children: /* @__PURE__ */ T("div", {
 					className: "flex items-center justify-between px-2",
 					children: O.map((e, n) => {
-						let r = n < q, i = e === P;
-						return /* @__PURE__ */ T("div", {
+						let r = n < re, i = e === z;
+						return /* @__PURE__ */ E("div", {
 							className: "flex items-center",
-							children: [/* @__PURE__ */ T("div", {
+							children: [/* @__PURE__ */ E("div", {
 								className: "flex flex-col items-center",
-								children: [/* @__PURE__ */ w("div", {
+								children: [/* @__PURE__ */ T("div", {
 									className: t("flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium", r ? "bg-status-success-bg-subtle text-status-success-text" : i ? "bg-foreground text-background" : "bg-bg-sunken text-text-secondary"),
-									children: r ? /* @__PURE__ */ w(f, { className: "h-4 w-4" }) : n + 1
-								}), /* @__PURE__ */ w("span", {
+									children: r ? /* @__PURE__ */ T(p, { className: "h-4 w-4" }) : n + 1
+								}), /* @__PURE__ */ T("span", {
 									className: t("mt-1 text-[10px]", i ? "font-medium text-text-primary" : "text-text-secondary"),
 									children: k[e]
 								})]
-							}), n < O.length - 1 && /* @__PURE__ */ w("div", { className: t("mx-2 h-0.5 w-8 sm:w-16", r ? "bg-status-success-bg-subtle" : "bg-border") })]
+							}), n < O.length - 1 && /* @__PURE__ */ T("div", { className: t("mx-2 h-0.5 w-8 sm:w-16", r ? "bg-status-success-bg-subtle" : "bg-border") })]
 						}, e);
 					})
 				})
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ E("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ T("div", {
+				children: [/* @__PURE__ */ E("div", {
 					className: "lg:col-span-2",
 					children: [
-						P === "location" && /* @__PURE__ */ T("div", {
+						z === "location" && /* @__PURE__ */ E("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 							children: [
-								/* @__PURE__ */ T("h2", {
+								/* @__PURE__ */ E("h2", {
 									className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
-									children: [/* @__PURE__ */ w(_, { className: "h-4 w-4" }), "Service Location"]
+									children: [/* @__PURE__ */ T(v, { className: "h-4 w-4" }), "Service Location"]
 								}),
-								/* @__PURE__ */ w("p", {
+								/* @__PURE__ */ T("p", {
 									className: "text-xs text-text-secondary mb-5",
 									children: "Where should the cart come?"
 								}),
-								/* @__PURE__ */ T("div", {
+								/* @__PURE__ */ E("div", {
 									className: "space-y-4",
 									children: [
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
-											children: ["Your Address ", /* @__PURE__ */ w("span", {
+											children: ["Your Address ", /* @__PURE__ */ T("span", {
 												className: "text-status-error-text",
 												children: "*"
 											})]
-										}), /* @__PURE__ */ T("div", {
+										}), /* @__PURE__ */ E("div", {
 											className: "flex gap-2",
-											children: [/* @__PURE__ */ w("input", {
+											children: [/* @__PURE__ */ T("input", {
 												type: "text",
 												placeholder: "Enter your full address",
-												value: R.address,
-												onChange: (e) => z((t) => ({
+												value: U.address,
+												onChange: (e) => W((t) => ({
 													...t,
 													address: e.target.value
 												})),
 												className: "flex-1 rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-											}), /* @__PURE__ */ T("button", {
+											}), /* @__PURE__ */ E("button", {
 												type: "button",
-												onClick: J,
+												onClick: ie,
 												className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors whitespace-nowrap",
-												children: [/* @__PURE__ */ w(v, { className: "h-3.5 w-3.5" }), "Use Current Location"]
+												children: [/* @__PURE__ */ T(y, { className: "h-3.5 w-3.5" }), "Use Current Location"]
 											})]
 										})] }),
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
 											children: "Nearby Landmark"
-										}), /* @__PURE__ */ w("input", {
+										}), /* @__PURE__ */ T("input", {
 											type: "text",
 											placeholder: "e.g., Near Metro Station, Opposite Mall",
-											value: R.landmark,
-											onChange: (e) => z((t) => ({
+											value: U.landmark,
+											onChange: (e) => W((t) => ({
 												...t,
 												landmark: e.target.value
 											})),
 											className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 										})] }),
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
 											children: "Instructions for Cart Owner"
-										}), /* @__PURE__ */ w("textarea", {
+										}), /* @__PURE__ */ T("textarea", {
 											rows: 3,
 											placeholder: "Any specific instructions to help us find you...",
-											value: R.instructions,
-											onChange: (e) => z((t) => ({
+											value: U.instructions,
+											onChange: (e) => W((t) => ({
 												...t,
 												instructions: e.target.value
 											})),
 											className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
 										})] }),
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
-											children: ["Phone Number ", /* @__PURE__ */ w("span", {
+											children: ["Phone Number ", /* @__PURE__ */ T("span", {
 												className: "text-status-error-text",
 												children: "*"
 											})]
-										}), /* @__PURE__ */ T("div", {
+										}), /* @__PURE__ */ E("div", {
 											className: "relative",
-											children: [/* @__PURE__ */ w(y, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ w("input", {
+											children: [/* @__PURE__ */ T(b, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ T("input", {
 												type: "tel",
 												placeholder: "Enter your phone number",
-												value: R.phoneNumber,
-												onChange: (e) => z((t) => ({
+												value: U.phoneNumber,
+												onChange: (e) => W((t) => ({
 													...t,
 													phoneNumber: e.target.value
 												})),
@@ -218,62 +258,62 @@ function j() {
 								})
 							]
 						}),
-						P === "details" && /* @__PURE__ */ T("div", {
+						z === "details" && /* @__PURE__ */ E("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 							children: [
-								/* @__PURE__ */ T("h2", {
+								/* @__PURE__ */ E("h2", {
 									className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
-									children: [/* @__PURE__ */ w(d, { className: "h-4 w-4" }), "Booking Details"]
+									children: [/* @__PURE__ */ T(f, { className: "h-4 w-4" }), "Booking Details"]
 								}),
-								/* @__PURE__ */ w("p", {
+								/* @__PURE__ */ T("p", {
 									className: "text-xs text-text-secondary mb-5",
 									children: "Choose your preferred timing"
 								}),
-								/* @__PURE__ */ T("div", {
+								/* @__PURE__ */ E("div", {
 									className: "space-y-4",
 									children: [
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
-											children: ["Preferred Time Slot ", /* @__PURE__ */ w("span", {
+											children: ["Preferred Time Slot ", /* @__PURE__ */ T("span", {
 												className: "text-status-error-text",
 												children: "*"
 											})]
-										}), /* @__PURE__ */ w("div", {
+										}), /* @__PURE__ */ T("div", {
 											className: "grid grid-cols-4 gap-2",
-											children: K.map((e) => /* @__PURE__ */ w("button", {
+											children: ne.map((e) => /* @__PURE__ */ T("button", {
 												type: "button",
-												onClick: () => V((t) => ({
+												onClick: () => K((t) => ({
 													...t,
 													preferredTime: e.value
 												})),
-												className: t("rounded-lg border py-2 px-2 text-xs font-medium transition-colors", B.preferredTime === e.value ? "border-foreground bg-accent text-text-primary" : "border-border-subtle text-text-secondary hover:bg-accent hover:text-text-primary"),
+												className: t("rounded-lg border py-2 px-2 text-xs font-medium transition-colors", G.preferredTime === e.value ? "border-foreground bg-accent text-text-primary" : "border-border-subtle text-text-secondary hover:bg-accent hover:text-text-primary"),
 												children: e.label
 											}, e.value))
 										})] }),
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
 											children: "Special Instructions"
-										}), /* @__PURE__ */ w("textarea", {
+										}), /* @__PURE__ */ T("textarea", {
 											rows: 3,
 											placeholder: "Any special requests or dietary preferences...",
-											value: B.specialInstructions,
-											onChange: (e) => V((t) => ({
+											value: G.specialInstructions,
+											onChange: (e) => K((t) => ({
 												...t,
 												specialInstructions: e.target.value
 											})),
 											className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
 										})] }),
-										/* @__PURE__ */ T("label", {
+										/* @__PURE__ */ E("label", {
 											className: "flex items-center gap-2 cursor-pointer",
-											children: [/* @__PURE__ */ w("input", {
+											children: [/* @__PURE__ */ T("input", {
 												type: "checkbox",
-												checked: B.isUrgent,
-												onChange: (e) => V((t) => ({
+												checked: G.isUrgent,
+												onChange: (e) => K((t) => ({
 													...t,
 													isUrgent: e.target.checked
 												})),
 												className: "h-4 w-4 rounded border-border-subtle"
-											}), /* @__PURE__ */ w("span", {
+											}), /* @__PURE__ */ T("span", {
 												className: "text-sm text-text-secondary",
 												children: "This is urgent (additional charges may apply)"
 											})]
@@ -282,110 +322,110 @@ function j() {
 								})
 							]
 						}),
-						P === "payment" && /* @__PURE__ */ T("div", {
+						z === "payment" && /* @__PURE__ */ E("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 							children: [
-								/* @__PURE__ */ T("h2", {
+								/* @__PURE__ */ E("h2", {
 									className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
-									children: [/* @__PURE__ */ w(m, { className: "h-4 w-4" }), "Advance Payment"]
+									children: [/* @__PURE__ */ T(h, { className: "h-4 w-4" }), "Advance Payment"]
 								}),
-								/* @__PURE__ */ w("p", {
+								/* @__PURE__ */ T("p", {
 									className: "text-xs text-text-secondary mb-5",
 									children: "Select your payment method"
 								}),
-								/* @__PURE__ */ T("div", {
+								/* @__PURE__ */ E("div", {
 									className: "space-y-4",
 									children: [
-										/* @__PURE__ */ T("div", {
+										/* @__PURE__ */ E("div", {
 											className: "flex items-start gap-2 rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-3",
-											children: [/* @__PURE__ */ w(c, { className: "h-4 w-4 text-text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ T("p", {
+											children: [/* @__PURE__ */ T(l, { className: "h-4 w-4 text-text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ E("p", {
 												className: "text-xs text-text-primary",
 												children: [
 													"You need to pay ",
-													i(100, { minimumFractionDigits: 0 }),
+													s(Q, { minimumFractionDigits: 0 }),
 													" ",
 													"in advance to confirm your booking. Pay the remaining when the cart arrives."
 												]
 											})]
 										}),
-										/* @__PURE__ */ w("div", {
+										/* @__PURE__ */ T("div", {
 											className: "grid grid-cols-1 sm:grid-cols-3 gap-3",
 											children: [
 												{
 													value: "upi",
 													label: "UPI",
 													sub: "Instant payment",
-													Icon: b
+													Icon: x
 												},
 												{
 													value: "card",
 													label: "Card",
 													sub: "Secure payment",
-													Icon: m
+													Icon: h
 												},
 												{
 													value: "wallet",
 													label: "Wallet",
 													sub: "Quick payment",
-													Icon: x
+													Icon: S
 												}
-											].map(({ value: e, label: n, sub: r, Icon: i }) => /* @__PURE__ */ T("button", {
+											].map(({ value: e, label: n, sub: r, Icon: i }) => /* @__PURE__ */ E("button", {
 												type: "button",
-												onClick: () => U(e),
-												className: t("rounded-lg border p-3 text-center transition-colors", H === e ? "border-foreground bg-accent" : "border-border-subtle hover:bg-accent"),
+												onClick: () => J(e),
+												className: t("rounded-lg border p-3 text-center transition-colors", q === e ? "border-foreground bg-accent" : "border-border-subtle hover:bg-accent"),
 												children: [
-													/* @__PURE__ */ w(i, { className: "mx-auto h-5 w-5 text-text-secondary mb-1" }),
-													/* @__PURE__ */ w("p", {
+													/* @__PURE__ */ T(i, { className: "mx-auto h-5 w-5 text-text-secondary mb-1" }),
+													/* @__PURE__ */ T("p", {
 														className: "text-sm font-medium text-text-primary",
 														children: n
 													}),
-													/* @__PURE__ */ w("p", {
+													/* @__PURE__ */ T("p", {
 														className: "text-[10px] text-text-secondary",
 														children: r
 													})
 												]
 											}, e))
 										}),
-										/* @__PURE__ */ T("div", {
+										/* @__PURE__ */ E("div", {
 											className: "rounded-lg bg-bg-sunken p-4",
-											children: [/* @__PURE__ */ w("h3", {
+											children: [/* @__PURE__ */ T("h3", {
 												className: "text-sm font-medium text-text-primary mb-2",
 												children: "Payment Summary"
-											}), /* @__PURE__ */ T("div", {
+											}), /* @__PURE__ */ E("div", {
 												className: "space-y-2 text-sm",
 												children: [
-													/* @__PURE__ */ T("div", {
+													/* @__PURE__ */ E("div", {
 														className: "flex justify-between",
-														children: [/* @__PURE__ */ w("span", {
+														children: [/* @__PURE__ */ T("span", {
 															className: "text-text-secondary",
 															children: "Advance Payment:"
-														}), /* @__PURE__ */ w("span", {
+														}), /* @__PURE__ */ T("span", {
 															className: "text-text-primary",
-															children: i(100, { minimumFractionDigits: 0 })
+															children: s(Q, { minimumFractionDigits: 0 })
 														})]
 													}),
-													/* @__PURE__ */ T("div", {
+													/* @__PURE__ */ E("div", {
 														className: "flex justify-between",
-														children: [/* @__PURE__ */ w("span", {
+														children: [/* @__PURE__ */ T("span", {
 															className: "text-text-secondary",
 															children: "Service Fee:"
-														}), /* @__PURE__ */ w("span", {
+														}), /* @__PURE__ */ T("span", {
 															className: "text-text-primary",
-															children: i(50, { minimumFractionDigits: 0 })
+															children: s(Z, { minimumFractionDigits: 0 })
 														})]
 													}),
-													/* @__PURE__ */ T("div", {
+													/* @__PURE__ */ E("div", {
 														className: "flex justify-between text-text-secondary",
-														children: [/* @__PURE__ */ w("span", { children: "Balance Payment (at arrival):" }), /* @__PURE__ */ w("span", { children: i(50, { minimumFractionDigits: 0 }) })]
+														children: [/* @__PURE__ */ T("span", { children: "Balance Payment (at arrival):" }), /* @__PURE__ */ T("span", { children: s($, { minimumFractionDigits: 0 }) })]
 													}),
-													/* @__PURE__ */ T("div", {
+													/* @__PURE__ */ E("div", {
 														className: "flex justify-between border-t border-border-subtle pt-2 font-semibold",
-														children: [/* @__PURE__ */ w("span", {
+														children: [/* @__PURE__ */ T("span", {
 															className: "text-text-primary",
 															children: "Total Amount:"
-														}), /* @__PURE__ */ w("span", {
+														}), /* @__PURE__ */ T("span", {
 															className: "text-text-primary",
-															children: i(150, { minimumFractionDigits: 0 })
+															children: s(te, { minimumFractionDigits: 0 })
 														})]
 													})
 												]
@@ -395,140 +435,140 @@ function j() {
 								})
 							]
 						}),
-						P === "confirmation" && W && /* @__PURE__ */ T("div", {
+						z === "confirmation" && Y && /* @__PURE__ */ E("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 							children: [
-								/* @__PURE__ */ T("div", {
+								/* @__PURE__ */ E("div", {
 									className: "text-center mb-6",
 									children: [
-										/* @__PURE__ */ w("div", {
+										/* @__PURE__ */ T("div", {
 											className: "mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-status-success-bg-subtle",
-											children: /* @__PURE__ */ w(f, { className: "h-7 w-7 text-status-success-text" })
+											children: /* @__PURE__ */ T(p, { className: "h-7 w-7 text-status-success-text" })
 										}),
-										/* @__PURE__ */ w("h2", {
+										/* @__PURE__ */ T("h2", {
 											className: "text-lg font-semibold text-text-primary mb-1",
 											children: "Booking Confirmed!"
 										}),
-										/* @__PURE__ */ w("p", {
+										/* @__PURE__ */ T("p", {
 											className: "text-sm text-text-secondary",
 											children: "Your direct service booking has been confirmed and payment processed."
 										})
 									]
 								}),
-								/* @__PURE__ */ T("div", {
+								/* @__PURE__ */ E("div", {
 									className: "rounded-lg bg-bg-sunken p-4 mb-4",
-									children: [/* @__PURE__ */ w("h3", {
+									children: [/* @__PURE__ */ T("h3", {
 										className: "text-sm font-medium text-text-primary mb-3",
 										children: "Booking Details"
-									}), /* @__PURE__ */ T("div", {
+									}), /* @__PURE__ */ E("div", {
 										className: "grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm",
 										children: [
-											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
 												className: "text-xs text-text-secondary",
 												children: "Booking ID"
-											}), /* @__PURE__ */ w("p", {
+											}), /* @__PURE__ */ T("p", {
 												className: "font-mono text-xs text-text-primary",
-												children: W.bookingId
+												children: Y.bookingId
 											})] }),
-											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
 												className: "text-xs text-text-secondary",
 												children: "Est. Arrival"
-											}), /* @__PURE__ */ w("p", {
+											}), /* @__PURE__ */ T("p", {
 												className: "text-text-primary",
-												children: new Date(W.estimatedArrival).toLocaleTimeString([], {
+												children: new Date(Y.estimatedArrival).toLocaleTimeString([], {
 													hour: "2-digit",
 													minute: "2-digit"
 												})
 											})] }),
-											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
 												className: "text-xs text-text-secondary",
 												children: "Location"
-											}), /* @__PURE__ */ w("p", {
+											}), /* @__PURE__ */ T("p", {
 												className: "text-text-primary truncate",
-												children: R.address
+												children: U.address
 											})] }),
-											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
 												className: "text-xs text-text-secondary",
 												children: "Phone"
-											}), /* @__PURE__ */ w("p", {
+											}), /* @__PURE__ */ T("p", {
 												className: "text-text-primary",
-												children: R.phoneNumber
+												children: U.phoneNumber
 											})] })
 										]
 									})]
 								}),
-								/* @__PURE__ */ T("div", {
+								/* @__PURE__ */ E("div", {
 									className: "rounded-lg border border-status-success-text/20 bg-status-success-bg-subtle p-4 mb-4",
-									children: [/* @__PURE__ */ T("h3", {
+									children: [/* @__PURE__ */ E("h3", {
 										className: "text-sm font-medium text-status-success-text mb-2 flex items-center gap-2",
-										children: [/* @__PURE__ */ w(f, { className: "h-4 w-4" }), "Payment Processed"]
-									}), /* @__PURE__ */ T("div", {
+										children: [/* @__PURE__ */ T(p, { className: "h-4 w-4" }), "Payment Processed"]
+									}), /* @__PURE__ */ E("div", {
 										className: "grid grid-cols-2 gap-3 text-sm",
 										children: [
-											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
 												className: "text-xs text-text-secondary",
 												children: "Transaction ID"
-											}), /* @__PURE__ */ w("p", {
+											}), /* @__PURE__ */ T("p", {
 												className: "font-mono text-xs text-text-primary",
-												children: W.transactionId
+												children: Y.transactionId
 											})] }),
-											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
 												className: "text-xs text-text-secondary",
 												children: "Advance Paid"
-											}), /* @__PURE__ */ w("p", {
+											}), /* @__PURE__ */ T("p", {
 												className: "font-medium text-text-primary",
-												children: i(100, { minimumFractionDigits: 0 })
+												children: s(Q, { minimumFractionDigits: 0 })
 											})] }),
-											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
 												className: "text-xs text-text-secondary",
 												children: "Method"
-											}), /* @__PURE__ */ w("p", {
+											}), /* @__PURE__ */ T("p", {
 												className: "capitalize text-text-primary",
-												children: H
+												children: q
 											})] }),
-											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
 												className: "text-xs text-text-secondary",
 												children: "Status"
-											}), /* @__PURE__ */ w("p", {
+											}), /* @__PURE__ */ T("p", {
 												className: "font-medium text-status-success-text",
 												children: "Paid"
 											})] })
 										]
 									})]
 								}),
-								/* @__PURE__ */ T("div", {
+								/* @__PURE__ */ E("div", {
 									className: "rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-4 mb-6",
-									children: [/* @__PURE__ */ w("h3", {
+									children: [/* @__PURE__ */ T("h3", {
 										className: "text-sm font-medium text-text-primary mb-2",
 										children: "Next Steps"
-									}), /* @__PURE__ */ T("div", {
+									}), /* @__PURE__ */ E("div", {
 										className: "space-y-2 text-xs text-text-primary",
 										children: [
-											/* @__PURE__ */ T("div", {
+											/* @__PURE__ */ E("div", {
 												className: "flex items-start gap-2",
-												children: [/* @__PURE__ */ w(f, { className: "h-3.5 w-3.5 text-status-success-text mt-0.5 shrink-0" }), /* @__PURE__ */ T("span", { children: [
+												children: [/* @__PURE__ */ T(p, { className: "h-3.5 w-3.5 text-status-success-text mt-0.5 shrink-0" }), /* @__PURE__ */ E("span", { children: [
 													"Payment confirmed -",
 													" ",
-													i(100, { minimumFractionDigits: 0 }),
+													s(Q, { minimumFractionDigits: 0 }),
 													" paid"
 												] })]
 											}),
-											/* @__PURE__ */ T("div", {
+											/* @__PURE__ */ E("div", {
 												className: "flex items-start gap-2",
-												children: [/* @__PURE__ */ w(p, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), /* @__PURE__ */ T("span", { children: [
+												children: [/* @__PURE__ */ T(m, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), /* @__PURE__ */ E("span", { children: [
 													"Cart will arrive around",
 													" ",
-													new Date(W.estimatedArrival).toLocaleTimeString([], {
+													new Date(Y.estimatedArrival).toLocaleTimeString([], {
 														hour: "2-digit",
 														minute: "2-digit"
 													})
 												] })]
 											}),
-											/* @__PURE__ */ T("div", {
+											/* @__PURE__ */ E("div", {
 												className: "flex items-start gap-2",
-												children: [/* @__PURE__ */ w(m, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), /* @__PURE__ */ T("span", { children: [
+												children: [/* @__PURE__ */ T(h, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), /* @__PURE__ */ E("span", { children: [
 													"Pay remaining ",
-													i(50, { minimumFractionDigits: 0 }),
+													s($, { minimumFractionDigits: 0 }),
 													" ",
 													"when cart arrives"
 												] })]
@@ -536,14 +576,14 @@ function j() {
 										]
 									})]
 								}),
-								/* @__PURE__ */ T("div", {
+								/* @__PURE__ */ E("div", {
 									className: "flex gap-3",
-									children: [/* @__PURE__ */ w("button", {
+									children: [/* @__PURE__ */ T("button", {
 										type: "button",
-										onClick: () => M(`/customer/bookings/${W.bookingId}`),
+										onClick: () => M(`/customer/bookings/${Y.bookingId}`),
 										className: "flex-1 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity",
 										children: "View Booking"
-									}), /* @__PURE__ */ w("button", {
+									}), /* @__PURE__ */ T("button", {
 										type: "button",
 										onClick: () => M("/customer/carts"),
 										className: "flex-1 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
@@ -552,71 +592,71 @@ function j() {
 								})
 							]
 						}),
-						P !== "confirmation" && /* @__PURE__ */ T("div", {
+						z !== "confirmation" && /* @__PURE__ */ E("div", {
 							className: "flex justify-between mt-5",
-							children: [/* @__PURE__ */ T("button", {
+							children: [/* @__PURE__ */ E("button", {
 								type: "button",
-								onClick: Q,
-								disabled: P === "location",
-								className: t("flex items-center gap-2 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary transition-colors", P === "location" ? "opacity-40 cursor-not-allowed" : "hover:bg-accent"),
-								children: [/* @__PURE__ */ w(l, { className: "h-4 w-4" }), "Previous"]
-							}), /* @__PURE__ */ w("button", {
+								onClick: ce,
+								disabled: z === "location",
+								className: t("flex items-center gap-2 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary transition-colors", z === "location" ? "opacity-40 cursor-not-allowed" : "hover:bg-accent"),
+								children: [/* @__PURE__ */ T(u, { className: "h-4 w-4" }), "Previous"]
+							}), /* @__PURE__ */ T("button", {
 								type: "button",
-								onClick: Z,
-								disabled: I,
-								className: t("flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity", I ? "opacity-60 cursor-not-allowed" : "hover:opacity-90"),
-								children: I ? /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(g, { className: "h-4 w-4 animate-spin" }), P === "payment" ? "Processing Payment..." : "Processing..."] }) : /* @__PURE__ */ T(C, { children: [P === "payment" ? "Confirm & Pay" : "Next", /* @__PURE__ */ w(u, { className: "h-4 w-4" })] })
+								onClick: se,
+								disabled: V,
+								className: t("flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity", V ? "opacity-60 cursor-not-allowed" : "hover:opacity-90"),
+								children: V ? /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(_, { className: "h-4 w-4 animate-spin" }), z === "payment" ? "Processing Payment..." : "Processing..."] }) : /* @__PURE__ */ E(w, { children: [z === "payment" ? "Confirm & Pay" : "Next", /* @__PURE__ */ T(d, { className: "h-4 w-4" })] })
 							})]
 						})
 					]
-				}), /* @__PURE__ */ w("div", {
+				}), /* @__PURE__ */ T("div", {
 					className: "lg:col-span-1",
-					children: /* @__PURE__ */ T("div", {
+					children: /* @__PURE__ */ E("div", {
 						className: "sticky top-6 rounded-lg border border-border-subtle bg-bg-surface p-5",
 						children: [
-							/* @__PURE__ */ w("h3", {
+							/* @__PURE__ */ T("h3", {
 								className: "text-base font-semibold text-text-primary mb-4",
 								children: "Service Summary"
 							}),
-							/* @__PURE__ */ T("div", {
+							/* @__PURE__ */ E("div", {
 								className: "flex items-center gap-3 mb-4",
-								children: [/* @__PURE__ */ w("img", {
-									src: N.image,
-									alt: N.name,
+								children: [/* @__PURE__ */ T("img", {
+									src: P.image,
+									alt: P.name,
 									className: "h-12 w-12 rounded-lg object-cover"
-								}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+								}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: N.name
-								}), /* @__PURE__ */ w("p", {
+									children: P.name
+								}), /* @__PURE__ */ T("p", {
 									className: "text-xs text-text-secondary",
-									children: N.category
+									children: P.category
 								})] })]
 							}),
-							/* @__PURE__ */ T("div", {
+							/* @__PURE__ */ E("div", {
 								className: "space-y-2 text-sm border-t border-border-subtle pt-3",
-								children: [/* @__PURE__ */ T("div", {
+								children: [/* @__PURE__ */ E("div", {
 									className: "flex justify-between",
-									children: [/* @__PURE__ */ w("span", {
+									children: [/* @__PURE__ */ T("span", {
 										className: "text-text-secondary",
 										children: "Service Fee:"
-									}), /* @__PURE__ */ w("span", {
+									}), /* @__PURE__ */ T("span", {
 										className: "text-text-primary",
-										children: i(50, { minimumFractionDigits: 0 })
+										children: s(Z, { minimumFractionDigits: 0 })
 									})]
-								}), /* @__PURE__ */ T("div", {
+								}), /* @__PURE__ */ E("div", {
 									className: "flex justify-between",
-									children: [/* @__PURE__ */ w("span", {
+									children: [/* @__PURE__ */ T("span", {
 										className: "text-text-secondary",
 										children: "Advance Payment:"
-									}), /* @__PURE__ */ w("span", {
+									}), /* @__PURE__ */ T("span", {
 										className: "font-medium text-text-primary",
-										children: i(100, { minimumFractionDigits: 0 })
+										children: s(Q, { minimumFractionDigits: 0 })
 									})]
 								})]
 							}),
-							/* @__PURE__ */ T("div", {
+							/* @__PURE__ */ E("div", {
 								className: "flex items-center gap-2 mt-3 pt-3 border-t border-border-subtle text-status-success-text",
-								children: [/* @__PURE__ */ w(f, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ w("span", {
+								children: [/* @__PURE__ */ T(p, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ T("span", {
 									className: "text-xs",
 									children: "Pay remaining amount at cart"
 								})]