@cartbase/storefront 0.20.0 → 0.21.0

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>
+  )
+}

package/src/products/sets.ts

@@ -1,110 +1,110 @@
-/**
- * SETS: what a set holds, and which sets hold a product.
- *
- * A set on Cartbase is an inventory kit, Medusa's model: the set's variant
- * draws on the stock items of the products inside it, and the product read
- * hands those links out when asked with `fields: SET_FIELDS`
- * (`listProducts`, `retrieveProduct`). Every stock item is born with its own
- * variant's SKU, so a link's owner is the linked variant, of another
- * product, whose SKU is the item's. These are the two walks a cart makes:
- * a set's line shows the products inside it, and a product's line offers
- * the sets that contain it. Pure module, no React, no network.
- */
-import type {
-  StoreInventoryItemLink,
-  StoreInventoryLinkedVariant,
-  StoreProduct,
-  StoreProductVariant,
-} from "../api/products"
-
-/** The `fields` value that makes a product read carry its kit links. */
-export const SET_FIELDS = [
-  "*variants.inventory_items",
-  "*variants.inventory_items.inventory",
-  "*variants.inventory_items.inventory.variants",
-  "*variants.inventory_items.inventory.variants.product",
-].join(",")
-
-/** A product inside a set, and how many of it the set holds. */
-export interface SetPart {
-  productId: string
-  variantId: string
-  title: string
-  handle: string
-  thumbnail: string | null
-  quantity: number
-}
-
-/** The product a stock item belongs to: the other product's variant carrying the item's SKU. */
-export function linkOwner(
-  link: StoreInventoryItemLink,
-  selfProductId: string
-): StoreInventoryLinkedVariant | null {
-  const inventory = link.inventory
-  if (!inventory?.sku) return null
-  return (
-    inventory.variants.find(
-      (linked) => linked.product_id !== selfProductId && linked.sku === inventory.sku
-    ) ?? null
-  )
-}
-
-/**
- * What a variant holds when it is a set: the products whose stock it draws
- * on, in the merchant's order. Empty for a product sold on its own stock,
- * and for a read made without `SET_FIELDS`.
- */
-export function setContents(
-  product: Pick<StoreProduct, "id">,
-  variant: Pick<StoreProductVariant, "inventory_items">
-): SetPart[] {
-  return (variant.inventory_items ?? []).flatMap((link) => {
-    const owner = linkOwner(link, product.id)
-    if (!owner?.product) return []
-    return [
-      {
-        productId: owner.product.id,
-        variantId: owner.id,
-        title: owner.product.title,
-        handle: owner.product.handle,
-        thumbnail: owner.product.thumbnail,
-        quantity: Number(link.required_quantity) || 1,
-      },
-    ]
-  })
-}
-
-/** Every set variant among these products, keyed by variant id, with what it holds. */
-export function setContentsByVariant(
-  products: Array<Pick<StoreProduct, "id"> & { variants?: Array<Pick<StoreProductVariant, "id" | "inventory_items">> | null }>
-): Record<string, SetPart[]> {
-  const byVariant: Record<string, SetPart[]> = {}
-  for (const product of products) {
-    for (const variant of product.variants ?? []) {
-      const parts = setContents(product, variant)
-      if (parts.length) byVariant[variant.id] = parts
-    }
-  }
-  return byVariant
-}
-
-/**
- * The products that hold this variant's own stock item: the sets it is in.
- * Ids of other products, each once; empty when the read carried no kit
- * links or the variant has no SKU.
- */
-export function setsContaining(
-  product: Pick<StoreProduct, "id">,
-  variant: Pick<StoreProductVariant, "sku" | "inventory_items">
-): string[] {
-  if (!variant.sku) return []
-  const found = new Set<string>()
-  for (const link of variant.inventory_items ?? []) {
-    const inventory = link.inventory
-    if (!inventory || inventory.sku !== variant.sku) continue
-    for (const linked of inventory.variants) {
-      if (linked.product_id !== product.id) found.add(linked.product_id)
-    }
-  }
-  return [...found]
-}
+/**
+ * SETS: what a set holds, and which sets hold a product.
+ *
+ * A set on Cartbase is an inventory kit, Medusa's model: the set's variant
+ * draws on the stock items of the products inside it, and the product read
+ * hands those links out when asked with `fields: SET_FIELDS`
+ * (`listProducts`, `retrieveProduct`). Every stock item is born with its own
+ * variant's SKU, so a link's owner is the linked variant, of another
+ * product, whose SKU is the item's. These are the two walks a cart makes:
+ * a set's line shows the products inside it, and a product's line offers
+ * the sets that contain it. Pure module, no React, no network.
+ */
+import type {
+  StoreInventoryItemLink,
+  StoreInventoryLinkedVariant,
+  StoreProduct,
+  StoreProductVariant,
+} from "../api/products"
+
+/** The `fields` value that makes a product read carry its kit links. */
+export const SET_FIELDS = [
+  "*variants.inventory_items",
+  "*variants.inventory_items.inventory",
+  "*variants.inventory_items.inventory.variants",
+  "*variants.inventory_items.inventory.variants.product",
+].join(",")
+
+/** A product inside a set, and how many of it the set holds. */
+export interface SetPart {
+  productId: string
+  variantId: string
+  title: string
+  handle: string
+  thumbnail: string | null
+  quantity: number
+}
+
+/** The product a stock item belongs to: the other product's variant carrying the item's SKU. */
+export function linkOwner(
+  link: StoreInventoryItemLink,
+  selfProductId: string
+): StoreInventoryLinkedVariant | null {
+  const inventory = link.inventory
+  if (!inventory?.sku) return null
+  return (
+    inventory.variants.find(
+      (linked) => linked.product_id !== selfProductId && linked.sku === inventory.sku
+    ) ?? null
+  )
+}
+
+/**
+ * What a variant holds when it is a set: the products whose stock it draws
+ * on, in the merchant's order. Empty for a product sold on its own stock,
+ * and for a read made without `SET_FIELDS`.
+ */
+export function setContents(
+  product: Pick<StoreProduct, "id">,
+  variant: Pick<StoreProductVariant, "inventory_items">
+): SetPart[] {
+  return (variant.inventory_items ?? []).flatMap((link) => {
+    const owner = linkOwner(link, product.id)
+    if (!owner?.product) return []
+    return [
+      {
+        productId: owner.product.id,
+        variantId: owner.id,
+        title: owner.product.title,
+        handle: owner.product.handle,
+        thumbnail: owner.product.thumbnail,
+        quantity: Number(link.required_quantity) || 1,
+      },
+    ]
+  })
+}
+
+/** Every set variant among these products, keyed by variant id, with what it holds. */
+export function setContentsByVariant(
+  products: Array<Pick<StoreProduct, "id"> & { variants?: Array<Pick<StoreProductVariant, "id" | "inventory_items">> | null }>
+): Record<string, SetPart[]> {
+  const byVariant: Record<string, SetPart[]> = {}
+  for (const product of products) {
+    for (const variant of product.variants ?? []) {
+      const parts = setContents(product, variant)
+      if (parts.length) byVariant[variant.id] = parts
+    }
+  }
+  return byVariant
+}
+
+/**
+ * The products that hold this variant's own stock item: the sets it is in.
+ * Ids of other products, each once; empty when the read carried no kit
+ * links or the variant has no SKU.
+ */
+export function setsContaining(
+  product: Pick<StoreProduct, "id">,
+  variant: Pick<StoreProductVariant, "sku" | "inventory_items">
+): string[] {
+  if (!variant.sku) return []
+  const found = new Set<string>()
+  for (const link of variant.inventory_items ?? []) {
+    const inventory = link.inventory
+    if (!inventory || inventory.sku !== variant.sku) continue
+    for (const linked of inventory.variants) {
+      if (linked.product_id !== product.id) found.add(linked.product_id)
+    }
+  }
+  return [...found]
+}

