@cartbase/storefront 0.1.0

package/src/products/index.ts

@@ -0,0 +1,44 @@
+/**
+ * @cartbase/storefront — products family barrel. Prefer subpath imports
+ * (`@cartbase/storefront/products/product-actions`) in apps; the barrel exists
+ * for convenience and for the extra pure module (variant-matching).
+ */
+export { ProductLabelsProvider, useProductLabels } from "./context"
+export { defaultProductLabels, type ProductLabels } from "./labels"
+export { bulgarianProductLabels } from "./labels-bg"
+
+export {
+  optionsAsKeymap,
+  optionsMatch,
+  findMatchingVariant,
+  type OptionChoices,
+  type VariantOptionLike,
+} from "./variant-matching"
+
+export { Thumbnail, type ThumbnailProps } from "./thumbnail"
+export { PreviewPrice } from "./preview-price"
+export { ProductPrice } from "./product-price"
+export { OptionSelect, type OptionSelectProps } from "./option-select"
+// subscriptions-core step 4 — one-time vs plan purchase options.
+export {
+  PurchaseOptions,
+  previewPlanPrice,
+  cadenceLabel,
+  type PurchaseOptionsLabels,
+} from "./purchase-options"
+export { ImageGallery, type ImageGalleryProps } from "./image-gallery"
+export {
+  ProductActions,
+  type ProductActionsProps,
+  type AddToCartInput,
+} from "./product-actions"
+export { MobileActions, type MobileActionsProps } from "./mobile-actions"
+export { ProductTabs } from "./product-tabs"
+export { ProductInfo, type ProductInfoProps } from "./product-info"
+export { ProductPreview, type ProductPreviewProps } from "./product-preview"
+export { RelatedProducts, type RelatedProductsProps } from "./related-products"
+export {
+  ProductActionsWrapper,
+  type ProductActionsWrapperProps,
+} from "./product-actions-wrapper"
+export { ProductTemplate, type ProductTemplateProps } from "./product-template"

package/src/products/labels-bg.ts

@@ -0,0 +1,35 @@
+/**
+ * Bulgarian product labels — ported from
+ * `@1click/ui/src/products/labels-bg.ts` (v2.3.1) unchanged. Typed against
+ * the full `ProductLabels` shape so a missing translation is a compile
+ * error, never silent English fallback.
+ */
+import type { ProductLabels } from "./labels"
+
+export const bulgarianProductLabels: ProductLabels = {
+  selectOption: "Изберете",
+  selectVariant: "Изберете вариант",
+  outOfStock: "Изчерпан",
+  addToCart: "Добави в кошницата",
+  from: "От",
+  original: "Оригинална цена:",
+  productInformation: "Информация за продукта",
+  shippingAndReturns: "Доставка и връщане",
+  material: "Материал",
+  countryOfOrigin: "Произход",
+  type: "Тип",
+  weight: "Тегло",
+  dimensions: "Размери",
+  fastDelivery: "Бърза доставка",
+  fastDeliveryDescription:
+    "Вашата пратка ще пристигне в рамките на 3-5 работни дни до офис на куриер или до вашия адрес.",
+  simpleExchanges: "Лесна замяна",
+  simpleExchangesDescription:
+    "Размерът не е точен? Без проблем — ще заменим продукта с нов.",
+  easyReturns: "Лесно връщане",
+  easyReturnsDescription:
+    "Просто върнете продукта и ще ви възстановим парите. Без въпроси — ще направим всичко възможно връщането да бъде безпроблемно.",
+  relatedProducts: "Подобни продукти",
+  relatedProductsDescription:
+    "Може да ви заинтересуват и тези продукти.",
+}

package/src/products/labels.ts

