create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/base/src/ui/cart/cart-upgrade-banner.tsx

@@ -1,126 +1,126 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { Image as ImageIcon, X } from 'lucide-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 { Button } from '@/components/ui/button';
-import { cn } from '@/core/lib/utils';
-
-interface CartUpgradeBannerProps {
-  suggestion: CartUpgradeSuggestion;
-  cartItem: CartItemType;
-  onUpgrade: () => void;
-  className?: string;
-}
-
-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(
-        'bg-primary/5 border-primary/20 relative flex items-center gap-3 rounded-lg border px-4 py-3',
-        className
-      )}
-    >
-      {/* Dismiss button */}
-      <button
-        type="button"
-        onClick={handleDismiss}
-        className="text-muted-foreground hover:text-foreground absolute end-2 top-2 text-xs"
-        aria-label={t('dismissUpgrade')}
-      >
-        <X className="h-4 w-4" aria-hidden="true" />
-      </button>
-
-      {/* Product image */}
-      <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
-        {imageUrl ? (
-          <Image src={imageUrl} alt={target.name} fill sizes="48px" className="object-cover" />
-        ) : (
-          <div className="text-muted-foreground flex h-full w-full items-center justify-center">
-            <ImageIcon className="h-5 w-5" strokeWidth={1.5} aria-hidden="true" />
-          </div>
-        )}
-      </div>
-
-      {/* Text */}
-      <div className="min-w-0 flex-1">
-        <p className="text-foreground text-sm font-medium">
-          {t('upgradeFor', { name: target.name, amount: formattedDelta })}
-        </p>
-      </div>
-
-      {/* Upgrade button */}
-      <Button
-        type="button"
-        size="sm"
-        onClick={handleUpgrade}
-        disabled={upgrading}
-        className="h-auto flex-shrink-0 rounded px-3 py-1.5 text-xs"
-      >
-        {upgrading ? t('upgrading') : t('upgrade')}
-      </Button>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Image as ImageIcon, X } from 'lucide-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 { Button } from '@/components/ui/button';
+import { cn } from '@/core/lib/utils';
+
+interface CartUpgradeBannerProps {
+  suggestion: CartUpgradeSuggestion;
+  cartItem: CartItemType;
+  onUpgrade: () => void;
+  className?: string;
+}
+
+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(
+        'bg-primary/5 border-primary/20 relative flex items-center gap-3 rounded-lg border px-4 py-3',
+        className
+      )}
+    >
+      {/* Dismiss button */}
+      <button
+        type="button"
+        onClick={handleDismiss}
+        className="text-muted-foreground hover:text-foreground absolute end-2 top-2 text-xs"
+        aria-label={t('dismissUpgrade')}
+      >
+        <X className="h-4 w-4" aria-hidden="true" />
+      </button>
+
+      {/* Product image */}
+      <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={target.name} fill sizes="48px" className="object-cover" />
+        ) : (
+          <div className="text-muted-foreground flex h-full w-full items-center justify-center">
+            <ImageIcon className="h-5 w-5" strokeWidth={1.5} aria-hidden="true" />
+          </div>
+        )}
+      </div>
+
+      {/* Text */}
+      <div className="min-w-0 flex-1">
+        <p className="text-foreground text-sm font-medium">
+          {t('upgradeFor', { name: target.name, amount: formattedDelta })}
+        </p>
+      </div>
+
+      {/* Upgrade button */}
+      <Button
+        type="button"
+        size="sm"
+        onClick={handleUpgrade}
+        disabled={upgrading}
+        className="h-auto flex-shrink-0 rounded px-3 py-1.5 text-xs"
+      >
+        {upgrading ? t('upgrading') : t('upgrade')}
+      </Button>
+    </div>
+  );
+}

package/templates/nextjs/base/src/ui/cart/cart-view.tsx

