@loczer/storefront-sdk 0.196.0 → 0.198.0

package/dist/pages/BookingPage.js

@@ -1,211 +1,146 @@
 import { applyBookingParamsToSearch as e, createBookingPeriodConfigFromStorefrontConfiguration as t, getBookingParamsFromSearch as n, getDefaultBookingParamsForStorefrontConfiguration as r, resolveBookingSearchParamsFromSessionStorage as i, writeBookingSearchParamsToSessionStorage as a } from "../lib/booking.js";
-import { getProductVariantAttributeValue as o, getStorefrontProductVariantDisplay as s } from "../lib/productVariants.js";
-import { getStorefrontCheckoutProductId as c } from "../lib/products.js";
-import { useStorefrontCart as l } from "../lib/cart.js";
-import { getLocalizedValue as u } from "../localization.js";
-import { buildStorefrontCartSummary as d } from "../lib/cartSummary.js";
-import { ROUTE as f, buildStorefrontAvailabilityKey as p, getStorefrontAvailabilityIssue as ee, getStorefrontAvailabilityStatus as m, getValidStorefrontAvailabilitySchedule as h, isStorefrontAvailabilityInsufficient as te, responseSchema as ne } from "../lib/storefrontAvailability.js";
-import { Badge as re } from "../ui/badge.js";
-import { Button as g } from "../ui/button.js";
-import { BookingPeriodSelector as ie } from "../components/BookingPeriodSelector/index.js";
-import { BookingFlowSteps as ae } from "../components/BookingFlowSteps/index.js";
-import { useStorefront as oe, useStorefrontBookingProducts as se, useStorefrontProducts as ce } from "../StorefrontProvider.js";
-import { StepSectionTitle as _ } from "../components/StepSectionTitle/index.js";
-import { Card as le } from "../ui/card.js";
-import { ProductWarningNotice as ue } from "../components/ProductWarningNotice/index.js";
-import { StorefrontCartPanel as de } from "../components/StorefrontCartPanel/index.js";
-import { ProductPriceBadge as fe } from "../components/ProductPriceBadge/index.js";
-import { resolveProductImageContainerStyle as pe } from "../lib/productImageStyles.js";
-import { BikeProductCard as me } from "../components/BikeProductCard/index.js";
-import { apiPost as he } from "../lib/apiCall.js";
-import { createStorefrontTimeSlotsFetcher as ge } from "../lib/fetchStorefrontTimeSlots.js";
-import { RadioGroup as v, RadioGroupItem as y } from "../ui/radio-group.js";
-import { FulfillmentSection as _e } from "../components/FulfillmentSection/index.js";
-import { BookingBikeVariantDialog as ve } from "../components/BookingBikeVariantDialog/index.js";
-import { useEffect as b, useMemo as x, useState as S } from "react";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import { Link as T, useLocation as ye, useParams as be, useSearchParams as xe } from "@rpcbase/router";
-import { useTranslation as Se } from "react-i18next";
-import { cn as E } from "@rpcbase/ui";
-import { ArrowLeft as Ce, ArrowRight as we, Bike as Te, ShoppingCart as Ee } from "lucide-react";
+import { getStorefrontCheckoutProductId as o } from "../lib/products.js";
+import { useStorefrontCart as ee } from "../lib/cart.js";
+import { getLocalizedValue as te } from "../localization.js";
+import { buildStorefrontCartSummary as ne } from "../lib/cartSummary.js";
+import { ROUTE as s, buildStorefrontAvailabilityKey as c, getStorefrontAvailabilityIssue as re, getStorefrontAvailabilityStatus as l, getValidStorefrontAvailabilitySchedule as u, isStorefrontAvailabilityInsufficient as ie, responseSchema as ae } from "../lib/storefrontAvailability.js";
+import { Badge as oe } from "../ui/badge.js";
+import { Button as se } from "../ui/button.js";
+import { BookingPeriodSelector as ce } from "../components/BookingPeriodSelector/index.js";
+import { BookingFlowSteps as le } from "../components/BookingFlowSteps/index.js";
+import { useStorefront as ue, useStorefrontBookingProducts as de, useStorefrontProducts as fe } from "../StorefrontProvider.js";
+import { StepSectionTitle as d } from "../components/StepSectionTitle/index.js";
+import { Card as pe } from "../ui/card.js";
+import { ProductWarningNotice as me } from "../components/ProductWarningNotice/index.js";
+import { StorefrontCartPanel as he } from "../components/StorefrontCartPanel/index.js";
+import { ProductPriceBadge as ge } from "../components/ProductPriceBadge/index.js";
+import { resolveProductImageContainerStyle as _e } from "../lib/productImageStyles.js";
+import { apiPost as ve } from "../lib/apiCall.js";
+import { createStorefrontTimeSlotsFetcher as ye } from "../lib/fetchStorefrontTimeSlots.js";
+import { FulfillmentSection as be } from "../components/FulfillmentSection/index.js";
+import { BookingBikeQuickAddCard as xe } from "../components/BookingBikeQuickAddCard/index.js";
+import { BookingBikeVariantDialog as Se } from "../components/BookingBikeVariantDialog/index.js";
+import { useEffect as f, useLayoutEffect as Ce, useMemo as p, useRef as we, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Link as _, useLocation as Te, useParams as Ee, useSearchParams as De } from "@rpcbase/router";
+import { useTranslation as Oe } from "react-i18next";
+import { cn as ke } from "@rpcbase/ui";
+import { ArrowLeft as Ae, ArrowRight as je, Bike as Me, ShoppingCart as Ne } from "lucide-react";
 //#region src/pages/BookingPage.tsx