@@ -0,0 +1,57 @@
+/**
+ * Product-family label map — ported from `@1click/ui/src/products/labels.ts`
+ * (v2.3.1) unchanged. i18n discipline: components read labels only through
+ * `useProductLabels()` (context) or an explicit `labels` prop merge — no
+ * hardcoded copy in components.
+ */
+export type ProductLabels = {
+  selectOption: string
+  selectVariant: string
+  outOfStock: string
+  addToCart: string
+  from: string
+  original: string
+  productInformation: string
+  shippingAndReturns: string
+  material: string
+  countryOfOrigin: string
+  type: string
+  weight: string
+  dimensions: string
+  fastDelivery: string
+  fastDeliveryDescription: string
+  simpleExchanges: string
+  simpleExchangesDescription: string
+  easyReturns: string
+  easyReturnsDescription: string
+  relatedProducts: string
+  relatedProductsDescription: string
+}
+
+export const defaultProductLabels: ProductLabels = {
+  selectOption: "Select",
+  selectVariant: "Select variant",
+  outOfStock: "Out of stock",
+  addToCart: "Add to cart",
+  from: "From",
+  original: "Original:",
+  productInformation: "Product Information",
+  shippingAndReturns: "Shipping & Returns",
+  material: "Material",
+  countryOfOrigin: "Country of origin",
+  type: "Type",
+  weight: "Weight",
+  dimensions: "Dimensions",
+  fastDelivery: "Fast delivery",
+  fastDeliveryDescription:
+    "Your package will arrive in 3-5 business days at your pick up location or in the comfort of your home.",
+  simpleExchanges: "Simple exchanges",
+  simpleExchangesDescription:
+    "Is the fit not quite right? No worries - we'll exchange your product for a new one.",
+  easyReturns: "Easy returns",
+  easyReturnsDescription:
+    "Just return your product and we'll refund your money. No questions asked – we'll do our best to make sure your return is hassle-free.",
+  relatedProducts: "Related products",
+  relatedProductsDescription:
+    "You might also want to check out these products.",
+}

package/src/products/mobile-actions.tsx

