@cartbase/storefront 0.1.0

package/src/checkout/shipping-method-list.tsx

@@ -0,0 +1,335 @@
+"use client"
+
+import type { StorefrontClient } from "../api/http"
+import type { StoreShippingOption } from "../api/checkout"
+import type { BoxNowLocker } from "../api/integrations"
+import { DualPrice } from "../lib/dual-price"
+import { cn } from "../lib/utils"
+import { useCheckoutLabels } from "./context"
+import {
+  EcontOfficeSelector,
+  type EcontOffice,
+} from "./econt-office-selector"
+import { BoxNowLockerSelector } from "./boxnow-locker-selector"
+import { ErrorMessage } from "./error-message"
+
+/**
+ * CheckoutShippingMethodList — radio-style list of shipping options.
+ * When the user selects an Econt-office / BoxNow-locker option, the
+ * matching picker expands inline inside that row.
+ *
+ * Ported from `@1click/ui/src/checkout/shipping-method-list.tsx` (v2.3.1)
+ * with the barter data seam: options are `StoreShippingOption` rows from
+ * `checkout.listShippingOptions(client, {cart_id})` — rule-filtered and
+ * display-ordered SERVER-SIDE (checkout rules + `checkout_method_order`,
+ * docs/storefront/checkout.md); this component only renders what arrives.
+ * The BoxNow picker needs the SDK transport (its locker directory is a
+ * store-API call), so the `boxnow` config gains a `client`.
+ *
+ * Detection uses the stable fulfillment-option id set by the backend
+ * provider (`shipping_option.data.id`) — NOT the display name. Admins
+ * rename options freely, and Bulgarian labels overlap ("До точен адрес с
+ * ЕКОНТ" contains "еконт" but is address delivery, not office).
+ *
+ * Presentational — state + handlers come from the orchestration hook.
+ */
+
+type CheckoutShippingMethodListProps = {
+  shippingMethods: StoreShippingOption[]
+  selectedShippingMethodId: string | null
+  calculatedPricesMap: Record<string, number>
+  isLoadingPrices: boolean
+  shippingLoading: boolean
+  shippingError: string | null
+  onSelect: (id: string) => void
+  addressReady: boolean
+  currencyCode: string
+  /** Optional: Econt office state + handler for inline-expand rows */
+  econt?: {
+    detect?: (option: StoreShippingOption) => boolean
+    selectedOffice: EcontOffice | null
+    onSelectOffice: (office: EcontOffice | null) => void
+    userCity: string
+    userAddress: string
+  }
+  /** Optional: BoxNow locker state + handler for inline-expand rows */
+  boxnow?: {
+    detect?: (option: StoreShippingOption) => boolean
+    /** SDK transport for the locker-directory fetch. */
+    client: StorefrontClient
+    selectedLocker: BoxNowLocker | null
+    onSelectLocker: (locker: BoxNowLocker | null) => void
+    userCity: string
+    userAddress: string
+  }
+  /**
+   * Optional per-store carrier branding. Keyed by the stable fulfillment
+   * option id (shipping_option.data.id) — "econt-office", "boxnow-locker",
+   * etc. If a match is found, a small logo renders between the radio and
+   * the option name. Stores that don't supply a map get the unbranded
+   * (radio + text only) layout.
+   */
+  logoByFulfillmentOptionId?: Record<string, { src: string; alt: string }>
+  /** Show the shipping options as a read-only price PREVIEW before the
+   * address is entered, instead of the "enter your address" placeholder.
+   * Rows render with their names + (flat) prices + carrier logos but are
+   * non-selectable — a hint tells the shopper to enter their address to
+   * choose. For flat-priced stores this lets people see the cost up front
+   * (a common reason carts stall) without letting them pick a method that
+   * needs a city (Econt office / BoxNow locker). Default `false` keeps the
+   * classic address-gated placeholder for every existing store. */
+  previewWhenAddressNotReady?: boolean
+}
+
+// Detection uses the stable fulfillment-option id set by the backend
+// provider (shipping_option.data.id) — NOT the display name.
+const getFulfillmentOptionId = (
+  option: StoreShippingOption
+): string | null => {
+  const data = option.data as { id?: string } | undefined | null
+  return typeof data?.id === "string" ? data.id : null
+}
+
+const defaultEcontDetect = (option: StoreShippingOption): boolean => {
+  return getFulfillmentOptionId(option) === "econt-office"
+}
+
+const defaultBoxnowDetect = (option: StoreShippingOption): boolean => {
+  return getFulfillmentOptionId(option) === "boxnow-locker"
+}
+
+export function CheckoutShippingMethodList({
+  shippingMethods,
+  selectedShippingMethodId,
+  calculatedPricesMap,
+  isLoadingPrices,
+  shippingLoading,
+  shippingError,
+  onSelect,
+  addressReady,
+  currencyCode,
+  econt,
+  boxnow,
+  logoByFulfillmentOptionId,
+  previewWhenAddressNotReady = false,
+}: CheckoutShippingMethodListProps) {
+  const labels = useCheckoutLabels()
+  const detectEcont = econt?.detect ?? defaultEcontDetect
+  const detectBoxnow = boxnow?.detect ?? defaultBoxnowDetect
+
+  // Preview mode: address not filled yet, but the store wants the options
+  // shown as a read-only price preview rather than a placeholder. Rows are
+  // rendered but locked (no selection) — see `previewWhenAddressNotReady`.
+  const showPreview = !addressReady && previewWhenAddressNotReady
+  // Only the classic (non-preview) not-ready state dims + hides the list.
+  const gatePlaceholder = !addressReady && !previewWhenAddressNotReady
+
+  return (
+    <div
+      className={cn(
+        "mt-8 transition-opacity duration-300",
+        gatePlaceholder && "opacity-30 pointer-events-none select-none"
+      )}
+    >
+      <h2 className="text-lg font-semibold text-foreground mb-4 tracking-tight">
+        {labels.shippingServices}
+      </h2>
+
+      {gatePlaceholder ? (
+        <div className="p-4 bg-muted rounded-lg border border-border">
+          <p className="text-sm text-muted-foreground">{labels.deliveryDisabled}</p>
+        </div>
+      ) : shippingMethods.length === 0 ? (
+        <div className="p-4 bg-muted rounded-lg border border-border">
+          <p className="text-sm text-muted-foreground">{labels.noShippingOptions}</p>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            showPreview &&
+              "rounded-[2px] border border-dashed border-border/80 bg-muted/40 px-3.5 pt-3 pb-3.5"
+          )}
+        >
+          {showPreview && (
+            <div className="flex items-center gap-2 mb-3">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0"
+                aria-hidden="true"
+              >
+                <rect x="5" y="11" width="14" height="10" rx="2" />
+                <path d="M8 11V7a4 4 0 0 1 8 0v4" />
+              </svg>
+              <p className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+                {labels.deliveryPreviewHint}
+              </p>
+            </div>
+          )}
+          <div
+            className={cn(
+              "space-y-2",
+              showPreview &&
+                "grayscale opacity-60 pointer-events-none select-none"
+            )}
+          >
+          {shippingMethods.map((option) => {
+            // `cantCalc` fades a calculated-price option to opacity-40
+            // when its price never resolved. Critically gated on BOTH
+            // `!isLoadingPrices` AND `!shippingLoading` so we don't
+            // visually punish an option just because the user is
+            // mid-courier-switch — the in-flight switch would otherwise
+            // leave a brief window where prices are calculated=true but
+            // the new option's price hasn't landed in the map yet,
+            // making it look broken. (Barter serves flat prices today;
+            // the calculated branch is forward-compat —
+            // docs/storefront/checkout.md.)
+            const cantCalc =
+              (option.price_type as string) === "calculated" &&
+              !isLoadingPrices &&
+              !shippingLoading &&
+              typeof calculatedPricesMap[option.id] !== "number"
+            const selected = option.id === selectedShippingMethodId
+            const price =
+              option.price_type === "flat"
+                ? option.amount
+                : calculatedPricesMap[option.id]
+            const isFree = price === 0
+            const isEcontOffice = econt && detectEcont(option)
+            const isBoxnowLocker =
+              boxnow && !isEcontOffice && detectBoxnow(option)
+            const hasExpanded = selected && (isEcontOffice || isBoxnowLocker)
+            const logo = logoByFulfillmentOptionId
+              ? logoByFulfillmentOptionId[getFulfillmentOptionId(option) ?? ""]
+              : undefined
+
+            return (
+              <div
+                key={option.id}
+                className={cn(
+                  "rounded-lg border overflow-hidden transition-colors duration-150",
+                  selected
+                    ? "border-primary bg-primary/5"
+                    : "border-border bg-card hover:border-muted-foreground"
+                )}
+              >
+                <button
+                  type="button"
+                  disabled={cantCalc || shippingLoading || showPreview}
+                  onClick={showPreview ? undefined : () => onSelect(option.id)}
+                  className={cn(
+                    "flex items-center w-full px-4 py-3.5 text-left",
+                    cantCalc && "opacity-40 cursor-not-allowed",
+                    showPreview && "cursor-default"
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center flex-shrink-0 mr-3 transition-colors",
+                      selected ? "border-primary" : "border-border"
+                    )}
+                  >
+                    {selected && (
+                      <div className="w-2 h-2 rounded-full bg-primary" />
+                    )}
+                  </div>
+                  {logo && (
+                    <span
+                      className="relative flex items-center justify-center w-10 h-7 mr-3 flex-shrink-0"
+                      aria-hidden="true"
+                    >
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      <img
+                        src={logo.src}
+                        alt={logo.alt}
+                        className="max-w-full max-h-full object-contain"
+                      />
+                    </span>
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <span className="text-sm font-medium text-foreground">
+                      {option.name}
+                    </span>
+                    {selected && isEcontOffice && econt?.selectedOffice && (
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        {econt.selectedOffice.name}
+                      </p>
+                    )}
+                    {selected && isBoxnowLocker && boxnow?.selectedLocker && (
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        {boxnow.selectedLocker.title}
+                      </p>
+                    )}
+                  </div>
+                  <span
+                    className={cn(
+                      "text-sm font-semibold ml-4 flex-shrink-0",
+                      isFree ? "text-success" : "text-foreground"
+                    )}
+                  >
+                    {price !== undefined && price !== null ? (
+                      isFree ? (
+                        labels.shippingFree
+                      ) : (
+                        <DualPrice amount={price} currencyCode={currencyCode} />
+                      )
+                    ) : isLoadingPrices ? (
+                      <svg
+                        className="animate-spin w-4 h-4 text-muted-foreground"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle
+                          className="opacity-25"
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          stroke="currentColor"
+                          strokeWidth="3"
+                        />
+                        <path
+                          className="opacity-75"
+                          fill="currentColor"
+                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                        />
+                      </svg>
+                    ) : (
+                      "-"
+                    )}
+                  </span>
+                </button>
+
+                {hasExpanded && isEcontOffice && econt && (
+                  <EcontOfficeSelector
+                    userCity={econt.userCity}
+                    userAddress={econt.userAddress}
+                    selectedOffice={econt.selectedOffice}
+                    onSelect={econt.onSelectOffice}
+                  />
+                )}
+
+                {hasExpanded && isBoxnowLocker && boxnow && (
+                  <BoxNowLockerSelector
+                    client={boxnow.client}
+                    userCity={boxnow.userCity}
+                    userAddress={boxnow.userAddress}
+                    selectedLocker={boxnow.selectedLocker}
+                    onSelect={boxnow.onSelectLocker}
+                  />
+                )}
+              </div>
+            )
+          })}
+          </div>
+        </div>
+      )}
+
+      <ErrorMessage
+        error={shippingError}
+        data-testid="delivery-error-message"
+      />
+    </div>
+  )
+}

