create-brainerce-store 1.62.0 → 1.64.0

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

@@ -1,123 +1,123 @@
-'use client';
-
-import { useState } from 'react';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { CartItem as CartItemType } from 'brainerce';
-import { getCartItemImage, formatPrice } from 'brainerce';
-import { getClient } from '@/core/lib/brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { useCurrency } from '@/core/lib/use-currency';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { cn } from '@/core/lib/utils';
-
-interface CartItemProps {
-  item: CartItemType;
-  onUpdate: () => void;
-  className?: string;
-}
-
-/**
- * DESIGN ME — single cart line: image, name, variant, unit price, quantity
- * controls, remove, line total; the `item` prop comes from useCartPage().cart.
- *
- * 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 CartItem({ item, onUpdate, className }: CartItemProps) {
-  const t = useTranslations('common');
-  const td = useTranslations('productDetail');
-  const currency = useCurrency();
-  const [updating, setUpdating] = useState(false);
-  const [removing, setRemoving] = useState(false);
-
-  const productName = item.product.name;
-  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('flex items-start gap-4', className)}>
-      {/* Image — `relative` + fixed box are layout-critical for next/image fill */}
-      <div className="relative h-20 w-20">
-        {imageUrl ? (
-          <Image src={imageUrl} alt={productName} fill sizes="80px" />
-        ) : (
-          <span className="sr-only">{productName}</span>
-        )}
-      </div>
-
-      {/* Details */}
-      <div>
-        <h3>{productName}</h3>
-
-        {/* Variant name */}
-        {variantName && <p>{variantName}</p>}
-
-        {/* Unit price */}
-        <p>{formatPrice(unitPrice, { currency }) as string}</p>
-
-        {/* Quantity controls */}
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => handleQuantityChange(item.quantity - 1)}
-              disabled={updating || item.quantity <= 1}
-              aria-label={td('decreaseQuantity')}
-            >
-              -
-            </button>
-            <span aria-live="polite">
-              {updating ? <LoadingSpinner size="sm" /> : item.quantity}
-            </span>
-            <button
-              type="button"
-              onClick={() => handleQuantityChange(item.quantity + 1)}
-              disabled={updating}
-              aria-label={td('increaseQuantity')}
-            >
-              +
-            </button>
-          </div>
-
-          <button type="button" onClick={handleRemove} disabled={removing}>
-            {removing ? t('removing') : t('remove')}
-          </button>
-        </div>
-      </div>
-
-      {/* Line total */}
-      <span>{formatPrice(lineTotal, { currency }) as string}</span>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartItem as CartItemType } from 'brainerce';
+import { getCartItemImage, formatPrice } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { cn } from '@/core/lib/utils';
+
+interface CartItemProps {
+  item: CartItemType;
+  onUpdate: () => void;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — single cart line: image, name, variant, unit price, quantity
+ * controls, remove, line total; the `item` prop comes from useCartPage().cart.
+ *
+ * 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 CartItem({ item, onUpdate, className }: CartItemProps) {
+  const t = useTranslations('common');
+  const td = useTranslations('productDetail');
+  const currency = useCurrency();
+  const [updating, setUpdating] = useState(false);
+  const [removing, setRemoving] = useState(false);
+
+  const productName = item.product.name;
+  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('flex items-start gap-4', className)}>
+      {/* Image — `relative` + fixed box are layout-critical for next/image fill */}
+      <div className="relative h-20 w-20">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={productName} fill sizes="80px" />
+        ) : (
+          <span className="sr-only">{productName}</span>
+        )}
+      </div>
+
+      {/* Details */}
+      <div>
+        <h3>{productName}</h3>
+
+        {/* Variant name */}
+        {variantName && <p>{variantName}</p>}
+
+        {/* Unit price */}
+        <p>{formatPrice(unitPrice, { currency }) as string}</p>
+
+        {/* Quantity controls */}
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity - 1)}
+              disabled={updating || item.quantity <= 1}
+              aria-label={td('decreaseQuantity')}
+            >
+              -
+            </button>
+            <span aria-live="polite">
+              {updating ? <LoadingSpinner size="sm" /> : item.quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity + 1)}
+              disabled={updating}
+              aria-label={td('increaseQuantity')}
+            >
+              +
+            </button>
+          </div>
+
+          <button type="button" onClick={handleRemove} disabled={removing}>
+            {removing ? t('removing') : t('remove')}
+          </button>
+        </div>
+      </div>
+
+      {/* Line total */}
+      <span>{formatPrice(lineTotal, { currency }) as string}</span>
+    </div>
+  );
+}

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

