@loczer/storefront-sdk 0.148.0 → 0.150.0

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

@@ -0,0 +1,112 @@
+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, {
+  style: "currency",
+  currency: d,
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0
+}).format(n / 100), _ = () => {
+  const {
+    labels: n,
+    localeCode: o,
+    currencyCode: d,
+    endTime: t,
+    selectEndTime: m,
+    availableEndTimeSlots: I,
+    isEndTimeSelectOpen: i,
+    setIsEndTimeSelectOpen: y,
+    labelClassName: N,
+    inputClassName: E,
+    errors: c,
+    isHydrated: k,
+    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?.({
+      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: [
+      /* @__PURE__ */ r("span", { className: "block", children: b }),
+      /* @__PURE__ */ r("span", { className: "block", children: g })
+    ] }) : b ?? g ?? void 0;
+    return {
+      value: e.value,
+      label: e.label,
+      disabled: f,
+      description: w
+    };
+  }), a = p.find((e) => !e.disabled)?.value, s = V(t ?? a ?? null), [O, B] = H(!1), x = A(), R = !!x || !O;
+  return T(() => {
+    B(!0);
+  }, []), T(() => {
+    i || (s.current = t ?? a ?? null);
+  }, [t, 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;
+      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,
+      {
+        id: "end-time-picker",
+        placeholder: n.endTime,
+        value: t ?? null,
+        onValueUpdate: (e) => {
+          e && (s.current = e);
+        },
+        onChange: (e) => {
+          e && (s.current = e, m(e));
+        },
+        options: p,
+        open: i,
+        onOpenChange: y,
+        triggerTestId: "end-time-trigger",
+        contentTestId: "end-time-select-content",
+        isHydrated: k,
+        inputClassName: h(c.endTime && "border-destructive", E),
+        portalContainer: x
+      }
+    ) : /* @__PURE__ */ r(
+      U,
+      {
+        id: "end-time-picker",
+        placeholder: n.endTime,
+        value: t ?? null,
+        onValueUpdate: (e) => {
+          e && (s.current = e);
+        },
+        onChange: (e) => {
+          e && (s.current = e, m(e));
+        },
+        options: p,
+        open: i,
+        onOpenChange: y,
+        triggerTestId: "end-time-trigger",
+        contentTestId: "end-time-select-content",
+        isHydrated: k,
+        inputClassName: h(c.endTime && "border-destructive", E)
+      }
+    ),
+    c.endTime && /* @__PURE__ */ r(K, { children: c.endTime })
+  ] });
+};
+export {
+  _ as BookingEndTimeField
+};

package/dist/components/BookingPeriodSelector/components/BookingPeriodFieldErrorMessage.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+function i({ children: t }) {
+  return /* @__PURE__ */ o("p", { className: "pointer-events-none absolute left-0 top-full z-[1] mt-1 max-w-full translate-y-1 break-words rounded-md bg-destructive px-2 py-1 text-sm text-destructive-foreground opacity-0 shadow-sm transition-[opacity,transform,visibility] duration-150 invisible group-hover/form-item:visible group-hover/form-item:translate-y-0 group-hover/form-item:opacity-100 group-focus-within/form-item:visible group-focus-within/form-item:translate-y-0 group-focus-within/form-item:opacity-100", children: /* @__PURE__ */ o("span", { children: t }) });
+}
+export {
+  i as BookingPeriodFieldErrorMessage
+};

package/dist/components/BookingPeriodSelector/components/BookingStartDateField.js

