@cartbase/storefront 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartbase/storefront",
-  "version": "0.8.0",
+  "version": "0.10.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",
@@ -103,7 +103,6 @@
     "./checkout": "./src/checkout/index.ts",
     "./checkout/context": "./src/checkout/context.tsx",
     "./checkout/labels": "./src/checkout/labels.ts",
-    "./checkout/labels-bg": "./src/checkout/labels-bg.ts",
     "./checkout/error-message": "./src/checkout/error-message.tsx",
     "./checkout/stripe-wrapper": "./src/checkout/stripe-wrapper.tsx",
     "./checkout/payment-wrapper": "./src/checkout/payment-wrapper.tsx",
@@ -127,7 +126,6 @@
     "./cart-drawer": "./src/cart-drawer/index.ts",
     "./cart-drawer/context": "./src/cart-drawer/context.tsx",
     "./cart-drawer/labels": "./src/cart-drawer/labels.ts",
-    "./cart-drawer/labels-bg": "./src/cart-drawer/labels-bg.ts",
     "./cart-drawer/cart-drawer": "./src/cart-drawer/cart-drawer.tsx",
     "./cart-drawer/header": "./src/cart-drawer/header.tsx",
     "./cart-drawer/promo-banner": "./src/cart-drawer/promo-banner.tsx",
@@ -151,7 +149,6 @@
     "./products": "./src/products/index.ts",
     "./products/context": "./src/products/context.tsx",
     "./products/labels": "./src/products/labels.ts",
-    "./products/labels-bg": "./src/products/labels-bg.ts",
     "./products/thumbnail": "./src/products/thumbnail.tsx",
     "./products/preview-price": "./src/products/preview-price.tsx",
     "./products/product-price": "./src/products/product-price.tsx",
@@ -167,7 +164,6 @@
     "./products/product-template": "./src/products/product-template.tsx",
     "./store": "./src/store/index.ts",
     "./store/labels": "./src/store/labels.ts",
-    "./store/labels-bg": "./src/store/labels-bg.ts",
     "./store/pagination": "./src/store/pagination.tsx",
     "./store/sort-select": "./src/store/sort-select.tsx",
     "./store/paginated-products": "./src/store/paginated-products.tsx",
@@ -179,7 +175,6 @@
     "./order": "./src/order/index.ts",
     "./order/context": "./src/order/context.tsx",
     "./order/labels": "./src/order/labels.ts",
-    "./order/labels-bg": "./src/order/labels-bg.ts",
     "./order/order-confirmation-header": "./src/order/order-confirmation-header.tsx",
     "./order/order-item": "./src/order/order-item.tsx",
     "./order/order-items-list": "./src/order/order-items-list.tsx",
@@ -198,7 +193,11 @@
     "./common/country-select": "./src/common/country-select.tsx",
     "./common/language-select": "./src/common/language-select.tsx",
     "./common/skeleton": "./src/common/skeleton.tsx",
-    "./reviews-ui": "./src/reviews-ui/index.ts"
+    "./reviews-ui": "./src/reviews-ui/index.ts",
+    "./locales": "./src/locales/index.ts",
+    "./locales/en": "./src/locales/en.ts",
+    "./locales/es": "./src/locales/es.ts",
+    "./locales/bg": "./src/locales/bg.ts"
   },
   "dependencies": {
     "@stripe/react-stripe-js": "^6.1.0",

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/index.ts

@@ -28,7 +28,6 @@ export {
   defaultCartDrawerLabels,
   type CartDrawerLabels,
 } from "./labels"
-export { bulgarianCartDrawerLabels } from "./labels-bg"
 
 export { CartDrawer } from "./cart-drawer"
 export { CartDrawerHeader } from "./header"

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