@burdenoff/microfe-adaptercloud 2026.614.1

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

@@ -0,0 +1,623 @@
+import { useAdapterCloud as e } from "../../context/AdapterCloudContext.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { EmptyState as r } from "../../components/EmptyState.js";
+import { formatCurrency as i } from "../../utils/formatters.js";
+import { getCartById as a } from "../../mocks/data.js";
+import { useMemo as o, useState as s } from "react";
+import { AlertCircle as c, ArrowLeft as l, ArrowRight as u, Calendar as d, CheckCircle2 as f, Clock as p, CreditCard as m, Home as h, Loader2 as g, MapPin as _, Navigation as v, Phone as y, Smartphone as b, Wallet as x } from "lucide-react";
+import { useParams as S } from "react-router-dom";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/adaptercloud/pages/customer/DirectServiceBookingPage.tsx
+var E = [
+	"location",
+	"details",
+	"payment",
+	"confirmation"
+], D = {
+	location: "Location",
+	details: "Details",
+	payment: "Payment",
+	confirmation: "Confirmation"
+};
+function O() {
+	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([], {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+		e.push({
+			value: i,
+			label: a
+		});
+	}
+	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({
+		address: "",
+		landmark: "",
+		instructions: "",
+		phoneNumber: ""
+	}), [R, z] = s({
+		preferredTime: "",
+		specialInstructions: "",
+		isUrgent: !1
+	}), [B, V] = s("upi"), [H, U] = s(null);
+	if (!j) return /* @__PURE__ */ w(n, {
+		title: "Cart Not Found",
+		children: /* @__PURE__ */ w(r, {
+			icon: /* @__PURE__ */ w(h, { className: "h-12 w-12" }),
+			title: "Service not available",
+			description: "Direct service is not available for this cart.",
+			action: /* @__PURE__ */ w("button", {
+				type: "button",
+				onClick: () => A("/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 = () => {
+		if (!navigator.geolocation) {
+			alert("Geolocation is not supported by this browser.");
+			return;
+		}
+		navigator.geolocation.getCurrentPosition(() => {
+			L((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({
+				bookingId: `BK-${Date.now()}`,
+				transactionId: `TXN-${Date.now()}`,
+				estimatedArrival: new Date(Date.now() + 30 * 6e4).toISOString()
+			}), N("confirmation"), F(!1);
+		}, 1500);
+	};
+	return /* @__PURE__ */ T(n, {
+		title: /* @__PURE__ */ T("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ w("button", {
+				type: "button",
+				onClick: () => A(`/customer/carts/${j.id}`),
+				className: "rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground 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-muted-foreground",
+				children: j.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-green-500/20 text-green-600 dark:text-green-400" : i ? "bg-foreground text-background" : "bg-muted text-muted-foreground"),
+							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-foreground" : "text-muted-foreground"),
+							children: D[e]
+						})]
+					}), n < E.length - 1 && /* @__PURE__ */ w("div", { className: t("mx-2 h-0.5 w-8 sm:w-16", r ? "bg-green-500/30" : "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 bg-card p-5",
+						children: [
+							/* @__PURE__ */ T("h2", {
+								className: "text-base font-semibold text-foreground mb-1 flex items-center gap-2",
+								children: [/* @__PURE__ */ w(_, { className: "h-4 w-4" }), "Service Location"]
+							}),
+							/* @__PURE__ */ w("p", {
+								className: "text-xs text-muted-foreground 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-foreground mb-1.5",
+										children: ["Your Address ", /* @__PURE__ */ w("span", {
+											className: "text-red-500",
+											children: "*"
+										})]
+									}), /* @__PURE__ */ T("div", {
+										className: "flex gap-2",
+										children: [/* @__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 bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+										}), /* @__PURE__ */ T("button", {
+											type: "button",
+											onClick: K,
+											className: "flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-xs font-medium text-foreground 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-foreground 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 bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+									})] }),
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
+										className: "block text-sm font-medium text-foreground 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 bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+									})] }),
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
+										className: "block text-sm font-medium text-foreground mb-1.5",
+										children: ["Phone Number ", /* @__PURE__ */ w("span", {
+											className: "text-red-500",
+											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-muted-foreground" }), /* @__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 bg-card py-2 pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+										})]
+									})] })
+								]
+							})
+						]
+					}),
+					M === "details" && /* @__PURE__ */ T("div", {
+						className: "rounded-lg border border-border bg-card p-5",
+						children: [
+							/* @__PURE__ */ T("h2", {
+								className: "text-base font-semibold text-foreground 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-muted-foreground 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-foreground mb-1.5",
+										children: ["Preferred Time Slot ", /* @__PURE__ */ w("span", {
+											className: "text-red-500",
+											children: "*"
+										})]
+									}), /* @__PURE__ */ w("div", {
+										className: "grid grid-cols-4 gap-2",
+										children: W.map((e) => /* @__PURE__ */ w("button", {
+											type: "button",
+											onClick: () => z((t) => ({
+												...t,
+												preferredTime: e.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-foreground" : "border-border text-muted-foreground hover:bg-accent hover:text-foreground"),
+											children: e.label
+										}, e.value))
+									})] }),
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
+										className: "block text-sm font-medium text-foreground 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 bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+									})] }),
+									/* @__PURE__ */ T("label", {
+										className: "flex items-center gap-2 cursor-pointer",
+										children: [/* @__PURE__ */ w("input", {
+											type: "checkbox",
+											checked: R.isUrgent,
+											onChange: (e) => z((t) => ({
+												...t,
+												isUrgent: e.target.checked
+											})),
+											className: "h-4 w-4 rounded border-border"
+										}), /* @__PURE__ */ w("span", {
+											className: "text-sm text-muted-foreground",
+											children: "This is urgent (additional charges may apply)"
+										})]
+									})
+								]
+							})
+						]
+					}),
+					M === "payment" && /* @__PURE__ */ T("div", {
+						className: "rounded-lg border border-border bg-card p-5",
+						children: [
+							/* @__PURE__ */ T("h2", {
+								className: "text-base font-semibold text-foreground 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-muted-foreground 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-blue-500/20 bg-blue-500/5 p-3",
+										children: [/* @__PURE__ */ w(c, { className: "h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" }), /* @__PURE__ */ T("p", {
+											className: "text-xs text-blue-700 dark:text-blue-300",
+											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 hover:bg-accent"),
+											children: [
+												/* @__PURE__ */ w(i, { className: "mx-auto h-5 w-5 text-muted-foreground mb-1" }),
+												/* @__PURE__ */ w("p", {
+													className: "text-sm font-medium text-foreground",
+													children: n
+												}),
+												/* @__PURE__ */ w("p", {
+													className: "text-[10px] text-muted-foreground",
+													children: r
+												})
+											]
+										}, e))
+									}),
+									/* @__PURE__ */ T("div", {
+										className: "rounded-lg bg-muted p-4",
+										children: [/* @__PURE__ */ w("h3", {
+											className: "text-sm font-medium text-foreground 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-muted-foreground",
+														children: "Advance Payment:"
+													}), /* @__PURE__ */ w("span", {
+														className: "text-foreground",
+														children: i(100, { minimumFractionDigits: 0 })
+													})]
+												}),
+												/* @__PURE__ */ T("div", {
+													className: "flex justify-between",
+													children: [/* @__PURE__ */ w("span", {
+														className: "text-muted-foreground",
+														children: "Service Fee:"
+													}), /* @__PURE__ */ w("span", {
+														className: "text-foreground",
+														children: i(50, { minimumFractionDigits: 0 })
+													})]
+												}),
+												/* @__PURE__ */ T("div", {
+													className: "flex justify-between text-muted-foreground",
+													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 pt-2 font-semibold",
+													children: [/* @__PURE__ */ w("span", {
+														className: "text-foreground",
+														children: "Total Amount:"
+													}), /* @__PURE__ */ w("span", {
+														className: "text-foreground",
+														children: i(150, { minimumFractionDigits: 0 })
+													})]
+												})
+											]
+										})]
+									})
+								]
+							})
+						]
+					}),
+					M === "confirmation" && H && /* @__PURE__ */ T("div", {
+						className: "rounded-lg border border-border bg-card 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-green-500/10",
+										children: /* @__PURE__ */ w(f, { className: "h-7 w-7 text-green-600 dark:text-green-400" })
+									}),
+									/* @__PURE__ */ w("h2", {
+										className: "text-lg font-semibold text-foreground mb-1",
+										children: "Booking Confirmed!"
+									}),
+									/* @__PURE__ */ w("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Your direct service booking has been confirmed and payment processed."
+									})
+								]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "rounded-lg bg-muted p-4 mb-4",
+								children: [/* @__PURE__ */ w("h3", {
+									className: "text-sm font-medium text-foreground 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-muted-foreground",
+											children: "Booking ID"
+										}), /* @__PURE__ */ w("p", {
+											className: "font-mono text-xs text-foreground",
+											children: H.bookingId
+										})] }),
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											className: "text-xs text-muted-foreground",
+											children: "Est. Arrival"
+										}), /* @__PURE__ */ w("p", {
+											className: "text-foreground",
+											children: new Date(H.estimatedArrival).toLocaleTimeString([], {
+												hour: "2-digit",
+												minute: "2-digit"
+											})
+										})] }),
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											className: "text-xs text-muted-foreground",
+											children: "Location"
+										}), /* @__PURE__ */ w("p", {
+											className: "text-foreground truncate",
+											children: I.address
+										})] }),
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											className: "text-xs text-muted-foreground",
+											children: "Phone"
+										}), /* @__PURE__ */ w("p", {
+											className: "text-foreground",
+											children: I.phoneNumber
+										})] })
+									]
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "rounded-lg border border-green-500/20 bg-green-500/5 p-4 mb-4",
+								children: [/* @__PURE__ */ T("h3", {
+									className: "text-sm font-medium text-green-600 dark:text-green-400 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-muted-foreground",
+											children: "Transaction ID"
+										}), /* @__PURE__ */ w("p", {
+											className: "font-mono text-xs text-foreground",
+											children: H.transactionId
+										})] }),
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											className: "text-xs text-muted-foreground",
+											children: "Advance Paid"
+										}), /* @__PURE__ */ w("p", {
+											className: "font-medium text-foreground",
+											children: i(100, { minimumFractionDigits: 0 })
+										})] }),
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											className: "text-xs text-muted-foreground",
+											children: "Method"
+										}), /* @__PURE__ */ w("p", {
+											className: "capitalize text-foreground",
+											children: B
+										})] }),
+										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
+											className: "text-xs text-muted-foreground",
+											children: "Status"
+										}), /* @__PURE__ */ w("p", {
+											className: "font-medium text-green-600 dark:text-green-400",
+											children: "Paid"
+										})] })
+									]
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "rounded-lg border border-blue-500/20 bg-blue-500/5 p-4 mb-6",
+								children: [/* @__PURE__ */ w("h3", {
+									className: "text-sm font-medium text-blue-600 dark:text-blue-400 mb-2",
+									children: "Next Steps"
+								}), /* @__PURE__ */ T("div", {
+									className: "space-y-2 text-xs text-blue-700 dark:text-blue-300",
+									children: [
+										/* @__PURE__ */ T("div", {
+											className: "flex items-start gap-2",
+											children: [/* @__PURE__ */ w(f, { className: "h-3.5 w-3.5 text-green-600 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(H.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: () => 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 px-4 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+									children: "Browse More"
+								})]
+							})
+						]
+					}),
+					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 px-4 py-2.5 text-sm font-medium text-foreground 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 bg-card p-5",
+					children: [
+						/* @__PURE__ */ w("h3", {
+							className: "text-base font-semibold text-foreground 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-foreground",
+								children: j.name
+							}), /* @__PURE__ */ w("p", {
+								className: "text-xs text-muted-foreground",
+								children: j.category
+							})] })]
+						}),
+						/* @__PURE__ */ T("div", {
+							className: "space-y-2 text-sm border-t border-border pt-3",
+							children: [/* @__PURE__ */ T("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ w("span", {
+									className: "text-muted-foreground",
+									children: "Service Fee:"
+								}), /* @__PURE__ */ w("span", {
+									className: "text-foreground",
+									children: i(50, { minimumFractionDigits: 0 })
+								})]
+							}), /* @__PURE__ */ T("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ w("span", {
+									className: "text-muted-foreground",
+									children: "Advance Payment:"
+								}), /* @__PURE__ */ w("span", {
+									className: "font-medium text-foreground",
+									children: i(100, { minimumFractionDigits: 0 })
+								})]
+							})]
+						}),
+						/* @__PURE__ */ T("div", {
+							className: "flex items-center gap-2 mt-3 pt-3 border-t border-border text-green-600 dark:text-green-400",
+							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 };
+
+//# sourceMappingURL=DirectServiceBookingPage.js.map