-var D = (e) => String(e).padStart(2, "0"), O = "product_modal", De = (e) => `${e.getFullYear()}-${D(e.getMonth() + 1)}-${D(e.getDate())}`, Oe = (e) => {
+var v = (e) => String(e).padStart(2, "0"), y = "product_modal", Pe = (e, t) => {
+	let n = t - e;
+	return e >= 0 && (n === 1 || n === 2) ? n : null;
+}, Fe = (e) => `${e.getFullYear()}-${v(e.getMonth() + 1)}-${v(e.getDate())}`, b = (e) => {
 	if (!e) return;
 	let t = e.match(/^(\d{4})-(\d{2})-(\d{2})$/);
 	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;
-}, ke = (e, t) => e.fulfillment === t.fulfillment && e.start_date === t.start_date && e.start_time === t.start_time && e.end_date === t.end_date && e.end_time === t.end_time && e.start_address === t.start_address && e.end_address === t.end_address, k = (e, t = () => !0) => {
+}, Ie = (e, t) => e.fulfillment === t.fulfillment && e.start_date === t.start_date && e.start_time === t.start_time && e.end_date === t.end_date && e.end_time === t.end_time && e.start_address === t.start_address && e.end_address === t.end_address, x = (e, t = () => !0) => {
 	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;
-}, Ae = (e, t) => e.fulfillment === "delivery" && !t ? {
+}, Le = (e, t) => e.fulfillment === "delivery" && !t ? {
 	...e,
 	fulfillment: "pickup"
-} : e, je = (e, t) => {
-	let n = c(e), r = e.representedVariantId?.trim();
+} : e, Re = (e, t) => {
+	let n = o(e), r = e.representedVariantId?.trim();
 	if (r) {
-		let e = t.get(p(n, r));
+		let e = t.get(c(n, r));
 		if (e) return e;
 	}
-	return t.get(p(n));
-}, Me = (e, t, n) => n.get(p(c(e), t)), Ne = (e, t, n) => {
-	let r = ee(t);
+	return t.get(c(n));
+}, ze = (e, t, n) => n.get(c(o(e), t)), Be = (e, t, n) => {
+	let r = re(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 });
-}, Pe = (e) => {
+}, Ve = (e) => {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
-		let e = c(n);
-		t.set(p(e), { productId: e });
-		for (let r of n.productVariants ?? []) t.set(p(e, r.id), {
+		let e = o(n);
+		t.set(c(e), { productId: e });
+		for (let r of n.productVariants ?? []) t.set(c(e, r.id), {
 			productId: e,
 			productVariantId: r.id
 		});
 		let r = n.representedVariantId?.trim();
-		r && t.set(p(e, r), {
+		r && t.set(c(e, r), {
 			productId: e,
 			productVariantId: r
 		});
 	}
 	return Array.from(t.values());
 };
-function Fe({ product: e, selectedVariantId: t, onSelect: n, onConfirm: r, onCancel: i, getVariantAvailabilityLabel: a, isVariantOutOfCapacity: c, confirmDisabled: l = !1 }) {
-	let { t: u } = Se(), d = e.productVariants ?? [];
-	return /* @__PURE__ */ w("div", {
-		className: "grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3",
-		children: [
-			/* @__PURE__ */ C("p", {
-				className: "text-xs font-medium text-slate-700",
-				children: /* @__PURE__ */ C("span", { children: d.some((e) => !!o(e, "size")) ? u("product_size_label") : u("product_variant_label") })
-			}),
-			/* @__PURE__ */ C(v, {
-				value: t,
-				onValueChange: n,
-				className: "grid gap-2",
-				children: d.map((n) => {
-					let r = `booking-variant-${e.id}-${n.id}`.toLowerCase(), i = `storefront-booking-variant-option-${e.id}-${n.id}`.toLowerCase(), { label: o, description: l } = s(n), u = c(n.id), d = a(n.id);
-					return /* @__PURE__ */ w("label", {
-						htmlFor: r,
-						"data-testid": i,
-						className: E("flex items-start gap-3 rounded-xl border p-3 transition", t === n.id ? "border-slate-900 bg-white" : "border-slate-200 bg-white"),
-						children: [/* @__PURE__ */ C(y, {
-							id: r,
-							value: n.id,
-							className: "mt-1"
-						}), /* @__PURE__ */ w("span", {
-							className: "flex flex-1 flex-col gap-0.5",
-							children: [
-								/* @__PURE__ */ C("span", {
-									className: "text-sm font-medium text-slate-950",
-									children: o
-								}),
-								l ? /* @__PURE__ */ C("span", {
-									className: "text-xs text-slate-600",
-									children: l
-								}) : null,
-								d ? /* @__PURE__ */ C("span", {
-									className: "pt-1",
-									children: /* @__PURE__ */ C(re, {
-										variant: u ? "destructive" : "outline",
-										children: /* @__PURE__ */ C("span", { children: d })
-									})
-								}) : null
-							]
-						})]
-					}, n.id);
-				})
-			}),
-			/* @__PURE__ */ w("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [/* @__PURE__ */ w(g, {
-					type: "button",
-					size: "sm",
-					className: "rounded-full gap-2",
-					disabled: l,
-					onClick: r,
-					children: [/* @__PURE__ */ C("span", { children: u("add_to_cart") }), /* @__PURE__ */ C(we, {
-						className: "h-4 w-4",
-						"aria-hidden": "true"
-					})]
-				}), /* @__PURE__ */ C(g, {
-					type: "button",
-					size: "sm",
-					variant: "outline",
-					className: "rounded-full",
-					onClick: i,
-					children: /* @__PURE__ */ C("span", { children: u("booking_select_variant_cancel") })
-				})]
-			})
-		]
-	});
-}
-function A() {
-	let { t: o, i18n: s } = Se(), { storeSlug: v } = be(), y = ye(), { storefrontConfiguration: D } = oe(), A = D.workspace?.workspaceLanguage, { bikes: Ie, accessories: Le } = ce(), { bikes: j, accessories: M } = se(), [N, P] = xe(), { items: Re, itemCount: F, addItem: ze, clear: Be, removeItem: Ve, setQuantity: He } = l(), Ue = x(() => t(D), [D]), I = x(() => r(D), [D]), L = D.settings.fulfillmentModes.includes("delivery"), We = D.settings.deliveryDisabledReason.trim(), Ge = D.shop.address?.trim() ?? "", R = x(() => i(N, v), [N, v]), [z, Ke] = S(() => Ae(n(R, I), L)), [qe, Je] = S(void 0), Ye = [
-		z.start_date,
-		z.start_time,
-		z.end_date,
-		z.end_time
-	].join(":"), B = qe === Ye, V = B ? z.start_time : "", H = B ? z.end_time : "", Xe = !B && N.get("start_date") === z.start_date && N.get("start_time") === z.start_time && N.get("end_date") === z.end_date && N.get("end_time") === z.end_time;
-	b(() => {
-		Ke((e) => {
+function S() {
+	let { t: v, i18n: S } = Oe(), { storeSlug: C } = Ee(), w = Te(), He = we(null), { storefrontConfiguration: T } = ue(), E = T.workspace?.workspaceLanguage, { bikes: Ue, accessories: We } = fe(), { bikes: D, accessories: O } = de(), [k, A] = De(), { items: Ge, itemCount: j, addItem: Ke, clear: qe, removeItem: Je, setQuantity: Ye } = ee();
+	Ce(() => {
+		w.hash === "#booking-products" && He.current?.scrollIntoView({ block: "start" });
+	}, [w.hash]);
+	let Xe = p(() => t(T), [T]), M = p(() => r(T), [T]), N = T.settings.fulfillmentModes.includes("delivery"), Ze = T.settings.deliveryDisabledReason.trim(), Qe = T.shop.address?.trim() ?? "", P = p(() => i(k, C), [k, C]), [F, $e] = m(() => Le(n(P, M), N)), [et, tt] = m(void 0), nt = [
+		F.start_date,
+		F.start_time,
+		F.end_date,
+		F.end_time
+	].join(":"), I = et === nt, L = I ? F.start_time : "", R = I ? F.end_time : "", rt = !I && k.get("start_date") === F.start_date && k.get("start_time") === F.start_time && k.get("end_date") === F.end_date && k.get("end_time") === F.end_time;
+	f(() => {
+		$e((e) => {
 			let t = {
-				...I,
+				...M,
 				...e
-			}, r = Ae(n(R, t), L);
-			return ke(e, r) ? e : r;
+			}, r = Le(n(P, t), N);
+			return Ie(e, r) ? e : r;
 		});
 	}, [
-		R,
-		I,
-		L
-	]), b(() => {
-		if (Xe) return;
-		let t = e(N, {
-			...z,
-			start_time: V,
-			end_time: H
+		P,
+		M,
+		N
+	]), f(() => {
+		if (rt) return;
+		let t = e(k, {
+			...F,
+			start_time: L,
+			end_time: R
 		});
-		t.toString() !== N.toString() && P(t, { replace: !0 });
+		t.toString() !== k.toString() && A(t, { replace: !0 });
 	}, [
-		z,
-		Xe,
-		H,
-		V,
-		N,
-		P
-	]), b(() => {
-		a(v, {
-			...z,
-			start_time: V,
-			end_time: H
+		F,
+		rt,
+		R,
+		L,
+		k,
+		A
+	]), f(() => {
+		a(C, {
+			...F,
+			start_time: L,
+			end_time: R
 		});
 	}, [
-		z,
-		H,
-		V,
-		v
+		F,
+		R,
+		L,
+		C
 	]);
-	let U = x(() => Pe([...j, ...M]), [M, j]), [Ze, W] = S([]);
-	b(() => {
-		if (!v || U.length === 0) {
-			W([]);
+	let z = p(() => Ve([...D, ...O]), [O, D]), [it, B] = m([]);
+	f(() => {
+		if (!C || z.length === 0) {
+			B([]);
 			return;
 		}
-		let e = B ? h(z) : null;
+		let e = I ? u(F) : null;
 		if (!e) {
-			W([]);
+			B([]);
 			return;
 		}
 		let t = !1;
 		return (async () => {
 			try {
-				let n = await he(f, {
-					storeSlug: v,
+				let n = await ve(s, {
+					storeSlug: C,
 					schedule: e,
-					products: U
-				}), r = ne.parse(n);
+					products: z
+				}), r = ae.parse(n);
 				if (t) return;
-				W(r.success ? r.availability ?? [] : []);
+				B(r.success ? r.availability ?? [] : []);
 			} catch (e) {
 				if (t) return;
 				console.error("Failed to load storefront availability", e);
@@ -214,105 +149,111 @@ function A() {
 			t = !0;
 		};
 	}, [
-		U,
-		z.end_date,
-		z.end_time,
-		z.start_date,
-		z.start_time,
-		B,
-		v
+		z,
+		F.end_date,
+		F.end_time,
+		F.start_date,
+		F.start_time,
+		I,
+		C
 	]);
-	let G = x(() => new Map(Ze.map((e) => [p(e.productId, e.productVariantId), e])), [Ze]), Qe = x(() => j.map((e) => {
-		let t = je(e, G);
+	let V = p(() => new Map(it.map((e) => [c(e.productId, e.productVariantId), e])), [it]), H = p(() => D.map((e) => {
+		let t = Re(e, V);
 		return {
 			...e,
-			availabilityStatus: t ? m(t) : e.availabilityStatus ?? "AVAILABLE"
+			availabilityStatus: t ? l(t) : e.availabilityStatus ?? "AVAILABLE"
 		};
-	}), [G, j]), $e = (e, t) => {
-		let n = Me(e, t, G);
-		return n ? te(n) : e.availabilityStatus === "OUT_OF_STOCK";
-	}, et = (e) => (e.productVariants ?? []).length > 0, tt = (e, t) => {
-		let n = Me(e, t, G);
-		return n ? Ne(o, n, m(n)) : e.availabilityStatus === "OUT_OF_STOCK" ? o("availability_out_of_stock") : null;
-	}, nt = ge(v), rt = x(() => ({
-		startDate: o("booking_start_date"),
-		pickStartDate: o("booking_start_date"),
-		startTime: o("booking_start_time"),
-		endDate: o("booking_end_date"),
-		pickEndDate: o("booking_end_date"),
-		endTime: o("booking_end_time"),
-		selectedDaysTooltip: ({ count: e }) => o("booking_selected_days_tooltip", { count: e }),
-		timeSlotsLoading: o("booking_time_slots_loading"),
-		timeSlotsUnavailable: o("booking_time_slots_unavailable"),
-		timeSlotsLoadError: o("booking_time_slots_load_error"),
-		retryTimeSlots: o("booking_time_slots_retry")
-	}), [s.language, o]), K = (e) => {
-		Ke((t) => {
+	}), [V, D]), at = p(() => O.map((e) => {
+		let t = Re(e, V);
+		return {
+			...e,
+			availabilityStatus: t ? l(t) : "AVAILABLE"
+		};
+	}), [O, V]), ot = (e, t) => {
+		let n = ze(e, t, V);
+		return n ? ie(n) : e.availabilityStatus === "OUT_OF_STOCK";
+	}, st = (e) => (e.productVariants ?? []).length > 0, ct = (e, t) => {
+		let n = ze(e, t, V);
+		return n ? Be(v, n, l(n)) : e.availabilityStatus === "OUT_OF_STOCK" ? v("availability_out_of_stock") : null;
+	}, lt = ye(C), ut = p(() => ({
+		startDate: v("booking_start_date"),
+		pickStartDate: v("booking_start_date"),
+		startTime: v("booking_start_time"),
+		endDate: v("booking_end_date"),
+		pickEndDate: v("booking_end_date"),
+		endTime: v("booking_end_time"),
+		selectedDaysTooltip: ({ count: e }) => v("booking_selected_days_tooltip", { count: e }),
+		timeSlotsLoading: v("booking_time_slots_loading"),
+		timeSlotsUnavailable: v("booking_time_slots_unavailable"),
+		timeSlotsLoadError: v("booking_time_slots_load_error"),
+		retryTimeSlots: v("booking_time_slots_retry")
+	}), [S.language, v]), U = (e) => {
+		$e((t) => {
 			let n = {
 				...t,
 				...e
 			};
-			return ke(t, n) ? t : n;
+			return Ie(t, n) ? t : n;
 		});
-	}, it = {
-		startDate: Oe(z.start_date),
+	}, dt = {
+		startDate: b(F.start_date),
 		onStartDateChange: (e) => {
-			e && K({ start_date: De(e) });
+			e && U({ start_date: Fe(e) });
 		},
-		startTime: z.start_time,
-		onStartTimeChange: (e) => K({ start_time: e }),
-		endDate: Oe(z.end_date) ?? Oe(z.start_date),
+		startTime: F.start_time,
+		onStartTimeChange: (e) => U({ start_time: e }),
+		endDate: b(F.end_date) ?? b(F.start_date),
 		onEndDateChange: (e) => {
-			e && K({ end_date: De(e) });
+			e && U({ end_date: Fe(e) });
 		},
-		endTime: z.end_time,
-		onEndTimeChange: (e) => K({ end_time: e }),
-		bookingPeriodConfig: Ue,
-		fetchTimeSlots: nt,
+		endTime: F.end_time,
+		onEndTimeChange: (e) => U({ end_time: e }),
+		bookingPeriodConfig: Xe,
+		fetchTimeSlots: lt,
 		onTimeSlotsConfirmationChange: (e) => {
-			Je(e ? Ye : void 0);
+			tt(e ? nt : void 0);
 		},
-		labels: rt,
-		localeCode: s.language
-	}, q = x(() => d({
-		items: Re,
-		language: s.language,
-		fallbackLanguage: A,
+		labels: ut,
+		localeCode: S.language
+	}, W = p(() => ne({
+		items: Ge,
+		language: S.language,
+		fallbackLanguage: E,
 		products: {
-			bikes: Ie,
-			accessories: Le
+			bikes: Ue,
+			accessories: We
 		}
 	}), [
-		Le,
-		Ie,
-		s.language,
-		Re,
-		A
-	]), J = x(() => q.lines.map((e) => ({
+		We,
+		Ue,
+		S.language,
+		Ge,
+		E
+	]), G = p(() => W.lines.map((e) => ({
 		productId: e.checkoutProductId,
 		productVariantId: e.productVariantId,
 		quantity: e.quantity
-	})), [q.lines]), [at, ot] = S([]);
-	b(() => {
-		if (!v || J.length === 0) {
-			ot([]);
+	})), [W.lines]), [ft, K] = m([]);
+	f(() => {
+		if (!C || G.length === 0) {
+			K([]);
 			return;
 		}
-		let e = B ? h(z) : null;
+		let e = I ? u(F) : null;
 		if (!e) {
-			ot([]);
+			K([]);
 			return;
 		}
 		let t = !1;
 		return (async () => {
 			try {
-				let n = await he(f, {
-					storeSlug: v,
+				let n = await ve(s, {
+					storeSlug: C,
 					schedule: e,
-					products: J
-				}), r = ne.parse(n);
+					products: G
+				}), r = ae.parse(n);
 				if (t) return;
-				ot(r.success ? r.availability ?? [] : []);
+				K(r.success ? r.availability ?? [] : []);
 			} catch (e) {
 				if (t) return;
 				console.error("Failed to load storefront cart availability", e);
@@ -321,253 +262,234 @@ function A() {
 			t = !0;
 		};
 	}, [
-		z.end_date,
-		z.end_time,
-		z.start_date,
-		z.start_time,
-		B,
-		J,
-		v
+		F.end_date,
+		F.end_time,
+		F.start_date,
+		F.start_time,
+		I,
+		G,
+		C
 	]);
-	let st = x(() => new Map(at.map((e) => [p(e.productId, e.productVariantId), e])), [at]), ct = x(() => ({
-		...q,
-		lines: q.lines.map((e) => {
-			let t = st.get(p(e.checkoutProductId, e.productVariantId)), n = t ? ee(t) : e.availabilityStatus === "OUT_OF_STOCK" ? "unavailable" : void 0;
+	let pt = p(() => new Map(ft.map((e) => [c(e.productId, e.productVariantId), e])), [ft]), mt = p(() => ({
+		...W,
+		lines: W.lines.map((e) => {
+			let t = pt.get(c(e.checkoutProductId, e.productVariantId)), n = t ? re(t) : e.availabilityStatus === "OUT_OF_STOCK" ? "unavailable" : void 0;
 			return {
 				...e,
 				insufficientCapacity: n !== void 0,
 				availabilityIssue: n
 			};
 		})
-	}), [st, q]), Y = e(new URLSearchParams(), {
-		...z,
-		start_time: V,
-		end_time: H
-	}).toString(), X = B && h(z) !== null, lt = `/${v ?? ""}${Y ? `?${Y}` : ""}`, ut = `/${v ?? ""}/booking${Y ? `?${Y}` : ""}`, dt = `/${v ?? ""}/checkout${Y ? `?${Y}` : ""}`, ft = { backTo: `${y.pathname}${y.search}${y.hash}` }, [pt, Z] = S(null), [mt, ht] = S({}), gt = (e) => {
-		let t = mt[e.id];
-		return t && e.productVariants?.some((e) => e.id === t) ? t : k(e);
-	}, _t = N.get(O)?.trim() ?? "", Q = _t ? Qe.find((e) => e.id === _t) ?? null : null, vt = (e) => {
-		let t = new URLSearchParams(N);
-		e?.trim() ? t.set(O, e) : t.delete(O), P(t, { replace: !0 });
-	}, yt = (e) => {
-		let t = k(e);
-		t && (ht((n) => n[e.id] ? n : {
-			...n,
-			[e.id]: t
-		}), Z(e.id));
-	}, bt = (e) => {
-		k(e) && (Z(null), vt(e.id));
+	}), [pt, W]), q = e(new URLSearchParams(), {
+		...F,
+		start_time: L,
+		end_time: R
+	}).toString(), J = I && u(F) !== null, ht = `/${C ?? ""}${q ? `?${q}` : ""}`, gt = `/${C ?? ""}/booking${q ? `?${q}` : ""}`, Y = `/${C ?? ""}/checkout${q ? `?${q}` : ""}`, _t = { backTo: `${w.pathname}${w.search}${w.hash}` }, [vt, yt] = m(null), bt = H.findIndex((e) => e.id === vt), X = k.get(y)?.trim() ?? "", Z = X ? H.find((e) => e.id === X) ?? at.find((e) => e.id === X) ?? null : null, Q = (e) => {
+		let t = new URLSearchParams(k);
+		e?.trim() ? t.set(y, e) : t.delete(y), A(t, { replace: !0 });
+	}, xt = (e) => {
+		x(e) && Q(e.id);
 	}, $ = (e, t, n = 1) => {
-		X && ze({
+		J && Ke({
 			kind: e.kind,
-			productId: c(e),
+			productId: o(e),
 			...t ? { productVariantId: t } : {},
 			quantity: n
 		});
-	}, xt = (e) => {
-		let t = k(e), n = e.productVariants ?? [];
+	}, St = (e) => {
+		let t = x(e), n = e.productVariants ?? [];
 		if (t && n.length <= 1) {
 			$(e, t);
 			return;
 		}
-		bt(e);
-	}, St = (e) => {
-		let t = e.productVariants ?? [], n = gt(e);
+		xt(e);
+	}, Ct = (e) => {
+		let t = e.productVariants ?? [], n = x(e);
 		if (n) {
 			if (t.length > 1) {
-				yt(e);
+				xt(e);
 				return;
 			}
 			$(e, n);
 		}
-	}, Ct = (e) => {
-		let t = gt(e);
-		t && ($(e, t), Z((t) => t === e.id ? null : t));
 	};
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ g("div", {
 		className: "mx-auto max-w-7xl px-4 py-8 sm:px-6",
-		children: [/* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ g("div", {
 			className: "flex flex-col gap-4",
 			children: [
-				/* @__PURE__ */ C(ae, {
+				/* @__PURE__ */ h(le, {
 					currentStep: "booking",
-					bookingPath: ut,
-					checkoutPath: dt,
-					checkoutEnabled: F > 0 && X
+					bookingPath: gt,
+					checkoutPath: Y,
+					checkoutEnabled: j > 0 && J
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ g("div", {
 					className: "flex items-center justify-between gap-3",
-					children: [/* @__PURE__ */ w(T, {
-						to: lt,
+					children: [/* @__PURE__ */ g(_, {
+						to: ht,
 						className: "inline-flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-slate-950",
-						children: [/* @__PURE__ */ C(Ce, {
+						children: [/* @__PURE__ */ h(Ae, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
-						}), /* @__PURE__ */ C("span", { children: o("back_to_home") })]
-					}), /* @__PURE__ */ C(T, {
-						to: dt,
-						className: E(F > 0 && X ? "inline-flex" : "hidden"),
-						children: /* @__PURE__ */ w(g, {
+						}), /* @__PURE__ */ h("span", { children: v("back_to_home") })]
+					}), /* @__PURE__ */ h(_, {
+						to: Y,
+						className: ke(j > 0 && J ? "inline-flex" : "hidden"),
+						children: /* @__PURE__ */ g(se, {
 							size: "sm",
 							className: "gap-2",
-							children: [/* @__PURE__ */ C(Ee, {
+							children: [/* @__PURE__ */ h(Ne, {
 								className: "h-4 w-4",
 								"aria-hidden": "true"
-							}), /* @__PURE__ */ C("span", { children: o("checkout_button") })]
+							}), /* @__PURE__ */ h("span", { children: v("checkout_button") })]
 						})
 					})]
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ g("div", {
 					className: "grid gap-6 lg:grid-cols-12",
-					children: [/* @__PURE__ */ C("div", {
+					children: [/* @__PURE__ */ h("div", {
 						className: "lg:col-span-8",
-						children: /* @__PURE__ */ w("div", {
+						children: /* @__PURE__ */ g("div", {
 							className: "space-y-6",
 							children: [
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ g("div", {
 									className: "space-y-3",
 									children: [
-										/* @__PURE__ */ C(_, {
+										/* @__PURE__ */ h(d, {
 											stepNumber: 1,
-											title: o("booking_summary_title")
+											title: v("booking_summary_title")
 										}),
-										/* @__PURE__ */ C(ie, {
-											...it,
+										/* @__PURE__ */ h(ce, {
+											...dt,
 											className: "gap-3",
 											labelClassName: "text-xs font-medium text-slate-700",
 											inputClassName: "h-10"
 										}),
-										/* @__PURE__ */ C(_e, {
-											value: z.fulfillment,
-											onValueChange: (e) => K({ fulfillment: e }),
-											pickupAddress: Ge,
-											deliveryEnabled: L,
-											deliveryDisabledReason: We,
-											startAddress: z.start_address,
-											onStartAddressChange: (e) => K({ start_address: e }),
-											endAddress: z.end_address,
-											onEndAddressChange: (e) => K({ end_address: e }),
+										/* @__PURE__ */ h(be, {
+											value: F.fulfillment,
+											onValueChange: (e) => U({ fulfillment: e }),
+											pickupAddress: Qe,
+											deliveryEnabled: N,
+											deliveryDisabledReason: Ze,
+											startAddress: F.start_address,
+											onStartAddressChange: (e) => U({ start_address: e }),
+											endAddress: F.end_address,
+											onEndAddressChange: (e) => U({ end_address: e }),
 											testIdPrefix: "storefront-booking-fulfillment"
 										})
 									]
 								}),
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ g("div", {
+									ref: He,
 									id: "booking-products",
 									className: "space-y-2 scroll-mt-32",
-									children: [/* @__PURE__ */ C(_, {
+									children: [/* @__PURE__ */ h(d, {
 										stepNumber: 2,
-										title: o("products_title")
-									}), /* @__PURE__ */ C("p", {
+										title: v("products_title")
+									}), /* @__PURE__ */ h("p", {
 										className: "text-sm text-slate-600",
-										children: /* @__PURE__ */ C("span", { children: o("products_description") })
+										children: /* @__PURE__ */ h("span", { children: v("products_description") })
 									})]
 								}),
-								/* @__PURE__ */ C("div", {
+								/* @__PURE__ */ h("div", {
 									className: "grid gap-4 md:grid-cols-2",
-									children: Qe.map((e) => {
-										let t = `/${v ?? ""}/products/${e.slug}`, n = !!k(e) || et(e);
-										return /* @__PURE__ */ C(me, {
+									children: H.map((e, t) => {
+										let n = `/${C ?? ""}/products/${e.slug}`, r = !!x(e) || st(e);
+										return /* @__PURE__ */ h(xe, {
 											bike: e,
-											detailsPath: t,
-											productDetailsLinkState: ft,
-											actionLabelKey: "add_to_cart",
-											onAction: () => xt(e),
-											actionDisabled: !n || !X,
-											fallbackLanguage: A,
-											variant: "booking",
+											detailsPath: n,
+											productDetailsLinkState: _t,
+											onAction: () => St(e),
+											actionDisabled: !r || !J,
+											fallbackLanguage: E,
+											dimOnColumnCount: Pe(bt, t),
+											onQuickAdd: (t, n) => $(e, t, n),
+											onHoverStart: () => yt(e.id),
+											onHoverEnd: () => {
+												yt((t) => t === e.id ? null : t);
+											},
 											testId: `storefront-booking-bike-card-${e.id}`.toLowerCase()
 										}, e.id);
 									})
 								}),
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ g("div", {
 									className: "space-y-2 pt-4",
-									children: [/* @__PURE__ */ C(_, {
+									children: [/* @__PURE__ */ h(d, {
 										stepNumber: 3,
-										title: o("accessories_title")
-									}), /* @__PURE__ */ C("p", {
+										title: v("accessories_title")
+									}), /* @__PURE__ */ h("p", {
 										className: "text-sm text-slate-600",
-										children: /* @__PURE__ */ C("span", { children: o("accessories_description") })
+										children: /* @__PURE__ */ h("span", { children: v("accessories_description") })
 									})]
 								}),
-								/* @__PURE__ */ C("div", {
+								/* @__PURE__ */ h("div", {
 									className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-									children: M.map((e) => {
-										let t = u(e.name, s.language, A), n = u(e.description, s.language, A), r = u(e.warning, s.language, A), i = typeof e.images?.[0] == "string" ? e.images[0].trim() : "", a = pe(e.primaryImageStyle), c = `/${v ?? ""}/products/${e.slug}`, l = k(e), d = gt(e), f = m(je(e, G)) === "OUT_OF_STOCK", p = !!l || et(e);
-										return /* @__PURE__ */ C(le, {
-											className: "h-full border-slate-200 bg-white shadow-sm",
-											children: /* @__PURE__ */ w("div", {
+									children: at.map((e) => {
+										let t = te(e.name, S.language, E), n = te(e.description, S.language, E), r = te(e.warning, S.language, E), i = typeof e.images?.[0] == "string" ? e.images[0].trim() : "", a = _e(e.primaryImageStyle), o = `/${C ?? ""}/products/${e.slug}`, ee = x(e), ne = e.availabilityStatus === "OUT_OF_STOCK", s = !!ee || st(e);
+										return /* @__PURE__ */ h(pe, {
+											"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",
 												children: [
-													/* @__PURE__ */ w("div", {
-														className: E("relative aspect-[1618/1000] overflow-hidden rounded-xl", a.className),
+													/* @__PURE__ */ g("div", {
+														className: ke("relative aspect-[1618/1000] overflow-hidden rounded-xl", a.className),
 														style: a.style,
-														children: [i ? /* @__PURE__ */ C("img", {
+														children: [i ? /* @__PURE__ */ h("img", {
 															src: i,
 															alt: t,
 															className: "absolute inset-0 h-full w-full object-contain p-1",
 															loading: "lazy"
-														}) : /* @__PURE__ */ C("div", {
+														}) : /* @__PURE__ */ h("div", {
 															className: "absolute inset-0 flex items-center justify-center text-slate-400",
-															children: /* @__PURE__ */ C(Te, {
+															children: /* @__PURE__ */ h(Me, {
 																className: "h-8 w-8",
 																"aria-hidden": "true"
 															})
-														}), f ? /* @__PURE__ */ C(re, {
+														}), ne ? /* @__PURE__ */ h(oe, {
 															variant: "destructive",
 															className: "pointer-events-none absolute right-2 top-2 shadow-sm",
-															children: /* @__PURE__ */ C("span", { children: o("availability_out_of_stock") })
+															children: /* @__PURE__ */ h("span", { children: v("availability_out_of_stock") })
 														}) : null]
 													}),
-													/* @__PURE__ */ w("div", {
+													/* @__PURE__ */ g("div", {
 														className: "flex flex-1 flex-col gap-1",
 														children: [
-															/* @__PURE__ */ w("div", {
+															/* @__PURE__ */ g("div", {
 																className: "flex items-start justify-between gap-2",
-																children: [/* @__PURE__ */ C("p", {
+																children: [/* @__PURE__ */ h("p", {
 																	className: "min-w-0 text-sm font-semibold text-slate-950",
-																	children: /* @__PURE__ */ C("span", { children: t })
-																}), /* @__PURE__ */ C(fe, {
+																	children: /* @__PURE__ */ h("span", { children: t })
+																}), /* @__PURE__ */ h(ge, {
 																	prices: e.prices,
 																	className: "shrink-0"
 																})]
 															}),
-															/* @__PURE__ */ C("p", {
+															/* @__PURE__ */ h("p", {
 																className: "line-clamp-2 text-xs text-slate-600",
-																children: /* @__PURE__ */ C("span", { children: n })
+																children: /* @__PURE__ */ h("span", { children: n })
 															}),
-															/* @__PURE__ */ C(ue, {
+															/* @__PURE__ */ h(me, {
 																warning: r,
 																className: "mt-1"
 															})
 														]
 													}),
-													e.productVariants?.length && e.productVariants.length > 1 && pt === e.id && d ? /* @__PURE__ */ C(Fe, {
-														product: e,
-														selectedVariantId: d,
-														onSelect: (t) => ht((n) => ({
-															...n,
-															[e.id]: t
-														})),
-														onConfirm: () => Ct(e),
-														onCancel: () => Z((t) => t === e.id ? null : t),
-														getVariantAvailabilityLabel: (t) => tt(e, t),
-														isVariantOutOfCapacity: (t) => $e(e, t),
-														confirmDisabled: !X
-													}) : null,
-													/* @__PURE__ */ w("div", {
+													/* @__PURE__ */ g("div", {
 														className: "mt-auto flex items-center gap-2",
-														children: [/* @__PURE__ */ C(T, {
-															to: c,
-															state: ft,
+														children: [/* @__PURE__ */ h(_, {
+															to: o,
+															state: _t,
 															className: "text-xs font-medium text-slate-700 hover:text-slate-950",
-															children: /* @__PURE__ */ C("span", { children: o("product_details_link") })
-														}), /* @__PURE__ */ w(g, {
+															children: /* @__PURE__ */ h("span", { children: v("product_details_link") })
+														}), /* @__PURE__ */ g(se, {
 															type: "button",
 															size: "sm",
-															className: "ml-auto rounded-full gap-2",
-															onClick: () => St(e),
-															disabled: !p || !X,
-															children: [/* @__PURE__ */ C("span", { children: o("add_to_cart") }), /* @__PURE__ */ C(we, {
+															className: "ml-auto rounded-xl gap-2",
+															onClick: () => Ct(e),
+															disabled: !s || !J,
+															children: [/* @__PURE__ */ h("span", { children: v("add_to_cart") }), /* @__PURE__ */ h(je, {
 																className: "h-4 w-4",
 																"aria-hidden": "true"
 															})]
@@ -580,38 +502,38 @@ function A() {
 								})
 							]
 						})
-					}), /* @__PURE__ */ C("div", {
+					}), /* @__PURE__ */ h("div", {
 						className: "lg:col-span-4",
-						children: /* @__PURE__ */ C(de, {
-							lines: ct.lines,
-							itemCount: F,
-							totalPerDayMinor: ct.totalPerDayMinor,
-							checkoutPath: dt,
-							showCheckoutAction: X,
+						children: /* @__PURE__ */ h(he, {
+							lines: mt.lines,
+							itemCount: j,
+							totalPerDayMinor: mt.totalPerDayMinor,
+							checkoutPath: Y,
+							showCheckoutAction: J,
 							showClearAction: !0,
 							editable: !0,
 							stickyTopClassName: "top-32",
-							onQuantityChange: He,
-							onRemove: Ve,
-							onClear: Be
+							onQuantityChange: Ye,
+							onRemove: Je,
+							onClear: qe
 						})
 					})]
 				})
 			]
-		}), /* @__PURE__ */ C(ve, {
-			open: !!Q,
-			product: Q,
+		}), /* @__PURE__ */ h(Se, {
+			open: !!Z,
+			product: Z,
 			onOpenChange: (e) => {
-				e || vt(null);
+				e || Q(null);
 			},
-			getVariantAvailabilityLabel: (e) => Q ? tt(Q, e) : null,
-			isVariantOutOfCapacity: (e) => Q ? $e(Q, e) : !1,
-			addDisabled: !X,
+			getVariantAvailabilityLabel: (e) => Z ? ct(Z, e) : null,
+			isVariantOutOfCapacity: (e) => Z ? ot(Z, e) : !1,
+			addDisabled: !J,
 			onAddVariant: (e, t) => {
-				Q && ($(Q, e, t), vt(null));
+				Z && ($(Z, e, t), Q(null));
 			}
 		})]
 	});
 }
 //#endregion
-export { A as default };
+export { S as default };