create-brainerce-store 1.72.0 → 1.74.0

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

@@ -1,99 +1,98 @@
-'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 { TaxEstimateLine } from '@/ui/cart/tax-estimate-line';
+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: a real estimate when the store has a rate for the buyer's
+            country, and the original "calculated at checkout" row otherwise. */}
+        <TaxEstimateLine />
+
+        {/* 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>
+  );
+}

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

@@ -1,140 +1,140 @@
-'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';
-
-export function CartView() {
-  const t = useTranslations('cart');
-  const tc = useTranslations('common');
-  const tr = useTranslations('reservation');
-  const {
-    cart,
-    cartLoading,
-    refreshCart,
-    itemCount,
-    cartRecs,
-    upgrades,
-    bundles,
-    reservationExpired,
-    unavailableItems,
-    canProceedToCheckout,
-    onReservationExpired,
-  } = useCartPage();
-
-  if (cartLoading) {
-    return <LoadingSpinner size="lg" />;
-  }
-
-  // Empty cart state
-  if (!cart || cart.items.length === 0) {
-    return (
-      <section>
-        {/* DESIGN ME — empty-cart state: message + continue-shopping CTA; state comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-        <h1>{t('emptyTitle')}</h1>
-        <p>{t('emptySubtitle')}</p>
-        <Link href="/products">{tc('continueShopping')}</Link>
-      </section>
-    );
-  }
-
-  return (
-    <section>
-      {/* DESIGN ME — cart page: items list, upgrade/bundle offers, coupon, summary sidebar, checkout CTA, cross-sells; everything comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <h1>
-        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
-      </h1>
-
-      {/* Reservation countdown. onExpire refreshes the cart and closes the
-          checkout gate below. Passing it is what makes expiry mean anything. */}
-      {cart.reservation?.hasReservation && (
-        <ReservationCountdown reservation={cart.reservation} onExpire={onReservationExpired} />
-      )}
-
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        {/* Cart Items */}
-        <div className="lg:col-span-2">
-          {/* Nudges */}
-          {cart.nudges && cart.nudges.length > 0 && <CartNudges nudges={cart.nudges} />}
-
-          {/* Cart items */}
-          <ul>
-            {cart.items.map((item) => (
-              <li key={item.id}>
-                <CartItem item={item} onUpdate={refreshCart} />
-                {upgrades?.upgrades?.[item.productId] && (
-                  <CartUpgradeBanner
-                    suggestion={upgrades.upgrades[item.productId]}
-                    cartItem={item}
-                    onUpgrade={refreshCart}
-                  />
-                )}
-              </li>
-            ))}
-          </ul>
-
-          {/* Bundle offers */}
-          {bundles?.bundles && bundles.bundles.length > 0 && (
-            <section>
-              <h3>{t('bundleOffers')}</h3>
-              {bundles.bundles.map((offer) => (
-                <CartBundleOfferCard
-                  key={offer.id}
-                  offer={offer}
-                  cartId={cart.id}
-                  onAdd={refreshCart}
-                />
-              ))}
-            </section>
-          )}
-
-          {/* Coupon input */}
-          <CouponInput cart={cart} onUpdate={refreshCart} />
-        </div>
-
-        {/* Summary sidebar */}
-        <aside className="lg:col-span-1">
-          <FreeShippingBar />
-          <CartSummary />
-
-          {/* Proceed to checkout. When the gate is closed this must be a real
-              disabled control, never a styled-down link: an anchor ignores
-              `disabled` and would still navigate. */}
-          {canProceedToCheckout ? (
-            <Link href="/checkout">{t('proceedToCheckout')}</Link>
-          ) : (
-            <>
-              <button type="button" disabled>
-                {t('proceedToCheckout')}
-              </button>
-              <p data-state="blocked">
-                {unavailableItems.length > 0
-                  ? t('unavailableItemsHint')
-                  : reservationExpired
-                    ? tr('expiredHint')
-                    : null}
-              </p>
-            </>
-          )}
-
-          <Link href="/products">{tc('continueShopping')}</Link>
-        </aside>
-      </div>
-
-      {/* Cross-sell recommendations */}
-      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
-        <CartRecommendationSection title={t('youMightAlsoNeed')} items={cartRecs.recommendations} />
-      )}
-    </section>
-  );
-}
+'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';
+
+export function CartView() {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const tr = useTranslations('reservation');
+  const {
+    cart,
+    cartLoading,
+    refreshCart,
+    itemCount,
+    cartRecs,
+    upgrades,
+    bundles,
+    reservationExpired,
+    unavailableItems,
+    canProceedToCheckout,
+    onReservationExpired,
+  } = useCartPage();
+
+  if (cartLoading) {
+    return <LoadingSpinner size="lg" />;
+  }
+
+  // Empty cart state
+  if (!cart || cart.items.length === 0) {
+    return (
+      <section>
+        {/* DESIGN ME — empty-cart state: message + continue-shopping CTA; state comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <h1>{t('emptyTitle')}</h1>
+        <p>{t('emptySubtitle')}</p>
+        <Link href="/products">{tc('continueShopping')}</Link>
+      </section>
+    );
+  }
+
+  return (
+    <section>
+      {/* DESIGN ME — cart page: items list, upgrade/bundle offers, coupon, summary sidebar, checkout CTA, cross-sells; everything comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <h1>
+        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
+      </h1>
+
+      {/* Reservation countdown. onExpire refreshes the cart and closes the
+          checkout gate below. Passing it is what makes expiry mean anything. */}
+      {cart.reservation?.hasReservation && (
+        <ReservationCountdown reservation={cart.reservation} onExpire={onReservationExpired} />
+      )}
+
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+        {/* Cart Items */}
+        <div className="lg:col-span-2">
+          {/* Nudges */}
+          {cart.nudges && cart.nudges.length > 0 && <CartNudges nudges={cart.nudges} />}
+
+          {/* Cart items */}
+          <ul>
+            {cart.items.map((item) => (
+              <li key={item.id}>
+                <CartItem item={item} onUpdate={refreshCart} />
+                {upgrades?.upgrades?.[item.productId] && (
+                  <CartUpgradeBanner
+                    suggestion={upgrades.upgrades[item.productId]}
+                    cartItem={item}
+                    onUpgrade={refreshCart}
+                  />
+                )}
+              </li>
+            ))}
+          </ul>
+
+          {/* Bundle offers */}
+          {bundles?.bundles && bundles.bundles.length > 0 && (
+            <section>
+              <h3>{t('bundleOffers')}</h3>
+              {bundles.bundles.map((offer) => (
+                <CartBundleOfferCard
+                  key={offer.id}
+                  offer={offer}
+                  cartId={cart.id}
+                  onAdd={refreshCart}
+                />
+              ))}
+            </section>
+          )}
+
+          {/* Coupon input */}
+          <CouponInput cart={cart} onUpdate={refreshCart} />
+        </div>
+
+        {/* Summary sidebar */}
+        <aside className="lg:col-span-1">
+          <FreeShippingBar />
+          <CartSummary />
+
+          {/* Proceed to checkout. When the gate is closed this must be a real
+              disabled control, never a styled-down link: an anchor ignores
+              `disabled` and would still navigate. */}
+          {canProceedToCheckout ? (
+            <Link href="/checkout">{t('proceedToCheckout')}</Link>
+          ) : (
+            <>
+              <button type="button" disabled>
+                {t('proceedToCheckout')}
+              </button>
+              <p data-state="blocked">
+                {unavailableItems.length > 0
+                  ? t('unavailableItemsHint')
+                  : reservationExpired
+                    ? tr('expiredHint')
+                    : null}
+              </p>
+            </>
+          )}
+
+          <Link href="/products">{tc('continueShopping')}</Link>
+        </aside>
+      </div>
+
+      {/* Cross-sell recommendations */}
+      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
+        <CartRecommendationSection title={t('youMightAlsoNeed')} items={cartRecs.recommendations} />
+      )}
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/cart/gift-card-input.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useState } from 'react';
+import type { Checkout } 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';
+
+interface GiftCardInputProps {
+  checkoutId: string;
+  /** Cards already on this checkout. Each is removed by its own tenderId. */
+  tenders: NonNullable<Checkout['tenders']>;
+  /** Formats an amount in the checkout's currency. */
+  formatAmount: (value: string) => string;
+  onUpdate: () => void;
+  className?: string;
+}
+
+/**
+ * DESIGN ME — gift-card redemption control on the checkout page; `tenders` and
+ * `formatAmount` come from the checkout page's own state.
+ *
+ * ⛔ Do NOT design this as a second coupon field. A coupon reduces what the
+ * order is worth; a gift card PAYS for an order that is still worth what it
+ * was. The total does not move and tax is unchanged — only the amount charged
+ * to the payment provider drops. Style the applied card as its own line near
+ * the total, never inside the discount row, or the shopper is shown one number
+ * and charged another and the receipt misstates the taxable base.
+ *
+ * Keep: the list of applied cards (each removable by `tenderId`), the code
+ * field, and the error message. A checkout can carry several cards at once.
+ *
+ * Keep `dir="ltr"` on the input — the code is Latin even on an RTL storefront.
+ *
+ * Refusals are deliberately identical for "no such code", "expired", "already
+ * spent" and "wrong currency": anything that tells them apart is an oracle
+ * someone walks the code space against. Show what the server said; never guess
+ * a more specific reason.
+ *
+ * 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 GiftCardInput({
+  checkoutId,
+  tenders,
+  formatAmount,
+  onUpdate,
+  className,
+}: GiftCardInputProps) {
+  const t = useTranslations('giftCard');
+  const tc = useTranslations('common');
+  const [code, setCode] = useState('');
+  const [applying, setApplying] = useState(false);
+  const [removingId, setRemovingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleApply() {
+    const trimmed = code.trim();
+    if (!trimmed || applying) return;
+
+    try {
+      setApplying(true);
+      setError(null);
+      await getClient().applyGiftCard(checkoutId, trimmed);
+      // Cleared on success only. A rejected code stays in the field so the
+      // shopper can fix a typo instead of re-reading it off the card.
+      setCode('');
+      onUpdate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('invalidCode'));
+    } finally {
+      setApplying(false);
+    }
+  }
+
+  async function handleRemove(tenderId: string) {
+    if (removingId) return;
+
+    try {
+      setRemovingId(tenderId);
+      setError(null);
+      await getClient().removeGiftCard(checkoutId, tenderId);
+      onUpdate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('removeFailed'));
+    } finally {
+      setRemovingId(null);
+    }
+  }
+
+  return (
+    <div className={cn(className)}>
+      {tenders.length > 0 && (
+        <ul>
+          {tenders.map((tender) => (
+            <li key={tender.tenderId}>
+              {/* What was applied, not what the card holds. A ₪200 card on a
+                  ₪50 order applies ₪50 and keeps the rest for next time —
+                  showing the balance here would look like a lost ₪150. */}
+              <span>{t('applied', { amount: formatAmount(tender.amountApplied) })}</span>
+              <button
+                type="button"
+                onClick={() => handleRemove(tender.tenderId)}
+                disabled={removingId === tender.tenderId}
+              >
+                {removingId === tender.tenderId ? tc('removing') : tc('remove')}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <div className="flex 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}
+          dir="ltr"
+          autoComplete="off"
+          spellCheck={false}
+        />
+        <button type="button" onClick={handleApply} disabled={applying || !code.trim()}>
+          {applying ? <LoadingSpinner size="sm" /> : tc('apply')}
+        </button>
+      </div>
+
+      {error && <p role="alert">{error}</p>}
+    </div>
+  );
+}