@cartbase/storefront 0.16.0 → 0.18.0

package/src/cart-drawer/sticky-footer.tsx

@@ -1,73 +1,73 @@
-"use client"
-
-import Link from "next/link"
-
-import { Price } from "../lib/price"
-import { productTotal } from "../lib/cart-helpers"
-import { useCartDrawer } from "./context"
-
-/**
- * CartStickyFooter — bottom-of-drawer subtotal + checkout CTA with
- * iPhone home-indicator safe-area padding.
- *
- * Ported from `@1click/ui/src/cart-drawer/sticky-footer.tsx` (v2.3.1);
- * originally extracted from mindpages-storefront
- * src/modules/cart-drawer/cart-sticky-footer.tsx. Amounts EUR major units.
- */
-
-export function CartStickyFooter() {
-  const { cart, close, labels, hrefs } = useCartDrawer()
-  if (!cart || !cart.items?.length) return null
-
-  // Drawer is pre-checkout context — never read `cart.total` here.
-  // `cart.total` includes shipping/tax/COD fee, all of which are
-  // checkout-context state that must not leak into the shopping
-  // drawer. Sum of product line totals only.
-  const total = productTotal(cart.items)
-  const currencyCode = cart.currency_code
-
-  return (
-    <div
-      className="flex-shrink-0 bg-card px-5 sm:px-6 pt-4 sm:pt-5 relative z-10"
-      style={{
-        boxShadow: "0 -4px 12px rgba(0,0,0,0.04)",
-        paddingBottom: "max(1.25rem, env(safe-area-inset-bottom, 1.25rem))",
-      }}
-    >
-      <div className="flex items-baseline justify-between mb-1">
-        <span className="text-[15px] font-bold text-foreground">
-          {labels.subtotal}
-        </span>
-        <Price
-          amount={total}
-          currencyCode={currencyCode}
-          className="text-xl font-bold text-foreground tracking-tight"
-        />
-      </div>
-      <p className="text-[11px] text-muted-foreground mb-3.5 sm:mb-4">
-        {labels.taxAndShipping}
-      </p>
-      <Link href={hrefs.checkout} onClick={close}>
-        <button
-          type="button"
-          className="w-full h-[52px] bg-foreground hover:bg-foreground/90 active:bg-foreground/95 text-card text-[15px] sm:text-sm font-semibold rounded-[2px] flex items-center justify-center gap-2.5 transition-colors active:scale-[0.98]"
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <rect x="3" y="6" width="10" height="8" rx="1.5" />
-            <path d="M5.5 6V4.5a2.5 2.5 0 015 0V6" />
-          </svg>
-          {labels.secureCheckout}
-        </button>
-      </Link>
-    </div>
-  )
-}
+"use client"
+
+import Link from "next/link"
+
+import { Price } from "../lib/price"
+import { productTotal } from "../lib/cart-helpers"
+import { useCartDrawer } from "./context"
+
+/**
+ * CartStickyFooter — bottom-of-drawer subtotal + checkout CTA with
+ * iPhone home-indicator safe-area padding.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/sticky-footer.tsx` (v2.3.1);
+ * originally extracted from mindpages-storefront
+ * src/modules/cart-drawer/cart-sticky-footer.tsx. Amounts EUR major units.
+ */
+
+export function CartStickyFooter() {
+  const { cart, close, labels, hrefs } = useCartDrawer()
+  if (!cart || !cart.items?.length) return null
+
+  // Drawer is pre-checkout context — never read `cart.total` here.
+  // `cart.total` includes shipping/tax/COD fee, all of which are
+  // checkout-context state that must not leak into the shopping
+  // drawer. Sum of product line totals only.
+  const total = productTotal(cart.items)
+  const currencyCode = cart.currency_code
+
+  return (
+    <div
+      className="flex-shrink-0 bg-card px-5 sm:px-6 pt-4 sm:pt-5 relative z-10"
+      style={{
+        boxShadow: "0 -4px 12px rgba(0,0,0,0.04)",
+        paddingBottom: "max(1.25rem, env(safe-area-inset-bottom, 1.25rem))",
+      }}
+    >
+      <div className="flex items-baseline justify-between mb-1">
+        <span className="text-[15px] font-bold text-foreground">
+          {labels.subtotal}
+        </span>
+        <Price
+          amount={total}
+          currencyCode={currencyCode}
+          className="text-xl font-bold text-foreground tracking-tight"
+        />
+      </div>
+      <p className="text-[11px] text-muted-foreground mb-3.5 sm:mb-4">
+        {labels.taxAndShipping}
+      </p>
+      <Link href={hrefs.checkout} onClick={close}>
+        <button
+          type="button"
+          className="w-full h-[52px] bg-foreground hover:bg-foreground/90 active:bg-foreground/95 text-card text-[15px] sm:text-sm font-semibold rounded-[2px] flex items-center justify-center gap-2.5 transition-colors active:scale-[0.98]"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="6" width="10" height="8" rx="1.5" />
+            <path d="M5.5 6V4.5a2.5 2.5 0 015 0V6" />
+          </svg>
+          {labels.secureCheckout}
+        </button>
+      </Link>
+    </div>
+  )
+}

