create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/base/src/components/checkout/date-picker.tsx

@@ -1,309 +1,309 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { isCalendarDateAllowed, type DateAvailabilityConstraints } from 'brainerce';
-import { cn } from '@/core/lib/utils';
-
-/**
- * Custom calendar dropdown for checkout DATE custom fields — replaces the
- * native `<input type="date">`, whose OS/browser-rendered popup can't be
- * restyled with CSS in any browser (only the closed field can be).
- *
- * Lives next to `custom-fields-step.tsx` (not under `src/ui/`) and stays
- * dependency-free from any design pack for the same reason that file does:
- * canvas scaffolds wipe `src/ui` and ship no pack, but never touch
- * `src/components/`, so this must work without either.
- *
- * Day availability is delegated wholesale to the SDK's `isCalendarDateAllowed`
- * — min/max date, blocked weekdays AND blocked specific dates in one call, the
- * exact predicate the server re-runs on submit. Reimplementing any part of it
- * here is how a picker ends up offering a day the API then rejects with 400.
- */
-interface DatePickerProps {
-  id?: string;
-  value: string; // 'YYYY-MM-DD' or ''
-  onChange: (value: string) => void;
-  required?: boolean;
-  /** The field's `dateAvailability`, passed straight through from the API. */
-  availability?: DateAvailabilityConstraints | null;
-  /**
-   * Extra per-day gate ANDed with `isCalendarDateAllowed`. DATETIME fields use
-   * it to grey out days that pass the calendar rules but have no business-hours
-   * window — those are closed all day, and offering them is what produces a
-   * "no business hours are configured for this day" 400 after the shopper has
-   * already committed to a date.
-   */
-  isDateSelectable?: (dateYYYYMMDD: string) => boolean;
-  placeholder: string;
-  todayLabel: string;
-  clearLabel: string;
-  prevMonthLabel: string;
-  nextMonthLabel: string;
-  className?: string;
-}
-
-function pad(n: number): string {
-  return String(n).padStart(2, '0');
-}
-
-function toYMD(y: number, m: number, d: number): string {
-  return `${y}-${pad(m + 1)}-${pad(d)}`;
-}
-
-function parseYMD(value: string): { y: number; m: number; d: number } | null {
-  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
-  if (!match) return null;
-  return { y: Number(match[1]), m: Number(match[2]) - 1, d: Number(match[3]) };
-}
-
-export function DatePicker({
-  id,
-  value,
-  onChange,
-  required,
-  availability,
-  isDateSelectable,
-  placeholder,
-  todayLabel,
-  clearLabel,
-  prevMonthLabel,
-  nextMonthLabel,
-  className,
-}: DatePickerProps) {
-  const [open, setOpen] = useState(false);
-  const [locale, setLocale] = useState<string | undefined>(undefined);
-  const [rtl, setRtl] = useState(false);
-  const rootRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    setLocale(document.documentElement.lang || undefined);
-    setRtl(document.documentElement.dir === 'rtl');
-  }, []);
-
-  const selected = parseYMD(value);
-  const today = new Date();
-  const [view, setView] = useState(() => {
-    const initial = selected ?? { y: today.getFullYear(), m: today.getMonth() };
-    return { y: initial.y, m: initial.m };
-  });
-
-  useEffect(() => {
-    if (!open) return;
-    function onDocClick(e: MouseEvent) {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
-    }
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') {
-        setOpen(false);
-        triggerRef.current?.focus();
-      }
-    }
-    document.addEventListener('mousedown', onDocClick);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onDocClick);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
-
-  function isDisabled(y: number, m: number, d: number): boolean {
-    const ymd = toYMD(y, m, d);
-    if (!isCalendarDateAllowed(ymd, availability)) return true;
-    return isDateSelectable ? !isDateSelectable(ymd) : false;
-  }
-
-  function selectDay(y: number, m: number, d: number) {
-    if (isDisabled(y, m, d)) return;
-    onChange(toYMD(y, m, d));
-    setView({ y, m });
-    setOpen(false);
-    triggerRef.current?.focus();
-  }
-
-  function shiftMonth(delta: number) {
-    setView((v) => {
-      let m = v.m + delta;
-      let y = v.y;
-      if (m < 0) {
-        m = 11;
-        y -= 1;
-      } else if (m > 11) {
-        m = 0;
-        y += 1;
-      }
-      return { y, m };
-    });
-  }
-
-  const monthLabel = new Date(view.y, view.m, 1).toLocaleDateString(locale, {
-    month: 'long',
-    year: 'numeric',
-  });
-  const weekdayLabels = Array.from({ length: 7 }, (_, i) => {
-    // A Sunday-anchored week (2023-01-01 was a Sunday) formatted with the
-    // page's own locale — matches whatever week-start convention that
-    // locale's date formatting implies.
-    const d = new Date(2023, 0, 1 + i);
-    return d.toLocaleDateString(locale, { weekday: 'narrow' });
-  });
-
-  const firstOfMonth = new Date(view.y, view.m, 1);
-  const startWeekday = firstOfMonth.getDay();
-  const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
-  const daysInPrevMonth = new Date(view.y, view.m, 0).getDate();
-
-  const cells: Array<{ day: number; muted: boolean; y: number; m: number }> = [];
-  for (let i = startWeekday - 1; i >= 0; i--) {
-    const m = view.m === 0 ? 11 : view.m - 1;
-    const y = view.m === 0 ? view.y - 1 : view.y;
-    cells.push({ day: daysInPrevMonth - i, muted: true, y, m });
-  }
-  for (let d = 1; d <= daysInMonth; d++) {
-    cells.push({ day: d, muted: false, y: view.y, m: view.m });
-  }
-  while (cells.length % 7 !== 0) {
-    const idx = cells.length - startWeekday - daysInMonth + 1;
-    const m = view.m === 11 ? 0 : view.m + 1;
-    const y = view.m === 11 ? view.y + 1 : view.y;
-    cells.push({ day: idx, muted: true, y, m });
-  }
-
-  const displayValue = selected
-    ? new Date(selected.y, selected.m, selected.d).toLocaleDateString(locale)
-    : '';
-
-  return (
-    <div ref={rootRef} className={cn('relative', className)}>
-      <button
-        ref={triggerRef}
-        type="button"
-        id={id}
-        onClick={() => setOpen((o) => !o)}
-        aria-haspopup="dialog"
-        aria-expanded={open}
-        aria-required={required}
-        className={cn(
-          'bg-background focus-visible:ring-primary flex h-11 w-full items-center rounded-lg border px-3.5 pe-11 text-start text-sm focus-visible:outline-none focus-visible:ring-2',
-          displayValue ? 'text-foreground' : 'text-muted-foreground'
-        )}
-      >
-        {displayValue || placeholder}
-        <svg
-          aria-hidden="true"
-          width={18}
-          height={18}
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={1.75}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="text-muted-foreground pointer-events-none absolute end-3.5 top-1/2 -translate-y-1/2"
-        >
-          <rect x="3.5" y="5" width="17" height="15.5" rx="2.5" />
-          <path d="M3.5 9.5h17M8 3v3.5M16 3v3.5" />
-        </svg>
-      </button>
-
-      {open && (
-        <div
-          role="dialog"
-          aria-label={placeholder}
-          className="border-border bg-background absolute start-0 z-20 mt-2 w-[19rem] rounded-2xl border p-4 shadow-xl"
-        >
-          <div className="mb-3 flex items-center justify-between">
-            <div className="flex gap-1">
-              <button
-                type="button"
-                onClick={() => shiftMonth(rtl ? 1 : -1)}
-                aria-label={prevMonthLabel}
-                className="border-border hover:bg-secondary flex h-8 w-8 items-center justify-center rounded-full border text-sm"
-              >
-                {rtl ? '›' : '‹'}
-              </button>
-              <button
-                type="button"
-                onClick={() => shiftMonth(rtl ? -1 : 1)}
-                aria-label={nextMonthLabel}
-                className="border-border hover:bg-secondary flex h-8 w-8 items-center justify-center rounded-full border text-sm"
-              >
-                {rtl ? '‹' : '›'}
-              </button>
-            </div>
-            <div className="font-display text-sm font-medium capitalize">{monthLabel}</div>
-          </div>
-
-          <div className="mb-1 grid grid-cols-7">
-            {weekdayLabels.map((w, i) => (
-              <span
-                key={i}
-                className="text-muted-foreground py-1 text-center text-[0.7rem] font-semibold"
-              >
-                {w}
-              </span>
-            ))}
-          </div>
-
-          <div className="grid grid-cols-7 gap-0.5">
-            {cells.map((c, i) => {
-              const disabled = c.muted || isDisabled(c.y, c.m, c.day);
-              const isToday =
-                !c.muted &&
-                c.y === today.getFullYear() &&
-                c.m === today.getMonth() &&
-                c.day === today.getDate();
-              const isSelected =
-                selected &&
-                !c.muted &&
-                c.y === selected.y &&
-                c.m === selected.m &&
-                c.day === selected.d;
-              return (
-                <button
-                  key={i}
-                  type="button"
-                  disabled={disabled}
-                  onClick={() => selectDay(c.y, c.m, c.day)}
-                  className={cn(
-                    'flex aspect-square items-center justify-center rounded-full text-sm tabular-nums',
-                    c.muted && 'text-muted-foreground/40',
-                    disabled && !c.muted && 'text-muted-foreground/40 cursor-not-allowed',
-                    !disabled && !isSelected && 'hover:bg-secondary',
-                    isToday && !isSelected && 'ring-primary font-semibold ring-1',
-                    isSelected && 'bg-primary text-primary-foreground font-bold'
-                  )}
-                >
-                  {c.day}
-                </button>
-              );
-            })}
-          </div>
-
-          <div className="border-border mt-3 flex justify-between border-t pt-3">
-            <button
-              type="button"
-              onClick={() => {
-                const t = new Date();
-                selectDay(t.getFullYear(), t.getMonth(), t.getDate());
-              }}
-              className="text-primary text-sm font-semibold hover:underline"
-            >
-              {todayLabel}
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                onChange('');
-                setOpen(false);
-              }}
-              className="text-primary text-sm font-semibold hover:underline"
-            >
-              {clearLabel}
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { isCalendarDateAllowed, type DateAvailabilityConstraints } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+
+/**
+ * Custom calendar dropdown for checkout DATE custom fields — replaces the
+ * native `<input type="date">`, whose OS/browser-rendered popup can't be
+ * restyled with CSS in any browser (only the closed field can be).
+ *
+ * Lives next to `custom-fields-step.tsx` (not under `src/ui/`) and stays
+ * dependency-free from any design pack for the same reason that file does:
+ * canvas scaffolds wipe `src/ui` and ship no pack, but never touch
+ * `src/components/`, so this must work without either.
+ *
+ * Day availability is delegated wholesale to the SDK's `isCalendarDateAllowed`
+ * — min/max date, blocked weekdays AND blocked specific dates in one call, the
+ * exact predicate the server re-runs on submit. Reimplementing any part of it
+ * here is how a picker ends up offering a day the API then rejects with 400.
+ */
+interface DatePickerProps {
+  id?: string;
+  value: string; // 'YYYY-MM-DD' or ''
+  onChange: (value: string) => void;
+  required?: boolean;
+  /** The field's `dateAvailability`, passed straight through from the API. */
+  availability?: DateAvailabilityConstraints | null;
+  /**
+   * Extra per-day gate ANDed with `isCalendarDateAllowed`. DATETIME fields use
+   * it to grey out days that pass the calendar rules but have no business-hours
+   * window — those are closed all day, and offering them is what produces a
+   * "no business hours are configured for this day" 400 after the shopper has
+   * already committed to a date.
+   */
+  isDateSelectable?: (dateYYYYMMDD: string) => boolean;
+  placeholder: string;
+  todayLabel: string;
+  clearLabel: string;
+  prevMonthLabel: string;
+  nextMonthLabel: string;
+  className?: string;
+}
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+function toYMD(y: number, m: number, d: number): string {
+  return `${y}-${pad(m + 1)}-${pad(d)}`;
+}
+
+function parseYMD(value: string): { y: number; m: number; d: number } | null {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) return null;
+  return { y: Number(match[1]), m: Number(match[2]) - 1, d: Number(match[3]) };
+}
+
+export function DatePicker({
+  id,
+  value,
+  onChange,
+  required,
+  availability,
+  isDateSelectable,
+  placeholder,
+  todayLabel,
+  clearLabel,
+  prevMonthLabel,
+  nextMonthLabel,
+  className,
+}: DatePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [locale, setLocale] = useState<string | undefined>(undefined);
+  const [rtl, setRtl] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    setLocale(document.documentElement.lang || undefined);
+    setRtl(document.documentElement.dir === 'rtl');
+  }, []);
+
+  const selected = parseYMD(value);
+  const today = new Date();
+  const [view, setView] = useState(() => {
+    const initial = selected ?? { y: today.getFullYear(), m: today.getMonth() };
+    return { y: initial.y, m: initial.m };
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    function onDocClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    }
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  function isDisabled(y: number, m: number, d: number): boolean {
+    const ymd = toYMD(y, m, d);
+    if (!isCalendarDateAllowed(ymd, availability)) return true;
+    return isDateSelectable ? !isDateSelectable(ymd) : false;
+  }
+
+  function selectDay(y: number, m: number, d: number) {
+    if (isDisabled(y, m, d)) return;
+    onChange(toYMD(y, m, d));
+    setView({ y, m });
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+
+  function shiftMonth(delta: number) {
+    setView((v) => {
+      let m = v.m + delta;
+      let y = v.y;
+      if (m < 0) {
+        m = 11;
+        y -= 1;
+      } else if (m > 11) {
+        m = 0;
+        y += 1;
+      }
+      return { y, m };
+    });
+  }
+
+  const monthLabel = new Date(view.y, view.m, 1).toLocaleDateString(locale, {
+    month: 'long',
+    year: 'numeric',
+  });
+  const weekdayLabels = Array.from({ length: 7 }, (_, i) => {
+    // A Sunday-anchored week (2023-01-01 was a Sunday) formatted with the
+    // page's own locale — matches whatever week-start convention that
+    // locale's date formatting implies.
+    const d = new Date(2023, 0, 1 + i);
+    return d.toLocaleDateString(locale, { weekday: 'narrow' });
+  });
+
+  const firstOfMonth = new Date(view.y, view.m, 1);
+  const startWeekday = firstOfMonth.getDay();
+  const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
+  const daysInPrevMonth = new Date(view.y, view.m, 0).getDate();
+
+  const cells: Array<{ day: number; muted: boolean; y: number; m: number }> = [];
+  for (let i = startWeekday - 1; i >= 0; i--) {
+    const m = view.m === 0 ? 11 : view.m - 1;
+    const y = view.m === 0 ? view.y - 1 : view.y;
+    cells.push({ day: daysInPrevMonth - i, muted: true, y, m });
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push({ day: d, muted: false, y: view.y, m: view.m });
+  }
+  while (cells.length % 7 !== 0) {
+    const idx = cells.length - startWeekday - daysInMonth + 1;
+    const m = view.m === 11 ? 0 : view.m + 1;
+    const y = view.m === 11 ? view.y + 1 : view.y;
+    cells.push({ day: idx, muted: true, y, m });
+  }
+
+  const displayValue = selected
+    ? new Date(selected.y, selected.m, selected.d).toLocaleDateString(locale)
+    : '';
+
+  return (
+    <div ref={rootRef} className={cn('relative', className)}>
+      <button
+        ref={triggerRef}
+        type="button"
+        id={id}
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-required={required}
+        className={cn(
+          'bg-background focus-visible:ring-primary flex h-11 w-full items-center rounded-lg border px-3.5 pe-11 text-start text-sm focus-visible:outline-none focus-visible:ring-2',
+          displayValue ? 'text-foreground' : 'text-muted-foreground'
+        )}
+      >
+        {displayValue || placeholder}
+        <svg
+          aria-hidden="true"
+          width={18}
+          height={18}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={1.75}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-muted-foreground pointer-events-none absolute end-3.5 top-1/2 -translate-y-1/2"
+        >
+          <rect x="3.5" y="5" width="17" height="15.5" rx="2.5" />
+          <path d="M3.5 9.5h17M8 3v3.5M16 3v3.5" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          role="dialog"
+          aria-label={placeholder}
+          className="border-border bg-background absolute start-0 z-20 mt-2 w-[19rem] rounded-2xl border p-4 shadow-xl"
+        >
+          <div className="mb-3 flex items-center justify-between">
+            <div className="flex gap-1">
+              <button
+                type="button"
+                onClick={() => shiftMonth(rtl ? 1 : -1)}
+                aria-label={prevMonthLabel}
+                className="border-border hover:bg-secondary flex h-8 w-8 items-center justify-center rounded-full border text-sm"
+              >
+                {rtl ? '›' : '‹'}
+              </button>
+              <button
+                type="button"
+                onClick={() => shiftMonth(rtl ? -1 : 1)}
+                aria-label={nextMonthLabel}
+                className="border-border hover:bg-secondary flex h-8 w-8 items-center justify-center rounded-full border text-sm"
+              >
+                {rtl ? '‹' : '›'}
+              </button>
+            </div>
+            <div className="font-display text-sm font-medium capitalize">{monthLabel}</div>
+          </div>
+
+          <div className="mb-1 grid grid-cols-7">
+            {weekdayLabels.map((w, i) => (
+              <span
+                key={i}
+                className="text-muted-foreground py-1 text-center text-[0.7rem] font-semibold"
+              >
+                {w}
+              </span>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-7 gap-0.5">
+            {cells.map((c, i) => {
+              const disabled = c.muted || isDisabled(c.y, c.m, c.day);
+              const isToday =
+                !c.muted &&
+                c.y === today.getFullYear() &&
+                c.m === today.getMonth() &&
+                c.day === today.getDate();
+              const isSelected =
+                selected &&
+                !c.muted &&
+                c.y === selected.y &&
+                c.m === selected.m &&
+                c.day === selected.d;
+              return (
+                <button
+                  key={i}
+                  type="button"
+                  disabled={disabled}
+                  onClick={() => selectDay(c.y, c.m, c.day)}
+                  className={cn(
+                    'flex aspect-square items-center justify-center rounded-full text-sm tabular-nums',
+                    c.muted && 'text-muted-foreground/40',
+                    disabled && !c.muted && 'text-muted-foreground/40 cursor-not-allowed',
+                    !disabled && !isSelected && 'hover:bg-secondary',
+                    isToday && !isSelected && 'ring-primary font-semibold ring-1',
+                    isSelected && 'bg-primary text-primary-foreground font-bold'
+                  )}
+                >
+                  {c.day}
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="border-border mt-3 flex justify-between border-t pt-3">
+            <button
+              type="button"
+              onClick={() => {
+                const t = new Date();
+                selectDay(t.getFullYear(), t.getMonth(), t.getDate());
+              }}
+              className="text-primary text-sm font-semibold hover:underline"
+            >
+              {todayLabel}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                onChange('');
+                setOpen(false);
+              }}
+              className="text-primary text-sm font-semibold hover:underline"
+            >
+              {clearLabel}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}