@cartbase/storefront 0.8.0 → 0.10.0

package/src/checkout/discount-section.tsx

@@ -1,218 +1,218 @@
-"use client"
-
-import { useState } from "react"
-
-import type { StorefrontClient } from "../api/http"
-import { applyPromotions, type Cart } from "../api/carts"
-import { convertToLocale } from "../lib/money"
-import { cn } from "../lib/utils"
-import { useCheckoutLabels } from "./context"
-import { translatePromotionError } from "./promotion-error-copy"
-
-/**
- * DiscountSection — collapsible promo-code input shown inside the order
- * summary card. Lists currently applied promotions with their discount
- * amount.
- *
- * Ported from `@1click/ui/src/checkout/discount-section.tsx` (v2.3.1) with
- * the Cartbase data seam:
- *
- *  - `applyPromotions(codes)` (Medusa js-sdk server action, full-list
- *    replace) → `POST /api/store/carts/:id/promotions {promo_codes}` — the
- *    Cartbase route is ADDITIVE (upserts each code's link, then re-applies),
- *    so only the NEW code is sent; already-applied codes stay put. The SDK
- *    carts module ships no wrapper for this route yet, so the component
- *    calls it through the client transport with the documented DTO
- *    (verified against src/app/api/store/carts/[id]/promotions/route.ts).
- *  - `cart.promotions` on the Cartbase wire is the raw pivot embed
- *    (`[{promotion: {..., application_method}}]`) — unwrapped here, with a
- *    flat-row fallback should the decoration ever flatten it.
- *  - Errors are code-first (`promotion_not_found` / `promotion_inactive` /
- *    `promotion_misconfigured` / `promotion_unsupported_type` + cart-level
- *    codes) via `translatePromotionError`.
- *
- * The route returns the freshly decorated cart; `onCartChange` hands it to
- * the host (or the host calls `router.refresh()` in an RSC app).
- */
-
-/** Structural shape of one applied promotion (promotions row). */
-type AppliedPromotion = {
-  id: string
-  code: string | null
-  application_method?: {
-    type?: string | null
-    value?: number | string | null
-    currency_code?: string | null
-  } | null
-}
-
-/** Unwrap the Cartbase pivot embed; tolerate an already-flat row. */
-function extractPromotions(cart: Cart): AppliedPromotion[] {
-  const raw = (cart.promotions ?? []) as Array<Record<string, unknown>>
-  return raw
-    .map((row) =>
-      row && typeof row === "object" && "promotion" in row
-        ? (row.promotion as AppliedPromotion | null)
-        : (row as unknown as AppliedPromotion)
-    )
-    .filter((p): p is AppliedPromotion => !!p && typeof p.id === "string")
-}
-
-type DiscountSectionProps = {
-  /** The SDK transport — the promotions route is called through it. */
-  client: StorefrontClient
-  cart: Cart
-  /** Receives the decorated cart returned by a successful apply. */
-  onCartChange?: (cart: Cart) => void
-}
-
-export function DiscountSection({
-  client,
-  cart,
-  onCartChange,
-}: DiscountSectionProps) {
-  const labels = useCheckoutLabels()
-  const [code, setCode] = useState("")
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState("")
-  const [open, setOpen] = useState(false)
-
-  const promotions = extractPromotions(cart)
-
-  const handleApply = async () => {
-    if (!code.trim()) return
-    setLoading(true)
-    setError("")
-    try {
-      // Additive apply — the Cartbase route upserts the new code's link and
-      // re-applies every cart promotion; already-applied codes stay.
-      const { cart: updated } = await applyPromotions(client, cart.id, [code.trim()])
-      onCartChange?.(updated)
-      setCode("")
-    } catch (e: unknown) {
-      // Never surface the raw API error string to the shopper — map to a
-      // proper localized message (code-first, pattern fallback).
-      setError(translatePromotionError(e, { hasEmail: !!cart.email }))
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  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-warning to-warning/70 flex items-center justify-center flex-shrink-0">
-          <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="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
-            />
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M6 6h.008v.008H6V6z"
-            />
-          </svg>
-        </div>
-        <div className="flex-1 text-left">
-          <p className="text-sm font-semibold text-foreground">
-            {labels.discountCode}
-          </p>
-          <p className="text-xs text-muted-foreground">{labels.discountSub}</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="PROMO2024"
-            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>}
-
-      {promotions.length > 0 && (
-        <div className="mt-3 space-y-1.5">
-          {promotions.map((p) => (
-            <div
-              key={p.id}
-              className="flex items-center justify-between px-4 py-2.5 bg-success/10 border border-success/20 rounded-lg"
-            >
-              <div className="flex items-center gap-2">
-                <svg
-                  className="w-4 h-4 text-success"
-                  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">
-                  {p.code}
-                </span>
-              </div>
-              <span className="text-sm font-medium text-success">
-                {p.application_method?.type === "percentage"
-                  ? `-${p.application_method.value}%`
-                  : p.application_method?.value && p.application_method?.currency_code
-                    ? `-${convertToLocale({
-                        amount: +p.application_method.value,
-                        currency_code: p.application_method.currency_code,
-                      })}`
-                    : ""}
-              </span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
+"use client"
+
+import { useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import { applyPromotions, type Cart } from "../api/carts"
+import { convertToLocale } from "../lib/money"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+import { translatePromotionError } from "./promotion-error-copy"
+
+/**
+ * DiscountSection — collapsible promo-code input shown inside the order
+ * summary card. Lists currently applied promotions with their discount
+ * amount.
+ *
+ * Ported from `@1click/ui/src/checkout/discount-section.tsx` (v2.3.1) with
+ * the Cartbase data seam:
+ *
+ *  - `applyPromotions(codes)` (Medusa js-sdk server action, full-list
+ *    replace) → `POST /api/store/carts/:id/promotions {promo_codes}` — the
+ *    Cartbase route is ADDITIVE (upserts each code's link, then re-applies),
+ *    so only the NEW code is sent; already-applied codes stay put. The SDK
+ *    carts module ships no wrapper for this route yet, so the component
+ *    calls it through the client transport with the documented DTO
+ *    (verified against src/app/api/store/carts/[id]/promotions/route.ts).
+ *  - `cart.promotions` on the Cartbase wire is the raw pivot embed
+ *    (`[{promotion: {..., application_method}}]`) — unwrapped here, with a
+ *    flat-row fallback should the decoration ever flatten it.
+ *  - Errors are code-first (`promotion_not_found` / `promotion_inactive` /
+ *    `promotion_misconfigured` / `promotion_unsupported_type` + cart-level
+ *    codes) via `translatePromotionError`.
+ *
+ * The route returns the freshly decorated cart; `onCartChange` hands it to
+ * the host (or the host calls `router.refresh()` in an RSC app).
+ */
+
+/** Structural shape of one applied promotion (promotions row). */
+type AppliedPromotion = {
+  id: string
+  code: string | null
+  application_method?: {
+    type?: string | null
+    value?: number | string | null
+    currency_code?: string | null
+  } | null
+}
+
+/** Unwrap the Cartbase pivot embed; tolerate an already-flat row. */
+function extractPromotions(cart: Cart): AppliedPromotion[] {
+  const raw = (cart.promotions ?? []) as Array<Record<string, unknown>>
+  return raw
+    .map((row) =>
+      row && typeof row === "object" && "promotion" in row
+        ? (row.promotion as AppliedPromotion | null)
+        : (row as unknown as AppliedPromotion)
+    )
+    .filter((p): p is AppliedPromotion => !!p && typeof p.id === "string")
+}
+
+type DiscountSectionProps = {
+  /** The SDK transport — the promotions route is called through it. */
+  client: StorefrontClient
+  cart: Cart
+  /** Receives the decorated cart returned by a successful apply. */
+  onCartChange?: (cart: Cart) => void
+}
+
+export function DiscountSection({
+  client,
+  cart,
+  onCartChange,
+}: DiscountSectionProps) {
+  const labels = useCheckoutLabels()
+  const [code, setCode] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
+  const [open, setOpen] = useState(false)
+
+  const promotions = extractPromotions(cart)
+
+  const handleApply = async () => {
+    if (!code.trim()) return
+    setLoading(true)
+    setError("")
+    try {
+      // Additive apply — the Cartbase route upserts the new code's link and
+      // re-applies every cart promotion; already-applied codes stay.
+      const { cart: updated } = await applyPromotions(client, cart.id, [code.trim()])
+      onCartChange?.(updated)
+      setCode("")
+    } catch (e: unknown) {
+      // Never surface the raw API error string to the shopper — map to a
+      // proper localized message (code-first, pattern fallback).
+      setError(translatePromotionError(e, labels.promotionErrors, { hasEmail: !!cart.email }))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  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-warning to-warning/70 flex items-center justify-center flex-shrink-0">
+          <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="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
+            />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M6 6h.008v.008H6V6z"
+            />
+          </svg>
+        </div>
+        <div className="flex-1 text-left">
+          <p className="text-sm font-semibold text-foreground">
+            {labels.discountCode}
+          </p>
+          <p className="text-xs text-muted-foreground">{labels.discountSub}</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="PROMO2024"
+            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>}
+
+      {promotions.length > 0 && (
+        <div className="mt-3 space-y-1.5">
+          {promotions.map((p) => (
+            <div
+              key={p.id}
+              className="flex items-center justify-between px-4 py-2.5 bg-success/10 border border-success/20 rounded-lg"
+            >
+              <div className="flex items-center gap-2">
+                <svg
+                  className="w-4 h-4 text-success"
+                  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">
+                  {p.code}
+                </span>
+              </div>
+              <span className="text-sm font-medium text-success">
+                {p.application_method?.type === "percentage"
+                  ? `-${p.application_method.value}%`
+                  : p.application_method?.value && p.application_method?.currency_code
+                    ? `-${convertToLocale({
+                        amount: +p.application_method.value,
+                        currency_code: p.application_method.currency_code,
+                      })}`
+                    : ""}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/checkout/error-copy-codes.ts

@@ -0,0 +1,63 @@
+import type {
+  GiftCardErrorCopy,
+  PaymentErrorCopy,
+  PromotionErrorCopy,
+} from "./labels"
+
+/**
+ * WHICH COPY AN API ERROR CODE ASKS FOR — the recognition half of the
+ * checkout's failure copy, kept apart from the words themselves.
+ *
+ * The codes are the store API's own (docs/storefront/checkout.md lists
+ * every code per endpoint). They are wire format, never shown to a
+ * shopper, so they are never translated. The sentence each one maps to
+ * lives in the checkout label pack, which means it is English by default
+ * and translated by whichever locale the store mounts.
+ *
+ * Generated 2026-09-13 from the modules' own Bulgarian maps when the copy
+ * was lifted; a new code is one line here plus one key in the packs, and
+ * the type makes a missing key a compile error.
+ */
+export const PAYMENT_CODE_KEYS: Record<string, keyof PaymentErrorCopy> = {
+  cart_email_required: "cartEmailRequired",
+  cart_empty: "cartEmpty",
+  shipping_address_required: "shippingAddressRequired",
+  shipping_method_required: "shippingMethodRequired",
+  payment_collection_required: "paymentCollectionRequired",
+  payment_session_required: "paymentSessionRequired",
+  insufficient_inventory: "insufficientInventory",
+  checkout_method_hidden: "checkoutMethodHidden",
+  requires_action: "requiresAction",
+  payment_not_authorized: "paymentNotAuthorized",
+  payment_not_initiated: "paymentNotInitiated",
+  payment_incomplete: "paymentIncomplete",
+  gift_card_insufficient_balance: "giftCardInsufficientBalance",
+  gift_card_not_redeemable: "giftCardNotRedeemable",
+  account_required: "accountRequired",
+  cart_locked: "cartLocked",
+  cart_completed: "cartCompleted",
+  cart_not_found: "cartNotFound",
+  shipping_option_not_found: "shippingOptionNotFound",
+  invalid_provider: "invalidProvider",
+  shipping_price_missing: "shippingPriceMissing",
+  stripe_not_configured: "stripeNotConfigured",
+  validation_failed: "validationFailed",
+}
+
+export const GIFT_CARD_CODE_KEYS: Record<string, keyof GiftCardErrorCopy> = {
+  invalid_gift_card: "invalidGiftCard",
+  rate_limited: "rateLimited",
+  cart_completed: "cartCompleted",
+  cart_not_found: "cartNotFound",
+  validation_failed: "validationFailed",
+}
+
+export const PROMOTION_CODE_KEYS: Record<string, keyof PromotionErrorCopy> = {
+  promotion_not_found: "promotionNotFound",
+  promotion_inactive: "promotionInactive",
+  promotion_misconfigured: "promotionMisconfigured",
+  promotion_unsupported_type: "promotionUnsupportedType",
+  cart_completed: "cartCompleted",
+  cart_not_found: "cartNotFound",
+  validation_failed: "validationFailed",
+}

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

@@ -5,7 +5,7 @@ import { useState } from "react"
 import type { StorefrontClient } from "../api/http"
 import type { Cart } from "../api/carts"
 import { applyGiftCard, removeGiftCard } from "../api/gift-cards"
-import { DualPrice } from "../lib/dual-price"
+import { Price } from "../lib/price"
 import { cn } from "../lib/utils"
 import { useCheckoutLabels } from "./context"
 import { translateGiftCardError } from "./payment-error-copy"
@@ -74,7 +74,7 @@ export function GiftCardSection({
       setCode("")
     } catch (e: unknown) {
       // Generic-oracle discipline: one clean message per code family.
-      setError(translateGiftCardError(e))
+      setError(translateGiftCardError(e, labels.giftCardErrors))
     } finally {
       setLoading(false)
     }
@@ -89,7 +89,7 @@ export function GiftCardSection({
       })
       onCartChange?.(updated)
     } catch (e: unknown) {
-      setError(translateGiftCardError(e))
+      setError(translateGiftCardError(e, labels.giftCardErrors))
     } finally {
       setRemovingId(null)
     }
@@ -201,7 +201,7 @@ export function GiftCardSection({
                     remainder didn't shrink. */}
                 <span className="text-sm font-medium text-success">
                   -
-                  <DualPrice
+                  <Price
                     amount={gc.amount}
                     currencyCode={cart.currency_code}
                   />

package/src/checkout/index.ts

@@ -13,7 +13,6 @@ export {
   useOrderConfirmedPath,
 } from "./context"
 export { defaultCheckoutLabels, type CheckoutLabels } from "./labels"
-export { bulgarianCheckoutLabels } from "./labels-bg"
 export { ErrorMessage } from "./error-message"
 export {
   StripeContext,
@@ -51,16 +50,16 @@ export {
 export {
   translatePaymentError,
   translateGiftCardError,
-  PAYMENT_ERROR_CODE_COPY,
-  GIFT_CARD_ERROR_CODE_COPY,
+  paymentErrorKey,
+  giftCardErrorKey,
 } from "./payment-error-copy"
 export {
   translateAddressError,
-  ADDRESS_ERROR_CODE_COPY,
+  addressErrorKey,
 } from "./address-error-copy"
 export {
   translatePromotionError,
-  PROMOTION_ERROR_CODE_COPY,
+  promotionErrorKey,
 } from "./promotion-error-copy"
 export { default as compareAddresses } from "./compare-addresses"
 export {