@cartbase/storefront 0.1.0

package/src/lib/get-product-price.ts

@@ -0,0 +1,133 @@
+import { getPercentageDiff } from "./get-percentage-diff"
+import { convertToLocale } from "./money"
+
+/**
+ * Product price extraction — ported from
+ * `@1click/ui/src/lib/get-product-price.ts` (v2.3.1). The
+ * `@medusajs/types` `HttpTypes.StoreProduct` parameter is replaced by the
+ * structural shapes below so this module stays decoupled from the SDK
+ * domain modules (barter's `variant.calculated_price` is the b2b-v1
+ * pricing context documented in `@cartbase/storefront/api/types`
+ * `CalculatedPrice`, decimal EUR major units).
+ *
+ * Wire-shape note (code truth, `src/lib/products/pricing.ts`): barter serves
+ * `calculated_price.price_list_type` FLAT on the calculated_price object.
+ * The Medusa wire shape ALSO nests a `calculated_price.calculated_price`
+ * detail object carrying `price_list_type` — the original library read the
+ * nested path. `getPricesForVariant` reads the flat key first and falls
+ * back to the nested path so both shapes produce the same result.
+ */
+
+/** Structural `variant.calculated_price` shape (see api/types CalculatedPrice). */
+export type CalculatedPriceLike = {
+  calculated_amount: number
+  original_amount: number
+  currency_code: string
+  price_list_type?: string | null
+  /** Medusa-wire nested detail object (fallback path). */
+  calculated_price?: { price_list_type?: string | null } | null
+}
+
+/** Structural variant shape — any richer product-variant DTO satisfies it. */
+export type VariantWithPrice = {
+  id?: string
+  sku?: string | null
+  calculated_price?: CalculatedPriceLike | null
+}
+
+/** Structural product shape — any richer product DTO satisfies it. */
+export type ProductWithVariants = {
+  id?: string
+  variants?: VariantWithPrice[] | null
+}
+
+export type VariantPrice = {
+  calculated_price_number: number
+  calculated_price: string
+  original_price_number: number
+  original_price: string
+  currency_code: string
+  price_type: string | null | undefined
+  percentage_diff: string
+}
+
+export const getPricesForVariant = (
+  variant: VariantWithPrice | null | undefined
+): VariantPrice | null => {
+  if (!variant?.calculated_price?.calculated_amount) {
+    return null
+  }
+
+  const cp = variant.calculated_price
+  return {
+    calculated_price_number: cp.calculated_amount,
+    calculated_price: convertToLocale({
+      amount: cp.calculated_amount,
+      currency_code: cp.currency_code,
+    }),
+    original_price_number: cp.original_amount,
+    original_price: convertToLocale({
+      amount: cp.original_amount,
+      currency_code: cp.currency_code,
+    }),
+    currency_code: cp.currency_code,
+    // Flat key (barter wire shape) first — an explicit null stays null;
+    // the nested Medusa detail is the fallback only when the flat key is
+    // absent entirely (the original @1click read path).
+    price_type:
+      cp.price_list_type !== undefined
+        ? cp.price_list_type
+        : cp.calculated_price?.price_list_type,
+    percentage_diff: getPercentageDiff(cp.original_amount, cp.calculated_amount),
+  }
+}
+
+export function getProductPrice({
+  product,
+  variantId,
+}: {
+  product: ProductWithVariants
+  variantId?: string
+}) {
+  if (!product || !product.id) {
+    throw new Error("No product provided")
+  }
+
+  const cheapestPrice = (): VariantPrice | null => {
+    if (!product || !product.variants?.length) {
+      return null
+    }
+
+    const cheapestVariant = product.variants
+      .filter((v) => !!v.calculated_price)
+      .sort(
+        (a, b) =>
+          (a.calculated_price?.calculated_amount ?? 0) -
+          (b.calculated_price?.calculated_amount ?? 0)
+      )[0]
+
+    return getPricesForVariant(cheapestVariant)
+  }
+
+  const variantPrice = (): VariantPrice | null => {
+    if (!product || !variantId) {
+      return null
+    }
+
+    const variant = product.variants?.find(
+      (v) => v.id === variantId || v.sku === variantId
+    )
+
+    if (!variant) {
+      return null
+    }
+
+    return getPricesForVariant(variant)
+  }
+
+  return {
+    product,
+    cheapestPrice: cheapestPrice(),
+    variantPrice: variantPrice(),
+  }
+}

