create-brainerce-store 1.50.5 → 1.52.0

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +1,147 @@
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { useCartPage } from '@/core/hooks/use-cart-page';
+import { CartItem } from '@/ui/cart/cart-item';
+import { CartUpgradeBanner } from '@/ui/cart/cart-upgrade-banner';
+import { CartBundleOfferCard } from '@/ui/cart/cart-bundle-offer';
+import { CartSummary } from '@/ui/cart/cart-summary';
+import { CouponInput } from '@/ui/cart/coupon-input';
+import { CartNudges } from '@/ui/cart/cart-nudges';
+import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
+import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
+import { CartRecommendationSection } from '@/ui/product/recommendation-section';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+import { IconBag, IconArrowEnd, IconShield } from '@/ui/shared/icons';
+
+export function CartView() {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const { cart, cartLoading, refreshCart, itemCount, cartRecs, upgrades, bundles } = useCartPage();
+
+  if (cartLoading) {
+    return <LoadingSpinner size="lg" className="min-h-[60vh]" />;
+  }
+
+  // Empty cart state — designed, never a bare sentence in blank space.
+  if (!cart || cart.items.length === 0) {
+    return (
+      <section className="container-narrow flex min-h-[60vh] items-center justify-center py-16">
+        <div className="card flex w-full max-w-md flex-col items-center gap-3 px-8 py-14 text-center">
+          <span className="flex h-16 w-16 items-center justify-center rounded-full bg-secondary text-primary">
+            <IconBag size={32} />
+          </span>
+          <h1 className="text-2xl sm:text-3xl">{t('emptyTitle')}</h1>
+          <p className="text-muted-foreground">{t('emptySubtitle')}</p>
+          <Link href="/products" className="btn-primary btn-md mt-3">
+            {tc('continueShopping')}
+            <IconArrowEnd size={18} className="rtl-flip" />
+          </Link>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="container-narrow py-8 lg:py-12">
+      <h1 className="text-3xl sm:text-4xl">
+        {t('title')}{' '}
+        <span className="font-sans text-base font-normal text-muted-foreground">
+          ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
+        </span>
+      </h1>
+
+      {/* Reservation countdown */}
+      {cart.reservation?.hasReservation && (
+        <ReservationCountdown reservation={cart.reservation} className="mt-4" />
+      )}
+
+      <div className="mt-6 grid grid-cols-1 items-start gap-8 lg:grid-cols-3 lg:gap-10">
+        {/* Cart Items */}
+        <div className="lg:col-span-2">
+          {/* Nudges */}
+          {cart.nudges && cart.nudges.length > 0 && (
+            <CartNudges nudges={cart.nudges} className="mb-4" />
+          )}
+
+          {/* Cart items */}
+          <ul className="card divide-y overflow-hidden">
+            {cart.items.map((item) => (
+              <li key={item.id} className="p-4 sm:p-5">
+                <CartItem item={item} onUpdate={refreshCart} />
+                {upgrades?.upgrades?.[item.productId] && (
+                  <CartUpgradeBanner
+                    suggestion={upgrades.upgrades[item.productId]}
+                    cartItem={item}
+                    onUpgrade={refreshCart}
+                    className="mt-4"
+                  />
+                )}
+              </li>
+            ))}
+          </ul>
+
+          {/* Bundle offers */}
+          {bundles?.bundles && bundles.bundles.length > 0 && (
+            <section className="mt-6">
+              <h3 className="mb-3 text-xl">{t('bundleOffers')}</h3>
+              <div className="space-y-4">
+                {bundles.bundles.map((offer) => (
+                  <CartBundleOfferCard
+                    key={offer.id}
+                    offer={offer}
+                    cartId={cart.id}
+                    onAdd={refreshCart}
+                  />
+                ))}
+              </div>
+            </section>
+          )}
+
+          {/* Coupon input */}
+          <div className="mt-6">
+            <p className="mb-2 text-sm font-semibold text-foreground">{t('couponTitle')}</p>
+            <CouponInput cart={cart} onUpdate={refreshCart} />
+          </div>
+        </div>
+
+        {/* Summary sidebar */}
+        <aside className="lg:sticky lg:top-24">
+          <div className="card space-y-5 p-5 sm:p-6">
+            <FreeShippingBar />
+            <CartSummary />
+
+            <Link href="/checkout" className="btn-primary btn-lg w-full">
+              {t('proceedToCheckout')}
+              <IconArrowEnd size={20} className="rtl-flip" />
+            </Link>
+
+            <p className="flex items-center justify-center gap-1.5 text-xs text-muted-foreground">
+              <IconShield size={16} />
+              {t('secureCheckoutNote')}
+            </p>
+          </div>
+
+          <p className="mt-4 text-center">
+            <Link
+              href="/products"
+              className="text-sm font-medium text-primary underline-offset-2 hover:underline"
+            >
+              {tc('continueShopping')}
+            </Link>
+          </p>
+        </aside>
+      </div>
+
+      {/* Cross-sell recommendations */}
+      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
+        <CartRecommendationSection
+          title={t('youMightAlsoNeed')}
+          items={cartRecs.recommendations}
+          className="mt-12"
+        />
+      )}
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/cart/coupon-input.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useState } from 'react';
+import type { Cart } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { cn } from '@/core/lib/utils';
+import { IconTag, IconX } from '@/ui/shared/icons';
+
+interface CouponInputProps {
+  cart: Cart;
+  /** When provided, uses applyCheckoutCoupon/removeCheckoutCoupon instead of
+   *  applyCoupon/removeCoupon. Always pass this when a checkout session exists. */
+  checkoutId?: string;
+  onUpdate: () => void;
+  className?: string;
+}
+
+/**
+ * Coupon apply/remove control used on the cart page AND the checkout page
+ * (via `checkoutId`); the `cart` prop comes from useCartPage(). Keeps the
+ * applied-coupon state and the error message.
+ */
+export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInputProps) {
+  const t = useTranslations('coupon');
+  const tc = useTranslations('common');
+  const [code, setCode] = useState('');
+  const [applying, setApplying] = useState(false);
+  const [removing, setRemoving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const appliedCoupon = cart.couponCode || null;
+
+  async function handleApply() {
+    const trimmed = code.trim();
+    if (!trimmed || applying) return;
+
+    try {
+      setApplying(true);
+      setError(null);
+      const client = getClient();
+      if (checkoutId) {
+        await client.applyCheckoutCoupon(checkoutId, trimmed);
+      } else {
+        await client.applyCoupon(cart.id, trimmed);
+      }
+      setCode('');
+      onUpdate();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t('invalidCode');
+      setError(message);
+    } finally {
+      setApplying(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      setError(null);
+      const client = getClient();
+      if (checkoutId) {
+        await client.removeCheckoutCoupon(checkoutId);
+      } else {
+        await client.removeCoupon(cart.id);
+      }
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove coupon:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  // Show applied coupon
+  if (appliedCoupon) {
+    return (
+      <div
+        className={cn(
+          'inline-flex items-center gap-2 rounded-full bg-secondary py-1.5 pe-2 ps-4',
+          className
+        )}
+      >
+        <span aria-hidden="true" className="text-primary">
+          <IconTag size={16} />
+        </span>
+        <span className="text-sm font-semibold text-foreground">{appliedCoupon}</span>
+        <button
+          type="button"
+          onClick={handleRemove}
+          disabled={removing}
+          aria-label={tc('remove')}
+          className="flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50"
+        >
+          {removing ? <LoadingSpinner size="sm" /> : <IconX size={16} />}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(className)}>
+      <div className="flex max-w-sm gap-2">
+        <input
+          type="text"
+          value={code}
+          onChange={(e) => {
+            setCode(e.target.value);
+            if (error) setError(null);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleApply();
+            }
+          }}
+          placeholder={t('placeholder')}
+          aria-label={t('placeholder')}
+          aria-invalid={error ? true : undefined}
+          className="input"
+        />
+        <button
+          type="button"
+          onClick={handleApply}
+          disabled={applying || !code.trim()}
+          className="btn-soft btn-md shrink-0"
+        >
+          {applying ? <LoadingSpinner size="sm" /> : tc('apply')}
+        </button>
+      </div>
+
+      {error && (
+        <p role="alert" className="mt-2 text-sm font-medium text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/cart/free-shipping-bar.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { useStoreInfo, useCart } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { IconTruck, IconCheck } from '@/ui/shared/icons';
+
+interface FreeShippingBarProps {
+  className?: string;
+}
+
+/**
+ * Free-shipping progress on the cart page ("add X more for free shipping");
+ * threshold from useStoreInfo().upsell, subtotal from useCart().totals.
+ * Custom meter (track + forest fill) instead of the semantic <progress>.
+ */
+export function FreeShippingBar({ className }: FreeShippingBarProps) {
+  // Hooks must be called unconditionally and in the same order on every
+  // render — keep all of them above any early `return null` branch.
+  const t = useTranslations('cart');
+  const { storeInfo } = useStoreInfo();
+  const { totals } = useCart();
+  const currency = useCurrency();
+
+  const upsell = storeInfo?.upsell;
+  const threshold = upsell?.freeShippingThreshold;
+  const enabled = upsell?.freeShippingBarEnabled !== false;
+
+  // Don't render if disabled or no threshold configured
+  if (!enabled || !threshold || threshold <= 0) return null;
+
+  const subtotal = totals.subtotal;
+  const remaining = Math.max(0, threshold - subtotal);
+  const qualified = remaining <= 0;
+  const percent = Math.min(100, Math.round((subtotal / threshold) * 100));
+
+  if (qualified) {
+    return (
+      <p
+        className={cn(
+          'flex items-center gap-2 rounded-lg bg-secondary px-3.5 py-2.5 text-sm font-semibold text-primary',
+          className
+        )}
+      >
+        <IconCheck size={18} />
+        {t('freeShippingQualified')}
+      </p>
+    );
+  }
+
+  return (
+    <div className={cn('rounded-lg bg-secondary px-3.5 py-3', className)}>
+      <p className="flex items-center gap-2 text-sm font-medium text-foreground">
+        <span aria-hidden="true" className="text-primary">
+          <IconTruck size={18} />
+        </span>
+        {t('freeShippingRemaining', {
+          amount: formatPrice(remaining, { currency }) as string,
+        })}
+      </p>
+      <div
+        role="progressbar"
+        aria-valuenow={percent}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className="mt-2.5 h-2 overflow-hidden rounded-full bg-background"
+      >
+        <div
+          className="h-full rounded-full bg-primary transition-[width] duration-500"
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/cart/reservation-countdown.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import type { ReservationInfo } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { IconClock } from '@/ui/shared/icons';
+
+interface ReservationCountdownProps {
+  reservation: ReservationInfo;
+  className?: string;
+}
+
+/**
+ * Stock-reservation countdown on the cart/checkout pages; the `reservation`
+ * prop comes from useCartPage().cart.reservation. Keeps the ticking logic
+ * and the expired/urgent states (exposed via data-state).
+ */
+export function ReservationCountdown({ reservation, className }: ReservationCountdownProps) {
+  const t = useTranslations('reservation');
+  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
+
+  const calculateRemaining = useCallback(() => {
+    if (!reservation.expiresAt) return 0;
+    const expiresAtMs = new Date(reservation.expiresAt).getTime();
+    const nowMs = Date.now();
+    return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
+  }, [reservation.expiresAt]);
+
+  useEffect(() => {
+    setRemainingSeconds(calculateRemaining());
+
+    const interval = setInterval(() => {
+      const remaining = calculateRemaining();
+      setRemainingSeconds(remaining);
+
+      if (remaining <= 0) {
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [calculateRemaining]);
+
+  if (!reservation.hasReservation) return null;
+
+  const minutes = Math.floor(remainingSeconds / 60);
+  const seconds = remainingSeconds % 60;
+  const isExpired = remainingSeconds <= 0;
+  const isUrgent = remainingSeconds > 0 && remainingSeconds < 120;
+
+  const displayMessage = reservation.countdownMessage
+    ? reservation.countdownMessage.replace(
+        '{time}',
+        `${minutes}:${seconds.toString().padStart(2, '0')}`
+      )
+    : null;
+
+  return (
+    <div
+      role="timer"
+      data-state={isExpired ? 'expired' : isUrgent ? 'urgent' : 'active'}
+      className={cn(
+        'flex items-center gap-2.5 rounded-lg px-4 py-3 text-sm font-medium',
+        isExpired || isUrgent
+          ? 'bg-destructive/10 text-destructive'
+          : 'bg-secondary text-foreground',
+        className
+      )}
+    >
+      <span aria-hidden="true" className="shrink-0">
+        <IconClock size={18} />
+      </span>
+      {isExpired ? (
+        <p>{t('expired')}</p>
+      ) : displayMessage ? (
+        <p>{displayMessage}</p>
+      ) : (
+        <p>
+          {isUrgent ? `${t('hurry')} ` : ''}
+          {t('reservedFor')}{' '}
+          <span className="font-bold tabular-nums">
+            {minutes}:{seconds.toString().padStart(2, '0')}
+          </span>
+        </p>
+      )}
+    </div>
+  );
+}