@loczer/storefront-sdk 0.147.0 → 0.149.0

package/dist/pages/HomePage.js

@@ -0,0 +1,501 @@
+import { jsxs as r, jsx as e, Fragment as le } from "react/jsx-runtime";
+import { useMemo as m, useState as b, useRef as Ie, useEffect as He } from "react";
+import { useMediaQuery as je } from "@rpcbase/client";
+import { useParams as Ue, useLocation as Ve, useSearchParams as ze, useNavigate as Ye, Link as oe } from "@rpcbase/router";
+import { cn as h } from "@rpcbase/ui";
+import { Clock as Qe, MapPin as We, CheckCircle2 as Ke, ShieldCheck as Ge, Truck as Je, ArrowRight as j, Bike as de } from "lucide-react";
+import { useTranslation as Xe } from "react-i18next";
+import z from "../assets/playground-hero-preview.svg";
+import { getAvailabilityVariant as Ze } from "../lib/utils.js";
+import { getStorefrontPreset as et } from "../data/config.js";
+import { getLocalizedValue as A } from "../localization.js";
+import { AboutSection as tt } from "../components/AboutSection/index.js";
+import { BikeProductCard as at } from "../components/BikeProductCard/index.js";
+import { ContactSection as rt } from "../components/ContactSection/index.js";
+import { ProductPriceBadge as ce } from "../components/ProductPriceBadge/index.js";
+import { ProductWarningNotice as st } from "../components/ProductWarningNotice/index.js";
+import { TestimonialsSection as it } from "../components/TestimonialsSection/index.js";
+import { BookingPeriodProvider as nt } from "../components/BookingPeriodSelector/BookingPeriodContext.js";
+import { BookingStartDateField as lt } from "../components/BookingPeriodSelector/components/BookingStartDateField.js";
+import { BookingStartTimeField as ot } from "../components/BookingPeriodSelector/components/BookingStartTimeField.js";
+import { BookingEndDateField as dt } from "../components/BookingPeriodSelector/components/BookingEndDateField.js";
+import { BookingEndTimeField as ct } from "../components/BookingPeriodSelector/components/BookingEndTimeField.js";
+import { Badge as U } from "../ui/badge.js";
+import { Button as me } from "../ui/button.js";
+import { Card as he } from "../ui/card.js";
+import { resolveBookingSearchParamsFromSessionStorage as mt, createBookingPeriodConfigFromStorefrontConfiguration as ht, getDefaultBookingParamsForStorefrontConfiguration as pt, getBookingParamsFromSearch as gt, TIME_OPTIONS as ut, applyBookingParamsToSearch as ft, writeBookingSearchParamsToSessionStorage as xt } from "../lib/booking.js";
+import { resolveProductImageContainerStyle as pe } from "../lib/productImageStyles.js";
+import { usePlaygroundDevSettings as vt } from "../lib/playgroundDevSettings.js";
+import { useStorefront as bt, useStorefrontProducts as Nt } from "../StorefrontProvider.js";
+import { FulfillmentSection as ge } from "../components/FulfillmentSection/index.js";
+import { DeliveryAddressSelector as _t } from "../components/DeliveryAddressSelector/index.js";
+const ue = (a) => String(a).padStart(2, "0"), fe = "text-[11px] font-semibold uppercase tracking-wide text-slate-600", xe = "h-10", kt = 6, ve = 5, be = [15, 25, 42, 66, 33, 54], V = ["4 / 5", "1 / 1", "3 / 4", "5 / 4", "7 / 9", "4 / 3", "9 / 16", "6 / 7"], Ne = (a) => `${a.getFullYear()}-${ue(a.getMonth() + 1)}-${ue(a.getDate())}`, E = (a) => {
+  if (!a)
+    return;
+  const i = a.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (!i)
+    return;
+  const l = Number(i[1]), p = Number(i[2]), c = Number(i[3]), o = new Date(l, p - 1, c);
+  if (!(Number.isNaN(o.getTime()) || o.getFullYear() !== l || o.getMonth() !== p - 1 || o.getDate() !== c))
+    return o;
+}, yt = (a) => {
+  const i = a.length > 0 ? a : [z];
+  return Array.from({ length: kt }, (l, p) => Array.from({ length: ve }, (c, o) => {
+    const u = p * ve + o;
+    return {
+      aspectRatio: V[(u + p) % V.length] ?? V[0],
+      src: i[u % i.length] ?? z
+    };
+  }));
+};
+function aa() {
+  const { t: a, i18n: i } = Xe(), { storeSlug: l } = Ue(), p = Ve(), { storefrontConfiguration: c } = bt(), o = c.workspace?.workspaceLanguage, { bikes: u, accessories: Y } = Nt(), [M] = ze(), _e = Ye(), f = m(
+    () => mt(M, l),
+    [M, l]
+  ), x = m(() => et(l), [l]), ke = m(
+    () => ht(c),
+    [c]
+  ), d = m(
+    () => pt(c),
+    [c]
+  ), N = m(() => E(d.start_date), [d.start_date]), ye = m(
+    () => E(d.end_date) ?? N,
+    [d.end_date, N]
+  ), v = c.settings.fulfillmentModes.includes("delivery"), Q = c.settings.deliveryDisabledReason.trim(), T = m(
+    () => gt(f, d),
+    [d, f]
+  ), [w, W] = b(
+    () => T.fulfillment === "delivery" && v ? "delivery" : "pickup"
+  ), [R, we] = b(
+    () => E(f.get("start_date")) ?? N
+  ), [q, Se] = b(() => f.get("start_time") ?? d.start_time), [O, Ce] = b(() => {
+    const t = E(f.get("start_date")) ?? N;
+    return E(f.get("end_date")) ?? t ?? ye;
+  }), [L, Pe] = b(() => f.get("end_time") ?? d.end_time), [S, $] = b(() => T.start_address), [C, F] = b(() => T.end_address), I = Ie(null), De = m(() => u.slice(0, 4), [u]), { heroMode: K } = vt(), P = K === "vertical_marquee_hero", _ = K === "booking_bar_overlay_hero" || P, G = je("(min-width: 1024px)"), J = m(
+    () => ut.map((t) => ({ value: t, label: t })),
+    []
+  ), Ae = m(
+    () => ({
+      startDate: a("booking_start_date"),
+      pickStartDate: a("booking_start_date"),
+      startTime: a("booking_start_time"),
+      endDate: a("booking_end_date"),
+      pickEndDate: a("booking_end_date"),
+      endTime: a("booking_end_time"),
+      selectedDaysTooltip: ({ count: t }) => a("booking_selected_days_tooltip", { count: t })
+    }),
+    [i.language, a]
+  ), B = m(() => {
+    const n = R ?? (N ?? /* @__PURE__ */ new Date()), s = O ?? n;
+    return ft(new URLSearchParams(), {
+      fulfillment: w === "delivery" && v ? "delivery" : "pickup",
+      start_date: Ne(n),
+      start_time: q || d.start_time,
+      end_date: Ne(s),
+      end_time: L || d.end_time,
+      start_address: S,
+      end_address: C
+    });
+  }, [
+    d.end_time,
+    d.start_time,
+    N,
+    v,
+    C,
+    O,
+    L,
+    w,
+    S,
+    R,
+    q
+  ]), X = B.toString(), Ee = X ? `?${X}` : "";
+  He(() => {
+    xt(l, B);
+  }, [B, l]);
+  const Be = {
+    startDate: R,
+    onStartDateChange: we,
+    startTime: q,
+    onStartTimeChange: Se,
+    endDate: O,
+    onEndDateChange: Ce,
+    endTime: L,
+    onEndTimeChange: Pe,
+    onEndTimeCommit: () => {
+      I.current?.focus({ preventScroll: !0 });
+    },
+    startTimeOptions: J,
+    endTimeOptions: J,
+    bookingPeriodConfig: ke,
+    labels: Ae,
+    localeCode: i.language
+  }, H = () => {
+    const t = new URLSearchParams(M);
+    for (const [n, s] of B.entries())
+      t.set(n, s);
+    _e(`/${l ?? ""}/booking?${t.toString()}#booking-products`);
+  }, Z = (t) => `/${l ?? ""}/products/${t}`, ee = {
+    backTo: `${p.pathname}${p.search}${p.hash}`
+  }, te = /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ r(U, { variant: "secondary", children: [
+        /* @__PURE__ */ e(Qe, { className: "h-3 w-3", "aria-hidden": "true" }),
+        /* @__PURE__ */ e("span", { children: a("status_open") })
+      ] }),
+      /* @__PURE__ */ r(U, { variant: "outline", children: [
+        /* @__PURE__ */ e(We, { className: "h-3 w-3", "aria-hidden": "true" }),
+        /* @__PURE__ */ e("span", { children: x.address })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("h1", { className: "mt-4 text-3xl font-semibold tracking-tight sm:text-4xl", children: /* @__PURE__ */ e("span", { children: a("hero_title", { fallback: x.hero_title }) }) }),
+    /* @__PURE__ */ e("p", { className: "mt-3 text-sm text-slate-700 sm:text-base", children: /* @__PURE__ */ e("span", { children: a("hero_description", { fallback: x.hero_description }) }) }),
+    /* @__PURE__ */ e("div", { className: h("mt-6", !_ && "rounded-xl border bg-white/70 p-4"), children: /* @__PURE__ */ r("ul", { className: h("space-y-3", _ && "space-y-2"), children: [
+      !_ && /* @__PURE__ */ r("li", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ e(Ke, { className: "mt-0.5 h-5 w-5 text-slate-900", "aria-hidden": "true" }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ e("p", { className: "text-sm font-medium text-slate-950", children: /* @__PURE__ */ e("span", { children: a("feature_ready_in_minutes_title") }) }),
+          /* @__PURE__ */ e("p", { className: "text-xs text-slate-600", children: /* @__PURE__ */ e("span", { children: a("feature_ready_in_minutes_description") }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ r("li", { className: h("flex items-start gap-3", !_ && "border-t border-slate-200/70 pt-3"), children: [
+        /* @__PURE__ */ e(Ge, { className: "mt-0.5 h-5 w-5 text-slate-900", "aria-hidden": "true" }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ e("p", { className: "text-sm font-medium text-slate-950", children: /* @__PURE__ */ e("span", { children: a("feature_secure_payment_title") }) }),
+          /* @__PURE__ */ e("p", { className: "text-xs text-slate-600", children: /* @__PURE__ */ e("span", { children: a("feature_secure_payment_description") }) })
+        ] })
+      ] }),
+      v ? /* @__PURE__ */ r("li", { className: h("flex items-start gap-3", !_ && "border-t border-slate-200/70 pt-3"), children: [
+        /* @__PURE__ */ e(Je, { className: "mt-0.5 h-5 w-5 text-slate-900", "aria-hidden": "true" }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ e("p", { className: "text-sm font-medium text-slate-950", children: /* @__PURE__ */ e("span", { children: a("feature_delivery_title") }) }),
+          /* @__PURE__ */ e("p", { className: "text-xs text-slate-600", children: /* @__PURE__ */ e("span", { children: a("feature_delivery_description") }) })
+        ] })
+      ] }) : null
+    ] }) })
+  ] }), ae = ({
+    className: t,
+    showSubmitButton: n = !1,
+    submitButtonClassName: s
+  }) => /* @__PURE__ */ e(
+    nt,
+    {
+      ...Be,
+      labelClassName: fe,
+      inputClassName: xe,
+      children: /* @__PURE__ */ r("div", { className: t, children: [
+        /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e(lt, {}) }),
+        /* @__PURE__ */ e(ot, {}),
+        /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e(dt, {}) }),
+        /* @__PURE__ */ e(ct, {}),
+        n ? /* @__PURE__ */ r(me, { ref: I, className: h("gap-2", s), onClick: H, children: [
+          /* @__PURE__ */ e("span", { children: a("booking_submit") }),
+          /* @__PURE__ */ e(j, { className: "h-4 w-4", "aria-hidden": "true" })
+        ] }) : null
+      ] })
+    }
+  ), re = (t) => v ? /* @__PURE__ */ e(
+    _t,
+    {
+      open: w === "delivery",
+      className: "sm:min-h-[6.75rem]",
+      inputClassName: `${xe} bg-white`,
+      labelClassName: fe,
+      startAddress: S,
+      onStartAddressChange: $,
+      returnAddress: C,
+      onReturnAddressChange: F,
+      testIdPrefix: t
+    }
+  ) : null, Me = re("storefront-home-fulfillment-delivery-address"), Te = re("storefront-home-compact-fulfillment-delivery-address"), Re = /* @__PURE__ */ r(he, { className: "border-slate-200 bg-white/80 shadow-sm", children: [
+    /* @__PURE__ */ r("div", { className: "border-b border-slate-200 px-5 py-4", children: [
+      /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: a("booking_title") }) }),
+      /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-slate-600", children: /* @__PURE__ */ e("span", { children: a("booking_subtitle") }) })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "grid gap-4 px-5 py-5", children: [
+      /* @__PURE__ */ e(
+        ge,
+        {
+          value: w,
+          onValueChange: W,
+          pickupAddress: x.address,
+          deliveryEnabled: v,
+          deliveryDisabledReason: Q,
+          startAddress: S,
+          onStartAddressChange: $,
+          endAddress: C,
+          onEndAddressChange: F,
+          showDeliveryAddressSelector: !1,
+          testIdPrefix: "storefront-home-fulfillment"
+        }
+      ),
+      ae({
+        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"
+      }),
+      Me,
+      /* @__PURE__ */ e("p", { className: "text-xs text-slate-600", children: /* @__PURE__ */ e("span", { children: a("booking_minimum_duration", { hours: 4 }) }) }),
+      /* @__PURE__ */ r(me, { ref: I, className: "h-11 rounded-xl text-sm font-semibold gap-2", onClick: H, children: [
+        /* @__PURE__ */ e("span", { children: a("booking_submit") }),
+        /* @__PURE__ */ e(j, { className: "h-4 w-4", "aria-hidden": "true" })
+      ] })
+    ] })
+  ] }), se = /* @__PURE__ */ e(he, { className: "border-slate-200 bg-white/95 shadow-xl", children: /* @__PURE__ */ r("div", { className: "grid gap-3 px-4 py-4", children: [
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+      ge,
+      {
+        value: w,
+        onValueChange: W,
+        pickupAddress: x.address,
+        deliveryEnabled: v,
+        deliveryDisabledReason: Q,
+        startAddress: S,
+        onStartAddressChange: $,
+        endAddress: C,
+        onEndAddressChange: F,
+        showDeliveryAddressSelector: !1,
+        testIdPrefix: "storefront-home-compact-fulfillment"
+      }
+    ) }),
+    ae({
+      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"
+    }),
+    Te
+  ] }) }), qe = [...u, ...Y].flatMap((t) => Array.isArray(t.images) ? t.images : []).filter((t) => typeof t == "string" && t.trim().length > 0).map((t) => t.trim()).slice(0, 12), Oe = yt(qe), Le = P ? /* @__PURE__ */ e("style", { children: `
+      @keyframes storefront-hero-marquee-up {
+        0% { transform: translateY(0); }
+        100% { transform: translateY(calc(-50% - (var(--storefront-hero-marquee-gap) / 2))); }
+      }
+      @keyframes storefront-hero-marquee-down {
+        0% { transform: translateY(calc(-50% - (var(--storefront-hero-marquee-gap) / 2))); }
+        100% { transform: translateY(0); }
+      }
+      .storefront-hero-marquee-track {
+        animation: storefront-hero-marquee-up var(--storefront-hero-marquee-duration, 32s) linear infinite;
+        will-change: transform;
+      }
+      .storefront-hero-marquee-track-reverse {
+        animation-name: storefront-hero-marquee-down;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .storefront-hero-marquee-track,
+        .storefront-hero-marquee-track-reverse {
+          animation: none !important;
+          transform: none !important;
+        }
+      }
+    ` }) : null, ie = (t) => /* @__PURE__ */ e(
+    "div",
+    {
+      className: h("relative h-full min-h-[340px] overflow-hidden", t),
+      style: {
+        WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%)",
+        maskImage: "linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%)",
+        WebkitMaskRepeat: "no-repeat",
+        maskRepeat: "no-repeat",
+        WebkitMaskSize: "100% 100%",
+        maskSize: "100% 100%"
+      },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ e("div", { className: "absolute inset-0 grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6", children: Oe.map((n, s) => {
+        const k = be[s % be.length] ?? 32, y = [...n, ...n];
+        return /* @__PURE__ */ e(
+          "div",
+          {
+            className: h(
+              "relative min-h-0 overflow-hidden",
+              s === 2 && "hidden md:block",
+              s >= 3 && "hidden lg:block"
+            ),
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: h(
+                  "storefront-hero-marquee-track flex flex-col gap-[var(--storefront-hero-marquee-gap)]",
+                  s % 2 === 1 && "storefront-hero-marquee-track-reverse"
+                ),
+                style: {
+                  "--storefront-hero-marquee-duration": `${k}s`,
+                  "--storefront-hero-marquee-gap": "0.75rem"
+                },
+                children: y.map((g, D) => /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: "group relative overflow-hidden rounded-[1.35rem] border border-white/40 bg-transparent",
+                    style: { aspectRatio: g.aspectRatio },
+                    children: [
+                      /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-linear-to-b from-white/22 via-transparent to-transparent" }),
+                      /* @__PURE__ */ e(
+                        "img",
+                        {
+                          src: g.src,
+                          alt: "",
+                          className: "absolute inset-0 h-full w-full object-cover opacity-90 saturate-[1.05] transition-transform duration-700 group-hover:scale-[1.04]",
+                          loading: D < n.length ? "eager" : "lazy"
+                        }
+                      ),
+                      /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-linear-to-t from-slate-950/40 via-slate-950/10 to-white/10" })
+                    ]
+                  },
+                  `hero-marquee-tile-${s}-${D}`
+                ))
+              }
+            )
+          },
+          `hero-marquee-column-${s}`
+        );
+      }) })
+    }
+  ), $e = P ? /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 hidden lg:block", "aria-hidden": "true", children: /* @__PURE__ */ r("div", { className: "mx-auto grid h-full max-w-7xl grid-cols-12 gap-8 px-4 sm:px-6", children: [
+    /* @__PURE__ */ e("div", { className: "lg:col-span-5" }),
+    /* @__PURE__ */ e("div", { className: "lg:col-span-7", children: ie() })
+  ] }) }) : null, Fe = P ? /* @__PURE__ */ r(le, { children: [
+    /* @__PURE__ */ e("div", { className: "lg:hidden", children: ie() }),
+    /* @__PURE__ */ e("div", { className: "hidden min-h-[510px] lg:block", "aria-hidden": "true" })
+  ] }) : /* @__PURE__ */ r("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__ */ e(
+      "img",
+      {
+        src: z,
+        alt: "Bikes ready for reservation",
+        className: "absolute inset-0 h-full w-full object-cover"
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-linear-to-t from-slate-900/45 via-slate-900/15 to-transparent", "aria-hidden": "true" })
+  ] });
+  return /* @__PURE__ */ r(le, { children: [
+    /* @__PURE__ */ r("section", { className: "relative overflow-hidden border-b border-slate-200", children: [
+      /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-linear-to-b from-slate-50 to-white", "aria-hidden": "true" }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "absolute inset-0 opacity-[0.07]",
+          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"
+        }
+      ),
+      Le,
+      $e,
+      _ ? /* @__PURE__ */ r("div", { className: "relative mx-auto grid max-w-7xl gap-8 px-4 py-10 sm:px-6 lg:grid-cols-12 lg:py-14", children: [
+        /* @__PURE__ */ r("div", { className: "lg:col-span-5", children: [
+          te,
+          G ? /* @__PURE__ */ e("div", { className: "mt-7", children: /* @__PURE__ */ e("div", { className: "relative z-20 w-[calc(100%+24rem)] max-w-none", children: se }) }) : null
+        ] }),
+        /* @__PURE__ */ r("div", { className: h("lg:col-span-7", !P && "lg:pt-4"), children: [
+          Fe,
+          G ? null : /* @__PURE__ */ e("div", { className: "mt-4", children: se })
+        ] })
+      ] }) : /* @__PURE__ */ r("div", { className: "relative mx-auto grid max-w-7xl gap-8 px-4 py-10 sm:px-6 lg:grid-cols-12 lg:py-14", children: [
+        /* @__PURE__ */ e("div", { className: "lg:col-span-5", children: te }),
+        /* @__PURE__ */ e("div", { className: "lg:col-span-7", children: Re })
+      ] })
+    ] }),
+    /* @__PURE__ */ r("section", { id: "featured", className: "mx-auto max-w-7xl scroll-mt-16 px-4 py-10 sm:scroll-mt-20 sm:px-6", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ e("h2", { className: "text-xl font-semibold tracking-tight", children: /* @__PURE__ */ e("span", { children: a("featured_title") }) }),
+          /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: a("featured_description") }) })
+        ] }),
+        /* @__PURE__ */ r(
+          oe,
+          {
+            className: "hidden items-center gap-2 text-sm font-medium text-slate-700 hover:text-slate-950 sm:inline-flex",
+            to: `/${l ?? ""}/booking${Ee}`,
+            children: [
+              /* @__PURE__ */ e("span", { children: a("featured_view_all") }),
+              /* @__PURE__ */ e(j, { className: "h-4 w-4", "aria-hidden": "true" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: De.map((t) => {
+        const n = t.id, s = t.slug, k = A(t.name, i.language, o), y = A(t.description, i.language, o), g = typeof t.images?.[0] == "string" ? t.images[0].trim() : "", D = pe(t.primaryImageStyle), ne = Ze(t.availabilityStatus);
+        return /* @__PURE__ */ r(
+          "div",
+          {
+            className: "group flex h-full flex-col gap-3 rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-sm transition hover:border-slate-400",
+            children: [
+              /* @__PURE__ */ r(
+                oe,
+                {
+                  to: Z(s),
+                  state: ee,
+                  className: "flex flex-1 flex-col gap-3",
+                  children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: h("relative aspect-[1618/1000] overflow-hidden rounded-xl", D.className),
+                        style: D.style,
+                        children: g ? /* @__PURE__ */ e("img", { src: g, alt: k, className: "absolute inset-0 h-full w-full object-contain p-1", loading: "lazy" }) : /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center text-slate-400", children: /* @__PURE__ */ e(de, { className: "h-8 w-8", "aria-hidden": "true" }) })
+                      }
+                    ),
+                    /* @__PURE__ */ r("span", { className: "flex flex-1 flex-col gap-1", children: [
+                      /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-slate-950", children: k }),
+                      /* @__PURE__ */ e("span", { className: "line-clamp-2 text-xs text-slate-600", children: y })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r("span", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ e(U, { variant: ne.variant, children: /* @__PURE__ */ e("span", { children: a(ne.labelKey) }) }),
+                /* @__PURE__ */ e(ce, { prices: t.prices })
+              ] })
+            ]
+          },
+          n
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ e("section", { id: "products", className: "border-t bg-slate-50/60 scroll-mt-16 sm:scroll-mt-20", children: /* @__PURE__ */ r("div", { className: "mx-auto max-w-7xl px-4 py-10 sm:px-6", children: [
+      /* @__PURE__ */ e("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ e("h2", { className: "text-xl font-semibold tracking-tight", children: /* @__PURE__ */ e("span", { children: a("products_title") }) }),
+        /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: a("products_description") }) })
+      ] }) }),
+      /* @__PURE__ */ e("div", { className: "mt-6 grid gap-4 md:grid-cols-2", children: u.map((t) => /* @__PURE__ */ e(
+        at,
+        {
+          bike: t,
+          detailsPath: Z(t.slug),
+          productDetailsLinkState: ee,
+          fallbackLanguage: o,
+          onAction: H
+        },
+        t.id
+      )) })
+    ] }) }),
+    /* @__PURE__ */ r("section", { className: "mx-auto max-w-7xl px-4 py-10 sm:px-6", children: [
+      /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between", children: /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ e("h2", { className: "text-xl font-semibold tracking-tight", children: /* @__PURE__ */ e("span", { children: a("accessories_title") }) }),
+        /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: a("accessories_description") }) })
+      ] }) }),
+      /* @__PURE__ */ e("div", { className: "mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: Y.slice(0, 4).map((t) => {
+        const n = A(t.name, i.language, o), s = A(t.description, i.language, o), k = A(t.warning, i.language, o), y = typeof t.images?.[0] == "string" ? t.images[0].trim() : "", g = pe(t.primaryImageStyle);
+        return /* @__PURE__ */ r("div", { className: "flex h-full flex-col gap-3 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: h("relative aspect-[1618/1000] overflow-hidden rounded-xl", g.className),
+              style: g.style,
+              children: y ? /* @__PURE__ */ e("img", { src: y, alt: n, className: "absolute inset-0 h-full w-full object-contain p-1", loading: "lazy" }) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center text-slate-400", children: /* @__PURE__ */ e(de, { className: "h-8 w-8", "aria-hidden": "true" }) })
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "flex flex-1 flex-col gap-1", children: [
+            /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: n }) }),
+            /* @__PURE__ */ e("p", { className: "line-clamp-2 text-xs text-slate-600", children: /* @__PURE__ */ e("span", { children: s }) }),
+            /* @__PURE__ */ e(st, { warning: k, className: "mt-1" })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex items-center justify-between gap-2", children: /* @__PURE__ */ e(ce, { prices: t.prices }) })
+        ] }, t.id);
+      }) })
+    ] }),
+    /* @__PURE__ */ e(tt, { preset: x }),
+    /* @__PURE__ */ e(it, {}),
+    /* @__PURE__ */ e(rt, { preset: x, storeSlug: l ?? "" })
+  ] });
+}
+export {
+  aa as default
+};