package/src/lib/hooks/use-intersection.ts

@@ -0,0 +1,30 @@
+import { type RefObject, useEffect, useState } from "react"
+
+export const useIntersection = (
+  element: RefObject<HTMLDivElement | null>,
+  rootMargin: string
+) => {
+  const [isVisible, setState] = useState(false)
+
+  useEffect(() => {
+    if (!element.current) {
+      return
+    }
+
+    const el = element.current
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0]
+        if (entry) setState(entry.isIntersecting)
+      },
+      { rootMargin }
+    )
+
+    observer.observe(el)
+
+    return () => observer.unobserve(el)
+  }, [element, rootMargin])
+
+  return isVisible
+}

package/src/lib/hooks/use-toggle-state.ts

@@ -0,0 +1,25 @@
+import { useState } from "react"
+
+export type StateType = [boolean, () => void, () => void, () => void] & {
+  state: boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+const useToggleState = (initialState = false) => {
+  const [state, setState] = useState<boolean>(initialState)
+
+  const close = () => setState(false)
+  const open = () => setState(true)
+  const toggle = () => setState((s) => !s)
+
+  const hookData = [state, open, close, toggle] as StateType
+  hookData.state = state
+  hookData.open = open
+  hookData.close = close
+  hookData.toggle = toggle
+  return hookData
+}
+
+export default useToggleState

package/src/lib/money.ts

@@ -0,0 +1,73 @@
+/**
+ * Money utilities — pure, side-effect-free currency formatting helpers.
+ *
+ * Extracted from mindpages-storefront src/lib/util/money.ts + isEmpty.ts.
+ * Used by DualPrice and any other price rendering in the library.
+ */
+
+function isEmpty(value: unknown): boolean {
+  if (value == null) return true
+  if (typeof value === "string") return value.length === 0
+  if (Array.isArray(value)) return value.length === 0
+  if (typeof value === "object") return Object.keys(value as object).length === 0
+  return false
+}
+
+export type ConvertToLocaleParams = {
+  amount: number
+  currency_code: string
+  minimumFractionDigits?: number
+  maximumFractionDigits?: number
+  locale?: string
+}
+
+/**
+ * Format a numeric amount as a localized currency string.
+ *
+ * @example
+ *   convertToLocale({ amount: 19.99, currency_code: "eur" })
+ *   // → "€19.99"
+ */
+export function convertToLocale({
+  amount,
+  currency_code,
+  minimumFractionDigits,
+  maximumFractionDigits,
+  locale = "en-US",
+}: ConvertToLocaleParams): string {
+  return currency_code && !isEmpty(currency_code)
+    ? new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: currency_code,
+        minimumFractionDigits,
+        maximumFractionDigits,
+      }).format(amount)
+    : amount.toString()
+}
+
+/**
+ * Currencies that Medusa stores WITHOUT minor units (no cent division).
+ * Used when converting between minor-unit (Medusa's internal representation)
+ * and major-unit (display) amounts.
+ */
+export const noDivisionCurrencies = [
+  "krw",
+  "jpy",
+  "vnd",
+  "clp",
+  "pyg",
+  "xaf",
+  "xof",
+  "bif",
+  "djf",
+  "gnf",
+  "kmf",
+  "mga",
+  "rwf",
+  "xpf",
+  "htg",
+  "vuv",
+  "xag",
+  "xdr",
+  "xau",
+] as const

package/src/lib/payment-constants.ts