@@ -0,0 +1,156 @@
+import { jsxs as Y, jsx as u } from "react/jsx-runtime";
+import { useRef as x, useState as E, useEffect as F } from "react";
+import { cn as p, DayPicker as C, DayPickerField as I } from "@rpcbase/ui";
+import { useMorphingModalWizardOverlayLayer as L } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-D7hc-dDP.js";
+import { Label as H } from "../../../ui/label.js";
+import { useBookingPeriod as A } from "../BookingPeriodContext.js";
+import { BookingPeriodFieldErrorMessage as U } from "./BookingPeriodFieldErrorMessage.js";
+import { ModalDayPickerField as K } from "./internal/ModalDayPickerField.js";
+import { DayButton as R } from "../../../chunks/node_modules/react-day-picker/dist/esm/components/DayButton-D9KJeDKs.js";
+const y = (e) => {
+  const r = e.modifiers.disabled ? "cursor-not-allowed" : "cursor-pointer";
+  return /* @__PURE__ */ u(R, { ...e, className: p(e.className, r) });
+};
+y.displayName = "BookingStartDateDayButton";
+const f = (e) => new Date(e.getFullYear(), e.getMonth(), e.getDate()), _ = (e) => {
+  const r = e.trim();
+  if (!r)
+    return null;
+  const i = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(r);
+  if (i) {
+    const o = Number(i[1]), n = Number(i[2]), s = Number(i[3]), t = new Date(s, n - 1, o);
+    return Number.isNaN(t.getTime()) || t.getFullYear() !== s || t.getMonth() !== n - 1 || t.getDate() !== o ? null : f(t);
+  }
+  const l = /^(\d{2})\/(\d{2})\/(\d{2})$/.exec(r);
+  if (l) {
+    const o = Number(l[1]), n = Number(l[2]), s = 2e3 + Number(l[3]), t = new Date(s, n - 1, o);
+    return Number.isNaN(t.getTime()) || t.getFullYear() !== s || t.getMonth() !== n - 1 || t.getDate() !== o ? null : f(t);
+  }
+  const d = /^(\d{2})\/(\d{2})$/.exec(r);
+  if (d) {
+    const o = Number(d[1]), n = Number(d[2]), s = (/* @__PURE__ */ new Date()).getFullYear(), t = new Date(s, n - 1, o);
+    return Number.isNaN(t.getTime()) || t.getFullYear() !== s || t.getMonth() !== n - 1 || t.getDate() !== o ? null : f(t);
+  }
+  return null;
+}, $ = (e, r) => e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth() && e.getDate() === r.getDate(), j = (e) => {
+  if (typeof document > "u")
+    return e.current = !1, !1;
+  const r = document.activeElement, i = e.current && r instanceof HTMLElement && r.id === "start-date-picker";
+  return e.current = !1, i;
+}, q = () => {
+  if (typeof document > "u")
+    return !1;
+  const e = document.activeElement;
+  return e instanceof HTMLElement ? !!(document.getElementById("start-date-calendar")?.contains(e) || e.id === "start-date-picker") : !1;
+}, z = "You cannot select date in the past", re = () => {
+  const {
+    labels: e,
+    startDate: r,
+    selectStartDate: i,
+    isStartDatePopoverOpen: l,
+    setIsStartDatePopoverOpen: d,
+    labelClassName: o,
+    inputClassName: n,
+    errors: s,
+    dateLocale: t,
+    numberOfMonths: h,
+    isHydrated: k,
+    openDatePickerOnFocus: P
+  } = A(), D = x(!1), [S, c] = E(null), [v, B] = E(!1), N = L(), O = !!N || !v;
+  F(() => {
+    B(!0);
+  }, []), F(() => {
+    if (typeof document > "u")
+      return;
+    const a = document.getElementById("start-date-picker");
+    if (!(a instanceof HTMLInputElement))
+      return;
+    const b = (g) => {
+      if (g.key === "ArrowUp" || g.key === "ArrowDown") {
+        D.current = !0;
+        return;
+      }
+      if (D.current = !1, g.key !== "Enter") return;
+      const w = _(a.value);
+      if (!w) return;
+      const T = f(/* @__PURE__ */ new Date());
+      w < T ? c(z) : c(null);
+    };
+    return a.addEventListener("keydown", b, !0), () => {
+      a.removeEventListener("keydown", b, !0);
+    };
+  }, []);
+  const M = (a) => {
+    a && (c(null), !j(D) && (r && $(a, r) || i(a, { openTimePicker: q() })));
+  }, m = s.startDate ?? S;
+  return /* @__PURE__ */ Y("div", { className: "group/form-item relative flex-grow", children: [
+    /* @__PURE__ */ u(H, { htmlFor: "start-date-picker", className: p("mb-1 block text-sm font-medium", o), children: /* @__PURE__ */ u("span", { children: e.startDate }) }),
+    O ? /* @__PURE__ */ u(
+      K,
+      {
+        id: "start-date-picker",
+        value: r ?? null,
+        placeholder: e.pickStartDate,
+        triggerTestId: "start-date-trigger",
+        isHydrated: k,
+        open: l,
+        onOpenChange: d,
+        openOnFocus: P,
+        onValueUpdate: () => {
+          c(null);
+        },
+        onChange: M,
+        inputClassName: p(m && "border-destructive", n),
+        dayPickerComponent: C,
+        dayPickerProps: {
+          id: "start-date-calendar",
+          locale: t,
+          showOutsideDays: !1,
+          numberOfMonths: h,
+          required: !0,
+          components: {
+            DayButton: y
+          },
+          disabled: (a) => a < new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)),
+          initialFocus: !0,
+          "data-testid": "start-date-calendar"
+        },
+        portalContainer: N
+      }
+    ) : /* @__PURE__ */ u(
+      I,
+      {
+        id: "start-date-picker",
+        value: r ?? null,
+        placeholder: e.pickStartDate,
+        triggerTestId: "start-date-trigger",
+        isHydrated: k,
+        open: l,
+        onOpenChange: d,
+        onValueUpdate: () => {
+          c(null);
+        },
+        onChange: M,
+        inputClassName: p(m && "border-destructive", n),
+        dayPickerComponent: C,
+        dayPickerProps: {
+          id: "start-date-calendar",
+          locale: t,
+          showOutsideDays: !1,
+          numberOfMonths: h,
+          required: !0,
+          components: {
+            DayButton: y
+          },
+          disabled: (a) => a < new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)),
+          initialFocus: !0,
+          "data-testid": "start-date-calendar"
+        }
+      }
+    ),
+    m && /* @__PURE__ */ u(U, { children: m })
+  ] });
+};
+export {
+  re as BookingStartDateField
+};