package/dist/pages/NotFoundPage.d.ts

@@ -0,0 +1,2 @@
+export default function NotFoundPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NotFoundPage.d.ts.map

package/dist/pages/NotFoundPage.js

@@ -0,0 +1,28 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useParams as s, Link as n } from "@rpcbase/router";
+import { AlertTriangle as a, ArrowLeft as o } from "lucide-react";
+import { useTranslation as c } from "react-i18next";
+function f() {
+  const { t } = c(), { storeSlug: r } = s();
+  return /* @__PURE__ */ e("div", { className: "flex min-h-[60vh] items-center justify-center px-4 py-16", children: /* @__PURE__ */ i("div", { className: "max-w-xl space-y-6 text-center", children: [
+    /* @__PURE__ */ e("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10 text-destructive", children: /* @__PURE__ */ e(a, { className: "h-6 w-6", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ e("h1", { className: "text-2xl font-semibold tracking-tight", children: /* @__PURE__ */ e("span", { children: t("not_found_title") }) }),
+      /* @__PURE__ */ e("p", { className: "text-muted-foreground", children: /* @__PURE__ */ e("span", { children: t("not_found_description", { store: r }) }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ i(
+      n,
+      {
+        to: `/${r ?? ""}`,
+        className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        children: [
+          /* @__PURE__ */ e(o, { className: "h-4 w-4", "aria-hidden": "true" }),
+          /* @__PURE__ */ e("span", { children: t("back_to_home") })
+        ]
+      }
+    ) })
+  ] }) });
+}
+export {
+  f as default
+};

package/dist/pages/PaymentLinkPage.d.ts

@@ -0,0 +1,34 @@
+export declare const loader: ({ ctx, params }: import('@rpcbase/client').LoaderArgs) => Promise<{
+    storeSlug: string;
+    token: string;
+    session: null;
+    errorMessage: null;
+    errorKey: string;
+} | {
+    storeSlug: string;
+    token: string;
+    session: null;
+    errorMessage: string | null;
+    errorKey: null;
+} | {
+    storeSlug: string;
+    token: string;
+    session: {
+        token: string;
+        storeSlug: string;
+        saleId: string;
+        paymentId: string;
+        providerType: "stripe_connect_oauth" | "mollie_connect_oauth";
+        status: "pending" | "authorized" | "succeeded" | "failed" | "cancelled" | "refunded";
+        amountMinor: number;
+        currency: string;
+        reference: string;
+        expiresAt: string;
+        providerPaymentId?: string | undefined;
+        checkoutUrl?: string | undefined;
+    };
+    errorMessage: null;
+    errorKey: null;
+}>;
+export default function PaymentLinkPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PaymentLinkPage.d.ts.map