@@ -0,0 +1,66 @@
+/**
+ * Payment provider helpers — identifier sniffing for store payment sessions.
+ *
+ * Ported from `@1click/ui/src/lib/payment-constants.ts` (v2.3.1) and
+ * translated to the barter provider-id seam (code truth:
+ * `src/lib/stripe/providers.ts isStripeProviderId` matches exactly
+ * `"pp_stripe" | "stripe"`; the accepted checkout ids are
+ * `pp_stripe | pp_cod | pp_manual` — docs/contracts/store-api.md).
+ * `pp_system_default` is the RETIRED legacy manual twin (payments-registry
+ * card): no longer provisioned, hidden from merchants, kept here only so
+ * historic orders keep rendering. The Medusa-era prefixes (`pp_stripe_*`,
+ * `pp_medusa-*`) are kept as fallbacks so components ported later keep
+ * working against either wire.
+ *
+ * Intentionally ships NO icons — stores render their own icons via their
+ * own icon set. The library stays free of icon-kit imports at this layer.
+ */
+
+/**
+ * True if the provider id is a Stripe-backed card payment provider.
+ * Barter's canonical ids first (`pp_stripe` / `stripe`), then the
+ * Medusa-era prefixes (`pp_stripe_*`, `pp_medusa-*`).
+ */
+export const isStripeLike = (providerId?: string): boolean => {
+  return Boolean(
+    providerId &&
+      (providerId === "pp_stripe" ||
+        providerId === "stripe" ||
+        providerId.startsWith("pp_stripe_") ||
+        providerId.startsWith("pp_medusa-"))
+  )
+}
+
+/** True if the provider id is PayPal. */
+export const isPaypal = (providerId?: string): boolean => {
+  return Boolean(providerId?.startsWith("pp_paypal"))
+}
+
+/**
+ * True if the provider id is an offline/manual provider: `pp_manual` (the
+ * id checkout actually charges — payments-registry card) with the retired
+ * `pp_system_default*` legacy twin as fallback for historic orders. COD is
+ * NOT manual — `pp_cod` has its own id and its own fee flow.
+ */
+export const isManual = (providerId?: string): boolean => {
+  return Boolean(
+    providerId &&
+      (providerId === "pp_manual" || providerId.startsWith("pp_system_default"))
+  )
+}
+
+export const paymentInfoMap: Record<
+  string,
+  { title: string; icon: React.JSX.Element | null }
+> = {
+  pp_stripe: { title: "Credit / debit card", icon: null },
+  pp_stripe_stripe: { title: "Credit / debit card", icon: null },
+  "pp_medusa-payments_default": { title: "Credit / debit card", icon: null },
+  "pp_stripe-ideal_stripe": { title: "iDeal", icon: null },
+  "pp_stripe-bancontact_stripe": { title: "Bancontact", icon: null },
+  pp_paypal_paypal: { title: "PayPal", icon: null },
+  pp_cod: { title: "Cash on delivery", icon: null },
+  pp_manual: { title: "Manual payment", icon: null },
+  // Retired legacy manual twin — historic orders only (payments-registry).
+  pp_system_default: { title: "Manual payment", icon: null },
+}

package/src/lib/product.ts

@@ -0,0 +1,22 @@
+/**
+ * Product predicates — ported from `@1click/ui/src/lib/product.ts` (v2.3.1);
+ * the `@medusajs/types` parameter is replaced by a structural shape so the
+ * module stays decoupled from the SDK domain modules.
+ */
+
+/** Structural product-options shape — any richer product DTO satisfies it. */
+export type ProductWithOptions = {
+  options?: Array<{ values?: Array<unknown> | null } | null> | null
+}
+
+/**
+ * A "simple" product has exactly one option with exactly one value —
+ * i.e. no real variant choice. Storefronts use this to skip the option
+ * selector and add the single variant directly.
+ */
+export const isSimpleProduct = (product: ProductWithOptions): boolean => {
+  return (
+    product.options?.length === 1 &&
+    (product.options[0]?.values?.length ?? 0) === 1
+  )
+}

