create-brainerce-store 1.4.1 → 1.5.1

package/templates/nextjs/base/src/components/checkout/checkout-form.tsx

@@ -1,305 +1,305 @@
-'use client';
-
-import { useState } from 'react';
-import type { SetShippingAddressDto, ShippingDestinations } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-
-interface CheckoutFormProps {
-  onSubmit: (address: SetShippingAddressDto) => void;
-  loading?: boolean;
-  initialValues?: Partial<SetShippingAddressDto>;
-  destinations?: ShippingDestinations | null;
-  className?: string;
-}
-
-export function CheckoutForm({
-  onSubmit,
-  loading = false,
-  initialValues,
-  destinations,
-  className,
-}: CheckoutFormProps) {
-  const [formData, setFormData] = useState<SetShippingAddressDto>({
-    email: initialValues?.email || '',
-    firstName: initialValues?.firstName || '',
-    lastName: initialValues?.lastName || '',
-    line1: initialValues?.line1 || '',
-    line2: initialValues?.line2 || '',
-    city: initialValues?.city || '',
-    region: initialValues?.region || '',
-    postalCode: initialValues?.postalCode || '',
-    country: initialValues?.country || '',
-    phone: initialValues?.phone || '',
-  });
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const t = useTranslations('checkoutForm');
-  const tc = useTranslations('common');
-
-  const hasCountryOptions = destinations && destinations.countries.length > 0;
-  const countryRegions = destinations?.regions[formData.country];
-  const hasRegionOptions = countryRegions && countryRegions.length > 0;
-
-  function validate(): boolean {
-    const newErrors: Record<string, string> = {};
-
-    if (!formData.email.trim()) {
-      newErrors.email = t('emailRequired');
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = t('emailInvalid');
-    }
-
-    if (!formData.firstName.trim()) {
-      newErrors.firstName = t('firstNameRequired');
-    }
-    if (!formData.lastName.trim()) {
-      newErrors.lastName = t('lastNameRequired');
-    }
-    if (!formData.line1.trim()) {
-      newErrors.line1 = t('addressRequired');
-    }
-    if (!formData.city.trim()) {
-      newErrors.city = t('cityRequired');
-    }
-    if (!formData.postalCode.trim()) {
-      newErrors.postalCode = t('postalCodeRequired');
-    }
-    if (!formData.country.trim()) {
-      newErrors.country = t('countryRequired');
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  }
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (validate()) {
-      onSubmit(formData);
-    }
-  }
-
-  function updateField(field: keyof SetShippingAddressDto, value: string) {
-    setFormData((prev) => {
-      const next = { ...prev, [field]: value };
-      // Reset region when country changes
-      if (field === 'country' && value !== prev.country) {
-        next.region = '';
-      }
-      return next;
-    });
-    if (errors[field]) {
-      setErrors((prev) => {
-        const next = { ...prev };
-        delete next[field];
-        return next;
-      });
-    }
-  }
-
-  const inputClass =
-    'bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2';
-  const selectClass =
-    'bg-background text-foreground focus:ring-primary/20 focus:border-primary h-10 w-full appearance-none rounded border px-3 text-sm focus:outline-none focus:ring-2';
-
-  return (
-    <form onSubmit={handleSubmit} className={cn('space-y-4', className)}>
-      {/* Email */}
-      <div>
-        <label htmlFor="email" className="text-foreground mb-1 block text-sm font-medium">
-          {t('email')} <span className="text-destructive">*</span>
-        </label>
-        <input
-          id="email"
-          type="email"
-          value={formData.email}
-          onChange={(e) => updateField('email', e.target.value)}
-          className={cn(inputClass, errors.email ? 'border-destructive' : 'border-border')}
-          placeholder="your@email.com"
-        />
-        {errors.email && <p className="text-destructive mt-1 text-xs">{errors.email}</p>}
-      </div>
-
-      {/* Name row */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div>
-          <label htmlFor="firstName" className="text-foreground mb-1 block text-sm font-medium">
-            {t('firstName')} <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="firstName"
-            type="text"
-            value={formData.firstName}
-            onChange={(e) => updateField('firstName', e.target.value)}
-            className={cn(inputClass, errors.firstName ? 'border-destructive' : 'border-border')}
-          />
-          {errors.firstName && <p className="text-destructive mt-1 text-xs">{errors.firstName}</p>}
-        </div>
-
-        <div>
-          <label htmlFor="lastName" className="text-foreground mb-1 block text-sm font-medium">
-            {t('lastName')} <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="lastName"
-            type="text"
-            value={formData.lastName}
-            onChange={(e) => updateField('lastName', e.target.value)}
-            className={cn(inputClass, errors.lastName ? 'border-destructive' : 'border-border')}
-          />
-          {errors.lastName && <p className="text-destructive mt-1 text-xs">{errors.lastName}</p>}
-        </div>
-      </div>
-
-      {/* Country + Region row */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div>
-          <label htmlFor="country" className="text-foreground mb-1 block text-sm font-medium">
-            {t('country')} <span className="text-destructive">*</span>
-          </label>
-          {hasCountryOptions ? (
-            <select
-              id="country"
-              value={formData.country}
-              onChange={(e) => updateField('country', e.target.value)}
-              className={cn(selectClass, errors.country ? 'border-destructive' : 'border-border')}
-            >
-              <option value="">{t('selectCountry')}</option>
-              {destinations.countries.map((c) => (
-                <option key={c.code} value={c.code}>
-                  {c.name}
-                </option>
-              ))}
-            </select>
-          ) : (
-            <input
-              id="country"
-              type="text"
-              value={formData.country}
-              onChange={(e) => updateField('country', e.target.value)}
-              className={cn(inputClass, errors.country ? 'border-destructive' : 'border-border')}
-              placeholder={t('countryPlaceholder')}
-            />
-          )}
-          {errors.country && <p className="text-destructive mt-1 text-xs">{errors.country}</p>}
-        </div>
-
-        <div>
-          <label htmlFor="region" className="text-foreground mb-1 block text-sm font-medium">
-            {t('stateRegion')}
-          </label>
-          {hasRegionOptions ? (
-            <select
-              id="region"
-              value={formData.region || ''}
-              onChange={(e) => updateField('region', e.target.value)}
-              className={cn(selectClass, 'border-border')}
-            >
-              <option value="">{t('selectRegion')}</option>
-              {countryRegions.map((r) => (
-                <option key={r.code} value={r.code}>
-                  {r.name}
-                </option>
-              ))}
-            </select>
-          ) : (
-            <input
-              id="region"
-              type="text"
-              value={formData.region || ''}
-              onChange={(e) => updateField('region', e.target.value)}
-              className={cn(inputClass, 'border-border')}
-            />
-          )}
-        </div>
-      </div>
-
-      {/* Address line 1 */}
-      <div>
-        <label htmlFor="line1" className="text-foreground mb-1 block text-sm font-medium">
-          {t('address')} <span className="text-destructive">*</span>
-        </label>
-        <input
-          id="line1"
-          type="text"
-          value={formData.line1}
-          onChange={(e) => updateField('line1', e.target.value)}
-          className={cn(inputClass, errors.line1 ? 'border-destructive' : 'border-border')}
-          placeholder={t('streetAddress')}
-        />
-        {errors.line1 && <p className="text-destructive mt-1 text-xs">{errors.line1}</p>}
-      </div>
-
-      {/* Address line 2 */}
-      <div>
-        <label htmlFor="line2" className="text-foreground mb-1 block text-sm font-medium">
-          {t('apartmentSuite')}
-        </label>
-        <input
-          id="line2"
-          type="text"
-          value={formData.line2 || ''}
-          onChange={(e) => updateField('line2', e.target.value)}
-          className={cn(inputClass, 'border-border')}
-          placeholder={t('aptPlaceholder')}
-        />
-      </div>
-
-      {/* City + Postal code row */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div>
-          <label htmlFor="city" className="text-foreground mb-1 block text-sm font-medium">
-            {t('city')} <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="city"
-            type="text"
-            value={formData.city}
-            onChange={(e) => updateField('city', e.target.value)}
-            className={cn(inputClass, errors.city ? 'border-destructive' : 'border-border')}
-          />
-          {errors.city && <p className="text-destructive mt-1 text-xs">{errors.city}</p>}
-        </div>
-
-        <div>
-          <label htmlFor="postalCode" className="text-foreground mb-1 block text-sm font-medium">
-            {t('postalCode')} <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="postalCode"
-            type="text"
-            value={formData.postalCode}
-            onChange={(e) => updateField('postalCode', e.target.value)}
-            className={cn(inputClass, errors.postalCode ? 'border-destructive' : 'border-border')}
-          />
-          {errors.postalCode && (
-            <p className="text-destructive mt-1 text-xs">{errors.postalCode}</p>
-          )}
-        </div>
-      </div>
-
-      {/* Phone */}
-      <div>
-        <label htmlFor="phone" className="text-foreground mb-1 block text-sm font-medium">
-          {t('phone')}
-        </label>
-        <input
-          id="phone"
-          type="tel"
-          value={formData.phone || ''}
-          onChange={(e) => updateField('phone', e.target.value)}
-          className={cn(inputClass, 'border-border')}
-          placeholder={t('phonePlaceholder')}
-        />
-      </div>
-
-      <button
-        type="submit"
-        disabled={loading}
-        className="bg-primary text-primary-foreground w-full rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
-      >
-        {loading ? tc('saving') : t('continueToShipping')}
-      </button>
-    </form>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import type { SetShippingAddressDto, ShippingDestinations } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+interface CheckoutFormProps {
+  onSubmit: (address: SetShippingAddressDto) => void;
+  loading?: boolean;
+  initialValues?: Partial<SetShippingAddressDto>;
+  destinations?: ShippingDestinations | null;
+  className?: string;
+}
+
+export function CheckoutForm({
+  onSubmit,
+  loading = false,
+  initialValues,
+  destinations,
+  className,
+}: CheckoutFormProps) {
+  const [formData, setFormData] = useState<SetShippingAddressDto>({
+    email: initialValues?.email || '',
+    firstName: initialValues?.firstName || '',
+    lastName: initialValues?.lastName || '',
+    line1: initialValues?.line1 || '',
+    line2: initialValues?.line2 || '',
+    city: initialValues?.city || '',
+    region: initialValues?.region || '',
+    postalCode: initialValues?.postalCode || '',
+    country: initialValues?.country || '',
+    phone: initialValues?.phone || '',
+  });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const t = useTranslations('checkoutForm');
+  const tc = useTranslations('common');
+
+  const hasCountryOptions = destinations && destinations.countries.length > 0;
+  const countryRegions = destinations?.regions[formData.country];
+  const hasRegionOptions = countryRegions && countryRegions.length > 0;
+
+  function validate(): boolean {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.email.trim()) {
+      newErrors.email = t('emailRequired');
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = t('emailInvalid');
+    }
+
+    if (!formData.firstName.trim()) {
+      newErrors.firstName = t('firstNameRequired');
+    }
+    if (!formData.lastName.trim()) {
+      newErrors.lastName = t('lastNameRequired');
+    }
+    if (!formData.line1.trim()) {
+      newErrors.line1 = t('addressRequired');
+    }
+    if (!formData.city.trim()) {
+      newErrors.city = t('cityRequired');
+    }
+    if (!formData.postalCode.trim()) {
+      newErrors.postalCode = t('postalCodeRequired');
+    }
+    if (!formData.country.trim()) {
+      newErrors.country = t('countryRequired');
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (validate()) {
+      onSubmit(formData);
+    }
+  }
+
+  function updateField(field: keyof SetShippingAddressDto, value: string) {
+    setFormData((prev) => {
+      const next = { ...prev, [field]: value };
+      // Reset region when country changes
+      if (field === 'country' && value !== prev.country) {
+        next.region = '';
+      }
+      return next;
+    });
+    if (errors[field]) {
+      setErrors((prev) => {
+        const next = { ...prev };
+        delete next[field];
+        return next;
+      });
+    }
+  }
+
+  const inputClass =
+    'bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2';
+  const selectClass =
+    'bg-background text-foreground focus:ring-primary/20 focus:border-primary h-10 w-full appearance-none rounded border px-3 text-sm focus:outline-none focus:ring-2';
+
+  return (
+    <form onSubmit={handleSubmit} className={cn('space-y-4', className)}>
+      {/* Email */}
+      <div>
+        <label htmlFor="email" className="text-foreground mb-1 block text-sm font-medium">
+          {t('email')} <span className="text-destructive">*</span>
+        </label>
+        <input
+          id="email"
+          type="email"
+          value={formData.email}
+          onChange={(e) => updateField('email', e.target.value)}
+          className={cn(inputClass, errors.email ? 'border-destructive' : 'border-border')}
+          placeholder="your@email.com"
+        />
+        {errors.email && <p className="text-destructive mt-1 text-xs">{errors.email}</p>}
+      </div>
+
+      {/* Name row */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div>
+          <label htmlFor="firstName" className="text-foreground mb-1 block text-sm font-medium">
+            {t('firstName')} <span className="text-destructive">*</span>
+          </label>
+          <input
+            id="firstName"
+            type="text"
+            value={formData.firstName}
+            onChange={(e) => updateField('firstName', e.target.value)}
+            className={cn(inputClass, errors.firstName ? 'border-destructive' : 'border-border')}
+          />
+          {errors.firstName && <p className="text-destructive mt-1 text-xs">{errors.firstName}</p>}
+        </div>
+
+        <div>
+          <label htmlFor="lastName" className="text-foreground mb-1 block text-sm font-medium">
+            {t('lastName')} <span className="text-destructive">*</span>
+          </label>
+          <input
+            id="lastName"
+            type="text"
+            value={formData.lastName}
+            onChange={(e) => updateField('lastName', e.target.value)}
+            className={cn(inputClass, errors.lastName ? 'border-destructive' : 'border-border')}
+          />
+          {errors.lastName && <p className="text-destructive mt-1 text-xs">{errors.lastName}</p>}
+        </div>
+      </div>
+
+      {/* Country + Region row */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div>
+          <label htmlFor="country" className="text-foreground mb-1 block text-sm font-medium">
+            {t('country')} <span className="text-destructive">*</span>
+          </label>
+          {hasCountryOptions ? (
+            <select
+              id="country"
+              value={formData.country}
+              onChange={(e) => updateField('country', e.target.value)}
+              className={cn(selectClass, errors.country ? 'border-destructive' : 'border-border')}
+            >
+              <option value="">{t('selectCountry')}</option>
+              {destinations.countries.map((c) => (
+                <option key={c.code} value={c.code}>
+                  {c.name}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <input
+              id="country"
+              type="text"
+              value={formData.country}
+              onChange={(e) => updateField('country', e.target.value)}
+              className={cn(inputClass, errors.country ? 'border-destructive' : 'border-border')}
+              placeholder={t('countryPlaceholder')}
+            />
+          )}
+          {errors.country && <p className="text-destructive mt-1 text-xs">{errors.country}</p>}
+        </div>
+
+        <div>
+          <label htmlFor="region" className="text-foreground mb-1 block text-sm font-medium">
+            {t('stateRegion')}
+          </label>
+          {hasRegionOptions ? (
+            <select
+              id="region"
+              value={formData.region || ''}
+              onChange={(e) => updateField('region', e.target.value)}
+              className={cn(selectClass, 'border-border')}
+            >
+              <option value="">{t('selectRegion')}</option>
+              {countryRegions.map((r) => (
+                <option key={r.code} value={r.code}>
+                  {r.name}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <input
+              id="region"
+              type="text"
+              value={formData.region || ''}
+              onChange={(e) => updateField('region', e.target.value)}
+              className={cn(inputClass, 'border-border')}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Address line 1 */}
+      <div>
+        <label htmlFor="line1" className="text-foreground mb-1 block text-sm font-medium">
+          {t('address')} <span className="text-destructive">*</span>
+        </label>
+        <input
+          id="line1"
+          type="text"
+          value={formData.line1}
+          onChange={(e) => updateField('line1', e.target.value)}
+          className={cn(inputClass, errors.line1 ? 'border-destructive' : 'border-border')}
+          placeholder={t('streetAddress')}
+        />
+        {errors.line1 && <p className="text-destructive mt-1 text-xs">{errors.line1}</p>}
+      </div>
+
+      {/* Address line 2 */}
+      <div>
+        <label htmlFor="line2" className="text-foreground mb-1 block text-sm font-medium">
+          {t('apartmentSuite')}
+        </label>
+        <input
+          id="line2"
+          type="text"
+          value={formData.line2 || ''}
+          onChange={(e) => updateField('line2', e.target.value)}
+          className={cn(inputClass, 'border-border')}
+          placeholder={t('aptPlaceholder')}
+        />
+      </div>
+
+      {/* City + Postal code row */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div>
+          <label htmlFor="city" className="text-foreground mb-1 block text-sm font-medium">
+            {t('city')} <span className="text-destructive">*</span>
+          </label>
+          <input
+            id="city"
+            type="text"
+            value={formData.city}
+            onChange={(e) => updateField('city', e.target.value)}
+            className={cn(inputClass, errors.city ? 'border-destructive' : 'border-border')}
+          />
+          {errors.city && <p className="text-destructive mt-1 text-xs">{errors.city}</p>}
+        </div>
+
+        <div>
+          <label htmlFor="postalCode" className="text-foreground mb-1 block text-sm font-medium">
+            {t('postalCode')} <span className="text-destructive">*</span>
+          </label>
+          <input
+            id="postalCode"
+            type="text"
+            value={formData.postalCode}
+            onChange={(e) => updateField('postalCode', e.target.value)}
+            className={cn(inputClass, errors.postalCode ? 'border-destructive' : 'border-border')}
+          />
+          {errors.postalCode && (
+            <p className="text-destructive mt-1 text-xs">{errors.postalCode}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Phone */}
+      <div>
+        <label htmlFor="phone" className="text-foreground mb-1 block text-sm font-medium">
+          {t('phone')}
+        </label>
+        <input
+          id="phone"
+          type="tel"
+          value={formData.phone || ''}
+          onChange={(e) => updateField('phone', e.target.value)}
+          className={cn(inputClass, 'border-border')}
+          placeholder={t('phonePlaceholder')}
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={loading}
+        className="bg-primary text-primary-foreground w-full rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        {loading ? tc('saving') : t('continueToShipping')}
+      </button>
+    </form>
+  );
+}