package/src/checkout/stripe-wrapper.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import { Elements, useElements } from "@stripe/react-stripe-js"
+import type {
+  Appearance,
+  Stripe,
+  StripeElementsOptions,
+} from "@stripe/stripe-js"
+import {
+  createContext,
+  useContext,
+  useEffect,
+  type ReactNode,
+} from "react"
+
+/**
+ * Stripe Elements scope — context + scoped wrapper, **deferred-intent** mode.
+ *
+ * Ported from `@1click/ui/src/checkout/stripe-wrapper.tsx` (v2.3.1)
+ * unchanged — no data seam; the PaymentIntent seam moved server-side into
+ * barter's POST /api/store/carts/:id/prepare-checkout.
+ *
+ * `<Elements>` is mounted with `mode: 'payment'`, `amount`, `currency` — NO
+ * PaymentIntent exists on the backend yet. The PI is minted at Buy click by
+ * `prepareCheckout` (idempotency key = session id, docs/storefront/
+ * checkout.md); the storefront then calls
+ * `stripe.confirmPayment({ elements, clientSecret })`.
+ *
+ * Why deferred-intent (verified against Stripe docs).
+ *
+ *   The previous eager-session model created a PaymentIntent on payment-
+ *   tab switch. Every cart-amount change rotated the PI, forcing
+ *   `<Elements>` to remount on a new client_secret and blanking the
+ *   user's typed-in card form.
+ *
+ *   Stripe's deferred-intent flow
+ *   (https://docs.stripe.com/payments/accept-a-payment-deferred) lets
+ *   `<Elements>` mount with just `mode/amount/currency`. When the
+ *   amount changes (shipping switch, COD-fee toggle), call
+ *   `elements.update({ amount })` and the iframe updates in place — no
+ *   remount, no card-form blank-out.
+ *
+ * Boolean `StripeContext` is preserved for back-compat (consumers like
+ * payment-method-list.tsx read it as `stripeReady`). It derives from the
+ * scope's `ready` flag (Stripe.js promise + valid key).
+ */
+
+// Boolean context kept for the existing `useContext(StripeContext)`
+// usage in payment-method-list.tsx and any storefront-side consumers.
+export const StripeContext = createContext(false)
+
+type StripeScopeValue = {
+  /** True when Stripe.js promise + publishable key are available. */
+  ready: boolean
+  stripePromise: Promise<Stripe | null> | null
+  /** Optimistic total in the smallest currency unit (cents/stotinki). */
+  amount: number
+  currency: string
+  appearance?: Appearance
+  fonts?: StripeElementsOptions["fonts"]
+}
+
+const StripeScopeContext = createContext<StripeScopeValue>({
+  ready: false,
+  stripePromise: null,
+  amount: 0,
+  currency: "eur",
+})
+
+export function StripeScopeProvider({
+  value,
+  children,
+}: {
+  value: StripeScopeValue
+  children: ReactNode
+}) {
+  return (
+    <StripeContext.Provider value={value.ready}>
+      <StripeScopeContext.Provider value={value}>
+        {children}
+      </StripeScopeContext.Provider>
+    </StripeContext.Provider>
+  )
+}
+
+export function useStripeScope(): StripeScopeValue {
+  return useContext(StripeScopeContext)
+}
+
+/**
+ * StripeElementsScope — wraps children in Stripe's `<Elements>` provider
+ * in deferred-intent mode. Children mount inside `<Elements>` so
+ * `useStripe()` / `useElements()` work for the payment widget AND the
+ * Buy button.
+ *
+ * Behaviour when Stripe isn't ready (no stripePromise / no key):
+ *   - default            → renders `fallback` (or null)
+ *   - `passthrough` mode → renders children directly, without `<Elements>`
+ *
+ * Use `passthrough` when wrapping a section that contains BOTH Stripe-
+ * dependent UI (PaymentElement) AND non-Stripe UI (a manual / COD
+ * branch). Without it, COD-only carts (no Stripe key) would render
+ * nothing inside the wrapper.
+ *
+ * Amount syncing: the inner `<AmountSync>` calls `elements.update({ amount })`
+ * whenever the optimistic total changes. No remount.
+ */
+export function StripeElementsScope({
+  fallback = null,
+  passthrough = false,
+  children,
+}: {
+  fallback?: ReactNode
+  passthrough?: boolean
+  children: ReactNode
+}) {
+  const { ready, stripePromise, amount, currency, appearance, fonts } =
+    useStripeScope()
+
+  if (!ready || !stripePromise) {
+    return <>{passthrough ? children : fallback}</>
+  }
+
+  // `loader: "always"` forces Elements to fetch the payment-method config
+  // up front so a config error (bad key, network) surfaces via
+  // onLoadError instead of silently failing on first interaction.
+  const options: StripeElementsOptions = {
+    mode: "payment",
+    amount,
+    currency: currency.toLowerCase(),
+    appearance,
+    fonts,
+    loader: "always",
+  }
+
+  return (
+    <Elements options={options} stripe={stripePromise}>
+      <AmountSync amount={amount} currency={currency} />
+      {children}
+    </Elements>
+  )
+}
+
+/**
+ * Empty component that calls `elements.update({ amount, currency })`
+ * whenever the props change. Stripe's `elements.update` is the
+ * documented way to push amount/currency changes into a deferred-intent
+ * `<Elements>` instance without remounting it.
+ *
+ * Reference: https://docs.stripe.com/payments/accept-a-payment-deferred
+ */
+function AmountSync({
+  amount,
+  currency,
+}: {
+  amount: number
+  currency: string
+}) {
+  const elements = useElements()
+  useEffect(() => {
+    if (!elements) return
+    elements.update({ amount, currency: currency.toLowerCase() })
+  }, [elements, amount, currency])
+  return null
+}