@cartbase/storefront 0.1.0

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

@@ -0,0 +1,212 @@
+"use client"
+
+import Image from "next/image"
+import Link from "next/link"
+import { useRef, useState } from "react"
+
+import { DualPrice } from "../lib/dual-price"
+import { cn } from "../lib/utils"
+import { useCartDrawer } from "./context"
+
+/**
+ * CartCrossSellCarousel — horizontal scrollable product strip with left/right
+ * arrow controls. Used as mobile alternative to the sidebar or as a second
+ * cross-sell zone below the line items on desktop.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/cross-sell-carousel.tsx` (v2.3.1).
+ * Barter data seam: same as the sidebar — feed from
+ * `@cartbase/storefront/api/products` `listProducts` or `api/search`
+ * `listRelatedProducts` via `toCrossSellProduct`
+ * (`./cross-sell-sidebar`; the card shapes are identical), wire `onAdd`
+ * to the provider's `addItem(variantId)`. Prices EUR major units.
+ */
+
+export type CrossSellCarouselProduct = {
+  id: string
+  title: string
+  handle: string
+  thumbnail: string | null
+  price: number
+  currencyCode: string
+  variantId?: string
+}
+
+type CartCrossSellCarouselProps = {
+  label?: string
+  products: CrossSellCarouselProduct[]
+  onAdd?: (productId: string, variantId?: string) => void
+}
+
+export function CartCrossSellCarousel({
+  label,
+  products,
+  onAdd,
+}: CartCrossSellCarouselProps) {
+  const { labels, hrefs } = useCartDrawer()
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [canScrollLeft, setCanScrollLeft] = useState(false)
+  const [canScrollRight, setCanScrollRight] = useState(true)
+
+  const checkScroll = () => {
+    if (!scrollRef.current) return
+    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current
+    setCanScrollLeft(scrollLeft > 4)
+    setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 4)
+  }
+
+  const scroll = (dir: "left" | "right") => {
+    if (!scrollRef.current) return
+    scrollRef.current.scrollBy({
+      left: dir === "left" ? -260 : 260,
+      behavior: "smooth",
+    })
+    setTimeout(checkScroll, 350)
+  }
+
+  if (!products.length) return null
+
+  return (
+    <div className="border-t border-border bg-muted/50 py-4">
+      <div className="flex items-center justify-between px-5 sm:px-6 mb-3">
+        <h3 className="text-sm font-semibold text-foreground">
+          {label ?? labels.youllLoveThis}
+        </h3>
+        <div className="hidden sm:flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => scroll("left")}
+            disabled={!canScrollLeft}
+            className="w-8 h-8 flex items-center justify-center rounded-full border border-border text-muted-foreground hover:border-text-muted hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed transition-all"
+            aria-label="Scroll left"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M8.5 3L4.5 7l4 4" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            onClick={() => scroll("right")}
+            disabled={!canScrollRight}
+            className="w-8 h-8 flex items-center justify-center rounded-full border border-border text-muted-foreground hover:border-text-muted hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed transition-all"
+            aria-label="Scroll right"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M5.5 3l4 4-4 4" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div
+        ref={scrollRef}
+        onScroll={checkScroll}
+        className="flex gap-2.5 overflow-x-auto no-scrollbar"
+        style={{
+          WebkitOverflowScrolling: "touch",
+          paddingLeft: "1.25rem",
+          paddingRight: "1.25rem",
+        }}
+      >
+        {products.map((product) => (
+          <div
+            key={product.id}
+            className={cn(
+              "flex-shrink-0 w-[260px] bg-card rounded-xl border border-border p-2.5",
+              "flex gap-3 items-center snap-start"
+            )}
+            style={{ boxShadow: "0 1px 3px rgba(0,0,0,0.04)" }}
+          >
+            <Link
+              href={`${hrefs.productPrefix}/${product.handle}`}
+              className="flex-shrink-0"
+            >
+              <div className="w-14 h-14 rounded-lg overflow-hidden bg-muted relative">
+                {product.thumbnail ? (
+                  <Image
+                    src={product.thumbnail}
+                    alt={product.title}
+                    fill
+                    className="object-cover"
+                    sizes="56px"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <svg
+                      width="16"
+                      height="16"
+                      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>
+
+            <div className="flex-1 min-w-0">
+              <Link
+                href={`${hrefs.productPrefix}/${product.handle}`}
+                className="text-[12px] font-semibold text-foreground line-clamp-1 leading-snug hover:text-muted-foreground transition-colors block"
+              >
+                {product.title}
+              </Link>
+              <DualPrice
+                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>
+
+            <button
+              type="button"
+              onClick={() => onAdd?.(product.id, product.variantId)}
+              className="w-8 h-8 flex-shrink-0 flex items-center justify-center rounded-full border border-border text-muted-foreground hover:border-text-base hover:text-foreground active:bg-muted transition-all"
+              aria-label={`${labels.addToCart} ${product.title}`}
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 12 12"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              >
+                <path d="M6 2.5v7M2.5 6h7" />
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,158 @@
+"use client"
+
+import Image from "next/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).
+ * Barter 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/empty.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import Link from "next/link"
+
+import { useCartDrawer } from "./context"
+
+/**
+ * CartEmpty — empty-state for the cart drawer.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/empty.tsx` (v2.3.1);
+ * originally extracted from mindpages-storefront
+ * src/modules/cart-drawer/cart-empty.tsx.
+ */
+
+export function CartEmpty() {
+  const { close, labels, hrefs } = useCartDrawer()
+
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center px-8 py-16">
+      <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-5">
+        <svg
+          width="28"
+          height="28"
+          viewBox="0 0 28 28"
+          fill="none"
+          stroke="currentColor"
+          className="text-muted-foreground"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M6 8h16l-1.5 14H7.5L6 8z" />
+          <path d="M10 8V6a4 4 0 018 0v2" />
+        </svg>
+      </div>
+      <h3 className="text-lg font-semibold text-foreground mb-1.5">
+        {labels.emptyCartTitle}
+      </h3>
+      <p className="text-sm text-muted-foreground text-center mb-6 max-w-[240px]">
+        {labels.emptyCartMessage}
+      </p>
+      <Link href={hrefs.browse} onClick={close}>
+        <button
+          type="button"
+          className="px-6 py-2.5 bg-foreground text-card text-sm font-medium rounded-xl hover:bg-foreground/90 transition-colors active:scale-[0.97]"
+        >
+          {labels.browseProducts}
+        </button>
+      </Link>
+    </div>
+  )
+}

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

@@ -0,0 +1,71 @@
+"use client"
+
+import Image from "next/image"
+
+import { convertToLocale } from "../lib/money"
+import { useCartDrawer } from "./context"
+
+/**
+ * CartFreeGift — a "free gift" promo card shown inside the cart drawer
+ * when the cart total exceeds a qualifying threshold.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/free-gift.tsx` (v2.3.1);
+ * originally extracted from mindpages-storefront
+ * src/modules/cart-drawer/cart-free-gift.tsx. `originalPrice` is EUR
+ * major units.
+ */
+
+type CartFreeGiftProps = {
+  title: string
+  description?: string
+  originalPrice: number
+  currencyCode: string
+  thumbnail?: string | null
+}
+
+export function CartFreeGift({
+  title,
+  description,
+  originalPrice,
+  currencyCode,
+  thumbnail,
+}: CartFreeGiftProps) {
+  const { labels } = useCartDrawer()
+
+  return (
+    <div className="mx-5 my-3 p-4 rounded-xl border border-success/20 bg-success/5">
+      <div className="flex items-start gap-3">
+        {thumbnail && (
+          <div className="w-12 h-12 rounded-lg overflow-hidden bg-card flex-shrink-0 relative">
+            <Image
+              src={thumbnail}
+              alt={title}
+              fill
+              className="object-cover"
+              sizes="48px"
+            />
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold text-foreground">{title}</span>
+            <span className="text-xs text-muted-foreground line-through">
+              {convertToLocale({
+                amount: originalPrice,
+                currency_code: currencyCode,
+              })}
+            </span>
+            <span className="text-xs font-bold text-success bg-success/10 px-1.5 py-0.5 rounded">
+              {labels.free}
+            </span>
+          </div>
+          {description && (
+            <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

package/src/cart-drawer/header.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { productItemCount } from "../lib/cart-helpers"
+import { useCartDrawer } from "./context"
+
+/**
+ * Cart drawer header — store title, item count badge, close button.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/header.tsx` (v2.3.1). Barter
+ * adjustment: the badge counts PRODUCT lines via the shared
+ * `productItemCount` predicate (the source summed all lines) so a
+ * backend-injected COD-fee line can never inflate the item count —
+ * consistent with the provider's auto-open counter.
+ */
+
+export function CartDrawerHeader() {
+  const { close, cart, labels } = useCartDrawer()
+  const totalItems = productItemCount(cart?.items)
+
+  return (
+    <div className="flex items-center justify-between px-5 sm:px-6 py-4 sm:py-5 flex-shrink-0 bg-card">
+      <div className="flex items-center gap-2.5">
+        <h2 className="text-base sm:text-[17px] font-bold text-foreground tracking-tight">
+          {labels.yourCart}
+        </h2>
+        {totalItems > 0 && (
+          <span className="text-[11px] font-semibold text-muted-foreground bg-muted rounded-full px-2.5 py-1 leading-none">
+            {totalItems} {totalItems === 1 ? labels.item : labels.items}
+          </span>
+        )}
+      </div>
+      <button
+        onClick={close}
+        className="w-11 h-11 -mr-1.5 flex items-center justify-center rounded-full hover:bg-muted active:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+        aria-label={labels.closeCart}
+      >
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          aria-hidden="true"
+        >
+          <path d="M4 4l8 8M12 4l-8 8" />
+        </svg>
+      </button>
+    </div>
+  )
+}