@cartbase/storefront 0.1.0

package/src/checkout/company-details.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { useState, type ChangeEvent } from "react"
+
+import { Field } from "../primitives/field"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+
+/**
+ * CompanyDetails — collapsible "Company invoice" section shown under the
+ * address form. Four fields: name, VAT, MOL (responsible person), address.
+ *
+ * Ported from `@1click/ui/src/checkout/company-details.tsx` (v2.3.1)
+ * unchanged — pure form UI; the values ride `formData` and the
+ * orchestration hook persists them into `cart.metadata`
+ * (company_name/company_vat/company_mol/company_address). Barter upgrade
+ * over the @1click KNOWN_ISSUES state: the hook ALSO syncs
+ * `company_name`/`company_eik` onto the signed-in customer profile
+ * (PATCH /api/store/customers/me — first-class columns,
+ * docs/storefront/customers.md), so invoice data is no longer
+ * cart-metadata-only.
+ */
+
+type CompanyDetailsProps = {
+  formData: Record<string, string>
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  onBlur: () => void
+}
+
+export function CompanyDetails({ formData, onChange, onBlur }: CompanyDetailsProps) {
+  const labels = useCheckoutLabels()
+  const [open, setOpen] = useState(!!formData.company_name?.trim())
+
+  return (
+    <div className="mt-3">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <svg
+          className={cn(
+            "w-4 h-4 transition-transform duration-200",
+            open && "rotate-90"
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M8.25 4.5l7.5 7.5-7.5 7.5"
+          />
+        </svg>
+        {labels.companyInvoice}
+      </button>
+
+      {open && (
+        <div className="mt-3 space-y-2.5">
+          <Field
+            label={labels.companyName}
+            name="company_name"
+            value={formData.company_name ?? ""}
+            onChange={onChange}
+            onBlur={onBlur}
+          />
+          <Field
+            label={labels.companyVat}
+            name="company_vat"
+            value={formData.company_vat ?? ""}
+            onChange={onChange}
+            onBlur={onBlur}
+          />
+          <Field
+            label={labels.companyMol}
+            name="company_mol"
+            value={formData.company_mol ?? ""}
+            onChange={onChange}
+            onBlur={onBlur}
+          />
+          <Field
+            label={labels.companyAddress}
+            name="company_address"
+            value={formData.company_address ?? ""}
+            onChange={onChange}
+            onBlur={onBlur}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/checkout/compare-addresses.ts

@@ -0,0 +1,40 @@
+/**
+ * Compare two address objects for shallow equality across the canonical
+ * shipping-address fields. Returns true if every field matches.
+ *
+ * Ported from `@1click/ui/src/data/util/compare-addresses.ts` (v2.3.1)
+ * unchanged. Lives in the checkout family because the barter SDK has no
+ * data/util layer (the @1click data layer became `@cartbase/storefront/api`).
+ * Extra file beyond the pre-declared export list → exported from the
+ * family barrel only.
+ */
+
+const FIELDS = [
+  "first_name",
+  "last_name",
+  "address_1",
+  "company",
+  "postal_code",
+  "city",
+  "country_code",
+  "province",
+  "phone",
+] as const
+
+type AddressLike = Record<string, unknown> | null | undefined
+
+export default function compareAddresses(
+  address1: AddressLike,
+  address2: AddressLike
+): boolean {
+  if (address1 === address2) return true
+  if (!address1 || !address2) return false
+
+  for (const key of FIELDS) {
+    const a = (address1 as Record<string, unknown>)[key] ?? null
+    const b = (address2 as Record<string, unknown>)[key] ?? null
+    if (a !== b) return false
+  }
+
+  return true
+}

package/src/checkout/context.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { createContext, useContext, type ReactNode } from "react"
+
+import { defaultCheckoutLabels, type CheckoutLabels } from "./labels"
+
+/**
+ * CheckoutContext — supplies labels to every checkout primitive without
+ * prop drilling. Stores wrap the checkout page or their own composition
+ * with `<CheckoutProvider labels={...}>` and every primitive inside reads
+ * from context.
+ *
+ * Ported from `@1click/ui/src/checkout/context.tsx` (v2.3.1) unchanged —
+ * this module has no data seam.
+ *
+ * Unlike the cart drawer, the checkout context is labels-only. Form
+ * state, cart data, shipping methods, and payment sessions are passed
+ * through as props to `CheckoutClient` because they are request-specific.
+ */
+
+type CheckoutContextValue = {
+  labels: CheckoutLabels
+  /**
+   * Template for the post-success redirect URL after placeOrder.
+   * Substitutions:
+   *   {id}      → order.id
+   *   {country} → lowercase ISO country code from shipping_address
+   *
+   * Default: "/{country}/order/{id}/confirmed" — for stores whose
+   * URL structure includes a country segment (e.g. MindPages).
+   *
+   * Stores with flattened single-country URLs (e.g. Alenika) should
+   * pass "/order/{id}/confirmed" via CheckoutProvider.
+   */
+  orderConfirmedPath: string
+}
+
+const DEFAULT_CONFIRMED_PATH = "/{country}/order/{id}/confirmed"
+
+const CheckoutContext = createContext<CheckoutContextValue>({
+  labels: defaultCheckoutLabels,
+  orderConfirmedPath: DEFAULT_CONFIRMED_PATH,
+})
+
+export function useCheckoutLabels(): CheckoutLabels {
+  return useContext(CheckoutContext).labels
+}
+
+export function useOrderConfirmedPath(): string {
+  return useContext(CheckoutContext).orderConfirmedPath
+}
+
+export function CheckoutProvider({
+  labels: labelOverrides,
+  orderConfirmedPath,
+  children,
+}: {
+  labels?: Partial<CheckoutLabels>
+  orderConfirmedPath?: string
+  children: ReactNode
+}) {
+  const labels: CheckoutLabels = {
+    ...defaultCheckoutLabels,
+    ...labelOverrides,
+  }
+  return (
+    <CheckoutContext.Provider
+      value={{
+        labels,
+        orderConfirmedPath: orderConfirmedPath ?? DEFAULT_CONFIRMED_PATH,
+      }}
+    >
+      {children}
+    </CheckoutContext.Provider>
+  )
+}

package/src/checkout/discount-section.tsx

@@ -0,0 +1,218 @@
+"use client"
+
+import { useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import { applyPromotions, type Cart } from "../api/carts"
+import { convertToLocale } from "../lib/money"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+import { translatePromotionError } from "./promotion-error-copy"
+
+/**
+ * DiscountSection — collapsible promo-code input shown inside the order
+ * summary card. Lists currently applied promotions with their discount
+ * amount.
+ *
+ * Ported from `@1click/ui/src/checkout/discount-section.tsx` (v2.3.1) with
+ * the barter data seam:
+ *
+ *  - `applyPromotions(codes)` (Medusa js-sdk server action, full-list
+ *    replace) → `POST /api/store/carts/:id/promotions {promo_codes}` — the
+ *    barter route is ADDITIVE (upserts each code's link, then re-applies),
+ *    so only the NEW code is sent; already-applied codes stay put. The SDK
+ *    carts module ships no wrapper for this route yet, so the component
+ *    calls it through the client transport with the documented DTO
+ *    (verified against src/app/api/store/carts/[id]/promotions/route.ts).
+ *  - `cart.promotions` on the barter wire is the raw pivot embed
+ *    (`[{promotion: {..., application_method}}]`) — unwrapped here, with a
+ *    flat-row fallback should the decoration ever flatten it.
+ *  - Errors are code-first (`promotion_not_found` / `promotion_inactive` /
+ *    `promotion_misconfigured` / `promotion_unsupported_type` + cart-level
+ *    codes) via `translatePromotionError`.
+ *
+ * The route returns the freshly decorated cart; `onCartChange` hands it to
+ * the host (or the host calls `router.refresh()` in an RSC app).
+ */
+
+/** Structural shape of one applied promotion (promotions row). */
+type AppliedPromotion = {
+  id: string
+  code: string | null
+  application_method?: {
+    type?: string | null
+    value?: number | string | null
+    currency_code?: string | null
+  } | null
+}
+
+/** Unwrap the barter pivot embed; tolerate an already-flat row. */
+function extractPromotions(cart: Cart): AppliedPromotion[] {
+  const raw = (cart.promotions ?? []) as Array<Record<string, unknown>>
+  return raw
+    .map((row) =>
+      row && typeof row === "object" && "promotion" in row
+        ? (row.promotion as AppliedPromotion | null)
+        : (row as unknown as AppliedPromotion)
+    )
+    .filter((p): p is AppliedPromotion => !!p && typeof p.id === "string")
+}
+
+type DiscountSectionProps = {
+  /** The SDK transport — the promotions route is called through it. */
+  client: StorefrontClient
+  cart: Cart
+  /** Receives the decorated cart returned by a successful apply. */
+  onCartChange?: (cart: Cart) => void
+}
+
+export function DiscountSection({
+  client,
+  cart,
+  onCartChange,
+}: DiscountSectionProps) {
+  const labels = useCheckoutLabels()
+  const [code, setCode] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
+  const [open, setOpen] = useState(false)
+
+  const promotions = extractPromotions(cart)
+
+  const handleApply = async () => {
+    if (!code.trim()) return
+    setLoading(true)
+    setError("")
+    try {
+      // Additive apply — the barter route upserts the new code's link and
+      // re-applies every cart promotion; already-applied codes stay.
+      const { cart: updated } = await applyPromotions(client, cart.id, [code.trim()])
+      onCartChange?.(updated)
+      setCode("")
+    } catch (e: unknown) {
+      // Never surface the raw API error string to the shopper — map to a
+      // proper localized message (code-first, pattern fallback).
+      setError(translatePromotionError(e, { hasEmail: !!cart.email }))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-3 w-full p-4 rounded-xl border border-border bg-muted/50 hover:bg-muted transition-colors"
+      >
+        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center flex-shrink-0">
+          <svg
+            className="w-5 h-5 text-card"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
+            />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M6 6h.008v.008H6V6z"
+            />
+          </svg>
+        </div>
+        <div className="flex-1 text-left">
+          <p className="text-sm font-semibold text-foreground">
+            {labels.discountCode}
+          </p>
+          <p className="text-xs text-muted-foreground">{labels.discountSub}</p>
+        </div>
+        <span className="text-sm font-medium text-foreground flex items-center gap-1.5">
+          {labels.addCode}
+          <svg
+            className={cn(
+              "w-4 h-4 text-muted-foreground transition-transform duration-200",
+              open && "rotate-180"
+            )}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+            />
+          </svg>
+        </span>
+      </button>
+
+      {open && (
+        <div className="mt-3 flex gap-2">
+          <input
+            type="text"
+            value={code}
+            onChange={(e) => setCode(e.target.value.toUpperCase())}
+            placeholder="PROMO2024"
+            className="flex-1 h-11 px-4 text-sm bg-card border border-border rounded-xl focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
+          />
+          <button
+            type="button"
+            onClick={handleApply}
+            disabled={loading || !code.trim()}
+            className="px-5 h-11 text-sm font-semibold bg-foreground text-card rounded-xl hover:bg-foreground/90 transition-all disabled:opacity-40"
+          >
+            {labels.addCode}
+          </button>
+        </div>
+      )}
+
+      {error && <p className="text-xs text-destructive mt-2">{error}</p>}
+
+      {promotions.length > 0 && (
+        <div className="mt-3 space-y-1.5">
+          {promotions.map((p) => (
+            <div
+              key={p.id}
+              className="flex items-center justify-between px-4 py-2.5 bg-success/10 border border-success/20 rounded-lg"
+            >
+              <div className="flex items-center gap-2">
+                <svg
+                  className="w-4 h-4 text-success"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <span className="text-sm font-semibold text-success">
+                  {p.code}
+                </span>
+              </div>
+              <span className="text-sm font-medium text-success">
+                {p.application_method?.type === "percentage"
+                  ? `-${p.application_method.value}%`
+                  : p.application_method?.value && p.application_method?.currency_code
+                    ? `-${convertToLocale({
+                        amount: +p.application_method.value,
+                        currency_code: p.application_method.currency_code,
+                      })}`
+                    : ""}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}