create-brainerce-store 1.72.0 → 1.73.0

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

@@ -1,158 +1,158 @@
-'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';
-import { IconMinus, IconPlus, IconTrash } from '@/ui/shared/icons';
-
-interface CartItemProps {
-  item: CartItemType;
-  onUpdate: () => void;
-  className?: string;
-}
-
-/**
- * Single cart line: image, name, variant, unit price, quantity controls,
- * remove, line total; the `item` prop comes from useCartPage().cart.
- */
-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;
-
-  // The server decides purchasability, per line. `isAvailable === false` means
-  // this line blocks checkout until it is removed, whether the stock ran out
-  // (a released reservation is the common cause) or the product/variant was
-  // withdrawn from sale. `unavailableReason` separates the two for the label.
-  const isUnavailable = item.isAvailable === false;
-  const unavailableLabel = isUnavailable
-    ? item.unavailableReason === 'OUT_OF_STOCK'
-      ? td('outOfStock')
-      : td('unavailable')
-    : null;
-
-  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 shrink-0 overflow-hidden rounded-lg border bg-secondary sm:h-24 sm:w-24">
-        {imageUrl ? (
-          <Image src={imageUrl} alt={productName} fill sizes="96px" className="object-cover" />
-        ) : (
-          <span className="sr-only">{productName}</span>
-        )}
-      </div>
-
-      {/* Details */}
-      <div className="min-w-0 flex-1">
-        <h3 className="font-sans text-[15px] font-semibold leading-snug text-foreground">
-          {productName}
-        </h3>
-
-        {/* Availability badge. This line blocks checkout while it shows. */}
-        {unavailableLabel && (
-          <span className="mt-1 inline-flex items-center rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive">
-            {unavailableLabel}
-          </span>
-        )}
-
-        {/* Variant name */}
-        {variantName && <p className="mt-0.5 text-xs text-muted-foreground">{variantName}</p>}
-
-        {/* Unit price */}
-        <p className="mt-1 text-sm text-muted-foreground">
-          {formatPrice(unitPrice, { currency }) as string}
-        </p>
-
-        {/* Quantity controls + remove */}
-        <div className="mt-3 flex flex-wrap items-center gap-3">
-          <div
-            className="flex h-9 items-center rounded-full border"
-            role="group"
-            aria-label={td('quantityLabel')}
-          >
-            <button
-              type="button"
-              onClick={() => handleQuantityChange(item.quantity - 1)}
-              disabled={updating || item.quantity <= 1}
-              aria-label={td('decreaseQuantity')}
-              className="flex h-full w-9 items-center justify-center rounded-s-full transition-colors hover:bg-secondary disabled:opacity-40"
-            >
-              <IconMinus size={16} />
-            </button>
-            <span aria-live="polite" className="min-w-7 text-center text-sm font-semibold">
-              {updating ? <LoadingSpinner size="sm" /> : item.quantity}
-            </span>
-            <button
-              type="button"
-              onClick={() => handleQuantityChange(item.quantity + 1)}
-              disabled={updating || isUnavailable}
-              aria-label={td('increaseQuantity')}
-              className="flex h-full w-9 items-center justify-center rounded-e-full transition-colors hover:bg-secondary disabled:opacity-40"
-            >
-              <IconPlus size={16} />
-            </button>
-          </div>
-
-          <button
-            type="button"
-            onClick={handleRemove}
-            disabled={removing}
-            className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-destructive disabled:opacity-50"
-          >
-            <IconTrash size={16} />
-            {removing ? t('removing') : t('remove')}
-          </button>
-        </div>
-      </div>
-
-      {/* Line total */}
-      <span className="text-base font-semibold text-foreground">
-        {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';
+import { IconMinus, IconPlus, IconTrash } from '@/ui/shared/icons';
+
+interface CartItemProps {
+  item: CartItemType;
+  onUpdate: () => void;
+  className?: string;
+}
+
+/**
+ * Single cart line: image, name, variant, unit price, quantity controls,
+ * remove, line total; the `item` prop comes from useCartPage().cart.
+ */
+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;
+
+  // The server decides purchasability, per line. `isAvailable === false` means
+  // this line blocks checkout until it is removed, whether the stock ran out
+  // (a released reservation is the common cause) or the product/variant was
+  // withdrawn from sale. `unavailableReason` separates the two for the label.
+  const isUnavailable = item.isAvailable === false;
+  const unavailableLabel = isUnavailable
+    ? item.unavailableReason === 'OUT_OF_STOCK'
+      ? td('outOfStock')
+      : td('unavailable')
+    : null;
+
+  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="bg-secondary relative h-20 w-20 shrink-0 overflow-hidden rounded-lg border sm:h-24 sm:w-24">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={productName} fill sizes="96px" className="object-cover" />
+        ) : (
+          <span className="sr-only">{productName}</span>
+        )}
+      </div>
+
+      {/* Details */}
+      <div className="min-w-0 flex-1">
+        <h3 className="text-foreground font-sans text-[15px] font-semibold leading-snug">
+          {productName}
+        </h3>
+
+        {/* Availability badge. This line blocks checkout while it shows. */}
+        {unavailableLabel && (
+          <span className="bg-destructive/10 text-destructive mt-1 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium">
+            {unavailableLabel}
+          </span>
+        )}
+
+        {/* Variant name */}
+        {variantName && <p className="text-muted-foreground mt-0.5 text-xs">{variantName}</p>}
+
+        {/* Unit price */}
+        <p className="text-muted-foreground mt-1 text-sm">
+          {formatPrice(unitPrice, { currency }) as string}
+        </p>
+
+        {/* Quantity controls + remove */}
+        <div className="mt-3 flex flex-wrap items-center gap-3">
+          <div
+            className="flex h-9 items-center rounded-full border"
+            role="group"
+            aria-label={td('quantityLabel')}
+          >
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity - 1)}
+              disabled={updating || item.quantity <= 1}
+              aria-label={td('decreaseQuantity')}
+              className="hover:bg-secondary flex h-full w-9 items-center justify-center rounded-s-full transition-colors disabled:opacity-40"
+            >
+              <IconMinus size={16} />
+            </button>
+            <span aria-live="polite" className="min-w-7 text-center text-sm font-semibold">
+              {updating ? <LoadingSpinner size="sm" /> : item.quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity + 1)}
+              disabled={updating || isUnavailable}
+              aria-label={td('increaseQuantity')}
+              className="hover:bg-secondary flex h-full w-9 items-center justify-center rounded-e-full transition-colors disabled:opacity-40"
+            >
+              <IconPlus size={16} />
+            </button>
+          </div>
+
+          <button
+            type="button"
+            onClick={handleRemove}
+            disabled={removing}
+            className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1.5 text-xs font-medium transition-colors disabled:opacity-50"
+          >
+            <IconTrash size={16} />
+            {removing ? t('removing') : t('remove')}
+          </button>
+        </div>
+      </div>
+
+      {/* Line total */}
+      <span className="text-foreground text-base font-semibold">
+        {formatPrice(lineTotal, { currency }) as string}
+      </span>
+    </div>
+  );
+}