create-brainerce-store 1.84.0 → 1.85.0

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

@@ -1,219 +1,222 @@
-'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 { toAddToCartError, type AddToCartError } from '@/core/lib/add-to-cart-error';
-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 tp = useTranslations('productDetail');
-  const currency = useCurrency();
-  const [upgrading, setUpgrading] = useState(false);
-  const [dismissed, setDismissed] = useState(false);
-  // True once the upgraded product is in the cart. A retry after a failed
-  // removal must retry the REMOVAL only, or a second press buys two of them.
-  const [upgradeAdded, setUpgradeAdded] = useState(false);
-  // `'ORIGINAL_NOT_REMOVED'` is kept local instead of being added to the shared
-  // `AddToCartError`: every other consumer of that type branches on
-  // `=== 'CART_FULL'` and would silently render "we could not add this" for a
-  // case where the add actually succeeded.
-  const [upgradeError, setUpgradeError] = useState<AddToCartError | 'ORIGINAL_NOT_REMOVED' | null>(
-    null
-  );
-
-  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;
-
-  // A one-click upgrade cannot choose a variation for the shopper. When the
-  // target is VARIABLE with no pinned variant the backend says so
-  // (`requiresVariantSelection`), and adding it without a `variantId` is
-  // rejected outright, so offering the button here would only ever produce an
-  // error. Say nothing instead of promising something that cannot work; the
-  // shopper can still reach the product from the catalogue and pick a variation
-  // there. If you want to support this properly, add a variation picker to the
-  // banner and pass the chosen `variantId` to `smartAddToCart` below.
-  if (target.requiresVariantSelection && !target.pinnedVariant?.id) return null;
-  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);
-  }
-
-  /**
-   * Swap the cart line for the upgraded product: ADD FIRST, THEN REMOVE.
-   *
-   * The order is load-bearing, not incidental. This used to remove and then
-   * add, so any failure of the add (a network blip, the target selling out, or
-   * the 50-line cart cap answering 400) left the shopper with NEITHER product
-   * and nothing on screen: the remove had committed, the add had not, and the
-   * whole thing went to the console. Adding first means a failed add leaves the
-   * cart exactly as it was.
-   *
-   * The other candidate, remove-then-add with a compensating re-add, was
-   * rejected because the compensation is not a restore. A cart line carries
-   * `modifiers`, `customizations`, `notes` and `parentCartItemId`, and
-   * `smartAddToCart` accepts none of those back in that shape (it takes
-   * `selections`), so re-adding would silently strip the shopper's choices even
-   * when it SUCCEEDS, and orphan a nested-combo child line. The SDK has no swap
-   * primitive to sidestep the choice with (`smartRemoveFromCart` is only
-   * `smartUpdateCartItem(productId, 0, variantId)`), so these two orderings are
-   * the whole option space.
-   *
-   * The accepted cost: the cart is briefly one line longer, so a cart sitting
-   * at the 50-line cap refuses a swap that is net-zero. The shopper is told the
-   * cart is full and the cart is untouched, which is a far better outcome than
-   * losing the line. Do NOT add a "fall back to remove-then-add when the cart is
-   * full" path; that hands the loss window back for a rare edge.
-   */
-  async function handleUpgrade() {
-    if (upgrading) return;
-    setUpgradeError(null);
-    try {
-      setUpgrading(true);
-      const client = getClient();
-      if (!upgradeAdded) {
-        // A VARIABLE target needs a variant. The backend already tells us which
-        // case we are in (`pinnedVariant` when the slot pins one,
-        // `requiresVariantSelection` when the shopper must choose), but this
-        // banner used to send neither -- and `CartService.addItem` rejects a
-        // VARIABLE product with no `variantId`, so an upgrade to a variable
-        // product failed EVERY time, not occasionally. Under the old
-        // remove-then-add ordering that silently destroyed the original line.
-        // The unpinned case is filtered out before render, so by here either a
-        // pin exists or the target is SIMPLE.
-        await client.smartAddToCart({
-          productId: target.id,
-          quantity: cartItem.quantity,
-          ...(target.pinnedVariant?.id ? { variantId: target.pinnedVariant.id } : {}),
-        });
-        setUpgradeAdded(true);
-      }
-      try {
-        await client.smartRemoveFromCart(cartItem.productId, cartItem.variantId || undefined);
-      } catch (err) {
-        // The upgrade IS in the cart and only the old line survived, so nothing
-        // was lost and this is not a failed upgrade. Deliberately does NOT call
-        // onUpgrade(): the backend drops an upgrade suggestion once its target
-        // is in the cart, so refreshing here unmounts this banner and takes the
-        // message with it. Pressing Upgrade again retries the removal alone.
-        setUpgradeError('ORIGINAL_NOT_REMOVED');
-        console.error('Upgraded, but could not remove the original cart item:', err);
-        return;
-      }
-      onUpgrade();
-    } catch (err) {
-      // The add failed, so the cart is untouched. Say so: logging alone left the
-      // button spinning back to idle with nothing changed and no explanation.
-      setUpgradeError(toAddToCartError(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 */}
-      <div className="min-w-0 flex-1">
-        <p className="text-sm text-foreground">
-          {t('upgradeFor', { name: target.name, amount: formattedDelta })}
-        </p>
-
-        {/*
-          Why the swap did not complete. Without this the button resets, the
-          cart looks unchanged, and the shopper has no idea whether anything
-          happened.
-        */}
-        {upgradeError && (
-          <p role="alert" className="text-destructive mt-1 text-xs font-medium">
-            {upgradeError === 'ORIGINAL_NOT_REMOVED'
-              ? t('upgradeOriginalNotRemoved')
-              : upgradeError === 'CART_FULL'
-                ? tp('cartFull')
-                : tp('addToCartFailed')}
-          </p>
-        )}
-      </div>
-
-      {/* 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 { NoPhotoTile } from '@/ui/shared/no-photo-tile';
+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 { toAddToCartError, type AddToCartError } from '@/core/lib/add-to-cart-error';
+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 tp = useTranslations('productDetail');
+  const currency = useCurrency();
+  const [upgrading, setUpgrading] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+  // True once the upgraded product is in the cart. A retry after a failed
+  // removal must retry the REMOVAL only, or a second press buys two of them.
+  const [upgradeAdded, setUpgradeAdded] = useState(false);
+  // `'ORIGINAL_NOT_REMOVED'` is kept local instead of being added to the shared
+  // `AddToCartError`: every other consumer of that type branches on
+  // `=== 'CART_FULL'` and would silently render "we could not add this" for a
+  // case where the add actually succeeded.
+  const [upgradeError, setUpgradeError] = useState<AddToCartError | 'ORIGINAL_NOT_REMOVED' | null>(
+    null
+  );
+
+  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;
+
+  // A one-click upgrade cannot choose a variation for the shopper. When the
+  // target is VARIABLE with no pinned variant the backend says so
+  // (`requiresVariantSelection`), and adding it without a `variantId` is
+  // rejected outright, so offering the button here would only ever produce an
+  // error. Say nothing instead of promising something that cannot work; the
+  // shopper can still reach the product from the catalogue and pick a variation
+  // there. If you want to support this properly, add a variation picker to the
+  // banner and pass the chosen `variantId` to `smartAddToCart` below.
+  if (target.requiresVariantSelection && !target.pinnedVariant?.id) return null;
+  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);
+  }
+
+  /**
+   * Swap the cart line for the upgraded product: ADD FIRST, THEN REMOVE.
+   *
+   * The order is load-bearing, not incidental. This used to remove and then
+   * add, so any failure of the add (a network blip, the target selling out, or
+   * the 50-line cart cap answering 400) left the shopper with NEITHER product
+   * and nothing on screen: the remove had committed, the add had not, and the
+   * whole thing went to the console. Adding first means a failed add leaves the
+   * cart exactly as it was.
+   *
+   * The other candidate, remove-then-add with a compensating re-add, was
+   * rejected because the compensation is not a restore. A cart line carries
+   * `modifiers`, `customizations`, `notes` and `parentCartItemId`, and
+   * `smartAddToCart` accepts none of those back in that shape (it takes
+   * `selections`), so re-adding would silently strip the shopper's choices even
+   * when it SUCCEEDS, and orphan a nested-combo child line. The SDK has no swap
+   * primitive to sidestep the choice with (`smartRemoveFromCart` is only
+   * `smartUpdateCartItem(productId, 0, variantId)`), so these two orderings are
+   * the whole option space.
+   *
+   * The accepted cost: the cart is briefly one line longer, so a cart sitting
+   * at the 50-line cap refuses a swap that is net-zero. The shopper is told the
+   * cart is full and the cart is untouched, which is a far better outcome than
+   * losing the line. Do NOT add a "fall back to remove-then-add when the cart is
+   * full" path; that hands the loss window back for a rare edge.
+   */
+  async function handleUpgrade() {
+    if (upgrading) return;
+    setUpgradeError(null);
+    try {
+      setUpgrading(true);
+      const client = getClient();
+      if (!upgradeAdded) {
+        // A VARIABLE target needs a variant. The backend already tells us which
+        // case we are in (`pinnedVariant` when the slot pins one,
+        // `requiresVariantSelection` when the shopper must choose), but this
+        // banner used to send neither -- and `CartService.addItem` rejects a
+        // VARIABLE product with no `variantId`, so an upgrade to a variable
+        // product failed EVERY time, not occasionally. Under the old
+        // remove-then-add ordering that silently destroyed the original line.
+        // The unpinned case is filtered out before render, so by here either a
+        // pin exists or the target is SIMPLE.
+        await client.smartAddToCart({
+          productId: target.id,
+          quantity: cartItem.quantity,
+          ...(target.pinnedVariant?.id ? { variantId: target.pinnedVariant.id } : {}),
+        });
+        setUpgradeAdded(true);
+      }
+      try {
+        await client.smartRemoveFromCart(cartItem.productId, cartItem.variantId || undefined);
+      } catch (err) {
+        // The upgrade IS in the cart and only the old line survived, so nothing
+        // was lost and this is not a failed upgrade. Deliberately does NOT call
+        // onUpgrade(): the backend drops an upgrade suggestion once its target
+        // is in the cart, so refreshing here unmounts this banner and takes the
+        // message with it. Pressing Upgrade again retries the removal alone.
+        setUpgradeError('ORIGINAL_NOT_REMOVED');
+        console.error('Upgraded, but could not remove the original cart item:', err);
+        return;
+      }
+      onUpgrade();
+    } catch (err) {
+      // The add failed, so the cart is untouched. Say so: logging alone left the
+      // button spinning back to idle with nothing changed and no explanation.
+      setUpgradeError(toAddToCartError(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" />
+        ) : (
+          <NoPhotoTile name={target.name} size="sm" />
+        )}
+      </span>
+
+      {/* Text */}
+      <div className="min-w-0 flex-1">
+        <p className="text-sm text-foreground">
+          {t('upgradeFor', { name: target.name, amount: formattedDelta })}
+        </p>
+
+        {/*
+          Why the swap did not complete. Without this the button resets, the
+          cart looks unchanged, and the shopper has no idea whether anything
+          happened.
+        */}
+        {upgradeError && (
+          <p role="alert" className="text-destructive mt-1 text-xs font-medium">
+            {upgradeError === 'ORIGINAL_NOT_REMOVED'
+              ? t('upgradeOriginalNotRemoved')
+              : upgradeError === 'CART_FULL'
+                ? tp('cartFull')
+                : tp('addToCartFailed')}
+          </p>
+        )}
+      </div>
+
+      {/* 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>
+  );
+}