create-brainerce-store 1.62.0 → 1.64.0

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

@@ -1,144 +1,144 @@
-'use client';
-
-import { useState } from 'react';
-import {
-  computeAvailableSlots,
-  getBusinessHoursForDate,
-  type DateAvailabilityConstraints,
-} from 'brainerce';
-import { cn } from '@/core/lib/utils';
-import { DatePicker } from '@/components/checkout/date-picker';
-
-/**
- * Date + time control for checkout `DATETIME` custom fields.
- *
- * **The value it emits is `"YYYY-MM-DDTHH:mm"` with no UTC offset**, which the
- * API resolves in the *store's* timezone — the only frame a delivery slot has.
- * Do not append an offset from the shopper's browser (a buyer travelling
- * abroad would book a different hour than the one they tapped), and never
- * concatenate a human slot label: `"2026-08-13" + "T13:00-14:00"` parses as a
- * -14:00 UTC offset and silently books the following day.
- *
- * 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
- *   being empty does NOT mean the day is closed; that distinction is why this
- *   component asks for the windows separately.
- *
- * Dependency-free from any design pack, same as `date-picker.tsx`.
- */
-interface DateTimePickerProps {
-  id?: string;
-  /** 'YYYY-MM-DDTHH:mm' or ''. */
-  value: string;
-  onChange: (value: string) => void;
-  required?: boolean;
-  availability?: DateAvailabilityConstraints | null;
-  placeholder: string;
-  todayLabel: string;
-  clearLabel: string;
-  prevMonthLabel: string;
-  nextMonthLabel: string;
-  timeLabel: string;
-  closedLabel: string;
-  className?: string;
-}
-
-function splitValue(value: string): { date: string; time: string } {
-  const [date = '', time = ''] = value.split('T');
-  return { date, time: time.slice(0, 5) };
-}
-
-export function DateTimePicker({
-  id,
-  value,
-  onChange,
-  required,
-  availability,
-  placeholder,
-  todayLabel,
-  clearLabel,
-  prevMonthLabel,
-  nextMonthLabel,
-  timeLabel,
-  closedLabel,
-  className,
-}: DateTimePickerProps) {
-  const submitted = splitValue(value);
-  // The date survives on its own while no time is picked yet. The field value
-  // stays empty until both halves exist, so a `required` field can't be
-  // satisfied by a half-filled answer.
-  const [date, setDate] = useState(submitted.date);
-
-  const slots = date ? computeAvailableSlots(availability, date) : [];
-  const windows = date ? getBusinessHoursForDate(availability, date) : [];
-  const openDay = (dateYYYYMMDD: string) =>
-    !availability?.businessHours?.length ||
-    getBusinessHoursForDate(availability, dateYYYYMMDD).length > 0;
-
-  const commit = (nextDate: string, nextTime: string) => {
-    setDate(nextDate);
-    onChange(nextDate && nextTime ? `${nextDate}T${nextTime}` : '');
-  };
-
-  return (
-    <div className={cn('space-y-2', className)}>
-      <DatePicker
-        id={id}
-        value={date}
-        onChange={(d) => commit(d, '')}
-        required={required}
-        availability={availability}
-        isDateSelectable={openDay}
-        placeholder={placeholder}
-        todayLabel={todayLabel}
-        clearLabel={clearLabel}
-        prevMonthLabel={prevMonthLabel}
-        nextMonthLabel={nextMonthLabel}
-      />
-
-      {date && slots.length > 0 && (
-        <div className="flex flex-wrap gap-1.5" role="group" aria-label={timeLabel}>
-          {slots.map((slot) => (
-            <button
-              key={slot}
-              type="button"
-              onClick={() => commit(date, slot)}
-              aria-pressed={submitted.time === slot}
-              className={cn(
-                'h-9 rounded-lg border px-3 text-sm tabular-nums transition-colors',
-                submitted.time === slot
-                  ? 'bg-primary text-primary-foreground border-primary font-semibold'
-                  : 'border-border hover:bg-secondary'
-              )}
-            >
-              {slot}
-            </button>
-          ))}
-        </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 && slots.length === 0 && windows.length === 0 && (
-        <p className="text-muted-foreground text-xs">{closedLabel}</p>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import {
+  computeAvailableSlots,
+  getBusinessHoursForDate,
+  type DateAvailabilityConstraints,
+} from 'brainerce';
+import { cn } from '@/core/lib/utils';
+import { DatePicker } from '@/components/checkout/date-picker';
+
+/**
+ * Date + time control for checkout `DATETIME` custom fields.
+ *
+ * **The value it emits is `"YYYY-MM-DDTHH:mm"` with no UTC offset**, which the
+ * API resolves in the *store's* timezone — the only frame a delivery slot has.
+ * Do not append an offset from the shopper's browser (a buyer travelling
+ * abroad would book a different hour than the one they tapped), and never
+ * concatenate a human slot label: `"2026-08-13" + "T13:00-14:00"` parses as a
+ * -14:00 UTC offset and silently books the following day.
+ *
+ * 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
+ *   being empty does NOT mean the day is closed; that distinction is why this
+ *   component asks for the windows separately.
+ *
+ * Dependency-free from any design pack, same as `date-picker.tsx`.
+ */
+interface DateTimePickerProps {
+  id?: string;
+  /** 'YYYY-MM-DDTHH:mm' or ''. */
+  value: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+  availability?: DateAvailabilityConstraints | null;
+  placeholder: string;
+  todayLabel: string;
+  clearLabel: string;
+  prevMonthLabel: string;
+  nextMonthLabel: string;
+  timeLabel: string;
+  closedLabel: string;
+  className?: string;
+}
+
+function splitValue(value: string): { date: string; time: string } {
+  const [date = '', time = ''] = value.split('T');
+  return { date, time: time.slice(0, 5) };
+}
+
+export function DateTimePicker({
+  id,
+  value,
+  onChange,
+  required,
+  availability,
+  placeholder,
+  todayLabel,
+  clearLabel,
+  prevMonthLabel,
+  nextMonthLabel,
+  timeLabel,
+  closedLabel,
+  className,
+}: DateTimePickerProps) {
+  const submitted = splitValue(value);
+  // The date survives on its own while no time is picked yet. The field value
+  // stays empty until both halves exist, so a `required` field can't be
+  // satisfied by a half-filled answer.
+  const [date, setDate] = useState(submitted.date);
+
+  const slots = date ? computeAvailableSlots(availability, date) : [];
+  const windows = date ? getBusinessHoursForDate(availability, date) : [];
+  const openDay = (dateYYYYMMDD: string) =>
+    !availability?.businessHours?.length ||
+    getBusinessHoursForDate(availability, dateYYYYMMDD).length > 0;
+
+  const commit = (nextDate: string, nextTime: string) => {
+    setDate(nextDate);
+    onChange(nextDate && nextTime ? `${nextDate}T${nextTime}` : '');
+  };
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <DatePicker
+        id={id}
+        value={date}
+        onChange={(d) => commit(d, '')}
+        required={required}
+        availability={availability}
+        isDateSelectable={openDay}
+        placeholder={placeholder}
+        todayLabel={todayLabel}
+        clearLabel={clearLabel}
+        prevMonthLabel={prevMonthLabel}
+        nextMonthLabel={nextMonthLabel}
+      />
+
+      {date && slots.length > 0 && (
+        <div className="flex flex-wrap gap-1.5" role="group" aria-label={timeLabel}>
+          {slots.map((slot) => (
+            <button
+              key={slot}
+              type="button"
+              onClick={() => commit(date, slot)}
+              aria-pressed={submitted.time === slot}
+              className={cn(
+                'h-9 rounded-lg border px-3 text-sm tabular-nums transition-colors',
+                submitted.time === slot
+                  ? 'bg-primary text-primary-foreground border-primary font-semibold'
+                  : 'border-border hover:bg-secondary'
+              )}
+            >
+              {slot}
+            </button>
+          ))}
+        </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 && slots.length === 0 && windows.length === 0 && (
+        <p className="text-muted-foreground text-xs">{closedLabel}</p>
+      )}
+    </div>
+  );
+}