@cartbase/storefront 0.20.0 → 0.21.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>
+  )
+}