@burdenoff/microfe-kadaikodi 2026.704.4 → 2026.710.1

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

@@ -4,24 +4,42 @@ import { PageLayout as n } from "../../components/PageLayout.js";
 import { EmptyState as r } from "../../components/EmptyState.js";
 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";
+import { StepProgress as c } from "../../components/viz/StepProgress.js";
+import { SegmentedTabs as l } from "../../components/viz/SegmentedTabs.js";
+import "../../components/viz/index.js";
+import { ProviderImage as ee } from "./shared.js";
+import { useState as u } from "react";
+import { AlertCircle as d, ArrowLeft as f, ArrowRight as p, Calendar as m, CheckCircle2 as h, Clock as g, CreditCard as _, Home as v, Loader2 as te, MapPin as ne, Navigation as re, Phone as ie, Smartphone as y, Wallet as b } from "lucide-react";
+import { useParams as x } from "react-router-dom";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { EmphasisPanel as T, PagePurpose as E } from "@burdenoff/fe-libs/ui";
 //#region src/kadaikodi/pages/customer/DirectServiceBookingPage.tsx
-var O = [
+var D = [
 	"location",
 	"details",
 	"payment",
 	"confirmation"
-], k = {
+], O = {
 	location: "Location",
 	details: "Details",
 	payment: "Payment",
 	confirmation: "Confirmation"
 };
-function A() {
+function ae() {
+	let e = [], t = /* @__PURE__ */ new Date();
+	for (let n = 0; n < 4; n++) {
+		let r = new Date(t.getTime() + n * 864e5), i = n === 0 ? "Today" : n === 1 ? "Tomorrow" : r.toLocaleDateString([], {
+			weekday: "short",
+			day: "numeric"
+		});
+		e.push({
+			value: r.toISOString().slice(0, 10),
+			label: i
+		});
+	}
+	return e;
+}
+function oe() {
 	let e = [], t = new Date((/* @__PURE__ */ new Date()).getTime() + 30 * 6e4);
 	for (let n = 0; n < 8; n++) {
 		let r = new Date(t.getTime() + n * 30 * 6e4), i = r.toTimeString().slice(0, 5), a = r.toLocaleTimeString([], {
@@ -35,75 +53,75 @@ function A() {
 	}
 	return e;
 }
-function j() {
-	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({
+function k() {
+	let { cartId: k } = x(), { navigateTo: A, currentUser: j } = e(), { data: M, isLoading: N } = o(k), { data: P = [] } = i(k), F = a(), I = P[0], [L, R] = u("location"), [z, B] = u(!1), [V, H] = u({
 		address: "",
 		landmark: "",
 		instructions: "",
 		phoneNumber: ""
-	}), [G, K] = c({
+	}), [U, W] = u({
 		preferredTime: "",
 		specialInstructions: "",
 		isUrgent: !1
-	}), [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, {
+	}), [G, K] = u("schedule"), [q, se] = u(""), [J, ce] = u("upi"), [Y, X] = u(null), Z = I?.price ?? 0, Q = Math.round(Z * .2), $ = Z - Q, le = Z;
+	if (N) return /* @__PURE__ */ C(n, {
 		title: "Book Direct Service",
-		children: /* @__PURE__ */ T("div", {
+		children: /* @__PURE__ */ C("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" })
+			children: /* @__PURE__ */ C("div", { className: "h-12 w-12 animate-spin rounded-full border-b-2 border-foreground" })
 		})
 	});
-	if (!P) return /* @__PURE__ */ T(n, {
+	if (!M) return /* @__PURE__ */ C(n, {
 		title: "Cart Not Found",
-		children: /* @__PURE__ */ T(r, {
-			icon: /* @__PURE__ */ T(g, { className: "h-12 w-12" }),
+		children: /* @__PURE__ */ C(r, {
+			icon: /* @__PURE__ */ C(v, { className: "h-12 w-12" }),
 			title: "Service not available",
 			description: "Direct service is not available for this cart.",
-			action: /* @__PURE__ */ T("button", {
+			action: /* @__PURE__ */ C("button", {
 				type: "button",
-				onClick: () => M("/customer/discover"),
+				onClick: () => A("/customer/discover"),
 				className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
 				children: "Browse Carts"
 			})
 		})
 	});
-	let ne = A(), re = O.indexOf(z), ie = () => {
+	let ue = oe(), de = D.indexOf(L), fe = () => {
 		if (!navigator.geolocation) {
 			alert("Geolocation is not supported by this browser.");
 			return;
 		}
 		navigator.geolocation.getCurrentPosition(() => {
-			W((e) => ({
+			H((e) => ({
 				...e,
 				address: e.address || "Current location detected"
 			})), alert("Location detected successfully!");
 		}, () => {
 			alert("Failed to get your location. Please enter address manually.");
 		});
-	}, 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);
+	}, pe = () => V.address.trim() ? V.phoneNumber.trim() ? !0 : (alert("Please enter your phone number."), !1) : (alert("Please enter your address."), !1), me = () => G === "schedule" && !U.preferredTime ? (alert("Please select a preferred time slot."), !1) : !0, he = () => {
+		L === "location" && pe() ? R("details") : L === "details" && me() ? R("payment") : L === "payment" && _e();
+	}, ge = () => {
+		L === "details" ? R("location") : L === "payment" && R("details");
+	}, _e = () => {
+		B(!0);
 		let e = new Date(Date.now() + 30 * 6e4).toISOString();
-		if (P && R && N?.id) {
-			L.mutate({
-				providerId: P.id,
-				customerId: N.id,
+		if (M && I && j?.id) {
+			F.mutate({
+				providerId: M.id,
+				customerId: j.id,
 				fulfillmentType: "delivery",
-				paymentMethod: q,
+				paymentMethod: J,
 				tax: 0,
 				items: [{
-					name: R.name,
-					offeringId: R.id,
+					name: I.name,
+					offeringId: I.id,
 					quantity: 1,
 					unitPrice: Z
 				}],
-				notes: [U.instructions, G.specialInstructions].filter(Boolean).join(" | ") || void 0,
+				notes: [V.instructions, U.specialInstructions].filter(Boolean).join(" | ") || void 0,
 				deliveryAddress: {
-					street: U.address,
-					landmark: U.landmark
+					street: V.address,
+					landmark: V.landmark
 				}
 			}, {
 				onSuccess: (t) => {
@@ -112,10 +130,10 @@ function j() {
 						orderId: t.id,
 						transactionId: `TXN-${t.id}`,
 						estimatedArrival: e
-					}), B("confirmation"), H(!1);
+					}), R("confirmation"), B(!1);
 				},
 				onError: () => {
-					H(!1), alert("Could not place your booking. Please try again.");
+					B(!1), alert("Could not place your booking. Please try again.");
 				}
 			});
 			return;
@@ -126,130 +144,115 @@ function j() {
 			orderId: t,
 			transactionId: t,
 			estimatedArrival: e
-		}), B("confirmation"), H(!1);
+		}), R("confirmation"), B(!1);
 	};
-	return /* @__PURE__ */ E(n, {
-		title: /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ w(n, {
+		title: /* @__PURE__ */ w("div", {
 			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ T("button", {
+			children: [/* @__PURE__ */ C("button", {
 				type: "button",
-				onClick: () => M(`/customer/cart/${P.id}`),
+				onClick: () => A(`/customer/cart/${M.id}`),
 				className: "rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
-				children: /* @__PURE__ */ T(u, { className: "h-5 w-5" })
-			}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", { children: "Book Direct Service" }), /* @__PURE__ */ T("p", {
+				children: /* @__PURE__ */ C(f, { className: "h-5 w-5" })
+			}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("span", { children: "Book Direct Service" }), /* @__PURE__ */ C("p", {
 				className: "text-xs font-normal text-text-secondary",
-				children: P.name
+				children: M.name
 			})] })]
 		}),
 		children: [
-			/* @__PURE__ */ T(D, {
+			/* @__PURE__ */ C(E, {
 				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__ */ T(ee, {
+			/* @__PURE__ */ C(T, {
 				className: "mb-6",
-				children: /* @__PURE__ */ T("div", {
-					className: "flex items-center justify-between px-2",
-					children: O.map((e, n) => {
-						let r = n < re, i = e === z;
-						return /* @__PURE__ */ E("div", {
-							className: "flex items-center",
-							children: [/* @__PURE__ */ E("div", {
-								className: "flex flex-col items-center",
-								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__ */ 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__ */ T("div", { className: t("mx-2 h-0.5 w-8 sm:w-16", r ? "bg-status-success-bg-subtle" : "bg-border") })]
-						}, e);
-					})
+				children: /* @__PURE__ */ C(c, {
+					steps: D.map((e) => ({ label: O[e] })),
+					current: de
 				})
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ w("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ E("div", {
+				children: [/* @__PURE__ */ w("div", {
 					className: "lg:col-span-2",
 					children: [
-						z === "location" && /* @__PURE__ */ E("div", {
+						L === "location" && /* @__PURE__ */ w("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 							children: [
-								/* @__PURE__ */ E("h2", {
+								/* @__PURE__ */ w("h2", {
 									className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
-									children: [/* @__PURE__ */ T(v, { className: "h-4 w-4" }), "Service Location"]
+									children: [/* @__PURE__ */ C(ne, { className: "h-4 w-4" }), "Service Location"]
 								}),
-								/* @__PURE__ */ T("p", {
+								/* @__PURE__ */ C("p", {
 									className: "text-xs text-text-secondary mb-5",
 									children: "Where should the cart come?"
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ w("div", {
 									className: "space-y-4",
 									children: [
-										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("label", {
+										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
-											children: ["Your Address ", /* @__PURE__ */ T("span", {
+											children: ["Your Address ", /* @__PURE__ */ C("span", {
 												className: "text-status-error-text",
 												children: "*"
 											})]
-										}), /* @__PURE__ */ E("div", {
+										}), /* @__PURE__ */ w("div", {
 											className: "flex gap-2",
-											children: [/* @__PURE__ */ T("input", {
+											children: [/* @__PURE__ */ C("input", {
 												type: "text",
 												placeholder: "Enter your full address",
-												value: U.address,
-												onChange: (e) => W((t) => ({
+												value: V.address,
+												onChange: (e) => H((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__ */ E("button", {
+											}), /* @__PURE__ */ w("button", {
 												type: "button",
-												onClick: ie,
+												onClick: fe,
 												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__ */ T(y, { className: "h-3.5 w-3.5" }), "Use Current Location"]
+												children: [/* @__PURE__ */ C(re, { className: "h-3.5 w-3.5" }), "Use Current Location"]
 											})]
 										})] }),
-										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("label", {
+										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
 											children: "Nearby Landmark"
-										}), /* @__PURE__ */ T("input", {
+										}), /* @__PURE__ */ C("input", {
 											type: "text",
 											placeholder: "e.g., Near Metro Station, Opposite Mall",
-											value: U.landmark,
-											onChange: (e) => W((t) => ({
+											value: V.landmark,
+											onChange: (e) => H((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__ */ E("div", { children: [/* @__PURE__ */ T("label", {
+										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
 											children: "Instructions for Cart Owner"
-										}), /* @__PURE__ */ T("textarea", {
+										}), /* @__PURE__ */ C("textarea", {
 											rows: 3,
 											placeholder: "Any specific instructions to help us find you...",
-											value: U.instructions,
-											onChange: (e) => W((t) => ({
+											value: V.instructions,
+											onChange: (e) => H((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__ */ E("div", { children: [/* @__PURE__ */ E("label", {
+										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
-											children: ["Phone Number ", /* @__PURE__ */ T("span", {
+											children: ["Phone Number ", /* @__PURE__ */ C("span", {
 												className: "text-status-error-text",
 												children: "*"
 											})]
-										}), /* @__PURE__ */ E("div", {
+										}), /* @__PURE__ */ w("div", {
 											className: "relative",
-											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", {
+											children: [/* @__PURE__ */ C(ie, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ C("input", {
 												type: "tel",
 												placeholder: "Enter your phone number",
-												value: U.phoneNumber,
-												onChange: (e) => W((t) => ({
+												value: V.phoneNumber,
+												onChange: (e) => H((t) => ({
 													...t,
 													phoneNumber: e.target.value
 												})),
@@ -260,62 +263,96 @@ function j() {
 								})
 							]
 						}),
-						z === "details" && /* @__PURE__ */ E("div", {
+						L === "details" && /* @__PURE__ */ w("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 							children: [
-								/* @__PURE__ */ E("h2", {
+								/* @__PURE__ */ w("h2", {
 									className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
-									children: [/* @__PURE__ */ T(f, { className: "h-4 w-4" }), "Booking Details"]
+									children: [/* @__PURE__ */ C(m, { className: "h-4 w-4" }), "Booking Details"]
 								}),
-								/* @__PURE__ */ T("p", {
+								/* @__PURE__ */ C("p", {
 									className: "text-xs text-text-secondary mb-5",
 									children: "Choose your preferred timing"
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ w("div", {
 									className: "space-y-4",
 									children: [
-										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("label", {
+										/* @__PURE__ */ w("div", { children: [
+											/* @__PURE__ */ C("label", {
+												className: "block text-sm font-medium text-text-primary mb-2",
+												children: "When do you need it?"
+											}),
+											/* @__PURE__ */ C(l, {
+												fill: !0,
+												"aria-label": "Timing",
+												tabs: [{
+													id: "now",
+													label: "Come now"
+												}, {
+													id: "schedule",
+													label: "Schedule"
+												}],
+												value: G,
+												onChange: (e) => K(e)
+											}),
+											G === "now" && /* @__PURE__ */ C("p", {
+												className: "mt-2 text-xs text-text-secondary",
+												children: "The cart heads to you as soon as it accepts — no slot needed."
+											})
+										] }),
+										G === "schedule" && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
-											children: ["Preferred Time Slot ", /* @__PURE__ */ T("span", {
+											children: "Day"
+										}), /* @__PURE__ */ C("div", {
+											className: "grid grid-cols-4 gap-2",
+											children: ae().map((e) => /* @__PURE__ */ C("button", {
+												type: "button",
+												onClick: () => se(e.value),
+												className: t("rounded-lg border py-2 px-2 text-xs font-medium transition-colors", q === e.value ? "border-action-primary-bg bg-[var(--color-accent-soft)] text-accent-primary" : "border-border-subtle text-text-secondary hover:bg-accent hover:text-text-primary"),
+												children: e.label
+											}, e.value))
+										})] }), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("label", {
+											className: "block text-sm font-medium text-text-primary mb-1.5",
+											children: ["Preferred Time Slot ", /* @__PURE__ */ C("span", {
 												className: "text-status-error-text",
 												children: "*"
 											})]
-										}), /* @__PURE__ */ T("div", {
+										}), /* @__PURE__ */ C("div", {
 											className: "grid grid-cols-4 gap-2",
-											children: ne.map((e) => /* @__PURE__ */ T("button", {
+											children: ue.map((e) => /* @__PURE__ */ C("button", {
 												type: "button",
-												onClick: () => K((t) => ({
+												onClick: () => W((t) => ({
 													...t,
 													preferredTime: e.value
 												})),
-												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"),
+												className: t("rounded-lg border py-2 px-2 text-xs font-medium transition-colors", U.preferredTime === e.value ? "border-action-primary-bg bg-[var(--color-accent-soft)] text-accent-primary" : "border-border-subtle text-text-secondary hover:bg-accent hover:text-text-primary"),
 												children: e.label
 											}, e.value))
-										})] }),
-										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("label", {
+										})] })] }),
+										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
 											children: "Special Instructions"
-										}), /* @__PURE__ */ T("textarea", {
+										}), /* @__PURE__ */ C("textarea", {
 											rows: 3,
 											placeholder: "Any special requests or dietary preferences...",
-											value: G.specialInstructions,
-											onChange: (e) => K((t) => ({
+											value: U.specialInstructions,
+											onChange: (e) => W((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__ */ E("label", {
+										/* @__PURE__ */ w("label", {
 											className: "flex items-center gap-2 cursor-pointer",
-											children: [/* @__PURE__ */ T("input", {
+											children: [/* @__PURE__ */ C("input", {
 												type: "checkbox",
-												checked: G.isUrgent,
-												onChange: (e) => K((t) => ({
+												checked: U.isUrgent,
+												onChange: (e) => W((t) => ({
 													...t,
 													isUrgent: e.target.checked
 												})),
 												className: "h-4 w-4 rounded border-border-subtle"
-											}), /* @__PURE__ */ T("span", {
+											}), /* @__PURE__ */ C("span", {
 												className: "text-sm text-text-secondary",
 												children: "This is urgent (additional charges may apply)"
 											})]
@@ -324,23 +361,23 @@ function j() {
 								})
 							]
 						}),
-						z === "payment" && /* @__PURE__ */ E("div", {
+						L === "payment" && /* @__PURE__ */ w("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 							children: [
-								/* @__PURE__ */ E("h2", {
+								/* @__PURE__ */ w("h2", {
 									className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
-									children: [/* @__PURE__ */ T(h, { className: "h-4 w-4" }), "Advance Payment"]
+									children: [/* @__PURE__ */ C(_, { className: "h-4 w-4" }), "Advance Payment"]
 								}),
-								/* @__PURE__ */ T("p", {
+								/* @__PURE__ */ C("p", {
 									className: "text-xs text-text-secondary mb-5",
 									children: "Select your payment method"
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ w("div", {
 									className: "space-y-4",
 									children: [
-										/* @__PURE__ */ E("div", {
+										/* @__PURE__ */ w("div", {
 											className: "flex items-start gap-2 rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-3",
-											children: [/* @__PURE__ */ T(l, { className: "h-4 w-4 text-text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ E("p", {
+											children: [/* @__PURE__ */ C(d, { className: "h-4 w-4 text-text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ w("p", {
 												className: "text-xs text-text-primary",
 												children: [
 													"You need to pay ",
@@ -350,84 +387,84 @@ function j() {
 												]
 											})]
 										}),
-										/* @__PURE__ */ T("div", {
+										/* @__PURE__ */ C("div", {
 											className: "grid grid-cols-1 sm:grid-cols-3 gap-3",
 											children: [
 												{
 													value: "upi",
 													label: "UPI",
 													sub: "Instant payment",
-													Icon: x
+													Icon: y
 												},
 												{
 													value: "card",
 													label: "Card",
 													sub: "Secure payment",
-													Icon: h
+													Icon: _
 												},
 												{
 													value: "wallet",
 													label: "Wallet",
 													sub: "Quick payment",
-													Icon: S
+													Icon: b
 												}
-											].map(({ value: e, label: n, sub: r, Icon: i }) => /* @__PURE__ */ E("button", {
+											].map(({ value: e, label: n, sub: r, Icon: i }) => /* @__PURE__ */ w("button", {
 												type: "button",
-												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"),
+												onClick: () => ce(e),
+												className: t("rounded-lg border p-3 text-center transition-colors", J === e ? "border-foreground bg-accent" : "border-border-subtle hover:bg-accent"),
 												children: [
-													/* @__PURE__ */ T(i, { className: "mx-auto h-5 w-5 text-text-secondary mb-1" }),
-													/* @__PURE__ */ T("p", {
+													/* @__PURE__ */ C(i, { className: "mx-auto h-5 w-5 text-text-secondary mb-1" }),
+													/* @__PURE__ */ C("p", {
 														className: "text-sm font-medium text-text-primary",
 														children: n
 													}),
-													/* @__PURE__ */ T("p", {
+													/* @__PURE__ */ C("p", {
 														className: "text-[10px] text-text-secondary",
 														children: r
 													})
 												]
 											}, e))
 										}),
-										/* @__PURE__ */ E("div", {
+										/* @__PURE__ */ w("div", {
 											className: "rounded-lg bg-bg-sunken p-4",
-											children: [/* @__PURE__ */ T("h3", {
+											children: [/* @__PURE__ */ C("h3", {
 												className: "text-sm font-medium text-text-primary mb-2",
 												children: "Payment Summary"
-											}), /* @__PURE__ */ E("div", {
+											}), /* @__PURE__ */ w("div", {
 												className: "space-y-2 text-sm",
 												children: [
-													/* @__PURE__ */ E("div", {
+													/* @__PURE__ */ w("div", {
 														className: "flex justify-between",
-														children: [/* @__PURE__ */ T("span", {
+														children: [/* @__PURE__ */ C("span", {
 															className: "text-text-secondary",
 															children: "Advance Payment:"
-														}), /* @__PURE__ */ T("span", {
+														}), /* @__PURE__ */ C("span", {
 															className: "text-text-primary",
 															children: s(Q, { minimumFractionDigits: 0 })
 														})]
 													}),
-													/* @__PURE__ */ E("div", {
+													/* @__PURE__ */ w("div", {
 														className: "flex justify-between",
-														children: [/* @__PURE__ */ T("span", {
+														children: [/* @__PURE__ */ C("span", {
 															className: "text-text-secondary",
 															children: "Service Fee:"
-														}), /* @__PURE__ */ T("span", {
+														}), /* @__PURE__ */ C("span", {
 															className: "text-text-primary",
 															children: s(Z, { minimumFractionDigits: 0 })
 														})]
 													}),
-													/* @__PURE__ */ E("div", {
+													/* @__PURE__ */ w("div", {
 														className: "flex justify-between text-text-secondary",
-														children: [/* @__PURE__ */ T("span", { children: "Balance Payment (at arrival):" }), /* @__PURE__ */ T("span", { children: s($, { minimumFractionDigits: 0 }) })]
+														children: [/* @__PURE__ */ C("span", { children: "Balance Payment (at arrival):" }), /* @__PURE__ */ C("span", { children: s($, { minimumFractionDigits: 0 }) })]
 													}),
-													/* @__PURE__ */ E("div", {
+													/* @__PURE__ */ w("div", {
 														className: "flex justify-between border-t border-border-subtle pt-2 font-semibold",
-														children: [/* @__PURE__ */ T("span", {
+														children: [/* @__PURE__ */ C("span", {
 															className: "text-text-primary",
 															children: "Total Amount:"
-														}), /* @__PURE__ */ T("span", {
+														}), /* @__PURE__ */ C("span", {
 															className: "text-text-primary",
-															children: s(te, { minimumFractionDigits: 0 })
+															children: s(le, { minimumFractionDigits: 0 })
 														})]
 													})
 												]
@@ -437,127 +474,127 @@ function j() {
 								})
 							]
 						}),
-						z === "confirmation" && Y && /* @__PURE__ */ E("div", {
+						L === "confirmation" && Y && /* @__PURE__ */ w("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 							children: [
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ w("div", {
 									className: "text-center mb-6",
 									children: [
-										/* @__PURE__ */ T("div", {
+										/* @__PURE__ */ C("div", {
 											className: "mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-status-success-bg-subtle",
-											children: /* @__PURE__ */ T(p, { className: "h-7 w-7 text-status-success-text" })
+											children: /* @__PURE__ */ C(h, { className: "h-7 w-7 text-status-success-text" })
 										}),
-										/* @__PURE__ */ T("h2", {
+										/* @__PURE__ */ C("h2", {
 											className: "text-lg font-semibold text-text-primary mb-1",
 											children: "Booking Confirmed!"
 										}),
-										/* @__PURE__ */ T("p", {
+										/* @__PURE__ */ C("p", {
 											className: "text-sm text-text-secondary",
 											children: "Your direct service booking has been confirmed and payment processed."
 										})
 									]
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ w("div", {
 									className: "rounded-lg bg-bg-sunken p-4 mb-4",
-									children: [/* @__PURE__ */ T("h3", {
+									children: [/* @__PURE__ */ C("h3", {
 										className: "text-sm font-medium text-text-primary mb-3",
 										children: "Booking Details"
-									}), /* @__PURE__ */ E("div", {
+									}), /* @__PURE__ */ w("div", {
 										className: "grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm",
 										children: [
-											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
+											/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("span", {
 												className: "text-xs text-text-secondary",
 												children: "Booking ID"
-											}), /* @__PURE__ */ T("p", {
+											}), /* @__PURE__ */ C("p", {
 												className: "font-mono text-xs text-text-primary",
 												children: Y.bookingId
 											})] }),
-											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
+											/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("span", {
 												className: "text-xs text-text-secondary",
 												children: "Est. Arrival"
-											}), /* @__PURE__ */ T("p", {
+											}), /* @__PURE__ */ C("p", {
 												className: "text-text-primary",
 												children: new Date(Y.estimatedArrival).toLocaleTimeString([], {
 													hour: "2-digit",
 													minute: "2-digit"
 												})
 											})] }),
-											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
+											/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("span", {
 												className: "text-xs text-text-secondary",
 												children: "Location"
-											}), /* @__PURE__ */ T("p", {
+											}), /* @__PURE__ */ C("p", {
 												className: "text-text-primary truncate",
-												children: U.address
+												children: V.address
 											})] }),
-											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
+											/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("span", {
 												className: "text-xs text-text-secondary",
 												children: "Phone"
-											}), /* @__PURE__ */ T("p", {
+											}), /* @__PURE__ */ C("p", {
 												className: "text-text-primary",
-												children: U.phoneNumber
+												children: V.phoneNumber
 											})] })
 										]
 									})]
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ w("div", {
 									className: "rounded-lg border border-status-success-text/20 bg-status-success-bg-subtle p-4 mb-4",
-									children: [/* @__PURE__ */ E("h3", {
+									children: [/* @__PURE__ */ w("h3", {
 										className: "text-sm font-medium text-status-success-text mb-2 flex items-center gap-2",
-										children: [/* @__PURE__ */ T(p, { className: "h-4 w-4" }), "Payment Processed"]
-									}), /* @__PURE__ */ E("div", {
+										children: [/* @__PURE__ */ C(h, { className: "h-4 w-4" }), "Payment Processed"]
+									}), /* @__PURE__ */ w("div", {
 										className: "grid grid-cols-2 gap-3 text-sm",
 										children: [
-											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
+											/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("span", {
 												className: "text-xs text-text-secondary",
 												children: "Transaction ID"
-											}), /* @__PURE__ */ T("p", {
+											}), /* @__PURE__ */ C("p", {
 												className: "font-mono text-xs text-text-primary",
 												children: Y.transactionId
 											})] }),
-											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
+											/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("span", {
 												className: "text-xs text-text-secondary",
 												children: "Advance Paid"
-											}), /* @__PURE__ */ T("p", {
+											}), /* @__PURE__ */ C("p", {
 												className: "font-medium text-text-primary",
 												children: s(Q, { minimumFractionDigits: 0 })
 											})] }),
-											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
+											/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("span", {
 												className: "text-xs text-text-secondary",
 												children: "Method"
-											}), /* @__PURE__ */ T("p", {
+											}), /* @__PURE__ */ C("p", {
 												className: "capitalize text-text-primary",
-												children: q
+												children: J
 											})] }),
-											/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
+											/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("span", {
 												className: "text-xs text-text-secondary",
 												children: "Status"
-											}), /* @__PURE__ */ T("p", {
+											}), /* @__PURE__ */ C("p", {
 												className: "font-medium text-status-success-text",
 												children: "Paid"
 											})] })
 										]
 									})]
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ w("div", {
 									className: "rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-4 mb-6",
-									children: [/* @__PURE__ */ T("h3", {
+									children: [/* @__PURE__ */ C("h3", {
 										className: "text-sm font-medium text-text-primary mb-2",
 										children: "Next Steps"
-									}), /* @__PURE__ */ E("div", {
+									}), /* @__PURE__ */ w("div", {
 										className: "space-y-2 text-xs text-text-primary",
 										children: [
-											/* @__PURE__ */ E("div", {
+											/* @__PURE__ */ w("div", {
 												className: "flex items-start gap-2",
-												children: [/* @__PURE__ */ T(p, { className: "h-3.5 w-3.5 text-status-success-text mt-0.5 shrink-0" }), /* @__PURE__ */ E("span", { children: [
+												children: [/* @__PURE__ */ C(h, { className: "h-3.5 w-3.5 text-status-success-text mt-0.5 shrink-0" }), /* @__PURE__ */ w("span", { children: [
 													"Payment confirmed -",
 													" ",
 													s(Q, { minimumFractionDigits: 0 }),
 													" paid"
 												] })]
 											}),
-											/* @__PURE__ */ E("div", {
+											/* @__PURE__ */ w("div", {
 												className: "flex items-start gap-2",
-												children: [/* @__PURE__ */ T(m, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), /* @__PURE__ */ E("span", { children: [
+												children: [/* @__PURE__ */ C(g, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), /* @__PURE__ */ w("span", { children: [
 													"Cart will arrive around",
 													" ",
 													new Date(Y.estimatedArrival).toLocaleTimeString([], {
@@ -566,9 +603,9 @@ function j() {
 													})
 												] })]
 											}),
-											/* @__PURE__ */ E("div", {
+											/* @__PURE__ */ w("div", {
 												className: "flex items-start gap-2",
-												children: [/* @__PURE__ */ T(h, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), /* @__PURE__ */ E("span", { children: [
+												children: [/* @__PURE__ */ C(_, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), /* @__PURE__ */ w("span", { children: [
 													"Pay remaining ",
 													s($, { minimumFractionDigits: 0 }),
 													" ",
@@ -578,87 +615,90 @@ function j() {
 										]
 									})]
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ w("div", {
 									className: "flex gap-3",
-									children: [/* @__PURE__ */ T("button", {
+									children: [/* @__PURE__ */ C("button", {
 										type: "button",
-										onClick: () => M(`/customer/booking/${Y.orderId}`),
+										onClick: () => A(`/customer/booking/${Y.orderId}`),
 										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__ */ T("button", {
+									}), /* @__PURE__ */ C("button", {
 										type: "button",
-										onClick: () => M("/customer/discover"),
+										onClick: () => A("/customer/discover"),
 										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",
 										children: "Browse More"
 									})]
 								})
 							]
 						}),
-						z !== "confirmation" && /* @__PURE__ */ E("div", {
+						L !== "confirmation" && /* @__PURE__ */ w("div", {
 							className: "flex justify-between mt-5",
-							children: [/* @__PURE__ */ E("button", {
+							children: [/* @__PURE__ */ w("button", {
 								type: "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", {
+								onClick: ge,
+								disabled: L === "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", L === "location" ? "opacity-40 cursor-not-allowed" : "hover:bg-accent"),
+								children: [/* @__PURE__ */ C(f, { className: "h-4 w-4" }), "Previous"]
+							}), /* @__PURE__ */ C("button", {
 								type: "button",
-								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" })] })
+								onClick: he,
+								disabled: z,
+								className: t("flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity", z ? "opacity-60 cursor-not-allowed" : "hover:opacity-90"),
+								children: z ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(te, { className: "h-4 w-4 animate-spin" }), L === "payment" ? "Processing Payment..." : "Processing..."] }) : /* @__PURE__ */ w(S, { children: [L === "payment" ? "Confirm & Pay" : "Next", /* @__PURE__ */ C(p, { className: "h-4 w-4" })] })
 							})]
 						})
 					]
-				}), /* @__PURE__ */ T("div", {
+				}), /* @__PURE__ */ C("div", {
 					className: "lg:col-span-1",
-					children: /* @__PURE__ */ E("div", {
+					children: /* @__PURE__ */ w("div", {
 						className: "sticky top-6 rounded-lg border border-border-subtle bg-bg-surface p-5",
 						children: [
-							/* @__PURE__ */ T("h3", {
+							/* @__PURE__ */ C("h3", {
 								className: "text-base font-semibold text-text-primary mb-4",
 								children: "Service Summary"
 							}),
-							/* @__PURE__ */ E("div", {
+							/* @__PURE__ */ w("div", {
 								className: "flex items-center gap-3 mb-4",
-								children: [/* @__PURE__ */ T("img", {
-									src: P.image,
-									alt: P.name,
-									className: "h-12 w-12 rounded-lg object-cover"
-								}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
+								children: [/* @__PURE__ */ C("div", {
+									className: "h-12 w-12 shrink-0 overflow-hidden rounded-lg",
+									children: /* @__PURE__ */ C(ee, {
+										src: M.image,
+										alt: M.name,
+										seed: M.name
+									})
+								}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: P.name
-								}), /* @__PURE__ */ T("p", {
+									children: M.name
+								}), /* @__PURE__ */ C("p", {
 									className: "text-xs text-text-secondary",
-									children: P.category
+									children: M.category
 								})] })]
 							}),
-							/* @__PURE__ */ E("div", {
+							/* @__PURE__ */ w("div", {
 								className: "space-y-2 text-sm border-t border-border-subtle pt-3",
-								children: [/* @__PURE__ */ E("div", {
+								children: [/* @__PURE__ */ w("div", {
 									className: "flex justify-between",
-									children: [/* @__PURE__ */ T("span", {
+									children: [/* @__PURE__ */ C("span", {
 										className: "text-text-secondary",
 										children: "Service Fee:"
-									}), /* @__PURE__ */ T("span", {
+									}), /* @__PURE__ */ C("span", {
 										className: "text-text-primary",
 										children: s(Z, { minimumFractionDigits: 0 })
 									})]
-								}), /* @__PURE__ */ E("div", {
+								}), /* @__PURE__ */ w("div", {
 									className: "flex justify-between",
-									children: [/* @__PURE__ */ T("span", {
+									children: [/* @__PURE__ */ C("span", {
 										className: "text-text-secondary",
 										children: "Advance Payment:"
-									}), /* @__PURE__ */ T("span", {
+									}), /* @__PURE__ */ C("span", {
 										className: "font-medium text-text-primary",
 										children: s(Q, { minimumFractionDigits: 0 })
 									})]
 								})]
 							}),
-							/* @__PURE__ */ E("div", {
+							/* @__PURE__ */ w("div", {
 								className: "flex items-center gap-2 mt-3 pt-3 border-t border-border-subtle text-status-success-text",
-								children: [/* @__PURE__ */ T(p, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ T("span", {
+								children: [/* @__PURE__ */ C(h, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ C("span", {
 									className: "text-xs",
 									children: "Pay remaining amount at cart"
 								})]
@@ -671,6 +711,6 @@ function j() {
 	});
 }
 //#endregion
-export { j as DirectServiceBookingPage };
+export { k as DirectServiceBookingPage };
 
 //# sourceMappingURL=DirectServiceBookingPage.js.map