@cartbase/storefront 0.17.0 → 0.18.0

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

@@ -1,158 +1,158 @@
-"use client"
-
-import { StoreImage as Image } from "../lib/media-image"
-import Link from "next/link"
-
-import type { StoreProduct } from "../api/products"
-import { convertToLocale } from "../lib/money"
-import { useCartDrawer } from "./context"
-
-/**
- * CartCrossSellSidebar — vertical product-card list for desktop cart
- * drawer's left sidebar.
- *
- * Ported from `@1click/ui/src/cart-drawer/cross-sell-sidebar.tsx` (v2.3.1).
- * Cartbase data seam: source stores fed this from Medusa product fetches —
- * feed it from `@cartbase/storefront/api/products` `listProducts` (curated
- * collection/tag) or `@cartbase/storefront/api/search` `listRelatedProducts`
- * (anchor-product complements), mapped through `toCrossSellProduct` below.
- * Wire `onAdd` to the provider's `addItem(variantId)`. Prices are EUR
- * major units and come server-computed via `calculated_price` — never
- * recompute client-side.
- */
-
-export type CrossSellSidebarProduct = {
-  id: string
-  title: string
-  handle: string
-  thumbnail: string | null
-  price: number
-  currencyCode: string
-  variantId?: string
-}
-
-/**
- * Map a store-API product (products/search/related responses all reuse the
- * canonical `StoreProduct` shape) to a cross-sell card. Picks the first
- * variant carrying a server-computed `calculated_price` for the current
- * pricing context; returns null when no variant is priced (pass
- * `currency_code`/`region_id` on the listing call, and skip null results).
- * Pure — exported for unit tests and for building `crossSell.loader`s.
- */
-export function toCrossSellProduct(
-  product: StoreProduct
-): CrossSellSidebarProduct | null {
-  const variant = (product.variants ?? []).find((v) => v.calculated_price)
-  const price = variant?.calculated_price
-  if (!variant || !price) return null
-  return {
-    id: product.id,
-    title: product.title,
-    handle: product.handle,
-    thumbnail: product.thumbnail,
-    price: price.calculated_amount,
-    currencyCode: price.currency_code,
-    variantId: variant.id,
-  }
-}
-
-type CartCrossSellSidebarProps = {
-  label?: string
-  products: CrossSellSidebarProduct[]
-  onAdd?: (productId: string, variantId?: string) => void
-}
-
-export function CartCrossSellSidebar({
-  label,
-  products,
-  onAdd,
-}: CartCrossSellSidebarProps) {
-  const { labels, hrefs } = useCartDrawer()
-
-  if (!products.length) return null
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="px-5 pt-6 pb-4">
-        <h3 className="text-xs font-bold text-foreground uppercase tracking-widest">
-          {label ?? labels.youMightAlsoLike}
-        </h3>
-      </div>
-      <div className="flex-1 overflow-y-auto no-scrollbar px-4 pb-6 space-y-3">
-        {products.map((product) => (
-          <div
-            key={product.id}
-            className="bg-card rounded-[2px] p-3.5 transition-shadow hover:shadow-md"
-            style={{
-              boxShadow: "0 1px 4px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08)",
-            }}
-          >
-            <Link href={`${hrefs.productPrefix}/${product.handle}`}>
-              <div className="w-full aspect-square rounded-xl overflow-hidden bg-muted relative mb-3">
-                {product.thumbnail ? (
-                  <Image
-                    src={product.thumbnail}
-                    alt={product.title}
-                    fill
-                    className="object-cover"
-                    sizes="200px"
-                  />
-                ) : (
-                  <div className="w-full h-full flex items-center justify-center">
-                    <svg
-                      width="32"
-                      height="32"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      className="text-muted-foreground"
-                      strokeWidth="1.2"
-                    >
-                      <rect x="3" y="3" width="18" height="18" rx="3" />
-                      <circle cx="8.5" cy="8.5" r="1.5" />
-                      <path
-                        d="M21 15l-5-5L5 21"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </div>
-                )}
-              </div>
-            </Link>
-            <Link
-              href={`${hrefs.productPrefix}/${product.handle}`}
-              className="text-[13px] font-semibold text-foreground leading-tight line-clamp-2 hover:text-muted-foreground transition-colors block"
-            >
-              {product.title}
-            </Link>
-            <p className="text-sm font-semibold text-foreground mt-1.5">
-              {convertToLocale({
-                amount: product.price,
-                currency_code: product.currencyCode,
-              })}
-            </p>
-            <button
-              type="button"
-              onClick={() => onAdd?.(product.id, product.variantId)}
-              className="mt-3 w-full h-10 text-xs font-semibold text-foreground bg-card border border-border rounded-xl hover:bg-foreground hover:text-card hover:border-text-base transition-all flex items-center justify-center gap-1.5 active:scale-[0.97]"
-            >
-              {labels.addToCart}
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 12 12"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              >
-                <path d="M2.5 6h7M7 3.5L9.5 6 7 8.5" />
-              </svg>
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
+"use client"
+
+import { StoreImage as Image } from "../lib/media-image"
+import Link from "next/link"
+
+import type { StoreProduct } from "../api/products"
+import { convertToLocale } from "../lib/money"
+import { useCartDrawer } from "./context"
+
+/**
+ * CartCrossSellSidebar — vertical product-card list for desktop cart
+ * drawer's left sidebar.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/cross-sell-sidebar.tsx` (v2.3.1).
+ * Cartbase data seam: source stores fed this from Medusa product fetches —
+ * feed it from `@cartbase/storefront/api/products` `listProducts` (curated
+ * collection/tag) or `@cartbase/storefront/api/search` `listRelatedProducts`
+ * (anchor-product complements), mapped through `toCrossSellProduct` below.
+ * Wire `onAdd` to the provider's `addItem(variantId)`. Prices are EUR
+ * major units and come server-computed via `calculated_price` — never
+ * recompute client-side.
+ */
+
+export type CrossSellSidebarProduct = {
+  id: string
+  title: string
+  handle: string
+  thumbnail: string | null
+  price: number
+  currencyCode: string
+  variantId?: string
+}
+
+/**
+ * Map a store-API product (products/search/related responses all reuse the
+ * canonical `StoreProduct` shape) to a cross-sell card. Picks the first
+ * variant carrying a server-computed `calculated_price` for the current
+ * pricing context; returns null when no variant is priced (pass
+ * `currency_code`/`region_id` on the listing call, and skip null results).
+ * Pure — exported for unit tests and for building `crossSell.loader`s.
+ */
+export function toCrossSellProduct(
+  product: StoreProduct
+): CrossSellSidebarProduct | null {
+  const variant = (product.variants ?? []).find((v) => v.calculated_price)
+  const price = variant?.calculated_price
+  if (!variant || !price) return null
+  return {
+    id: product.id,
+    title: product.title,
+    handle: product.handle,
+    thumbnail: product.thumbnail,
+    price: price.calculated_amount,
+    currencyCode: price.currency_code,
+    variantId: variant.id,
+  }
+}
+
+type CartCrossSellSidebarProps = {
+  label?: string
+  products: CrossSellSidebarProduct[]
+  onAdd?: (productId: string, variantId?: string) => void
+}
+
+export function CartCrossSellSidebar({
+  label,
+  products,
+  onAdd,
+}: CartCrossSellSidebarProps) {
+  const { labels, hrefs } = useCartDrawer()
+
+  if (!products.length) return null
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="px-5 pt-6 pb-4">
+        <h3 className="text-xs font-bold text-foreground uppercase tracking-widest">
+          {label ?? labels.youMightAlsoLike}
+        </h3>
+      </div>
+      <div className="flex-1 overflow-y-auto no-scrollbar px-4 pb-6 space-y-3">
+        {products.map((product) => (
+          <div
+            key={product.id}
+            className="bg-card rounded-[2px] p-3.5 transition-shadow hover:shadow-md"
+            style={{
+              boxShadow: "0 1px 4px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08)",
+            }}
+          >
+            <Link href={`${hrefs.productPrefix}/${product.handle}`}>
+              <div className="w-full aspect-square rounded-xl overflow-hidden bg-muted relative mb-3">
+                {product.thumbnail ? (
+                  <Image
+                    src={product.thumbnail}
+                    alt={product.title}
+                    fill
+                    className="object-cover"
+                    sizes="200px"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <svg
+                      width="32"
+                      height="32"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      className="text-muted-foreground"
+                      strokeWidth="1.2"
+                    >
+                      <rect x="3" y="3" width="18" height="18" rx="3" />
+                      <circle cx="8.5" cy="8.5" r="1.5" />
+                      <path
+                        d="M21 15l-5-5L5 21"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </div>
+                )}
+              </div>
+            </Link>
+            <Link
+              href={`${hrefs.productPrefix}/${product.handle}`}
+              className="text-[13px] font-semibold text-foreground leading-tight line-clamp-2 hover:text-muted-foreground transition-colors block"
+            >
+              {product.title}
+            </Link>
+            <p className="text-sm font-semibold text-foreground mt-1.5">
+              {convertToLocale({
+                amount: product.price,
+                currency_code: product.currencyCode,
+              })}
+            </p>
+            <button
+              type="button"
+              onClick={() => onAdd?.(product.id, product.variantId)}
+              className="mt-3 w-full h-10 text-xs font-semibold text-foreground bg-card border border-border rounded-xl hover:bg-foreground hover:text-card hover:border-text-base transition-all flex items-center justify-center gap-1.5 active:scale-[0.97]"
+            >
+              {labels.addToCart}
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 12 12"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              >
+                <path d="M2.5 6h7M7 3.5L9.5 6 7 8.5" />
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -1,82 +1,82 @@
-"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>
-  )
-}
+"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

@@ -1,68 +1,71 @@
-// @cartbase/storefront/cart-drawer — barrel export
-//
-// Re-exports every cart drawer primitive + the optional default assembly.
-// Stores can import from this subpath:
-//
-//   import {
-//     CartDrawerProvider,
-//     CartDrawer,
-//     CartDrawerHeader,
-//     CartItem,
-//     CartStickyFooter,
-//     CartDrawerTemplate,
-//   } from "@cartbase/storefront/cart-drawer"
-//
-// Prefer the per-file subpaths in app code (tree-shaking + RSC boundary
-// clarity) — every file here is also exported individually in package.json.
-
-export {
-  CartDrawerProvider,
-  useCartDrawer,
-  reduceCart,
-  makeOptimisticLine,
-  type OptimisticCartAction,
-  type OptimisticAddDisplay,
-  type OptimisticCartError,
-} from "./context"
-export {
-  defaultCartDrawerLabels,
-  type CartDrawerLabels,
-} from "./labels"
-
-export { CartDrawer } from "./cart-drawer"
-export { CartDrawerHeader } from "./header"
-export { CartPromoBanner } from "./promo-banner"
-export {
-  CartTieredProgress,
-  computeTierProgress,
-  type CartTier,
-  type TierProgress,
-} from "./tiered-progress"
-export { CartItem } from "./item"
-export { CartItemQuantity } from "./item/quantity"
-export { CartItemVariant } from "./item/variant"
-export { CartItemUpsell, type UpsellProduct } from "./item/upsell"
-export { CartFreeGift } from "./free-gift"
-export { CartGiftWrap } from "./gift-wrap"
-export { CartNotes } from "./notes"
-export { CartRewardsPoints } from "./rewards-points"
-export {
-  CartCrossSellSidebar,
-  toCrossSellProduct,
-  type CrossSellSidebarProduct,
-} from "./cross-sell-sidebar"
-export {
-  CartCrossSellCarousel,
-  type CrossSellCarouselProduct,
-} from "./cross-sell-carousel"
-export {
-  CartSummaryBreakdown,
-  selectSummaryRows,
-  type SummaryCartTotals,
-  type SummaryRow,
-} from "./summary-breakdown"
-export { CartStickyFooter } from "./sticky-footer"
-export { CartPaymentBadges } from "./payment-badges"
-export { CartContinueShopping } from "./continue-shopping"
-export { CartEmpty } from "./empty"
-export { CartDrawerTemplate, type CartDrawerConfig } from "./template"
+// @cartbase/storefront/cart-drawer — barrel export
+//
+// Re-exports every cart drawer primitive + the optional default assembly.
+// Stores can import from this subpath:
+//
+//   import {
+//     CartDrawerProvider,
+//     CartDrawer,
+//     CartDrawerHeader,
+//     CartItem,
+//     CartStickyFooter,
+//     CartDrawerTemplate,
+//   } from "@cartbase/storefront/cart-drawer"
+//
+// Prefer the per-file subpaths in app code (tree-shaking + RSC boundary
+// clarity) — every file here is also exported individually in package.json.
+
+export {
+  CartDrawerProvider,
+  useCartDrawer,
+  reduceCart,
+  makeOptimisticLine,
+  isPendingLine,
+  type CartMutationResult,
+  type OptimisticCartAction,
+  type OptimisticAddDisplay,
+  type OptimisticCartError,
+} from "./context"
+export { createCartMutationQueue, type CartMutationQueue } from "./mutation-queue"
+export {
+  defaultCartDrawerLabels,
+  type CartDrawerLabels,
+} from "./labels"
+
+export { CartDrawer } from "./cart-drawer"
+export { CartDrawerHeader } from "./header"
+export { CartPromoBanner } from "./promo-banner"
+export {
+  CartTieredProgress,
+  computeTierProgress,
+  type CartTier,
+  type TierProgress,
+} from "./tiered-progress"
+export { CartItem } from "./item"
+export { CartItemQuantity } from "./item/quantity"
+export { CartItemVariant } from "./item/variant"
+export { CartItemUpsell, type UpsellProduct } from "./item/upsell"
+export { CartFreeGift } from "./free-gift"
+export { CartGiftWrap } from "./gift-wrap"
+export { CartNotes } from "./notes"
+export { CartRewardsPoints } from "./rewards-points"
+export {
+  CartCrossSellSidebar,
+  toCrossSellProduct,
+  type CrossSellSidebarProduct,
+} from "./cross-sell-sidebar"
+export {
+  CartCrossSellCarousel,
+  type CrossSellCarouselProduct,
+} from "./cross-sell-carousel"
+export {
+  CartSummaryBreakdown,
+  selectSummaryRows,
+  type SummaryCartTotals,
+  type SummaryRow,
+} from "./summary-breakdown"
+export { CartStickyFooter } from "./sticky-footer"
+export { CartPaymentBadges } from "./payment-badges"
+export { CartContinueShopping } from "./continue-shopping"
+export { CartEmpty } from "./empty"
+export { CartDrawerTemplate, type CartDrawerConfig } from "./template"