create-brainerce-store 1.0.0 → 1.1.0

package/templates/nextjs/base/src/components/auth/oauth-buttons.tsx

@@ -80,7 +80,7 @@ export function OAuthButtons({ className }: OAuthButtonsProps) {
     try {
       setRedirecting(provider);
       const client = getClient();
-      const redirectUrl = window.location.origin + '/auth/callback?provider=' + provider;
+      const redirectUrl = window.location.origin + '/auth/callback';
       const result = await client.getOAuthAuthorizeUrl(provider, { redirectUrl });
       window.location.href = result.authorizationUrl;
     } catch (err) {

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

@@ -1,273 +1,302 @@
-'use client';
-
-import { useState } from 'react';
-import type { SetShippingAddressDto } from 'brainerce';
-import { cn } from '@/lib/utils';
-
-interface CheckoutFormProps {
-  onSubmit: (address: SetShippingAddressDto) => void;
-  loading?: boolean;
-  initialValues?: Partial<SetShippingAddressDto>;
-  className?: string;
-}
-
-export function CheckoutForm({
-  onSubmit,
-  loading = false,
-  initialValues,
-  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>>({});
-
-  function validate(): boolean {
-    const newErrors: Record<string, string> = {};
-
-    if (!formData.email.trim()) {
-      newErrors.email = 'Email is required';
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = 'Please enter a valid email';
-    }
-
-    if (!formData.firstName.trim()) {
-      newErrors.firstName = 'First name is required';
-    }
-    if (!formData.lastName.trim()) {
-      newErrors.lastName = 'Last name is required';
-    }
-    if (!formData.line1.trim()) {
-      newErrors.line1 = 'Address is required';
-    }
-    if (!formData.city.trim()) {
-      newErrors.city = 'City is required';
-    }
-    if (!formData.postalCode.trim()) {
-      newErrors.postalCode = 'Postal code is required';
-    }
-    if (!formData.country.trim()) {
-      newErrors.country = 'Country is required';
-    }
-
-    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) => ({ ...prev, [field]: value }));
-    if (errors[field]) {
-      setErrors((prev) => {
-        const next = { ...prev };
-        delete next[field];
-        return next;
-      });
-    }
-  }
-
-  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">
-          Email <span className="text-destructive">*</span>
-        </label>
-        <input
-          id="email"
-          type="email"
-          value={formData.email}
-          onChange={(e) => updateField('email', e.target.value)}
-          className={cn(
-            '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',
-            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">
-            First Name <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="firstName"
-            type="text"
-            value={formData.firstName}
-            onChange={(e) => updateField('firstName', e.target.value)}
-            className={cn(
-              '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',
-              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">
-            Last Name <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="lastName"
-            type="text"
-            value={formData.lastName}
-            onChange={(e) => updateField('lastName', e.target.value)}
-            className={cn(
-              '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',
-              errors.lastName ? 'border-destructive' : 'border-border'
-            )}
-          />
-          {errors.lastName && <p className="text-destructive mt-1 text-xs">{errors.lastName}</p>}
-        </div>
-      </div>
-
-      {/* Address line 1 */}
-      <div>
-        <label htmlFor="line1" className="text-foreground mb-1 block text-sm font-medium">
-          Address <span className="text-destructive">*</span>
-        </label>
-        <input
-          id="line1"
-          type="text"
-          value={formData.line1}
-          onChange={(e) => updateField('line1', e.target.value)}
-          className={cn(
-            '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',
-            errors.line1 ? 'border-destructive' : 'border-border'
-          )}
-          placeholder="Street address"
-        />
-        {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">
-          Apartment, suite, etc.
-        </label>
-        <input
-          id="line2"
-          type="text"
-          value={formData.line2 || ''}
-          onChange={(e) => updateField('line2', e.target.value)}
-          className="border-border 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"
-          placeholder="Apt, suite, unit, etc. (optional)"
-        />
-      </div>
-
-      {/* City + Region 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">
-            City <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="city"
-            type="text"
-            value={formData.city}
-            onChange={(e) => updateField('city', e.target.value)}
-            className={cn(
-              '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',
-              errors.city ? 'border-destructive' : 'border-border'
-            )}
-          />
-          {errors.city && <p className="text-destructive mt-1 text-xs">{errors.city}</p>}
-        </div>
-
-        <div>
-          <label htmlFor="region" className="text-foreground mb-1 block text-sm font-medium">
-            State / Region
-          </label>
-          <input
-            id="region"
-            type="text"
-            value={formData.region || ''}
-            onChange={(e) => updateField('region', e.target.value)}
-            className="border-border 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"
-          />
-        </div>
-      </div>
-
-      {/* Postal code + Country row */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div>
-          <label htmlFor="postalCode" className="text-foreground mb-1 block text-sm font-medium">
-            Postal Code <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="postalCode"
-            type="text"
-            value={formData.postalCode}
-            onChange={(e) => updateField('postalCode', e.target.value)}
-            className={cn(
-              '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',
-              errors.postalCode ? 'border-destructive' : 'border-border'
-            )}
-          />
-          {errors.postalCode && (
-            <p className="text-destructive mt-1 text-xs">{errors.postalCode}</p>
-          )}
-        </div>
-
-        <div>
-          <label htmlFor="country" className="text-foreground mb-1 block text-sm font-medium">
-            Country <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="country"
-            type="text"
-            value={formData.country}
-            onChange={(e) => updateField('country', e.target.value)}
-            className={cn(
-              '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',
-              errors.country ? 'border-destructive' : 'border-border'
-            )}
-            placeholder="e.g. US, IL, GB"
-          />
-          {errors.country && <p className="text-destructive mt-1 text-xs">{errors.country}</p>}
-        </div>
-      </div>
-
-      {/* Phone */}
-      <div>
-        <label htmlFor="phone" className="text-foreground mb-1 block text-sm font-medium">
-          Phone
-        </label>
-        <input
-          id="phone"
-          type="tel"
-          value={formData.phone || ''}
-          onChange={(e) => updateField('phone', e.target.value)}
-          className="border-border 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"
-          placeholder="+1234567890 (optional)"
-        />
-      </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 ? 'Saving...' : 'Continue to Shipping'}
-      </button>
-    </form>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import type { SetShippingAddressDto, ShippingDestinations } from 'brainerce';
+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 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 = 'Email is required';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = 'Please enter a valid email';
+    }
+
+    if (!formData.firstName.trim()) {
+      newErrors.firstName = 'First name is required';
+    }
+    if (!formData.lastName.trim()) {
+      newErrors.lastName = 'Last name is required';
+    }
+    if (!formData.line1.trim()) {
+      newErrors.line1 = 'Address is required';
+    }
+    if (!formData.city.trim()) {
+      newErrors.city = 'City is required';
+    }
+    if (!formData.postalCode.trim()) {
+      newErrors.postalCode = 'Postal code is required';
+    }
+    if (!formData.country.trim()) {
+      newErrors.country = 'Country is required';
+    }
+
+    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">
+          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">
+            First Name <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">
+            Last Name <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">
+            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="">Select country</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="e.g. US, IL, GB"
+            />
+          )}
+          {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">
+            State / Region
+          </label>
+          {hasRegionOptions ? (
+            <select
+              id="region"
+              value={formData.region || ''}
+              onChange={(e) => updateField('region', e.target.value)}
+              className={cn(selectClass, 'border-border')}
+            >
+              <option value="">Select region</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">
+          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="Street address"
+        />
+        {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">
+          Apartment, suite, etc.
+        </label>
+        <input
+          id="line2"
+          type="text"
+          value={formData.line2 || ''}
+          onChange={(e) => updateField('line2', e.target.value)}
+          className={cn(inputClass, 'border-border')}
+          placeholder="Apt, suite, unit, etc. (optional)"
+        />
+      </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">
+            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">
+            Postal Code <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">
+          Phone
+        </label>
+        <input
+          id="phone"
+          type="tel"
+          value={formData.phone || ''}
+          onChange={(e) => updateField('phone', e.target.value)}
+          className={cn(inputClass, 'border-border')}
+          placeholder="+1234567890 (optional)"
+        />
+      </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 ? 'Saving...' : 'Continue to Shipping'}
+      </button>
+    </form>
+  );
+}