create-brainerce-store 1.72.0 → 1.74.0

package/templates/nextjs/base/src/components/checkout/custom-fields-step.tsx

@@ -1,306 +1,354 @@
-'use client';
-
-import { useState } from 'react';
-import type { CheckoutCustomFieldDefinition } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-import { DatePicker } from '@/components/checkout/date-picker';
-import { DateTimePicker } from '@/components/checkout/datetime-picker';
-
-/** Inline, dependency-free — this file lives in the base template and must
- * not assume any design pack (e.g. Atelier's icon set) is present; canvas
- * scaffolds skip design packs entirely. */
-const INPUT_CLASS =
-  'h-11 w-full rounded-lg border bg-background px-3.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary';
-
-interface CustomFieldsStepProps {
-  fields: CheckoutCustomFieldDefinition[];
-  values: Record<string, unknown>;
-  onChange: (key: string, value: unknown) => void;
-  onApply: () => void;
-  onUploadFile?: (file: File) => Promise<{ url: string; key: string }>;
-  /**
-   * The store's IANA timezone (`storeInfo.timezone`). DATE/DATETIME fields need
-   * it to apply a field's leadTimeMinutes/cutoffTime/maxDaysAhead: the SDK
-   * skips those bounds when no clock reaches it, so the picker would offer days
-   * the API rejects.
-   */
-  timezone?: string;
-  loading?: boolean;
-  className?: string;
-}
-
-const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5 MB
-const ACCEPTED_IMAGE_TYPES = 'image/jpeg,image/png,image/webp,image/gif';
-
-export function CustomFieldsStep({
-  fields,
-  values,
-  onChange,
-  onApply,
-  onUploadFile,
-  timezone,
-  loading = false,
-  className,
-}: CustomFieldsStepProps) {
-  const t = useTranslations('checkout');
-  const [uploadingKeys, setUploadingKeys] = useState<Set<string>>(new Set());
-
-  const isMissing = fields.some((f) => {
-    if (!f.required) return false;
-    const v = values[f.key];
-    return v === undefined || v === null || v === '';
-  });
-
-  return (
-    <div className={cn('space-y-4', className)}>
-      <p className="text-muted-foreground text-sm">{t('customFieldsSubtitle')}</p>
-
-      {fields.map((field) => {
-        const value = values[field.key];
-        const labelEl = (
-          <label
-            htmlFor={`cf-${field.key}`}
-            className="text-foreground mb-1 block text-sm font-medium"
-          >
-            {field.name}
-            {field.required && <span className="text-destructive ms-1">*</span>}
-          </label>
-        );
-        const helpEl = field.description ? (
-          <p className="text-muted-foreground mt-1 whitespace-pre-line text-xs">
-            {field.description}
-          </p>
-        ) : null;
-
-        switch (field.type) {
-          case 'TEXT':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <input
-                  id={`cf-${field.key}`}
-                  type="text"
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  minLength={field.minLength ?? undefined}
-                  maxLength={field.maxLength ?? undefined}
-                  className={INPUT_CLASS}
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'TEXTAREA':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <textarea
-                  id={`cf-${field.key}`}
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  minLength={field.minLength ?? undefined}
-                  maxLength={field.maxLength ?? undefined}
-                  rows={3}
-                  className="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-primary w-full rounded-lg border px-3.5 py-2.5 text-sm focus-visible:outline-none focus-visible:ring-2"
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'NUMBER':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <input
-                  id={`cf-${field.key}`}
-                  type="number"
-                  value={(value as number | string) ?? ''}
-                  onChange={(e) =>
-                    onChange(field.key, e.target.value === '' ? '' : Number(e.target.value))
-                  }
-                  required={field.required}
-                  min={field.minValue ?? undefined}
-                  max={field.maxValue ?? undefined}
-                  className={INPUT_CLASS}
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'BOOLEAN':
-            return (
-              <div key={field.key} className="flex items-start gap-2">
-                <input
-                  id={`cf-${field.key}`}
-                  type="checkbox"
-                  checked={value === true}
-                  onChange={(e) => onChange(field.key, e.target.checked)}
-                  className="mt-1"
-                />
-                <div className="flex-1">
-                  <label
-                    htmlFor={`cf-${field.key}`}
-                    className="text-foreground text-sm font-medium"
-                  >
-                    {field.name}
-                    {field.required && <span className="text-destructive ms-1">*</span>}
-                  </label>
-                  {helpEl}
-                </div>
-              </div>
-            );
-
-          case 'SELECT':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <select
-                  id={`cf-${field.key}`}
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  className={INPUT_CLASS}
-                >
-                  <option value="">{t('customFieldsSelectPlaceholder')}</option>
-                  {field.options?.map((opt) => (
-                    <option key={opt.value} value={opt.value}>
-                      {opt.label}
-                    </option>
-                  ))}
-                </select>
-                {helpEl}
-              </div>
-            );
-
-          case 'DATE':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <DatePicker
-                  id={`cf-${field.key}`}
-                  value={(value as string) ?? ''}
-                  onChange={(v) => onChange(field.key, v)}
-                  required={field.required}
-                  availability={field.dateAvailability}
-                  timezone={timezone}
-                  placeholder={t('customFieldsDatePlaceholder')}
-                  todayLabel={t('customFieldsDateToday')}
-                  clearLabel={t('customFieldsDateClear')}
-                  prevMonthLabel={t('customFieldsDatePrevMonth')}
-                  nextMonthLabel={t('customFieldsDateNextMonth')}
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'DATETIME':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <DateTimePicker
-                  id={`cf-${field.key}`}
-                  value={(value as string) ?? ''}
-                  onChange={(v) => onChange(field.key, v)}
-                  required={field.required}
-                  availability={field.dateAvailability}
-                  timezone={timezone}
-                  placeholder={t('customFieldsDatePlaceholder')}
-                  todayLabel={t('customFieldsDateToday')}
-                  clearLabel={t('customFieldsDateClear')}
-                  prevMonthLabel={t('customFieldsDatePrevMonth')}
-                  nextMonthLabel={t('customFieldsDateNextMonth')}
-                  timeLabel={t('customFieldsTimeLabel')}
-                  closedLabel={t('customFieldsTimeClosed')}
-                  noTimesLabel={t('customFieldsTimeNoneLeft')}
-                  toLabel={t('customFieldsTimeTo')}
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'IMAGE': {
-            const isUploading = uploadingKeys.has(field.key);
-            return (
-              <div key={field.key}>
-                {labelEl}
-                {value ? (
-                  <div className="relative inline-block">
-                    <img
-                      src={value as string}
-                      alt={field.name}
-                      className="border-border max-h-32 rounded border object-contain"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => onChange(field.key, '')}
-                      className="bg-background/80 text-foreground absolute end-1 top-1 rounded-full p-1 text-xs leading-none"
-                      aria-label={t('customFieldsImageRemove')}
-                    >
-                      ✕
-                    </button>
-                  </div>
-                ) : (
-                  <label
-                    htmlFor={`cf-${field.key}`}
-                    className={cn(
-                      'border-border flex cursor-pointer flex-col items-center gap-2 rounded border-2 border-dashed p-6 text-center transition-colors',
-                      isUploading ? 'opacity-50' : 'hover:border-primary/40'
-                    )}
-                  >
-                    <span className="text-muted-foreground text-sm">
-                      {isUploading ? t('customFieldsImageUploading') : t('customFieldsImageUpload')}
-                    </span>
-                    <input
-                      id={`cf-${field.key}`}
-                      type="file"
-                      accept={ACCEPTED_IMAGE_TYPES}
-                      disabled={isUploading || !onUploadFile}
-                      className="hidden"
-                      onChange={async (e) => {
-                        const file = e.target.files?.[0];
-                        if (!file || !onUploadFile) return;
-                        if (file.size > MAX_IMAGE_SIZE) {
-                          alert(t('customFieldsImageTooLarge'));
-                          return;
-                        }
-                        setUploadingKeys((prev) => new Set(prev).add(field.key));
-                        try {
-                          const result = await onUploadFile(file);
-                          onChange(field.key, result.url);
-                        } catch {
-                          // Upload failed — user can retry
-                        } finally {
-                          setUploadingKeys((prev) => {
-                            const next = new Set(prev);
-                            next.delete(field.key);
-                            return next;
-                          });
-                        }
-                      }}
-                    />
-                  </label>
-                )}
-                {helpEl}
-              </div>
-            );
-          }
-
-          default:
-            return null;
-        }
-      })}
-
-      <button
-        type="button"
-        onClick={onApply}
-        disabled={loading || isMissing}
-        className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-12 w-full select-none items-center justify-center gap-2 whitespace-nowrap rounded-full px-8 text-base font-semibold transition-colors duration-200 disabled:pointer-events-none disabled:opacity-50"
-      >
-        {loading ? t('customFieldsApplying') : t('customFieldsApply')}
-      </button>
-    </div>
-  );
-}
+'use client';
+
+import { useMemo, useState } from 'react';
+import type { CheckoutCustomFieldDefinition } from 'brainerce';
+import { isDateValueAllowed } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { DatePicker } from '@/components/checkout/date-picker';
+import { DateTimePicker } from '@/components/checkout/datetime-picker';
+
+/** Inline, dependency-free — this file lives in the base template and must
+ * not assume any design pack (e.g. Atelier's icon set) is present; canvas
+ * scaffolds skip design packs entirely. */
+const INPUT_CLASS =
+  'h-11 w-full rounded-lg border bg-background px-3.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary';
+
+interface CustomFieldsStepProps {
+  fields: CheckoutCustomFieldDefinition[];
+  values: Record<string, unknown>;
+  onChange: (key: string, value: unknown) => void;
+  onApply: () => void;
+  onUploadFile?: (file: File) => Promise<{ url: string; key: string }>;
+  /**
+   * The store's IANA timezone (`storeInfo.timezone`). DATE/DATETIME fields need
+   * it to apply a field's leadTimeMinutes/cutoffTime/maxDaysAhead: the SDK
+   * skips those bounds when no clock reaches it, so the picker would offer days
+   * the API rejects.
+   */
+  timezone?: string;
+  loading?: boolean;
+  className?: string;
+}
+
+const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5 MB
+const ACCEPTED_IMAGE_TYPES = 'image/jpeg,image/png,image/webp,image/gif';
+
+export function CustomFieldsStep({
+  fields,
+  values,
+  onChange,
+  onApply,
+  onUploadFile,
+  timezone,
+  loading = false,
+  className,
+}: CustomFieldsStepProps) {
+  const t = useTranslations('checkout');
+  const [uploadingKeys, setUploadingKeys] = useState<Set<string>>(new Set());
+
+  const isMissing = fields.some((f) => {
+    if (!f.required) return false;
+    const v = values[f.key];
+    return v === undefined || v === null || v === '';
+  });
+
+  // ---- Pre-submit date guard ----
+  //
+  // The pickers disable unavailable days and times at the moment they render,
+  // but a shopper can sit on this step long enough for a `leadTimeMinutes` or
+  // `cutoffTime` bound to overtake the value they already picked. Submitting
+  // it then 400s AFTER they have committed. `isDateValueAllowed` is the
+  // authoritative client-side re-check, so run it on every keystroke-free
+  // render and keep the button shut while anything is stale.
+  //
+  // The clock is what applies leadTimeMinutes / cutoffTime / maxDaysAhead, and
+  // `isDateValueAllowed` requires a real IANA `timezone` (it is typed
+  // `string`, not optional). `timezone` on this component IS optional, so when
+  // the store has none we skip the guard entirely rather than pass an empty
+  // string, which would evaluate the bounds against a bogus zone.
+  const staleDateKeys = useMemo(() => {
+    const stale = new Set<string>();
+    if (!timezone) return stale;
+
+    for (const field of fields) {
+      if (field.type !== 'DATE' && field.type !== 'DATETIME') continue;
+      if (!field.dateAvailability) continue;
+
+      const raw = values[field.key];
+      if (typeof raw !== 'string' || raw === '') continue;
+
+      // A DATE value is "YYYY-MM-DD", which parses to UTC midnight — exactly
+      // what isDateValueAllowed reads back with getUTC* for the DATE branch.
+      const instant = new Date(raw);
+      if (Number.isNaN(instant.getTime())) continue;
+
+      const verdict = isDateValueAllowed(instant, field.dateAvailability, field.type, timezone);
+      if (!verdict.allowed) {
+        stale.add(field.key);
+        // `reason` is untranslated English prose meant for developers — log
+        // it, never render it. The shopper gets the localized line below.
+        console.warn(`Checkout field "${field.key}" is no longer available:`, verdict.reason);
+      }
+    }
+    return stale;
+  }, [fields, values, timezone]);
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <p className="text-muted-foreground text-sm">{t('customFieldsSubtitle')}</p>
+
+      {fields.map((field) => {
+        const value = values[field.key];
+        const labelEl = (
+          <label
+            htmlFor={`cf-${field.key}`}
+            className="text-foreground mb-1 block text-sm font-medium"
+          >
+            {field.name}
+            {field.required && <span className="text-destructive ms-1">*</span>}
+          </label>
+        );
+        const helpEl = field.description ? (
+          <p className="text-muted-foreground mt-1 whitespace-pre-line text-xs">
+            {field.description}
+          </p>
+        ) : null;
+
+        switch (field.type) {
+          case 'TEXT':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <input
+                  id={`cf-${field.key}`}
+                  type="text"
+                  value={(value as string) ?? ''}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  required={field.required}
+                  minLength={field.minLength ?? undefined}
+                  maxLength={field.maxLength ?? undefined}
+                  className={INPUT_CLASS}
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'TEXTAREA':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <textarea
+                  id={`cf-${field.key}`}
+                  value={(value as string) ?? ''}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  required={field.required}
+                  minLength={field.minLength ?? undefined}
+                  maxLength={field.maxLength ?? undefined}
+                  rows={3}
+                  className="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-primary w-full rounded-lg border px-3.5 py-2.5 text-sm focus-visible:outline-none focus-visible:ring-2"
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'NUMBER':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <input
+                  id={`cf-${field.key}`}
+                  type="number"
+                  value={(value as number | string) ?? ''}
+                  onChange={(e) =>
+                    onChange(field.key, e.target.value === '' ? '' : Number(e.target.value))
+                  }
+                  required={field.required}
+                  min={field.minValue ?? undefined}
+                  max={field.maxValue ?? undefined}
+                  className={INPUT_CLASS}
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'BOOLEAN':
+            return (
+              <div key={field.key} className="flex items-start gap-2">
+                <input
+                  id={`cf-${field.key}`}
+                  type="checkbox"
+                  checked={value === true}
+                  onChange={(e) => onChange(field.key, e.target.checked)}
+                  className="mt-1"
+                />
+                <div className="flex-1">
+                  <label
+                    htmlFor={`cf-${field.key}`}
+                    className="text-foreground text-sm font-medium"
+                  >
+                    {field.name}
+                    {field.required && <span className="text-destructive ms-1">*</span>}
+                  </label>
+                  {helpEl}
+                </div>
+              </div>
+            );
+
+          case 'SELECT':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <select
+                  id={`cf-${field.key}`}
+                  value={(value as string) ?? ''}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  required={field.required}
+                  className={INPUT_CLASS}
+                >
+                  <option value="">{t('customFieldsSelectPlaceholder')}</option>
+                  {field.options?.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </select>
+                {helpEl}
+              </div>
+            );
+
+          case 'DATE':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <DatePicker
+                  id={`cf-${field.key}`}
+                  value={(value as string) ?? ''}
+                  onChange={(v) => onChange(field.key, v)}
+                  required={field.required}
+                  availability={field.dateAvailability}
+                  timezone={timezone}
+                  placeholder={t('customFieldsDatePlaceholder')}
+                  todayLabel={t('customFieldsDateToday')}
+                  clearLabel={t('customFieldsDateClear')}
+                  prevMonthLabel={t('customFieldsDatePrevMonth')}
+                  nextMonthLabel={t('customFieldsDateNextMonth')}
+                />
+                {helpEl}
+                {staleDateKeys.has(field.key) && (
+                  <p className="text-destructive mt-1 text-xs">{t('customFieldsTimeNoneLeft')}</p>
+                )}
+              </div>
+            );
+
+          case 'DATETIME':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <DateTimePicker
+                  id={`cf-${field.key}`}
+                  value={(value as string) ?? ''}
+                  onChange={(v) => onChange(field.key, v)}
+                  required={field.required}
+                  availability={field.dateAvailability}
+                  timezone={timezone}
+                  placeholder={t('customFieldsDatePlaceholder')}
+                  todayLabel={t('customFieldsDateToday')}
+                  clearLabel={t('customFieldsDateClear')}
+                  prevMonthLabel={t('customFieldsDatePrevMonth')}
+                  nextMonthLabel={t('customFieldsDateNextMonth')}
+                  timeLabel={t('customFieldsTimeLabel')}
+                  closedLabel={t('customFieldsTimeClosed')}
+                  noTimesLabel={t('customFieldsTimeNoneLeft')}
+                  toLabel={t('customFieldsTimeTo')}
+                />
+                {helpEl}
+                {staleDateKeys.has(field.key) && (
+                  <p className="text-destructive mt-1 text-xs">{t('customFieldsTimeNoneLeft')}</p>
+                )}
+              </div>
+            );
+
+          case 'IMAGE': {
+            const isUploading = uploadingKeys.has(field.key);
+            return (
+              <div key={field.key}>
+                {labelEl}
+                {value ? (
+                  <div className="relative inline-block">
+                    <img
+                      src={value as string}
+                      alt={field.name}
+                      className="border-border max-h-32 rounded border object-contain"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => onChange(field.key, '')}
+                      className="bg-background/80 text-foreground absolute end-1 top-1 rounded-full p-1 text-xs leading-none"
+                      aria-label={t('customFieldsImageRemove')}
+                    >
+                      ✕
+                    </button>
+                  </div>
+                ) : (
+                  <label
+                    htmlFor={`cf-${field.key}`}
+                    className={cn(
+                      'border-border flex cursor-pointer flex-col items-center gap-2 rounded border-2 border-dashed p-6 text-center transition-colors',
+                      isUploading ? 'opacity-50' : 'hover:border-primary/40'
+                    )}
+                  >
+                    <span className="text-muted-foreground text-sm">
+                      {isUploading ? t('customFieldsImageUploading') : t('customFieldsImageUpload')}
+                    </span>
+                    <input
+                      id={`cf-${field.key}`}
+                      type="file"
+                      accept={ACCEPTED_IMAGE_TYPES}
+                      disabled={isUploading || !onUploadFile}
+                      className="hidden"
+                      onChange={async (e) => {
+                        const file = e.target.files?.[0];
+                        if (!file || !onUploadFile) return;
+                        if (file.size > MAX_IMAGE_SIZE) {
+                          alert(t('customFieldsImageTooLarge'));
+                          return;
+                        }
+                        setUploadingKeys((prev) => new Set(prev).add(field.key));
+                        try {
+                          const result = await onUploadFile(file);
+                          onChange(field.key, result.url);
+                        } catch {
+                          // Upload failed — user can retry
+                        } finally {
+                          setUploadingKeys((prev) => {
+                            const next = new Set(prev);
+                            next.delete(field.key);
+                            return next;
+                          });
+                        }
+                      }}
+                    />
+                  </label>
+                )}
+                {helpEl}
+              </div>
+            );
+          }
+
+          default:
+            return null;
+        }
+      })}
+
+      <button
+        type="button"
+        onClick={onApply}
+        disabled={loading || isMissing || staleDateKeys.size > 0}
+        className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-12 w-full select-none items-center justify-center gap-2 whitespace-nowrap rounded-full px-8 text-base font-semibold transition-colors duration-200 disabled:pointer-events-none disabled:opacity-50"
+      >
+        {loading ? t('customFieldsApplying') : t('customFieldsApply')}
+      </button>
+    </div>
+  );
+}