create-brainerce-store 1.84.0 → 1.86.0

package/templates/nextjs/designs/atelier/ui/cart/cart-bundle-offer.tsx

@@ -1,128 +1,131 @@
-'use client';
-
-import { useState } from 'react';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useCurrency } from '@/core/lib/use-currency';
-import { useTranslations } from '@/core/lib/translations';
-import { toAddToCartError, type AddToCartError } from '@/core/lib/add-to-cart-error';
-import { cn } from '@/core/lib/utils';
-import { IconBag } from '@/ui/shared/icons';
-
-interface CartBundleOfferCardProps {
-  offer: CartBundleOfferType;
-  cartId: string;
-  onAdd: () => void;
-  className?: string;
-}
-
-/**
- * Bundle offer card on the cart page: offered products with original vs.
- * discounted prices + add-bundle button; offers come from
- * useCartPage().bundles.
- */
-export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
-  const t = useTranslations('cart');
-  const tp = useTranslations('productDetail');
-  const currency = useCurrency();
-  const [adding, setAdding] = useState(false);
-  const [addError, setAddError] = useState<AddToCartError | null>(null);
-
-  const offered = offer.offeredProducts;
-
-  const totalOriginal = parseFloat(offer.totalOriginalPrice);
-  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
-  const discountLabel =
-    offer.discountType === 'PERCENTAGE'
-      ? `${offer.discountValue}%`
-      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
-
-  async function handleAdd() {
-    if (adding) return;
-    setAddError(null);
-    try {
-      setAdding(true);
-      const { getClient } = await import('@/core/lib/brainerce');
-      const client = getClient();
-      // No variant selections in the default template — products with
-      // variants are best handled with a dedicated picker per offered item.
-      await client.addBundleToCart(cartId, offer.id);
-      onAdd();
-    } catch (err) {
-      // The cart page is where a shopper is most likely to be AT the 50-line
-      // cap, and a bundle adds one line per offered product. Logging alone
-      // left the button spinning back to idle with nothing added.
-      setAddError(toAddToCartError(err));
-      console.error('Failed to add bundle:', err);
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  return (
-    <article className={cn('card p-5', className)}>
-      <div className="flex flex-wrap items-center gap-2">
-        <h4 className="font-sans text-base font-semibold">{offer.name}</h4>
-        <span className="badge-primary">-{discountLabel}</span>
-      </div>
-      {offer.description && (
-        <p className="mt-1 text-sm text-muted-foreground">{offer.description}</p>
-      )}
-
-      <ul className="mt-4 space-y-2.5">
-        {offered.map((p) => {
-          const firstImage = p.images?.[0];
-          const imageUrl = firstImage?.url ?? null;
-          return (
-            <li key={p.id} className="flex items-center gap-3">
-              {/* `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-secondary">
-                {imageUrl ? (
-                  <Image src={imageUrl} alt={p.name} fill sizes="48px" className="object-cover" />
-                ) : null}
-              </span>
-              <span className="min-w-0 flex-1 text-sm font-medium text-foreground">{p.name}</span>
-              <s className="text-xs text-muted-foreground">
-                {formatPrice(parseFloat(p.originalPrice), { currency }) as string}
-              </s>
-              <span className="text-sm font-semibold text-foreground">
-                {formatPrice(parseFloat(p.discountedPrice), { currency }) as string}
-              </span>
-            </li>
-          );
-        })}
-      </ul>
-
-      <div className="mt-4 flex flex-wrap items-center gap-3 border-t pt-4">
-        <span className="inline-flex items-baseline gap-2">
-          <s className="text-sm text-muted-foreground">
-            {formatPrice(totalOriginal, { currency }) as string}
-          </s>
-          <span className="text-lg font-bold text-foreground">
-            {formatPrice(totalDiscounted, { currency }) as string}
-          </span>
-        </span>
-        <button
-          type="button"
-          onClick={handleAdd}
-          disabled={adding}
-          className="btn-primary btn-sm ms-auto"
-        >
-          <IconBag size={16} />
-          {adding ? t('addingBundle') : t('addBundleItem')}
-        </button>
-      </div>
-
-      {/*
-        Why the bundle was refused. Without this the button resets and
-        nothing is added, which reads as a broken button.
-      */}
-      {addError && (
-        <p role="alert" className="text-destructive mt-2 text-xs">
-          {addError === 'CART_FULL' ? tp('cartFull') : tp('addToCartFailed')}
-        </p>
-      )}
-    </article>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import { NoPhotoTile } from '@/ui/shared/no-photo-tile';
+import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { toAddToCartError, type AddToCartError } from '@/core/lib/add-to-cart-error';
+import { cn } from '@/core/lib/utils';
+import { IconBag } from '@/ui/shared/icons';
+
+interface CartBundleOfferCardProps {
+  offer: CartBundleOfferType;
+  cartId: string;
+  onAdd: () => void;
+  className?: string;
+}
+
+/**
+ * Bundle offer card on the cart page: offered products with original vs.
+ * discounted prices + add-bundle button; offers come from
+ * useCartPage().bundles.
+ */
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
+  const t = useTranslations('cart');
+  const tp = useTranslations('productDetail');
+  const currency = useCurrency();
+  const [adding, setAdding] = useState(false);
+  const [addError, setAddError] = useState<AddToCartError | null>(null);
+
+  const offered = offer.offeredProducts;
+
+  const totalOriginal = parseFloat(offer.totalOriginalPrice);
+  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
+  const discountLabel =
+    offer.discountType === 'PERCENTAGE'
+      ? `${offer.discountValue}%`
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
+
+  async function handleAdd() {
+    if (adding) return;
+    setAddError(null);
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      // No variant selections in the default template — products with
+      // variants are best handled with a dedicated picker per offered item.
+      await client.addBundleToCart(cartId, offer.id);
+      onAdd();
+    } catch (err) {
+      // The cart page is where a shopper is most likely to be AT the 50-line
+      // cap, and a bundle adds one line per offered product. Logging alone
+      // left the button spinning back to idle with nothing added.
+      setAddError(toAddToCartError(err));
+      console.error('Failed to add bundle:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <article className={cn('card p-5', className)}>
+      <div className="flex flex-wrap items-center gap-2">
+        <h4 className="font-sans text-base font-semibold">{offer.name}</h4>
+        <span className="badge-primary">-{discountLabel}</span>
+      </div>
+      {offer.description && (
+        <p className="mt-1 text-sm text-muted-foreground">{offer.description}</p>
+      )}
+
+      <ul className="mt-4 space-y-2.5">
+        {offered.map((p) => {
+          const firstImage = p.images?.[0];
+          const imageUrl = firstImage?.url ?? null;
+          return (
+            <li key={p.id} className="flex items-center gap-3">
+              {/* `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-secondary">
+                {imageUrl ? (
+                  <Image src={imageUrl} alt={p.name} fill sizes="48px" className="object-cover" />
+                ) : (
+                  <NoPhotoTile name={p.name} size="sm" />
+                )}
+              </span>
+              <span className="min-w-0 flex-1 text-sm font-medium text-foreground">{p.name}</span>
+              <s className="text-xs text-muted-foreground">
+                {formatPrice(parseFloat(p.originalPrice), { currency }) as string}
+              </s>
+              <span className="text-sm font-semibold text-foreground">
+                {formatPrice(parseFloat(p.discountedPrice), { currency }) as string}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="mt-4 flex flex-wrap items-center gap-3 border-t pt-4">
+        <span className="inline-flex items-baseline gap-2">
+          <s className="text-sm text-muted-foreground">
+            {formatPrice(totalOriginal, { currency }) as string}
+          </s>
+          <span className="text-lg font-bold text-foreground">
+            {formatPrice(totalDiscounted, { currency }) as string}
+          </span>
+        </span>
+        <button
+          type="button"
+          onClick={handleAdd}
+          disabled={adding}
+          className="btn-primary btn-sm ms-auto"
+        >
+          <IconBag size={16} />
+          {adding ? t('addingBundle') : t('addBundleItem')}
+        </button>
+      </div>
+
+      {/*
+        Why the bundle was refused. Without this the button resets and
+        nothing is added, which reads as a broken button.
+      */}
+      {addError && (
+        <p role="alert" className="text-destructive mt-2 text-xs">
+          {addError === 'CART_FULL' ? tp('cartFull') : tp('addToCartFailed')}
+        </p>
+      )}
+    </article>
+  );
+}

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

@@ -12,6 +12,7 @@ import { cn } from '@/core/lib/utils';
 import { getErrorCode } from '@/core/lib/add-to-cart-error';
 import { OrderCustomizations } from '@/components/account/order-customizations';
 import { IconMinus, IconPlus, IconTrash } from '@/ui/shared/icons';
+import { NoPhotoTile } from '@/ui/shared/no-photo-tile';
 
 interface CartItemProps {
   item: CartItemType;
@@ -122,7 +123,7 @@ export function CartItem({ item, onUpdate, className }: CartItemProps) {
         {imageUrl ? (
           <Image src={imageUrl} alt={productName} fill sizes="96px" className="object-cover" />
         ) : (
-          <span className="sr-only">{productName}</span>
+          <NoPhotoTile name={productName} size="sm" />
         )}
       </div>