@cartbase/storefront 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartbase/storefront",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Storefront SDK + UI component library for Cartbase stores: typed API client, checkout orchestration, cart drawer, product/catalog components, tracking. Source-shipped TypeScript — add it to transpilePackages.",
   "license": "MIT",
   "repository": {
@@ -49,7 +49,7 @@
     "./lib/get-percentage-diff": "./src/lib/get-percentage-diff.ts",
     "./lib/product": "./src/lib/product.ts",
     "./lib/sort-products": "./src/lib/sort-products.ts",
-    "./lib/dual-price": "./src/lib/dual-price.tsx",
+    "./lib/price": "./src/lib/price.tsx",
     "./lib/payment-constants": "./src/lib/payment-constants.ts",
     "./lib/store-api-error": "./src/lib/store-api-error.ts",
     "./lib/hooks/use-intersection": "./src/lib/hooks/use-intersection.ts",

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/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>
             )}

package/src/checkout/shipping-method-list.tsx

@@ -3,7 +3,7 @@
 import type { StorefrontClient } from "../api/http"
 import type { StoreShippingOption } from "../api/checkout"
 import type { BoxNowLocker } from "../api/integrations"
-import { DualPrice } from "../lib/dual-price"
+import { Price } from "../lib/price"
 import { cn } from "../lib/utils"
 import { useCheckoutLabels } from "./context"
 import {
@@ -273,7 +273,7 @@ export function CheckoutShippingMethodList({
                       isFree ? (
                         labels.shippingFree
                       ) : (
-                        <DualPrice amount={price} currencyCode={currencyCode} />
+                        <Price amount={price} currencyCode={currencyCode} />
                       )
                     ) : isLoadingPrices ? (
                       <svg

package/src/lib/money.ts

@@ -2,7 +2,7 @@
  * Money utilities — pure, side-effect-free currency formatting helpers.
  *
  * Extracted from mindpages-storefront src/lib/util/money.ts + isEmpty.ts.
- * Used by DualPrice and any other price rendering in the library.
+ * Used by Price and any other price rendering in the library.
  */
 
 function isEmpty(value: unknown): boolean {

package/src/lib/price.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+
+import { convertToLocale } from "./money"
+
+/**
+ * Price — render an amount in its own currency, and nothing else.
+ *
+ * Replaces `DualPrice` (deleted 2026-09-13, Alexander: "clean and clear
+ * the dual pricing"). That component appended a grey BGN leg to every EUR
+ * price for Bulgaria's euro-changeover disclosure rule, with the statutory
+ * 1.95583 rate baked in. Cartbase prices in EUR (see the EUR-only law) and
+ * the second currency belongs to a store's own locale work if it ever
+ * wants one, not to every price in the library.
+ *
+ * Stateless and side-effect-free, so it renders in server and client
+ * components alike, and it is deliberately NOT a client component: the old
+ * one carried "use client" for no reason, which pulled every price
+ * rendering into the client bundle.
+ *
+ * @example
+ *   <Price amount={19.99} currencyCode="eur" />   // "€19.99"
+ */
+
+export type PriceProps = {
+  /** Amount in major units of the currency (19.99 for €19.99). */
+  amount: number
+  /** ISO currency code, case-insensitive. */
+  currencyCode: string
+  /** Class for the span. */
+  className?: string
+}
+
+export function Price({ amount, currencyCode, className }: PriceProps): React.ReactElement {
+  return (
+    <span className={className}>
+      {convertToLocale({ amount, currency_code: currencyCode })}
+    </span>
+  )
+}

package/src/order/order-delivery-card.tsx

@@ -1,5 +1,5 @@
 import { ExternalLink, MapPin, PackageSearch, Truck } from "lucide-react"
-import { DualPrice } from "../lib/dual-price"
+import { Price } from "../lib/price"
 import type { StoreOrderFulfillment } from "../api/orders"
 import { defaultOrderLabels, type OrderLabels } from "./labels"
 
@@ -245,7 +245,7 @@ function ShippingMethodRow({
       {amount === 0 ? (
         <span className="text-sm font-medium text-success">{labels.free}</span>
       ) : (
-        <DualPrice
+        <Price
           amount={amount}
           currencyCode={currencyCode}
           className="text-sm font-medium text-foreground"

package/src/order/order-item.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image"
 import { ImageOff } from "lucide-react"
-import { DualPrice } from "../lib/dual-price"
+import { Price } from "../lib/price"
 import type { StoreOrderItem } from "../api/orders"
 import { defaultOrderLabels, type OrderLabels } from "./labels"
 
@@ -177,14 +177,14 @@ export function OrderItem({ item, currencyCode, labels }: OrderItemProps) {
           <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={item.originalTotal ?? 0}
                   currencyCode={currencyCode}
                   className="text-xs text-muted-foreground"
                 />
               </span>
             )}
-            <DualPrice
+            <Price
               amount={item.total}
               currencyCode={currencyCode}
               className={`text-sm font-bold ${

package/src/order/order-totals.tsx

@@ -1,4 +1,4 @@
-import { DualPrice } from "../lib/dual-price"
+import { Price } from "../lib/price"
 import { findFeeLine, type LineLike } from "../lib/cart-helpers"
 import { defaultOrderLabels, type OrderLabels } from "./labels"
 
@@ -217,14 +217,14 @@ export function OrderTotals({
             ) : row.negative ? (
               <span className="text-sm text-success">
                 -{" "}
-                <DualPrice
+                <Price
                   amount={row.amount}
                   currencyCode={currencyCode}
                   className="text-sm text-success"
                 />
               </span>
             ) : (
-              <DualPrice
+              <Price
                 amount={row.amount}
                 currencyCode={currencyCode}
                 className="text-sm text-foreground"
@@ -237,7 +237,7 @@ export function OrderTotals({
       <div className="h-px bg-border my-3" />
       <div className="flex justify-between items-baseline">
         <span className="text-[15px] font-bold text-foreground">{l.total}</span>
-        <DualPrice
+        <Price
           amount={total}
           currencyCode={currencyCode}
           className="text-xl font-bold text-foreground tracking-tight"

package/src/tracking/attribution.ts

@@ -496,6 +496,16 @@ const TTCLID_COOKIE = "_1c_ttclid"
 const GCLID_COOKIE = "_1c_gclid"
 const GBRAID_COOKIE = "_1c_gbraid"
 const WBRAID_COOKIE = "_1c_wbraid"
+/**
+ * OpenAI's click id, from `oppref` on the landing URL.
+ *
+ * Their own SDK stores the same parameter in a first-party `__oppref`
+ * cookie at init, and we capture it here anyway: the Conversions API takes
+ * `oppref` on the server event explicitly, and this module runs on the
+ * landing page whether or not their script loaded or was consented to. Ours
+ * is the one the server reads.
+ */
+const OPPREF_COOKIE = "_1c_oppref"
 
 /** TikTok's ttclid lifetime follows the CTA window in Attribution
  *  Manager; Google's conversion window tops out at 90 days. One TTL
@@ -509,6 +519,7 @@ const CLICK_ID_CAPTURE: ReadonlyArray<readonly [string, string]> = [
   [GCLID_COOKIE, "gclid"],
   [GBRAID_COOKIE, "gbraid"],
   [WBRAID_COOKIE, "wbraid"],
+  [OPPREF_COOKIE, "oppref"],
 ]
 
 /**
@@ -522,6 +533,7 @@ export const CLICK_ID_COOKIES = {
   gbraid: GBRAID_COOKIE,
   wbraid: WBRAID_COOKIE,
   ttp: "_ttp",
+  oppref: OPPREF_COOKIE,
 } as const
 
 /** cookie name → order.metadata key (code truth for the server side:
@@ -532,6 +544,7 @@ export const CLICK_ID_METADATA_KEYS: ReadonlyArray<readonly [string, string]> =
   [CLICK_ID_COOKIES.gclid, "google_gclid"],
   [CLICK_ID_COOKIES.gbraid, "google_gbraid"],
   [CLICK_ID_COOKIES.wbraid, "google_wbraid"],
+  [CLICK_ID_COOKIES.oppref, "oai_oppref"],
 ]
 
 /**

package/src/tracking/chatgpt-pixel.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import Script from "next/script"
+
+import { CONSENT_COOKIE } from "./consent"
+import { jsStringLiteral } from "./inline-script"
+
+/**
+ * ChatGptPixel — the OpenAI measurement pixel, the ChatGPT Ads twin of
+ * <MetaPixel> and <TikTokPixel>.
+ *
+ * The loader is OpenAI's own, verbatim from
+ * https://developers.openai.com/ads/measurement-pixel: a command queue on
+ * `window.oaiq` that buffers calls until the SDK arrives from
+ * bzrcdn.openai.com, injected with `<Script strategy="afterInteractive">`.
+ *
+ * CONSENT IS CLOSED BEFORE INIT, and that order is the whole point. Their
+ * consent default is TRUE, so an unconsented visitor is measured unless we
+ * say otherwise first:
+ *
+ *     oaiq("consent", false)   // queued BEFORE init — no pings
+ *     oaiq("init", { pixelId })
+ *     oaiq("consent", true)    // only once the visitor accepted
+ *
+ * The script is LOADED either way, like the Meta and TikTok gates beside
+ * it, so a later grant costs no round trip. But the page view is fired
+ * only AFTER a grant, and that is deliberate rather than cautious: their
+ * docs state that with consent false the pixel sends no measurement
+ * pings, and they do NOT document whether a call made while consent was
+ * false is released on a later grant. TikTok documents exactly that
+ * (`holdConsent` queues, `grantConsent` flushes) and our TikTok gate
+ * relies on it. Nothing here relies on behaviour OpenAI has not written
+ * down: an unconsented page view is not sent, and not counted on later.
+ *
+ * The decision is read from the shared `_1c_consent` cookie inside the
+ * snippet, before anything can be sent, and live changes arrive through
+ * `applyConsent()` in ./consent.ts — there is no cookie watcher.
+ *
+ * The page view is ours to fire at all: their pixel sends nothing at init,
+ * unlike Meta's and TikTok's base code.
+ *
+ * Their SDK also captures `oppref` off the landing URL into a first-party
+ * `__oppref` cookie by itself. Our attribution module captures the same
+ * parameter into `_1c_oppref` independently, so the server-side
+ * Conversions API event can carry the click even on a visit where this
+ * script never loaded at all.
+ *
+ * Renders nothing when `pixelId` is falsy, so a layout can mount it
+ * unconditionally.
+ */
+export function ChatGptPixel({ pixelId }: { pixelId?: string }) {
+  if (!pixelId) return null
+
+  const id = jsStringLiteral(pixelId)
+
+  const initSnippet = `
+(function (w, d, s, u) {
+  if (w.oaiq) return;
+  var q = function () { q.q.push(arguments); };
+  q.q = [];
+  w.oaiq = q;
+  var js = d.createElement(s);
+  js.async = true;
+  js.src = u;
+  var f = d.getElementsByTagName(s)[0];
+  f.parentNode.insertBefore(js, f);
+})(window, document, "script", "https://bzrcdn.openai.com/sdk/oaiq.min.js");
+
+oaiq("consent", false);
+oaiq("init", { pixelId: ${id} });
+
+(function (d) {
+  var ads = false;
+  try {
+    var m = d.cookie.match(/(?:^|; )${CONSENT_COOKIE}=([^;]*)/);
+    if (m) { ads = !!JSON.parse(decodeURIComponent(m[1])).ads; }
+  } catch (e) {}
+  if (ads) {
+    oaiq("consent", true);
+    oaiq("measure", "page_viewed", { type: "contents" });
+  }
+})(document);
+`.trim()
+
+  return (
+    <Script
+      id="chatgpt-pixel-init"
+      strategy="afterInteractive"
+      dangerouslySetInnerHTML={{ __html: initSnippet }}
+    />
+  )
+}

package/src/tracking/consent.ts

@@ -131,6 +131,18 @@ export function applyConsent(choices: ConsentChoices): void {
     if (choices.ads) w.ttq.grantConsent()
     else w.ttq.revokeConsent()
   }
+
+  // ChatGPT Ads. One command on their own queue, `oaiq("consent", bool)`,
+  // which works before the SDK has arrived because the queue buffers it.
+  //
+  // A grant also fires the page view the loader withheld: their docs say
+  // an unconsented event sends no ping and do not promise that a held call
+  // is released later, so the visitor who accepts on their third page is
+  // counted from the grant onward rather than not at all.
+  if (typeof w.oaiq === "function") {
+    w.oaiq("consent", choices.ads)
+    if (choices.ads) w.oaiq("measure", "page_viewed", { type: "contents" })
+  }
 }
 
 /**

package/src/tracking/events.ts

@@ -24,6 +24,14 @@ import {
   trackTikTokPurchase,
   trackTikTokViewContent,
 } from "./ttq"
+import {
+  minorUnits,
+  trackOpenAiCheckoutStarted,
+  trackOpenAiContentsViewed,
+  trackOpenAiItemsAdded,
+  trackOpenAiOrderCreated,
+  type OpenAiContentItem,
+} from "./oaiq"
 import { googleAdsPurchaseSendTo, trackGoogleAdsPurchase } from "./google-ads"
 import type { TrackingConfig } from "./types"
 
@@ -118,6 +126,25 @@ const tiktokContents = (lines: TrackedLine[]) =>
 const unitCount = (lines: TrackedLine[]) =>
   lines.reduce((sum, line) => sum + (Number(line.quantity) || 0), 0)
 
+/**
+ * ChatGPT Ads contents. The shape is close to TikTok's, but every amount
+ * is an INTEGER IN MINOR UNITS on this vendor, which is why the mapping
+ * cannot be shared with `tiktokContents` above: the same numbers in the
+ * same field names would be a hundredfold under-report.
+ */
+const openAiContents = (
+  lines: TrackedLine[],
+  currency: string
+): OpenAiContentItem[] =>
+  lines.map((line) => ({
+    id: line.productId,
+    name: line.title,
+    content_type: "product",
+    quantity: line.quantity,
+    amount: minorUnits(line.price),
+    currency,
+  }))
+
 /** Product page view. */
 export function trackProductView(input: {
   line: TrackedLine
@@ -137,6 +164,12 @@ export function trackProductView(input: {
     currency,
     value,
   })
+  trackOpenAiContentsViewed({
+    contentId: line.productId,
+    contentName: line.title,
+    currency,
+    value,
+  })
   trackGAViewItem({ currency, value, items: gaItems([line], currency) })
   trackRybbitViewItem({
     item_id: line.variantId || line.productId,
@@ -168,6 +201,14 @@ export function trackCartAdd(input: {
     currency,
     value,
   })
+  trackOpenAiItemsAdded({
+    contentId: line.productId,
+    contentName: line.title,
+    quantity: line.quantity,
+    price: line.price,
+    currency,
+    value,
+  })
   trackGAAddToCart({ currency, value, items: gaItems([line], currency) })
   trackRybbitAddToCart({
     item_id: line.variantId || line.productId,
@@ -199,6 +240,11 @@ export function trackCheckoutStart(input: {
     currency,
     value,
   })
+  trackOpenAiCheckoutStarted({
+    contents: openAiContents(lines, currency),
+    currency,
+    value,
+  })
   trackGABeginCheckout({
     currency,
     value,
@@ -222,8 +268,9 @@ export function trackCheckoutStart(input: {
  * malformed `send_to` is accepted by Google and silently dropped.
  *
  * Everything here is deduped against the server: Meta on
- * `purchase_<displayId>`, TikTok on `tt_purchase_<displayId>`, GA4 and
- * Google Ads on the transaction id, which is `displayId` itself.
+ * `purchase_<displayId>`, TikTok on `tt_purchase_<displayId>`, ChatGPT Ads
+ * on `oai_order_<displayId>`, GA4 and Google Ads on the transaction id,
+ * which is `displayId` itself.
  */
 export function trackOrderPurchase(
   order: TrackedOrder,
@@ -261,6 +308,13 @@ export function trackOrderPurchase(
     customerType,
   })
 
+  trackOpenAiOrderCreated({
+    contents: openAiContents(lines, currency),
+    currency,
+    value,
+    displayId,
+  })
+
   trackGAPurchase({
     transaction_id: transactionId,
     currency,

package/src/tracking/index.ts

@@ -57,6 +57,7 @@ export { MetaPixel, updatePixelAdvancedMatching } from "./meta-pixel"
 export { GA4, GoogleTag } from "./ga4"
 export { Gtm } from "./gtm"
 export { TikTokPixel } from "./tiktok-pixel"
+export { ChatGptPixel } from "./chatgpt-pixel"
 export { StorefrontTags } from "./storefront-tags"
 export { TrackInit } from "./track-init"
 // The live-visitor heartbeat. Mounted by <StorefrontTags> so a storefront
@@ -134,6 +135,17 @@ export {
   tiktokPurchaseEventId,
   type TikTokContentItem,
 } from "./ttq"
+export {
+  trackOpenAiPageView,
+  trackOpenAiContentsViewed,
+  trackOpenAiItemsAdded,
+  trackOpenAiCheckoutStarted,
+  trackOpenAiOrderCreated,
+  applyOpenAiConsent,
+  openAiOrderEventId,
+  minorUnits,
+  type OpenAiContentItem,
+} from "./oaiq"
 export {
   trackGoogleAdsPurchase,
   googleAdsPurchaseSendTo,

package/src/tracking/oaiq.ts

@@ -0,0 +1,206 @@
+"use client"
+
+/**
+ * Typed wrappers around the global `oaiq` command queue from the OpenAI
+ * measurement pixel — the ChatGPT Ads twin of ./ttq.ts and ./fbq.ts, and
+ * deliberately the same shape so a surface that fires one can fire the
+ * other on the line below.
+ *
+ * Every helper no-ops when `window.oaiq` is absent (pixel not configured,
+ * server render, script blocked), so callers need no guards.
+ *
+ * The call signature is theirs, from
+ * https://developers.openai.com/ads/measurement-pixel:
+ *
+ *     oaiq("measure", eventName, eventData, { event_id })
+ *
+ * Two things here are NOT like the other vendors, and both are silent when
+ * wrong:
+ *
+ *   1. MONEY IS AN INTEGER IN MINOR UNITS. Meta, TikTok and GA4 all read
+ *      `value: 25.99`; OpenAI reads `amount: 2599`. Passing a decimal
+ *      under-reports revenue by a factor of a hundred with nothing to show
+ *      for it, so every amount goes through `minorUnits` below and no
+ *      caller passes `amount` itself.
+ *   2. EVENT DATA CARRIES ITS OWN `type`. Each event name is bound to one
+ *      of four data shapes; the five commerce events we fire all take
+ *      `contents`, so the wrappers set it and callers cannot get it wrong.
+ *
+ * Event names are theirs and are not interchangeable with Meta's or
+ * TikTok's: `contents_viewed`, `items_added`, `checkout_started`,
+ * `order_created`, `page_viewed`.
+ */
+
+/** One product line inside `contents`. */
+export type OpenAiContentItem = {
+  id: string
+  name?: string
+  content_type?: string
+  quantity?: number
+  /** Integer, minor units. */
+  amount?: number
+  currency?: string
+}
+
+type OpenAiEventData = {
+  type: "contents"
+  /** Integer, minor units. */
+  amount?: number
+  currency?: string
+  contents?: OpenAiContentItem[]
+}
+
+type OaiqFn = (
+  command: "init" | "measure" | "consent",
+  ...args: unknown[]
+) => void
+
+function safeOaiq(): OaiqFn | null {
+  if (typeof window === "undefined") return null
+  const oaiq = (window as unknown as { oaiq?: OaiqFn }).oaiq
+  return typeof oaiq === "function" ? oaiq : null
+}
+
+/**
+ * Major units to their integer minor units: 25.99 becomes 2599.
+ *
+ * The twin of `openAiMinorUnits` in the platform's
+ * src/lib/tracking/constants.ts. Duplicated rather than imported because
+ * this package cannot reach into the platform, and rounded rather than
+ * truncated because 0.1 + 0.2 is 0.30000000000000004 in binary floating
+ * point and truncation would report 29 cents for 30.
+ */
+export function minorUnits(amountInMajorUnits: number): number {
+  return Math.round((Number(amountInMajorUnits) || 0) * 100)
+}
+
+/**
+ * THE order dedup key — must equal what the backend forwarder sends
+ * (`openAiOrderEventId` in the platform's src/lib/tracking/constants.ts).
+ * Built from display_id here so the format cannot drift between the two
+ * sides, the same guarantee `trackPurchase` gives for Meta and
+ * `tiktokPurchaseEventId` for TikTok.
+ *
+ * OpenAI deduplicates on pixel id + event name + id, keeping the FIRST
+ * event it receives, so the browser and the server collapse into one
+ * conversion whichever arrives first.
+ */
+export function openAiOrderEventId(displayId: string | number): string {
+  return `oai_order_${displayId}`
+}
+
+/** A page view. Their pixel fires nothing on its own at init. */
+export function trackOpenAiPageView(): void {
+  const oaiq = safeOaiq()
+  if (!oaiq) return
+  oaiq("measure", "page_viewed", { type: "contents" } satisfies OpenAiEventData)
+}
+
+export function trackOpenAiContentsViewed(data: {
+  contentId: string
+  contentName?: string
+  currency: string
+  /** Major units — converted here. */
+  value: number
+}): void {
+  const oaiq = safeOaiq()
+  if (!oaiq) return
+  oaiq("measure", "contents_viewed", {
+    type: "contents",
+    amount: minorUnits(data.value),
+    currency: data.currency,
+    contents: [
+      {
+        id: data.contentId,
+        name: data.contentName,
+        content_type: "product",
+        quantity: 1,
+      },
+    ],
+  } satisfies OpenAiEventData)
+}
+
+export function trackOpenAiItemsAdded(data: {
+  contentId: string
+  contentName?: string
+  quantity: number
+  /** Unit price, major units. */
+  price: number
+  currency: string
+  /** Line value, major units. */
+  value: number
+}): void {
+  const oaiq = safeOaiq()
+  if (!oaiq) return
+  oaiq("measure", "items_added", {
+    type: "contents",
+    amount: minorUnits(data.value),
+    currency: data.currency,
+    contents: [
+      {
+        id: data.contentId,
+        name: data.contentName,
+        content_type: "product",
+        quantity: data.quantity,
+        amount: minorUnits(data.price),
+        currency: data.currency,
+      },
+    ],
+  } satisfies OpenAiEventData)
+}
+
+export function trackOpenAiCheckoutStarted(data: {
+  contents: OpenAiContentItem[]
+  currency: string
+  /** Cart value, major units. */
+  value: number
+}): void {
+  const oaiq = safeOaiq()
+  if (!oaiq) return
+  oaiq("measure", "checkout_started", {
+    type: "contents",
+    amount: minorUnits(data.value),
+    currency: data.currency,
+    contents: data.contents,
+  } satisfies OpenAiEventData)
+}
+
+export function trackOpenAiOrderCreated(data: {
+  contents: OpenAiContentItem[]
+  currency: string
+  /** Order total, major units. */
+  value: number
+  /** The order's display id — the dedup key shared with the server. */
+  displayId: string | number
+}): void {
+  const oaiq = safeOaiq()
+  if (!oaiq) return
+  oaiq(
+    "measure",
+    "order_created",
+    {
+      type: "contents",
+      amount: minorUnits(data.value),
+      currency: data.currency,
+      contents: data.contents,
+    } satisfies OpenAiEventData,
+    { event_id: openAiOrderEventId(data.displayId) }
+  )
+}
+
+/**
+ * Push a live consent decision to the pixel.
+ *
+ * Normally you do NOT call this: `applyConsent()` in ./consent.ts relays
+ * every decision to gtag, fbq, ttq and oaiq together. Exported for a host
+ * app driving the pixel from a consent layer of its own.
+ *
+ * Their own gate, from the measurement-pixel docs: with consent false the
+ * pixel sends no measurement pings, and the default is TRUE, which is why
+ * the loader closes it explicitly before init rather than trusting it.
+ */
+export function applyOpenAiConsent(adsGranted: boolean): void {
+  const oaiq = safeOaiq()
+  if (!oaiq) return
+  oaiq("consent", adsGranted)
+}

package/src/tracking/storefront-tags.tsx

@@ -4,6 +4,7 @@ import { PageViews } from "./page-views"
 import { Gtm } from "./gtm"
 import { MetaPixel } from "./meta-pixel"
 import { TikTokPixel } from "./tiktok-pixel"
+import { ChatGptPixel } from "./chatgpt-pixel"
 import { getTrackingConfig } from "./get-tracking-config"
 import type { StorefrontClient } from "../api/http"
 import type { TrackingConfig } from "./types"
@@ -65,6 +66,7 @@ export async function StorefrontTags({
       <LiveHeartbeat />
       <MetaPixel pixelId={tracking.facebookPixel?.pixelId} />
       <TikTokPixel pixelId={tracking.tiktok?.pixelId} />
+      <ChatGptPixel pixelId={tracking.chatgptAds?.pixelId} />
       <GoogleTag
         measurementId={tracking.ga4?.measurementId}
         adsConversionId={tracking.googleAds?.conversionId}

package/src/tracking/types.ts

@@ -44,6 +44,10 @@ export type TrackingConfig = {
    *  read by the order.placed forwarder, exactly like Meta's CAPI token,
    *  which has never traversed this surface. */
   tiktok?: { pixelId: string }
+  /** ChatGPT Ads, pixel id ONLY — the Conversions API key is a bearer
+   *  token and stays on the platform, read by the order.placed forwarder
+   *  (chatgpt-ads-pixel card). */
+  chatgptAds?: { pixelId: string }
   /** True when the store's consent CMP is enabled — client tags must
    *  mount through the consent gate (`_1c_consent` / Consent Mode v2). */
   consent_required?: boolean

package/src/lib/dual-price.tsx

@@ -1,73 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "./utils"
-import { convertToLocale } from "./money"
-
-/**
- * DualPrice — render a EUR price with BGN next to it.
- *
- * Bulgarian law (Дв, effective through 2026-08) requires showing both EUR
- * and BGN on every price displayed to consumers. Fixed statutory rate:
- *   1 EUR = 1.95583 BGN
- *
- * For non-EUR currencies the BGN leg is skipped and only the primary locale
- * currency is shown. The component is stateless and side-effect-free — safe
- * to render in server components and client components alike.
- *
- * The EUR-to-BGN rate and the law's expiry date are baked in for now. When
- * the law expires (or when a store outside Bulgaria consumes this library),
- * we'll move both to a BrandingContext value so each store can override.
- *
- * @example
- *   <DualPrice amount={19.99} currencyCode="eur" />
- *   // → "€19.99  39,10 лв."
- */
-
-const EUR_TO_BGN = 1.95583
-
-function toBGN(eurAmount: number): string {
-  const bgn = eurAmount * EUR_TO_BGN
-  return bgn.toFixed(2).replace(".", ",") + " лв."
-}
-
-export type DualPriceProps = {
-  /** Amount in major units of the primary currency (e.g. 19.99 for €19.99) */
-  amount: number
-  /** ISO currency code (case-insensitive). Only "eur" triggers the BGN leg. */
-  currencyCode: string
-  /** Optional class for the outer span */
-  className?: string
-  /** Optional class for the BGN leg (defaults to small muted) */
-  bgnClassName?: string
-}
-
-export function DualPrice({
-  amount,
-  currencyCode,
-  className,
-  bgnClassName,
-}: DualPriceProps): React.ReactElement {
-  const isEur = currencyCode?.toLowerCase() === "eur"
-
-  if (!isEur) {
-    return (
-      <span className={className}>
-        {convertToLocale({ amount, currency_code: currencyCode })}
-      </span>
-    )
-  }
-
-  return (
-    <span className={className}>
-      {convertToLocale({ amount, currency_code: currencyCode })}
-      <span className={cn("ml-1.5 text-muted-foreground/70 font-normal", bgnClassName)}>
-        {toBGN(amount)}
-      </span>
-    </span>
-  )
-}
-
-/** Exposed for advanced callers that need the rate directly. */
-export const EUR_TO_BGN_RATE = EUR_TO_BGN