create-brainerce-store 1.62.0 → 1.64.0

package/templates/nextjs/designs/atelier/ui/cart/cart-nudges.tsx

@@ -1,34 +1,34 @@
-'use client';
-
-import type { CartNudge } from 'brainerce';
-import { cn } from '@/core/lib/utils';
-import { IconSparkle } from '@/ui/shared/icons';
-
-interface CartNudgesProps {
-  nudges: CartNudge[];
-  className?: string;
-}
-
-/**
- * Discount-rule nudges on the cart page ("add X more for Y");
- * texts come from useCartPage().cart.nudges.
- */
-export function CartNudges({ nudges, className }: CartNudgesProps) {
-  if (nudges.length === 0) return null;
-
-  return (
-    <ul className={cn('space-y-2', className)} aria-label="Cart suggestions">
-      {nudges.map((nudge) => (
-        <li
-          key={nudge.ruleId}
-          className="flex items-center gap-2.5 rounded-lg bg-secondary px-3.5 py-2.5 text-sm font-medium text-foreground"
-        >
-          <span aria-hidden="true" className="shrink-0 text-primary">
-            <IconSparkle size={18} />
-          </span>
-          {nudge.text}
-        </li>
-      ))}
-    </ul>
-  );
-}
+'use client';
+
+import type { CartNudge } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+import { IconSparkle } from '@/ui/shared/icons';
+
+interface CartNudgesProps {
+  nudges: CartNudge[];
+  className?: string;
+}
+
+/**
+ * Discount-rule nudges on the cart page ("add X more for Y");
+ * texts come from useCartPage().cart.nudges.
+ */
+export function CartNudges({ nudges, className }: CartNudgesProps) {
+  if (nudges.length === 0) return null;
+
+  return (
+    <ul className={cn('space-y-2', className)} aria-label="Cart suggestions">
+      {nudges.map((nudge) => (
+        <li
+          key={nudge.ruleId}
+          className="flex items-center gap-2.5 rounded-lg bg-secondary px-3.5 py-2.5 text-sm font-medium whitespace-pre-line text-foreground"
+        >
+          <span aria-hidden="true" className="shrink-0 text-primary">
+            <IconSparkle size={18} />
+          </span>
+          {nudge.text}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/templates/nextjs/designs/atelier/ui/cart/cart-summary.tsx

@@ -1,107 +1,107 @@
-'use client';
-
-import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { useCart } from '@/core/providers/store-provider';
-import { useCurrency } from '@/core/lib/use-currency';
-import { cn } from '@/core/lib/utils';
-
-interface CartSummaryProps {
-  className?: string;
-}
-
-/**
- * Order summary (subtotal, rule/coupon discounts, shipping, tax note, total);
- * all figures come from useCart().totals and useCart().cart. Every discount
- * branch is kept — merchants rely on the per-rule breakdown.
- */
-export function CartSummary({ className }: CartSummaryProps) {
-  const t = useTranslations('cart');
-  const tc = useTranslations('common');
-  const { totals, cart } = useCart();
-  const currency = useCurrency();
-
-  const rules = cart?.appliedDiscounts;
-  const ruleAmt = cart?.ruleDiscountAmount ? parseFloat(cart.ruleDiscountAmount) : 0;
-  const couponAmt = totals.discount - ruleAmt;
-
-  return (
-    <section className={cn(className)}>
-      <h3 className="mb-4 font-sans text-base font-semibold">{t('orderSummary')}</h3>
-
-      <dl className="space-y-2.5 text-sm">
-        {/* Subtotal */}
-        <div className="flex items-center justify-between gap-4">
-          <dt className="text-muted-foreground">{tc('subtotal')}</dt>
-          <dd className="font-medium">{formatPrice(totals.subtotal, { currency }) as string}</dd>
-        </div>
-
-        {/* Rule discounts - show each rule by name */}
-        {rules && rules.length > 0
-          ? rules.map((rule) => (
-              <div key={rule.ruleId} className="flex items-center justify-between gap-4">
-                <dt className="text-primary">{rule.ruleName}</dt>
-                <dd className="font-medium text-primary">
-                  -{formatPrice(parseFloat(rule.discountAmount), { currency }) as string}
-                </dd>
-              </div>
-            ))
-          : ruleAmt > 0 && (
-              <div className="flex items-center justify-between gap-4">
-                <dt className="text-primary">{tc('generalDiscount')}</dt>
-                <dd className="font-medium text-primary">
-                  -{formatPrice(ruleAmt, { currency }) as string}
-                </dd>
-              </div>
-            )}
-
-        {/* Coupon discount */}
-        {cart?.couponCode && couponAmt > 0 && (
-          <div className="flex items-center justify-between gap-4">
-            <dt className="text-primary">
-              {tc('couponDiscount')} ({cart.couponCode})
-            </dt>
-            <dd className="font-medium text-primary">
-              -{formatPrice(couponAmt, { currency }) as string}
-            </dd>
-          </div>
-        )}
-
-        {/* Fallback: generic discount when no breakdown available */}
-        {totals.discount > 0 &&
-          ruleAmt <= 0 &&
-          !cart?.couponCode &&
-          (!rules || rules.length === 0) && (
-            <div className="flex items-center justify-between gap-4">
-              <dt className="text-primary">{tc('discount')}</dt>
-              <dd className="font-medium text-primary">
-                -{formatPrice(totals.discount, { currency }) as string}
-              </dd>
-            </div>
-          )}
-
-        {/* Shipping */}
-        {totals.shipping > 0 && (
-          <div className="flex items-center justify-between gap-4">
-            <dt className="text-muted-foreground">{tc('shipping')}</dt>
-            <dd className="font-medium">{formatPrice(totals.shipping, { currency }) as string}</dd>
-          </div>
-        )}
-
-        {/* Tax */}
-        <div className="flex items-center justify-between gap-4">
-          <dt className="text-muted-foreground">{tc('tax')}</dt>
-          <dd className="text-muted-foreground">{t('taxAtCheckout')}</dd>
-        </div>
-
-        {/* Total */}
-        <div className="flex items-center justify-between gap-4 border-t pt-3">
-          <dt className="text-base font-semibold text-foreground">{tc('total')}</dt>
-          <dd className="text-lg font-bold text-foreground">
-            {formatPrice(totals.total, { currency }) as string}
-          </dd>
-        </div>
-      </dl>
-    </section>
-  );
-}
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCart } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
+
+interface CartSummaryProps {
+  className?: string;
+}
+
+/**
+ * Order summary (subtotal, rule/coupon discounts, shipping, tax note, total);
+ * all figures come from useCart().totals and useCart().cart. Every discount
+ * branch is kept — merchants rely on the per-rule breakdown.
+ */
+export function CartSummary({ className }: CartSummaryProps) {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const { totals, cart } = useCart();
+  const currency = useCurrency();
+
+  const rules = cart?.appliedDiscounts;
+  const ruleAmt = cart?.ruleDiscountAmount ? parseFloat(cart.ruleDiscountAmount) : 0;
+  const couponAmt = totals.discount - ruleAmt;
+
+  return (
+    <section className={cn(className)}>
+      <h3 className="mb-4 font-sans text-base font-semibold">{t('orderSummary')}</h3>
+
+      <dl className="space-y-2.5 text-sm">
+        {/* Subtotal */}
+        <div className="flex items-center justify-between gap-4">
+          <dt className="text-muted-foreground">{tc('subtotal')}</dt>
+          <dd className="font-medium">{formatPrice(totals.subtotal, { currency }) as string}</dd>
+        </div>
+
+        {/* Rule discounts - show each rule by name */}
+        {rules && rules.length > 0
+          ? rules.map((rule) => (
+              <div key={rule.ruleId} className="flex items-center justify-between gap-4">
+                <dt className="text-primary">{rule.ruleName}</dt>
+                <dd className="font-medium text-primary">
+                  -{formatPrice(parseFloat(rule.discountAmount), { currency }) as string}
+                </dd>
+              </div>
+            ))
+          : ruleAmt > 0 && (
+              <div className="flex items-center justify-between gap-4">
+                <dt className="text-primary">{tc('generalDiscount')}</dt>
+                <dd className="font-medium text-primary">
+                  -{formatPrice(ruleAmt, { currency }) as string}
+                </dd>
+              </div>
+            )}
+
+        {/* Coupon discount */}
+        {cart?.couponCode && couponAmt > 0 && (
+          <div className="flex items-center justify-between gap-4">
+            <dt className="text-primary">
+              {tc('couponDiscount')} ({cart.couponCode})
+            </dt>
+            <dd className="font-medium text-primary">
+              -{formatPrice(couponAmt, { currency }) as string}
+            </dd>
+          </div>
+        )}
+
+        {/* Fallback: generic discount when no breakdown available */}
+        {totals.discount > 0 &&
+          ruleAmt <= 0 &&
+          !cart?.couponCode &&
+          (!rules || rules.length === 0) && (
+            <div className="flex items-center justify-between gap-4">
+              <dt className="text-primary">{tc('discount')}</dt>
+              <dd className="font-medium text-primary">
+                -{formatPrice(totals.discount, { currency }) as string}
+              </dd>
+            </div>
+          )}
+
+        {/* Shipping */}
+        {totals.shipping > 0 && (
+          <div className="flex items-center justify-between gap-4">
+            <dt className="text-muted-foreground">{tc('shipping')}</dt>
+            <dd className="font-medium">{formatPrice(totals.shipping, { currency }) as string}</dd>
+          </div>
+        )}
+
+        {/* Tax */}
+        <div className="flex items-center justify-between gap-4">
+          <dt className="text-muted-foreground">{tc('tax')}</dt>
+          <dd className="text-muted-foreground">{t('taxAtCheckout')}</dd>
+        </div>
+
+        {/* Total */}
+        <div className="flex items-center justify-between gap-4 border-t pt-3">
+          <dt className="text-base font-semibold text-foreground">{tc('total')}</dt>
+          <dd className="text-lg font-bold text-foreground">
+            {formatPrice(totals.total, { currency }) as string}
+          </dd>
+        </div>
+      </dl>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/cart/cart-upgrade-banner.tsx

@@ -1,123 +1,123 @@
-'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';
-import { IconX } from '@/ui/shared/icons';
-
-interface CartUpgradeBannerProps {
-  suggestion: CartUpgradeSuggestion;
-  cartItem: CartItemType;
-  onUpgrade: () => void;
-  className?: string;
-}
-
-/**
- * Per-line upgrade suggestion under a cart item ("upgrade to X for +Y");
- * the suggestion comes from useCartPage().upgrades keyed by productId.
- * Keeps the session-scoped dismiss and the swap logic.
- */
-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 rounded-lg border border-primary/25 bg-secondary/60 p-3',
-        className
-      )}
-    >
-      {/* Product image — `relative` + fixed box are layout-critical for next/image fill */}
-      <span className="relative block h-12 w-12 shrink-0 overflow-hidden rounded-lg border bg-background">
-        {imageUrl ? (
-          <Image src={imageUrl} alt={target.name} fill sizes="48px" className="object-cover" />
-        ) : null}
-      </span>
-
-      {/* Text */}
-      <p className="min-w-0 flex-1 text-sm text-foreground">
-        {t('upgradeFor', { name: target.name, amount: formattedDelta })}
-      </p>
-
-      {/* Upgrade button */}
-      <button
-        type="button"
-        onClick={handleUpgrade}
-        disabled={upgrading}
-        className="btn-primary btn-sm shrink-0"
-      >
-        {upgrading ? t('upgrading') : t('upgrade')}
-      </button>
-
-      {/* Dismiss button */}
-      <button
-        type="button"
-        onClick={handleDismiss}
-        aria-label={t('dismissUpgrade')}
-        className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-      >
-        <IconX size={16} />
-      </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';
+import { IconX } from '@/ui/shared/icons';
+
+interface CartUpgradeBannerProps {
+  suggestion: CartUpgradeSuggestion;
+  cartItem: CartItemType;
+  onUpgrade: () => void;
+  className?: string;
+}
+
+/**
+ * Per-line upgrade suggestion under a cart item ("upgrade to X for +Y");
+ * the suggestion comes from useCartPage().upgrades keyed by productId.
+ * Keeps the session-scoped dismiss and the swap logic.
+ */
+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 rounded-lg border border-primary/25 bg-secondary/60 p-3',
+        className
+      )}
+    >
+      {/* Product image — `relative` + fixed box are layout-critical for next/image fill */}
+      <span className="relative block h-12 w-12 shrink-0 overflow-hidden rounded-lg border bg-background">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={target.name} fill sizes="48px" className="object-cover" />
+        ) : null}
+      </span>
+
+      {/* Text */}
+      <p className="min-w-0 flex-1 text-sm text-foreground">
+        {t('upgradeFor', { name: target.name, amount: formattedDelta })}
+      </p>
+
+      {/* Upgrade button */}
+      <button
+        type="button"
+        onClick={handleUpgrade}
+        disabled={upgrading}
+        className="btn-primary btn-sm shrink-0"
+      >
+        {upgrading ? t('upgrading') : t('upgrade')}
+      </button>
+
+      {/* Dismiss button */}
+      <button
+        type="button"
+        onClick={handleDismiss}
+        aria-label={t('dismissUpgrade')}
+        className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+      >
+        <IconX size={16} />
+      </button>
+    </div>
+  );
+}