@loczer/storefront-sdk 0.155.0 → 0.157.0

package/dist/components/BookingPeriodSelector/components/BookingEndTimeField.js

@@ -1,38 +1,39 @@
-import { jsxs as M, Fragment as P, jsx as r } from "react/jsx-runtime";
-import { useRef as V, useState as H, useEffect as T } from "react";
-import { cn as h, HourPickerField as U } from "@rpcbase/ui";
-import { useMorphingModalWizardOverlayLayer as A } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-D7hc-dDP.js";
-import { Label as j } from "../../../ui/label.js";
-import { useBookingPeriod as z } from "../BookingPeriodContext.js";
-import { BookingPeriodFieldErrorMessage as K } from "./BookingPeriodFieldErrorMessage.js";
-import { ModalHourPickerField as W } from "./internal/ModalHourPickerField.js";
-const v = (n, o, d) => new Intl.NumberFormat(o, {
+import { jsxs as N, Fragment as V, jsx as r } from "react/jsx-runtime";
+import { useRef as H, useState as U, useEffect as T } from "react";
+import { cn as h, HourPickerField as A } from "@rpcbase/ui";
+import { useMorphingModalWizardOverlayLayer as j } from "../../../chunks/ui/dist/MorphingModalWizard-D7hc-dDP.js";
+import { Label as z } from "../../../ui/label.js";
+import { useBookingPeriod as K } from "../BookingPeriodContext.js";
+import { BookingPeriodFieldErrorMessage as W } from "./BookingPeriodFieldErrorMessage.js";
+import { ModalHourPickerField as $ } from "./internal/ModalHourPickerField.js";
+const v = (t, o, d) => new Intl.NumberFormat(o, {
   style: "currency",
   currency: d,
   minimumFractionDigits: 0,
   maximumFractionDigits: 0
-}).format(n / 100), _ = () => {
+}).format(t / 100), ee = () => {
   const {
-    labels: n,
+    labels: t,
     localeCode: o,
     currencyCode: d,
-    endTime: t,
+    endTime: n,
     selectEndTime: m,
     availableEndTimeSlots: I,
     isEndTimeSelectOpen: i,
     setIsEndTimeSelectOpen: y,
-    labelClassName: N,
+    labelClassName: S,
     inputClassName: E,
+    buttonClassName: k,
     errors: c,
-    isHydrated: k,
+    isHydrated: C,
     startMinutesValue: F,
-    isSameDaySelection: S,
-    isEndToday: L,
-    earliestMinutesForToday: C
-  } = z(), p = I.map((e) => {
-    const u = !!S && F != null && e.startMinutes <= F, l = L && C != null && e.startMinutes < C, f = e.isDisabled || u || l, D = e.disabledReason === "closed" ? n.timeSlotClosedLabel ?? "Closed" : e.disabledReason, b = e.isExtra && e.extraAmount != null ? n.timeSlotExtraFee?.({
+    isSameDaySelection: L,
+    isEndToday: O,
+    earliestMinutesForToday: x
+  } = K(), p = I.map((e) => {
+    const u = !!L && F != null && e.startMinutes <= F, l = O && x != null && e.startMinutes < x, f = e.isDisabled || u || l, M = e.disabledReason === "closed" ? t.timeSlotClosedLabel ?? "Closed" : e.disabledReason, b = e.isExtra && e.extraAmount != null ? t.timeSlotExtraFee?.({
       amount: v(e.extraAmount, o, d)
-    }) ?? `Extra fee: ${v(e.extraAmount, o, d)}` : null, g = e.isDisabled && D ? D : null, w = b && g ? /* @__PURE__ */ M(P, { children: [
+    }) ?? `Extra fee: ${v(e.extraAmount, o, d)}` : null, g = e.isDisabled && M ? M : null, P = b && g ? /* @__PURE__ */ N(V, { children: [
       /* @__PURE__ */ r("span", { className: "block", children: b }),
       /* @__PURE__ */ r("span", { className: "block", children: g })
     ] }) : b ?? g ?? void 0;
@@ -40,34 +41,34 @@ const v = (n, o, d) => new Intl.NumberFormat(o, {
       value: e.value,
       label: e.label,
       disabled: f,
-      description: w
+      description: P
     };
-  }), a = p.find((e) => !e.disabled)?.value, s = V(t ?? a ?? null), [O, B] = H(!1), x = A(), R = !!x || !O;
+  }), a = p.find((e) => !e.disabled)?.value, s = H(n ?? a ?? null), [B, R] = U(!1), D = j(), w = !!D || !B;
   return T(() => {
-    B(!0);
+    R(!0);
   }, []), T(() => {
-    i || (s.current = t ?? a ?? null);
-  }, [t, a, i]), T(() => {
+    i || (s.current = n ?? a ?? null);
+  }, [n, a, i]), T(() => {
     const e = document.getElementById("end-time-picker");
     if (!(e instanceof HTMLInputElement))
       return;
     const u = (l) => {
       if (l.key !== "Enter" || !i) return;
       l.preventDefault(), l.stopPropagation();
-      const f = s.current ?? t ?? a;
+      const f = s.current ?? n ?? a;
       f && m(f);
     };
     return e.addEventListener("keydown", u, !0), () => {
       e.removeEventListener("keydown", u, !0);
     };
-  }, [t, a, i, m]), /* @__PURE__ */ M("div", { className: "group/form-item relative w-[150px]", children: [
-    /* @__PURE__ */ r(j, { htmlFor: "end-time-picker", className: h("mb-1 block text-sm font-medium", N), children: /* @__PURE__ */ r("span", { children: n.endTime }) }),
-    R ? /* @__PURE__ */ r(
-      W,
+  }, [n, a, i, m]), /* @__PURE__ */ N("div", { className: "group/form-item relative w-[150px]", children: [
+    /* @__PURE__ */ r(z, { htmlFor: "end-time-picker", className: h("mb-1 block text-sm font-medium", S), children: /* @__PURE__ */ r("span", { children: t.endTime }) }),
+    w ? /* @__PURE__ */ r(
+      $,
       {
         id: "end-time-picker",
-        placeholder: n.endTime,
-        value: t ?? null,
+        placeholder: t.endTime,
+        value: n ?? null,
         onValueUpdate: (e) => {
           e && (s.current = e);
         },
@@ -79,16 +80,16 @@ const v = (n, o, d) => new Intl.NumberFormat(o, {
         onOpenChange: y,
         triggerTestId: "end-time-trigger",
         contentTestId: "end-time-select-content",
-        isHydrated: k,
-        inputClassName: h(c.endTime && "border-destructive", E),
-        portalContainer: x
+        isHydrated: C,
+        inputClassName: h(c.endTime && "border-destructive", E, k),
+        portalContainer: D
       }
     ) : /* @__PURE__ */ r(
-      U,
+      A,
       {
         id: "end-time-picker",
-        placeholder: n.endTime,
-        value: t ?? null,
+        placeholder: t.endTime,
+        value: n ?? null,
         onValueUpdate: (e) => {
           e && (s.current = e);
         },
@@ -100,13 +101,13 @@ const v = (n, o, d) => new Intl.NumberFormat(o, {
         onOpenChange: y,
         triggerTestId: "end-time-trigger",
         contentTestId: "end-time-select-content",
-        isHydrated: k,
-        inputClassName: h(c.endTime && "border-destructive", E)
+        isHydrated: C,
+        inputClassName: h(c.endTime && "border-destructive", E, k)
       }
     ),
-    c.endTime && /* @__PURE__ */ r(K, { children: c.endTime })
+    c.endTime && /* @__PURE__ */ r(W, { children: c.endTime })
   ] });
 };
 export {
-  _ as BookingEndTimeField
+  ee as BookingEndTimeField
 };

package/dist/components/BookingPeriodSelector/components/BookingMobileDateDrawer.d.ts

@@ -0,0 +1,2 @@
+export declare const BookingMobileDateDrawer: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=BookingMobileDateDrawer.d.ts.map

package/dist/components/BookingPeriodSelector/components/BookingMobileDateDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BookingMobileDateDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/BookingPeriodSelector/components/BookingMobileDateDrawer.tsx"],"names":[],"mappings":"AAuFA,eAAO,MAAM,uBAAuB,sDAmTnC,CAAA"}

package/dist/components/BookingPeriodSelector/components/BookingMobileDateDrawer.js

@@ -0,0 +1,272 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { useState as z, useRef as R, useEffect as D } from "react";
+import { startOfMonth as s, differenceInCalendarDays as Z, isSameDay as w, endOfMonth as H, addMonths as V } from "date-fns";
+import { DayButton as ee } from "react-day-picker";
+import { cn as f } from "@rpcbase/ui";
+import { buttonVariants as te, Button as T } from "../../../ui/button.js";
+import { DayPicker as F } from "../../../ui/day-picker.js";
+import { Drawer as oe, DrawerContent as ne, DrawerHeader as ae, DrawerTitle as re } from "../../../ui/drawer.js";
+import { useBookingPeriod as le } from "../BookingPeriodContext.js";
+const se = ee, K = 1, P = f(
+  te({ variant: "outline" }),
+  "z-10 h-11 w-11 bg-background p-0 opacity-100 shadow-sm [&_svg]:size-5"
+), $ = {
+  months: "relative flex w-full flex-col",
+  month: "mobile-date-calendar-month w-full space-y-3",
+  month_caption: "flex h-11 items-center justify-center pt-0 relative",
+  caption_label: "mobile-date-calendar-caption text-base font-semibold",
+  nav: "absolute inset-x-0 top-0 flex items-center justify-between",
+  button_previous: P,
+  button_next: P,
+  month_grid: "w-full border-collapse space-y-1",
+  weekdays: "grid grid-cols-7",
+  weekday: "w-full rounded-md text-muted-foreground font-normal text-[0.8rem]",
+  week: "grid w-full grid-cols-7 gap-y-2",
+  day: "h-11 w-full overflow-visible p-0 font-normal aria-selected:opacity-100 rounded-md first:aria-selected:rounded-l-md last:aria-selected:rounded-r-md",
+  day_button: "relative inline-flex h-11 w-full items-center justify-center overflow-visible rounded-md p-0 text-base font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+}, I = (o) => `${o.getFullYear()}-${o.getMonth()}`, g = (o) => {
+  const [n = "0", a = "0"] = o.split("-");
+  return new Date(Number(n), Number(a), 1);
+}, Y = (o, n, a) => o ? w(o, H(o)) ? V(s(o), 1) : s(o) : s(n ?? a), A = (o) => {
+  if (!(!o || !w(o, H(o))))
+    return V(s(o), 1);
+}, we = () => {
+  const {
+    labels: o,
+    startDate: n,
+    endDate: a,
+    selectStartDate: q,
+    selectEndDate: b,
+    isStartDatePopoverOpen: N,
+    setIsStartDatePopoverOpen: M,
+    isEndDatePopoverOpen: C,
+    setIsEndDatePopoverOpen: E,
+    resetHoveredEndDate: L,
+    dateLocale: S,
+    isMobile: k,
+    withMobileDateDrawer: B,
+    minSelectableDate: i
+  } = le(), d = B && k && (N || C), l = C && !N ? "end" : "start", G = I(i), h = I(
+    Y(n, a, i)
+  ), [J, O] = z(
+    () => s(i)
+  ), [Q, p] = z(
+    () => g(h)
+  ), y = R(!0), v = R(!1), _ = n && (a ?? n) >= n ? Z(a ?? n, n) + 1 : null, j = a ?? n;
+  if (D(() => {
+    !d || l !== "start" || O(s(i));
+  }, [l, d, G]), D(() => {
+    !d || l !== "end" || p(g(h));
+  }, [l, h, d]), D(() => {
+    if (!d || typeof document > "u")
+      return;
+    const e = window.scrollY, { body: t, documentElement: u } = document, m = {
+      overflow: t.style.overflow,
+      position: t.style.position,
+      top: t.style.top,
+      width: t.style.width
+    }, X = u.style.overscrollBehavior;
+    return y.current = !0, t.style.overflow = "hidden", t.style.position = "fixed", t.style.top = `-${e}px`, t.style.width = "100%", u.style.overscrollBehavior = "none", () => {
+      t.style.overflow = m.overflow, t.style.position = m.position, t.style.top = m.top, t.style.width = m.width, u.style.overscrollBehavior = X, y.current && window.scrollTo(0, e);
+    };
+  }, [d]), !B || !k)
+    return null;
+  const x = (e) => {
+    if (e === "end") {
+      const t = A(n);
+      t && !a && !v.current ? (p(s(t)), b(t, {
+        close: !1,
+        commit: !1
+      })) : p(g(h));
+    }
+    M(e === "start"), E(e === "end");
+  }, U = () => {
+    M(!1), E(!1), L();
+  }, W = (e) => {
+    const t = _ != null && j != null && !e.modifiers.disabled && w(e.day.date, j);
+    return /* @__PURE__ */ c(
+      se,
+      {
+        ...e,
+        className: f(e.className, "overflow-visible"),
+        children: [
+          e.children,
+          t ? /* @__PURE__ */ r(
+            "span",
+            {
+              className: "pointer-events-none absolute left-1/2 top-0 z-[70] -translate-x-1/2 -translate-y-[calc(100%+4px)] whitespace-nowrap rounded-md border bg-popover px-2 py-1 text-xs font-semibold text-primary shadow-md",
+              "data-testid": "mobile-end-date-duration-tooltip",
+              children: o.selectedDaysTooltip?.({ count: _ })
+            }
+          ) : null
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ r(
+    oe,
+    {
+      open: d,
+      lockScroll: !1,
+      onOpenChange: (e) => {
+        e || U();
+      },
+      children: /* @__PURE__ */ c(ne, { className: "overflow-hidden", children: [
+        /* @__PURE__ */ c(ae, { className: "border-b px-4 pb-3 pt-4 text-left", children: [
+          /* @__PURE__ */ r(re, { className: "sr-only", children: l === "start" ? o.startDate : o.endDate }),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: "relative grid grid-cols-2 rounded-md bg-muted p-1",
+              "aria-label": o.rentalPeriod,
+              children: [
+                /* @__PURE__ */ r(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: f(
+                      "absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded bg-background shadow-sm transition-transform duration-300 ease-out",
+                      l === "end" && "translate-x-full"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": l === "start",
+                    className: f(
+                      "relative z-10 h-9 rounded px-3 text-sm font-medium transition-colors",
+                      l === "start" ? "text-foreground" : "text-muted-foreground"
+                    ),
+                    onClick: () => x("start"),
+                    children: o.startDate
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": l === "end",
+                    className: f(
+                      "relative z-10 h-9 rounded px-3 text-sm font-medium transition-colors",
+                      l === "end" ? "text-foreground" : "text-muted-foreground"
+                    ),
+                    onClick: () => x("end"),
+                    children: o.endDate
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "overflow-hidden px-4 py-4", children: /* @__PURE__ */ c(
+          "div",
+          {
+            className: f(
+              "flex w-[200%] transition-transform duration-300 ease-out",
+              l === "end" && "-translate-x-1/2"
+            ),
+            children: [
+              /* @__PURE__ */ r("section", { className: "max-h-[calc(95dvh-9rem)] w-1/2 shrink-0 overflow-y-auto pr-4", children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-4", children: [
+                /* @__PURE__ */ r(
+                  F,
+                  {
+                    id: "start-date-calendar",
+                    mode: "single",
+                    locale: S,
+                    showOutsideDays: !1,
+                    numberOfMonths: K,
+                    required: !0,
+                    selected: n,
+                    month: J,
+                    onMonthChange: (e) => O(s(e)),
+                    disabled: (e) => e < i,
+                    onSelect: (e) => {
+                      const t = e ?? void 0, u = t != null && (n == null || !w(t, n)), m = A(t);
+                      u && (v.current = !1), p(
+                        Y(t, a, i)
+                      ), q(t, {
+                        close: !1,
+                        openEndDatePicker: !1
+                      }), u && b(m, {
+                        close: !1,
+                        commit: !1
+                      });
+                    },
+                    initialFocus: !0,
+                    "data-testid": "start-date-calendar",
+                    className: "w-full p-0",
+                    classNames: $
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  T,
+                  {
+                    type: "button",
+                    className: "h-12 w-full text-base font-semibold",
+                    disabled: !n,
+                    "data-testid": "start-date-drawer-next",
+                    onClick: () => {
+                      n && x("end");
+                    },
+                    children: o.dateDrawerNext
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ r("section", { className: "max-h-[calc(95dvh-9rem)] w-1/2 shrink-0 overflow-y-auto pl-4", children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-4", children: [
+                /* @__PURE__ */ r(
+                  F,
+                  {
+                    id: "end-date-calendar",
+                    mode: "range",
+                    locale: S,
+                    showOutsideDays: !1,
+                    numberOfMonths: K,
+                    selected: {
+                      from: n,
+                      to: a
+                    },
+                    month: Q,
+                    onMonthChange: (e) => p(s(e)),
+                    disabled: (e) => n && e < n || e < i,
+                    onSelect: (e, t) => {
+                      v.current = !0, b(t ?? void 0, {
+                        close: !1,
+                        commit: !1
+                      });
+                    },
+                    initialFocus: !0,
+                    "data-testid": "end-date-calendar",
+                    className: "w-full p-0",
+                    classNames: $,
+                    components: {
+                      DayButton: W
+                    }
+                  },
+                  h
+                ),
+                /* @__PURE__ */ r(
+                  T,
+                  {
+                    type: "button",
+                    className: "h-12 w-full text-base font-semibold",
+                    disabled: !a,
+                    "data-testid": "date-drawer-next",
+                    onClick: () => {
+                      a && (y.current = !1, b(a, { close: !0, commit: !0 }));
+                    },
+                    children: o.dateDrawerNext
+                  }
+                )
+              ] }) })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+};
+export {
+  we as BookingMobileDateDrawer
+};

package/dist/components/BookingPeriodSelector/components/BookingStartDateField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BookingStartDateField.d.ts","sourceRoot":"","sources":["../../../../src/components/BookingPeriodSelector/components/BookingStartDateField.tsx"],"names":[],"mappings":"AA2HA,eAAO,MAAM,qBAAqB,+CAuJjC,CAAA"}
+{"version":3,"file":"BookingStartDateField.d.ts","sourceRoot":"","sources":["../../../../src/components/BookingPeriodSelector/components/BookingStartDateField.tsx"],"names":[],"mappings":"AA4HA,eAAO,MAAM,qBAAqB,+CA2KjC,CAAA"}