@@ -0,0 +1,180 @@
+"use client"
+
+/**
+ * Mobile sticky add-to-cart bar + options bottom sheet — ported from
+ * `@1click/ui/src/products/mobile-actions.tsx` (v2.3.1). Data seam:
+ * `HttpTypes.*` → barter SDK DTOs; everything else (layout, z-index
+ * layering above the cart drawer, morphing show/hide transition) unchanged.
+ * Pure-props component — the add flow lives in `ProductActions`.
+ */
+import React, { useMemo } from "react"
+import { ChevronDown, X } from "lucide-react"
+
+import type { StoreProduct, StoreProductVariant } from "../api/products"
+import { cn } from "../lib/utils"
+import { getProductPrice } from "../lib/get-product-price"
+import { isSimpleProduct } from "../lib/product"
+import useToggleState from "../lib/hooks/use-toggle-state"
+import { Button } from "../primitives/ui/button"
+import { useProductLabels } from "./context"
+import { OptionSelect } from "./option-select"
+
+type MobileActionsProps = {
+  product: StoreProduct
+  variant?: StoreProductVariant
+  options: Record<string, string | undefined>
+  updateOptions: (optionId: string, value: string) => void
+  inStock?: boolean
+  handleAddToCart: () => void
+  isAdding?: boolean
+  show: boolean
+  optionsDisabled: boolean
+}
+
+const MobileActions: React.FC<MobileActionsProps> = ({
+  product,
+  variant,
+  options,
+  updateOptions,
+  inStock,
+  handleAddToCart,
+  isAdding,
+  show,
+  optionsDisabled,
+}) => {
+  const labels = useProductLabels()
+  const { state, open, close } = useToggleState()
+
+  const price = getProductPrice({
+    product,
+    variantId: variant?.id,
+  })
+
+  const selectedPrice = useMemo(() => {
+    if (!price) return null
+    const { variantPrice, cheapestPrice } = price
+    return variantPrice || cheapestPrice || null
+  }, [price])
+
+  const isSimple = isSimpleProduct(product)
+
+  return (
+    <>
+      <div
+        className={cn("lg:hidden inset-x-0 bottom-0 fixed z-50", {
+          "pointer-events-none": !show,
+        })}
+      >
+        <div
+          className={cn(
+            "bg-card flex flex-col gap-y-3 justify-center items-center p-4 h-full w-full border-t border-border transition-all duration-300",
+            show ? "opacity-100 translate-y-0" : "opacity-0 translate-y-full"
+          )}
+          data-testid="mobile-actions"
+        >
+          <div className="flex items-center gap-x-2">
+            <span className="text-foreground" data-testid="mobile-title">
+              {product.title}
+            </span>
+            <span className="text-muted-foreground">—</span>
+            {selectedPrice ? (
+              <div className="flex items-end gap-x-2 text-foreground">
+                {selectedPrice.price_type === "sale" && (
+                  <span className="line-through text-sm text-muted-foreground">
+                    {selectedPrice.original_price}
+                  </span>
+                )}
+                <span
+                  className={cn({
+                    "text-primary": selectedPrice.price_type === "sale",
+                  })}
+                >
+                  {selectedPrice.calculated_price}
+                </span>
+              </div>
+            ) : (
+              <div />
+            )}
+          </div>
+          <div
+            className={cn("grid w-full gap-x-4", {
+              "grid-cols-2": !isSimple,
+              "grid-cols-1": isSimple,
+            })}
+          >
+            {!isSimple && (
+              <Button
+                onClick={open}
+                variant="outline"
+                className="w-full"
+                data-testid="mobile-actions-button"
+              >
+                <div className="flex items-center justify-between w-full">
+                  <span>
+                    {variant
+                      ? Object.values(options).join(" / ")
+                      : labels.selectVariant}
+                  </span>
+                  <ChevronDown className="w-4 h-4" />
+                </div>
+              </Button>
+            )}
+            <Button
+              onClick={handleAddToCart}
+              disabled={!inStock || !variant}
+              className="w-full"
+              data-testid="mobile-cart-button"
+            >
+              {isAdding
+                ? "..."
+                : !variant
+                  ? labels.selectVariant
+                  : !inStock
+                    ? labels.outOfStock
+                    : labels.addToCart}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {state && (
+        <div className="fixed inset-0 z-[75]">
+          <div
+            className="fixed inset-0 bg-foreground/75 backdrop-blur-sm"
+            onClick={close}
+          />
+          <div className="fixed bottom-0 inset-x-0">
+            <div className="w-full flex justify-end pr-6 mb-4">
+              <button
+                onClick={close}
+                className="bg-card w-12 h-12 rounded-full text-foreground flex justify-center items-center"
+                data-testid="close-modal-button"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="bg-card px-6 py-12 rounded-t-2xl">
+              {(product.variants?.length ?? 0) > 1 && (
+                <div className="flex flex-col gap-y-6">
+                  {(product.options || []).map((option) => (
+                    <div key={option.id}>
+                      <OptionSelect
+                        option={option}
+                        current={options[option.id]}
+                        updateOption={updateOptions}
+                        title={option.title ?? ""}
+                        disabled={optionsDisabled}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export { MobileActions, type MobileActionsProps }

package/src/products/option-select.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+/**
+ * Option selector — ported from
+ * `@1click/ui/src/products/option-select.tsx` (v2.3.1). Data seam:
+ * `HttpTypes.StoreProductOption` → barter `StoreProductOption`
+ * (`@cartbase/storefront/api/products`; `values` is present on
+ * `product.options[]`, which is what this component receives).
+ */
+import React from "react"
+import type { StoreProductOption } from "../api/products"
+import { cn } from "../lib/utils"
+import { useProductLabels } from "./context"
+
+type OptionSelectProps = {
+  option: StoreProductOption
+  current: string | undefined
+  updateOption: (optionId: string, value: string) => void
+  title: string
+  disabled: boolean
+  "data-testid"?: string
+}
+
+const OptionSelect: React.FC<OptionSelectProps> = ({
+  option,
+  current,
+  updateOption,
+  title,
+  "data-testid": dataTestId,
+  disabled,
+}) => {
+  const labels = useProductLabels()
+  const filteredOptions = (option.values ?? []).map((v) => v.value)
+
+  return (
+    <div className="flex flex-col gap-y-3">
+      <span className="text-sm text-foreground">
+        {labels.selectOption} {title}
+      </span>
+      <div
+        className="flex flex-wrap justify-between gap-2"
+        data-testid={dataTestId}
+      >
+        {filteredOptions.map((v) => (
+          <button
+            onClick={() => updateOption(option.id, v!)}
+            key={v}
+            className={cn(
+              "border border-border bg-muted text-sm h-10 rounded-lg p-2 flex-1",
+              {
+                "border-primary": v === current,
+                "hover:shadow-sm transition-shadow ease-in-out duration-150":
+                  v !== current,
+              }
+            )}
+            disabled={disabled}
+            data-testid="option-button"
+          >
+            {v}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export { OptionSelect, type OptionSelectProps }

package/src/products/preview-price.tsx

@@ -0,0 +1,36 @@
+/**
+ * Preview (card) price — ported from
+ * `@1click/ui/src/products/preview-price.tsx` (v2.3.1) unchanged. Renders a
+ * pre-computed `VariantPrice` (from `lib/get-product-price`, which reads the
+ * server-computed `variant.calculated_price` — barter's flat
+ * `price_list_type` wire shape); this component never computes money.
+ */
+import { cn } from "../lib/utils"
+import type { VariantPrice } from "../lib/get-product-price"
+
+export function PreviewPrice({ price }: { price: VariantPrice }) {
+  if (!price) {
+    return null
+  }
+
+  return (
+    <>
+      {price.price_type === "sale" && (
+        <span
+          className="line-through text-muted-foreground text-sm"
+          data-testid="original-price"
+        >
+          {price.original_price}
+        </span>
+      )}
+      <span
+        className={cn("text-muted-foreground text-sm", {
+          "text-primary": price.price_type === "sale",
+        })}
+        data-testid="price"
+      >
+        {price.calculated_price}
+      </span>
+    </>
+  )
+}

package/src/products/product-actions-wrapper.tsx

@@ -0,0 +1,58 @@
+/**
+ * Fresh-price fetch wrapper for ProductActions — ported from
+ * `@1click/ui/src/products/product-actions-wrapper.tsx` (v2.3.1). Data
+ * seam: the Medusa `listProducts({id})` + region-priced fetch becomes
+ * `api/products` `retrieveProduct(idOrHandle, pricingContext)` — the PDP
+ * shell renders with the (possibly cached) product while this wrapper
+ * re-fetches `calculated_price` with the live pricing context (and the
+ * customer's Bearer JWT via the client, for group-aware B2B prices).
+ *
+ * Async server component — render inside `<Suspense>` with a disabled
+ * `<ProductActions>` fallback (see ProductTemplate).
+ */
+import type { StorefrontClient } from "../api/http"
+import type { PricingContextQuery } from "../api/types"
+import type { StoreProduct, StoreProductVariant } from "../api/products"
+import { retrieveProduct } from "../api/products"
+import { StoreApiError } from "../api/types"
+import { ProductActions, type AddToCartInput } from "./product-actions"
+
+type ProductActionsWrapperProps = {
+  client: StorefrontClient
+  /** Product id (`prod_…`) or handle. */
+  id: string
+  /** Pricing context so `calculated_price` is present for the price panel. */
+  pricingContext?: PricingContextQuery
+  addToCart: (input: AddToCartInput) => Promise<void>
+  onAddToCart?: (product: StoreProduct, variant: StoreProductVariant) => void
+  openCart?: () => void
+}
+
+export async function ProductActionsWrapper({
+  client,
+  id,
+  pricingContext,
+  addToCart,
+  onAddToCart,
+  openCart,
+}: ProductActionsWrapperProps) {
+  let product: StoreProduct
+  try {
+    const res = await retrieveProduct(client, id, pricingContext)
+    product = res.product
+  } catch (e) {
+    if (e instanceof StoreApiError && e.status === 404) return null
+    throw e
+  }
+
+  return (
+    <ProductActions
+      product={product}
+      addToCart={addToCart}
+      onAddToCart={onAddToCart}
+      openCart={openCart}
+    />
+  )
+}
+
+export { type ProductActionsWrapperProps }