@cartbase/storefront 0.7.0 → 0.9.0

package/src/api/http.ts

@@ -4,9 +4,11 @@
  * Every SDK function in this package is a thin typed wrapper over
  * `storeFetch()` from a `StorefrontClient`. Auth model (store-api.md):
  *
- *  - `x-client-id`      — required for anon reads (RLS scope)
- *  - `x-publishable-api-key` — optional; scopes catalog/carts to the key's
- *                              sales channels when set
+ *  - `x-publishable-api-key` — THE store's key: names the store on its own
+ *                              (one key, 2026-09-07) and scopes catalog and
+ *                              carts to the key's sales channels
+ *  - `x-client-id`      — the platform's own door (hosted builds carry it);
+ *                          optional, wins over the key when both are sent
  *  - `authorization: Bearer <jwt>` — customer session (passwordless code
  *                              flow or supabase password login)
  *  - `x-locale`         — optional storefront locale hint
@@ -19,12 +21,16 @@
 import { StoreApiError } from "./types"
 
 export interface StorefrontClientConfig {
-  /** Deployment origin, e.g. `https://admin.mindpages.bg` */
+  /** Deployment origin, e.g. `https://admin.cartbase.ai` */
   baseUrl: string
-  /** Tenant id — required for anon reads. */
-  clientId: string
-  /** Publishable API key (channel scope). Optional for single-channel stores. */
+  /**
+   * The store's publishable key: names the store and scopes the catalog to
+   * the key's sales channels. The one input a merchant hands out; at least
+   * one of `publishableKey` and `clientId` is required.
+   */
   publishableKey?: string
+  /** Tenant id — the platform's own door. Optional when a key is given. */
+  clientId?: string
   /** Called per request; return the customer JWT or null for guests. */
   getAuthToken?: () => string | null | Promise<string | null>
   /** Called per request; return the active locale code or null. */
@@ -50,7 +56,9 @@ export interface RequestOptions {
 export class StorefrontClient {
   constructor(private readonly config: StorefrontClientConfig) {
     if (!config.baseUrl) throw new Error("StorefrontClient: baseUrl is required")
-    if (!config.clientId) throw new Error("StorefrontClient: clientId is required")
+    if (!config.publishableKey && !config.clientId) {
+      throw new Error("StorefrontClient: publishableKey (or clientId) is required")
+    }
   }
 
   /** The low-level typed request. Domain modules call this — apps rarely should. */
@@ -72,7 +80,7 @@ export class StorefrontClient {
     }
 
     const headers: Record<string, string> = {
-      "x-client-id": this.config.clientId,
+      ...(this.config.clientId ? { "x-client-id": this.config.clientId } : {}),
       ...(this.config.publishableKey
         ? { "x-publishable-api-key": this.config.publishableKey }
         : {}),

package/src/api/index.ts

@@ -13,6 +13,7 @@ export * as products from "./products"
 export * as collections from "./collections"
 export * as categories from "./categories"
 export * as regions from "./regions"
+export * as store from "./store"
 export * as carts from "./carts"
 export * as giftCards from "./gift-cards"
 export * as checkout from "./checkout"

package/src/api/store.ts

@@ -0,0 +1,35 @@
+/**
+ * @cartbase/storefront/api/store — the store's identity.
+ *
+ * Name, slug and brand (the merchant's Settings → Brand): what a
+ * storefront needs to title, head and foot itself without hardcoding a
+ * name. One anonymous read at layout level. Docs: docs/storefront/store.md.
+ */
+import type { StorefrontClient } from "./http"
+
+export interface StoreBrand {
+  /** Primary logo, public URL, or null. */
+  logo_url: string | null
+  /** Square mark, public URL, or null. */
+  logo_square_url: string | null
+  /** `#rrggbb` or null. */
+  color_primary: string | null
+  /** `#rrggbb` or null. */
+  color_secondary: string | null
+  slogan: string | null
+}
+
+export interface StoreIdentity {
+  /** The store's public id: what `<PlatformInit storeId>` mounts. */
+  id: string
+  /** The store's display name. */
+  name: string
+  /** The store's slug; its address is `{slug}.cartbase.net` until a custom domain. */
+  slug: string
+  brand: StoreBrand
+}
+
+/** GET /api/store/store — anon. */
+export function getStore(client: StorefrontClient): Promise<{ store: StoreIdentity }> {
+  return client.request<{ store: StoreIdentity }>("/api/store/store")
+}

package/src/cart-drawer/cross-sell-carousel.tsx

@@ -4,7 +4,7 @@ import Image from "next/image"
 import Link from "next/link"
 import { useRef, useState } from "react"
 
-import { DualPrice } from "../lib/dual-price"
+import { Price } from "../lib/price"
 import { cn } from "../lib/utils"
 import { useCartDrawer } from "./context"
 
@@ -178,11 +178,10 @@ export function CartCrossSellCarousel({
               >
                 {product.title}
               </Link>
-              <DualPrice
+              <Price
                 amount={product.price}
                 currencyCode={product.currencyCode}
                 className="text-[13px] font-bold text-foreground block mt-0.5"
-                bgnClassName="text-muted-foreground text-[10px] ml-1"
               />
             </div>
 

package/src/cart-drawer/gift-wrap.tsx

@@ -1,83 +1,82 @@
-"use client"
-
-import { useState } from "react"
-
-import { DualPrice } from "../lib/dual-price"
-import { cn } from "../lib/utils"
-import { useCartDrawer } from "./context"
-
-/**
- * CartGiftWrap — inline toggle row for adding gift wrapping to the cart.
- *
- * Ported from `@1click/ui/src/cart-drawer/gift-wrap.tsx` (v2.3.1);
- * originally extracted from mindpages-storefront
- * src/modules/cart-drawer/cart-gift-wrap.tsx. `price` is EUR major units.
- * The store owns the effect: wire `onToggle` to add/remove the store's
- * gift-wrap variant via the provider's `addItem` / `removeItem`.
- */
-
-type CartGiftWrapProps = {
-  price: number
-  currencyCode: string
-  enabled?: boolean
-  onToggle?: (enabled: boolean) => void
-}
-
-export function CartGiftWrap({
-  price,
-  currencyCode,
-  enabled = false,
-  onToggle,
-}: CartGiftWrapProps) {
-  const { labels } = useCartDrawer()
-  const [checked, setChecked] = useState(enabled)
-
-  const handleToggle = () => {
-    const next = !checked
-    setChecked(next)
-    onToggle?.(next)
-  }
-
-  return (
-    <div className="px-5 sm:px-6 py-2">
-      <button
-        type="button"
-        onClick={handleToggle}
-        className="flex items-center gap-3 w-full text-left py-2 min-h-[44px] group"
-      >
-        <div
-          className={cn(
-            "w-5 h-5 rounded border-[1.5px] flex items-center justify-center transition-all flex-shrink-0",
-            checked
-              ? "bg-foreground border-text-base"
-              : "border-border group-hover:border-text-muted group-active:border-text-muted"
-          )}
-        >
-          {checked && (
-            <svg
-              width="10"
-              height="10"
-              viewBox="0 0 10 10"
-              fill="none"
-              stroke="white"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M2 5l2 2 4-4" />
-            </svg>
-          )}
-        </div>
-        <span className="text-[13px] text-foreground flex-1">
-          {labels.addGiftWrap}
-        </span>
-        <DualPrice
-          amount={price}
-          currencyCode={currencyCode}
-          className="text-[13px] text-muted-foreground font-medium"
-          bgnClassName="text-muted-foreground text-[10px] ml-1"
-        />
-      </button>
-    </div>
-  )
-}
+"use client"
+
+import { useState } from "react"
+
+import { Price } from "../lib/price"
+import { cn } from "../lib/utils"
+import { useCartDrawer } from "./context"
+
+/**
+ * CartGiftWrap — inline toggle row for adding gift wrapping to the cart.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/gift-wrap.tsx` (v2.3.1);
+ * originally extracted from mindpages-storefront
+ * src/modules/cart-drawer/cart-gift-wrap.tsx. `price` is EUR major units.
+ * The store owns the effect: wire `onToggle` to add/remove the store's
+ * gift-wrap variant via the provider's `addItem` / `removeItem`.
+ */
+
+type CartGiftWrapProps = {
+  price: number
+  currencyCode: string
+  enabled?: boolean
+  onToggle?: (enabled: boolean) => void
+}
+
+export function CartGiftWrap({
+  price,
+  currencyCode,
+  enabled = false,
+  onToggle,
+}: CartGiftWrapProps) {
+  const { labels } = useCartDrawer()
+  const [checked, setChecked] = useState(enabled)
+
+  const handleToggle = () => {
+    const next = !checked
+    setChecked(next)
+    onToggle?.(next)
+  }
+
+  return (
+    <div className="px-5 sm:px-6 py-2">
+      <button
+        type="button"
+        onClick={handleToggle}
+        className="flex items-center gap-3 w-full text-left py-2 min-h-[44px] group"
+      >
+        <div
+          className={cn(
+            "w-5 h-5 rounded border-[1.5px] flex items-center justify-center transition-all flex-shrink-0",
+            checked
+              ? "bg-foreground border-text-base"
+              : "border-border group-hover:border-text-muted group-active:border-text-muted"
+          )}
+        >
+          {checked && (
+            <svg
+              width="10"
+              height="10"
+              viewBox="0 0 10 10"
+              fill="none"
+              stroke="white"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M2 5l2 2 4-4" />
+            </svg>
+          )}
+        </div>
+        <span className="text-[13px] text-foreground flex-1">
+          {labels.addGiftWrap}
+        </span>
+        <Price
+          amount={price}
+          currencyCode={currencyCode}
+          className="text-[13px] text-muted-foreground font-medium"
+        />
+      </button>
+    </div>
+  )
+}

package/src/cart-drawer/item/index.tsx

@@ -5,7 +5,7 @@ import Link from "next/link"
 import { type ReactNode } from "react"
 
 import type { CartLineItem } from "../../api/carts"
-import { DualPrice } from "../../lib/dual-price"
+import { Price } from "../../lib/price"
 import { cn } from "../../lib/utils"
 import { useCartDrawer } from "../context"
 import { CartItemQuantity } from "./quantity"
@@ -13,7 +13,7 @@ import { CartItemVariant } from "./variant"
 
 /**
  * CartItem — a single cart line row: thumbnail, title, variant, quantity
- * stepper, price (with dual-currency + optional strikethrough), remove button.
+ * stepper, price (with optional strikethrough), remove button.
  *
  * Ported from `@1click/ui/src/cart-drawer/item/index.tsx` (v2.3.1). Cartbase
  * data seam: `item` is the SDK's decorated `CartLineItem`
@@ -111,22 +111,20 @@ export function CartItem({ item, currencyCode, children }: CartItemProps) {
             <div className="text-right flex-shrink-0">
               {hasDiscount && (
                 <span className="text-xs text-muted-foreground line-through block leading-none mb-0.5">
-                  <DualPrice
+                  <Price
                     amount={originalTotal}
                     currencyCode={currencyCode}
                     className="text-xs text-muted-foreground"
-                    bgnClassName="hidden"
                   />
                 </span>
               )}
-              <DualPrice
+              <Price
                 amount={total}
                 currencyCode={currencyCode}
                 className={cn(
                   "text-sm font-bold",
                   hasDiscount ? "text-success" : "text-foreground"
                 )}
-                bgnClassName="text-muted-foreground text-[10px] ml-1"
               />
             </div>
           </div>

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

@@ -1,73 +1,73 @@
-"use client"
-
-import Link from "next/link"
-
-import { DualPrice } from "../lib/dual-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>
-        <DualPrice
-          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/checkout/geocode.ts

@@ -141,7 +141,7 @@ export async function geocodeAddress(
     url.searchParams.set("limit", "1")
 
     const res = await fetch(url.toString(), {
-      headers: { "User-Agent": "barter-storefront/1.0" },
+      headers: { "User-Agent": "cartbase-storefront/1.0" },
     })
     const data = await res.json()
     if (data?.[0]) {

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"
@@ -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/line-item-card.tsx

@@ -4,14 +4,14 @@ import { useState } from "react"
 
 import type { StorefrontClient } from "../api/http"
 import { updateLineItem, type Cart, type CartLineItem } from "../api/carts"
-import { DualPrice } from "../lib/dual-price"
+import { Price } from "../lib/price"
 import { cn } from "../lib/utils"
 import { useCheckoutLabels } from "./context"
 
 /**
  * LineItemCard — a single cart line shown inside the checkout order
  * summary card. Includes thumbnail, title, variant, quantity select,
- * and dual-currency price.
+ * and price.
  *
  * Ported from `@1click/ui/src/checkout/line-item-card.tsx` (v2.3.1) with
  * the Cartbase data seam: the cookie-bound `updateLineItem` server action →
@@ -141,7 +141,7 @@ export function LineItemCard({
       </div>
 
       <div className="flex flex-col items-end justify-center flex-shrink-0">
-        <DualPrice
+        <Price
           amount={total}
           currencyCode={currencyCode}
           className="text-sm font-bold text-foreground"

package/src/checkout/order-summary.tsx

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState } from "react"
 
 import type { StorefrontClient } from "../api/http"
 import { updateLineItem, type Cart, type CartLineItem } from "../api/carts"
-import { DualPrice } from "../lib/dual-price"
+import { Price } from "../lib/price"
 import { isProductLine } from "../lib/cart-helpers"
 import { cn } from "../lib/utils"
 import { useCheckoutLabels } from "./context"
@@ -170,7 +170,7 @@ export function CheckoutLineItem({
       <div className="hidden sm:flex flex-1 min-w-0 flex-col gap-2.5">
         <div className="flex items-baseline justify-between gap-3">
           {titleBlock}
-          <DualPrice
+          <Price
             amount={item.total ?? 0}
             currencyCode={currencyCode}
             className="text-sm font-bold text-foreground text-right flex-shrink-0"
@@ -185,7 +185,7 @@ export function CheckoutLineItem({
         {titleBlock}
         <div className="flex items-center justify-between gap-3">
           {qtyPill}
-          <DualPrice
+          <Price
             amount={item.total ?? 0}
             currencyCode={currencyCode}
             className="text-sm font-bold text-foreground text-right"
@@ -376,7 +376,7 @@ export function OrderSummary({
         <div className="px-5 sm:px-6 space-y-3">
           <div className="flex justify-between text-sm">
             <span className="text-muted-foreground">{labels.subtotal}</span>
-            <DualPrice
+            <Price
               amount={productSubtotal}
               currencyCode={cart.currency_code}
               className="font-medium text-foreground"
@@ -391,7 +391,7 @@ export function OrderSummary({
                   {labels.shippingFree}
                 </span>
               ) : (
-                <DualPrice
+                <Price
                   amount={shippingCost ?? 0}
                   currencyCode={cart.currency_code}
                   className="font-medium text-foreground"
@@ -409,7 +409,7 @@ export function OrderSummary({
               <span className="text-muted-foreground">
                 {methodFeeLabel ?? cart.payment_method_fee_label ?? labels.paymentMethodFee}
               </span>
-              <DualPrice
+              <Price
                 amount={methodFeeAmount}
                 currencyCode={cart.currency_code}
                 className="font-medium text-foreground"
@@ -422,7 +422,7 @@ export function OrderSummary({
               <span>{labels.discount}</span>
               <span className="font-medium">
                 -
-                <DualPrice
+                <Price
                   amount={cart.discount_total}
                   currencyCode={cart.currency_code}
                 />
@@ -450,7 +450,7 @@ export function OrderSummary({
                 {labels.taxTooltip}
               </span>
             </span>
-            <DualPrice
+            <Price
               amount={cart.tax_total ?? 0}
               currencyCode={cart.currency_code}
               className="font-medium text-foreground"
@@ -464,11 +464,10 @@ export function OrderSummary({
               {labels.total}
             </span>
             <div className="text-right">
-              <DualPrice
+              <Price
                 amount={displayTotal ?? 0}
                 currencyCode={cart.currency_code}
                 className="text-2xl font-bold text-foreground tracking-tight"
-                bgnClassName="ml-2 text-sm text-muted-foreground/70 font-normal"
               />
             </div>
           </div>
@@ -482,7 +481,7 @@ export function OrderSummary({
                 <span>{labels.giftCardApplied}</span>
                 <span className="font-medium">
                   -
-                  <DualPrice
+                  <Price
                     amount={giftCardTotal}
                     currencyCode={cart.currency_code}
                   />
@@ -492,7 +491,7 @@ export function OrderSummary({
                 <span className="text-muted-foreground">
                   {labels.giftCardRemaining}
                 </span>
-                <DualPrice
+                <Price
                   amount={giftCardRemainder}
                   currencyCode={cart.currency_code}
                   className="font-semibold text-foreground"

package/src/checkout/payment-button.tsx

@@ -3,7 +3,7 @@
 import { useElements, useStripe } from "@stripe/react-stripe-js"
 import { useContext, useEffect, useRef, useState } from "react"
 
-import { DualPrice } from "../lib/dual-price"
+import { Price } from "../lib/price"
 import { cn } from "../lib/utils"
 import { translatePaymentError } from "./payment-error-copy"
 import { useCheckoutLabels } from "./context"
@@ -153,11 +153,10 @@ function OrderButton({
             {total !== undefined && currencyCode && (
               <span className="inline-flex items-center gap-1">
                 <span aria-hidden="true"> · </span>
-                <DualPrice
+                <Price
                   amount={total}
                   currencyCode={currencyCode}
                   className="font-semibold"
-                  bgnClassName="text-card/70 text-[11px] ml-1"
                 />
               </span>
             )}