package/src/cart-drawer/summary-breakdown.tsx

@@ -1,197 +1,197 @@
-"use client"
-
-import type { AppliedGiftCard } from "../api/carts"
-import { convertToLocale } from "../lib/money"
-import { useCartDrawer } from "./context"
-
-/**
- * CartSummaryBreakdown — full totals breakdown for the drawer (or a cart
- * page): subtotal, discount, shipping, tax, COD fee, total, applied
- * gift-card tender and the remainder. Alternative to the compact
- * `CartStickyFooter` (which deliberately shows a product-only subtotal in
- * pre-checkout context).
- *
- * Ported from `@1click/ui/src/cart-drawer/summary-breakdown.tsx` (v2.3.1)
- * and EXPANDED for Cartbase: the source rendered a client-summed product
- * subtotal only; Cartbase's decorated cart carries server-computed totals on
- * every read (`subtotal`, `discount_total`, `shipping_total`, `tax_total`,
- * `payment_method_fee_total`/`payment_method_fee_label`, `gift_cards[]`, `gift_card_total`,
- * `gift_card_remainder`, `total` — all EUR major units), so this component
- * renders EXACTLY what the server returns and computes no money. The only
- * client-side transformation is the display sign on deductions.
- *
- * Row rules (see `selectSummaryRows`):
- * - discount / tax / method-fee rows appear only when their total is > 0.
- * - the method fee renders the server's `payment_method_fee_label`
- *   (labels.paymentMethodFee fallback).
- * - shipping renders the amount once a shipping method is set (0 → FREE);
- *   before that it shows "calculated at checkout".
- * - gift-card tender renders one row per applied card (masked `last4`,
- *   negative display) plus the `gift_card_remainder` row — the amount the
- *   remainder provider actually charges. A depleted card stays listed at 0
- *   (server keeps it in `gift_cards` at amount 0).
- */
-
-/** The decorated-cart fields the breakdown consumes (structural subset). */
-export type SummaryCartTotals = {
-  subtotal: number
-  discount_total: number
-  shipping_total: number
-  tax_total: number
-  total: number
-  payment_method_fee_total?: number
-  payment_method_fee_label?: string | null
-  gift_cards?: AppliedGiftCard[]
-  gift_card_total?: number
-  gift_card_remainder?: number
-  shipping_methods?: ReadonlyArray<unknown>
-}
-
-export type SummaryRow =
-  | { kind: "subtotal"; amount: number }
-  | { kind: "discount"; amount: number }
-  | { kind: "shipping"; amount: number }
-  | { kind: "shipping_pending" }
-  | { kind: "tax"; amount: number }
-  | { kind: "payment_method_fee"; amount: number; label: string | null }
-  | { kind: "total"; amount: number }
-  | { kind: "gift_card"; last4: string; amount: number }
-  | { kind: "remainder"; amount: number }
-
-/**
- * Pure row selection over the decorated-cart totals — exported for unit
- * tests. Amounts pass through verbatim (server truth); deduction rows
- * (discount, gift cards) carry a negated amount for display only.
- */
-export function selectSummaryRows(cart: SummaryCartTotals): SummaryRow[] {
-  const rows: SummaryRow[] = []
-  rows.push({ kind: "subtotal", amount: cart.subtotal })
-
-  if ((cart.discount_total ?? 0) > 0) {
-    rows.push({ kind: "discount", amount: -cart.discount_total })
-  }
-
-  if (cart.shipping_methods && cart.shipping_methods.length > 0) {
-    rows.push({ kind: "shipping", amount: cart.shipping_total })
-  } else {
-    rows.push({ kind: "shipping_pending" })
-  }
-
-  if ((cart.tax_total ?? 0) > 0) {
-    rows.push({ kind: "tax", amount: cart.tax_total })
-  }
-
-  if ((cart.payment_method_fee_total ?? 0) > 0) {
-    rows.push({
-      kind: "payment_method_fee",
-      amount: cart.payment_method_fee_total!,
-      label: cart.payment_method_fee_label ?? null,
-    })
-  }
-
-  rows.push({ kind: "total", amount: cart.total })
-
-  if (cart.gift_cards && cart.gift_cards.length > 0) {
-    for (const card of cart.gift_cards) {
-      // `|| 0` normalizes -0 (a depleted card at amount 0) so Intl never
-      // renders a stray "-€0.00".
-      rows.push({ kind: "gift_card", last4: card.last4, amount: -card.amount || 0 })
-    }
-    rows.push({ kind: "remainder", amount: cart.gift_card_remainder ?? 0 })
-  }
-
-  return rows
-}
-
-export function CartSummaryBreakdown() {
-  const { cart, labels } = useCartDrawer()
-  if (!cart) return null
-
-  const currencyCode = cart.currency_code
-  const money = (amount: number) =>
-    convertToLocale({ amount, currency_code: currencyCode })
-  const rows = selectSummaryRows(cart)
-
-  return (
-    <div className="px-6 py-5 space-y-2">
-      {rows.map((row, i) => {
-        switch (row.kind) {
-          case "subtotal":
-            return (
-              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
-                <span>{labels.subtotal}</span>
-                <span className="tabular-nums">{money(row.amount)}</span>
-              </div>
-            )
-          case "discount":
-            return (
-              <div key={i} className="flex justify-between items-center text-[13px] text-success">
-                <span>{labels.discount}</span>
-                <span className="tabular-nums">{money(row.amount)}</span>
-              </div>
-            )
-          case "shipping":
-            return (
-              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
-                <span>{labels.shipping}</span>
-                <span className="tabular-nums">
-                  {row.amount === 0 ? labels.free : money(row.amount)}
-                </span>
-              </div>
-            )
-          case "shipping_pending":
-            return (
-              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
-                <span>{labels.shipping}</span>
-                <span>{labels.calculatedAtCheckout}</span>
-              </div>
-            )
-          case "tax":
-            return (
-              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
-                <span>{labels.tax}</span>
-                <span className="tabular-nums">{money(row.amount)}</span>
-              </div>
-            )
-          case "payment_method_fee":
-            return (
-              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
-                <span>{row.label ?? labels.paymentMethodFee}</span>
-                <span className="tabular-nums">{money(row.amount)}</span>
-              </div>
-            )
-          case "total":
-            return (
-              <div
-                key={i}
-                className="flex justify-between items-center pt-2 mt-1 border-t border-border"
-              >
-                <span className="text-[15px] font-bold text-foreground">
-                  {labels.total}
-                </span>
-                <span className="text-[17px] font-bold text-foreground tracking-tight tabular-nums">
-                  {money(row.amount)}
-                </span>
-              </div>
-            )
-          case "gift_card":
-            return (
-              <div key={i} className="flex justify-between items-center text-[13px] text-success">
-                <span>
-                  {labels.giftCard} ••{row.last4}
-                </span>
-                <span className="tabular-nums">{money(row.amount)}</span>
-              </div>
-            )
-          case "remainder":
-            return (
-              <div key={i} className="flex justify-between items-center text-[13px] font-semibold text-foreground">
-                <span>{labels.remainingToPay}</span>
-                <span className="tabular-nums">{money(row.amount)}</span>
-              </div>
-            )
-        }
-      })}
-    </div>
-  )
-}
+"use client"
+
+import type { AppliedGiftCard } from "../api/carts"
+import { convertToLocale } from "../lib/money"
+import { useCartDrawer } from "./context"
+
+/**
+ * CartSummaryBreakdown — full totals breakdown for the drawer (or a cart
+ * page): subtotal, discount, shipping, tax, COD fee, total, applied
+ * gift-card tender and the remainder. Alternative to the compact
+ * `CartStickyFooter` (which deliberately shows a product-only subtotal in
+ * pre-checkout context).
+ *
+ * Ported from `@1click/ui/src/cart-drawer/summary-breakdown.tsx` (v2.3.1)
+ * and EXPANDED for Cartbase: the source rendered a client-summed product
+ * subtotal only; Cartbase's decorated cart carries server-computed totals on
+ * every read (`subtotal`, `discount_total`, `shipping_total`, `tax_total`,
+ * `payment_method_fee_total`/`payment_method_fee_label`, `gift_cards[]`, `gift_card_total`,
+ * `gift_card_remainder`, `total` — all EUR major units), so this component
+ * renders EXACTLY what the server returns and computes no money. The only
+ * client-side transformation is the display sign on deductions.
+ *
+ * Row rules (see `selectSummaryRows`):
+ * - discount / tax / method-fee rows appear only when their total is > 0.
+ * - the method fee renders the server's `payment_method_fee_label`
+ *   (labels.paymentMethodFee fallback).
+ * - shipping renders the amount once a shipping method is set (0 → FREE);
+ *   before that it shows "calculated at checkout".
+ * - gift-card tender renders one row per applied card (masked `last4`,
+ *   negative display) plus the `gift_card_remainder` row — the amount the
+ *   remainder provider actually charges. A depleted card stays listed at 0
+ *   (server keeps it in `gift_cards` at amount 0).
+ */
+
+/** The decorated-cart fields the breakdown consumes (structural subset). */
+export type SummaryCartTotals = {
+  subtotal: number
+  discount_total: number
+  shipping_total: number
+  tax_total: number
+  total: number
+  payment_method_fee_total?: number
+  payment_method_fee_label?: string | null
+  gift_cards?: AppliedGiftCard[]
+  gift_card_total?: number
+  gift_card_remainder?: number
+  shipping_methods?: ReadonlyArray<unknown>
+}
+
+export type SummaryRow =
+  | { kind: "subtotal"; amount: number }
+  | { kind: "discount"; amount: number }
+  | { kind: "shipping"; amount: number }
+  | { kind: "shipping_pending" }
+  | { kind: "tax"; amount: number }
+  | { kind: "payment_method_fee"; amount: number; label: string | null }
+  | { kind: "total"; amount: number }
+  | { kind: "gift_card"; last4: string; amount: number }
+  | { kind: "remainder"; amount: number }
+
+/**
+ * Pure row selection over the decorated-cart totals — exported for unit
+ * tests. Amounts pass through verbatim (server truth); deduction rows
+ * (discount, gift cards) carry a negated amount for display only.
+ */
+export function selectSummaryRows(cart: SummaryCartTotals): SummaryRow[] {
+  const rows: SummaryRow[] = []
+  rows.push({ kind: "subtotal", amount: cart.subtotal })
+
+  if ((cart.discount_total ?? 0) > 0) {
+    rows.push({ kind: "discount", amount: -cart.discount_total })
+  }
+
+  if (cart.shipping_methods && cart.shipping_methods.length > 0) {
+    rows.push({ kind: "shipping", amount: cart.shipping_total })
+  } else {
+    rows.push({ kind: "shipping_pending" })
+  }
+
+  if ((cart.tax_total ?? 0) > 0) {
+    rows.push({ kind: "tax", amount: cart.tax_total })
+  }
+
+  if ((cart.payment_method_fee_total ?? 0) > 0) {
+    rows.push({
+      kind: "payment_method_fee",
+      amount: cart.payment_method_fee_total!,
+      label: cart.payment_method_fee_label ?? null,
+    })
+  }
+
+  rows.push({ kind: "total", amount: cart.total })
+
+  if (cart.gift_cards && cart.gift_cards.length > 0) {
+    for (const card of cart.gift_cards) {
+      // `|| 0` normalizes -0 (a depleted card at amount 0) so Intl never
+      // renders a stray "-€0.00".
+      rows.push({ kind: "gift_card", last4: card.last4, amount: -card.amount || 0 })
+    }
+    rows.push({ kind: "remainder", amount: cart.gift_card_remainder ?? 0 })
+  }
+
+  return rows
+}
+
+export function CartSummaryBreakdown() {
+  const { cart, labels } = useCartDrawer()
+  if (!cart) return null
+
+  const currencyCode = cart.currency_code
+  const money = (amount: number) =>
+    convertToLocale({ amount, currency_code: currencyCode })
+  const rows = selectSummaryRows(cart)
+
+  return (
+    <div className="px-6 py-5 space-y-2">
+      {rows.map((row, i) => {
+        switch (row.kind) {
+          case "subtotal":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{labels.subtotal}</span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+          case "discount":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-success">
+                <span>{labels.discount}</span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+          case "shipping":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{labels.shipping}</span>
+                <span className="tabular-nums">
+                  {row.amount === 0 ? labels.free : money(row.amount)}
+                </span>
+              </div>
+            )
+          case "shipping_pending":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{labels.shipping}</span>
+                <span>{labels.calculatedAtCheckout}</span>
+              </div>
+            )
+          case "tax":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{labels.tax}</span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+          case "payment_method_fee":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-muted-foreground">
+                <span>{row.label ?? labels.paymentMethodFee}</span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+          case "total":
+            return (
+              <div
+                key={i}
+                className="flex justify-between items-center pt-2 mt-1 border-t border-border"
+              >
+                <span className="text-[15px] font-bold text-foreground">
+                  {labels.total}
+                </span>
+                <span className="text-[17px] font-bold text-foreground tracking-tight tabular-nums">
+                  {money(row.amount)}
+                </span>
+              </div>
+            )
+          case "gift_card":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] text-success">
+                <span>
+                  {labels.giftCard} ••{row.last4}
+                </span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+          case "remainder":
+            return (
+              <div key={i} className="flex justify-between items-center text-[13px] font-semibold text-foreground">
+                <span>{labels.remainingToPay}</span>
+                <span className="tabular-nums">{money(row.amount)}</span>
+              </div>
+            )
+        }
+      })}
+    </div>
+  )
+}