@cartbase/storefront 0.1.0

package/src/products/product-actions.tsx

@@ -0,0 +1,217 @@
+"use client"
+
+/**
+ * PDP add-to-cart panel — ported from
+ * `@1click/ui/src/products/product-actions.tsx` (v2.3.1).
+ *
+ * Data-seam adaptations (batch-10 port):
+ * - `HttpTypes.*` → barter SDK DTOs (`@cartbase/storefront/api/products`).
+ * - The `addToCart` server action (Medusa js-sdk, cart-cookie owner) is now
+ *   an injected prop: the host app wires it to its own cart orchestration
+ *   (typically `api/carts` `addLineItem` + its cart-id cookie). Same for the
+ *   cart drawer: `openCart` replaces the `useCartDrawer()` context import so
+ *   the products family has no hard dependency on the cart-drawer family.
+ * - `countryCode` (Medusa region routing) is dropped — barter pricing
+ *   context travels with the product fetch, and the host's `addToCart`
+ *   closes over whatever routing it needs.
+ * - Stock: barter's store surface does NOT expose `inventory_quantity`
+ *   (availability is a search facet; the server enforces stock at add with
+ *   400 `insufficient_inventory`). Managed-inventory variants without an
+ *   exposed quantity are treated as in stock optimistically; a thrown
+ *   `insufficient_inventory` flips the button to the out-of-stock state.
+ *   Richer DTOs that DO carry `inventory_quantity` keep the original
+ *   quantity check.
+ *
+ * Variant matching is the extracted pure module `./variant-matching`
+ * (handles barter's option-value link shape).
+ */
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useMemo, useRef, useState } from "react"
+
+import type { StoreProduct, StoreProductVariant } from "../api/products"
+import { useIntersection } from "../lib/hooks/use-intersection"
+import { Button } from "../primitives/ui/button"
+import { useProductLabels } from "./context"
+import { OptionSelect } from "./option-select"
+import { ProductPrice } from "./product-price"
+import { MobileActions } from "./mobile-actions"
+import { findMatchingVariant, optionsAsKeymap, optionsMatch } from "./variant-matching"
+
+/** Input the host's cart seam receives on add. */
+export type AddToCartInput = {
+  variantId: string
+  quantity: number
+}
+
+type ProductActionsProps = {
+  product: StoreProduct
+  /**
+   * The cart seam: called with the selected variant. Wire to the host's
+   * cart orchestration (`api/carts` `addLineItem` behind the host's cart-id
+   * storage). May throw `StoreApiError` — `insufficient_inventory` is
+   * handled here (button flips to out-of-stock).
+   */
+  addToCart: (input: AddToCartInput) => Promise<void>
+  disabled?: boolean
+  /** Fired after a successful add (analytics: trackAddToCart trio). */
+  onAddToCart?: (product: StoreProduct, variant: StoreProductVariant) => void
+  /** Open the host's cart drawer after a successful add. */
+  openCart?: () => void
+}
+
+export function ProductActions({
+  product,
+  addToCart,
+  disabled,
+  onAddToCart,
+  openCart,
+}: ProductActionsProps) {
+  const labels = useProductLabels()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  const [options, setOptions] = useState<Record<string, string | undefined>>({})
+  const [isAdding, setIsAdding] = useState(false)
+  // Set when the server rejected an add with `insufficient_inventory`
+  // (barter exposes no inventory_quantity on the store surface — the server
+  // is the stock truth). Cleared when the selection changes.
+  const [stockExhausted, setStockExhausted] = useState(false)
+
+  useEffect(() => {
+    if (product.variants?.length === 1) {
+      const variantOptions = optionsAsKeymap(product.variants[0]?.options ?? null)
+      setOptions(variantOptions ?? {})
+    }
+  }, [product.variants])
+
+  const selectedVariant = useMemo(
+    () => findMatchingVariant(product.variants, options),
+    [product.variants, options]
+  )
+
+  const setOptionValue = (optionId: string, value: string) => {
+    setOptions((prev) => ({ ...prev, [optionId]: value }))
+  }
+
+  const isValidVariant = useMemo(() => {
+    return product.variants?.some((v) =>
+      optionsMatch(options, optionsAsKeymap(v.options))
+    )
+  }, [product.variants, options])
+
+  useEffect(() => {
+    setStockExhausted(false)
+  }, [selectedVariant?.id])
+
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString())
+    const value = isValidVariant ? selectedVariant?.id : null
+
+    if (params.get("v_id") === value) return
+
+    if (value) {
+      params.set("v_id", value)
+    } else {
+      params.delete("v_id")
+    }
+
+    router.replace(pathname + "?" + params.toString())
+  }, [selectedVariant, isValidVariant, searchParams, pathname, router])
+
+  const inStock = useMemo(() => {
+    if (!selectedVariant) return false
+    if (!selectedVariant.manage_inventory) return true
+    if (selectedVariant.allow_backorder) return true
+    // barter wire shape carries no inventory_quantity — optimistic; the
+    // server enforces stock on add. Richer DTOs keep the original check.
+    const qty = (selectedVariant as { inventory_quantity?: number })
+      .inventory_quantity
+    if (qty === undefined) return !stockExhausted
+    return qty > 0
+  }, [selectedVariant, stockExhausted])
+
+  const actionsRef = useRef<HTMLDivElement>(null)
+  const inView = useIntersection(actionsRef, "0px")
+
+  const handleAddToCart = async () => {
+    if (!selectedVariant?.id) return
+
+    setIsAdding(true)
+    try {
+      await addToCart({ variantId: selectedVariant.id, quantity: 1 })
+    } catch (e) {
+      if ((e as { code?: string } | null)?.code === "insufficient_inventory") {
+        setStockExhausted(true)
+        return
+      }
+      throw e
+    } finally {
+      setIsAdding(false)
+    }
+
+    onAddToCart?.(product, selectedVariant)
+    openCart?.()
+    router.refresh()
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-y-2" ref={actionsRef}>
+        <div>
+          {(product.variants?.length ?? 0) > 1 && (
+            <div className="flex flex-col gap-y-4">
+              {(product.options || []).map((option) => (
+                <div key={option.id}>
+                  <OptionSelect
+                    option={option}
+                    current={options[option.id]}
+                    updateOption={setOptionValue}
+                    title={option.title ?? ""}
+                    data-testid="product-options"
+                    disabled={!!disabled || isAdding}
+                  />
+                </div>
+              ))}
+              <div className="h-px bg-border" />
+            </div>
+          )}
+        </div>
+
+        <ProductPrice product={product} variant={selectedVariant} />
+
+        <Button
+          onClick={handleAddToCart}
+          disabled={
+            !inStock ||
+            !selectedVariant ||
+            !!disabled ||
+            isAdding ||
+            !isValidVariant
+          }
+          className="w-full h-10"
+          data-testid="add-product-button"
+        >
+          {!selectedVariant && !options
+            ? labels.selectVariant
+            : !inStock || !isValidVariant
+              ? labels.outOfStock
+              : labels.addToCart}
+        </Button>
+        <MobileActions
+          product={product}
+          variant={selectedVariant}
+          options={options}
+          updateOptions={setOptionValue}
+          inStock={inStock}
+          handleAddToCart={handleAddToCart}
+          isAdding={isAdding}
+          show={!inView}
+          optionsDisabled={!!disabled || isAdding}
+        />
+      </div>
+    </>
+  )
+}
+
+export { type ProductActionsProps }