package/dist/components/BookingPeriodSelector/components/BookingStartTimeField.js

@@ -0,0 +1,130 @@
+import { jsxs as v, Fragment as H, jsx as a } from "react/jsx-runtime";
+import { useRef as O, useState as R, useEffect as b } from "react";
+import { cn as y, HourPickerField as w } from "@rpcbase/ui";
+import { useMorphingModalWizardOverlayLayer as P } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-D7hc-dDP.js";
+import { Label as A } from "../../../ui/label.js";
+import { useBookingPeriod as U } from "../BookingPeriodContext.js";
+import { BookingPeriodFieldErrorMessage as V } from "./BookingPeriodFieldErrorMessage.js";
+import { ModalHourPickerField as j } from "./internal/ModalHourPickerField.js";
+const x = (n, c, d) => new Intl.NumberFormat(c, {
+  style: "currency",
+  currency: d,
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0
+}).format(n / 100), X = () => {
+  const {
+    labels: n,
+    localeCode: c,
+    currencyCode: d,
+    startTime: i,
+    selectStartTime: u,
+    startTimeSlots: L,
+    isStartTimeSelectOpen: o,
+    setIsStartTimeSelectOpen: f,
+    labelClassName: M,
+    inputClassName: E,
+    errors: p,
+    isHydrated: k,
+    isStartToday: S,
+    earliestMinutesForToday: F
+  } = U(), g = L.map((e) => {
+    const s = S && F != null && e.startMinutes < F, t = e.isDisabled || s, r = e.disabledReason === "closed" ? n.timeSlotClosedLabel ?? "Closed" : e.disabledReason, T = e.isExtra && e.extraAmount != null ? n.timeSlotExtraFee?.({
+      amount: x(e.extraAmount, c, d)
+    }) ?? `Extra fee: ${x(e.extraAmount, c, d)}` : null, h = e.isDisabled && r ? r : null, B = T && h ? /* @__PURE__ */ v(H, { children: [
+      /* @__PURE__ */ a("span", { className: "block", children: T }),
+      /* @__PURE__ */ a("span", { className: "block", children: h })
+    ] }) : T ?? h ?? void 0;
+    return {
+      value: e.value,
+      label: e.label,
+      disabled: t,
+      description: B
+    };
+  }), m = g.find((e) => !e.disabled)?.value, l = O(i ?? m ?? null), [I, N] = R(!1), C = P(), D = !!C || !I;
+  return b(() => {
+    N(!0);
+  }, []), b(() => {
+    o || (l.current = i ?? m ?? null);
+  }, [m, o, i]), b(() => {
+    if (typeof document > "u")
+      return;
+    const e = document.getElementById("start-time-picker");
+    if (!(e instanceof HTMLInputElement))
+      return;
+    const s = (t) => {
+      if (t.key !== "Enter" || !o) return;
+      t.preventDefault(), t.stopPropagation();
+      const r = l.current ?? i ?? m;
+      r && u(r);
+    };
+    return e.addEventListener("keydown", s, !0), () => {
+      e.removeEventListener("keydown", s, !0);
+    };
+  }, [m, o, u, i]), b(() => {
+    if (typeof document > "u")
+      return;
+    const e = document.getElementById("start-time-picker");
+    if (!(e instanceof HTMLInputElement))
+      return;
+    const s = () => {
+      requestAnimationFrame(() => {
+        const t = document.activeElement;
+        if (t instanceof HTMLElement && t.id === "start-time-picker")
+          return;
+        const r = document.querySelector("[data-testid='start-time-select-content']");
+        r instanceof HTMLElement && t instanceof Node && r.contains(t) || f(!1);
+      });
+    };
+    return e.addEventListener("blur", s, !0), () => {
+      e.removeEventListener("blur", s, !0);
+    };
+  }, [f]), /* @__PURE__ */ v("div", { className: "group/form-item relative w-[150px]", children: [
+    /* @__PURE__ */ a(A, { htmlFor: "start-time-picker", className: y("mb-1 block text-sm font-medium", M), children: /* @__PURE__ */ a("span", { children: n.startTime }) }),
+    D ? /* @__PURE__ */ a(
+      j,
+      {
+        id: "start-time-picker",
+        placeholder: n.startTime,
+        value: i ?? null,
+        onValueUpdate: (e) => {
+          e && (l.current = e);
+        },
+        onChange: (e) => {
+          e && (l.current = e, u(e));
+        },
+        options: g,
+        open: o,
+        onOpenChange: f,
+        triggerTestId: "start-time-trigger",
+        contentTestId: "start-time-select-content",
+        isHydrated: k,
+        inputClassName: y(p.startTime && "border-destructive", E),
+        portalContainer: C
+      }
+    ) : /* @__PURE__ */ a(
+      w,
+      {
+        id: "start-time-picker",
+        placeholder: n.startTime,
+        value: i ?? null,
+        onValueUpdate: (e) => {
+          e && (l.current = e);
+        },
+        onChange: (e) => {
+          e && (l.current = e, u(e));
+        },
+        options: g,
+        open: o,
+        onOpenChange: f,
+        triggerTestId: "start-time-trigger",
+        contentTestId: "start-time-select-content",
+        isHydrated: k,
+        inputClassName: y(p.startTime && "border-destructive", E)
+      }
+    ),
+    p.startTime && /* @__PURE__ */ a(V, { children: p.startTime })
+  ] });
+};
+export {
+  X as BookingStartTimeField
+};