@cartbase/storefront 0.19.0 → 0.20.1

package/src/checkout/gift-card-section.tsx

@@ -1,224 +1,224 @@
-"use client"
-
-import { useState } from "react"
-
-import type { StorefrontClient } from "../api/http"
-import type { Cart } from "../api/carts"
-import { applyGiftCard, removeGiftCard } from "../api/gift-cards"
-import { Price } from "../lib/price"
-import { cn } from "../lib/utils"
-import { useCheckoutLabels } from "./context"
-import { translateGiftCardError } from "./payment-error-copy"
-
-/**
- * GiftCardSection — collapsible gift-card input shown inside the order
- * summary card, plus the applied-cards chip list (masked `last4`, per-card
- * coverage, remove).
- *
- * NEW in the Cartbase port (no @1click equivalent — gift-card tender is a
- * Cartbase feature, docs/storefront/gift-cards.md). Built in the
- * DiscountSection idiom so the two summary widgets read as one family.
- *
- * Contract discipline baked in:
- *  - Redemption is TENDER, never a discount: totals/VAT don't move. This
- *    component renders `cart.gift_cards[]` / `gift_card_total` /
- *    `gift_card_remainder` straight off the cart decoration — SERVER
- *    truth, zero client math.
- *  - Apply/remove via `@cartbase/storefront/api/gift-cards`
- *    (POST/DELETE /api/store/carts/:id/gift-cards). Both return the
- *    decorated cart — handed to `onCartChange`.
- *  - The API deliberately answers unknown/disabled/expired/depleted codes
- *    with ONE generic `invalid_gift_card` (no code-existence oracle) and
- *    rate-limits attempts (`rate_limited`). The error copy mirrors that:
- *    one honest generic message per code — never branch on failure reasons
- *    the API hides (`translateGiftCardError`).
- *  - The confirmation is MASKED — only `last4` renders; the code is shown
- *    nowhere after submit.
- *
- * After apply/remove, the checkout must re-sync any pending provider
- * session (`syncPaymentAmount`) — the orchestration hook exposes it; wire
- * `onCartChange` to call it (see CheckoutClient).
- */
-
-type GiftCardSectionProps = {
-  /** The SDK transport — apply/remove go through it. */
-  client: StorefrontClient
-  cart: Cart
-  /** Receives the decorated cart returned by a successful apply/remove. */
-  onCartChange?: (cart: Cart) => void
-}
-
-export function GiftCardSection({
-  client,
-  cart,
-  onCartChange,
-}: GiftCardSectionProps) {
-  const labels = useCheckoutLabels()
-  const [code, setCode] = useState("")
-  const [loading, setLoading] = useState(false)
-  const [removingId, setRemovingId] = useState<string | null>(null)
-  const [error, setError] = useState("")
-  const [open, setOpen] = useState(false)
-
-  const appliedCards = cart.gift_cards ?? []
-
-  const handleApply = async () => {
-    if (!code.trim()) return
-    setLoading(true)
-    setError("")
-    try {
-      const { cart: updated } = await applyGiftCard(client, cart.id, {
-        code: code.trim(),
-      })
-      onCartChange?.(updated)
-      setCode("")
-    } catch (e: unknown) {
-      // Generic-oracle discipline: one clean message per code family.
-      setError(translateGiftCardError(e, labels.giftCardErrors))
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleRemove = async (giftCardId: string) => {
-    setRemovingId(giftCardId)
-    setError("")
-    try {
-      const { cart: updated } = await removeGiftCard(client, cart.id, {
-        gift_card_id: giftCardId,
-      })
-      onCartChange?.(updated)
-    } catch (e: unknown) {
-      setError(translateGiftCardError(e, labels.giftCardErrors))
-    } finally {
-      setRemovingId(null)
-    }
-  }
-
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className="flex items-center gap-3 w-full p-4 rounded-xl border border-border bg-muted/50 hover:bg-muted transition-colors"
-      >
-        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center flex-shrink-0">
-          {/* Gift icon */}
-          <svg
-            className="w-5 h-5 text-card"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H4.5a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
-            />
-          </svg>
-        </div>
-        <div className="flex-1 text-left">
-          <p className="text-sm font-semibold text-foreground">
-            {labels.giftCard}
-          </p>
-          <p className="text-xs text-muted-foreground">{labels.giftCardSub}</p>
-        </div>
-        <span className="text-sm font-medium text-foreground flex items-center gap-1.5">
-          {labels.addCode}
-          <svg
-            className={cn(
-              "w-4 h-4 text-muted-foreground transition-transform duration-200",
-              open && "rotate-180"
-            )}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-            />
-          </svg>
-        </span>
-      </button>
-
-      {open && (
-        <div className="mt-3 flex gap-2">
-          <input
-            type="text"
-            value={code}
-            onChange={(e) => setCode(e.target.value.toUpperCase())}
-            placeholder={labels.giftCardPlaceholder}
-            className="flex-1 h-11 px-4 text-sm bg-card border border-border rounded-xl focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
-          />
-          <button
-            type="button"
-            onClick={handleApply}
-            disabled={loading || !code.trim()}
-            className="px-5 h-11 text-sm font-semibold bg-foreground text-card rounded-xl hover:bg-foreground/90 transition-all disabled:opacity-40"
-          >
-            {labels.addCode}
-          </button>
-        </div>
-      )}
-
-      {error && <p className="text-xs text-destructive mt-2">{error}</p>}
-
-      {appliedCards.length > 0 && (
-        <div className="mt-3 space-y-1.5">
-          {appliedCards.map((gc) => (
-            <div
-              key={gc.id}
-              className={cn(
-                "flex items-center justify-between px-4 py-2.5 bg-success/10 border border-success/20 rounded-lg transition-opacity",
-                removingId === gc.id && "opacity-40 pointer-events-none"
-              )}
-            >
-              <div className="flex items-center gap-2 min-w-0">
-                <svg
-                  className="w-4 h-4 text-success flex-shrink-0"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  strokeWidth={2}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-                <span className="text-sm font-semibold text-success truncate">
-                  {labels.giftCardEnding} ••••{gc.last4}
-                </span>
-              </div>
-              <div className="flex items-center gap-3 flex-shrink-0">
-                {/* Per-card coverage — server-derived; a depleted/disabled
-                    card stays listed at 0 so the shopper sees WHY the
-                    remainder didn't shrink. */}
-                <span className="text-sm font-medium text-success">
-                  -
-                  <Price
-                    amount={gc.amount}
-                    currencyCode={cart.currency_code}
-                  />
-                </span>
-                <button
-                  type="button"
-                  onClick={() => handleRemove(gc.id)}
-                  disabled={removingId !== null}
-                  className="text-xs text-muted-foreground hover:text-destructive hover:underline transition-colors"
-                >
-                  {labels.remove}
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
+"use client"
+
+import { useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import type { Cart } from "../api/carts"
+import { applyGiftCard, removeGiftCard } from "../api/gift-cards"
+import { Price } from "../lib/price"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+import { translateGiftCardError } from "./payment-error-copy"
+
+/**
+ * GiftCardSection — collapsible gift-card input shown inside the order
+ * summary card, plus the applied-cards chip list (masked `last4`, per-card
+ * coverage, remove).
+ *
+ * NEW in the Cartbase port (no @1click equivalent — gift-card tender is a
+ * Cartbase feature, docs/storefront/gift-cards.md). Built in the
+ * DiscountSection idiom so the two summary widgets read as one family.
+ *
+ * Contract discipline baked in:
+ *  - Redemption is TENDER, never a discount: totals/VAT don't move. This
+ *    component renders `cart.gift_cards[]` / `gift_card_total` /
+ *    `gift_card_remainder` straight off the cart decoration — SERVER
+ *    truth, zero client math.
+ *  - Apply/remove via `@cartbase/storefront/api/gift-cards`
+ *    (POST/DELETE /api/store/carts/:id/gift-cards). Both return the
+ *    decorated cart — handed to `onCartChange`.
+ *  - The API deliberately answers unknown/disabled/expired/depleted codes
+ *    with ONE generic `invalid_gift_card` (no code-existence oracle) and
+ *    rate-limits attempts (`rate_limited`). The error copy mirrors that:
+ *    one honest generic message per code — never branch on failure reasons
+ *    the API hides (`translateGiftCardError`).
+ *  - The confirmation is MASKED — only `last4` renders; the code is shown
+ *    nowhere after submit.
+ *
+ * After apply/remove, the checkout must re-sync any pending provider
+ * session (`syncPaymentAmount`) — the orchestration hook exposes it; wire
+ * `onCartChange` to call it (see CheckoutClient).
+ */
+
+type GiftCardSectionProps = {
+  /** The SDK transport — apply/remove go through it. */
+  client: StorefrontClient
+  cart: Cart
+  /** Receives the decorated cart returned by a successful apply/remove. */
+  onCartChange?: (cart: Cart) => void
+}
+
+export function GiftCardSection({
+  client,
+  cart,
+  onCartChange,
+}: GiftCardSectionProps) {
+  const labels = useCheckoutLabels()
+  const [code, setCode] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [removingId, setRemovingId] = useState<string | null>(null)
+  const [error, setError] = useState("")
+  const [open, setOpen] = useState(false)
+
+  const appliedCards = cart.gift_cards ?? []
+
+  const handleApply = async () => {
+    if (!code.trim()) return
+    setLoading(true)
+    setError("")
+    try {
+      const { cart: updated } = await applyGiftCard(client, cart.id, {
+        code: code.trim(),
+      })
+      onCartChange?.(updated)
+      setCode("")
+    } catch (e: unknown) {
+      // Generic-oracle discipline: one clean message per code family.
+      setError(translateGiftCardError(e, labels.giftCardErrors))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleRemove = async (giftCardId: string) => {
+    setRemovingId(giftCardId)
+    setError("")
+    try {
+      const { cart: updated } = await removeGiftCard(client, cart.id, {
+        gift_card_id: giftCardId,
+      })
+      onCartChange?.(updated)
+    } catch (e: unknown) {
+      setError(translateGiftCardError(e, labels.giftCardErrors))
+    } finally {
+      setRemovingId(null)
+    }
+  }
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-3 w-full p-4 rounded-xl border border-border bg-muted/50 hover:bg-muted transition-colors"
+      >
+        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center flex-shrink-0">
+          {/* Gift icon */}
+          <svg
+            className="w-5 h-5 text-card"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H4.5a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+            />
+          </svg>
+        </div>
+        <div className="flex-1 text-left">
+          <p className="text-sm font-semibold text-foreground">
+            {labels.giftCard}
+          </p>
+          <p className="text-xs text-muted-foreground">{labels.giftCardSub}</p>
+        </div>
+        <span className="text-sm font-medium text-foreground flex items-center gap-1.5">
+          {labels.addCode}
+          <svg
+            className={cn(
+              "w-4 h-4 text-muted-foreground transition-transform duration-200",
+              open && "rotate-180"
+            )}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+            />
+          </svg>
+        </span>
+      </button>
+
+      {open && (
+        <div className="mt-3 flex gap-2">
+          <input
+            type="text"
+            value={code}
+            onChange={(e) => setCode(e.target.value.toUpperCase())}
+            placeholder={labels.giftCardPlaceholder}
+            className="flex-1 h-11 px-4 text-sm bg-card border border-border rounded-xl focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
+          />
+          <button
+            type="button"
+            onClick={handleApply}
+            disabled={loading || !code.trim()}
+            className="px-5 h-11 text-sm font-semibold bg-foreground text-card rounded-xl hover:bg-foreground/90 transition-all disabled:opacity-40"
+          >
+            {labels.addCode}
+          </button>
+        </div>
+      )}
+
+      {error && <p className="text-xs text-destructive mt-2">{error}</p>}
+
+      {appliedCards.length > 0 && (
+        <div className="mt-3 space-y-1.5">
+          {appliedCards.map((gc) => (
+            <div
+              key={gc.id}
+              className={cn(
+                "flex items-center justify-between px-4 py-2.5 bg-success/10 border border-success/20 rounded-lg transition-opacity",
+                removingId === gc.id && "opacity-40 pointer-events-none"
+              )}
+            >
+              <div className="flex items-center gap-2 min-w-0">
+                <svg
+                  className="w-4 h-4 text-success flex-shrink-0"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <span className="text-sm font-semibold text-success truncate">
+                  {labels.giftCardEnding} ••••{gc.last4}
+                </span>
+              </div>
+              <div className="flex items-center gap-3 flex-shrink-0">
+                {/* Per-card coverage — server-derived; a depleted/disabled
+                    card stays listed at 0 so the shopper sees WHY the
+                    remainder didn't shrink. */}
+                <span className="text-sm font-medium text-success">
+                  -
+                  <Price
+                    amount={gc.amount}
+                    currencyCode={cart.currency_code}
+                  />
+                </span>
+                <button
+                  type="button"
+                  onClick={() => handleRemove(gc.id)}
+                  disabled={removingId !== null}
+                  className="text-xs text-muted-foreground hover:text-destructive hover:underline transition-colors"
+                >
+                  {labels.remove}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/checkout/index.ts

@@ -1,72 +1,72 @@
-// @cartbase/storefront/checkout — barrel export.
-//
-// Ported from `@1click/ui/src/checkout/index.ts` (v2.3.1). Not ported in
-// this batch: CheckoutLineItem's standalone file (its flat row lives inside
-// order-summary.tsx and is re-exported below) and the Mobile* bars (out of
-// the pre-declared file list; stores compose their own from the hook).
-// Extra modules beyond the pre-declared export list (geocode,
-// compare-addresses) are exported from here only.
-
-export {
-  CheckoutProvider,
-  useCheckoutLabels,
-  useOrderConfirmedPath,
-} from "./context"
-export { defaultCheckoutLabels, type CheckoutLabels } from "./labels"
-export { ErrorMessage } from "./error-message"
-export {
-  StripeContext,
-  StripeScopeProvider,
-  StripeElementsScope,
-  useStripeScope,
-} from "./stripe-wrapper"
-export { PaymentWrapper } from "./payment-wrapper"
-export { PaymentButton } from "./payment-button"
-export {
-  EcontOfficeSelector,
-  type EcontOffice,
-} from "./econt-office-selector"
-export {
-  BoxNowLockerSelector,
-  type BoxNowLocker,
-} from "./boxnow-locker-selector"
-export { AddressSelect } from "./address-select"
-export { CompanyDetails } from "./company-details"
-export { DiscountSection } from "./discount-section"
-export { GiftCardSection } from "./gift-card-section"
-export { LineItemCard } from "./line-item-card"
-export { OrderSummary, CheckoutLineItem } from "./order-summary"
-export { CheckoutAddressForm } from "./address-form"
-export { CheckoutShippingMethodList } from "./shipping-method-list"
-export { CheckoutPaymentMethodList } from "./payment-method-list"
-export { CheckoutClient } from "./checkout-client"
-export {
-  useCheckoutOrchestration,
-  resolveOrderConfirmedPath,
-  type UseCheckoutOrchestrationOptions,
-  type CheckoutLogError,
-  type PaymentProviderLike,
-} from "./use-checkout-orchestration"
-export {
-  translatePaymentError,
-  translateGiftCardError,
-  paymentErrorKey,
-  giftCardErrorKey,
-} from "./payment-error-copy"
-export {
-  translateAddressError,
-  addressErrorKey,
-} from "./address-error-copy"
-export {
-  translatePromotionError,
-  promotionErrorKey,
-} from "./promotion-error-copy"
-export { default as compareAddresses } from "./compare-addresses"
-export {
-  transliterateBgToLatin,
-  normalizeForMatch,
-  distanceMeters,
-  formatDistance,
-  cleanAddress,
-  geocodeAddress,
-} from "./geocode"
+// @cartbase/storefront/checkout — barrel export.
+//
+// Ported from `@1click/ui/src/checkout/index.ts` (v2.3.1). Not ported in
+// this batch: CheckoutLineItem's standalone file (its flat row lives inside
+// order-summary.tsx and is re-exported below) and the Mobile* bars (out of
+// the pre-declared file list; stores compose their own from the hook).
+// Extra modules beyond the pre-declared export list (geocode,
+// compare-addresses) are exported from here only.
+
+export {
+  CheckoutProvider,
+  useCheckoutLabels,
+  useOrderConfirmedPath,
+} from "./context"
+export { defaultCheckoutLabels, type CheckoutLabels } from "./labels"
+export { ErrorMessage } from "./error-message"
+export {
+  StripeContext,
+  StripeScopeProvider,
+  StripeElementsScope,
+  useStripeScope,
+} from "./stripe-wrapper"
+export { PaymentWrapper } from "./payment-wrapper"
+export { PaymentButton } from "./payment-button"
+export {
+  EcontOfficeSelector,
+  type EcontOffice,
+} from "./econt-office-selector"
+export {
+  BoxNowLockerSelector,
+  type BoxNowLocker,
+} from "./boxnow-locker-selector"
+export { AddressSelect } from "./address-select"
+export { CompanyDetails } from "./company-details"
+export { DiscountSection } from "./discount-section"
+export { GiftCardSection } from "./gift-card-section"
+export { LineItemCard } from "./line-item-card"
+export { OrderSummary, CheckoutLineItem } from "./order-summary"
+export { CheckoutAddressForm } from "./address-form"
+export { CheckoutShippingMethodList } from "./shipping-method-list"
+export { CheckoutPaymentMethodList } from "./payment-method-list"
+export { CheckoutClient } from "./checkout-client"
+export {
+  useCheckoutOrchestration,
+  resolveOrderConfirmedPath,
+  type UseCheckoutOrchestrationOptions,
+  type CheckoutLogError,
+  type PaymentProviderLike,
+} from "./use-checkout-orchestration"
+export {
+  translatePaymentError,
+  translateGiftCardError,
+  paymentErrorKey,
+  giftCardErrorKey,
+} from "./payment-error-copy"
+export {
+  translateAddressError,
+  addressErrorKey,
+} from "./address-error-copy"
+export {
+  translatePromotionError,
+  promotionErrorKey,
+} from "./promotion-error-copy"
+export { default as compareAddresses } from "./compare-addresses"
+export {
+  transliterateBgToLatin,
+  normalizeForMatch,
+  distanceMeters,
+  formatDistance,
+  cleanAddress,
+  geocodeAddress,
+} from "./geocode"