@@ -1,27 +1,29 @@
-'use client';
-
-import type { CartNudge } from 'brainerce';
-import { cn } from '@/core/lib/utils';
-
-interface CartNudgesProps {
-  nudges: CartNudge[];
-  className?: string;
-}
-
-/**
- * DESIGN ME — discount-rule nudges on the cart page ("add X more for Y");
- * texts come from useCartPage().cart.nudges.
- *
- * 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 CartNudges({ nudges, className }: CartNudgesProps) {
-  if (nudges.length === 0) return null;
-
-  return (
-    <ul className={cn(className)} aria-label="Cart suggestions">
-      {nudges.map((nudge) => (
-        <li key={nudge.ruleId}>{nudge.text}</li>
-      ))}
-    </ul>
-  );
-}
+'use client';
+
+import type { CartNudge } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+
+interface CartNudgesProps {
+  nudges: CartNudge[];
+  className?: string;
+}
+
+/**
+ * DESIGN ME — discount-rule nudges on the cart page ("add X more for Y");
+ * texts come from useCartPage().cart.nudges.
+ *
+ * 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 CartNudges({ nudges, className }: CartNudgesProps) {
+  if (nudges.length === 0) return null;
+
+  return (
+    <ul className={cn(className)} aria-label="Cart suggestions">
+      {nudges.map((nudge) => (
+        <li key={nudge.ruleId} className="whitespace-pre-line">
+          {nudge.text}
+        </li>
+      ))}
+    </ul>
+  );
+}

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

@@ -1,99 +1,99 @@
-'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;
-}
-
-/**
- * DESIGN ME — order summary (subtotal, rule/coupon discounts, shipping, tax
- * note, total); all figures come from useCart().totals and useCart().cart.
- * Keep every discount branch — merchants rely on the per-rule breakdown.
- *
- * 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 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>{t('orderSummary')}</h3>
-
-      <dl>
-        {/* Subtotal */}
-        <div className="flex items-center justify-between gap-4">
-          <dt>{tc('subtotal')}</dt>
-          <dd>{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>{rule.ruleName}</dt>
-                <dd>-{formatPrice(parseFloat(rule.discountAmount), { currency }) as string}</dd>
-              </div>
-            ))
-          : ruleAmt > 0 && (
-              <div className="flex items-center justify-between gap-4">
-                <dt>{tc('generalDiscount')}</dt>
-                <dd>-{formatPrice(ruleAmt, { currency }) as string}</dd>
-              </div>
-            )}
-
-        {/* Coupon discount */}
-        {cart?.couponCode && couponAmt > 0 && (
-          <div className="flex items-center justify-between gap-4">
-            <dt>
-              {tc('couponDiscount')} ({cart.couponCode})
-            </dt>
-            <dd>-{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>{tc('discount')}</dt>
-              <dd>-{formatPrice(totals.discount, { currency }) as string}</dd>
-            </div>
-          )}
-
-        {/* Shipping */}
-        {totals.shipping > 0 && (
-          <div className="flex items-center justify-between gap-4">
-            <dt>{tc('shipping')}</dt>
-            <dd>{formatPrice(totals.shipping, { currency }) as string}</dd>
-          </div>
-        )}
-
-        {/* Tax */}
-        <div className="flex items-center justify-between gap-4">
-          <dt>{tc('tax')}</dt>
-          <dd>{t('taxAtCheckout')}</dd>
-        </div>
-
-        {/* Total */}
-        <div className="flex items-center justify-between gap-4">
-          <dt>{tc('total')}</dt>
-          <dd>{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;
+}
+
+/**
+ * DESIGN ME — order summary (subtotal, rule/coupon discounts, shipping, tax
+ * note, total); all figures come from useCart().totals and useCart().cart.
+ * Keep every discount branch — merchants rely on the per-rule breakdown.
+ *
+ * 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 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>{t('orderSummary')}</h3>
+
+      <dl>
+        {/* Subtotal */}
+        <div className="flex items-center justify-between gap-4">
+          <dt>{tc('subtotal')}</dt>
+          <dd>{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>{rule.ruleName}</dt>
+                <dd>-{formatPrice(parseFloat(rule.discountAmount), { currency }) as string}</dd>
+              </div>
+            ))
+          : ruleAmt > 0 && (
+              <div className="flex items-center justify-between gap-4">
+                <dt>{tc('generalDiscount')}</dt>
+                <dd>-{formatPrice(ruleAmt, { currency }) as string}</dd>
+              </div>
+            )}
+
+        {/* Coupon discount */}
+        {cart?.couponCode && couponAmt > 0 && (
+          <div className="flex items-center justify-between gap-4">
+            <dt>
+              {tc('couponDiscount')} ({cart.couponCode})
+            </dt>
+            <dd>-{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>{tc('discount')}</dt>
+              <dd>-{formatPrice(totals.discount, { currency }) as string}</dd>
+            </div>
+          )}
+
+        {/* Shipping */}
+        {totals.shipping > 0 && (
+          <div className="flex items-center justify-between gap-4">
+            <dt>{tc('shipping')}</dt>
+            <dd>{formatPrice(totals.shipping, { currency }) as string}</dd>
+          </div>
+        )}
+
+        {/* Tax */}
+        <div className="flex items-center justify-between gap-4">
+          <dt>{tc('tax')}</dt>
+          <dd>{t('taxAtCheckout')}</dd>
+        </div>
+
+        {/* Total */}
+        <div className="flex items-center justify-between gap-4">
+          <dt>{tc('total')}</dt>
+          <dd>{formatPrice(totals.total, { currency }) as string}</dd>
+        </div>
+      </dl>
+    </section>
+  );
+}