package/src/lib/sort-products.ts

@@ -0,0 +1,63 @@
+/**
+ * Client-side product sorting — ported from
+ * `@1click/ui/src/lib/sort-products.ts` (v2.3.1); the `@medusajs/types`
+ * parameter is replaced by a structural shape so the module stays decoupled
+ * from the SDK domain modules.
+ *
+ * Server truth caveat (card trap): the store API's `order` query param is
+ * the authoritative sort for paginated listings — this helper is for
+ * client-side re-sorting of an already-fetched page (e.g. a small
+ * collection rendered fully client-side). It never invents pricing: it
+ * reads the server-computed `variant.calculated_price`.
+ */
+
+export type SortOptions = "price_asc" | "price_desc" | "created_at"
+
+/** Structural sortable-product shape — any richer product DTO satisfies it. */
+export type SortableProduct = {
+  created_at?: string | null
+  variants?: Array<{
+    calculated_price?: { calculated_amount?: number | null } | null
+  } | null> | null
+}
+
+interface MinPriced {
+  _minPrice?: number
+}
+
+export function sortProducts<T extends SortableProduct>(
+  products: T[],
+  sortBy: SortOptions
+): T[] {
+  const sortedProducts = [...products] as Array<T & MinPriced>
+
+  if (["price_asc", "price_desc"].includes(sortBy)) {
+    sortedProducts.forEach((product) => {
+      if (product.variants && product.variants.length > 0) {
+        product._minPrice = Math.min(
+          ...product.variants.map(
+            (variant) => variant?.calculated_price?.calculated_amount || 0
+          )
+        )
+      } else {
+        product._minPrice = Infinity
+      }
+    })
+
+    sortedProducts.sort((a, b) => {
+      const diff = (a._minPrice ?? 0) - (b._minPrice ?? 0)
+      return sortBy === "price_asc" ? diff : -diff
+    })
+  }
+
+  if (sortBy === "created_at") {
+    sortedProducts.sort((a, b) => {
+      return (
+        new Date(b.created_at ?? 0).getTime() -
+        new Date(a.created_at ?? 0).getTime()
+      )
+    })
+  }
+
+  return sortedProducts
+}

package/src/lib/store-api-error.ts

@@ -0,0 +1,36 @@
+import { StoreApiError } from "../api/types"
+
+/**
+ * storeApiError — the successor of `@1click/ui`'s `medusaError`.
+ *
+ * Normalizes any error thrown by the `@cartbase/storefront` SDK layer into a
+ * clean, user-presentable `Error` whose message starts with a capital and
+ * ends with a period — the same normalization contract the Medusa-era
+ * helper enforced, adapted to the barter error contract (`StoreApiError`
+ * with `status` + `code` + raw `body`, see `../api/types`).
+ *
+ * Always throws — never returns. Use in `.catch()` chains:
+ *
+ *   addLineItem(client, cartId, input).catch(storeApiError)
+ *
+ * Callers that need the PROGRAMMATIC surface (branching on `status` /
+ * `code`, e.g. `checkout_method_hidden`, `invalid_gift_card`) should catch
+ * `StoreApiError` directly instead — this adapter is the display-boundary
+ * normalizer, deliberately lossy about everything but the message.
+ */
+export default function storeApiError(error: unknown): never {
+  if (error instanceof StoreApiError) {
+    const message = error.message || `Store API error (${error.status})`
+    throw new Error(sentence(message))
+  }
+  if (error instanceof Error) {
+    throw new Error(sentence(error.message || "Unknown error"))
+  }
+  throw new Error("Error setting up the request: " + String(error))
+}
+
+/** Capitalize + terminal period — the medusaError display normalization. */
+function sentence(message: string): string {
+  const capitalized = message.charAt(0).toUpperCase() + message.slice(1)
+  return capitalized.endsWith(".") ? capitalized : capitalized + "."
+}

