create-brainerce-store 1.0.0

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

@@ -0,0 +1,273 @@
+'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>
+  );
+}

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

@@ -0,0 +1,124 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { PaymentIntent } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { cn } from '@/lib/utils';
+
+interface PaymentStepProps {
+  checkoutId: string;
+  className?: string;
+}
+
+export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
+  const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function createIntent() {
+      try {
+        setLoading(true);
+        setError(null);
+        const client = getClient();
+
+        const successUrl = `${window.location.origin}/order-confirmation?checkout_id=${checkoutId}`;
+        const cancelUrl = `${window.location.origin}/checkout?checkout_id=${checkoutId}&canceled=true`;
+
+        const intent = await client.createPaymentIntent(checkoutId, {
+          successUrl,
+          cancelUrl,
+        });
+
+        setPaymentIntent(intent);
+
+        // Auto-redirect based on provider
+        if (intent.provider === 'stripe') {
+          // For Stripe with checkout sessions, clientSecret is the checkout URL
+          // Redirect to Stripe Checkout
+          window.location.href = intent.clientSecret;
+        } else if (intent.provider === 'grow') {
+          // Grow uses a payment page URL as clientSecret
+          window.location.href = intent.clientSecret;
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to create payment';
+        setError(message);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    createIntent();
+  }, [checkoutId]);
+
+  if (loading) {
+    return (
+      <div className={cn('flex flex-col items-center justify-center py-12', className)}>
+        <LoadingSpinner size="lg" />
+        <p className="text-muted-foreground mt-4 text-sm">Preparing payment...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    // Check if it's a "no payment provider" error
+    const isNotConfigured =
+      error.toLowerCase().includes('not configured') ||
+      error.toLowerCase().includes('no payment') ||
+      error.toLowerCase().includes('provider');
+
+    return (
+      <div className={cn('py-12 text-center', className)}>
+        <svg
+          className="text-muted-foreground mx-auto mb-4 h-12 w-12"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+          />
+        </svg>
+        <h3 className="text-foreground mb-2 text-lg font-semibold">
+          {isNotConfigured ? 'Payment Not Configured' : 'Payment Error'}
+        </h3>
+        <p className="text-muted-foreground mx-auto max-w-md text-sm">
+          {isNotConfigured
+            ? 'Payment has not been set up for this store yet. Please contact the store owner.'
+            : error}
+        </p>
+      </div>
+    );
+  }
+
+  // Redirecting state
+  if (paymentIntent) {
+    const providerName =
+      paymentIntent.provider === 'stripe'
+        ? 'Stripe'
+        : paymentIntent.provider === 'grow'
+          ? 'payment provider'
+          : 'payment provider';
+
+    return (
+      <div className={cn('flex flex-col items-center justify-center py-12', className)}>
+        <LoadingSpinner size="lg" />
+        <p className="text-muted-foreground mt-4 text-sm">Redirecting to {providerName}...</p>
+        <p className="text-muted-foreground mt-2 text-xs">
+          If you are not redirected automatically,{' '}
+          <a href={paymentIntent.clientSecret} className="text-primary hover:underline">
+            click here
+          </a>
+          .
+        </p>
+      </div>
+    );
+  }
+
+  return null;
+}

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

@@ -0,0 +1,111 @@
+'use client';
+
+import type { ShippingRate } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { cn } from '@/lib/utils';
+
+interface ShippingStepProps {
+  rates: ShippingRate[];
+  selectedRateId: string | null;
+  onSelect: (rateId: string) => void;
+  loading?: boolean;
+  className?: string;
+}
+
+export function ShippingStep({
+  rates,
+  selectedRateId,
+  onSelect,
+  loading = false,
+  className,
+}: ShippingStepProps) {
+  const { storeInfo } = useStoreInfo();
+  const currency = storeInfo?.currency || 'USD';
+
+  if (rates.length === 0) {
+    return (
+      <div className={cn('py-8 text-center', className)}>
+        <svg
+          className="text-muted-foreground mx-auto mb-3 h-10 w-10"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+          />
+        </svg>
+        <p className="text-muted-foreground text-sm">
+          No shipping options available for this address.
+        </p>
+        <p className="text-muted-foreground mt-1 text-xs">
+          Please try a different address or contact support.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {rates.map((rate) => {
+        const price = parseFloat(rate.price);
+        const isFree = price === 0;
+        const isSelected = selectedRateId === rate.id;
+
+        return (
+          <button
+            key={rate.id}
+            type="button"
+            onClick={() => onSelect(rate.id)}
+            disabled={loading}
+            className={cn(
+              'flex w-full items-center gap-4 rounded border px-4 py-3 text-start transition-colors',
+              isSelected
+                ? 'border-primary bg-primary/5'
+                : 'border-border hover:border-muted-foreground',
+              loading && 'cursor-not-allowed opacity-60'
+            )}
+          >
+            {/* Radio indicator */}
+            <div
+              className={cn(
+                'flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full border-2',
+                isSelected ? 'border-primary' : 'border-muted-foreground/40'
+              )}
+            >
+              {isSelected && <div className="bg-primary h-2 w-2 rounded-full" />}
+            </div>
+
+            {/* Rate info */}
+            <div className="min-w-0 flex-1">
+              <p className="text-foreground text-sm font-medium">{rate.name}</p>
+              {rate.description && (
+                <p className="text-muted-foreground mt-0.5 text-xs">{rate.description}</p>
+              )}
+              {rate.estimatedDays != null && (
+                <p className="text-muted-foreground mt-0.5 text-xs">
+                  Estimated delivery: {rate.estimatedDays}{' '}
+                  {rate.estimatedDays === 1 ? 'day' : 'days'}
+                </p>
+              )}
+            </div>
+
+            {/* Price */}
+            <span
+              className={cn(
+                'flex-shrink-0 text-sm font-medium',
+                isFree ? 'text-primary' : 'text-foreground'
+              )}
+            >
+              {isFree ? 'Free' : (formatPrice(price, { currency }) as string)}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/checkout/tax-display.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import type { TaxBreakdown } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { cn } from '@/lib/utils';
+
+interface TaxDisplayProps {
+  /** Whether shipping address has been set */
+  addressSet: boolean;
+  /** Tax amount string from checkout (only available after address is set) */
+  taxAmount?: string;
+  /** Detailed tax breakdown (optional) */
+  taxBreakdown?: TaxBreakdown | null;
+  className?: string;
+}
+
+export function TaxDisplay({ addressSet, taxAmount, taxBreakdown, className }: TaxDisplayProps) {
+  const { storeInfo } = useStoreInfo();
+  const currency = storeInfo?.currency || 'USD';
+
+  // Before address is set
+  if (!addressSet) {
+    return (
+      <div className={cn('flex items-center justify-between text-sm', className)}>
+        <span className="text-muted-foreground">Tax</span>
+        <span className="text-muted-foreground text-xs">Calculated after address entry</span>
+      </div>
+    );
+  }
+
+  // After address, show tax amount
+  const tax = taxAmount ? parseFloat(taxAmount) : 0;
+
+  return (
+    <div className={cn('space-y-1', className)}>
+      <div className="flex items-center justify-between text-sm">
+        <span className="text-muted-foreground">Tax</span>
+        <span className="text-foreground font-medium">
+          {tax > 0 ? (formatPrice(tax, { currency }) as string) : 'No tax'}
+        </span>
+      </div>
+
+      {/* Tax breakdown details */}
+      {taxBreakdown && taxBreakdown.breakdown.length > 0 && tax > 0 && (
+        <div className="space-y-0.5 ps-4">
+          {taxBreakdown.breakdown.map((item, index) => (
+            <div
+              key={index}
+              className="text-muted-foreground flex items-center justify-between text-xs"
+            >
+              <span>
+                {item.name} ({(item.rate * 100).toFixed(1)}%)
+              </span>
+              <span>{formatPrice(item.amount, { currency }) as string}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/layout/footer.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import Link from 'next/link';
+import { useStoreInfo } from '@/providers/store-provider';
+
+export function Footer() {
+  const { storeInfo } = useStoreInfo();
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="border-border bg-background border-t">
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+          <p className="text-muted-foreground text-sm">
+            {year} {storeInfo?.name || 'Store'}. All rights reserved.
+          </p>
+          <nav className="flex items-center gap-4">
+            <Link
+              href="/products"
+              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              Products
+            </Link>
+            <Link
+              href="/account"
+              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              Account
+            </Link>
+          </nav>
+        </div>
+      </div>
+    </footer>
+  );
+}