create-brainerce-store 1.68.0 → 1.72.0

package/templates/nextjs/base/src/components/account/profile-section.tsx

@@ -1,226 +1,303 @@
-'use client';
-
-import { useState } from 'react';
-import type { CustomerProfile } from 'brainerce';
-import { getClient } from '@/core/lib/brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface ProfileSectionProps {
-  profile: CustomerProfile;
-  onProfileUpdate?: (updated: CustomerProfile) => void;
-  className?: string;
-}
-
-export function ProfileSection({ profile, onProfileUpdate, className }: ProfileSectionProps) {
-  const t = useTranslations('account');
-  const [editing, setEditing] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-  const [form, setForm] = useState({
-    firstName: profile.firstName || '',
-    lastName: profile.lastName || '',
-    phone: profile.phone || '',
-  });
-
-  const fullName = [profile.firstName, profile.lastName].filter(Boolean).join(' ');
-  const initials =
-    [profile.firstName?.[0], profile.lastName?.[0]].filter(Boolean).join('').toUpperCase() ||
-    profile.email[0].toUpperCase();
-
-  function startEditing() {
-    setForm({
-      firstName: profile.firstName || '',
-      lastName: profile.lastName || '',
-      phone: profile.phone || '',
-    });
-    setMessage(null);
-    setEditing(true);
-  }
-
-  function cancelEditing() {
-    setEditing(false);
-    setMessage(null);
-  }
-
-  async function handleSave(e: React.FormEvent) {
-    e.preventDefault();
-    setSaving(true);
-    setMessage(null);
-
-    try {
-      const client = getClient();
-      const updated = await client.updateMyProfile({
-        firstName: form.firstName || undefined,
-        lastName: form.lastName || undefined,
-        phone: form.phone || undefined,
-      });
-      onProfileUpdate?.(updated);
-      setEditing(false);
-      setMessage({ type: 'success', text: t('profileUpdated') });
-      setTimeout(() => setMessage(null), 3000);
-    } catch {
-      setMessage({ type: 'error', text: t('profileUpdateFailed') });
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  return (
-    <div className={cn('border-border rounded-lg border p-6', className)}>
-      <div className="flex items-start gap-4">
-        {/* Avatar */}
-        <div className="bg-primary/10 text-primary flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full text-lg font-semibold">
-          {initials}
-        </div>
-
-        <div className="min-w-0 flex-1">
-          {editing ? (
-            <form onSubmit={handleSave} className="space-y-3">
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="text-muted-foreground mb-1 block text-xs font-medium">
-                    {t('firstName')}
-                  </label>
-                  <input
-                    type="text"
-                    value={form.firstName}
-                    onChange={(e) => setForm((f) => ({ ...f, firstName: e.target.value }))}
-                    className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-                    autoFocus
-                  />
-                </div>
-                <div>
-                  <label className="text-muted-foreground mb-1 block text-xs font-medium">
-                    {t('lastName')}
-                  </label>
-                  <input
-                    type="text"
-                    value={form.lastName}
-                    onChange={(e) => setForm((f) => ({ ...f, lastName: e.target.value }))}
-                    className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-                  />
-                </div>
-              </div>
-              <div>
-                <label className="text-muted-foreground mb-1 block text-xs font-medium">
-                  {t('phone')}
-                </label>
-                <input
-                  type="tel"
-                  value={form.phone}
-                  onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
-                  className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
-                />
-              </div>
-              <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
-              <div className="flex items-center gap-2">
-                <button
-                  type="submit"
-                  disabled={saving}
-                  className="bg-primary text-primary-foreground rounded-md px-4 py-1.5 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
-                >
-                  {saving ? '...' : t('save')}
-                </button>
-                <button
-                  type="button"
-                  onClick={cancelEditing}
-                  disabled={saving}
-                  className="text-muted-foreground hover:text-foreground rounded-md px-4 py-1.5 text-sm transition-colors disabled:opacity-50"
-                >
-                  {t('cancel')}
-                </button>
-              </div>
-            </form>
-          ) : (
-            <>
-              <div className="flex items-center gap-2">
-                {fullName && (
-                  <h2 className="text-foreground truncate text-lg font-semibold">{fullName}</h2>
-                )}
-                <button
-                  type="button"
-                  onClick={startEditing}
-                  className="text-muted-foreground hover:text-foreground flex-shrink-0 rounded p-1 transition-colors"
-                  title={t('editProfile')}
-                >
-                  <svg
-                    className="h-4 w-4"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    strokeWidth={2}
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
-
-              <div className="mt-2 flex items-center gap-2">
-                {profile.emailVerified ? (
-                  <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-950/30 dark:text-green-400">
-                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M5 13l4 4L19 7"
-                      />
-                    </svg>
-                    {t('verified')}
-                  </span>
-                ) : (
-                  <span className="inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/30 dark:text-orange-400">
-                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M12 9v2m0 4h.01"
-                      />
-                    </svg>
-                    {t('unverified')}
-                  </span>
-                )}
-              </div>
-
-              {profile.phone && (
-                <p className="text-muted-foreground mt-2 text-sm">{profile.phone}</p>
-              )}
-
-              {profile.createdAt && !isNaN(new Date(profile.createdAt).getTime()) && (
-                <p className="text-muted-foreground mt-3 text-xs">
-                  {t('memberSince')}{' '}
-                  {new Date(profile.createdAt).toLocaleDateString(undefined, {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                  })}
-                </p>
-              )}
-            </>
-          )}
-
-          {/* Success/Error message */}
-          {message && (
-            <p
-              className={cn(
-                'mt-2 text-sm',
-                message.type === 'success'
-                  ? 'text-green-600 dark:text-green-400'
-                  : 'text-red-600 dark:text-red-400'
-              )}
-            >
-              {message.text}
-            </p>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import type { CustomerProfile } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { birthMonthKey, toBirthdayNumber } from '@/core/lib/birthday';
+import { BirthdayPicker } from '@/components/shared/birthday-picker';
+
+interface ProfileSectionProps {
+  profile: CustomerProfile;
+  onProfileUpdate?: (updated: CustomerProfile) => void;
+  className?: string;
+}
+
+export function ProfileSection({ profile, onProfileUpdate, className }: ProfileSectionProps) {
+  const t = useTranslations('account');
+  const tc = useTranslations('common');
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [form, setForm] = useState({
+    firstName: profile.firstName || '',
+    lastName: profile.lastName || '',
+    phone: profile.phone || '',
+    // Seeded from the fetched profile so a saved birthday renders back into
+    // the picker instead of the form reopening blank. Held as strings to match
+    // the other fields; '' means no birthday is set.
+    birthMonth: profile.birthMonth ? String(profile.birthMonth) : '',
+    birthDay: profile.birthDay ? String(profile.birthDay) : '',
+  });
+
+  const fullName = [profile.firstName, profile.lastName].filter(Boolean).join(' ');
+  const initials =
+    [profile.firstName?.[0], profile.lastName?.[0]].filter(Boolean).join('').toUpperCase() ||
+    profile.email[0].toUpperCase();
+
+  // Stored birthday for the read-only view. Both halves always arrive together,
+  // and an out-of-range month resolves to null so nothing renders rather than a
+  // raw key path.
+  const storedMonthKey = profile.birthMonth ? birthMonthKey(profile.birthMonth) : null;
+  const storedBirthday =
+    storedMonthKey && profile.birthDay
+      ? tc('birthdayDisplay', {
+          month: tc(storedMonthKey),
+          day: String(profile.birthDay),
+        })
+      : null;
+
+  function startEditing() {
+    setForm({
+      firstName: profile.firstName || '',
+      lastName: profile.lastName || '',
+      phone: profile.phone || '',
+      birthMonth: profile.birthMonth ? String(profile.birthMonth) : '',
+      birthDay: profile.birthDay ? String(profile.birthDay) : '',
+    });
+    setMessage(null);
+    setEditing(true);
+  }
+
+  /**
+   * The picker hands back both halves at once, or two nulls when the shopper
+   * clears the field. State stays as strings so the save path below is
+   * unchanged.
+   */
+  function selectBirthday(month: number | null, day: number | null) {
+    setForm((f) => ({
+      ...f,
+      birthMonth: month ? String(month) : '',
+      birthDay: day ? String(day) : '',
+    }));
+    setMessage(null);
+  }
+
+  function cancelEditing() {
+    setEditing(false);
+    setMessage(null);
+  }
+
+  async function handleSave(e: React.FormEvent) {
+    e.preventDefault();
+
+    const birthMonth = toBirthdayNumber(form.birthMonth);
+    const birthDay = toBirthdayNumber(form.birthDay);
+
+    // Half a birthday is an HTTP 400 at the API, so stop here with something
+    // the shopper can act on instead of showing the generic save failure.
+    if ((birthMonth === null) !== (birthDay === null)) {
+      setMessage({ type: 'error', text: tc('birthdayIncomplete') });
+      return;
+    }
+
+    setSaving(true);
+    setMessage(null);
+
+    try {
+      const client = getClient();
+      const updated = await client.updateMyProfile({
+        firstName: form.firstName || undefined,
+        lastName: form.lastName || undefined,
+        phone: form.phone || undefined,
+        // Deliberately NOT the `|| undefined` shape used above: leaving these
+        // two keys out tells the API to KEEP the stored birthday, so a shopper
+        // who cleared the picker could never remove it. Explicit nulls delete
+        // it. Do not "tidy" this back into the pattern of the fields above.
+        birthMonth,
+        birthDay,
+      });
+      onProfileUpdate?.(updated);
+      setEditing(false);
+      setMessage({ type: 'success', text: t('profileUpdated') });
+      setTimeout(() => setMessage(null), 3000);
+    } catch {
+      setMessage({ type: 'error', text: t('profileUpdateFailed') });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className={cn('border-border rounded-lg border p-6', className)}>
+      <div className="flex items-start gap-4">
+        {/* Avatar */}
+        <div className="bg-primary/10 text-primary flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full text-lg font-semibold">
+          {initials}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          {editing ? (
+            <form onSubmit={handleSave} className="space-y-3">
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="text-muted-foreground mb-1 block text-xs font-medium">
+                    {t('firstName')}
+                  </label>
+                  <input
+                    type="text"
+                    value={form.firstName}
+                    onChange={(e) => setForm((f) => ({ ...f, firstName: e.target.value }))}
+                    className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
+                    autoFocus
+                  />
+                </div>
+                <div>
+                  <label className="text-muted-foreground mb-1 block text-xs font-medium">
+                    {t('lastName')}
+                  </label>
+                  <input
+                    type="text"
+                    value={form.lastName}
+                    onChange={(e) => setForm((f) => ({ ...f, lastName: e.target.value }))}
+                    className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="text-muted-foreground mb-1 block text-xs font-medium">
+                  {t('phone')}
+                </label>
+                <input
+                  type="tel"
+                  value={form.phone}
+                  onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
+                  className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
+                />
+              </div>
+              {/* Month and day only. Never collect a birth year: the gift
+                  needs the date, not the age. */}
+              <div>
+                <label
+                  htmlFor="profile-birthday"
+                  className="text-muted-foreground mb-1 block text-xs font-medium"
+                >
+                  {tc('birthday')}
+                </label>
+                <BirthdayPicker
+                  id="profile-birthday"
+                  month={toBirthdayNumber(form.birthMonth)}
+                  day={toBirthdayNumber(form.birthDay)}
+                  onChange={selectBirthday}
+                  triggerClassName="rounded-md"
+                />
+                <p className="text-muted-foreground mt-1 text-xs">{tc('birthdayGiftNote')}</p>
+              </div>
+              <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
+              <div className="flex items-center gap-2">
+                <button
+                  type="submit"
+                  disabled={saving}
+                  className="bg-primary text-primary-foreground rounded-md px-4 py-1.5 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
+                >
+                  {saving ? '...' : t('save')}
+                </button>
+                <button
+                  type="button"
+                  onClick={cancelEditing}
+                  disabled={saving}
+                  className="text-muted-foreground hover:text-foreground rounded-md px-4 py-1.5 text-sm transition-colors disabled:opacity-50"
+                >
+                  {t('cancel')}
+                </button>
+              </div>
+            </form>
+          ) : (
+            <>
+              <div className="flex items-center gap-2">
+                {fullName && (
+                  <h2 className="text-foreground truncate text-lg font-semibold">{fullName}</h2>
+                )}
+                <button
+                  type="button"
+                  onClick={startEditing}
+                  className="text-muted-foreground hover:text-foreground flex-shrink-0 rounded p-1 transition-colors"
+                  title={t('editProfile')}
+                >
+                  <svg
+                    className="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+                    />
+                  </svg>
+                </button>
+              </div>
+              <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
+
+              <div className="mt-2 flex items-center gap-2">
+                {profile.emailVerified ? (
+                  <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-950/30 dark:text-green-400">
+                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M5 13l4 4L19 7"
+                      />
+                    </svg>
+                    {t('verified')}
+                  </span>
+                ) : (
+                  <span className="inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/30 dark:text-orange-400">
+                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M12 9v2m0 4h.01"
+                      />
+                    </svg>
+                    {t('unverified')}
+                  </span>
+                )}
+              </div>
+
+              {profile.phone && (
+                <p className="text-muted-foreground mt-2 text-sm">{profile.phone}</p>
+              )}
+
+              {storedBirthday && (
+                <p className="text-muted-foreground mt-2 text-sm">
+                  {tc('birthday')} {storedBirthday}
+                </p>
+              )}
+
+              {profile.createdAt && !isNaN(new Date(profile.createdAt).getTime()) && (
+                <p className="text-muted-foreground mt-3 text-xs">
+                  {t('memberSince')}{' '}
+                  {new Date(profile.createdAt).toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                </p>
+              )}
+            </>
+          )}
+
+          {/* Success/Error message */}
+          {message && (
+            <p
+              className={cn(
+                'mt-2 text-sm',
+                message.type === 'success'
+                  ? 'text-green-600 dark:text-green-400'
+                  : 'text-red-600 dark:text-red-400'
+              )}
+            >
+              {message.text}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}