package/src/lib/utils.ts

@@ -0,0 +1,16 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+/**
+ * cn — combine and de-duplicate Tailwind class names.
+ *
+ * Standard shadcn helper used by every component in the library. Accepts
+ * strings, arrays, and conditional objects via clsx, then resolves conflicts
+ * via tailwind-merge (e.g. `px-2 px-4` → `px-4`).
+ *
+ * @example
+ *   cn("px-2 py-1", isActive && "bg-primary")
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/src/order/context.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+/**
+ * Order labels context — verbatim port of `@1click/ui/src/order/context.tsx`
+ * (v2.3.1). Wrap order pages once, override per-store copy via `labels`.
+ */
+import { createContext, useContext, type ReactNode } from "react"
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+
+const OrderLabelsContext = createContext<OrderLabels>(defaultOrderLabels)
+
+export function OrderLabelsProvider({
+  labels,
+  children,
+}: {
+  labels?: Partial<OrderLabels>
+  children: ReactNode
+}) {
+  const merged = labels
+    ? { ...defaultOrderLabels, ...labels }
+    : defaultOrderLabels
+
+  return (
+    <OrderLabelsContext.Provider value={merged}>
+      {children}
+    </OrderLabelsContext.Provider>
+  )
+}
+
+export function useOrderLabels() {
+  return useContext(OrderLabelsContext)
+}

package/src/order/index.ts

@@ -0,0 +1,63 @@
+/**
+ * @cartbase/storefront/order — order confirmation + account order views.
+ * Ported from `@1click/ui/src/order` (v2.3.1) with barter data seams; see
+ * per-module JSDoc and docs/storefront/components.md for the contracts.
+ */
+export { OrderLabelsProvider, useOrderLabels } from "./context"
+export { defaultOrderLabels, type OrderLabels } from "./labels"
+export { bulgarianOrderLabels } from "./labels-bg"
+
+export {
+  OrderConfirmationHeader,
+  type OrderConfirmationHeaderProps,
+  type OrderHeaderData,
+} from "./order-confirmation-header"
+export {
+  OrderItem,
+  displayItemFromOrderItem,
+  displayItemFromCartLine,
+  variantLabelFrom,
+  type OrderItemProps,
+  type OrderDisplayItem,
+  type CartLineLike,
+} from "./order-item"
+export { OrderItemsList, type OrderItemsListProps } from "./order-items-list"
+export {
+  OrderTotals,
+  selectOrderTotalsRows,
+  orderTotalsFromSummary,
+  type OrderTotalsProps,
+  type OrderTotalsSource,
+  type OrderTotalsRow,
+} from "./order-totals"
+export {
+  OrderAddressCard,
+  type OrderAddressCardProps,
+  type OrderContactData,
+} from "./order-address-card"
+export {
+  OrderDeliveryCard,
+  pickTrackingLabels,
+  type OrderDeliveryCardProps,
+  type OrderDeliveryData,
+  type ShippingMethodDisplay,
+  type TrackingLabel,
+} from "./order-delivery-card"
+export {
+  OrderPaymentCard,
+  resolvePaymentTitle,
+  type OrderPaymentCardProps,
+} from "./order-payment-card"
+export {
+  OrderTimeline,
+  deriveFulfillmentStatus,
+  type OrderTimelineProps,
+} from "./order-timeline"
+export {
+  OrderHelpSection,
+  type OrderHelpSectionProps,
+} from "./order-help-section"
+export {
+  OrderCompletedTemplate,
+  type OrderCompletedTemplateProps,
+} from "./order-completed-template"

package/src/order/labels-bg.ts

