create-brainerce-store 1.0.0

package/templates/nextjs/base/src/components/cart/cart-item.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import type { CartItem as CartItemType } from 'brainerce';
+import { getCartItemName, getCartItemImage, formatPrice } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { cn } from '@/lib/utils';
+
+interface CartItemProps {
+  item: CartItemType;
+  onUpdate: () => void;
+  className?: string;
+}
+
+export function CartItem({ item, onUpdate, className }: CartItemProps) {
+  const { storeInfo } = useStoreInfo();
+  const currency = storeInfo?.currency || 'USD';
+  const [updating, setUpdating] = useState(false);
+  const [removing, setRemoving] = useState(false);
+
+  const name = getCartItemName(item);
+  const imageUrl = getCartItemImage(item);
+  const variantName = item.variant?.name;
+  const unitPrice = parseFloat(item.unitPrice);
+  const lineTotal = unitPrice * item.quantity;
+
+  async function handleQuantityChange(newQuantity: number) {
+    if (newQuantity < 1 || updating) return;
+
+    try {
+      setUpdating(true);
+      const client = getClient();
+      await client.smartUpdateCartItem(item.productId, newQuantity, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to update quantity:', err);
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      const client = getClient();
+      await client.smartRemoveFromCart(item.productId, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove item:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'border-border flex gap-4 border-b py-4 last:border-0',
+        (updating || removing) && 'opacity-60',
+        className
+      )}
+    >
+      {/* Image */}
+      <div className="bg-muted relative h-20 w-20 flex-shrink-0 overflow-hidden rounded">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={name} fill sizes="80px" className="object-cover" />
+        ) : (
+          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+            <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+
+      {/* Details */}
+      <div className="min-w-0 flex-1">
+        <h3 className="text-foreground truncate text-sm font-medium">{name}</h3>
+
+        {/* Variant name */}
+        {variantName && <p className="text-muted-foreground mt-1 text-xs">{variantName}</p>}
+
+        {/* Unit price */}
+        <p className="text-muted-foreground mt-1 text-sm">
+          {formatPrice(unitPrice, { currency }) as string}
+        </p>
+
+        {/* Quantity controls */}
+        <div className="mt-2 flex items-center gap-3">
+          <div className="border-border flex items-center rounded border">
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity - 1)}
+              disabled={updating || item.quantity <= 1}
+              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+              aria-label="Decrease quantity"
+            >
+              -
+            </button>
+            <span className="text-foreground min-w-[2.5rem] px-3 py-1 text-center text-sm font-medium">
+              {updating ? (
+                <LoadingSpinner
+                  size="sm"
+                  className="border-muted-foreground/30 border-t-foreground mx-auto"
+                />
+              ) : (
+                item.quantity
+              )}
+            </span>
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity + 1)}
+              disabled={updating}
+              className="text-foreground hover:bg-muted px-2 py-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+              aria-label="Increase quantity"
+            >
+              +
+            </button>
+          </div>
+
+          <button
+            type="button"
+            onClick={handleRemove}
+            disabled={removing}
+            className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-40"
+          >
+            {removing ? 'Removing...' : 'Remove'}
+          </button>
+        </div>
+      </div>
+
+      {/* Line total */}
+      <div className="flex-shrink-0 text-end">
+        <span className="text-foreground text-sm font-medium">
+          {formatPrice(lineTotal, { currency }) as string}
+        </span>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/cart/cart-nudges.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import type { CartNudge } from 'brainerce';
+import { cn } from '@/lib/utils';
+
+interface CartNudgesProps {
+  nudges: CartNudge[];
+  className?: string;
+}
+
+export function CartNudges({ nudges, className }: CartNudgesProps) {
+  if (nudges.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {nudges.map((nudge) => (
+        <div
+          key={nudge.ruleId}
+          className="bg-primary/5 border-primary/20 flex items-start gap-3 rounded-lg border px-4 py-3"
+        >
+          <svg
+            className="text-primary mt-0.5 h-5 w-5 flex-shrink-0"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <p className="text-foreground flex-1 text-sm">{nudge.text}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/cart/cart-summary.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useStoreInfo, useCart } from '@/providers/store-provider';
+import { cn } from '@/lib/utils';
+
+interface CartSummaryProps {
+  className?: string;
+}
+
+export function CartSummary({ className }: CartSummaryProps) {
+  const { storeInfo } = useStoreInfo();
+  const { totals } = useCart();
+  const currency = storeInfo?.currency || 'USD';
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      <h3 className="text-foreground text-lg font-semibold">Order Summary</h3>
+
+      <div className="space-y-2 text-sm">
+        {/* Subtotal */}
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">Subtotal</span>
+          <span className="text-foreground font-medium">
+            {formatPrice(totals.subtotal, { currency }) as string}
+          </span>
+        </div>
+
+        {/* Discount */}
+        {totals.discount > 0 && (
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">Discount</span>
+            <span className="text-destructive font-medium">
+              -{formatPrice(totals.discount, { currency }) as string}
+            </span>
+          </div>
+        )}
+
+        {/* Shipping */}
+        {totals.shipping > 0 && (
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">Shipping</span>
+            <span className="text-foreground font-medium">
+              {formatPrice(totals.shipping, { currency }) as string}
+            </span>
+          </div>
+        )}
+
+        {/* Tax */}
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">Tax</span>
+          <span className="text-muted-foreground text-xs">Calculated at checkout</span>
+        </div>
+
+        {/* Divider */}
+        <div className="border-border mt-2 border-t pt-2">
+          <div className="flex items-center justify-between">
+            <span className="text-foreground font-semibold">Total</span>
+            <span className="text-foreground text-base font-semibold">
+              {formatPrice(totals.total, { currency }) as string}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/cart/coupon-input.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useState } from 'react';
+import type { Cart } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { cn } from '@/lib/utils';
+
+interface CouponInputProps {
+  cart: Cart;
+  onUpdate: () => void;
+  className?: string;
+}
+
+export function CouponInput({ cart, onUpdate, className }: CouponInputProps) {
+  const [code, setCode] = useState('');
+  const [applying, setApplying] = useState(false);
+  const [removing, setRemoving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const appliedCoupon = cart.couponCode || null;
+
+  async function handleApply() {
+    const trimmed = code.trim();
+    if (!trimmed || applying) return;
+
+    try {
+      setApplying(true);
+      setError(null);
+      const client = getClient();
+      await client.applyCoupon(cart.id, trimmed);
+      setCode('');
+      onUpdate();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Invalid coupon code';
+      setError(message);
+    } finally {
+      setApplying(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      setError(null);
+      const client = getClient();
+      await client.removeCoupon(cart.id);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove coupon:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  // Show applied coupon
+  if (appliedCoupon) {
+    return (
+      <div className={cn('space-y-2', className)}>
+        <div className="bg-muted flex items-center justify-between rounded px-3 py-2">
+          <div className="flex items-center gap-2">
+            <svg
+              className="text-primary h-4 w-4 flex-shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+              />
+            </svg>
+            <span className="text-foreground text-sm font-medium">{appliedCoupon}</span>
+          </div>
+          <button
+            type="button"
+            onClick={handleRemove}
+            disabled={removing}
+            className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-40"
+          >
+            {removing ? 'Removing...' : 'Remove'}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={code}
+          onChange={(e) => {
+            setCode(e.target.value);
+            if (error) setError(null);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleApply();
+            }
+          }}
+          placeholder="Coupon code"
+          className={cn(
+            'bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-9 flex-1 rounded border px-3 text-sm focus:outline-none focus:ring-2',
+            error ? 'border-destructive' : 'border-border'
+          )}
+        />
+        <button
+          type="button"
+          onClick={handleApply}
+          disabled={applying || !code.trim()}
+          className="border-border bg-background text-foreground hover:bg-muted h-9 rounded border px-4 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          {applying ? (
+            <LoadingSpinner size="sm" className="border-muted-foreground/30 border-t-foreground" />
+          ) : (
+            'Apply'
+          )}
+        </button>
+      </div>
+
+      {error && <p className="text-destructive text-xs">{error}</p>}
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/cart/reservation-countdown.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import type { ReservationInfo } from 'brainerce';
+import { cn } from '@/lib/utils';
+
+interface ReservationCountdownProps {
+  reservation: ReservationInfo;
+  className?: string;
+}
+
+export function ReservationCountdown({ reservation, className }: ReservationCountdownProps) {
+  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
+
+  const calculateRemaining = useCallback(() => {
+    if (!reservation.expiresAt) return 0;
+    const expiresAtMs = new Date(reservation.expiresAt).getTime();
+    const nowMs = Date.now();
+    return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
+  }, [reservation.expiresAt]);
+
+  useEffect(() => {
+    setRemainingSeconds(calculateRemaining());
+
+    const interval = setInterval(() => {
+      const remaining = calculateRemaining();
+      setRemainingSeconds(remaining);
+
+      if (remaining <= 0) {
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [calculateRemaining]);
+
+  if (!reservation.hasReservation) return null;
+
+  const minutes = Math.floor(remainingSeconds / 60);
+  const seconds = remainingSeconds % 60;
+  const isExpired = remainingSeconds <= 0;
+  const isUrgent = remainingSeconds > 0 && remainingSeconds < 120;
+
+  const displayMessage = reservation.countdownMessage
+    ? reservation.countdownMessage.replace(
+        '{time}',
+        `${minutes}:${seconds.toString().padStart(2, '0')}`
+      )
+    : null;
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 rounded-lg px-4 py-3 text-sm',
+        isExpired
+          ? 'bg-destructive/10 border-destructive/20 text-destructive border'
+          : isUrgent
+            ? 'border border-orange-200 bg-orange-50 text-orange-800 dark:border-orange-800 dark:bg-orange-950/30 dark:text-orange-300'
+            : 'bg-primary/5 border-primary/20 text-foreground border',
+        className
+      )}
+    >
+      <svg
+        className={cn(
+          'h-5 w-5 flex-shrink-0',
+          isExpired
+            ? 'text-destructive'
+            : isUrgent
+              ? 'text-orange-600 dark:text-orange-400'
+              : 'text-primary'
+        )}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+
+      <div className="flex-1">
+        {isExpired ? (
+          <p className="font-medium">Reservation expired. Items may no longer be available.</p>
+        ) : displayMessage ? (
+          <p>{displayMessage}</p>
+        ) : (
+          <p>
+            {isUrgent ? 'Hurry! ' : ''}Items reserved for{' '}
+            <span className="font-semibold tabular-nums">
+              {minutes}:{seconds.toString().padStart(2, '0')}
+            </span>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}