@cartbase/storefront 0.16.0 → 0.18.0

package/src/products/product-template.tsx

@@ -1,162 +1,163 @@
-/**
- * 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, type ComponentType } 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, type ProductSection } from "./product-tabs"
-import type { ProductPromise } from "./product-promises"
-import type { ProductLabels } from "./labels"
-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
-  /**
-   * The store's delivery, exchange and return promises, shown in the
-   * accordion. No default: with none, that section does not exist, because
-   * the library cannot promise anything on a merchant's behalf.
-   */
-  promises?: ProductPromise[]
-  /**
-   * The store's product pack, REQUIRED even when a `StorefrontLocaleProvider`
-   * is mounted: the related-products strip is a SERVER component and a
-   * server component cannot read a client context, so its heading stays
-   * English unless the pack arrives as a prop. Until 2026-09-13 this
-   * template did not accept one at all and did not pass one down, which made
-   * that strip untranslatable without ejecting the file (Alexander found it
-   * on evoo: a Bulgarian page ending in "Related products / You might also
-   * want to check out these products"). Optional until 2026-09-14, which is
-   * how a page could still forget it; now the build refuses the page.
-   * Pass `STORE_LOCALE.products` (`en.products` for an English store).
-   */
-  labels: ProductLabels
-  /** Drop the physical-facts section even for a product that has facts. */
-  hideSpecs?: boolean
-  /** Anything else the store wants in the accordion, appended in order. */
-  sections?: ProductSection[]
-  /**
-   * The variant the address names: pass `searchParams.variant` from the
-   * page, so the server renders that variant's price, code and stock and
-   * nothing flashes (the product page contract, `use-product-actions.ts`).
-   */
-  initialVariantId?: string | null
-  /** The store's own card for the related strip; the library's preview without it. */
-  renderProduct?: ComponentType<{ product: StoreProduct }>
-}
-
-export function ProductTemplate({
-  client,
-  product,
-  pricingContext,
-  addToCart,
-  onAddToCart,
-  openCart,
-  promises,
-  labels,
-  hideSpecs,
-  sections,
-  initialVariantId,
-  renderProduct,
-}: 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}
-            promises={promises}
-            hideSpecs={hideSpecs}
-            sections={sections}
-          />
-        </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}
-                initialVariantId={initialVariantId}
-                addToCart={addToCart}
-                onAddToCart={onAddToCart}
-                openCart={openCart}
-              />
-            }
-          >
-            <ProductActionsWrapper
-              client={client}
-              id={product.id}
-              pricingContext={pricingContext}
-              initialVariantId={initialVariantId}
-              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}
-            labels={labels}
-            renderProduct={renderProduct}
-          />
-        </Suspense>
-      </div>
-    </>
-  )
-}
-
-export { type ProductTemplateProps }
+/**
+ * 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, type ComponentType } 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, type ProductSection } from "./product-tabs"
+import type { ProductPromise } from "./product-promises"
+import type { ProductLabels } from "./labels"
+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
+  /** A server action; leave it out for the instant add through the mounted cart drawer. */
+  addToCart?: (input: AddToCartInput) => Promise<void>
+  onAddToCart?: (product: StoreProduct, variant: StoreProductVariant) => void
+  openCart?: () => void
+  /**
+   * The store's delivery, exchange and return promises, shown in the
+   * accordion. No default: with none, that section does not exist, because
+   * the library cannot promise anything on a merchant's behalf.
+   */
+  promises?: ProductPromise[]
+  /**
+   * The store's product pack, REQUIRED even when a `StorefrontLocaleProvider`
+   * is mounted: the related-products strip is a SERVER component and a
+   * server component cannot read a client context, so its heading stays
+   * English unless the pack arrives as a prop. Until 2026-09-13 this
+   * template did not accept one at all and did not pass one down, which made
+   * that strip untranslatable without ejecting the file (Alexander found it
+   * on evoo: a Bulgarian page ending in "Related products / You might also
+   * want to check out these products"). Optional until 2026-09-14, which is
+   * how a page could still forget it; now the build refuses the page.
+   * Pass `STORE_LOCALE.products` (`en.products` for an English store).
+   */
+  labels: ProductLabels
+  /** Drop the physical-facts section even for a product that has facts. */
+  hideSpecs?: boolean
+  /** Anything else the store wants in the accordion, appended in order. */
+  sections?: ProductSection[]
+  /**
+   * The variant the address names: pass `searchParams.variant` from the
+   * page, so the server renders that variant's price, code and stock and
+   * nothing flashes (the product page contract, `use-product-actions.ts`).
+   */
+  initialVariantId?: string | null
+  /** The store's own card for the related strip; the library's preview without it. */
+  renderProduct?: ComponentType<{ product: StoreProduct }>
+}
+
+export function ProductTemplate({
+  client,
+  product,
+  pricingContext,
+  addToCart,
+  onAddToCart,
+  openCart,
+  promises,
+  labels,
+  hideSpecs,
+  sections,
+  initialVariantId,
+  renderProduct,
+}: 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}
+            promises={promises}
+            hideSpecs={hideSpecs}
+            sections={sections}
+          />
+        </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}
+                initialVariantId={initialVariantId}
+                addToCart={addToCart}
+                onAddToCart={onAddToCart}
+                openCart={openCart}
+              />
+            }
+          >
+            <ProductActionsWrapper
+              client={client}
+              id={product.id}
+              pricingContext={pricingContext}
+              initialVariantId={initialVariantId}
+              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}
+            labels={labels}
+            renderProduct={renderProduct}
+          />
+        </Suspense>
+      </div>
+    </>
+  )
+}
+
+export { type ProductTemplateProps }

