@loczer/storefront-sdk 0.163.0 → 0.165.0

package/dist/pages/BookingPage.js

@@ -1,101 +1,101 @@
 import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import { useMemo as p, useState as S, useEffect as P } from "react";
-import { useParams as ne, useLocation as re, useSearchParams as oe, Link as it } from "@rpcbase/router";
-import { cn as ct } from "@rpcbase/ui";
-import { ArrowLeft as se, ShoppingCart as le, Bike as de, ArrowRight as $t } from "lucide-react";
-import { useTranslation as Rt } from "react-i18next";
-import { apiPost as It } from "../lib/apiCall.js";
-import { getProductVariantAttributeValue as ce, getStorefrontProductVariantDisplay as me } from "../lib/productVariants.js";
-import { getStorefrontCheckoutProductId as mt } from "../lib/products.js";
-import { ROUTE as Vt, responseSchema as Pt, buildStorefrontAvailabilityKey as h, getStorefrontAvailabilityStatus as K, getStorefrontAvailabilityIssue as Ft, isStorefrontAvailabilityInsufficient as ue } from "../lib/storefrontAvailability.js";
-import { getLocalizedValue as nt } from "../localization.js";
-import { Badge as Kt } from "../ui/badge.js";
-import { Button as E } from "../ui/button.js";
-import { Card as pe } from "../ui/card.js";
-import { RadioGroup as fe, RadioGroupItem as ge } from "../ui/radio-group.js";
-import { createBookingPeriodConfigFromStorefrontConfiguration as he, getDefaultBookingParamsForStorefrontConfiguration as be, resolveBookingSearchParamsFromSessionStorage as _e, getBookingParamsFromSearch as At, applyBookingParamsToSearch as wt, writeBookingSearchParamsToSessionStorage as ve } from "../lib/booking.js";
-import { createStorefrontTimeSlotsFetcher as ye } from "../lib/fetchStorefrontTimeSlots.js";
-import { useStorefrontCart as Se } from "../lib/cart.js";
-import { buildStorefrontCartSummary as ke } from "../lib/cartSummary.js";
-import { resolveProductImageContainerStyle as xe } from "../lib/productImageStyles.js";
-import { BookingFlowSteps as Ne } from "../components/BookingFlowSteps/index.js";
-import { StepSectionTitle as rt } from "../components/StepSectionTitle/index.js";
-import { BookingPeriodSelector as Ce } from "../components/BookingPeriodSelector/index.js";
-import { BikeProductCard as Ie } from "../components/BikeProductCard/index.js";
-import { StorefrontCartPanel as Ve } from "../components/StorefrontCartPanel/index.js";
-import { BookingBikeVariantDialog as Pe } from "../components/BookingBikeVariantDialog/index.js";
-import { FulfillmentSection as Ae } from "../components/FulfillmentSection/index.js";
-import { ProductPriceBadge as we } from "../components/ProductPriceBadge/index.js";
-import { ProductWarningNotice as Te } from "../components/ProductWarningNotice/index.js";
-import { useStorefront as Be, useStorefrontProducts as De } from "../StorefrontProvider.js";
-const Tt = (e) => String(e).padStart(2, "0"), ot = "product_modal", Bt = (e) => `${e.getFullYear()}-${Tt(e.getMonth() + 1)}-${Tt(e.getDate())}`, st = (e) => {
+import { useMemo as p, useState as A, useEffect as B } from "react";
+import { useParams as ee, useLocation as ae, useSearchParams as ie, Link as Q } from "@rpcbase/router";
+import { cn as tt } from "@rpcbase/ui";
+import { ArrowLeft as ne, ShoppingCart as re, Bike as oe, ArrowRight as At } from "lucide-react";
+import { useTranslation as Bt } from "react-i18next";
+import { apiPost as _t } from "../lib/apiCall.js";
+import { getProductVariantAttributeValue as se, getStorefrontProductVariantDisplay as le } from "../lib/productVariants.js";
+import { getStorefrontCheckoutProductId as K } from "../lib/products.js";
+import { getValidStorefrontAvailabilitySchedule as vt, ROUTE as yt, responseSchema as St, buildStorefrontAvailabilityKey as h, getStorefrontAvailabilityStatus as Y, getStorefrontAvailabilityIssue as Tt, isStorefrontAvailabilityInsufficient as de } from "../lib/storefrontAvailability.js";
+import { getLocalizedValue as H } from "../localization.js";
+import { Badge as Ot } from "../ui/badge.js";
+import { Button as F } from "../ui/button.js";
+import { Card as ce } from "../ui/card.js";
+import { RadioGroup as me, RadioGroupItem as ue } from "../ui/radio-group.js";
+import { createBookingPeriodConfigFromStorefrontConfiguration as pe, getDefaultBookingParamsForStorefrontConfiguration as fe, resolveBookingSearchParamsFromSessionStorage as ge, getBookingParamsFromSearch as kt, applyBookingParamsToSearch as xt, writeBookingSearchParamsToSessionStorage as he } from "../lib/booking.js";
+import { createStorefrontTimeSlotsFetcher as be } from "../lib/fetchStorefrontTimeSlots.js";
+import { useStorefrontCart as _e } from "../lib/cart.js";
+import { buildStorefrontCartSummary as ve } from "../lib/cartSummary.js";
+import { resolveProductImageContainerStyle as ye } from "../lib/productImageStyles.js";
+import { BookingFlowSteps as Se } from "../components/BookingFlowSteps/index.js";
+import { StepSectionTitle as J } from "../components/StepSectionTitle/index.js";
+import { BookingPeriodSelector as ke } from "../components/BookingPeriodSelector/index.js";
+import { BikeProductCard as xe } from "../components/BikeProductCard/index.js";
+import { StorefrontCartPanel as Ne } from "../components/StorefrontCartPanel/index.js";
+import { BookingBikeVariantDialog as Ve } from "../components/BookingBikeVariantDialog/index.js";
+import { FulfillmentSection as Ie } from "../components/FulfillmentSection/index.js";
+import { ProductPriceBadge as Ce } from "../components/ProductPriceBadge/index.js";
+import { ProductWarningNotice as Pe } from "../components/ProductWarningNotice/index.js";
+import { useStorefront as we, useStorefrontProducts as Ae, useStorefrontBookingProducts as Be } from "../StorefrontProvider.js";
+const Nt = (e) => String(e).padStart(2, "0"), X = "product_modal", Vt = (e) => `${e.getFullYear()}-${Nt(e.getMonth() + 1)}-${Nt(e.getDate())}`, Z = (e) => {
   if (!e) return;
   const n = e.match(/^(\d{4})-(\d{2})-(\d{2})$/);
   if (!n) return;
-  const o = Number(n[1]), d = Number(n[2]), l = Number(n[3]), m = new Date(o, d - 1, l);
-  if (!(Number.isNaN(m.getTime()) || m.getFullYear() !== o || m.getMonth() !== d - 1 || m.getDate() !== l))
+  const o = Number(n[1]), d = Number(n[2]), s = Number(n[3]), m = new Date(o, d - 1, s);
+  if (!(Number.isNaN(m.getTime()) || m.getFullYear() !== o || m.getMonth() !== d - 1 || m.getDate() !== s))
     return m;
-}, Dt = (e, n) => e.fulfillment === n.fulfillment && e.start_date === n.start_date && e.start_time === n.start_time && e.end_date === n.end_date && e.end_time === n.end_time && e.start_address === n.start_address && e.end_address === n.end_address, C = (e, n = () => !0) => {
+}, It = (e, n) => e.fulfillment === n.fulfillment && e.start_date === n.start_date && e.start_time === n.start_time && e.end_date === n.end_date && e.end_time === n.end_time && e.start_address === n.start_address && e.end_address === n.end_address, x = (e, n = () => !0) => {
   if (e.representedVariantId?.trim()) return e.representedVariantId.trim();
-  const o = e.productVariants ?? [], l = o.find((m) => n(m.id))?.id ?? o[0]?.id;
-  return typeof l == "string" && l.trim().length > 0 ? l : null;
-}, Lt = (e, n) => e.fulfillment === "delivery" && !n ? { ...e, fulfillment: "pickup" } : e, lt = (e, n) => {
-  const o = mt(e), d = e.representedVariantId?.trim();
+  const o = e.productVariants ?? [], s = o.find((m) => n(m.id))?.id ?? o[0]?.id;
+  return typeof s == "string" && s.trim().length > 0 ? s : null;
+}, Ct = (e, n) => e.fulfillment === "delivery" && !n ? { ...e, fulfillment: "pickup" } : e, Pt = (e, n) => {
+  const o = K(e), d = e.representedVariantId?.trim();
   if (d) {
-    const l = n.get(h(o, d));
-    if (l) return l;
+    const s = n.get(h(o, d));
+    if (s) return s;
   }
   return n.get(h(o));
-}, Ot = (e, n, o) => o.get(h(mt(e), n)), dt = (e, n, o) => {
-  const d = Ft(n);
+}, wt = (e, n, o) => o.get(h(K(e), n)), Te = (e, n, o) => {
+  const d = Tt(n);
   return d === "quantity_unavailable" ? e("availability_quantity_unavailable") : d === "unavailable" || o === "OUT_OF_STOCK" ? e("availability_out_of_stock") : n?.remaining !== void 0 ? e("availability_remaining_count", { count: n.remaining }) : n?.fewRemaining || o === "LOW_STOCK" ? e("availability_low_stock") : e("availability_in_stock");
-}, Le = (e) => {
+}, Oe = (e) => {
   const n = /* @__PURE__ */ new Map();
   for (const o of e) {
-    const d = mt(o);
+    const d = K(o);
     n.set(h(d), { productId: d });
     for (const m of o.productVariants ?? [])
       n.set(h(d, m.id), {
         productId: d,
         productVariantId: m.id
       });
-    const l = o.representedVariantId?.trim();
-    l && n.set(h(d, l), {
+    const s = o.representedVariantId?.trim();
+    s && n.set(h(d, s), {
       productId: d,
-      productVariantId: l
+      productVariantId: s
     });
   }
   return Array.from(n.values());
 };
-function Oe({
+function De({
   product: e,
   selectedVariantId: n,
   onSelect: o,
   onConfirm: d,
-  onCancel: l,
+  onCancel: s,
   getVariantAvailabilityLabel: m,
-  isVariantOutOfCapacity: k
+  isVariantOutOfCapacity: T
 }) {
-  const { t: f } = Rt(), g = e.productVariants ?? [], I = g.some((u) => !!ce(u, "size")), A = f(I ? "product_size_label" : "product_variant_label");
+  const { t: v } = Bt(), y = e.productVariants ?? [], N = y.some((u) => !!se(u, "size")), f = v(N ? "product_size_label" : "product_variant_label");
   return /* @__PURE__ */ c("div", { className: "grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3", children: [
-    /* @__PURE__ */ i("p", { className: "text-xs font-medium text-slate-700", children: /* @__PURE__ */ i("span", { children: A }) }),
-    /* @__PURE__ */ i(fe, { value: n, onValueChange: o, className: "grid gap-2", children: g.map((u) => {
-      const w = `booking-variant-${e.id}-${u.id}`.toLowerCase(), z = `storefront-booking-variant-option-${e.id}-${u.id}`.toLowerCase(), { label: M, description: T } = me(u), U = k(u.id), b = m(u.id);
+    /* @__PURE__ */ i("p", { className: "text-xs font-medium text-slate-700", children: /* @__PURE__ */ i("span", { children: f }) }),
+    /* @__PURE__ */ i(me, { value: n, onValueChange: o, className: "grid gap-2", children: y.map((u) => {
+      const V = `booking-variant-${e.id}-${u.id}`.toLowerCase(), I = `storefront-booking-variant-option-${e.id}-${u.id}`.toLowerCase(), { label: E, description: O } = le(u), z = T(u.id), D = m(u.id);
       return /* @__PURE__ */ c(
         "label",
         {
-          htmlFor: w,
-          "data-testid": z,
-          className: ct(
+          htmlFor: V,
+          "data-testid": I,
+          className: tt(
             "flex items-start gap-3 rounded-xl border p-3 transition",
             n === u.id ? "border-slate-900 bg-white" : "border-slate-200 bg-white"
           ),
           children: [
-            /* @__PURE__ */ i(ge, { id: w, value: u.id, className: "mt-1" }),
+            /* @__PURE__ */ i(ue, { id: V, value: u.id, className: "mt-1" }),
             /* @__PURE__ */ c("span", { className: "flex flex-1 flex-col gap-0.5", children: [
-              /* @__PURE__ */ i("span", { className: "text-sm font-medium text-slate-950", children: M }),
-              T ? /* @__PURE__ */ i("span", { className: "text-xs text-slate-600", children: T }) : null,
-              b ? /* @__PURE__ */ i("span", { className: "pt-1", children: /* @__PURE__ */ i(Kt, { variant: U ? "destructive" : "outline", children: /* @__PURE__ */ i("span", { children: b }) }) }) : null
+              /* @__PURE__ */ i("span", { className: "text-sm font-medium text-slate-950", children: E }),
+              O ? /* @__PURE__ */ i("span", { className: "text-xs text-slate-600", children: O }) : null,
+              D ? /* @__PURE__ */ i("span", { className: "pt-1", children: /* @__PURE__ */ i(Ot, { variant: z ? "destructive" : "outline", children: /* @__PURE__ */ i("span", { children: D }) }) }) : null
             ] })
           ]
         },
@@ -104,113 +104,109 @@ function Oe({
     }) }),
     /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2", children: [
       /* @__PURE__ */ c(
-        E,
+        F,
         {
           type: "button",
           size: "sm",
           className: "rounded-full gap-2",
           onClick: d,
           children: [
-            /* @__PURE__ */ i("span", { children: f("add_to_cart") }),
-            /* @__PURE__ */ i($t, { className: "h-4 w-4", "aria-hidden": "true" })
+            /* @__PURE__ */ i("span", { children: v("add_to_cart") }),
+            /* @__PURE__ */ i(At, { className: "h-4 w-4", "aria-hidden": "true" })
           ]
         }
       ),
-      /* @__PURE__ */ i(E, { type: "button", size: "sm", variant: "outline", className: "rounded-full", onClick: l, children: /* @__PURE__ */ i("span", { children: f("booking_select_variant_cancel") }) })
+      /* @__PURE__ */ i(F, { type: "button", size: "sm", variant: "outline", className: "rounded-full", onClick: s, children: /* @__PURE__ */ i("span", { children: v("booking_select_variant_cancel") }) })
     ] })
   ] });
 }
 function ua() {
-  const { t: e, i18n: n } = Rt(), { storeSlug: o } = ne(), d = re(), { storefrontConfiguration: l } = Be(), m = l.workspace?.workspaceLanguage, { bikes: k, accessories: f } = De(), [g, I] = oe(), { items: A, itemCount: u, addItem: w, clear: z, removeItem: M, setQuantity: T } = Se(), U = p(
-    () => he(l),
-    [l]
-  ), b = p(
-    () => be(l),
-    [l]
-  ), B = l.settings.fulfillmentModes.includes("delivery"), Et = l.settings.deliveryDisabledReason.trim(), zt = l.shop.address?.trim() ?? "", j = p(
-    () => _e(g, o),
-    [g, o]
-  ), [s, ut] = S(
-    () => Lt(At(j, b), B)
+  const { t: e, i18n: n } = Bt(), { storeSlug: o } = ee(), d = ae(), { storefrontConfiguration: s } = we(), m = s.workspace?.workspaceLanguage, { bikes: T, accessories: v } = Ae(), { bikes: y, accessories: N } = Be(), [f, u] = ie(), { items: V, itemCount: I, addItem: E, clear: O, removeItem: z, setQuantity: D } = _e(), Dt = p(
+    () => pe(s),
+    [s]
+  ), C = p(
+    () => fe(s),
+    [s]
+  ), L = s.settings.fulfillmentModes.includes("delivery"), Lt = s.settings.deliveryDisabledReason.trim(), $t = s.shop.address?.trim() ?? "", M = p(
+    () => ge(f, o),
+    [f, o]
+  ), [l, et] = A(
+    () => Ct(kt(M, C), L)
   );
-  P(() => {
-    ut((t) => {
+  B(() => {
+    et((t) => {
       const a = {
-        ...b,
+        ...C,
         ...t,
-        start_time: t.start_time.trim() ? t.start_time : b.start_time,
-        end_time: t.end_time.trim() ? t.end_time : b.end_time
-      }, r = Lt(At(j, a), B);
-      return Dt(t, r) ? t : r;
+        start_time: t.start_time.trim() ? t.start_time : C.start_time,
+        end_time: t.end_time.trim() ? t.end_time : C.end_time
+      }, r = Ct(kt(M, a), L);
+      return It(t, r) ? t : r;
     });
-  }, [j, b, B]), P(() => {
-    const t = wt(g, s);
-    t.toString() !== g.toString() && I(t, { replace: !0 });
-  }, [s, g, I]), P(() => {
-    ve(o, s);
-  }, [s, o]);
-  const W = p(
-    () => Le([...k, ...f]),
-    [f, k]
-  ), [pt, D] = S([]), [ft, q] = S(!1);
-  P(() => {
-    if (!o || W.length === 0) {
-      D([]), q(!1);
+  }, [M, C, L]), B(() => {
+    const t = xt(f, l);
+    t.toString() !== f.toString() && u(t, { replace: !0 });
+  }, [l, f, u]), B(() => {
+    he(o, l);
+  }, [l, o]);
+  const U = p(
+    () => Oe([...y, ...N]),
+    [N, y]
+  ), [at, it] = A([]);
+  B(() => {
+    if (!o || U.length === 0) {
+      it([]);
       return;
     }
-    let t = !1;
-    return q(!0), D([]), (async () => {
+    const t = vt(l);
+    if (!t)
+      return;
+    let a = !1;
+    return (async () => {
       try {
-        const a = await It(
-          Vt,
+        const r = await _t(
+          yt,
           {
             storeSlug: o,
-            schedule: {
-              startDate: s.start_date,
-              endDate: s.end_date,
-              startTime: s.start_time,
-              endTime: s.end_time
-            },
-            products: W
+            schedule: t,
+            products: U
           }
-        ), r = Pt.parse(a);
-        if (t) return;
-        D(r.success ? r.availability ?? [] : []);
-      } catch (a) {
-        if (t) return;
-        console.error("Failed to load storefront availability", a), D([]);
-      } finally {
-        t || q(!1);
+        ), g = St.parse(r);
+        if (a) return;
+        it(g.success ? g.availability ?? [] : []);
+      } catch (r) {
+        if (a) return;
+        console.error("Failed to load storefront availability", r);
       }
     })(), () => {
-      t = !0;
+      a = !0;
     };
   }, [
-    W,
-    s.end_date,
-    s.end_time,
-    s.start_date,
-    s.start_time,
+    U,
+    l.end_date,
+    l.end_time,
+    l.start_date,
+    l.start_time,
     o
   ]);
-  const x = p(() => new Map(
-    pt.map((t) => [
+  const P = p(() => new Map(
+    at.map((t) => [
       h(t.productId, t.productVariantId),
       t
     ])
-  ), [pt]), L = p(() => k.map((t) => {
-    const a = lt(t, x);
+  ), [at]), nt = p(() => y.map((t) => {
+    const a = Pt(t, P);
     return {
       ...t,
-      availabilityStatus: a ? K(a) : t.availabilityStatus ?? "AVAILABLE"
+      availabilityStatus: a ? Y(a) : t.availabilityStatus ?? "AVAILABLE"
     };
-  }), [x, k]), gt = (t, a) => {
-    const r = Ot(t, a, x);
-    return r ? ue(r) : t.availabilityStatus === "OUT_OF_STOCK";
-  }, ht = (t) => (t.productVariants ?? []).length > 0, bt = (t, a) => {
-    const r = Ot(t, a, x);
-    return r ? dt(e, r, K(r)) : t.availabilityStatus === "OUT_OF_STOCK" ? e("availability_out_of_stock") : null;
-  }, Mt = ye(o), Ut = p(
+  }), [P, y]), rt = (t, a) => {
+    const r = wt(t, a, P);
+    return r ? de(r) : t.availabilityStatus === "OUT_OF_STOCK";
+  }, ot = (t) => (t.productVariants ?? []).length > 0, st = (t, a) => {
+    const r = wt(t, a, P);
+    return r ? Te(e, r, Y(r)) : t.availabilityStatus === "OUT_OF_STOCK" ? e("availability_out_of_stock") : null;
+  }, Rt = be(o), Ft = p(
     () => ({
       startDate: e("booking_start_date"),
       pickStartDate: e("booking_start_date"),
@@ -221,267 +217,272 @@ function ua() {
       selectedDaysTooltip: ({ count: t }) => e("booking_selected_days_tooltip", { count: t })
     }),
     [n.language, e]
-  ), y = (t) => {
-    ut((a) => {
+  ), S = (t) => {
+    et((a) => {
       const r = { ...a, ...t };
-      return Dt(a, r) ? a : r;
+      return It(a, r) ? a : r;
     });
-  }, jt = {
-    startDate: st(s.start_date),
+  }, Kt = {
+    startDate: Z(l.start_date),
     onStartDateChange: (t) => {
-      t && y({ start_date: Bt(t) });
+      t && S({ start_date: Vt(t) });
     },
-    startTime: s.start_time,
-    onStartTimeChange: (t) => y({ start_time: t }),
-    endDate: st(s.end_date) ?? st(s.start_date),
+    startTime: l.start_time,
+    onStartTimeChange: (t) => S({ start_time: t }),
+    endDate: Z(l.end_date) ?? Z(l.start_date),
     onEndDateChange: (t) => {
-      t && y({ end_date: Bt(t) });
+      t && S({ end_date: Vt(t) });
     },
-    endTime: s.end_time,
-    onEndTimeChange: (t) => y({ end_time: t }),
-    bookingPeriodConfig: U,
-    fetchTimeSlots: Mt,
-    labels: Ut,
+    endTime: l.end_time,
+    onEndTimeChange: (t) => S({ end_time: t }),
+    bookingPeriodConfig: Dt,
+    fetchTimeSlots: Rt,
+    labels: Ft,
     localeCode: n.language
-  }, V = p(
-    () => ke({
-      items: A,
+  }, w = p(
+    () => ve({
+      items: V,
       language: n.language,
       fallbackLanguage: m,
-      products: { bikes: L, accessories: f }
+      products: { bikes: T, accessories: v }
     }),
-    [f, L, n.language, A, m]
-  ), G = p(
-    () => V.lines.map((t) => ({
+    [v, T, n.language, V, m]
+  ), j = p(
+    () => w.lines.map((t) => ({
       productId: t.checkoutProductId,
       productVariantId: t.productVariantId,
       quantity: t.quantity
     })),
-    [V.lines]
-  ), [_t, O] = S([]), [Q, Y] = S(!1);
-  P(() => {
-    if (!o || G.length === 0) {
-      O([]), Y(!1);
+    [w.lines]
+  ), [lt, dt] = A([]);
+  B(() => {
+    if (!o || j.length === 0) {
+      dt([]);
       return;
     }
-    let t = !1;
-    return Y(!0), O([]), (async () => {
+    const t = vt(l);
+    if (!t)
+      return;
+    let a = !1;
+    return (async () => {
       try {
-        const a = await It(
-          Vt,
+        const r = await _t(
+          yt,
           {
             storeSlug: o,
-            schedule: {
-              startDate: s.start_date,
-              endDate: s.end_date,
-              startTime: s.start_time,
-              endTime: s.end_time
-            },
-            products: G
+            schedule: t,
+            products: j
           }
-        ), r = Pt.parse(a);
-        if (t) return;
-        O(r.success ? r.availability ?? [] : []);
-      } catch (a) {
-        if (t) return;
-        console.error("Failed to load storefront cart availability", a), O([]);
-      } finally {
-        t || Y(!1);
+        ), g = St.parse(r);
+        if (a) return;
+        dt(g.success ? g.availability ?? [] : []);
+      } catch (r) {
+        if (a) return;
+        console.error("Failed to load storefront cart availability", r);
       }
     })(), () => {
-      t = !0;
+      a = !0;
     };
   }, [
-    s.end_date,
-    s.end_time,
-    s.start_date,
-    s.start_time,
-    G,
+    l.end_date,
+    l.end_time,
+    l.start_date,
+    l.start_time,
+    j,
     o
   ]);
-  const vt = p(() => new Map(
-    _t.map((t) => [
+  const ct = p(() => new Map(
+    lt.map((t) => [
       h(t.productId, t.productVariantId),
       t
     ])
-  ), [_t]), yt = p(
+  ), [lt]), mt = p(
     () => ({
-      ...V,
-      lines: V.lines.map((t) => {
-        const a = vt.get(h(t.checkoutProductId, t.productVariantId)), r = a ? Ft(a) : t.availabilityStatus === "OUT_OF_STOCK" ? "unavailable" : void 0;
+      ...w,
+      lines: w.lines.map((t) => {
+        const a = ct.get(h(t.checkoutProductId, t.productVariantId)), r = a ? Tt(a) : t.availabilityStatus === "OUT_OF_STOCK" ? "unavailable" : void 0;
         return {
           ...t,
-          insufficientCapacity: !Q && r !== void 0,
-          availabilityIssue: Q ? void 0 : r
+          insufficientCapacity: r !== void 0,
+          availabilityIssue: r
         };
       })
     }),
-    [vt, Q, V]
-  ), N = wt(new URLSearchParams(), s).toString(), Wt = `/${o ?? ""}${N ? `?${N}` : ""}`, qt = `/${o ?? ""}/booking${N ? `?${N}` : ""}`, H = `/${o ?? ""}/checkout${N ? `?${N}` : ""}`, St = {
+    [ct, w]
+  ), k = xt(new URLSearchParams(), l).toString(), Et = `/${o ?? ""}${k ? `?${k}` : ""}`, zt = `/${o ?? ""}/booking${k ? `?${k}` : ""}`, q = `/${o ?? ""}/checkout${k ? `?${k}` : ""}`, ut = {
     backTo: `${d.pathname}${d.search}${d.hash}`
-  }, [Gt, $] = S(null), [Qt, kt] = S({}), J = (t) => {
-    const a = Qt[t.id];
-    return a && t.productVariants?.some((r) => r.id === a) ? a : C(t);
-  }, xt = g.get(ot)?.trim() ?? "", _ = xt ? L.find((t) => t.id === xt) ?? null : null, X = (t) => {
-    const a = new URLSearchParams(g);
-    t?.trim() ? a.set(ot, t) : a.delete(ot), I(a, { replace: !0 });
-  }, Yt = (t) => {
-    const a = C(t);
-    a && (kt((r) => r[t.id] ? r : { ...r, [t.id]: a }), $(t.id));
-  }, Ht = (t) => {
-    C(t) && ($(null), X(t.id));
+  }, [Mt, $] = A(null), [Ut, pt] = A({}), G = (t) => {
+    const a = Ut[t.id];
+    return a && t.productVariants?.some((r) => r.id === a) ? a : x(t);
+  }, ft = f.get(X)?.trim() ?? "", b = ft ? nt.find((t) => t.id === ft) ?? null : null, W = (t) => {
+    const a = new URLSearchParams(f);
+    t?.trim() ? a.set(X, t) : a.delete(X), u(a, { replace: !0 });
+  }, jt = (t) => {
+    const a = x(t);
+    a && (pt((r) => r[t.id] ? r : { ...r, [t.id]: a }), $(t.id));
+  }, qt = (t) => {
+    x(t) && ($(null), W(t.id));
   }, R = (t, a, r = 1) => {
-    w({
+    E({
       kind: t.kind,
-      productId: t.id,
+      productId: K(t),
       ...a ? { productVariantId: a } : {},
       quantity: r
     });
-  }, Jt = (t) => {
-    const a = C(t), r = t.productVariants ?? [];
+  }, Gt = (t) => {
+    const a = x(t), r = t.productVariants ?? [];
     if (a && r.length <= 1) {
       R(t, a);
       return;
     }
-    Ht(t);
-  }, Xt = (t) => {
-    const a = t.productVariants ?? [], r = J(t);
+    qt(t);
+  }, Wt = (t) => {
+    const a = t.productVariants ?? [], r = G(t);
     if (r) {
       if (a.length > 1) {
-        Yt(t);
+        jt(t);
         return;
       }
       R(t, r);
     }
-  }, Zt = (t) => {
-    const a = J(t);
+  }, Qt = (t) => {
+    const a = G(t);
     a && (R(t, a), $((r) => r === t.id ? null : r));
   };
   return /* @__PURE__ */ c("div", { className: "mx-auto max-w-7xl px-4 py-8 sm:px-6", children: [
     /* @__PURE__ */ c("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ i(Ne, { currentStep: "booking", bookingPath: qt, checkoutPath: H, checkoutEnabled: u > 0 }),
+      /* @__PURE__ */ i(Se, { currentStep: "booking", bookingPath: zt, checkoutPath: q, checkoutEnabled: I > 0 }),
       /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ c(it, { to: Wt, className: "inline-flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-slate-950", children: [
-          /* @__PURE__ */ i(se, { className: "h-4 w-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ c(Q, { to: Et, className: "inline-flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-slate-950", children: [
+          /* @__PURE__ */ i(ne, { className: "h-4 w-4", "aria-hidden": "true" }),
           /* @__PURE__ */ i("span", { children: e("back_to_home") })
         ] }),
-        /* @__PURE__ */ i(it, { to: H, className: ct(u > 0 ? "inline-flex" : "hidden"), children: /* @__PURE__ */ c(E, { size: "sm", className: "gap-2", children: [
-          /* @__PURE__ */ i(le, { className: "h-4 w-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ i(Q, { to: q, className: tt(I > 0 ? "inline-flex" : "hidden"), children: /* @__PURE__ */ c(F, { size: "sm", className: "gap-2", children: [
+          /* @__PURE__ */ i(re, { className: "h-4 w-4", "aria-hidden": "true" }),
           /* @__PURE__ */ i("span", { children: e("checkout_button") })
         ] }) })
       ] }),
       /* @__PURE__ */ c("div", { className: "grid gap-6 lg:grid-cols-12", children: [
         /* @__PURE__ */ i("div", { className: "lg:col-span-8", children: /* @__PURE__ */ c("div", { className: "space-y-6", children: [
           /* @__PURE__ */ c("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ i(rt, { stepNumber: 1, title: e("booking_summary_title") }),
+            /* @__PURE__ */ i(J, { stepNumber: 1, title: e("booking_summary_title") }),
             /* @__PURE__ */ i(
-              Ce,
+              ke,
               {
-                ...jt,
+                ...Kt,
                 className: "gap-3",
                 labelClassName: "text-xs font-medium text-slate-700",
                 inputClassName: "h-10"
               }
             ),
             /* @__PURE__ */ i(
-              Ae,
+              Ie,
               {
-                value: s.fulfillment,
-                onValueChange: (t) => y({ fulfillment: t }),
-                pickupAddress: zt,
-                deliveryEnabled: B,
-                deliveryDisabledReason: Et,
-                startAddress: s.start_address,
-                onStartAddressChange: (t) => y({ start_address: t }),
-                endAddress: s.end_address,
-                onEndAddressChange: (t) => y({ end_address: t }),
+                value: l.fulfillment,
+                onValueChange: (t) => S({ fulfillment: t }),
+                pickupAddress: $t,
+                deliveryEnabled: L,
+                deliveryDisabledReason: Lt,
+                startAddress: l.start_address,
+                onStartAddressChange: (t) => S({ start_address: t }),
+                endAddress: l.end_address,
+                onEndAddressChange: (t) => S({ end_address: t }),
                 testIdPrefix: "storefront-booking-fulfillment"
               }
             )
           ] }),
           /* @__PURE__ */ c("div", { id: "booking-products", className: "space-y-2 scroll-mt-32", children: [
-            /* @__PURE__ */ i(rt, { stepNumber: 2, title: e("products_title") }),
+            /* @__PURE__ */ i(J, { stepNumber: 2, title: e("products_title") }),
             /* @__PURE__ */ i("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ i("span", { children: e("products_description") }) })
           ] }),
-          /* @__PURE__ */ i("div", { className: "grid gap-4 md:grid-cols-2", children: L.map((t) => {
-            const a = lt(t, x), r = K(a), Z = `/${o ?? ""}/products/${t.slug}`, F = !!C(t) || ht(t), et = ft ? e("availability_checking") : dt(e, a, r);
+          /* @__PURE__ */ i("div", { className: "grid gap-4 md:grid-cols-2", children: nt.map((t) => {
+            const a = `/${o ?? ""}/products/${t.slug}`, g = !!x(t) || ot(t);
             return /* @__PURE__ */ i(
-              Ie,
+              xe,
               {
                 bike: t,
-                detailsPath: Z,
-                productDetailsLinkState: St,
+                detailsPath: a,
+                productDetailsLinkState: ut,
                 actionLabelKey: "add_to_cart",
-                onAction: () => Jt(t),
-                actionDisabled: !F,
-                availabilityLabel: et,
+                onAction: () => Gt(t),
+                actionDisabled: !g,
                 fallbackLanguage: m,
+                variant: "booking",
                 testId: `storefront-booking-bike-card-${t.id}`.toLowerCase()
               },
               t.id
             );
           }) }),
           /* @__PURE__ */ c("div", { className: "space-y-2 pt-4", children: [
-            /* @__PURE__ */ i(rt, { stepNumber: 3, title: e("accessories_title") }),
+            /* @__PURE__ */ i(J, { stepNumber: 3, title: e("accessories_title") }),
             /* @__PURE__ */ i("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ i("span", { children: e("accessories_description") }) })
           ] }),
-          /* @__PURE__ */ i("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: f.map((t) => {
-            const a = nt(t.name, n.language, m), r = nt(t.description, n.language, m), Z = nt(t.warning, n.language, m), tt = typeof t.images?.[0] == "string" ? t.images[0].trim() : "", F = xe(t.primaryImageStyle), et = `/${o ?? ""}/products/${t.slug}`, te = C(t), Nt = J(t), Ct = lt(t, x), at = K(Ct), ee = !!te || ht(t), ae = ft ? e("availability_checking") : dt(e, Ct, at);
+          /* @__PURE__ */ i("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: N.map((t) => {
+            const a = H(t.name, n.language, m), r = H(t.description, n.language, m), g = H(t.warning, n.language, m), gt = typeof t.images?.[0] == "string" ? t.images[0].trim() : "", ht = ye(t.primaryImageStyle), Yt = `/${o ?? ""}/products/${t.slug}`, Ht = x(t), bt = G(t), Jt = Pt(t, P), Xt = Y(Jt) === "OUT_OF_STOCK", Zt = !!Ht || ot(t);
             return /* @__PURE__ */ i(
-              pe,
+              ce,
               {
-                className: "border-slate-200 bg-white shadow-sm",
-                children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-2 p-3", children: [
-                  /* @__PURE__ */ i(
+                className: "h-full border-slate-200 bg-white shadow-sm",
+                children: /* @__PURE__ */ c("div", { className: "flex h-full flex-col gap-2 p-3", children: [
+                  /* @__PURE__ */ c(
                     "div",
                     {
-                      className: ct("relative aspect-[1618/1000] overflow-hidden rounded-xl", F.className),
-                      style: F.style,
-                      children: tt ? /* @__PURE__ */ i("img", { src: tt, alt: a, className: "absolute inset-0 h-full w-full object-contain p-1", loading: "lazy" }) : /* @__PURE__ */ i("div", { className: "absolute inset-0 flex items-center justify-center text-slate-400", children: /* @__PURE__ */ i(de, { className: "h-8 w-8", "aria-hidden": "true" }) })
+                      className: tt("relative aspect-[1618/1000] overflow-hidden rounded-xl", ht.className),
+                      style: ht.style,
+                      children: [
+                        gt ? /* @__PURE__ */ i("img", { src: gt, alt: a, className: "absolute inset-0 h-full w-full object-contain p-1", loading: "lazy" }) : /* @__PURE__ */ i("div", { className: "absolute inset-0 flex items-center justify-center text-slate-400", children: /* @__PURE__ */ i(oe, { className: "h-8 w-8", "aria-hidden": "true" }) }),
+                        Xt ? /* @__PURE__ */ i(
+                          Ot,
+                          {
+                            variant: "destructive",
+                            className: "pointer-events-none absolute right-2 top-2 shadow-sm",
+                            children: /* @__PURE__ */ i("span", { children: e("availability_out_of_stock") })
+                          }
+                        ) : null
+                      ]
                     }
                   ),
                   /* @__PURE__ */ c("div", { className: "flex flex-1 flex-col gap-1", children: [
-                    /* @__PURE__ */ i("p", { className: "text-sm font-semibold text-slate-950", children: /* @__PURE__ */ i("span", { children: a }) }),
+                    /* @__PURE__ */ c("div", { className: "flex items-start justify-between gap-2", children: [
+                      /* @__PURE__ */ i("p", { className: "min-w-0 text-sm font-semibold text-slate-950", children: /* @__PURE__ */ i("span", { children: a }) }),
+                      /* @__PURE__ */ i(Ce, { prices: t.prices, className: "shrink-0" })
+                    ] }),
                     /* @__PURE__ */ i("p", { className: "line-clamp-2 text-xs text-slate-600", children: /* @__PURE__ */ i("span", { children: r }) }),
-                    /* @__PURE__ */ i(Te, { warning: Z, className: "mt-1" })
-                  ] }),
-                  /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2", children: [
-                    /* @__PURE__ */ i(Kt, { variant: at === "OUT_OF_STOCK" ? "destructive" : at === "LOW_STOCK" ? "outline" : "secondary", children: /* @__PURE__ */ i("span", { children: ae }) }),
-                    /* @__PURE__ */ i(we, { prices: t.prices })
+                    /* @__PURE__ */ i(Pe, { warning: g, className: "mt-1" })
                   ] }),
-                  t.productVariants?.length && t.productVariants.length > 1 && Gt === t.id && Nt ? /* @__PURE__ */ i(
-                    Oe,
+                  t.productVariants?.length && t.productVariants.length > 1 && Mt === t.id && bt ? /* @__PURE__ */ i(
+                    De,
                     {
                       product: t,
-                      selectedVariantId: Nt,
-                      onSelect: (v) => kt((ie) => ({ ...ie, [t.id]: v })),
-                      onConfirm: () => Zt(t),
-                      onCancel: () => $((v) => v === t.id ? null : v),
-                      getVariantAvailabilityLabel: (v) => bt(t, v),
-                      isVariantOutOfCapacity: (v) => gt(t, v)
+                      selectedVariantId: bt,
+                      onSelect: (_) => pt((te) => ({ ...te, [t.id]: _ })),
+                      onConfirm: () => Qt(t),
+                      onCancel: () => $((_) => _ === t.id ? null : _),
+                      getVariantAvailabilityLabel: (_) => st(t, _),
+                      isVariantOutOfCapacity: (_) => rt(t, _)
                     }
                   ) : null,
-                  /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ c("div", { className: "mt-auto flex items-center gap-2", children: [
                     /* @__PURE__ */ i(
-                      it,
+                      Q,
                       {
-                        to: et,
-                        state: St,
+                        to: Yt,
+                        state: ut,
                         className: "text-xs font-medium text-slate-700 hover:text-slate-950",
                         children: /* @__PURE__ */ i("span", { children: e("product_details_link") })
                       }
                     ),
                     /* @__PURE__ */ c(
-                      E,
+                      F,
                       {
                         type: "button",
                         size: "sm",
                         className: "ml-auto rounded-full gap-2",
-                        onClick: () => Xt(t),
-                        disabled: !ee,
+                        onClick: () => Wt(t),
+                        disabled: !Zt,
                         children: [
                           /* @__PURE__ */ i("span", { children: e("add_to_cart") }),
-                          /* @__PURE__ */ i($t, { className: "h-4 w-4", "aria-hidden": "true" })
+                          /* @__PURE__ */ i(At, { className: "h-4 w-4", "aria-hidden": "true" })
                         ]
                       }
                     )
@@ -493,35 +494,35 @@ function ua() {
           }) })
         ] }) }),
         /* @__PURE__ */ i("div", { className: "lg:col-span-4", children: /* @__PURE__ */ i(
-          Ve,
+          Ne,
           {
-            lines: yt.lines,
-            itemCount: u,
-            totalPerDayMinor: yt.totalPerDayMinor,
-            checkoutPath: H,
+            lines: mt.lines,
+            itemCount: I,
+            totalPerDayMinor: mt.totalPerDayMinor,
+            checkoutPath: q,
             showCheckoutAction: !0,
             showClearAction: !0,
             editable: !0,
             stickyTopClassName: "top-32",
-            onQuantityChange: T,
-            onRemove: M,
-            onClear: z
+            onQuantityChange: D,
+            onRemove: z,
+            onClear: O
           }
         ) })
       ] })
     ] }),
     /* @__PURE__ */ i(
-      Pe,
+      Ve,
       {
-        open: !!_,
-        product: _,
+        open: !!b,
+        product: b,
         onOpenChange: (t) => {
-          t || X(null);
+          t || W(null);
         },
-        getVariantAvailabilityLabel: (t) => _ ? bt(_, t) : null,
-        isVariantOutOfCapacity: (t) => _ ? gt(_, t) : !1,
+        getVariantAvailabilityLabel: (t) => b ? st(b, t) : null,
+        isVariantOutOfCapacity: (t) => b ? rt(b, t) : !1,
         onAddVariant: (t, a) => {
-          _ && (R(_, t, a), X(null));
+          b && (R(b, t, a), W(null));
         }
       }
     )