create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/ui-canvas/cart/cart-upgrade-banner.tsx

@@ -1,105 +1,105 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { CartUpgradeSuggestion, CartItem as CartItemType } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { getClient } from '@/core/lib/brainerce';
-import { useCurrency } from '@/core/lib/use-currency';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface CartUpgradeBannerProps {
-  suggestion: CartUpgradeSuggestion;
-  cartItem: CartItemType;
-  onUpgrade: () => void;
-  className?: string;
-}
-
-/**
- * DESIGN ME — per-line upgrade suggestion under a cart item ("upgrade to X
- * for +Y"); the suggestion comes from useCartPage().upgrades keyed by
- * productId. Keep the session-scoped dismiss and the swap logic.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function CartUpgradeBanner({
-  suggestion,
-  cartItem,
-  onUpgrade,
-  className,
-}: CartUpgradeBannerProps) {
-  const t = useTranslations('cart');
-  const currency = useCurrency();
-  const [upgrading, setUpgrading] = useState(false);
-  const [dismissed, setDismissed] = useState(false);
-
-  const storageKey = `dismissed_upgrade_${suggestion.sourceProductId}`;
-
-  useEffect(() => {
-    try {
-      if (sessionStorage.getItem(storageKey)) {
-        setDismissed(true);
-      }
-    } catch {
-      /* ignore */
-    }
-  }, [storageKey]);
-
-  if (dismissed) return null;
-
-  const target = suggestion.targetProduct;
-  const firstImage = target.images?.[0];
-  const imageUrl = firstImage
-    ? typeof firstImage === 'string'
-      ? firstImage
-      : firstImage.url
-    : null;
-  const formattedDelta = formatPrice(parseFloat(suggestion.priceDelta), { currency }) as string;
-
-  function handleDismiss() {
-    try {
-      sessionStorage.setItem(storageKey, '1');
-    } catch {
-      /* ignore */
-    }
-    setDismissed(true);
-  }
-
-  async function handleUpgrade() {
-    if (upgrading) return;
-    try {
-      setUpgrading(true);
-      const client = getClient();
-      await client.smartRemoveFromCart(cartItem.productId, cartItem.variantId || undefined);
-      await client.smartAddToCart({ productId: target.id, quantity: cartItem.quantity });
-      onUpgrade();
-    } catch (err) {
-      console.error('Failed to upgrade cart item:', err);
-    } finally {
-      setUpgrading(false);
-    }
-  }
-
-  return (
-    <div className={cn('flex items-center gap-3', className)}>
-      {/* Product image — `relative` + fixed box are layout-critical for next/image fill */}
-      <span className="relative block h-12 w-12">
-        {imageUrl ? <Image src={imageUrl} alt={target.name} fill sizes="48px" /> : null}
-      </span>
-
-      {/* Text */}
-      <p>{t('upgradeFor', { name: target.name, amount: formattedDelta })}</p>
-
-      {/* Upgrade button */}
-      <button type="button" onClick={handleUpgrade} disabled={upgrading}>
-        {upgrading ? t('upgrading') : t('upgrade')}
-      </button>
-
-      {/* Dismiss button */}
-      <button type="button" onClick={handleDismiss} aria-label={t('dismissUpgrade')}>
-        ×
-      </button>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartUpgradeSuggestion, CartItem as CartItemType } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface CartUpgradeBannerProps {
+  suggestion: CartUpgradeSuggestion;
+  cartItem: CartItemType;
+  onUpgrade: () => void;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — per-line upgrade suggestion under a cart item ("upgrade to X
+ * for +Y"); the suggestion comes from useCartPage().upgrades keyed by
+ * productId. Keep the session-scoped dismiss and the swap logic.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function CartUpgradeBanner({
+  suggestion,
+  cartItem,
+  onUpgrade,
+  className,
+}: CartUpgradeBannerProps) {
+  const t = useTranslations('cart');
+  const currency = useCurrency();
+  const [upgrading, setUpgrading] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  const storageKey = `dismissed_upgrade_${suggestion.sourceProductId}`;
+
+  useEffect(() => {
+    try {
+      if (sessionStorage.getItem(storageKey)) {
+        setDismissed(true);
+      }
+    } catch {
+      /* ignore */
+    }
+  }, [storageKey]);
+
+  if (dismissed) return null;
+
+  const target = suggestion.targetProduct;
+  const firstImage = target.images?.[0];
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
+  const formattedDelta = formatPrice(parseFloat(suggestion.priceDelta), { currency }) as string;
+
+  function handleDismiss() {
+    try {
+      sessionStorage.setItem(storageKey, '1');
+    } catch {
+      /* ignore */
+    }
+    setDismissed(true);
+  }
+
+  async function handleUpgrade() {
+    if (upgrading) return;
+    try {
+      setUpgrading(true);
+      const client = getClient();
+      await client.smartRemoveFromCart(cartItem.productId, cartItem.variantId || undefined);
+      await client.smartAddToCart({ productId: target.id, quantity: cartItem.quantity });
+      onUpgrade();
+    } catch (err) {
+      console.error('Failed to upgrade cart item:', err);
+    } finally {
+      setUpgrading(false);
+    }
+  }
+
+  return (
+    <div className={cn('flex items-center gap-3', className)}>
+      {/* Product image — `relative` + fixed box are layout-critical for next/image fill */}
+      <span className="relative block h-12 w-12">
+        {imageUrl ? <Image src={imageUrl} alt={target.name} fill sizes="48px" /> : null}
+      </span>
+
+      {/* Text */}
+      <p>{t('upgradeFor', { name: target.name, amount: formattedDelta })}</p>
+
+      {/* Upgrade button */}
+      <button type="button" onClick={handleUpgrade} disabled={upgrading}>
+        {upgrading ? t('upgrading') : t('upgrade')}
+      </button>
+
+      {/* Dismiss button */}
+      <button type="button" onClick={handleDismiss} aria-label={t('dismissUpgrade')}>
+        ×
+      </button>
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/cart/cart-view.tsx

@@ -1,106 +1,106 @@
-'use client';
-
-import { Link } from '@/core/lib/navigation';
-import { useCartPage } from '@/core/hooks/use-cart-page';
-import { CartItem } from '@/ui/cart/cart-item';
-import { CartUpgradeBanner } from '@/ui/cart/cart-upgrade-banner';
-import { CartBundleOfferCard } from '@/ui/cart/cart-bundle-offer';
-import { CartSummary } from '@/ui/cart/cart-summary';
-import { CouponInput } from '@/ui/cart/coupon-input';
-import { CartNudges } from '@/ui/cart/cart-nudges';
-import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
-import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
-import { CartRecommendationSection } from '@/ui/product/recommendation-section';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { useTranslations } from '@/core/lib/translations';
-
-export function CartView() {
-  const t = useTranslations('cart');
-  const tc = useTranslations('common');
-  const { cart, cartLoading, refreshCart, itemCount, cartRecs, upgrades, bundles } = useCartPage();
-
-  if (cartLoading) {
-    return <LoadingSpinner size="lg" />;
-  }
-
-  // Empty cart state
-  if (!cart || cart.items.length === 0) {
-    return (
-      <section>
-        {/* DESIGN ME — empty-cart state: message + continue-shopping CTA; state comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-        <h1>{t('emptyTitle')}</h1>
-        <p>{t('emptySubtitle')}</p>
-        <Link href="/products">{tc('continueShopping')}</Link>
-      </section>
-    );
-  }
-
-  return (
-    <section>
-      {/* DESIGN ME — cart page: items list, upgrade/bundle offers, coupon, summary sidebar, checkout CTA, cross-sells; everything comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <h1>
-        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
-      </h1>
-
-      {/* Reservation countdown */}
-      {cart.reservation?.hasReservation && <ReservationCountdown reservation={cart.reservation} />}
-
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        {/* Cart Items */}
-        <div className="lg:col-span-2">
-          {/* Nudges */}
-          {cart.nudges && cart.nudges.length > 0 && <CartNudges nudges={cart.nudges} />}
-
-          {/* Cart items */}
-          <ul>
-            {cart.items.map((item) => (
-              <li key={item.id}>
-                <CartItem item={item} onUpdate={refreshCart} />
-                {upgrades?.upgrades?.[item.productId] && (
-                  <CartUpgradeBanner
-                    suggestion={upgrades.upgrades[item.productId]}
-                    cartItem={item}
-                    onUpgrade={refreshCart}
-                  />
-                )}
-              </li>
-            ))}
-          </ul>
-
-          {/* Bundle offers */}
-          {bundles?.bundles && bundles.bundles.length > 0 && (
-            <section>
-              <h3>{t('bundleOffers')}</h3>
-              {bundles.bundles.map((offer) => (
-                <CartBundleOfferCard
-                  key={offer.id}
-                  offer={offer}
-                  cartId={cart.id}
-                  onAdd={refreshCart}
-                />
-              ))}
-            </section>
-          )}
-
-          {/* Coupon input */}
-          <CouponInput cart={cart} onUpdate={refreshCart} />
-        </div>
-
-        {/* Summary sidebar */}
-        <aside className="lg:col-span-1">
-          <FreeShippingBar />
-          <CartSummary />
-
-          <Link href="/checkout">{t('proceedToCheckout')}</Link>
-
-          <Link href="/products">{tc('continueShopping')}</Link>
-        </aside>
-      </div>
-
-      {/* Cross-sell recommendations */}
-      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
-        <CartRecommendationSection title={t('youMightAlsoNeed')} items={cartRecs.recommendations} />
-      )}
-    </section>
-  );
-}
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { useCartPage } from '@/core/hooks/use-cart-page';
+import { CartItem } from '@/ui/cart/cart-item';
+import { CartUpgradeBanner } from '@/ui/cart/cart-upgrade-banner';
+import { CartBundleOfferCard } from '@/ui/cart/cart-bundle-offer';
+import { CartSummary } from '@/ui/cart/cart-summary';
+import { CouponInput } from '@/ui/cart/coupon-input';
+import { CartNudges } from '@/ui/cart/cart-nudges';
+import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
+import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
+import { CartRecommendationSection } from '@/ui/product/recommendation-section';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+
+export function CartView() {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const { cart, cartLoading, refreshCart, itemCount, cartRecs, upgrades, bundles } = useCartPage();
+
+  if (cartLoading) {
+    return <LoadingSpinner size="lg" />;
+  }
+
+  // Empty cart state
+  if (!cart || cart.items.length === 0) {
+    return (
+      <section>
+        {/* DESIGN ME — empty-cart state: message + continue-shopping CTA; state comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <h1>{t('emptyTitle')}</h1>
+        <p>{t('emptySubtitle')}</p>
+        <Link href="/products">{tc('continueShopping')}</Link>
+      </section>
+    );
+  }
+
+  return (
+    <section>
+      {/* DESIGN ME — cart page: items list, upgrade/bundle offers, coupon, summary sidebar, checkout CTA, cross-sells; everything comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <h1>
+        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
+      </h1>
+
+      {/* Reservation countdown */}
+      {cart.reservation?.hasReservation && <ReservationCountdown reservation={cart.reservation} />}
+
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+        {/* Cart Items */}
+        <div className="lg:col-span-2">
+          {/* Nudges */}
+          {cart.nudges && cart.nudges.length > 0 && <CartNudges nudges={cart.nudges} />}
+
+          {/* Cart items */}
+          <ul>
+            {cart.items.map((item) => (
+              <li key={item.id}>
+                <CartItem item={item} onUpdate={refreshCart} />
+                {upgrades?.upgrades?.[item.productId] && (
+                  <CartUpgradeBanner
+                    suggestion={upgrades.upgrades[item.productId]}
+                    cartItem={item}
+                    onUpgrade={refreshCart}
+                  />
+                )}
+              </li>
+            ))}
+          </ul>
+
+          {/* Bundle offers */}
+          {bundles?.bundles && bundles.bundles.length > 0 && (
+            <section>
+              <h3>{t('bundleOffers')}</h3>
+              {bundles.bundles.map((offer) => (
+                <CartBundleOfferCard
+                  key={offer.id}
+                  offer={offer}
+                  cartId={cart.id}
+                  onAdd={refreshCart}
+                />
+              ))}
+            </section>
+          )}
+
+          {/* Coupon input */}
+          <CouponInput cart={cart} onUpdate={refreshCart} />
+        </div>
+
+        {/* Summary sidebar */}
+        <aside className="lg:col-span-1">
+          <FreeShippingBar />
+          <CartSummary />
+
+          <Link href="/checkout">{t('proceedToCheckout')}</Link>
+
+          <Link href="/products">{tc('continueShopping')}</Link>
+        </aside>
+      </div>
+
+      {/* Cross-sell recommendations */}
+      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
+        <CartRecommendationSection title={t('youMightAlsoNeed')} items={cartRecs.recommendations} />
+      )}
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/cart/coupon-input.tsx

@@ -1,119 +1,119 @@
-'use client';
-
-import { useState } from 'react';
-import type { Cart } from 'brainerce';
-import { getClient } from '@/core/lib/brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { cn } from '@/core/lib/utils';
-
-interface CouponInputProps {
-  cart: Cart;
-  /** When provided, uses applyCheckoutCoupon/removeCheckoutCoupon instead of
-   *  applyCoupon/removeCoupon. Always pass this when a checkout session exists. */
-  checkoutId?: string;
-  onUpdate: () => void;
-  className?: string;
-}
-
-/**
- * DESIGN ME — coupon apply/remove control used on the cart page AND the
- * checkout page (via `checkoutId`); the `cart` prop comes from useCartPage().
- * Keep the applied-coupon state and the error message.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInputProps) {
-  const t = useTranslations('coupon');
-  const tc = useTranslations('common');
-  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();
-      if (checkoutId) {
-        await client.applyCheckoutCoupon(checkoutId, trimmed);
-      } else {
-        await client.applyCoupon(cart.id, trimmed);
-      }
-      setCode('');
-      onUpdate();
-    } catch (err) {
-      const message = err instanceof Error ? err.message : t('invalidCode');
-      setError(message);
-    } finally {
-      setApplying(false);
-    }
-  }
-
-  async function handleRemove() {
-    if (removing) return;
-
-    try {
-      setRemoving(true);
-      setError(null);
-      const client = getClient();
-      if (checkoutId) {
-        await client.removeCheckoutCoupon(checkoutId);
-      } else {
-        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('flex items-center gap-2', className)}>
-        <span>{appliedCoupon}</span>
-        <button type="button" onClick={handleRemove} disabled={removing}>
-          {removing ? tc('removing') : tc('remove')}
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn(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={t('placeholder')}
-          aria-label={t('placeholder')}
-          aria-invalid={error ? true : undefined}
-        />
-        <button type="button" onClick={handleApply} disabled={applying || !code.trim()}>
-          {applying ? <LoadingSpinner size="sm" /> : tc('apply')}
-        </button>
-      </div>
-
-      {error && <p role="alert">{error}</p>}
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import type { Cart } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { cn } from '@/core/lib/utils';
+
+interface CouponInputProps {
+  cart: Cart;
+  /** When provided, uses applyCheckoutCoupon/removeCheckoutCoupon instead of
+   *  applyCoupon/removeCoupon. Always pass this when a checkout session exists. */
+  checkoutId?: string;
+  onUpdate: () => void;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — coupon apply/remove control used on the cart page AND the
+ * checkout page (via `checkoutId`); the `cart` prop comes from useCartPage().
+ * Keep the applied-coupon state and the error message.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInputProps) {
+  const t = useTranslations('coupon');
+  const tc = useTranslations('common');
+  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();
+      if (checkoutId) {
+        await client.applyCheckoutCoupon(checkoutId, trimmed);
+      } else {
+        await client.applyCoupon(cart.id, trimmed);
+      }
+      setCode('');
+      onUpdate();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t('invalidCode');
+      setError(message);
+    } finally {
+      setApplying(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      setError(null);
+      const client = getClient();
+      if (checkoutId) {
+        await client.removeCheckoutCoupon(checkoutId);
+      } else {
+        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('flex items-center gap-2', className)}>
+        <span>{appliedCoupon}</span>
+        <button type="button" onClick={handleRemove} disabled={removing}>
+          {removing ? tc('removing') : tc('remove')}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(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={t('placeholder')}
+          aria-label={t('placeholder')}
+          aria-invalid={error ? true : undefined}
+        />
+        <button type="button" onClick={handleApply} disabled={applying || !code.trim()}>
+          {applying ? <LoadingSpinner size="sm" /> : tc('apply')}
+        </button>
+      </div>
+
+      {error && <p role="alert">{error}</p>}
+    </div>
+  );
+}