package/src/products/purchase-options.tsx

@@ -1,130 +1,130 @@
-"use client"
-
-/**
- * PDP purchase options — one-time vs subscription plans (subscriptions-core
- * card, step 4; Cartbase-native, no @1click/ui ancestor). Presentational and
- * controlled: the host owns the selection and passes the chosen plan id
- * into its add-to-cart seam (`carts.addLineItem` `selling_plan_id`). The
- * SERVER prices the line — the preview here is display-only and computed
- * from the same plan fields the server applies.
- *
- * Consent note (docs/storefront/checkout.md): a plan selection later
- * requires a logged-in customer at payment (`save_payment_method` →
- * 400 `customer_required` for guests) — surface login before checkout when
- * a plan line is in the cart.
- */
-import React from "react"
-import type { StoreSellingPlan } from "../api/products"
-import { cn } from "../lib/utils"
-
-export type PurchaseOptionsLabels = {
-  title: string
-  oneTime: string
-  /** Interval nouns, singular/plural: {day: ["day","days"], …} */
-  every: string
-}
-
-const DEFAULT_LABELS: PurchaseOptionsLabels = {
-  title: "Purchase options",
-  oneTime: "One-time purchase",
-  every: "Every",
-}
-
-/** Display-only mirror of the server's plan pricing (the server is truth). */
-export function previewPlanPrice(plan: StoreSellingPlan, basePrice: number): number {
-  if (plan.pricing_type === "percent" && plan.pricing_value != null) {
-    return Math.max(0, Math.round(basePrice * (1 - plan.pricing_value / 100) * 100) / 100)
-  }
-  if (plan.pricing_type === "fixed" && plan.pricing_value != null) {
-    return plan.pricing_value
-  }
-  return basePrice
-}
-
-export function cadenceLabel(plan: StoreSellingPlan, everyWord = "Every"): string {
-  const unit =
-    plan.interval_count === 1 ? plan.interval : `${plan.interval_count} ${plan.interval}s`
-  return `${everyWord} ${unit}`
-}
-
-type PurchaseOptionsProps = {
-  plans: StoreSellingPlan[]
-  /** Selected plan id; null = one-time. */
-  value: string | null
-  onChange: (sellingPlanId: string | null) => void
-  /** The one-time unit price (from the product's calculated price). */
-  basePrice: number
-  /** Format an amount for display (host's currency formatting). */
-  formatPrice: (amount: number) => string
-  disabled?: boolean
-  labels?: Partial<PurchaseOptionsLabels>
-  "data-testid"?: string
-}
-
-export function PurchaseOptions({
-  plans,
-  value,
-  onChange,
-  basePrice,
-  formatPrice,
-  disabled,
-  labels: labelOverrides,
-  "data-testid": dataTestId,
-}: PurchaseOptionsProps) {
-  const labels = { ...DEFAULT_LABELS, ...labelOverrides }
-  if (plans.length === 0) return null
-
-  const options: Array<{
-    id: string | null
-    title: string
-    subtitle: string | null
-    price: number
-  }> = [
-    { id: null, title: labels.oneTime, subtitle: null, price: basePrice },
-    ...plans.map((plan) => ({
-      id: plan.id,
-      title: plan.name,
-      subtitle: cadenceLabel(plan, labels.every),
-      price: previewPlanPrice(plan, basePrice),
-    })),
-  ]
-
-  return (
-    <div className="flex flex-col gap-y-3" data-testid={dataTestId}>
-      <span className="text-sm text-foreground">{labels.title}</span>
-      <div role="radiogroup" aria-label={labels.title} className="flex flex-col gap-2">
-        {options.map((opt) => {
-          const selected = value === opt.id
-          return (
-            <button
-              key={opt.id ?? "one-time"}
-              type="button"
-              role="radio"
-              aria-checked={selected}
-              onClick={() => onChange(opt.id)}
-              disabled={disabled}
-              className={cn(
-                "border border-border bg-muted rounded-lg p-3 flex items-center justify-between gap-3 text-left",
-                {
-                  "border-primary": selected,
-                  "hover:shadow-sm transition-shadow ease-in-out duration-150": !selected,
-                }
-              )}
-              data-testid="purchase-option"
-            >
-              <span className="flex flex-col">
-                <span className="text-sm text-foreground">{opt.title}</span>
-                {opt.subtitle && (
-                  <span className="text-xs text-muted-foreground">{opt.subtitle}</span>
-                )}
-              </span>
-              <span className="text-sm text-foreground whitespace-nowrap">
-                {formatPrice(opt.price)}
-              </span>
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
+"use client"
+
+/**
+ * PDP purchase options — one-time vs subscription plans (subscriptions-core
+ * card, step 4; Cartbase-native, no @1click/ui ancestor). Presentational and
+ * controlled: the host owns the selection and passes the chosen plan id
+ * into its add-to-cart seam (`carts.addLineItem` `selling_plan_id`). The
+ * SERVER prices the line — the preview here is display-only and computed
+ * from the same plan fields the server applies.
+ *
+ * Consent note (docs/storefront/checkout.md): a plan selection later
+ * requires a logged-in customer at payment (`save_payment_method` →
+ * 400 `customer_required` for guests) — surface login before checkout when
+ * a plan line is in the cart.
+ */
+import React from "react"
+import type { StoreSellingPlan } from "../api/products"
+import { cn } from "../lib/utils"
+
+export type PurchaseOptionsLabels = {
+  title: string
+  oneTime: string
+  /** Interval nouns, singular/plural: {day: ["day","days"], …} */
+  every: string
+}
+
+const DEFAULT_LABELS: PurchaseOptionsLabels = {
+  title: "Purchase options",
+  oneTime: "One-time purchase",
+  every: "Every",
+}
+
+/** Display-only mirror of the server's plan pricing (the server is truth). */
+export function previewPlanPrice(plan: StoreSellingPlan, basePrice: number): number {
+  if (plan.pricing_type === "percent" && plan.pricing_value != null) {
+    return Math.max(0, Math.round(basePrice * (1 - plan.pricing_value / 100) * 100) / 100)
+  }
+  if (plan.pricing_type === "fixed" && plan.pricing_value != null) {
+    return plan.pricing_value
+  }
+  return basePrice
+}
+
+export function cadenceLabel(plan: StoreSellingPlan, everyWord = "Every"): string {
+  const unit =
+    plan.interval_count === 1 ? plan.interval : `${plan.interval_count} ${plan.interval}s`
+  return `${everyWord} ${unit}`
+}
+
+type PurchaseOptionsProps = {
+  plans: StoreSellingPlan[]
+  /** Selected plan id; null = one-time. */
+  value: string | null
+  onChange: (sellingPlanId: string | null) => void
+  /** The one-time unit price (from the product's calculated price). */
+  basePrice: number
+  /** Format an amount for display (host's currency formatting). */
+  formatPrice: (amount: number) => string
+  disabled?: boolean
+  labels?: Partial<PurchaseOptionsLabels>
+  "data-testid"?: string
+}
+
+export function PurchaseOptions({
+  plans,
+  value,
+  onChange,
+  basePrice,
+  formatPrice,
+  disabled,
+  labels: labelOverrides,
+  "data-testid": dataTestId,
+}: PurchaseOptionsProps) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides }
+  if (plans.length === 0) return null
+
+  const options: Array<{
+    id: string | null
+    title: string
+    subtitle: string | null
+    price: number
+  }> = [
+    { id: null, title: labels.oneTime, subtitle: null, price: basePrice },
+    ...plans.map((plan) => ({
+      id: plan.id,
+      title: plan.name,
+      subtitle: cadenceLabel(plan, labels.every),
+      price: previewPlanPrice(plan, basePrice),
+    })),
+  ]
+
+  return (
+    <div className="flex flex-col gap-y-3" data-testid={dataTestId}>
+      <span className="text-sm text-foreground">{labels.title}</span>
+      <div role="radiogroup" aria-label={labels.title} className="flex flex-col gap-2">
+        {options.map((opt) => {
+          const selected = value === opt.id
+          return (
+            <button
+              key={opt.id ?? "one-time"}
+              type="button"
+              role="radio"
+              aria-checked={selected}
+              onClick={() => onChange(opt.id)}
+              disabled={disabled}
+              className={cn(
+                "border border-border bg-muted rounded-lg p-3 flex items-center justify-between gap-3 text-left",
+                {
+                  "border-primary": selected,
+                  "hover:shadow-sm transition-shadow ease-in-out duration-150": !selected,
+                }
+              )}
+              data-testid="purchase-option"
+            >
+              <span className="flex flex-col">
+                <span className="text-sm text-foreground">{opt.title}</span>
+                {opt.subtitle && (
+                  <span className="text-xs text-muted-foreground">{opt.subtitle}</span>
+                )}
+              </span>
+              <span className="text-sm text-foreground whitespace-nowrap">
+                {formatPrice(opt.price)}
+              </span>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}