@@ -0,0 +1,39 @@
+import type { OrderLabels } from "./labels"
+
+/**
+ * Bulgarian order labels — the Alenika/mindpages production copy, ported
+ * from `@1click/ui/src/order/labels-bg.ts` (v2.3.1) + `tracking`.
+ */
+export const bulgarianOrderLabels: OrderLabels = {
+  orderConfirmed: "Поръчката е потвърдена",
+  confirmationSent: "Изпратихме потвърждение на",
+  orderNumber: "Поръчка",
+  orderDate: "Дата",
+  summary: "Обобщение на поръчката",
+  subtotal: "Междинна сума",
+  shipping: "Доставка",
+  discount: "Отстъпка",
+  tax: "ДДС",
+  total: "Общо",
+  codFee: "Такса наложен платеж",
+  contactInfo: "Данни за контакт",
+  delivery: "Доставка",
+  paymentMethod: "Метод на плащане",
+  paymentMethodTitles: {
+    card: "Кредитна / дебитна карта",
+    cod: "Наложен платеж",
+    manual: "Друг начин на плащане",
+    paypal: "PayPal",
+  },
+  needHelp: "Имате нужда от помощ?",
+  contactUs: "Свържете се с нас",
+  returnsExchanges: "Връщания и замени",
+  orderPlaced: "Приета",
+  processing: "Обработка",
+  shipped: "Изпратена",
+  delivered: "Доставена",
+  free: "БЕЗПЛАТНА",
+  continueShopping: "Продължи пазаруването",
+  qty: "бр.",
+  tracking: "Проследяване",
+}

package/src/order/labels.ts

@@ -0,0 +1,79 @@
+/**
+ * Order family label pack. Ported from `@1click/ui/src/order/labels.ts`
+ * (v2.3.1) unchanged, plus `tracking` — new in the barter port because the
+ * barter order surface exposes fulfillment tracking labels
+ * (`StoreOrderDetail.fulfillments[].fulfillment.labels`) that
+ * `OrderDeliveryCard` now renders.
+ */
+export type OrderLabels = {
+  orderConfirmed: string
+  confirmationSent: string
+  orderNumber: string
+  orderDate: string
+  summary: string
+  subtotal: string
+  shipping: string
+  discount: string
+  tax: string
+  total: string
+  /** Default label for the cash-on-delivery fee row. Used as the third-
+   *  level fallback when neither a per-store override nor the server's
+   *  `cod_fee_label` / fee line title is available. */
+  codFee: string
+  contactInfo: string
+  delivery: string
+  paymentMethod: string
+  paymentMethodTitles: {
+    card: string
+    cod: string
+    /** Offline manual payments (pp_manual) — NOT cash on delivery. */
+    manual: string
+    paypal: string
+  }
+  needHelp: string
+  contactUs: string
+  returnsExchanges: string
+  orderPlaced: string
+  processing: string
+  shipped: string
+  delivered: string
+  free: string
+  continueShopping: string
+  qty: string
+  /** Heading for the fulfillment tracking-numbers block (barter addition). */
+  tracking: string
+}
+
+export const defaultOrderLabels: OrderLabels = {
+  orderConfirmed: "Order confirmed",
+  confirmationSent: "We sent a confirmation to",
+  orderNumber: "Order",
+  orderDate: "Date",
+  summary: "Order summary",
+  subtotal: "Subtotal",
+  shipping: "Shipping",
+  discount: "Discount",
+  tax: "Tax",
+  total: "Total",
+  codFee: "Cash on delivery fee",
+  contactInfo: "Contact info",
+  delivery: "Delivery",
+  paymentMethod: "Payment method",
+  paymentMethodTitles: {
+    card: "Credit / debit card",
+    cod: "Cash on delivery",
+    manual: "Manual payment",
+    paypal: "PayPal",
+  },
+  needHelp: "Need help?",
+  contactUs: "Contact us",
+  returnsExchanges: "Returns & exchanges",
+  orderPlaced: "Placed",
+  processing: "Processing",
+  shipped: "Shipped",
+  delivered: "Delivered",
+  free: "FREE",
+  continueShopping: "Continue shopping",
+  qty: "qty.",
+  tracking: "Tracking",
+}