package/src/products/product-info.tsx

@@ -0,0 +1,43 @@
+/**
+ * PDP title/collection/description block — ported from
+ * `@1click/ui/src/products/product-info.tsx` (v2.3.1). Data seam:
+ * `HttpTypes.StoreProduct` → barter `StoreProduct` (the collection embed is
+ * `{id, title, handle}` — exactly what the link needs). Server-safe.
+ */
+import Link from "next/link"
+import type { StoreProduct } from "../api/products"
+
+type ProductInfoProps = {
+  product: StoreProduct
+}
+
+export function ProductInfo({ product }: ProductInfoProps) {
+  return (
+    <div id="product-info">
+      <div className="flex flex-col gap-y-4 lg:max-w-[500px] mx-auto">
+        {product.collection && (
+          <Link
+            href={`/collections/${product.collection.handle}`}
+            className="text-sm text-muted-foreground hover:text-muted-foreground"
+          >
+            {product.collection.title}
+          </Link>
+        )}
+        <h2
+          className="text-3xl leading-10 text-foreground font-bold"
+          data-testid="product-title"
+        >
+          {product.title}
+        </h2>
+        <p
+          className="text-sm text-muted-foreground whitespace-pre-line"
+          data-testid="product-description"
+        >
+          {product.description}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export { type ProductInfoProps }

package/src/products/product-preview.tsx

@@ -0,0 +1,49 @@
+/**
+ * Product card — ported from `@1click/ui/src/products/product-preview.tsx`
+ * (v2.3.1). Data seam: `HttpTypes.StoreProduct` → barter `StoreProduct`.
+ * The ONE card renderer per the SDK doctrine: search results, collection
+ * membership pages, and related products all serve the same canonical
+ * product object — reuse this card (or pass a custom one via the templates'
+ * `renderProduct`) everywhere. Price comes from the server-computed
+ * `variant.calculated_price` via `lib/get-product-price`. Server-safe.
+ */
+import Link from "next/link"
+import type { StoreProduct } from "../api/products"
+import { getProductPrice } from "../lib/get-product-price"
+import { Thumbnail } from "./thumbnail"
+import { PreviewPrice } from "./preview-price"
+
+type ProductPreviewProps = {
+  product: StoreProduct
+  isFeatured?: boolean
+}
+
+export function ProductPreview({
+  product,
+  isFeatured,
+}: ProductPreviewProps) {
+  const { cheapestPrice } = getProductPrice({ product })
+
+  return (
+    <Link href={`/products/${product.handle}`} className="group">
+      <div data-testid="product-wrapper">
+        <Thumbnail
+          thumbnail={product.thumbnail}
+          images={product.images}
+          size="square"
+          isFeatured={isFeatured}
+        />
+        <div className="flex text-sm mt-4 justify-between">
+          <span className="text-muted-foreground" data-testid="product-title">
+            {product.title}
+          </span>
+          <div className="flex items-center gap-x-2">
+            {cheapestPrice && <PreviewPrice price={cheapestPrice} />}
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+export { type ProductPreviewProps }

package/src/products/product-price.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+/**
+ * PDP price display — ported from
+ * `@1click/ui/src/products/product-price.tsx` (v2.3.1). Data seam:
+ * `@medusajs/types` `HttpTypes.StoreProduct/StoreProductVariant` are
+ * replaced by the barter SDK DTOs (`@cartbase/storefront/api/products`).
+ * Pricing stays SERVER truth — `lib/get-product-price` only selects and
+ * formats `variant.calculated_price` (barter's flat `price_list_type`).
+ */
+import type { StoreProduct, StoreProductVariant } from "../api/products"
+import { cn } from "../lib/utils"
+import { getProductPrice } from "../lib/get-product-price"
+import { useProductLabels } from "./context"
+
+export function ProductPrice({
+  product,
+  variant,
+}: {
+  product: StoreProduct
+  variant?: StoreProductVariant
+}) {
+  const labels = useProductLabels()
+  const { cheapestPrice, variantPrice } = getProductPrice({
+    product,
+    variantId: variant?.id,
+  })
+
+  const selectedPrice = variant ? variantPrice : cheapestPrice
+
+  if (!selectedPrice) {
+    return <div className="block w-32 h-9 bg-muted animate-pulse rounded" />
+  }
+
+  return (
+    <div className="flex flex-col text-foreground">
+      <span
+        className={cn("text-xl font-semibold", {
+          "text-primary": selectedPrice.price_type === "sale",
+        })}
+      >
+        {!variant && `${labels.from} `}
+        <span
+          data-testid="product-price"
+          data-value={selectedPrice.calculated_price_number}
+        >
+          {selectedPrice.calculated_price}
+        </span>
+      </span>
+      {selectedPrice.price_type === "sale" && (
+        <>
+          <p>
+            <span className="text-muted-foreground">{labels.original} </span>
+            <span
+              className="line-through"
+              data-testid="original-product-price"
+              data-value={selectedPrice.original_price_number}
+            >
+              {selectedPrice.original_price}
+            </span>
+          </p>
+          <span className="text-primary">
+            -{selectedPrice.percentage_diff}%
+          </span>
+        </>
+      )}
+    </div>
+  )
+}

package/src/products/product-tabs.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+/**
+ * PDP info/shipping accordion — ported from
+ * `@1click/ui/src/products/product-tabs.tsx` (v2.3.1). Data seam:
+ * `HttpTypes.StoreProduct` → barter `StoreProduct` (same physical fields:
+ * material, origin_country, type.value, weight, length/width/height).
+ * Layout, morphing +/− trigger, and label wiring unchanged.
+ */
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { Truck, RefreshCw, Undo2 } from "lucide-react"
+
+import type { StoreProduct } from "../api/products"
+import { useProductLabels } from "./context"
+
+type ProductTabsProps = {
+  product: StoreProduct
+}
+
+export function ProductTabs({ product }: ProductTabsProps) {
+  const labels = useProductLabels()
+
+  const tabs = [
+    {
+      label: labels.productInformation,
+      component: <ProductInfoTab product={product} />,
+    },
+    {
+      label: labels.shippingAndReturns,
+      component: <ShippingInfoTab />,
+    },
+  ]
+
+  return (
+    <div className="w-full">
+      <AccordionPrimitive.Root type="multiple">
+        {tabs.map((tab, i) => (
+          <AccordionPrimitive.Item
+            key={i}
+            value={tab.label}
+            className="border-t border-border py-3 last:border-b"
+          >
+            <AccordionPrimitive.Header className="px-1">
+              <div className="flex w-full items-center justify-between">
+                <span className="text-muted-foreground text-sm">{tab.label}</span>
+                <AccordionPrimitive.Trigger>
+                  <MorphingTrigger />
+                </AccordionPrimitive.Trigger>
+              </div>
+            </AccordionPrimitive.Header>
+            <AccordionPrimitive.Content className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down px-1">
+              <div className="w-full">{tab.component}</div>
+            </AccordionPrimitive.Content>
+          </AccordionPrimitive.Item>
+        ))}
+      </AccordionPrimitive.Root>
+    </div>
+  )
+}
+
+function ProductInfoTab({ product }: ProductTabsProps) {
+  const labels = useProductLabels()
+
+  return (
+    <div className="text-sm py-8">
+      <div className="grid grid-cols-2 gap-x-8">
+        <div className="flex flex-col gap-y-4">
+          <div>
+            <span className="font-semibold text-foreground">
+              {labels.material}
+            </span>
+            <p className="text-muted-foreground">
+              {product.material ? product.material : "-"}
+            </p>
+          </div>
+          <div>
+            <span className="font-semibold text-foreground">
+              {labels.countryOfOrigin}
+            </span>
+            <p className="text-muted-foreground">
+              {product.origin_country ? product.origin_country : "-"}
+            </p>
+          </div>
+          <div>
+            <span className="font-semibold text-foreground">{labels.type}</span>
+            <p className="text-muted-foreground">
+              {product.type ? product.type.value : "-"}
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-col gap-y-4">
+          <div>
+            <span className="font-semibold text-foreground">
+              {labels.weight}
+            </span>
+            <p className="text-muted-foreground">
+              {product.weight ? `${product.weight} g` : "-"}
+            </p>
+          </div>
+          <div>
+            <span className="font-semibold text-foreground">
+              {labels.dimensions}
+            </span>
+            <p className="text-muted-foreground">
+              {product.length && product.width && product.height
+                ? `${product.length}L x ${product.width}W x ${product.height}H`
+                : "-"}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ShippingInfoTab() {
+  const labels = useProductLabels()
+
+  return (
+    <div className="text-sm py-8">
+      <div className="grid grid-cols-1 gap-y-8">
+        <div className="flex items-start gap-x-2">
+          <Truck className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
+          <div>
+            <span className="font-semibold text-foreground">
+              {labels.fastDelivery}
+            </span>
+            <p className="max-w-sm text-muted-foreground">
+              {labels.fastDeliveryDescription}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-start gap-x-2">
+          <RefreshCw className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
+          <div>
+            <span className="font-semibold text-foreground">
+              {labels.simpleExchanges}
+            </span>
+            <p className="max-w-sm text-muted-foreground">
+              {labels.simpleExchangesDescription}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-start gap-x-2">
+          <Undo2 className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
+          <div>
+            <span className="font-semibold text-foreground">
+              {labels.easyReturns}
+            </span>
+            <p className="max-w-sm text-muted-foreground">
+              {labels.easyReturnsDescription}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function MorphingTrigger() {
+  return (
+    <div className="text-muted-foreground hover:bg-muted rounded-lg relative p-1.5">
+      <div className="h-5 w-5">
+        <span className="bg-muted-foreground rounded-full absolute inset-y-[31.75%] left-[48%] right-1/2 w-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90" />
+        <span className="bg-muted-foreground rounded-full absolute inset-x-[31.75%] top-[48%] bottom-1/2 h-[1.5px] transition-transform duration-300 group-data-[state=open]:rotate-90 group-data-[state=open]:left-1/2 group-data-[state=open]:right-1/2" />
+      </div>
+    </div>
+  )
+}

package/src/products/product-template.tsx

@@ -0,0 +1,114 @@
+/**
+ * Full PDP layout — ported from
+ * `@1click/ui/src/products/product-template.tsx` (v2.3.1). Data seam:
+ * `region`/`countryCode` (Medusa region routing) are replaced by
+ * `client` + `pricingContext`; the cart seam (`addToCart`/`openCart`)
+ * threads through to `ProductActions` (see product-actions.tsx for the
+ * seam rationale). Layout — sticky info column, scrolling gallery, sticky
+ * actions column, related strip — unchanged.
+ *
+ * Server component: fetch the product in the page (`retrieveProduct` by
+ * handle with the pricing context) and pass it in; the wrapper re-fetches
+ * live prices inside Suspense.
+ */
+import { Suspense } from "react"
+import { notFound } from "next/navigation"
+
+import type { StorefrontClient } from "../api/http"
+import type { PricingContextQuery } from "../api/types"
+import type { StoreProduct, StoreProductVariant } from "../api/products"
+import { ImageGallery } from "./image-gallery"
+import { ProductActions, type AddToCartInput } from "./product-actions"
+import { ProductTabs } from "./product-tabs"
+import { RelatedProducts } from "./related-products"
+import { ProductInfo } from "./product-info"
+import { ProductActionsWrapper } from "./product-actions-wrapper"
+
+type ProductTemplateProps = {
+  client: StorefrontClient
+  product: StoreProduct
+  /** Pricing context (currency_code/region_id) for actions + related. */
+  pricingContext?: PricingContextQuery
+  addToCart: (input: AddToCartInput) => Promise<void>
+  onAddToCart?: (product: StoreProduct, variant: StoreProductVariant) => void
+  openCart?: () => void
+}
+
+export function ProductTemplate({
+  client,
+  product,
+  pricingContext,
+  addToCart,
+  onAddToCart,
+  openCart,
+}: ProductTemplateProps) {
+  if (!product || !product.id) {
+    return notFound()
+  }
+
+  const images = product.images ?? []
+
+  return (
+    <>
+      <div
+        className="max-w-7xl mx-auto px-4 flex flex-col sm:flex-row sm:items-start py-6 relative"
+        data-testid="product-container"
+      >
+        <div className="flex flex-col sm:sticky sm:top-48 sm:py-0 sm:max-w-[300px] w-full py-8 gap-y-6">
+          <ProductInfo product={product} />
+          <ProductTabs product={product} />
+        </div>
+        <div className="block w-full relative">
+          <ImageGallery images={images} />
+        </div>
+        <div className="flex flex-col sm:sticky sm:top-48 sm:py-0 sm:max-w-[300px] w-full py-8 gap-y-12">
+          <Suspense
+            fallback={
+              <ProductActions
+                disabled={true}
+                product={product}
+                addToCart={addToCart}
+                onAddToCart={onAddToCart}
+                openCart={openCart}
+              />
+            }
+          >
+            <ProductActionsWrapper
+              client={client}
+              id={product.id}
+              pricingContext={pricingContext}
+              addToCart={addToCart}
+              onAddToCart={onAddToCart}
+              openCart={openCart}
+            />
+          </Suspense>
+        </div>
+      </div>
+      <div
+        className="max-w-7xl mx-auto px-4 my-16 sm:my-32"
+        data-testid="related-products-container"
+      >
+        <Suspense
+          fallback={
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="aspect-[9/16] bg-muted animate-pulse rounded-lg"
+                />
+              ))}
+            </div>
+          }
+        >
+          <RelatedProducts
+            client={client}
+            product={product}
+            pricingContext={pricingContext}
+          />
+        </Suspense>
+      </div>
+    </>
+  )
+}
+
+export { type ProductTemplateProps }