@loczer/storefront-sdk 0.218.0 → 0.220.0

package/dist/pages/BookingPage.js

@@ -10,29 +10,29 @@ import { Button as ue } from "../ui/button.js";
 import { useStorefront as de, useStorefrontBookingProducts as fe, useStorefrontProducts as pe } from "../StorefrontContext.js";
 import { toast as me } from "../lib/toast.js";
 import { BookingPeriodSelector as he } from "../components/BookingPeriodSelector/index.js";
-import { BookingFlowSteps as ge } from "../components/BookingFlowSteps/index.js";
-import { StepSectionTitle as _e } from "../components/StepSectionTitle/index.js";
-import { Card as ve } from "../ui/card.js";
-import { ProductWarningNotice as ye } from "../components/ProductWarningNotice/index.js";
-import { StorefrontCartPanel as be } from "../components/StorefrontCartPanel/index.js";
-import { ProductPriceBadge as xe } from "../components/ProductPriceBadge/index.js";
-import { resolveProductImageContainerStyle as Se } from "../lib/productImageStyles.js";
-import { apiPost as Ce } from "../lib/apiCall.js";
-import { createStorefrontTimeSlotsFetcher as we } from "../lib/fetchStorefrontTimeSlots.js";
-import { FulfillmentSection as Te } from "../components/FulfillmentSection/index.js";
-import { BookingBikeQuickAddCard as Ee } from "../components/BookingBikeQuickAddCard/index.js";
-import { BookingBikeVariantDialog as De } from "../components/BookingBikeVariantDialog/index.js";
-import { useEffect as d, useLayoutEffect as Oe, useMemo as f, useRef as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { Link as _, useLocation as ke, useParams as Ae, useSearchParams as je } from "@rpcbase/router";
-import { useTranslation as Me } from "react-i18next";
-import { cn as Ne } from "@rpcbase/ui";
-import { ArrowLeft as Pe, Bike as Fe, Plus as Ie, ShoppingCart as Le } from "lucide-react";
+import { StepSectionTitle as d } from "../components/StepSectionTitle/index.js";
+import { Card as ge } from "../ui/card.js";
+import { ProductWarningNotice as _e } from "../components/ProductWarningNotice/index.js";
+import { StorefrontCartPanel as ve } from "../components/StorefrontCartPanel/index.js";
+import { ProductPriceBadge as ye } from "../components/ProductPriceBadge/index.js";
+import { resolveProductImageContainerStyle as be } from "../lib/productImageStyles.js";
+import { apiPost as xe } from "../lib/apiCall.js";
+import { createStorefrontTimeSlotsFetcher as Se } from "../lib/fetchStorefrontTimeSlots.js";
+import { FulfillmentSection as Ce } from "../components/FulfillmentSection/index.js";
+import { BookingFlowPageLayout as we } from "../components/BookingFlowPageLayout/index.js";
+import { BookingBikeQuickAddCard as Te } from "../components/BookingBikeQuickAddCard/index.js";
+import { BookingBikeVariantDialog as Ee } from "../components/BookingBikeVariantDialog/index.js";
+import { useEffect as f, useLayoutEffect as De, useMemo as p, useRef as m, useState as h } from "react";
+import { Fragment as Oe, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Link as ke, useLocation as Ae, useParams as je, useSearchParams as Me } from "@rpcbase/router";
+import { useTranslation as Ne } from "react-i18next";
+import { cn as Pe } from "@rpcbase/ui";
+import { Bike as Fe, Plus as Ie } from "lucide-react";
 //#region src/pages/BookingPage.tsx
-var v = (e) => String(e).padStart(2, "0"), y = "product_modal", Re = (e, t) => {
+var v = (e) => String(e).padStart(2, "0"), y = "product_modal", Le = (e, t) => {
 	let n = t - e;
 	return e >= 0 && (n === 1 || n === 2) ? n : null;
-}, ze = (e) => `${e.getFullYear()}-${v(e.getMonth() + 1)}-${v(e.getDate())}`, Be = (e) => {
+}, Re = (e) => `${e.getFullYear()}-${v(e.getMonth() + 1)}-${v(e.getDate())}`, ze = (e) => {
 	if (!e) return;
 	let t = e.match(/^(\d{4})-(\d{2})-(\d{2})$/);
 	if (!t) return;
@@ -42,20 +42,20 @@ var v = (e) => String(e).padStart(2, "0"), y = "product_modal", Re = (e, t) => {
 	if (e.representedVariantId?.trim()) return e.representedVariantId.trim();
 	let n = e.productVariants ?? [], r = n.find((e) => t(e.id))?.id ?? n[0]?.id;
 	return typeof r == "string" && r.trim().length > 0 ? r : null;
-}, Ve = (e, t) => e.fulfillment === "delivery" && !t ? {
+}, Be = (e, t) => e.fulfillment === "delivery" && !t ? {
 	...e,
 	fulfillment: "pickup"
-} : e, He = (e, t) => {
+} : e, Ve = (e, t) => {
 	let n = s(e), r = e.representedVariantId?.trim();
 	if (r) {
 		let e = t.get(c(n, r));
 		if (e) return e;
 	}
 	return t.get(c(n));
-}, Ue = (e, t, n) => n.get(c(s(e), t)), We = (e, t, n) => {
+}, He = (e, t, n) => n.get(c(s(e), t)), Ue = (e, t, n) => {
 	let r = oe(t);
 	return r === "quantity_unavailable" ? e("availability_quantity_unavailable") : r === "unavailable" || n === "OUT_OF_STOCK" ? e("availability_out_of_stock") : t?.remaining === void 0 ? t?.fewRemaining || n === "LOW_STOCK" ? e("availability_low_stock") : e("availability_in_stock") : e("availability_remaining_count", { count: t.remaining });
-}, Ge = (e) => {
+}, We = (e) => {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
 		let e = s(n);
@@ -73,46 +73,46 @@ var v = (e) => String(e).padStart(2, "0"), y = "product_modal", Re = (e, t) => {
 	return Array.from(t.values());
 };
 function S() {
-	let { t: v, i18n: S } = Me(), { storeSlug: C } = Ae(), w = ke(), Ke = p(null), { storefrontConfiguration: T } = de(), E = T.workspace?.workspaceLanguage, { bikes: qe, accessories: Je } = pe(), { bikes: D, accessories: O } = fe(), [k, A] = je(), { items: Ye, itemCount: j, addItem: Xe, removeItem: Ze, setQuantity: Qe } = ne();
-	Oe(() => {
-		w.hash === "#booking-products" && Ke.current?.scrollIntoView({ block: "start" });
+	let { t: v, i18n: S } = Ne(), { storeSlug: C } = je(), w = Ae(), Ge = m(null), { storefrontConfiguration: T } = de(), E = T.workspace?.workspaceLanguage, { bikes: Ke, accessories: qe } = pe(), { bikes: D, accessories: O } = fe(), [k, A] = Me(), { items: Je, itemCount: Ye, addItem: Xe, removeItem: Ze, setQuantity: Qe } = ne();
+	De(() => {
+		w.hash === "#booking-products" && Ge.current?.scrollIntoView({ block: "start" });
 	}, [w.hash]);
-	let $e = f(() => t(T), [T]), M = f(() => r(T), [T]), N = T.settings.fulfillmentModes.includes("delivery"), et = T.settings.deliveryDisabledReason.trim(), tt = T.shop.address?.trim() ?? "", P = T.bookingEngine.pricing.baseUnit, nt = re(P, v), rt = i(k).toString(), F = f(() => a(new URLSearchParams(rt), C), [rt, C]), [I, L] = m(() => ({
-		booking: Ve(n(F, M), N),
+	let $e = p(() => t(T), [T]), j = p(() => r(T), [T]), M = T.settings.fulfillmentModes.includes("delivery"), et = T.settings.deliveryDisabledReason.trim(), tt = T.shop.address?.trim() ?? "", N = T.bookingEngine.pricing.baseUnit, nt = re(N, v), rt = i(k).toString(), P = p(() => a(new URLSearchParams(rt), C), [rt, C]), [F, I] = h(() => ({
+		booking: Be(n(P, j), M),
 		shouldWriteToUrl: !0
-	})), R = I.booking, z = f(() => Be(R.start_date), [R.start_date]), it = f(() => Be(R.end_date) ?? z, [R.end_date, z]), [at, ot] = m(void 0), st = p(void 0), ct = p(""), lt = [
-		R.start_date,
-		R.start_time,
-		R.end_date,
-		R.end_time
+	})), L = F.booking, R = p(() => ze(L.start_date), [L.start_date]), it = p(() => ze(L.end_date) ?? R, [L.end_date, R]), [at, ot] = h(void 0), st = m(void 0), ct = m(""), lt = [
+		L.start_date,
+		L.start_time,
+		L.end_date,
+		L.end_time
 	].join(":");
 	ct.current = lt;
-	let B = at === lt, V = B ? R.start_time : "", H = B ? R.end_time : "", U = !B && k.get("start_date") === R.start_date && k.get("start_time") === R.start_time && k.get("end_date") === R.end_date && k.get("end_time") === R.end_time;
-	d(() => {
-		L((e) => {
+	let z = at === lt, B = z ? L.start_time : "", V = z ? L.end_time : "", H = !z && k.get("start_date") === L.start_date && k.get("start_time") === L.start_time && k.get("end_date") === L.end_date && k.get("end_time") === L.end_time;
+	f(() => {
+		I((e) => {
 			if (e.shouldWriteToUrl) return e;
 			let t = {
-				...M,
+				...j,
 				...e.booking
-			}, r = Ve(n(F, t), N);
+			}, r = Be(n(P, t), M);
 			return {
 				booking: b(e.booking, r) ? e.booking : r,
 				shouldWriteToUrl: !0
 			};
 		});
 	}, [
-		F,
-		M,
-		N
-	]), d(() => {
-		if (!I.shouldWriteToUrl) return;
+		P,
+		j,
+		M
+	]), f(() => {
+		if (!F.shouldWriteToUrl) return;
 		let t = e(k, {
-			...R,
-			start_time: U ? R.start_time : V,
-			end_time: U ? R.end_time : H
+			...L,
+			start_time: H ? L.start_time : B,
+			end_time: H ? L.end_time : V
 		});
 		if (t.toString() === k.toString()) {
-			L((e) => e.shouldWriteToUrl ? {
+			I((e) => e.shouldWriteToUrl ? {
 				...e,
 				shouldWriteToUrl: !1
 			} : e);
@@ -120,46 +120,46 @@ function S() {
 		}
 		A(t, { replace: !0 });
 	}, [
-		R,
-		I.shouldWriteToUrl,
-		U,
+		L,
+		F.shouldWriteToUrl,
 		H,
 		V,
+		B,
 		k,
 		A
-	]), d(() => {
+	]), f(() => {
 		ee(C, {
-			...R,
-			start_time: V,
-			end_time: H
+			...L,
+			start_time: B,
+			end_time: V
 		});
 	}, [
-		R,
-		H,
+		L,
 		V,
+		B,
 		C
 	]);
-	let W = f(() => Ge([...D, ...O]), [O, D]), [ut, G] = m([]);
-	d(() => {
-		if (!C || W.length === 0) {
-			G([]);
+	let U = p(() => We([...D, ...O]), [O, D]), [ut, W] = h([]);
+	f(() => {
+		if (!C || U.length === 0) {
+			W([]);
 			return;
 		}
-		let e = B ? u(R) : null;
+		let e = z ? u(L) : null;
 		if (!e) {
-			G([]);
+			W([]);
 			return;
 		}
 		let t = !1;
 		return (async () => {
 			try {
-				let n = await Ce(ae, {
+				let n = await xe(ae, {
 					storeSlug: C,
 					schedule: e,
-					products: W
+					products: U
 				}), r = ce.parse(n);
 				if (t) return;
-				G(r.success ? r.availability ?? [] : []);
+				W(r.success ? r.availability ?? [] : []);
 			} catch (e) {
 				if (t) return;
 				console.error("Failed to load storefront availability", e);
@@ -168,33 +168,33 @@ function S() {
 			t = !0;
 		};
 	}, [
-		W,
-		R.end_date,
-		R.end_time,
-		R.start_date,
-		R.start_time,
-		B,
+		U,
+		L.end_date,
+		L.end_time,
+		L.start_date,
+		L.start_time,
+		z,
 		C
 	]);
-	let K = f(() => new Map(ut.map((e) => [c(e.productId, e.productVariantId), e])), [ut]), q = f(() => D.map((e) => {
-		let t = He(e, K);
+	let G = p(() => new Map(ut.map((e) => [c(e.productId, e.productVariantId), e])), [ut]), K = p(() => D.map((e) => {
+		let t = Ve(e, G);
 		return {
 			...e,
 			availabilityStatus: t ? l(t) : e.availabilityStatus ?? "AVAILABLE"
 		};
-	}), [K, D]), dt = f(() => O.map((e) => {
-		let t = He(e, K);
+	}), [G, D]), dt = p(() => O.map((e) => {
+		let t = Ve(e, G);
 		return {
 			...e,
 			availabilityStatus: t ? l(t) : "AVAILABLE"
 		};
-	}), [O, K]), ft = (e, t) => {
-		let n = Ue(e, t, K);
+	}), [O, G]), ft = (e, t) => {
+		let n = He(e, t, G);
 		return n ? se(n) : e.availabilityStatus === "OUT_OF_STOCK";
 	}, pt = (e) => (e.productVariants ?? []).length > 0, mt = (e, t) => {
-		let n = Ue(e, t, K);
-		return n ? We(v, n, l(n)) : e.availabilityStatus === "OUT_OF_STOCK" ? v("availability_out_of_stock") : null;
-	}, ht = we(C), gt = f(() => ({
+		let n = He(e, t, G);
+		return n ? Ue(v, n, l(n)) : e.availabilityStatus === "OUT_OF_STOCK" ? v("availability_out_of_stock") : null;
+	}, ht = Se(C), gt = p(() => ({
 		startDate: v("booking_start_date"),
 		pickStartDate: v("booking_start_date"),
 		startTime: v("booking_start_time"),
@@ -209,12 +209,12 @@ function S() {
 		timeSlotsUnavailable: v("booking_time_slots_unavailable"),
 		timeSlotsLoadError: v("booking_time_slots_load_error"),
 		retryTimeSlots: v("booking_time_slots_retry")
-	}), [S.language, v]), J = (e) => {
+	}), [S.language, v]), q = (e) => {
 		let t = {
-			...R,
+			...L,
 			...e
 		};
-		b(R, t) || L((t) => {
+		b(L, t) || I((t) => {
 			let n = {
 				...t.booking,
 				...e
@@ -225,57 +225,57 @@ function S() {
 			};
 		});
 	}, _t = {
-		startDate: z,
+		startDate: R,
 		onStartDateChange: (e) => {
-			e && J({ start_date: ze(e) });
+			e && q({ start_date: Re(e) });
 		},
-		startTime: R.start_time,
-		onStartTimeChange: (e) => J({ start_time: e }),
+		startTime: L.start_time,
+		onStartTimeChange: (e) => q({ start_time: e }),
 		endDate: it,
 		onEndDateChange: (e) => {
-			e && J({ end_date: ze(e) });
+			e && q({ end_date: Re(e) });
 		},
-		endTime: R.end_time,
-		onEndTimeChange: (e) => J({ end_time: e }),
+		endTime: L.end_time,
+		onEndTimeChange: (e) => q({ end_time: e }),
 		bookingPeriodConfig: $e,
 		withMobileDateDrawer: !0,
 		fetchTimeSlots: ht,
 		onTimeSlotsConfirmationChange: (e) => {
 			let t = e ? ct.current : void 0;
-			st.current !== t && (st.current = t, L((e) => e.shouldWriteToUrl ? e : {
+			st.current !== t && (st.current = t, I((e) => e.shouldWriteToUrl ? e : {
 				...e,
 				shouldWriteToUrl: !0
 			}), ot(t));
 		},
 		labels: gt,
 		localeCode: S.language
-	}, Y = f(() => ie({
-		items: Ye,
+	}, J = p(() => ie({
+		items: Je,
 		language: S.language,
 		fallbackLanguage: E,
 		products: {
-			bikes: qe,
-			accessories: Je
+			bikes: Ke,
+			accessories: qe
 		},
-		priceUnit: P
+		priceUnit: N
 	}), [
-		Je,
 		qe,
+		Ke,
 		S.language,
-		Ye,
-		P,
+		Je,
+		N,
 		E
-	]), vt = f(() => Y.lines.map((e) => ({
+	]), vt = p(() => J.lines.map((e) => ({
 		productId: e.checkoutProductId,
 		productVariantId: e.productVariantId,
 		quantity: e.quantity
-	})), [Y.lines]), [yt, bt] = m([]);
-	d(() => {
+	})), [J.lines]), [yt, bt] = h([]);
+	f(() => {
 		if (!C || vt.length === 0) {
 			bt([]);
 			return;
 		}
-		let e = B ? u(R) : null;
+		let e = z ? u(L) : null;
 		if (!e) {
 			bt([]);
 			return;
@@ -283,7 +283,7 @@ function S() {
 		let t = !1;
 		return (async () => {
 			try {
-				let n = await Ce(ae, {
+				let n = await xe(ae, {
 					storeSlug: C,
 					schedule: e,
 					products: vt
@@ -298,17 +298,17 @@ function S() {
 			t = !0;
 		};
 	}, [
-		R.end_date,
-		R.end_time,
-		R.start_date,
-		R.start_time,
-		B,
+		L.end_date,
+		L.end_time,
+		L.start_date,
+		L.start_time,
+		z,
 		vt,
 		C
 	]);
-	let xt = f(() => new Map(yt.map((e) => [c(e.productId, e.productVariantId), e])), [yt]), St = f(() => ({
-		...Y,
-		lines: Y.lines.map((e) => {
+	let xt = p(() => new Map(yt.map((e) => [c(e.productId, e.productVariantId), e])), [yt]), St = p(() => ({
+		...J,
+		lines: J.lines.map((e) => {
 			let t = xt.get(c(e.checkoutProductId, e.productVariantId)), n = t ? oe(t) : e.availabilityStatus === "OUT_OF_STOCK" ? "unavailable" : void 0;
 			return {
 				...e,
@@ -316,17 +316,17 @@ function S() {
 				availabilityIssue: n
 			};
 		})
-	}), [xt, Y]), X = e(new URLSearchParams(), {
-		...R,
-		start_time: V,
-		end_time: H
-	}).toString(), Z = B && u(R) !== null, Ct = `/${C ?? ""}${X ? `?${X}` : ""}`, wt = `/${C ?? ""}/booking${X ? `?${X}` : ""}`, Tt = `/${C ?? ""}/checkout${X ? `?${X}` : ""}`, Et = { backTo: `${w.pathname}${w.search}${w.hash}` }, [Dt, Ot] = m(null), kt = q.findIndex((e) => e.id === Dt), At = k.get(y)?.trim() ?? "", Q = At ? q.find((e) => e.id === At) ?? dt.find((e) => e.id === At) ?? null : null, jt = (e) => {
+	}), [xt, J]), Y = e(new URLSearchParams(), {
+		...L,
+		start_time: B,
+		end_time: V
+	}).toString(), X = z && u(L) !== null, Ct = `/${C ?? ""}${Y ? `?${Y}` : ""}`, wt = `/${C ?? ""}/booking${Y ? `?${Y}` : ""}`, Tt = `/${C ?? ""}/checkout${Y ? `?${Y}` : ""}`, Et = { backTo: `${w.pathname}${w.search}${w.hash}` }, [Dt, Ot] = h(null), kt = K.findIndex((e) => e.id === Dt), At = k.get(y)?.trim() ?? "", Z = At ? K.find((e) => e.id === At) ?? dt.find((e) => e.id === At) ?? null : null, Q = (e) => {
 		let t = new URLSearchParams(k);
 		e?.trim() ? t.set(y, e) : t.delete(y), A(t, { replace: !0 });
-	}, Mt = (e) => {
-		x(e) && jt(e.id);
+	}, jt = (e) => {
+		x(e) && Q(e.id);
 	}, $ = (e, t, n = 1) => {
-		if (!Z) return;
+		if (!X) return;
 		let r = Math.max(1, Math.floor(n));
 		Xe({
 			kind: e.kind,
@@ -342,241 +342,212 @@ function S() {
 				fallbackLanguage: E
 			})
 		}));
+	}, Mt = (e) => {
+		jt(e);
 	}, Nt = (e) => {
-		Mt(e);
-	}, Pt = (e) => {
 		let t = e.productVariants ?? [], n = x(e);
 		if (n) {
 			if (t.length > 1) {
-				Mt(e);
+				jt(e);
 				return;
 			}
 			$(e, n);
 		}
 	};
-	return /* @__PURE__ */ g("div", {
-		className: "mx-auto max-w-7xl px-4 py-8 sm:px-6",
-		children: [/* @__PURE__ */ g("div", {
-			className: "flex flex-col gap-4",
-			children: [
-				/* @__PURE__ */ h(ge, {
-					currentStep: "booking",
-					bookingPath: wt,
-					checkoutPath: Tt,
-					checkoutEnabled: j > 0 && Z
-				}),
-				/* @__PURE__ */ g("div", {
-					className: "flex items-center justify-between gap-3",
-					children: [/* @__PURE__ */ g(_, {
-						to: Ct,
-						className: "inline-flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-slate-950",
-						children: [/* @__PURE__ */ h(Pe, {
-							className: "h-4 w-4",
-							"aria-hidden": "true"
-						}), /* @__PURE__ */ h("span", { children: v("back_to_home") })]
-					}), /* @__PURE__ */ h(_, {
-						to: Tt,
-						className: Ne(j > 0 && Z ? "inline-flex" : "hidden"),
-						children: /* @__PURE__ */ g(ue, {
-							size: "sm",
-							className: "gap-2",
-							children: [/* @__PURE__ */ h(Le, {
-								className: "h-4 w-4",
-								"aria-hidden": "true"
-							}), /* @__PURE__ */ h("span", { children: v("checkout_button") })]
-						})
-					})]
-				}),
-				/* @__PURE__ */ g("div", {
-					className: "grid gap-6 lg:grid-cols-12",
-					children: [/* @__PURE__ */ h("div", {
-						className: "min-w-0 lg:col-span-8",
-						children: /* @__PURE__ */ g("div", {
-							className: "space-y-6",
+	return /* @__PURE__ */ _(Oe, { children: [/* @__PURE__ */ g(we, {
+		currentStep: "booking",
+		bookingPath: wt,
+		checkoutPath: Tt,
+		checkoutEnabled: Ye > 0 && X,
+		backPath: Ct,
+		backLabel: v("back_to_home"),
+		children: /* @__PURE__ */ _("div", {
+			className: "grid gap-6 lg:grid-cols-12",
+			children: [/* @__PURE__ */ g("div", {
+				className: "min-w-0 lg:col-span-8",
+				children: /* @__PURE__ */ _("div", {
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ _("div", {
+							className: "space-y-3",
 							children: [
-								/* @__PURE__ */ g("div", {
-									className: "space-y-3",
-									children: [
-										/* @__PURE__ */ h(_e, {
-											stepNumber: 1,
-											title: v("booking_summary_title")
-										}),
-										/* @__PURE__ */ h(he, {
-											..._t,
-											selectionFlow: "dates-first",
-											className: "gap-3",
-											labelClassName: "text-xs font-medium text-slate-700",
-											inputClassName: "h-10"
-										}),
-										/* @__PURE__ */ h(Te, {
-											value: R.fulfillment,
-											onValueChange: (e) => J({ fulfillment: e }),
-											pickupAddress: tt,
-											deliveryEnabled: N,
-											deliveryDisabledReason: et,
-											startAddress: R.start_address,
-											onStartAddressChange: (e) => J({ start_address: e }),
-											endAddress: R.end_address,
-											onEndAddressChange: (e) => J({ end_address: e }),
-											showPickupAddressWhenPickupOnly: !1,
-											testIdPrefix: "storefront-booking-fulfillment"
-										})
-									]
-								}),
-								/* @__PURE__ */ g("div", {
-									ref: Ke,
-									id: "booking-products",
-									className: "space-y-2 scroll-mt-32",
-									children: [/* @__PURE__ */ h(_e, {
-										stepNumber: 2,
-										title: v("products_title")
-									}), /* @__PURE__ */ h("p", {
-										className: "text-sm text-slate-600",
-										children: /* @__PURE__ */ h("span", { children: v("products_description") })
-									})]
+								/* @__PURE__ */ g(d, {
+									stepNumber: 1,
+									title: v("booking_summary_title")
 								}),
-								/* @__PURE__ */ h("div", {
-									className: "grid gap-4 md:grid-cols-2",
-									children: q.map((e, t) => {
-										let n = `/${C ?? ""}/products/${e.slug}`, r = !!x(e) || pt(e);
-										return /* @__PURE__ */ h(Ee, {
-											bike: e,
-											detailsPath: n,
-											productDetailsLinkState: Et,
-											onAction: () => Nt(e),
-											actionDisabled: !r || !Z,
-											fallbackLanguage: E,
-											dimOnColumnCount: Re(kt, t),
-											onQuickAdd: (t, n) => $(e, t, n),
-											onHoverStart: () => Ot(e.id),
-											onHoverEnd: () => {
-												Ot((t) => t === e.id ? null : t);
-											},
-											testId: `storefront-booking-bike-card-${e.id}`.toLowerCase()
-										}, e.id);
-									})
-								}),
-								/* @__PURE__ */ g("div", {
-									className: "space-y-2 pt-4",
-									children: [/* @__PURE__ */ h(_e, {
-										stepNumber: 3,
-										title: v("accessories_title")
-									}), /* @__PURE__ */ h("p", {
-										className: "text-sm text-slate-600",
-										children: /* @__PURE__ */ h("span", { children: v("accessories_description") })
-									})]
+								/* @__PURE__ */ g(he, {
+									..._t,
+									className: "gap-3",
+									labelClassName: "text-xs font-medium text-slate-700",
+									inputClassName: "h-10"
 								}),
-								/* @__PURE__ */ h("div", {
-									className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-									children: dt.map((e) => {
-										let t = o(e.name, S.language, E), n = o(e.description, S.language, E), r = o(e.warning, S.language, E), i = typeof e.images?.[0] == "string" ? e.images[0].trim() : "", a = Se(e.primaryImageStyle), ee = `/${C ?? ""}/products/${e.slug}`, s = x(e), te = e.availabilityStatus === "OUT_OF_STOCK", ne = !!s || pt(e);
-										return /* @__PURE__ */ h(ve, {
-											"data-testid": `storefront-booking-accessory-card-${e.id}`.toLowerCase(),
-											className: "h-full border-slate-200 bg-white shadow-sm transition-[border-color,box-shadow] duration-200 hover:border-primary/20 hover:shadow-md",
-											children: /* @__PURE__ */ g("div", {
-												className: "flex h-full flex-col gap-2 p-3",
+								/* @__PURE__ */ g(Ce, {
+									value: L.fulfillment,
+									onValueChange: (e) => q({ fulfillment: e }),
+									pickupAddress: tt,
+									deliveryEnabled: M,
+									deliveryDisabledReason: et,
+									startAddress: L.start_address,
+									onStartAddressChange: (e) => q({ start_address: e }),
+									endAddress: L.end_address,
+									onEndAddressChange: (e) => q({ end_address: e }),
+									showPickupAddressWhenPickupOnly: !1,
+									testIdPrefix: "storefront-booking-fulfillment"
+								})
+							]
+						}),
+						/* @__PURE__ */ _("div", {
+							ref: Ge,
+							id: "booking-products",
+							className: "space-y-2 scroll-mt-32",
+							children: [/* @__PURE__ */ g(d, {
+								stepNumber: 2,
+								title: v("products_title")
+							}), /* @__PURE__ */ g("p", {
+								className: "text-sm text-slate-600",
+								children: /* @__PURE__ */ g("span", { children: v("products_description") })
+							})]
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "grid gap-4 md:grid-cols-2",
+							children: K.map((e, t) => {
+								let n = `/${C ?? ""}/products/${e.slug}`, r = !!x(e) || pt(e);
+								return /* @__PURE__ */ g(Te, {
+									bike: e,
+									detailsPath: n,
+									productDetailsLinkState: Et,
+									onAction: () => Mt(e),
+									actionDisabled: !r || !X,
+									fallbackLanguage: E,
+									dimOnColumnCount: Le(kt, t),
+									onQuickAdd: (t, n) => $(e, t, n),
+									onHoverStart: () => Ot(e.id),
+									onHoverEnd: () => {
+										Ot((t) => t === e.id ? null : t);
+									},
+									testId: `storefront-booking-bike-card-${e.id}`.toLowerCase()
+								}, e.id);
+							})
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "space-y-2 pt-4",
+							children: [/* @__PURE__ */ g(d, {
+								stepNumber: 3,
+								title: v("accessories_title")
+							}), /* @__PURE__ */ g("p", {
+								className: "text-sm text-slate-600",
+								children: /* @__PURE__ */ g("span", { children: v("accessories_description") })
+							})]
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+							children: dt.map((e) => {
+								let t = o(e.name, S.language, E), n = o(e.description, S.language, E), r = o(e.warning, S.language, E), i = typeof e.images?.[0] == "string" ? e.images[0].trim() : "", a = be(e.primaryImageStyle), ee = `/${C ?? ""}/products/${e.slug}`, s = x(e), te = e.availabilityStatus === "OUT_OF_STOCK", ne = !!s || pt(e);
+								return /* @__PURE__ */ g(ge, {
+									"data-testid": `storefront-booking-accessory-card-${e.id}`.toLowerCase(),
+									className: "h-full border-slate-200 bg-white shadow-sm transition-[border-color,box-shadow] duration-200 hover:border-primary/20 hover:shadow-md",
+									children: /* @__PURE__ */ _("div", {
+										className: "flex h-full flex-col gap-2 p-3",
+										children: [
+											/* @__PURE__ */ _("div", {
+												className: Pe("relative aspect-[1618/1000] overflow-hidden rounded-xl", a.className),
+												style: a.style,
+												children: [i ? /* @__PURE__ */ g("img", {
+													src: i,
+													alt: t,
+													className: "absolute inset-0 h-full w-full object-contain p-1",
+													loading: "lazy"
+												}) : /* @__PURE__ */ g("div", {
+													className: "absolute inset-0 flex items-center justify-center text-slate-400",
+													children: /* @__PURE__ */ g(Fe, {
+														className: "h-8 w-8",
+														"aria-hidden": "true"
+													})
+												}), te ? /* @__PURE__ */ g(le, {
+													variant: "destructive",
+													className: "pointer-events-none absolute right-2 top-2 shadow-sm",
+													children: /* @__PURE__ */ g("span", { children: v("availability_out_of_stock") })
+												}) : null]
+											}),
+											/* @__PURE__ */ _("div", {
+												className: "flex flex-1 flex-col gap-1",
 												children: [
-													/* @__PURE__ */ g("div", {
-														className: Ne("relative aspect-[1618/1000] overflow-hidden rounded-xl", a.className),
-														style: a.style,
-														children: [i ? /* @__PURE__ */ h("img", {
-															src: i,
-															alt: t,
-															className: "absolute inset-0 h-full w-full object-contain p-1",
-															loading: "lazy"
-														}) : /* @__PURE__ */ h("div", {
-															className: "absolute inset-0 flex items-center justify-center text-slate-400",
-															children: /* @__PURE__ */ h(Fe, {
-																className: "h-8 w-8",
-																"aria-hidden": "true"
-															})
-														}), te ? /* @__PURE__ */ h(le, {
-															variant: "destructive",
-															className: "pointer-events-none absolute right-2 top-2 shadow-sm",
-															children: /* @__PURE__ */ h("span", { children: v("availability_out_of_stock") })
-														}) : null]
+													/* @__PURE__ */ _("div", {
+														className: "flex items-start justify-between gap-2",
+														children: [/* @__PURE__ */ g("p", {
+															className: "min-w-0 text-sm font-semibold text-slate-950",
+															children: /* @__PURE__ */ g("span", { children: t })
+														}), /* @__PURE__ */ g(ye, {
+															prices: e.prices,
+															className: "shrink-0",
+															openOnHover: !1
+														})]
 													}),
-													/* @__PURE__ */ g("div", {
-														className: "flex flex-1 flex-col gap-1",
-														children: [
-															/* @__PURE__ */ g("div", {
-																className: "flex items-start justify-between gap-2",
-																children: [/* @__PURE__ */ h("p", {
-																	className: "min-w-0 text-sm font-semibold text-slate-950",
-																	children: /* @__PURE__ */ h("span", { children: t })
-																}), /* @__PURE__ */ h(xe, {
-																	prices: e.prices,
-																	className: "shrink-0",
-																	openOnHover: !1
-																})]
-															}),
-															/* @__PURE__ */ h("p", {
-																className: "line-clamp-2 text-xs text-slate-600",
-																children: /* @__PURE__ */ h("span", { children: n })
-															}),
-															/* @__PURE__ */ h(ye, {
-																warning: r,
-																className: "mt-1"
-															})
-														]
+													/* @__PURE__ */ g("p", {
+														className: "line-clamp-2 text-xs text-slate-600",
+														children: /* @__PURE__ */ g("span", { children: n })
 													}),
-													/* @__PURE__ */ g("div", {
-														className: "mt-auto flex items-center gap-2",
-														children: [/* @__PURE__ */ h(_, {
-															to: ee,
-															state: Et,
-															className: "text-xs font-medium text-slate-700 hover:text-slate-950",
-															children: /* @__PURE__ */ h("span", { children: v("product_details_link") })
-														}), /* @__PURE__ */ g(ue, {
-															type: "button",
-															size: "sm",
-															className: "ml-auto gap-2",
-															onClick: () => Pt(e),
-															disabled: !ne || !Z,
-															children: [/* @__PURE__ */ h("span", { children: v("add_to_cart") }), /* @__PURE__ */ h(Ie, {
-																className: "h-4 w-4",
-																"aria-hidden": "true"
-															})]
-														})]
+													/* @__PURE__ */ g(_e, {
+														warning: r,
+														className: "mt-1"
 													})
 												]
+											}),
+											/* @__PURE__ */ _("div", {
+												className: "mt-auto flex items-center gap-2",
+												children: [/* @__PURE__ */ g(ke, {
+													to: ee,
+													state: Et,
+													className: "text-xs font-medium text-slate-700 hover:text-slate-950",
+													children: /* @__PURE__ */ g("span", { children: v("product_details_link") })
+												}), /* @__PURE__ */ _(ue, {
+													type: "button",
+													size: "sm",
+													className: "ml-auto gap-2",
+													onClick: () => Nt(e),
+													disabled: !ne || !X,
+													children: [/* @__PURE__ */ g("span", { children: v("add_to_cart") }), /* @__PURE__ */ g(Ie, {
+														className: "h-4 w-4",
+														"aria-hidden": "true"
+													})]
+												})]
 											})
-										}, e.id);
+										]
 									})
-								})
-							]
-						})
-					}), /* @__PURE__ */ h("div", {
-						className: "min-w-0 lg:col-span-4",
-						children: /* @__PURE__ */ h(be, {
-							lines: St.lines,
-							itemCount: j,
-							totalPerBaseUnitMinor: St.totalPerBaseUnitMinor,
-							baseUnitLabel: nt,
-							checkoutPath: Tt,
-							showCheckoutAction: Z,
-							editable: !0,
-							stickyTopClassName: "top-32",
-							onQuantityChange: Qe,
-							onRemove: Ze
+								}, e.id);
+							})
 						})
-					})]
+					]
 				})
-			]
-		}), /* @__PURE__ */ h(De, {
-			open: !!Q,
-			product: Q,
-			onOpenChange: (e) => {
-				e || jt(null);
-			},
-			getVariantAvailabilityLabel: (e) => Q ? mt(Q, e) : null,
-			isVariantOutOfCapacity: (e) => Q ? ft(Q, e) : !1,
-			addDisabled: !Z,
-			onAddVariant: (e, t) => {
-				Q && ($(Q, e, t), jt(null));
-			}
-		})]
-	});
+			}), /* @__PURE__ */ g("div", {
+				className: "min-w-0 lg:col-span-4",
+				children: /* @__PURE__ */ g(ve, {
+					lines: St.lines,
+					itemCount: Ye,
+					totalPerBaseUnitMinor: St.totalPerBaseUnitMinor,
+					baseUnitLabel: nt,
+					checkoutPath: Tt,
+					showCheckoutAction: X,
+					editable: !0,
+					stickyTopClassName: "top-32",
+					onQuantityChange: Qe,
+					onRemove: Ze
+				})
+			})]
+		})
+	}), /* @__PURE__ */ g(Ee, {
+		open: !!Z,
+		product: Z,
+		onOpenChange: (e) => {
+			e || Q(null);
+		},
+		getVariantAvailabilityLabel: (e) => Z ? mt(Z, e) : null,
+		isVariantOutOfCapacity: (e) => Z ? ft(Z, e) : !1,
+		addDisabled: !X,
+		onAddVariant: (e, t) => {
+			Z && ($(Z, e, t), Q(null));
+		}
+	})] });
 }
 //#endregion
 export { S as default };