@burdenoff/microfe-kadaikodi 2026.625.1 → 2026.626.2

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

@@ -8,19 +8,20 @@ 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";
 //#region src/kadaikodi/pages/customer/DirectServiceBookingPage.tsx
-var E = [
+var O = [
 	"location",
 	"details",
 	"payment",
 	"confirmation"
-], D = {
+], k = {
 	location: "Location",
 	details: "Details",
 	payment: "Payment",
 	confirmation: "Confirmation"
 };
-function O() {
+function A() {
 	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([], {
@@ -34,18 +35,18 @@ function O() {
 	}
 	return e;
 }
-function k() {
-	let { cartId: k } = S(), { navigateTo: A } = e(), j = o(() => k ? a(k) : void 0, [k]), [M, N] = s("location"), [P, F] = s(!1), [I, L] = s({
+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({
 		address: "",
 		landmark: "",
 		instructions: "",
 		phoneNumber: ""
-	}), [R, z] = s({
+	}), [B, V] = s({
 		preferredTime: "",
 		specialInstructions: "",
 		isUrgent: !1
-	}), [B, V] = s("upi"), [H, U] = s(null);
-	if (!j) return /* @__PURE__ */ w(n, {
+	}), [H, U] = s("upi"), [W, G] = s(null);
+	if (!N) return /* @__PURE__ */ w(n, {
 		title: "Cart Not Found",
 		children: /* @__PURE__ */ w(r, {
 			icon: /* @__PURE__ */ w(h, { className: "h-12 w-12" }),
@@ -53,36 +54,36 @@ function k() {
 			description: "Direct service is not available for this cart.",
 			action: /* @__PURE__ */ w("button", {
 				type: "button",
-				onClick: () => A("/customer/carts"),
+				onClick: () => M("/customer/carts"),
 				className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
 				children: "Browse Carts"
 			})
 		})
 	});
-	let W = O(), G = E.indexOf(M), K = () => {
+	let K = A(), q = O.indexOf(P), J = () => {
 		if (!navigator.geolocation) {
 			alert("Geolocation is not supported by this browser.");
 			return;
 		}
 		navigator.geolocation.getCurrentPosition(() => {
-			L((e) => ({
+			z((e) => ({
 				...e,
 				address: e.address || "Current location detected"
 			})), alert("Location detected successfully!");
 		}, () => {
 			alert("Failed to get your location. Please enter address manually.");
 		});
-	}, q = () => I.address.trim() ? I.phoneNumber.trim() ? !0 : (alert("Please enter your phone number."), !1) : (alert("Please enter your address."), !1), J = () => R.preferredTime ? !0 : (alert("Please select a preferred time slot."), !1), Y = () => {
-		M === "location" && q() ? N("details") : M === "details" && J() ? N("payment") : M === "payment" && Z();
-	}, X = () => {
-		M === "details" ? N("location") : M === "payment" && N("details");
-	}, Z = () => {
-		F(!0), setTimeout(() => {
-			U({
+	}, 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()
-			}), N("confirmation"), F(!1);
+			}), F("confirmation"), L(!1);
 		}, 1500);
 	};
 	return /* @__PURE__ */ T(n, {
@@ -90,534 +91,544 @@ function k() {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ w("button", {
 				type: "button",
-				onClick: () => A(`/customer/carts/${j.id}`),
+				onClick: () => M(`/customer/carts/${N.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", {
 				className: "text-xs font-normal text-text-secondary",
-				children: j.name
+				children: N.name
 			})] })]
 		}),
-		children: [/* @__PURE__ */ w("div", {
-			className: "flex items-center justify-between mb-6 px-2",
-			children: E.map((e, n) => {
-				let r = n < G, i = e === M;
-				return /* @__PURE__ */ T("div", {
-					className: "flex items-center",
-					children: [/* @__PURE__ */ T("div", {
-						className: "flex flex-col items-center",
-						children: [/* @__PURE__ */ w("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", {
-							className: t("mt-1 text-[10px]", i ? "font-medium text-text-primary" : "text-text-secondary"),
-							children: D[e]
-						})]
-					}), n < E.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") })]
-				}, e);
-			})
-		}), /* @__PURE__ */ T("div", {
-			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-			children: [/* @__PURE__ */ T("div", {
-				className: "lg:col-span-2",
-				children: [
-					M === "location" && /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
-						children: [
-							/* @__PURE__ */ T("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"]
-							}),
-							/* @__PURE__ */ w("p", {
-								className: "text-xs text-text-secondary mb-5",
-								children: "Where should the cart come?"
-							}),
-							/* @__PURE__ */ T("div", {
-								className: "space-y-4",
-								children: [
-									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
-										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: ["Your Address ", /* @__PURE__ */ w("span", {
-											className: "text-status-error-text",
-											children: "*"
-										})]
-									}), /* @__PURE__ */ T("div", {
-										className: "flex gap-2",
-										children: [/* @__PURE__ */ w("input", {
+		children: [
+			/* @__PURE__ */ w(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, {
+				className: "mb-6",
+				children: /* @__PURE__ */ w("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", {
+							className: "flex items-center",
+							children: [/* @__PURE__ */ T("div", {
+								className: "flex flex-col items-center",
+								children: [/* @__PURE__ */ w("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", {
+									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") })]
+						}, e);
+					})
+				})
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ T("div", {
+					className: "lg:col-span-2",
+					children: [
+						P === "location" && /* @__PURE__ */ T("div", {
+							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
+							children: [
+								/* @__PURE__ */ T("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"]
+								}),
+								/* @__PURE__ */ w("p", {
+									className: "text-xs text-text-secondary mb-5",
+									children: "Where should the cart come?"
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "space-y-4",
+									children: [
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
+											className: "block text-sm font-medium text-text-primary mb-1.5",
+											children: ["Your Address ", /* @__PURE__ */ w("span", {
+												className: "text-status-error-text",
+												children: "*"
+											})]
+										}), /* @__PURE__ */ T("div", {
+											className: "flex gap-2",
+											children: [/* @__PURE__ */ w("input", {
+												type: "text",
+												placeholder: "Enter your full address",
+												value: R.address,
+												onChange: (e) => z((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", {
+												type: "button",
+												onClick: J,
+												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"]
+											})]
+										})] }),
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
+											className: "block text-sm font-medium text-text-primary mb-1.5",
+											children: "Nearby Landmark"
+										}), /* @__PURE__ */ w("input", {
 											type: "text",
-											placeholder: "Enter your full address",
-											value: I.address,
-											onChange: (e) => L((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", {
-											type: "button",
-											onClick: K,
-											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"]
-										})]
-									})] }),
-									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
-										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: "Nearby Landmark"
-									}), /* @__PURE__ */ w("input", {
-										type: "text",
-										placeholder: "e.g., Near Metro Station, Opposite Mall",
-										value: I.landmark,
-										onChange: (e) => L((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", {
-										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: "Instructions for Cart Owner"
-									}), /* @__PURE__ */ w("textarea", {
-										rows: 3,
-										placeholder: "Any specific instructions to help us find you...",
-										value: I.instructions,
-										onChange: (e) => L((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", {
-										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: ["Phone Number ", /* @__PURE__ */ w("span", {
-											className: "text-status-error-text",
-											children: "*"
-										})]
-									}), /* @__PURE__ */ T("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", {
-											type: "tel",
-											placeholder: "Enter your phone number",
-											value: I.phoneNumber,
-											onChange: (e) => L((t) => ({
-												...t,
-												phoneNumber: e.target.value
-											})),
-											className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-										})]
-									})] })
-								]
-							})
-						]
-					}),
-					M === "details" && /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
-						children: [
-							/* @__PURE__ */ T("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"]
-							}),
-							/* @__PURE__ */ w("p", {
-								className: "text-xs text-text-secondary mb-5",
-								children: "Choose your preferred timing"
-							}),
-							/* @__PURE__ */ T("div", {
-								className: "space-y-4",
-								children: [
-									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
-										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: ["Preferred Time Slot ", /* @__PURE__ */ w("span", {
-											className: "text-status-error-text",
-											children: "*"
-										})]
-									}), /* @__PURE__ */ w("div", {
-										className: "grid grid-cols-4 gap-2",
-										children: W.map((e) => /* @__PURE__ */ w("button", {
-											type: "button",
-											onClick: () => z((t) => ({
+											placeholder: "e.g., Near Metro Station, Opposite Mall",
+											value: R.landmark,
+											onChange: (e) => z((t) => ({
 												...t,
-												preferredTime: e.value
+												landmark: e.target.value
 											})),
-											className: t("rounded-lg border py-2 px-2 text-xs font-medium transition-colors", R.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", {
-										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: "Special Instructions"
-									}), /* @__PURE__ */ w("textarea", {
-										rows: 3,
-										placeholder: "Any special requests or dietary preferences...",
-										value: R.specialInstructions,
-										onChange: (e) => z((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", {
-										className: "flex items-center gap-2 cursor-pointer",
-										children: [/* @__PURE__ */ w("input", {
-											type: "checkbox",
-											checked: R.isUrgent,
+											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", {
+											className: "block text-sm font-medium text-text-primary mb-1.5",
+											children: "Instructions for Cart Owner"
+										}), /* @__PURE__ */ w("textarea", {
+											rows: 3,
+											placeholder: "Any specific instructions to help us find you...",
+											value: R.instructions,
 											onChange: (e) => z((t) => ({
 												...t,
-												isUrgent: e.target.checked
+												instructions: e.target.value
 											})),
-											className: "h-4 w-4 rounded border-border-subtle"
-										}), /* @__PURE__ */ w("span", {
-											className: "text-sm text-text-secondary",
-											children: "This is urgent (additional charges may apply)"
-										})]
-									})
-								]
-							})
-						]
-					}),
-					M === "payment" && /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
-						children: [
-							/* @__PURE__ */ T("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"]
-							}),
-							/* @__PURE__ */ w("p", {
-								className: "text-xs text-text-secondary mb-5",
-								children: "Select your payment method"
-							}),
-							/* @__PURE__ */ T("div", {
-								className: "space-y-4",
-								children: [
-									/* @__PURE__ */ T("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", {
-											className: "text-xs text-text-primary",
-											children: [
-												"You need to pay ",
-												i(100, { minimumFractionDigits: 0 }),
-												" ",
-												"in advance to confirm your booking. Pay the remaining when the cart arrives."
-											]
-										})]
-									}),
-									/* @__PURE__ */ w("div", {
-										className: "grid grid-cols-1 sm:grid-cols-3 gap-3",
-										children: [
-											{
-												value: "upi",
-												label: "UPI",
-												sub: "Instant payment",
-												Icon: b
-											},
-											{
-												value: "card",
-												label: "Card",
-												sub: "Secure payment",
-												Icon: m
-											},
-											{
-												value: "wallet",
-												label: "Wallet",
-												sub: "Quick payment",
-												Icon: x
-											}
-										].map(({ value: e, label: n, sub: r, Icon: i }) => /* @__PURE__ */ T("button", {
-											type: "button",
-											onClick: () => V(e),
-											className: t("rounded-lg border p-3 text-center transition-colors", B === 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", {
-													className: "text-sm font-medium text-text-primary",
-													children: n
-												}),
-												/* @__PURE__ */ w("p", {
-													className: "text-[10px] text-text-secondary",
-													children: r
-												})
-											]
-										}, e))
-									}),
-									/* @__PURE__ */ T("div", {
-										className: "rounded-lg bg-bg-sunken p-4",
-										children: [/* @__PURE__ */ w("h3", {
-											className: "text-sm font-medium text-text-primary mb-2",
-											children: "Payment Summary"
-										}), /* @__PURE__ */ T("div", {
-											className: "space-y-2 text-sm",
-											children: [
-												/* @__PURE__ */ T("div", {
-													className: "flex justify-between",
-													children: [/* @__PURE__ */ w("span", {
-														className: "text-text-secondary",
-														children: "Advance Payment:"
-													}), /* @__PURE__ */ w("span", {
-														className: "text-text-primary",
-														children: i(100, { minimumFractionDigits: 0 })
-													})]
-												}),
-												/* @__PURE__ */ T("div", {
-													className: "flex justify-between",
-													children: [/* @__PURE__ */ w("span", {
-														className: "text-text-secondary",
-														children: "Service Fee:"
-													}), /* @__PURE__ */ w("span", {
-														className: "text-text-primary",
-														children: i(50, { minimumFractionDigits: 0 })
-													})]
-												}),
-												/* @__PURE__ */ T("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 }) })]
-												}),
-												/* @__PURE__ */ T("div", {
-													className: "flex justify-between border-t border-border-subtle pt-2 font-semibold",
-													children: [/* @__PURE__ */ w("span", {
-														className: "text-text-primary",
-														children: "Total Amount:"
-													}), /* @__PURE__ */ w("span", {
-														className: "text-text-primary",
-														children: i(150, { minimumFractionDigits: 0 })
-													})]
-												})
-											]
-										})]
-									})
-								]
-							})
-						]
-					}),
-					M === "confirmation" && H && /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
-						children: [
-							/* @__PURE__ */ T("div", {
-								className: "text-center mb-6",
-								children: [
-									/* @__PURE__ */ w("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" })
-									}),
-									/* @__PURE__ */ w("h2", {
-										className: "text-lg font-semibold text-text-primary mb-1",
-										children: "Booking Confirmed!"
-									}),
-									/* @__PURE__ */ w("p", {
-										className: "text-sm text-text-secondary",
-										children: "Your direct service booking has been confirmed and payment processed."
-									})
-								]
-							}),
-							/* @__PURE__ */ T("div", {
-								className: "rounded-lg bg-bg-sunken p-4 mb-4",
-								children: [/* @__PURE__ */ w("h3", {
-									className: "text-sm font-medium text-text-primary mb-3",
-									children: "Booking Details"
-								}), /* @__PURE__ */ T("div", {
-									className: "grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm",
-									children: [
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-text-secondary",
-											children: "Booking ID"
-										}), /* @__PURE__ */ w("p", {
-											className: "font-mono text-xs text-text-primary",
-											children: H.bookingId
-										})] }),
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-text-secondary",
-											children: "Est. Arrival"
-										}), /* @__PURE__ */ w("p", {
-											className: "text-text-primary",
-											children: new Date(H.estimatedArrival).toLocaleTimeString([], {
-												hour: "2-digit",
-												minute: "2-digit"
-											})
-										})] }),
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-text-secondary",
-											children: "Location"
-										}), /* @__PURE__ */ w("p", {
-											className: "text-text-primary truncate",
-											children: I.address
+											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__ */ w("span", {
-											className: "text-xs text-text-secondary",
-											children: "Phone"
-										}), /* @__PURE__ */ w("p", {
-											className: "text-text-primary",
-											children: I.phoneNumber
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
+											className: "block text-sm font-medium text-text-primary mb-1.5",
+											children: ["Phone Number ", /* @__PURE__ */ w("span", {
+												className: "text-status-error-text",
+												children: "*"
+											})]
+										}), /* @__PURE__ */ T("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", {
+												type: "tel",
+												placeholder: "Enter your phone number",
+												value: R.phoneNumber,
+												onChange: (e) => z((t) => ({
+													...t,
+													phoneNumber: e.target.value
+												})),
+												className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+											})]
 										})] })
 									]
-								})]
-							}),
-							/* @__PURE__ */ T("div", {
-								className: "rounded-lg border border-status-success-text/20 bg-status-success-bg-subtle p-4 mb-4",
-								children: [/* @__PURE__ */ T("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", {
-									className: "grid grid-cols-2 gap-3 text-sm",
+								})
+							]
+						}),
+						P === "details" && /* @__PURE__ */ T("div", {
+							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
+							children: [
+								/* @__PURE__ */ T("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"]
+								}),
+								/* @__PURE__ */ w("p", {
+									className: "text-xs text-text-secondary mb-5",
+									children: "Choose your preferred timing"
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "space-y-4",
 									children: [
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-text-secondary",
-											children: "Transaction ID"
-										}), /* @__PURE__ */ w("p", {
-											className: "font-mono text-xs text-text-primary",
-											children: H.transactionId
-										})] }),
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-text-secondary",
-											children: "Advance Paid"
-										}), /* @__PURE__ */ w("p", {
-											className: "font-medium text-text-primary",
-											children: i(100, { minimumFractionDigits: 0 })
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
+											className: "block text-sm font-medium text-text-primary mb-1.5",
+											children: ["Preferred Time Slot ", /* @__PURE__ */ w("span", {
+												className: "text-status-error-text",
+												children: "*"
+											})]
+										}), /* @__PURE__ */ w("div", {
+											className: "grid grid-cols-4 gap-2",
+											children: K.map((e) => /* @__PURE__ */ w("button", {
+												type: "button",
+												onClick: () => V((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"),
+												children: e.label
+											}, e.value))
 										})] }),
-										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-text-secondary",
-											children: "Method"
-										}), /* @__PURE__ */ w("p", {
-											className: "capitalize text-text-primary",
-											children: B
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
+											className: "block text-sm font-medium text-text-primary mb-1.5",
+											children: "Special Instructions"
+										}), /* @__PURE__ */ w("textarea", {
+											rows: 3,
+											placeholder: "Any special requests or dietary preferences...",
+											value: B.specialInstructions,
+											onChange: (e) => V((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("div", { children: [/* @__PURE__ */ w("span", {
-											className: "text-xs text-text-secondary",
-											children: "Status"
-										}), /* @__PURE__ */ w("p", {
-											className: "font-medium text-status-success-text",
-											children: "Paid"
-										})] })
+										/* @__PURE__ */ T("label", {
+											className: "flex items-center gap-2 cursor-pointer",
+											children: [/* @__PURE__ */ w("input", {
+												type: "checkbox",
+												checked: B.isUrgent,
+												onChange: (e) => V((t) => ({
+													...t,
+													isUrgent: e.target.checked
+												})),
+												className: "h-4 w-4 rounded border-border-subtle"
+											}), /* @__PURE__ */ w("span", {
+												className: "text-sm text-text-secondary",
+												children: "This is urgent (additional charges may apply)"
+											})]
+										})
 									]
-								})]
-							}),
-							/* @__PURE__ */ T("div", {
-								className: "rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-4 mb-6",
-								children: [/* @__PURE__ */ w("h3", {
-									className: "text-sm font-medium text-text-primary mb-2",
-									children: "Next Steps"
-								}), /* @__PURE__ */ T("div", {
-									className: "space-y-2 text-xs text-text-primary",
+								})
+							]
+						}),
+						P === "payment" && /* @__PURE__ */ T("div", {
+							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
+							children: [
+								/* @__PURE__ */ T("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"]
+								}),
+								/* @__PURE__ */ w("p", {
+									className: "text-xs text-text-secondary mb-5",
+									children: "Select your payment method"
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "space-y-4",
 									children: [
 										/* @__PURE__ */ T("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: [
-												"Payment confirmed -",
-												" ",
-												i(100, { minimumFractionDigits: 0 }),
-												" paid"
-											] })]
+											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", {
+												className: "text-xs text-text-primary",
+												children: [
+													"You need to pay ",
+													i(100, { minimumFractionDigits: 0 }),
+													" ",
+													"in advance to confirm your booking. Pay the remaining when the cart arrives."
+												]
+											})]
 										}),
-										/* @__PURE__ */ T("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: [
-												"Cart will arrive around",
-												" ",
-												new Date(H.estimatedArrival).toLocaleTimeString([], {
-													hour: "2-digit",
-													minute: "2-digit"
-												})
-											] })]
+										/* @__PURE__ */ w("div", {
+											className: "grid grid-cols-1 sm:grid-cols-3 gap-3",
+											children: [
+												{
+													value: "upi",
+													label: "UPI",
+													sub: "Instant payment",
+													Icon: b
+												},
+												{
+													value: "card",
+													label: "Card",
+													sub: "Secure payment",
+													Icon: m
+												},
+												{
+													value: "wallet",
+													label: "Wallet",
+													sub: "Quick payment",
+													Icon: x
+												}
+											].map(({ value: e, label: n, sub: r, Icon: i }) => /* @__PURE__ */ T("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"),
+												children: [
+													/* @__PURE__ */ w(i, { className: "mx-auto h-5 w-5 text-text-secondary mb-1" }),
+													/* @__PURE__ */ w("p", {
+														className: "text-sm font-medium text-text-primary",
+														children: n
+													}),
+													/* @__PURE__ */ w("p", {
+														className: "text-[10px] text-text-secondary",
+														children: r
+													})
+												]
+											}, e))
 										}),
 										/* @__PURE__ */ T("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: [
-												"Pay remaining ",
-												i(50, { minimumFractionDigits: 0 }),
-												" ",
-												"when cart arrives"
-											] })]
+											className: "rounded-lg bg-bg-sunken p-4",
+											children: [/* @__PURE__ */ w("h3", {
+												className: "text-sm font-medium text-text-primary mb-2",
+												children: "Payment Summary"
+											}), /* @__PURE__ */ T("div", {
+												className: "space-y-2 text-sm",
+												children: [
+													/* @__PURE__ */ T("div", {
+														className: "flex justify-between",
+														children: [/* @__PURE__ */ w("span", {
+															className: "text-text-secondary",
+															children: "Advance Payment:"
+														}), /* @__PURE__ */ w("span", {
+															className: "text-text-primary",
+															children: i(100, { minimumFractionDigits: 0 })
+														})]
+													}),
+													/* @__PURE__ */ T("div", {
+														className: "flex justify-between",
+														children: [/* @__PURE__ */ w("span", {
+															className: "text-text-secondary",
+															children: "Service Fee:"
+														}), /* @__PURE__ */ w("span", {
+															className: "text-text-primary",
+															children: i(50, { minimumFractionDigits: 0 })
+														})]
+													}),
+													/* @__PURE__ */ T("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 }) })]
+													}),
+													/* @__PURE__ */ T("div", {
+														className: "flex justify-between border-t border-border-subtle pt-2 font-semibold",
+														children: [/* @__PURE__ */ w("span", {
+															className: "text-text-primary",
+															children: "Total Amount:"
+														}), /* @__PURE__ */ w("span", {
+															className: "text-text-primary",
+															children: i(150, { minimumFractionDigits: 0 })
+														})]
+													})
+												]
+											})]
+										})
+									]
+								})
+							]
+						}),
+						P === "confirmation" && W && /* @__PURE__ */ T("div", {
+							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
+							children: [
+								/* @__PURE__ */ T("div", {
+									className: "text-center mb-6",
+									children: [
+										/* @__PURE__ */ w("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" })
+										}),
+										/* @__PURE__ */ w("h2", {
+											className: "text-lg font-semibold text-text-primary mb-1",
+											children: "Booking Confirmed!"
+										}),
+										/* @__PURE__ */ w("p", {
+											className: "text-sm text-text-secondary",
+											children: "Your direct service booking has been confirmed and payment processed."
 										})
 									]
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "rounded-lg bg-bg-sunken p-4 mb-4",
+									children: [/* @__PURE__ */ w("h3", {
+										className: "text-sm font-medium text-text-primary mb-3",
+										children: "Booking Details"
+									}), /* @__PURE__ */ T("div", {
+										className: "grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm",
+										children: [
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+												className: "text-xs text-text-secondary",
+												children: "Booking ID"
+											}), /* @__PURE__ */ w("p", {
+												className: "font-mono text-xs text-text-primary",
+												children: W.bookingId
+											})] }),
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+												className: "text-xs text-text-secondary",
+												children: "Est. Arrival"
+											}), /* @__PURE__ */ w("p", {
+												className: "text-text-primary",
+												children: new Date(W.estimatedArrival).toLocaleTimeString([], {
+													hour: "2-digit",
+													minute: "2-digit"
+												})
+											})] }),
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+												className: "text-xs text-text-secondary",
+												children: "Location"
+											}), /* @__PURE__ */ w("p", {
+												className: "text-text-primary truncate",
+												children: R.address
+											})] }),
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+												className: "text-xs text-text-secondary",
+												children: "Phone"
+											}), /* @__PURE__ */ w("p", {
+												className: "text-text-primary",
+												children: R.phoneNumber
+											})] })
+										]
+									})]
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "rounded-lg border border-status-success-text/20 bg-status-success-bg-subtle p-4 mb-4",
+									children: [/* @__PURE__ */ T("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", {
+										className: "grid grid-cols-2 gap-3 text-sm",
+										children: [
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+												className: "text-xs text-text-secondary",
+												children: "Transaction ID"
+											}), /* @__PURE__ */ w("p", {
+												className: "font-mono text-xs text-text-primary",
+												children: W.transactionId
+											})] }),
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+												className: "text-xs text-text-secondary",
+												children: "Advance Paid"
+											}), /* @__PURE__ */ w("p", {
+												className: "font-medium text-text-primary",
+												children: i(100, { minimumFractionDigits: 0 })
+											})] }),
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+												className: "text-xs text-text-secondary",
+												children: "Method"
+											}), /* @__PURE__ */ w("p", {
+												className: "capitalize text-text-primary",
+												children: H
+											})] }),
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+												className: "text-xs text-text-secondary",
+												children: "Status"
+											}), /* @__PURE__ */ w("p", {
+												className: "font-medium text-status-success-text",
+												children: "Paid"
+											})] })
+										]
+									})]
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-4 mb-6",
+									children: [/* @__PURE__ */ w("h3", {
+										className: "text-sm font-medium text-text-primary mb-2",
+										children: "Next Steps"
+									}), /* @__PURE__ */ T("div", {
+										className: "space-y-2 text-xs text-text-primary",
+										children: [
+											/* @__PURE__ */ T("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: [
+													"Payment confirmed -",
+													" ",
+													i(100, { minimumFractionDigits: 0 }),
+													" paid"
+												] })]
+											}),
+											/* @__PURE__ */ T("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: [
+													"Cart will arrive around",
+													" ",
+													new Date(W.estimatedArrival).toLocaleTimeString([], {
+														hour: "2-digit",
+														minute: "2-digit"
+													})
+												] })]
+											}),
+											/* @__PURE__ */ T("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: [
+													"Pay remaining ",
+													i(50, { minimumFractionDigits: 0 }),
+													" ",
+													"when cart arrives"
+												] })]
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "flex gap-3",
+									children: [/* @__PURE__ */ w("button", {
+										type: "button",
+										onClick: () => M(`/customer/bookings/${W.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", {
+										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",
+										children: "Browse More"
+									})]
+								})
+							]
+						}),
+						P !== "confirmation" && /* @__PURE__ */ T("div", {
+							className: "flex justify-between mt-5",
+							children: [/* @__PURE__ */ T("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", {
+								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" })] })
+							})]
+						})
+					]
+				}), /* @__PURE__ */ w("div", {
+					className: "lg:col-span-1",
+					children: /* @__PURE__ */ T("div", {
+						className: "sticky top-6 rounded-lg border border-border-subtle bg-bg-surface p-5",
+						children: [
+							/* @__PURE__ */ w("h3", {
+								className: "text-base font-semibold text-text-primary mb-4",
+								children: "Service Summary"
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "flex items-center gap-3 mb-4",
+								children: [/* @__PURE__ */ w("img", {
+									src: N.image,
+									alt: N.name,
+									className: "h-12 w-12 rounded-lg object-cover"
+								}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+									className: "text-sm font-medium text-text-primary",
+									children: N.name
+								}), /* @__PURE__ */ w("p", {
+									className: "text-xs text-text-secondary",
+									children: N.category
+								})] })]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "space-y-2 text-sm border-t border-border-subtle pt-3",
+								children: [/* @__PURE__ */ T("div", {
+									className: "flex justify-between",
+									children: [/* @__PURE__ */ w("span", {
+										className: "text-text-secondary",
+										children: "Service Fee:"
+									}), /* @__PURE__ */ w("span", {
+										className: "text-text-primary",
+										children: i(50, { minimumFractionDigits: 0 })
+									})]
+								}), /* @__PURE__ */ T("div", {
+									className: "flex justify-between",
+									children: [/* @__PURE__ */ w("span", {
+										className: "text-text-secondary",
+										children: "Advance Payment:"
+									}), /* @__PURE__ */ w("span", {
+										className: "font-medium text-text-primary",
+										children: i(100, { minimumFractionDigits: 0 })
+									})]
 								})]
 							}),
 							/* @__PURE__ */ T("div", {
-								className: "flex gap-3",
-								children: [/* @__PURE__ */ w("button", {
-									type: "button",
-									onClick: () => A(`/customer/bookings/${H.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", {
-									type: "button",
-									onClick: () => A("/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",
-									children: "Browse More"
+								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", {
+									className: "text-xs",
+									children: "Pay remaining amount at cart"
 								})]
 							})
 						]
-					}),
-					M !== "confirmation" && /* @__PURE__ */ T("div", {
-						className: "flex justify-between mt-5",
-						children: [/* @__PURE__ */ T("button", {
-							type: "button",
-							onClick: X,
-							disabled: M === "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", M === "location" ? "opacity-40 cursor-not-allowed" : "hover:bg-accent"),
-							children: [/* @__PURE__ */ w(l, { className: "h-4 w-4" }), "Previous"]
-						}), /* @__PURE__ */ w("button", {
-							type: "button",
-							onClick: Y,
-							disabled: P,
-							className: t("flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity", P ? "opacity-60 cursor-not-allowed" : "hover:opacity-90"),
-							children: P ? /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(g, { className: "h-4 w-4 animate-spin" }), M === "payment" ? "Processing Payment..." : "Processing..."] }) : /* @__PURE__ */ T(C, { children: [M === "payment" ? "Confirm & Pay" : "Next", /* @__PURE__ */ w(u, { className: "h-4 w-4" })] })
-						})]
 					})
-				]
-			}), /* @__PURE__ */ w("div", {
-				className: "lg:col-span-1",
-				children: /* @__PURE__ */ T("div", {
-					className: "sticky top-6 rounded-lg border border-border-subtle bg-bg-surface p-5",
-					children: [
-						/* @__PURE__ */ w("h3", {
-							className: "text-base font-semibold text-text-primary mb-4",
-							children: "Service Summary"
-						}),
-						/* @__PURE__ */ T("div", {
-							className: "flex items-center gap-3 mb-4",
-							children: [/* @__PURE__ */ w("img", {
-								src: j.image,
-								alt: j.name,
-								className: "h-12 w-12 rounded-lg object-cover"
-							}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
-								className: "text-sm font-medium text-text-primary",
-								children: j.name
-							}), /* @__PURE__ */ w("p", {
-								className: "text-xs text-text-secondary",
-								children: j.category
-							})] })]
-						}),
-						/* @__PURE__ */ T("div", {
-							className: "space-y-2 text-sm border-t border-border-subtle pt-3",
-							children: [/* @__PURE__ */ T("div", {
-								className: "flex justify-between",
-								children: [/* @__PURE__ */ w("span", {
-									className: "text-text-secondary",
-									children: "Service Fee:"
-								}), /* @__PURE__ */ w("span", {
-									className: "text-text-primary",
-									children: i(50, { minimumFractionDigits: 0 })
-								})]
-							}), /* @__PURE__ */ T("div", {
-								className: "flex justify-between",
-								children: [/* @__PURE__ */ w("span", {
-									className: "text-text-secondary",
-									children: "Advance Payment:"
-								}), /* @__PURE__ */ w("span", {
-									className: "font-medium text-text-primary",
-									children: i(100, { minimumFractionDigits: 0 })
-								})]
-							})]
-						}),
-						/* @__PURE__ */ T("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", {
-								className: "text-xs",
-								children: "Pay remaining amount at cart"
-							})]
-						})
-					]
-				})
-			})]
-		})]
+				})]
+			})
+		]
 	});
 }
 //#endregion
-export { k as DirectServiceBookingPage };
+export { j as DirectServiceBookingPage };
 
 //# sourceMappingURL=DirectServiceBookingPage.js.map