create-brainerce-store 1.67.0 → 1.71.0

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

@@ -22,10 +22,20 @@ import { DatePicker } from '@/components/checkout/date-picker';
  * Which times exist comes from the SDK, not from a list hardcoded here:
  * - `computeAvailableSlots` → discrete slot starts, when the field defines
  *   `slotDurationMinutes`. The submitted time must equal one of them exactly.
- * - `getBusinessHoursForDate` → the open/close window, when it doesn't. Slots
+ * - `getBusinessHoursForDate` → the open/close windows, when it doesn't. Slots
  *   being empty does NOT mean the day is closed; that distinction is why this
  *   component asks for the windows separately.
  *
+ * Three shapes the naive version of this component gets wrong:
+ * - A slot-based field whose slots have all been overtaken by `leadTimeMinutes`
+ *   returns `[]` on an OPEN day. Falling through to the free time input there
+ *   would accept any time and 400 on every one of them, so the two cases are
+ *   split on `slotDurationMinutes` rather than on the slot count.
+ * - A weekday may carry SEVERAL windows (mornings and evenings). One input
+ *   bounded by `windows[0]` would silently hide the second, so every window is
+ *   rendered.
+ * - The relative bounds need `timezone` passed through, or the SDK skips them.
+ *
  * Dependency-free from any design pack, same as `date-picker.tsx`.
  */
 interface DateTimePickerProps {
@@ -35,6 +45,8 @@ interface DateTimePickerProps {
   onChange: (value: string) => void;
   required?: boolean;
   availability?: DateAvailabilityConstraints | null;
+  /** The store's IANA timezone, from `getStoreInfo().timezone`. Never the browser's. */
+  timezone?: string;
   placeholder: string;
   todayLabel: string;
   clearLabel: string;
@@ -42,6 +54,10 @@ interface DateTimePickerProps {
   nextMonthLabel: string;
   timeLabel: string;
   closedLabel: string;
+  /** Shown when the day is open but every slot on it has already gone past. */
+  noTimesLabel: string;
+  /** Joins the two ends of a window when a day trades more than one. */
+  toLabel: string;
   className?: string;
 }
 
@@ -56,6 +72,7 @@ export function DateTimePicker({
   onChange,
   required,
   availability,
+  timezone,
   placeholder,
   todayLabel,
   clearLabel,
@@ -63,6 +80,8 @@ export function DateTimePicker({
   nextMonthLabel,
   timeLabel,
   closedLabel,
+  noTimesLabel,
+  toLabel,
   className,
 }: DateTimePickerProps) {
   const submitted = splitValue(value);
@@ -71,11 +90,21 @@ export function DateTimePicker({
   // satisfied by a half-filled answer.
   const [date, setDate] = useState(submitted.date);
 
-  const slots = date ? computeAvailableSlots(availability, date) : [];
-  const windows = date ? getBusinessHoursForDate(availability, date) : [];
+  // No `now`: the SDK reads the real clock per call, so a page left open past
+  // the cutoff closes the day rather than failing at submit.
+  const clock = timezone ? { timezone } : undefined;
+  const slotBased = !!availability?.slotDurationMinutes;
+
+  const slots = date ? computeAvailableSlots(availability, date, clock) : [];
+  const windows = date ? getBusinessHoursForDate(availability, date, clock) : [];
+  // Grey out a day with nothing left on it. For a slot-based field that means
+  // no slots survive, which a windows-only check would miss on the lead-time
+  // boundary day and leave the shopper on a date with no times to pick.
   const openDay = (dateYYYYMMDD: string) =>
-    !availability?.businessHours?.length ||
-    getBusinessHoursForDate(availability, dateYYYYMMDD).length > 0;
+    slotBased
+      ? computeAvailableSlots(availability, dateYYYYMMDD, clock).length > 0
+      : !availability?.businessHours?.length ||
+        getBusinessHoursForDate(availability, dateYYYYMMDD, clock).length > 0;
 
   const commit = (nextDate: string, nextTime: string) => {
     setDate(nextDate);
@@ -90,6 +119,7 @@ export function DateTimePicker({
         onChange={(d) => commit(d, '')}
         required={required}
         availability={availability}
+        timezone={timezone}
         isDateSelectable={openDay}
         placeholder={placeholder}
         todayLabel={todayLabel}
@@ -119,24 +149,34 @@ export function DateTimePicker({
         </div>
       )}
 
-      {date && slots.length === 0 && windows.length > 0 && (
-        <label className="flex items-center gap-2 text-sm">
-          <span className="text-muted-foreground">{timeLabel}</span>
-          <input
-            type="time"
-            value={submitted.time}
-            required={required}
-            // The window is a half-open interval [open, close) server-side, so
-            // `max` here is the last minute the API will still accept.
-            min={windows[0].open}
-            max={windows[0].close}
-            onChange={(e) => commit(date, e.target.value)}
-            className="bg-background focus-visible:ring-primary h-11 rounded-lg border px-3 text-sm focus-visible:outline-none focus-visible:ring-2"
-          />
-        </label>
+      {date && slotBased && slots.length === 0 && windows.length > 0 && (
+        <p className="text-muted-foreground text-xs">{noTimesLabel}</p>
+      )}
+
+      {date && !slotBased && windows.length > 0 && (
+        <div className="space-y-2">
+          {windows.map((w) => (
+            <label key={`${w.open}-${w.close}`} className="flex flex-wrap items-center gap-2 text-sm">
+              <span className="text-muted-foreground">
+                {windows.length > 1 ? `${timeLabel} (${w.open} ${toLabel} ${w.close})` : timeLabel}
+              </span>
+              <input
+                type="time"
+                value={submitted.time >= w.open && submitted.time < w.close ? submitted.time : ''}
+                required={required && windows.length === 1}
+                // The window is a half-open interval [open, close) server-side,
+                // so `max` here is the last minute the API will still accept.
+                min={w.open}
+                max={w.close}
+                onChange={(e) => commit(date, e.target.value)}
+                className="bg-background focus-visible:ring-primary h-11 rounded-lg border px-3 text-sm focus-visible:outline-none focus-visible:ring-2"
+              />
+            </label>
+          ))}
+        </div>
       )}
 
-      {date && slots.length === 0 && windows.length === 0 && (
+      {date && windows.length === 0 && (
         <p className="text-muted-foreground text-xs">{closedLabel}</p>
       )}
     </div>

package/templates/nextjs/base/src/components/shared/birthday-picker.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import {
+  BIRTH_MONTH_KEYS,
+  birthDayOptions,
+  birthMonthKey,
+  daysInBirthMonth,
+} from '@/core/lib/birthday';
+
+/**
+ * Single-field birthday picker: one trigger that reads like an ordinary date
+ * field, opening a popover with a month grid and a day grid.
+ *
+ * There is deliberately NO year anywhere. Brainerce stores a month and a day so
+ * the loyalty birthday gift can be sent without keeping anyone's age, which
+ * also rules out `<input type="date">` (it demands a year, and its OS-rendered
+ * popup cannot be restyled) and any date library.
+ *
+ * The popover is hand-rolled for the same reason `checkout/date-picker.tsx`
+ * hand-rolls its calendar: the scaffold ships no popover primitive, and
+ * `src/components/ui/` holds Radix wrappers only with no `react-popover`
+ * dependency to wrap. The trigger markup, the calendar icon and the popover
+ * container are taken from that file on purpose, so the two fields read as
+ * siblings rather than as two different ideas of what a date field looks like.
+ *
+ * Lives in `src/components/shared/` rather than `src/ui/`: canvas scaffolds
+ * wipe `src/ui` and ship no design pack but never touch `src/components/`, and
+ * both the account form and the signup form depend on this.
+ *
+ * The month and the day always leave together. `onChange` emits either a
+ * complete pair or two nulls and never one half, because the API rejects a
+ * month without a day with HTTP 400. Switching to a month that cannot hold
+ * the chosen day clears the birthday rather than moving the day.
+ */
+interface BirthdayPickerProps {
+  /** Target for the field's `<label htmlFor>`. Lands on the trigger button. */
+  id?: string;
+  /** Committed month, 1-12, or null when no birthday is stored. */
+  month: number | null;
+  /** Committed day, 1-31, or null when no birthday is stored. */
+  day: number | null;
+  /** Emits both halves together. `(null, null)` means the shopper cleared it. */
+  onChange: (month: number | null, day: number | null) => void;
+  required?: boolean;
+  /** Paints the trigger with the error border while a message is showing. */
+  invalid?: boolean;
+  /** Merged onto the trigger so each form can match its own input sizing. */
+  triggerClassName?: string;
+  className?: string;
+}
+
+export function BirthdayPicker({
+  id,
+  month,
+  day,
+  onChange,
+  required,
+  invalid,
+  triggerClassName,
+  className,
+}: BirthdayPickerProps) {
+  const t = useTranslations('common');
+  const [open, setOpen] = useState(false);
+  // The month the day grid is currently showing. A month tapped before any day
+  // exists cannot be emitted yet, since half a birthday is an HTTP 400, so it
+  // waits here until a day joins it.
+  const [draftMonth, setDraftMonth] = useState<number | null>(month);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    // `pointerdown` rather than the `mousedown` the checkout calendar uses: one
+    // event covers mouse, pen AND touch, so the popover dismisses on the first
+    // tap outside it on a phone instead of waiting for a synthesized mouse
+    // event that some mobile browsers delay or never send.
+    function onPointerDown(e: PointerEvent) {
+      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('pointerdown', onPointerDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  function toggle() {
+    // Re-sync the draft on the way open so a visit that picked a month and then
+    // backed out does not leave the day grid on a month nothing committed to.
+    if (!open) setDraftMonth(month);
+    setOpen((o) => !o);
+  }
+
+  function selectMonth(next: number) {
+    setDraftMonth(next);
+    if (day === null) return;
+    if (day > daysInBirthMonth(next)) {
+      // The committed day does not exist in the month just tapped, e.g. the
+      // 31st then February. CLEAR it rather than sliding it to the 29th: this
+      // field decides which day a gift email goes out on, and a number that
+      // quietly moved is far worse than one the shopper re-taps, because they
+      // may never notice it changed. The popover deliberately stays open so
+      // the narrowed day grid is the obvious next tap. The dashboard picker
+      // clears for the same reason, so both surfaces behave alike.
+      onChange(null, null);
+      return;
+    }
+    // The day survives the switch, so the pair can be re-emitted right away.
+    onChange(next, day);
+  }
+
+  function selectDay(next: number) {
+    if (draftMonth === null) return;
+    onChange(draftMonth, next);
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+
+  function clear() {
+    setDraftMonth(null);
+    onChange(null, null);
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+
+  // Formatted from the per-locale `birthdayDisplay` template rather than with
+  // `toLocaleDateString`, whose argument-less locale resolves from Node on the
+  // server and from the browser on the client and can disagree at hydration.
+  const committedMonthKey = month ? birthMonthKey(month) : null;
+  const displayValue =
+    committedMonthKey && day
+      ? t('birthdayDisplay', { month: t(committedMonthKey), day: String(day) })
+      : '';
+
+  return (
+    <div ref={rootRef} className={cn('relative', className)}>
+      <button
+        ref={triggerRef}
+        type="button"
+        id={id}
+        onClick={toggle}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-required={required}
+        className={cn(
+          'bg-background focus-visible:ring-primary relative flex h-10 w-full items-center rounded border px-3 pe-10 text-start text-sm focus-visible:outline-none focus-visible:ring-2',
+          invalid ? 'border-destructive' : 'border-border',
+          displayValue ? 'text-foreground' : 'text-muted-foreground',
+          triggerClassName
+        )}
+      >
+        {displayValue || t('birthdayPlaceholder')}
+        <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 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={t('birthday')}
+          /*
+           * `start-0` opens the panel from the field's leading edge in both
+           * directions, so it stays on screen under `dir="rtl"` too. The width
+           * cap keeps it inside a 375px viewport, and the height cap with
+           * `overscroll-contain` lets a thumb scroll the panel itself without
+           * dragging the page behind it.
+           */
+          className="border-border bg-background absolute start-0 z-20 mt-2 max-h-[70vh] w-[19rem] max-w-[calc(100vw-2rem)] overflow-y-auto overscroll-contain rounded-2xl border p-4 shadow-xl"
+        >
+          <p className="text-muted-foreground mb-2 text-xs font-semibold">{t('birthdayMonth')}</p>
+          <div className="mb-4 grid grid-cols-3 gap-1">
+            {BIRTH_MONTH_KEYS.map((key, index) => {
+              const value = index + 1;
+              const isSelected = draftMonth === value;
+              return (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => selectMonth(value)}
+                  aria-pressed={isSelected}
+                  className={cn(
+                    'h-9 rounded-lg px-1 text-xs',
+                    isSelected
+                      ? 'bg-primary text-primary-foreground font-semibold'
+                      : 'hover:bg-secondary'
+                  )}
+                >
+                  {t(key)}
+                </button>
+              );
+            })}
+          </div>
+
+          <p className="text-muted-foreground mb-2 text-xs font-semibold">{t('birthdayDay')}</p>
+          <div className="grid grid-cols-7 gap-0.5">
+            {birthDayOptions(draftMonth).map((value) => {
+              // Days stay inert until a month is chosen, so the picker can
+              // never hand back a day with no month beside it.
+              const disabled = draftMonth === null;
+              const isSelected = !disabled && draftMonth === month && day === value;
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  disabled={disabled}
+                  onClick={() => selectDay(value)}
+                  className={cn(
+                    'flex aspect-square items-center justify-center rounded-full text-sm tabular-nums',
+                    disabled && 'text-muted-foreground/40 cursor-not-allowed',
+                    !disabled && !isSelected && 'hover:bg-secondary',
+                    isSelected && 'bg-primary text-primary-foreground font-bold'
+                  )}
+                >
+                  {value}
+                </button>
+              );
+            })}
+          </div>
+
+          {month !== null && day !== null && (
+            <div className="border-border mt-3 flex justify-end border-t pt-3">
+              <button
+                type="button"
+                onClick={clear}
+                className="text-primary text-sm font-semibold hover:underline"
+              >
+                {t('birthdayClear')}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}