@loczer/storefront-sdk 0.211.0 → 0.213.0

package/dist/pages/HomePage.js

@@ -13,31 +13,32 @@ import { BookingStartTimeField as oe } from "../components/BookingPeriodSelector
 import { BookingEndDateField as se } from "../components/BookingPeriodSelector/components/BookingEndDateField.js";
 import { BookingEndTimeField as ce } from "../components/BookingPeriodSelector/components/BookingEndTimeField.js";
 import { BookingTimeSlotsStatus as le } from "../components/BookingPeriodSelector/components/BookingTimeSlotsStatus.js";
+import { BookingMobileDateDrawer as ue } from "../components/BookingPeriodSelector/components/BookingMobileDateDrawer.js";
 import "../components/BookingPeriodSelector/index.js";
-import { DeliveryAddressSelector as ue } from "../components/DeliveryAddressSelector/index.js";
-import { ContactSection as de } from "../components/ContactSection/index.js";
-import { TestimonialsSection as fe } from "../components/TestimonialsSection/index.js";
-import { AboutSection as pe } from "../components/AboutSection/index.js";
-import { ItinerariesSection as me } from "../components/Itineraries/ItinerariesSection.js";
+import { DeliveryAddressSelector as de } from "../components/DeliveryAddressSelector/index.js";
+import { ContactSection as fe } from "../components/ContactSection/index.js";
+import { TestimonialsSection as pe } from "../components/TestimonialsSection/index.js";
+import { AboutSection as me } from "../components/AboutSection/index.js";
+import { ItinerariesSection as he } from "../components/Itineraries/ItinerariesSection.js";
 import "../components/Itineraries/index.js";
-import { Card as he } from "../ui/card.js";
-import { ProductWarningNotice as ge } from "../components/ProductWarningNotice/index.js";
-import { ProductPriceBadge as _e } from "../components/ProductPriceBadge/index.js";
-import ve from "../chunks/assets/playground-hero-preview-kf4c9tSc.js";
-import { resolveProductImageContainerStyle as ye } from "../lib/productImageStyles.js";
-import { BikeProductCard as be } from "../components/BikeProductCard/index.js";
-import { StorefrontCancellationPolicyNotice as xe } from "../components/StorefrontCancellationPolicyNotice/index.js";
-import { StorefrontInsuranceNotice as Se } from "../components/StorefrontInsuranceNotice/index.js";
-import { createStorefrontTimeSlotsFetcher as Ce } from "../lib/fetchStorefrontTimeSlots.js";
-import { FulfillmentSection as we } from "../components/FulfillmentSection/index.js";
-import { useEffect as f, useMemo as p, useRef as Te, useState as m } from "react";
+import { Card as ge } from "../ui/card.js";
+import { ProductWarningNotice as _e } from "../components/ProductWarningNotice/index.js";
+import { ProductPriceBadge as ve } from "../components/ProductPriceBadge/index.js";
+import ye from "../chunks/assets/playground-hero-preview-kf4c9tSc.js";
+import { resolveProductImageContainerStyle as be } from "../lib/productImageStyles.js";
+import { BikeProductCard as xe } from "../components/BikeProductCard/index.js";
+import { StorefrontCancellationPolicyNotice as Se } from "../components/StorefrontCancellationPolicyNotice/index.js";
+import { StorefrontInsuranceNotice as Ce } from "../components/StorefrontInsuranceNotice/index.js";
+import { createStorefrontTimeSlotsFetcher as we } from "../lib/fetchStorefrontTimeSlots.js";
+import { FulfillmentSection as Te } from "../components/FulfillmentSection/index.js";
+import { useEffect as f, useMemo as p, useRef as Ee, useState as m } from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Link as v, useLocation as Ee, useNavigate as De, useParams as Oe, useSearchParams as ke } from "@rpcbase/router";
-import { useTranslation as Ae } from "react-i18next";
+import { Link as v, useLocation as De, useNavigate as Oe, useParams as ke, useSearchParams as Ae } from "@rpcbase/router";
+import { useTranslation as je } from "react-i18next";
 import { cn as y } from "@rpcbase/ui";
-import { ArrowRight as b, Bike as je, Clock as Me, MapPin as Ne, ShieldCheck as Pe, Truck as Fe } from "lucide-react";
+import { ArrowRight as b, Bike as Me, Clock as Ne, MapPin as Pe, ShieldCheck as Fe, Truck as Ie } from "lucide-react";
 //#region src/pages/HomePage.tsx