package/src/products/variant-matching.ts

@@ -1,71 +1,71 @@
-/**
- * Pure variant-matching logic — extracted from
- * `@1click/ui/src/products/product-actions.tsx` (v2.3.1) so the
- * option-choice → variant resolution is testable without React
- * (tests/unit/storefront-catalog.test.ts).
- *
- * Data-seam translation: Medusa served `variant.options[]` as flat
- * `{option_id, value}` rows; Cartbase serves option-value LINKS
- * (`{value: {option_id, value, option}}` — see
- * `@cartbase/storefront/api/products` `StoreVariantOptionValueLink`).
- * `optionsAsKeymap` reads the Cartbase link shape (null-safe) and falls back
- * to the flat Medusa row shape so both wire formats resolve identically.
- */
-
-/** Either Cartbase's option-value link or Medusa's flat option-value row. */
-export type VariantOptionLike =
-  | {
-      option_id?: string
-      value?: string | { option_id: string; value: string } | null
-    }
-  | null
-
-/** Chosen options on a PDP: option_id → chosen value (undefined = not chosen). */
-export type OptionChoices = Record<string, string | undefined>
-
-/**
- * Flatten a variant's option values into `{[option_id]: value}` for
- * comparison against the user's current choices.
- */
-export function optionsAsKeymap(
-  variantOptions: VariantOptionLike[] | null | undefined
-): Record<string, string> | undefined {
-  return variantOptions?.reduce((acc: Record<string, string>, varopt) => {
-    if (!varopt) return acc
-    const v = varopt.value
-    if (v && typeof v === "object") {
-      // Cartbase link shape: { value: { option_id, value } }
-      if (v.option_id) acc[v.option_id] = v.value
-    } else if (varopt.option_id && typeof v === "string") {
-      // Medusa flat row shape: { option_id, value }
-      acc[varopt.option_id] = v
-    }
-    return acc
-  }, {})
-}
-
-/**
- * True when the chosen options exactly cover the variant's keymap — same
- * key count, same values. Partial choices never match (the add-to-cart
- * button stays disabled until every option is picked).
- */
-export function optionsMatch(
-  a: OptionChoices,
-  b: Record<string, string> | undefined
-): boolean {
-  if (!b) return false
-  const keys = Object.keys(a)
-  if (keys.length !== Object.keys(b).length) return false
-  return keys.every((k) => a[k] === b[k])
-}
-
-/** Resolve the variant whose options exactly match the current choices. */
-export function findMatchingVariant<
-  V extends { options?: VariantOptionLike[] | null }
->(
-  variants: V[] | null | undefined,
-  options: OptionChoices
-): V | undefined {
-  if (!variants || variants.length === 0) return undefined
-  return variants.find((v) => optionsMatch(options, optionsAsKeymap(v.options)))
-}
+/**
+ * Pure variant-matching logic — extracted from
+ * `@1click/ui/src/products/product-actions.tsx` (v2.3.1) so the
+ * option-choice → variant resolution is testable without React
+ * (tests/unit/storefront-catalog.test.ts).
+ *
+ * Data-seam translation: Medusa served `variant.options[]` as flat
+ * `{option_id, value}` rows; Cartbase serves option-value LINKS
+ * (`{value: {option_id, value, option}}` — see
+ * `@cartbase/storefront/api/products` `StoreVariantOptionValueLink`).
+ * `optionsAsKeymap` reads the Cartbase link shape (null-safe) and falls back
+ * to the flat Medusa row shape so both wire formats resolve identically.
+ */
+
+/** Either Cartbase's option-value link or Medusa's flat option-value row. */
+export type VariantOptionLike =
+  | {
+      option_id?: string
+      value?: string | { option_id: string; value: string } | null
+    }
+  | null
+
+/** Chosen options on a PDP: option_id → chosen value (undefined = not chosen). */
+export type OptionChoices = Record<string, string | undefined>
+
+/**
+ * Flatten a variant's option values into `{[option_id]: value}` for
+ * comparison against the user's current choices.
+ */
+export function optionsAsKeymap(
+  variantOptions: VariantOptionLike[] | null | undefined
+): Record<string, string> | undefined {
+  return variantOptions?.reduce((acc: Record<string, string>, varopt) => {
+    if (!varopt) return acc
+    const v = varopt.value
+    if (v && typeof v === "object") {
+      // Cartbase link shape: { value: { option_id, value } }
+      if (v.option_id) acc[v.option_id] = v.value
+    } else if (varopt.option_id && typeof v === "string") {
+      // Medusa flat row shape: { option_id, value }
+      acc[varopt.option_id] = v
+    }
+    return acc
+  }, {})
+}
+
+/**
+ * True when the chosen options exactly cover the variant's keymap — same
+ * key count, same values. Partial choices never match (the add-to-cart
+ * button stays disabled until every option is picked).
+ */
+export function optionsMatch(
+  a: OptionChoices,
+  b: Record<string, string> | undefined
+): boolean {
+  if (!b) return false
+  const keys = Object.keys(a)
+  if (keys.length !== Object.keys(b).length) return false
+  return keys.every((k) => a[k] === b[k])
+}
+
+/** Resolve the variant whose options exactly match the current choices. */
+export function findMatchingVariant<
+  V extends { options?: VariantOptionLike[] | null }
+>(
+  variants: V[] | null | undefined,
+  options: OptionChoices
+): V | undefined {
+  if (!variants || variants.length === 0) return undefined
+  return variants.find((v) => optionsMatch(options, optionsAsKeymap(v.options)))
+}