@@ -1,140 +1,140 @@
-'use client';
-
-import { ShoppingBag } from 'lucide-react';
-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 { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
-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 (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  // Empty cart state
-  if (!cart || cart.items.length === 0) {
-    return (
-      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <ShoppingBag
-          className="text-muted-foreground mx-auto mb-4 h-16 w-16"
-          strokeWidth={1.5}
-          aria-hidden="true"
-        />
-        <h1 className="text-foreground text-2xl font-bold">{t('emptyTitle')}</h1>
-        <p className="text-muted-foreground mt-2">{t('emptySubtitle')}</p>
-        <Button asChild size="lg" className="mt-6 rounded px-6 text-base">
-          <Link href="/products">{tc('continueShopping')}</Link>
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-bold">
-        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
-      </h1>
-
-      {/* Reservation countdown */}
-      {cart.reservation?.hasReservation && (
-        <ReservationCountdown reservation={cart.reservation} className="mb-6" />
-      )}
-
-      <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} className="mb-4" />
-          )}
-
-          {/* Cart items */}
-          <div>
-            {cart.items.map((item) => (
-              <div key={item.id}>
-                <CartItem item={item} onUpdate={refreshCart} />
-                {upgrades?.upgrades?.[item.productId] && (
-                  <CartUpgradeBanner
-                    suggestion={upgrades.upgrades[item.productId]}
-                    cartItem={item}
-                    onUpgrade={refreshCart}
-                    className="mb-2 ms-24"
-                  />
-                )}
-              </div>
-            ))}
-          </div>
-
-          {/* Bundle offers */}
-          {bundles?.bundles && bundles.bundles.length > 0 && (
-            <div className="mt-6 space-y-3">
-              <h3 className="text-foreground text-sm font-semibold">{t('bundleOffers')}</h3>
-              {bundles.bundles.map((offer) => (
-                <CartBundleOfferCard
-                  key={offer.id}
-                  offer={offer}
-                  cartId={cart.id}
-                  onAdd={refreshCart}
-                />
-              ))}
-            </div>
-          )}
-
-          {/* Coupon input */}
-          <Separator className="mt-6" />
-          <div className="pt-4">
-            <CouponInput cart={cart} onUpdate={refreshCart} />
-          </div>
-        </div>
-
-        {/* Summary sidebar */}
-        <div className="lg:col-span-1">
-          <Card className="bg-muted/50 sticky top-24 p-6 shadow-none">
-            <FreeShippingBar className="mb-4" />
-            <CartSummary />
-
-            <Button asChild size="lg" className="mt-6 w-full rounded px-6 text-sm">
-              <Link href="/checkout">{t('proceedToCheckout')}</Link>
-            </Button>
-
-            <Link
-              href="/products"
-              className="text-muted-foreground hover:text-foreground mt-3 inline-flex w-full items-center justify-center px-6 py-2 text-sm transition-colors"
-            >
-              {tc('continueShopping')}
-            </Link>
-          </Card>
-        </div>
-      </div>
-
-      {/* Cross-sell recommendations */}
-      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
-        <CartRecommendationSection
-          title={t('youMightAlsoNeed')}
-          items={cartRecs.recommendations}
-          className="mt-10"
-        />
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { ShoppingBag } from 'lucide-react';
+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 { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+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 (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  // Empty cart state
+  if (!cart || cart.items.length === 0) {
+    return (
+      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <ShoppingBag
+          className="text-muted-foreground mx-auto mb-4 h-16 w-16"
+          strokeWidth={1.5}
+          aria-hidden="true"
+        />
+        <h1 className="text-foreground text-2xl font-bold">{t('emptyTitle')}</h1>
+        <p className="text-muted-foreground mt-2">{t('emptySubtitle')}</p>
+        <Button asChild size="lg" className="mt-6 rounded px-6 text-base">
+          <Link href="/products">{tc('continueShopping')}</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-bold">
+        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
+      </h1>
+
+      {/* Reservation countdown */}
+      {cart.reservation?.hasReservation && (
+        <ReservationCountdown reservation={cart.reservation} className="mb-6" />
+      )}
+
+      <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} className="mb-4" />
+          )}
+
+          {/* Cart items */}
+          <div>
+            {cart.items.map((item) => (
+              <div key={item.id}>
+                <CartItem item={item} onUpdate={refreshCart} />
+                {upgrades?.upgrades?.[item.productId] && (
+                  <CartUpgradeBanner
+                    suggestion={upgrades.upgrades[item.productId]}
+                    cartItem={item}
+                    onUpgrade={refreshCart}
+                    className="mb-2 ms-24"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Bundle offers */}
+          {bundles?.bundles && bundles.bundles.length > 0 && (
+            <div className="mt-6 space-y-3">
+              <h3 className="text-foreground text-sm font-semibold">{t('bundleOffers')}</h3>
+              {bundles.bundles.map((offer) => (
+                <CartBundleOfferCard
+                  key={offer.id}
+                  offer={offer}
+                  cartId={cart.id}
+                  onAdd={refreshCart}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Coupon input */}
+          <Separator className="mt-6" />
+          <div className="pt-4">
+            <CouponInput cart={cart} onUpdate={refreshCart} />
+          </div>
+        </div>
+
+        {/* Summary sidebar */}
+        <div className="lg:col-span-1">
+          <Card className="bg-muted/50 sticky top-24 p-6 shadow-none">
+            <FreeShippingBar className="mb-4" />
+            <CartSummary />
+
+            <Button asChild size="lg" className="mt-6 w-full rounded px-6 text-sm">
+              <Link href="/checkout">{t('proceedToCheckout')}</Link>
+            </Button>
+
+            <Link
+              href="/products"
+              className="text-muted-foreground hover:text-foreground mt-3 inline-flex w-full items-center justify-center px-6 py-2 text-sm transition-colors"
+            >
+              {tc('continueShopping')}
+            </Link>
+          </Card>
+        </div>
+      </div>
+
+      {/* Cross-sell recommendations */}
+      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
+        <CartRecommendationSection
+          title={t('youMightAlsoNeed')}
+          items={cartRecs.recommendations}
+          className="mt-10"
+        />
+      )}
+    </div>
+  );
+}