-var x = (e) => String(e).padStart(2, "0"), Ie = "text-2xs font-semibold uppercase tracking-wide text-slate-600", Le = "h-10", S = 6, C = 5, Re = [
+var x = (e) => String(e).padStart(2, "0"), Le = "text-2xs font-semibold uppercase tracking-wide text-slate-600", Re = "h-10", S = 6, C = 5, ze = [
 	15,
 	25,
 	42,
@@ -53,7 +54,7 @@ var x = (e) => String(e).padStart(2, "0"), Ie = "text-2xs font-semibold uppercas
 	"4 / 3",
 	"9 / 16",
 	"6 / 7"
-], ze = ({ buttonRef: e, className: t, label: n, onSubmit: r }) => {
+], Be = ({ buttonRef: e, className: t, label: n, onSubmit: r }) => {
 	let { hasConfirmedTimeSlots: i, startTime: a, endTime: o } = d();
 	return /* @__PURE__ */ _(u, {
 		ref: e,
@@ -71,8 +72,8 @@ var x = (e) => String(e).padStart(2, "0"), Ie = "text-2xs font-semibold uppercas
 	if (!t) return;
 	let n = Number(t[1]), r = Number(t[2]), i = Number(t[3]), a = new Date(n, r - 1, i);
 	if (!(Number.isNaN(a.getTime()) || a.getFullYear() !== n || a.getMonth() !== r - 1 || a.getDate() !== i)) return a;
-}, Be = (e) => {
-	let t = e.length > 0 ? e : [ve];
+}, Ve = (e) => {
+	let t = e.length > 0 ? e : [ye];
 	return Array.from({ length: S }, (e, n) => Array.from({ length: C }, (e, r) => {
 		let i = n * C + r;
 		return {
@@ -82,15 +83,15 @@ var x = (e) => String(e).padStart(2, "0"), Ie = "text-2xs font-semibold uppercas
 	}));
 };
 function D() {
-	let { t: d, i18n: x } = Ae(), { storeSlug: S } = Oe(), C = Ee(), { storefrontConfiguration: w } = te(), D = w.shop.address?.trim() ?? "", O = w.workspace?.workspaceLanguage, { bikes: k, accessories: Ve } = ne(), [A, He] = ke(), Ue = De(), j = p(() => a(A, S), [A, S]), We = p(() => n(w), [w]), M = p(() => i(w), [w]), N = p(() => E(M.start_date), [M.start_date]), Ge = p(() => E(M.end_date) ?? N, [M.end_date, N]), P = w.settings.fulfillmentModes.includes("delivery"), Ke = w.settings.deliveryDisabledReason.trim(), F = p(() => r(j, M), [M, j]), [I, qe] = m(() => F.fulfillment === "delivery" && P ? "delivery" : "pickup"), [L, Je] = m(() => E(j.get("start_date")) ?? N), [R, Ye] = m(() => j.get("start_time") ?? M.start_time), [z, Xe] = m(() => {
+	let { t: d, i18n: x } = je(), { storeSlug: S } = ke(), C = De(), { storefrontConfiguration: w } = te(), D = w.shop.address?.trim() ?? "", O = w.workspace?.workspaceLanguage, { bikes: k, accessories: He } = ne(), [A, Ue] = Ae(), We = Oe(), j = p(() => a(A, S), [A, S]), Ge = p(() => n(w), [w]), M = p(() => i(w), [w]), N = p(() => E(M.start_date), [M.start_date]), Ke = p(() => E(M.end_date) ?? N, [M.end_date, N]), P = w.settings.fulfillmentModes.includes("delivery"), F = w.settings.deliveryDisabledReason.trim(), I = p(() => r(j, M), [M, j]), [L, qe] = m(() => I.fulfillment === "delivery" && P ? "delivery" : "pickup"), [R, Je] = m(() => E(j.get("start_date")) ?? N), [z, Ye] = m(() => j.get("start_time") ?? M.start_time), [B, Xe] = m(() => {
 		let e = E(j.get("start_date")) ?? N;
-		return E(j.get("end_date")) ?? e ?? Ge;
-	}), [B, Ze] = m(() => j.get("end_time") ?? M.end_time), [Qe, $e] = m(void 0), [et, tt] = m(!1), [V, H] = m(() => F.start_address), [U, W] = m(() => F.end_address), G = Te(null), nt = [
-		L ? T(L) : "",
-		R,
-		z ? T(z) : "",
-		B
-	].join(":"), K = Qe === nt, rt = p(() => k.slice(0, 4), [k]), { heroMode: it } = re(), at = it ?? w.content?.heroMode ?? "current_booking_hero", q = at === "vertical_marquee_hero", J = at === "booking_bar_overlay_hero" || q, ot = Ce(S), st = p(() => ({
+		return E(j.get("end_date")) ?? e ?? Ke;
+	}), [V, Ze] = m(() => j.get("end_time") ?? M.end_time), [Qe, $e] = m(void 0), [et, tt] = m(!1), [H, U] = m(() => I.start_address), [W, G] = m(() => I.end_address), K = Ee(null), nt = [
+		R ? T(R) : "",
+		z,
+		B ? T(B) : "",
+		V
+	].join(":"), q = Qe === nt, rt = p(() => k.slice(0, 4), [k]), { heroMode: it } = re(), at = it ?? w.content?.heroMode ?? "current_booking_hero", J = at === "vertical_marquee_hero", Y = at === "booking_bar_overlay_hero" || J, ot = we(S), st = p(() => ({
 		startDate: d("booking_start_date"),
 		pickStartDate: d("booking_start_date"),
 		startTime: d("booking_start_time"),
@@ -98,186 +99,206 @@ function D() {
 		pickEndDate: d("booking_end_date"),
 		endTime: d("booking_end_time"),
 		selectedDaysTooltip: ({ count: e }) => d("booking_selected_days_tooltip", { count: e }),
+		rentalPeriod: d("booking_rental_period"),
+		dateDrawerNext: d("booking_date_drawer_continue"),
+		closeDrawer: d("booking_date_drawer_close"),
 		timeSlotsLoading: d("booking_time_slots_loading"),
 		timeSlotsUnavailable: d("booking_time_slots_unavailable"),
 		timeSlotsLoadError: d("booking_time_slots_load_error"),
 		retryTimeSlots: d("booking_time_slots_retry")
-	}), [x.language, d]), Y = p(() => {
-		let e = L ?? N ?? /* @__PURE__ */ new Date(), n = z ?? e;
+	}), [x.language, d]), X = p(() => {
+		let e = R ?? N ?? /* @__PURE__ */ new Date(), n = B ?? e;
 		return t(new URLSearchParams(), {
-			fulfillment: I === "delivery" && P ? "delivery" : "pickup",
+			fulfillment: L === "delivery" && P ? "delivery" : "pickup",
 			start_date: T(e),
-			start_time: K ? R : "",
+			start_time: q ? z : "",
 			end_date: T(n),
-			end_time: K ? B : "",
-			start_address: V,
-			end_address: U
+			end_time: q ? V : "",
+			start_address: H,
+			end_address: W
 		});
 	}, [
 		N,
 		P,
-		U,
-		z,
+		W,
 		B,
-		I,
-		K,
 		V,
 		L,
-		R
-	]), ct = Y.toString(), lt = ct ? `?${ct}` : "";
+		q,
+		H,
+		R,
+		z
+	]), ct = X.toString(), lt = ct ? `?${ct}` : "";
 	f(() => {
-		o(S, Y);
-	}, [Y, S]), f(() => {
+		o(S, X);
+	}, [X, S]), f(() => {
 		let t = new URLSearchParams(A);
 		for (let n of e) t.delete(n);
-		for (let [e, n] of Y.entries()) t.set(e, n);
-		t.toString() !== A.toString() && He(t, { replace: !0 });
+		for (let [e, n] of X.entries()) t.set(e, n);
+		t.toString() !== A.toString() && Ue(t, { replace: !0 });
 	}, [
-		Y,
+		X,
 		A,
-		He
+		Ue
 	]), f(() => {
-		!et || !K || (tt(!1), G.current?.focus({ preventScroll: !0 }));
-	}, [K, et]);
-	let ut = K && !!(R && B), dt = {
-		startDate: L,
+		!et || !q || (tt(!1), K.current?.focus({ preventScroll: !0 }));
+	}, [q, et]);
+	let ut = q && !!(z && V), dt = {
+		startDate: R,
 		onStartDateChange: Je,
-		startTime: R,
+		startTime: z,
 		onStartTimeChange: Ye,
-		endDate: z,
+		endDate: B,
 		onEndDateChange: Xe,
-		endTime: B,
+		endTime: V,
 		onEndTimeChange: Ze,
 		onEndTimeCommit: () => tt(!0),
-		bookingPeriodConfig: We,
+		bookingPeriodConfig: Ge,
+		withMobileDateDrawer: !0,
 		fetchTimeSlots: ot,
 		onTimeSlotsConfirmationChange: (e) => {
 			$e(e ? nt : void 0);
 		},
 		labels: st,
 		localeCode: x.language
-	}, X = () => {
+	}, Z = () => {
 		if (!ut) return;
 		let e = new URLSearchParams(A);
-		for (let [t, n] of Y.entries()) e.set(t, n);
-		Ue(`/${S ?? ""}/booking?${e.toString()}#booking-products`);
-	}, ft = (e) => `/${S ?? ""}/products/${e}`, Z = { backTo: `${C.pathname}${C.search}${C.hash}` }, pt = /* @__PURE__ */ _("div", { children: [
-		/* @__PURE__ */ _("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ _(l, {
-				variant: "secondary",
-				children: [/* @__PURE__ */ g(Me, {
-					className: "h-3 w-3",
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ g("span", { children: d("status_open") })]
-			}), /* @__PURE__ */ _(l, {
-				variant: "outline",
-				className: y(!D && "border-destructive/40 text-destructive"),
-				children: [/* @__PURE__ */ g(Ne, {
-					className: "h-3 w-3",
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ g("span", { children: D || "[Missing shop address]" })]
-			})]
-		}),
-		/* @__PURE__ */ g("h1", {
-			className: "mt-4 text-3xl font-semibold tracking-tight sm:text-4xl",
-			children: /* @__PURE__ */ g("span", { children: d("hero_title") })
-		}),
-		/* @__PURE__ */ g("p", {
-			className: "mt-3 text-sm text-slate-700 sm:text-base",
-			children: /* @__PURE__ */ g("span", { children: d("hero_description") })
-		}),
-		/* @__PURE__ */ g("div", {
-			className: y("mt-6", !J && "rounded-xl border bg-white/70 p-3"),
-			children: /* @__PURE__ */ _("ul", {
-				className: y("space-y-3", J && "space-y-2"),
-				"data-testid": "storefront-home-trust-features",
-				children: [
-					/* @__PURE__ */ _("li", {
-						className: "flex items-start gap-3",
-						"data-testid": "storefront-secure-payment-notice",
-						children: [/* @__PURE__ */ g(Pe, {
-							className: "mt-0.5 h-5 w-5 text-success",
-							"aria-hidden": "true"
-						}), /* @__PURE__ */ _("div", {
-							className: "flex flex-col gap-0.5",
-							children: [/* @__PURE__ */ g("p", {
-								className: "text-sm font-medium text-slate-950",
-								children: /* @__PURE__ */ g("span", { children: d("feature_secure_payment_title") })
-							}), /* @__PURE__ */ g("p", {
-								className: "text-xs text-slate-600",
-								children: /* @__PURE__ */ g("span", { children: d("feature_secure_payment_description") })
+		for (let [t, n] of X.entries()) e.set(t, n);
+		We(`/${S ?? ""}/booking?${e.toString()}#booking-products`);
+	}, ft = (e) => `/${S ?? ""}/products/${e}`, Q = { backTo: `${C.pathname}${C.search}${C.hash}` }, pt = /* @__PURE__ */ _("div", {
+		className: "min-w-0",
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ _(l, {
+					variant: "secondary",
+					children: [/* @__PURE__ */ g(Ne, {
+						className: "h-3 w-3",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ g("span", { children: d("status_open") })]
+				}), /* @__PURE__ */ _(l, {
+					variant: "outline",
+					className: y("min-w-0 max-w-full", !D && "border-destructive/40 text-destructive"),
+					children: [/* @__PURE__ */ g(Pe, {
+						className: "h-3 w-3",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ g("span", {
+						className: "truncate",
+						children: D || "[Missing shop address]"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ g("h1", {
+				className: "mt-4 text-[1.75rem] font-semibold leading-tight tracking-tight sm:text-4xl",
+				children: /* @__PURE__ */ g("span", { children: d("hero_title") })
+			}),
+			/* @__PURE__ */ g("p", {
+				className: "mt-3 text-sm text-slate-700 sm:text-base",
+				children: /* @__PURE__ */ g("span", { children: d("hero_description") })
+			}),
+			/* @__PURE__ */ g("div", {
+				className: y("mt-6", !Y && "rounded-xl border bg-white/70 p-3"),
+				children: /* @__PURE__ */ _("ul", {
+					className: y("space-y-3", Y && "space-y-2"),
+					"data-testid": "storefront-home-trust-features",
+					children: [
+						/* @__PURE__ */ _("li", {
+							className: "flex items-start gap-3",
+							"data-testid": "storefront-secure-payment-notice",
+							children: [/* @__PURE__ */ g(Fe, {
+								className: "mt-0.5 h-5 w-5 text-success",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ _("div", {
+								className: "flex min-w-0 flex-col gap-0.5",
+								children: [/* @__PURE__ */ g("p", {
+									className: "text-sm font-medium text-slate-950",
+									children: /* @__PURE__ */ g("span", { children: d("feature_secure_payment_title") })
+								}), /* @__PURE__ */ g("p", {
+									className: "text-xs text-slate-600",
+									children: /* @__PURE__ */ g("span", { children: d("feature_secure_payment_description") })
+								})]
 							})]
-						})]
+						}),
+						/* @__PURE__ */ g(Se, {
+							policy: w.bookingEngine.cancellationPolicy,
+							className: y(!Y && "border-t border-slate-200/70 pt-3")
+						}),
+						P ? /* @__PURE__ */ _("li", {
+							className: y("flex items-start gap-3", !Y && "border-t border-slate-200/70 pt-3"),
+							"data-testid": "storefront-delivery-notice",
+							children: [/* @__PURE__ */ g(Ie, {
+								className: "mt-0.5 h-5 w-5 text-slate-900",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ _("div", {
+								className: "flex flex-col gap-0.5",
+								children: [/* @__PURE__ */ g("p", {
+									className: "text-sm font-medium text-slate-950",
+									children: /* @__PURE__ */ g("span", { children: d("feature_delivery_title") })
+								}), /* @__PURE__ */ g("p", {
+									className: "text-xs text-slate-600",
+									children: /* @__PURE__ */ g("span", { children: d("feature_delivery_description") })
+								})]
+							})]
+						}) : null,
+						/* @__PURE__ */ g(Ce, {
+							bikes: k,
+							currency: w.bookingEngine.currency,
+							className: y(!Y && "border-t border-slate-200/70 pt-3")
+						})
+					]
+				})
+			})
+		]
+	}), mt = ({ className: e, showSubmitButton: t = !1, submitButtonClassName: n }) => /* @__PURE__ */ g(ie, {
+		...dt,
+		labelClassName: Le,
+		inputClassName: Re,
+		children: /* @__PURE__ */ _(h, { children: [
+			/* @__PURE__ */ _("div", {
+				className: e,
+				children: [
+					/* @__PURE__ */ g("div", {
+						className: "min-w-0",
+						children: /* @__PURE__ */ g(ae, {})
 					}),
-					/* @__PURE__ */ g(xe, {
-						policy: w.bookingEngine.cancellationPolicy,
-						className: y(!J && "border-t border-slate-200/70 pt-3")
+					/* @__PURE__ */ g("div", {
+						className: "min-w-0",
+						children: /* @__PURE__ */ g(oe, {})
 					}),
-					P ? /* @__PURE__ */ _("li", {
-						className: y("flex items-start gap-3", !J && "border-t border-slate-200/70 pt-3"),
-						"data-testid": "storefront-delivery-notice",
-						children: [/* @__PURE__ */ g(Fe, {
-							className: "mt-0.5 h-5 w-5 text-slate-900",
-							"aria-hidden": "true"
-						}), /* @__PURE__ */ _("div", {
-							className: "flex flex-col gap-0.5",
-							children: [/* @__PURE__ */ g("p", {
-								className: "text-sm font-medium text-slate-950",
-								children: /* @__PURE__ */ g("span", { children: d("feature_delivery_title") })
-							}), /* @__PURE__ */ g("p", {
-								className: "text-xs text-slate-600",
-								children: /* @__PURE__ */ g("span", { children: d("feature_delivery_description") })
-							})]
-						})]
-					}) : null,
-					/* @__PURE__ */ g(Se, {
-						bikes: k,
-						currency: w.bookingEngine.currency,
-						className: y(!J && "border-t border-slate-200/70 pt-3")
-					})
+					/* @__PURE__ */ g("div", {
+						className: "min-w-0",
+						children: /* @__PURE__ */ g(se, {})
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "min-w-0",
+						children: /* @__PURE__ */ g(ce, {})
+					}),
+					t ? /* @__PURE__ */ g(Be, {
+						buttonRef: K,
+						className: n,
+						label: d("booking_submit"),
+						onSubmit: Z
+					}) : null
 				]
+			}),
+			/* @__PURE__ */ g(ue, {}),
+			/* @__PURE__ */ g(le, {
+				className: "mt-2",
+				testId: "booking-home-time-slots-status"
 			})
-		})
-	] }), Q = ({ className: e, showSubmitButton: t = !1, submitButtonClassName: n }) => /* @__PURE__ */ g(ie, {
-		...dt,
-		labelClassName: Ie,
-		inputClassName: Le,
-		children: /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", {
-			className: e,
-			children: [
-				/* @__PURE__ */ g("div", {
-					className: "min-w-0",
-					children: /* @__PURE__ */ g(ae, {})
-				}),
-				/* @__PURE__ */ g(oe, {}),
-				/* @__PURE__ */ g("div", {
-					className: "min-w-0",
-					children: /* @__PURE__ */ g(se, {})
-				}),
-				/* @__PURE__ */ g(ce, {}),
-				t ? /* @__PURE__ */ g(ze, {
-					buttonRef: G,
-					className: n,
-					label: d("booking_submit"),
-					onSubmit: X
-				}) : null
-			]
-		}), /* @__PURE__ */ g(le, {
-			className: "mt-2",
-			testId: "booking-home-time-slots-status"
-		})] })
-	}), mt = (e) => P ? /* @__PURE__ */ g(ue, {
-		open: I === "delivery",
+		] })
+	}), ht = (e) => P ? /* @__PURE__ */ g(de, {
+		open: L === "delivery",
 		className: "sm:min-h-[6.75rem]",
-		inputClassName: `${Le} bg-white`,
-		labelClassName: Ie,
-		startAddress: V,
-		onStartAddressChange: H,
-		returnAddress: U,
-		onReturnAddressChange: W,
+		inputClassName: `${Re} bg-white`,
+		labelClassName: Le,
+		startAddress: H,
+		onStartAddressChange: U,
+		returnAddress: W,
+		onReturnAddressChange: G,
 		testIdPrefix: e
-	}) : null, ht = mt("storefront-home-fulfillment-delivery-address"), gt = mt("storefront-home-compact-fulfillment-delivery-address"), _t = /* @__PURE__ */ _(he, {
+	}) : null, gt = ht("storefront-home-fulfillment-delivery-address"), _t = ht("storefront-home-compact-fulfillment-delivery-address"), vt = /* @__PURE__ */ _(ge, {
 		className: "border-slate-200 bg-white/80 shadow-none",
 		children: [/* @__PURE__ */ _("div", {
 			className: "border-b border-slate-200 px-4 py-4",
@@ -291,30 +312,26 @@ function D() {
 		}), /* @__PURE__ */ _("div", {
 			className: "grid gap-4 px-4 py-4",
 			children: [
-				/* @__PURE__ */ g(we, {
-					value: I,
+				/* @__PURE__ */ g(Te, {
+					value: L,
 					onValueChange: qe,
 					pickupAddress: D,
 					deliveryEnabled: P,
-					deliveryDisabledReason: Ke,
-					startAddress: V,
-					onStartAddressChange: H,
-					endAddress: U,
-					onEndAddressChange: W,
+					deliveryDisabledReason: F,
+					startAddress: H,
+					onStartAddressChange: U,
+					endAddress: W,
+					onEndAddressChange: G,
 					showDeliveryAddressSelector: !1,
 					testIdPrefix: "storefront-home-fulfillment"
 				}),
-				Q({ className: "grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-[minmax(0,1fr)_150px_minmax(0,1fr)_150px] xl:items-start" }),
-				ht,
-				/* @__PURE__ */ g("p", {
-					className: "text-xs text-slate-600",
-					children: /* @__PURE__ */ g("span", { children: d("booking_minimum_duration", { hours: 4 }) })
-				}),
+				mt({ className: "grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-[minmax(0,1fr)_150px_minmax(0,1fr)_150px] xl:items-start" }),
+				gt,
 				/* @__PURE__ */ _(u, {
-					ref: G,
-					className: "h-11 w-fit justify-self-start rounded-xl text-sm font-semibold gap-2",
+					ref: K,
+					className: "h-11 w-full justify-self-start gap-2 rounded-xl text-sm font-semibold sm:w-fit",
 					disabled: !ut,
-					onClick: X,
+					onClick: Z,
 					children: [/* @__PURE__ */ g("span", { children: d("booking_submit") }), /* @__PURE__ */ g(b, {
 						className: "h-4 w-4",
 						"aria-hidden": "true"
@@ -322,33 +339,33 @@ function D() {
 				})
 			]
 		})]
-	}), vt = /* @__PURE__ */ g(he, {
+	}), yt = /* @__PURE__ */ g(ge, {
 		className: "border-slate-200 bg-white/95 shadow-xl",
 		children: /* @__PURE__ */ _("div", {
 			className: "grid gap-3 p-4",
 			children: [
-				/* @__PURE__ */ g("div", { children: /* @__PURE__ */ g(we, {
-					value: I,
+				/* @__PURE__ */ g("div", { children: /* @__PURE__ */ g(Te, {
+					value: L,
 					onValueChange: qe,
 					pickupAddress: D,
 					deliveryEnabled: P,
-					deliveryDisabledReason: Ke,
-					startAddress: V,
-					onStartAddressChange: H,
-					endAddress: U,
-					onEndAddressChange: W,
+					deliveryDisabledReason: F,
+					startAddress: H,
+					onStartAddressChange: U,
+					endAddress: W,
+					onEndAddressChange: G,
 					showDeliveryAddressSelector: !1,
 					testIdPrefix: "storefront-home-compact-fulfillment"
 				}) }),
-				Q({
+				mt({
 					className: "grid gap-3 md:grid-cols-2 xl:grid-cols-[minmax(0,1fr)_150px_minmax(0,1fr)_150px_auto] xl:items-end",
 					showSubmitButton: !0,
-					submitButtonClassName: "h-10 rounded-xl text-sm font-semibold xl:self-end"
+					submitButtonClassName: "h-10 w-full rounded-xl text-sm font-semibold md:w-fit xl:self-end"
 				}),
-				gt
+				_t
 			]
 		})
-	}), $ = (w.content?.galleryImageIds ?? []).map((e) => e.trim()).filter((e) => e.length > 0), yt = $.map((e) => c(e, S ?? w.storeSlug, 320)).filter((e) => e.length > 0), bt = [...k, ...Ve].flatMap((e) => Array.isArray(e.images) ? e.images : []).filter((e) => typeof e == "string" && e.trim().length > 0).map((e) => e.trim()).slice(0, 12), xt = Be(yt.length > 0 ? yt : bt), St = $[0] ? c($[0], S ?? w.storeSlug, 1600) : ve, Ct = q ? /* @__PURE__ */ g("style", { children: "\n      @keyframes storefront-hero-marquee-up {\n        0% { transform: translateY(0); }\n        100% { transform: translateY(calc(-50% - (var(--storefront-hero-marquee-gap) / 2))); }\n      }\n      @keyframes storefront-hero-marquee-down {\n        0% { transform: translateY(calc(-50% - (var(--storefront-hero-marquee-gap) / 2))); }\n        100% { transform: translateY(0); }\n      }\n      .storefront-hero-marquee-track {\n        animation: storefront-hero-marquee-up var(--storefront-hero-marquee-duration, 32s) linear infinite;\n        will-change: transform;\n      }\n      .storefront-hero-marquee-track-reverse {\n        animation-name: storefront-hero-marquee-down;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .storefront-hero-marquee-track,\n        .storefront-hero-marquee-track-reverse {\n          animation: none !important;\n          transform: none !important;\n        }\n      }\n    " }) : null, wt = (e) => /* @__PURE__ */ g("div", {
+	}), $ = (w.content?.galleryImageIds ?? []).map((e) => e.trim()).filter((e) => e.length > 0), bt = $.map((e) => c(e, S ?? w.storeSlug, 320)).filter((e) => e.length > 0), xt = [...k, ...He].flatMap((e) => Array.isArray(e.images) ? e.images : []).filter((e) => typeof e == "string" && e.trim().length > 0).map((e) => e.trim()).slice(0, 12), St = Ve(bt.length > 0 ? bt : xt), Ct = $[0] ? c($[0], S ?? w.storeSlug, 1600) : ye, wt = J ? /* @__PURE__ */ g("style", { children: "\n      @keyframes storefront-hero-marquee-up {\n        0% { transform: translateY(0); }\n        100% { transform: translateY(calc(-50% - (var(--storefront-hero-marquee-gap) / 2))); }\n      }\n      @keyframes storefront-hero-marquee-down {\n        0% { transform: translateY(calc(-50% - (var(--storefront-hero-marquee-gap) / 2))); }\n        100% { transform: translateY(0); }\n      }\n      .storefront-hero-marquee-track {\n        animation: storefront-hero-marquee-up var(--storefront-hero-marquee-duration, 32s) linear infinite;\n        will-change: transform;\n      }\n      .storefront-hero-marquee-track-reverse {\n        animation-name: storefront-hero-marquee-down;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .storefront-hero-marquee-track,\n        .storefront-hero-marquee-track-reverse {\n          animation: none !important;\n          transform: none !important;\n        }\n      }\n    " }) : null, Tt = (e) => /* @__PURE__ */ g("div", {
 		className: y("relative h-full min-h-[340px] overflow-hidden", e),
 		style: {
 			WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%)",
@@ -361,8 +378,8 @@ function D() {
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ g("div", {
 			className: "absolute inset-0 grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6",
-			children: xt.map((e, t) => {
-				let n = Re[t % Re.length] ?? 32, r = [...e, ...e];
+			children: St.map((e, t) => {
+				let n = ze[t % ze.length] ?? 32, r = [...e, ...e];
 				return /* @__PURE__ */ g("div", {
 					className: y("relative min-h-0 overflow-hidden", t === 2 && "hidden md:block", t >= 3 && "hidden lg:block"),
 					children: /* @__PURE__ */ g("div", {
@@ -389,26 +406,26 @@ function D() {
 				}, `hero-marquee-column-${t}`);
 			})
 		})
-	}), Tt = q ? /* @__PURE__ */ g("div", {
+	}), Et = J ? /* @__PURE__ */ g("div", {
 		className: "pointer-events-none absolute inset-0 hidden lg:block",
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ _("div", {
 			className: "mx-auto grid h-full max-w-7xl grid-cols-12 gap-8 px-4 sm:px-6",
 			children: [/* @__PURE__ */ g("div", { className: "lg:col-span-5" }), /* @__PURE__ */ g("div", {
 				className: "lg:col-span-7",
-				children: wt()
+				children: Tt()
 			})]
 		})
-	}) : null, Et = q ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
+	}) : null, Dt = J ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
 		className: "lg:hidden",
-		children: wt()
+		children: Tt()
 	}), /* @__PURE__ */ g("div", {
 		className: "hidden min-h-[510px] lg:block",
 		"aria-hidden": "true"
 	})] }) : /* @__PURE__ */ _("div", {
 		className: "relative min-h-[340px] overflow-hidden rounded-3xl border border-slate-200 bg-slate-900 shadow-sm lg:min-h-[510px]",
 		children: [/* @__PURE__ */ g("img", {
-			src: St,
+			src: Ct,
 			alt: "",
 			className: "absolute inset-0 h-full w-full object-cover",
 			"aria-hidden": "true"
@@ -430,36 +447,36 @@ function D() {
 					style: { backgroundImage: "radial-gradient(circle at 20% 20%, rgba(15, 23, 42, 0.9) 0px, transparent 55%), radial-gradient(circle at 80% 35%, rgba(14, 116, 144, 0.9) 0px, transparent 55%), radial-gradient(circle at 55% 85%, rgba(99, 102, 241, 0.9) 0px, transparent 55%)" },
 					"aria-hidden": "true"
 				}),
-				Ct,
-				Tt,
-				J ? /* @__PURE__ */ _("div", {
+				wt,
+				Et,
+				Y ? /* @__PURE__ */ _("div", {
 					className: "relative mx-auto grid max-w-7xl gap-x-8 px-4 py-10 sm:px-6 lg:grid-cols-12 lg:py-14",
 					children: [
 						/* @__PURE__ */ g("div", {
-							className: "lg:col-span-5 lg:col-start-1 lg:row-start-1",
+							className: "min-w-0 lg:col-span-5 lg:col-start-1 lg:row-start-1",
 							children: pt
 						}),
 						/* @__PURE__ */ g("div", {
-							className: y("mt-8 lg:col-span-7 lg:col-start-6 lg:row-span-2 lg:row-start-1 lg:mt-0", !q && "lg:pt-4"),
-							children: Et
+							className: y("mt-8 min-w-0 lg:col-span-7 lg:col-start-6 lg:row-span-2 lg:row-start-1 lg:mt-0", !J && "lg:pt-4"),
+							children: Dt
 						}),
 						/* @__PURE__ */ g("div", {
 							className: "relative z-20 mt-4 lg:col-span-5 lg:col-start-1 lg:row-start-2 lg:mt-7",
 							"data-testid": "storefront-home-booking-bar",
 							children: /* @__PURE__ */ g("div", {
 								className: "lg:w-[calc(100%+24rem)] lg:max-w-none",
-								children: vt
+								children: yt
 							})
 						})
 					]
 				}) : /* @__PURE__ */ _("div", {
 					className: "relative mx-auto grid max-w-7xl gap-8 px-4 py-10 sm:px-6 lg:grid-cols-12 lg:items-center lg:py-14",
 					children: [/* @__PURE__ */ g("div", {
-						className: "lg:col-span-5",
+						className: "min-w-0 lg:col-span-5",
 						children: pt
 					}), /* @__PURE__ */ g("div", {
-						className: "lg:col-span-7",
-						children: _t
+						className: "min-w-0 lg:col-span-7",
+						children: vt
 					})]
 				})
 			]
@@ -489,13 +506,13 @@ function D() {
 			}), /* @__PURE__ */ g("div", {
 				className: "mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
 				children: rt.map((e) => {
-					let t = e.id, n = e.slug, r = s(e.name, x.language, O), i = s(e.description, x.language, O), a = typeof e.images?.[0] == "string" ? e.images[0].trim() : "", o = ye(e.primaryImageStyle), c = ee(e.availabilityStatus), u = ft(n);
+					let t = e.id, n = e.slug, r = s(e.name, x.language, O), i = s(e.description, x.language, O), a = typeof e.images?.[0] == "string" ? e.images[0].trim() : "", o = be(e.primaryImageStyle), c = ee(e.availabilityStatus), u = ft(n);
 					return /* @__PURE__ */ _("div", {
-						className: "group flex h-full flex-col gap-2 rounded-xl border border-slate-200 bg-white p-3 text-left shadow-sm transition hover:border-slate-400",
+						className: "group flex h-full min-w-0 flex-col gap-2 rounded-xl border border-slate-200 bg-white p-3 text-left shadow-sm transition hover:border-slate-400",
 						children: [
 							/* @__PURE__ */ g(v, {
 								to: u,
-								state: Z,
+								state: Q,
 								className: "block",
 								children: /* @__PURE__ */ g("span", {
 									className: y("relative block aspect-[1618/1000] overflow-hidden rounded-xl", o.className),
@@ -507,7 +524,7 @@ function D() {
 										loading: "lazy"
 									}) : /* @__PURE__ */ g("span", {
 										className: "absolute inset-0 flex items-center justify-center text-slate-400",
-										children: /* @__PURE__ */ g(je, {
+										children: /* @__PURE__ */ g(Me, {
 											className: "h-8 w-8",
 											"aria-hidden": "true"
 										})
@@ -519,11 +536,11 @@ function D() {
 								children: [
 									/* @__PURE__ */ g(v, {
 										to: u,
-										state: Z,
+										state: Q,
 										className: "text-sm font-semibold text-slate-950 hover:text-slate-700",
 										children: /* @__PURE__ */ g("span", { children: r })
 									}),
-									/* @__PURE__ */ g(_e, {
+									/* @__PURE__ */ g(ve, {
 										prices: e.prices,
 										className: "self-start"
 									}),
@@ -546,7 +563,7 @@ function D() {
 									}),
 									/* @__PURE__ */ g(v, {
 										to: u,
-										state: Z,
+										state: Q,
 										className: "text-xs font-medium text-slate-700 hover:text-slate-950",
 										children: /* @__PURE__ */ g("span", { children: d("product_details_link") })
 									})
@@ -576,12 +593,12 @@ function D() {
 					})
 				}), /* @__PURE__ */ g("div", {
 					className: "mt-6 grid gap-4 md:grid-cols-2",
-					children: k.map((e) => /* @__PURE__ */ g(be, {
+					children: k.map((e) => /* @__PURE__ */ g(xe, {
 						bike: e,
 						detailsPath: ft(e.slug),
-						productDetailsLinkState: Z,
+						productDetailsLinkState: Q,
 						fallbackLanguage: O,
-						onAction: X
+						onAction: Z
 					}, e.id))
 				})]
 			})
@@ -602,10 +619,10 @@ function D() {
 				})
 			}), /* @__PURE__ */ g("div", {
 				className: "mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
-				children: Ve.slice(0, 4).map((e) => {
-					let t = s(e.name, x.language, O), n = s(e.description, x.language, O), r = s(e.warning, x.language, O), i = typeof e.images?.[0] == "string" ? e.images[0].trim() : "", a = ye(e.primaryImageStyle);
+				children: He.slice(0, 4).map((e) => {
+					let t = s(e.name, x.language, O), n = s(e.description, x.language, O), r = s(e.warning, x.language, O), i = typeof e.images?.[0] == "string" ? e.images[0].trim() : "", a = be(e.primaryImageStyle);
 					return /* @__PURE__ */ _("div", {
-						className: "flex h-full flex-col gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm",
+						className: "flex h-full min-w-0 flex-col gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm",
 						children: [
 							/* @__PURE__ */ g("div", {
 								className: y("relative aspect-[1618/1000] overflow-hidden rounded-xl", a.className),
@@ -617,7 +634,7 @@ function D() {
 									loading: "lazy"
 								}) : /* @__PURE__ */ g("div", {
 									className: "absolute inset-0 flex items-center justify-center text-slate-400",
-									children: /* @__PURE__ */ g(je, {
+									children: /* @__PURE__ */ g(Me, {
 										className: "h-8 w-8",
 										"aria-hidden": "true"
 									})
@@ -634,7 +651,7 @@ function D() {
 										className: "line-clamp-2 text-xs text-slate-600",
 										children: /* @__PURE__ */ g("span", { children: n })
 									}),
-									/* @__PURE__ */ g(ge, {
+									/* @__PURE__ */ g(_e, {
 										warning: r,
 										className: "mt-1"
 									})
@@ -642,7 +659,7 @@ function D() {
 							}),
 							/* @__PURE__ */ g("div", {
 								className: "flex items-center justify-between gap-2",
-								children: /* @__PURE__ */ g(_e, {
+								children: /* @__PURE__ */ g(ve, {
 									prices: e.prices,
 									openOnHover: !1
 								})
@@ -652,10 +669,10 @@ function D() {
 				})
 			})]
 		}),
-		/* @__PURE__ */ g(pe, {}),
 		/* @__PURE__ */ g(me, {}),
-		/* @__PURE__ */ g(fe, {}),
-		/* @__PURE__ */ g(de, { storeSlug: S ?? "" })
+		/* @__PURE__ */ g(he, {}),
+		/* @__PURE__ */ g(pe, {}),
+		/* @__PURE__ */ g(fe, { storeSlug: S ?? "" })
 	] });
 }
 //#endregion