@cartbase/storefront 0.1.0

package/src/checkout/boxnow-locker-selector.tsx

@@ -0,0 +1,410 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import { listBoxNowLockers, type BoxNowLocker } from "../api/integrations"
+import { cn } from "../lib/utils"
+import {
+  distanceMeters,
+  formatDistance,
+  geocodeAddress,
+  normalizeForMatch,
+} from "./geocode"
+import { useCheckoutLabels } from "./context"
+
+/**
+ * BoxNowLockerSelector — full BoxNow locker picker for Bulgarian shipping.
+ *
+ * Ported from `@1click/ui/src/checkout/boxnow-locker-selector.tsx` (v2.3.1)
+ * with the barter data seam: the locker directory comes from
+ * `listBoxNowLockers(client)` (`@cartbase/storefront/api/integrations`,
+ * GET /api/store/integrations/boxnow/lockers — backend owns BoxNow API auth
+ * + the 10-min cache; docs/storefront/integrations.md). The @1click data
+ * helper returned `{ok, lockers}`; the barter SDK THROWS on 503 (not
+ * configured) / 502 (carrier failure), so the fetch wrapper catches and
+ * maps both to the same "temporarily unavailable" state. Availability
+ * should be discovered via `carriers.boxnow.lockers_url` on the
+ * integrations config instead of probing for the 503.
+ *
+ * The CHOSEN locker is client state only — the orchestration hook writes it
+ * into `carrier_metadata` (boxnow_locker_id/title/address/postal) exactly
+ * once at Buy click via prepare-checkout (docs/storefront/checkout.md).
+ *
+ * Mirrors EcontOfficeSelector's UX 1:1 (loading spinner, selected pill,
+ * "search for another" expandable, nearest-3 by haversine distance).
+ *
+ * Data shape differences from Econt handled here:
+ *  - title (not name)
+ *  - addressLine1 / addressLine2 (not address.street/num)
+ *  - postalCode (not address.city.name)
+ *  - lat / lng on the root (numbers or null — the barter route coerces
+ *    malformed carrier coordinates to null, never NaN)
+ *  - No isAPS / code / phones
+ *
+ * Edge cases (503/502/empty) show a single "временно недостъпно" message.
+ */
+
+export type { BoxNowLocker }
+
+type BoxNowLockerSelectorProps = {
+  /** The SDK transport — the locker directory is fetched through it. */
+  client: StorefrontClient
+  userCity: string
+  userAddress: string
+  selectedLocker: BoxNowLocker | null
+  onSelect: (locker: BoxNowLocker | null) => void
+}
+
+type LockersState =
+  | { status: "loading" }
+  | { status: "ready"; lockers: BoxNowLocker[] }
+  | { status: "error" }
+
+// Module-level cache so switching between shipping rows doesn't re-hit
+// the backend on every toggle. (One store per app — the storefront
+// package is mounted for a single tenant, so a per-module cache is safe.)
+let lockersCache: BoxNowLocker[] | null = null
+let lockersPromise: Promise<BoxNowLocker[] | null> | null = null
+
+async function fetchLockers(
+  client: StorefrontClient
+): Promise<BoxNowLocker[] | null> {
+  if (lockersCache) return lockersCache
+  if (lockersPromise) return lockersPromise
+
+  lockersPromise = listBoxNowLockers(client)
+    .then((res) => {
+      lockersCache = res.lockers
+      return lockersCache
+    })
+    .catch(() => {
+      // 503 boxnow-not-configured / 502 carrier failure / network error —
+      // all render the same "temporarily unavailable" state. Reset the
+      // promise so a remount can retry (the cache stays empty on failure).
+      lockersPromise = null
+      return null
+    })
+
+  return lockersPromise
+}
+
+export function BoxNowLockerSelector({
+  client,
+  userCity,
+  userAddress,
+  selectedLocker,
+  onSelect,
+}: BoxNowLockerSelectorProps) {
+  const labels = useCheckoutLabels()
+  const [lockersState, setLockersState] = useState<LockersState>({
+    status: "loading",
+  })
+  const [userCoords, setUserCoords] = useState<{
+    lat: number
+    lng: number
+  } | null>(null)
+  const [search, setSearch] = useState("")
+  const [showSearch, setShowSearch] = useState(false)
+
+  useEffect(() => {
+    setLockersState({ status: "loading" })
+    Promise.all([
+      fetchLockers(client),
+      userCity && userAddress
+        ? geocodeAddress(userCity, userAddress)
+        : Promise.resolve(null),
+    ]).then(([fetchedLockers, coords]) => {
+      if (!fetchedLockers || fetchedLockers.length === 0) {
+        setLockersState({ status: "error" })
+      } else {
+        setLockersState({ status: "ready", lockers: fetchedLockers })
+      }
+      setUserCoords(coords)
+    })
+  }, [client, userCity, userAddress])
+
+  const lockers =
+    lockersState.status === "ready" ? lockersState.lockers : []
+
+  // City-lock: every list (nearest + search) is restricted to the user's
+  // checkout city. BoxNow stores the city in addressLine2, occasionally
+  // in addressLine1 too. If the user hasn't entered a city yet, fall
+  // back to all lockers so the UI doesn't render empty on first paint.
+  //
+  // Both sides are transliterated Cyrillic→Latin so "Sofia" matches
+  // "София" and vice versa. Idempotent on already-Latin input.
+  const cityNormalized = normalizeForMatch(userCity.trim())
+  const cityLockedLockers = useMemo(() => {
+    if (!cityNormalized) return lockers
+    return lockers.filter((l) => {
+      const line1 = normalizeForMatch(l.addressLine1 ?? "")
+      const line2 = normalizeForMatch(l.addressLine2 ?? "")
+      return line2.includes(cityNormalized) || line1.includes(cityNormalized)
+    })
+  }, [lockers, cityNormalized])
+
+  const nearestLockers = useMemo(() => {
+    if (!cityLockedLockers.length) return []
+
+    const geocodedLockers = cityLockedLockers.filter(
+      (l) =>
+        typeof l.lat === "number" &&
+        typeof l.lng === "number" &&
+        !Number.isNaN(l.lat) &&
+        !Number.isNaN(l.lng)
+    )
+
+    if (userCoords && geocodedLockers.length > 0) {
+      return geocodedLockers
+        .map((l) => ({
+          locker: l,
+          distance: distanceMeters(
+            userCoords.lat,
+            userCoords.lng,
+            l.lat as number,
+            l.lng as number
+          ),
+        }))
+        .sort((a, b) => a.distance - b.distance)
+        .slice(0, 3)
+    }
+
+    // No coords available — just show the first 3 city-locked lockers.
+    return cityLockedLockers
+      .slice(0, 3)
+      .map((l) => ({ locker: l, distance: 0 }))
+  }, [cityLockedLockers, userCoords])
+
+  const searchResults = useMemo(() => {
+    if (!search.trim() || search.trim().length < 2) return []
+    // Normalize query and locker fields through Cyrillic→Latin so the
+    // user can search "Vitosha" and match "Витоша" (and vice versa).
+    const q = normalizeForMatch(search.trim())
+    // Search is also city-locked — only lockers in the user's city.
+    // Uncapped; container scrolls.
+    return cityLockedLockers.filter((l) => {
+      const title = normalizeForMatch(l.title ?? "")
+      const line1 = normalizeForMatch(l.addressLine1 ?? "")
+      const line2 = normalizeForMatch(l.addressLine2 ?? "")
+      const postal = (l.postalCode ?? "").toLowerCase()
+      return (
+        title.includes(q) ||
+        line1.includes(q) ||
+        line2.includes(q) ||
+        postal.includes(q)
+      )
+    })
+  }, [cityLockedLockers, search])
+
+  const renderLocker = useCallback(
+    (locker: BoxNowLocker, distance: number | null, isSelected: boolean) => (
+      <button
+        key={locker.id}
+        type="button"
+        onClick={() => {
+          onSelect(locker)
+          setShowSearch(false)
+          setSearch("")
+        }}
+        className={cn(
+          "flex items-start gap-3 w-full px-3.5 py-3 text-left transition-all duration-150 rounded-lg",
+          isSelected ? "bg-primary/10" : "bg-card hover:bg-muted"
+        )}
+        style={
+          isSelected
+            ? { boxShadow: "inset 0 0 0 1.5px oklch(var(--primary))" }
+            : undefined
+        }
+      >
+        <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0 mt-0.5">
+          <svg
+            className="w-4 h-4 text-muted-foreground"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
+            />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
+            />
+          </svg>
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-foreground leading-tight">
+            {locker.title}
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {locker.addressLine1}
+            {locker.addressLine2 ? `, ${locker.addressLine2}` : ""}
+            {locker.postalCode ? `, ${locker.postalCode}` : ""}
+          </p>
+        </div>
+
+        {distance !== null && distance > 0 && (
+          <span className="text-xs font-medium text-muted-foreground flex-shrink-0 mt-1">
+            {formatDistance(distance)}
+          </span>
+        )}
+      </button>
+    ),
+    [onSelect]
+  )
+
+  if (lockersState.status === "loading") {
+    return (
+      <div className="px-4 py-6 flex items-center justify-center">
+        <div className="w-5 h-5 border-2 border-border border-t-text-muted rounded-full animate-spin" />
+        <span className="ml-2 text-sm text-muted-foreground">
+          {labels.boxnowLoadingLockers}
+        </span>
+      </div>
+    )
+  }
+
+  if (lockersState.status === "error") {
+    return (
+      <div className="px-4 py-4">
+        <div className="p-3 rounded-lg bg-muted border border-border">
+          <p className="text-sm text-muted-foreground">
+            {labels.boxnowUnavailable}
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  // User's city has no lockers — explicit dead-end message so they pick
+  // a different shipping method instead of staring at silence.
+  if (cityNormalized && cityLockedLockers.length === 0 && !selectedLocker) {
+    return (
+      <div className="px-4 py-4">
+        <div className="p-3 rounded-lg bg-muted border border-border">
+          <p className="text-sm text-muted-foreground">
+            {labels.boxnowNoLockersInCity}
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="px-4 pb-4 pt-2 space-y-3">
+      {selectedLocker && (
+        <div className="flex items-center gap-2 px-3 py-2 bg-primary/10 border border-primary/30 rounded-lg">
+          <svg
+            className="w-4 h-4 text-primary flex-shrink-0"
+            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>
+          <p className="text-sm font-medium text-primary">
+            {selectedLocker.title}
+          </p>
+          <button
+            type="button"
+            onClick={() => onSelect(null)}
+            className="ml-auto text-xs text-primary hover:underline"
+          >
+            {labels.boxnowChange}
+          </button>
+        </div>
+      )}
+
+      {!selectedLocker && nearestLockers.length > 0 && (
+        <div>
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+            {labels.boxnowNearestLockers}
+          </p>
+          <div className="space-y-1.5">
+            {nearestLockers.map(({ locker, distance }) =>
+              renderLocker(locker, distance, false)
+            )}
+          </div>
+        </div>
+      )}
+
+      {!selectedLocker && (
+        <div>
+          {!showSearch ? (
+            <button
+              type="button"
+              onClick={() => setShowSearch(true)}
+              className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                />
+              </svg>
+              {labels.boxnowSearchAnother}
+            </button>
+          ) : (
+            <div>
+              <div className="relative">
+                <svg
+                  className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                  />
+                </svg>
+                <input
+                  type="text"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder={labels.boxnowSearchPlaceholder}
+                  className="w-full h-10 pl-9 pr-3 text-sm rounded-lg border border-border bg-card focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
+                  autoFocus
+                />
+              </div>
+
+              {searchResults.length > 0 && (
+                <div className="mt-2 space-y-1 max-h-[240px] overflow-y-auto">
+                  {searchResults.map((locker) =>
+                    renderLocker(locker, null, false)
+                  )}
+                </div>
+              )}
+
+              {search.trim().length >= 2 && searchResults.length === 0 && (
+                <p className="mt-2 text-xs text-muted-foreground text-center py-3">
+                  {labels.boxnowNoResults} "{search}"
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/checkout/checkout-client.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+import type { Appearance, StripeElementsOptions } from "@stripe/stripe-js"
+
+import type { StorefrontClient } from "../api/http"
+import type { Cart } from "../api/carts"
+import type { StoreShippingOption } from "../api/checkout"
+import type { StoreCustomer } from "../api/customers"
+import { CheckoutAddressForm } from "./address-form"
+import { OrderSummary } from "./order-summary"
+import { CheckoutPaymentMethodList } from "./payment-method-list"
+import { CheckoutShippingMethodList } from "./shipping-method-list"
+import { PaymentWrapper } from "./payment-wrapper"
+import {
+  useCheckoutOrchestration,
+  type CheckoutCodConfig,
+  type CheckoutLogError,
+  type PaymentProviderLike,
+} from "./use-checkout-orchestration"
+
+/**
+ * CheckoutClient — single-page checkout layout. The orchestration logic
+ * (address state, shipping select, carrier metadata, payment-tab race
+ * guards, 3DS return handling, completed-cart detection) lives in the
+ * `useCheckoutOrchestration` hook so any store with a custom layout
+ * shares the same hardened state machine and inherits future fixes
+ * automatically.
+ *
+ * Ported from `@1click/ui/src/checkout/checkout-client.tsx` (v2.3.1) with
+ * the barter data seam:
+ *
+ *  - Takes the SDK `client` — every server call (address autosave,
+ *    prepare-checkout, sync, complete, promo/gift-card apply, quantity
+ *    changes) runs through it.
+ *  - The listings arrive as SDK DTOs: `listShippingOptions` /
+ *    `listPaymentProviders` (both rule-filtered server-side) — fetch them
+ *    in the host and pass down (docs/storefront/checkout.md).
+ *  - `codConfig` = the integrations config `cod` block
+ *    (`getIntegrationsConfig(client).cod`) — the COD fee prediction is
+ *    NEVER hardcoded (docs/storefront/integrations.md).
+ *  - `onCartChange` closes the loop for summary mutations: the decorated
+ *    cart returned by promo/gift-card/quantity calls is handed up so the
+ *    host updates its cart state (`router.refresh()` in an RSC app) AND
+ *    the hook's `syncPaymentAmount` re-aligns any pending session.
+ *  - The mobile top/bottom summary bars of the @1click layout are not in
+ *    this batch's scope; the desktop-first layout stands alone and
+ *    stores compose their own mobile bars from the hook + OrderSummary.
+ */
+
+type CheckoutClientProps = {
+  /** The SDK transport — all server calls go through it. */
+  client: StorefrontClient
+  cart: Cart
+  customer: StoreCustomer | null
+  availableShippingMethods: StoreShippingOption[] | null
+  availablePaymentMethods: PaymentProviderLike[] | null
+  countryCode: string
+  /** Countries for the address form (barter regions embed none). */
+  countries?: Array<{ iso_2: string; display_name: string }>
+  paymentMethodFilter?: (
+    methods: PaymentProviderLike[] | null,
+    selectedShippingOption: StoreShippingOption | null
+  ) => PaymentProviderLike[] | null
+  /** The integrations config `cod` block — drives the optimistic COD fee. */
+  codConfig?: CheckoutCodConfig
+  /** Show the gift-card widget in the summary (default true). */
+  showGiftCards?: boolean
+  logoByFulfillmentOptionId?: Record<string, { src: string; alt: string }>
+  /** Stripe Elements appearance + fonts forwarded to PaymentWrapper. */
+  appearance?: Appearance
+  fonts?: StripeElementsOptions["fonts"]
+  /** Order-confirmed path template override (`{id}` / `{country}`). */
+  orderConfirmedPath?: string
+  /** Custom post-complete navigation (next/navigation router push). */
+  onOrderPlaced?: Parameters<
+    typeof useCheckoutOrchestration
+  >[0]["onOrderPlaced"]
+  /** Consent-gated tracking-attribution resolver (see the hook's JSDoc). */
+  resolveTrackingMetadata?: () => Record<string, unknown> | undefined
+  /** Operational-visibility sink for checkout errors. */
+  logError?: CheckoutLogError
+  /** Receives every decorated cart returned by a summary mutation. */
+  onCartChange?: (cart: Cart) => void
+}
+
+export function CheckoutClient({
+  client,
+  cart,
+  customer,
+  availableShippingMethods,
+  availablePaymentMethods,
+  countryCode,
+  countries,
+  paymentMethodFilter,
+  codConfig,
+  showGiftCards = true,
+  logoByFulfillmentOptionId,
+  appearance,
+  fonts,
+  orderConfirmedPath,
+  onOrderPlaced,
+  resolveTrackingMetadata,
+  logError,
+  onCartChange,
+}: CheckoutClientProps) {
+  const o = useCheckoutOrchestration({
+    client,
+    cart,
+    customer,
+    availableShippingMethods,
+    availablePaymentMethods,
+    countryCode,
+    countries,
+    paymentMethodFilter,
+    codConfig,
+    orderConfirmedPath,
+    onOrderPlaced,
+    resolveTrackingMetadata,
+    logError,
+  })
+
+  const buyButtonNotReady = !o.deliveryReady || !o.addressReady
+
+  // Summary mutations (promo/gift-card apply, quantity change) move the
+  // total — re-align any pending payment session in place so the Stripe
+  // client_secret survives (sync-payment-amount matrix; pre-Buy it no-ops
+  // with `no_payment_collection`). Then hand the fresh cart to the host.
+  const handleCartChange = (updated: Cart) => {
+    void o.syncPaymentAmount().catch(() => {})
+    onCartChange?.(updated)
+  }
+
+  return (
+    <PaymentWrapper
+      cart={cart}
+      amount={o.optimisticTotalCents}
+      appearance={appearance}
+      fonts={fonts}
+    >
+      <div className="max-w-[1140px] mx-auto px-5 py-8 sm:py-12">
+        <div className="flex flex-col sm:flex-row sm:justify-center gap-8 sm:gap-12">
+          {/* ═══ LEFT: FORM ════════════════════════════════════════════ */}
+          <div className="w-full sm:max-w-[480px]">
+            <CheckoutAddressForm
+              formData={o.formData}
+              onChange={o.handleFormChange}
+              onBlur={o.handleFieldBlur}
+              savedAddresses={o.addressesInRegion ?? undefined}
+              onSelectSavedAddress={o.setFormAddress}
+              countries={o.regionCountries}
+              addressInput={o.addressInput}
+              addressError={o.addressError}
+              pulseFields={o.pulseFields}
+            />
+
+            <CheckoutShippingMethodList
+              shippingMethods={o.shippingMethods}
+              selectedShippingMethodId={o.selectedShippingMethod}
+              calculatedPricesMap={o.calculatedPricesMap}
+              isLoadingPrices={o.isLoadingPrices}
+              shippingLoading={o.shippingLoading}
+              shippingError={o.shippingError}
+              onSelect={o.handleSelectShipping}
+              addressReady={o.addressReady}
+              currencyCode={cart.currency_code}
+              econt={{
+                selectedOffice: o.selectedEcontOffice,
+                onSelectOffice: o.handleSelectEcontOffice,
+                userCity: o.formData["shipping_address.city"] ?? "",
+                userAddress: o.formData["shipping_address.address_1"] ?? "",
+              }}
+              boxnow={{
+                client,
+                selectedLocker: o.selectedBoxnowLocker,
+                onSelectLocker: o.handleSelectBoxnowLocker,
+                userCity: o.formData["shipping_address.city"] ?? "",
+                userAddress: o.formData["shipping_address.address_1"] ?? "",
+              }}
+              logoByFulfillmentOptionId={logoByFulfillmentOptionId}
+            />
+
+            <CheckoutPaymentMethodList
+              cart={cart}
+              hasCard={o.hasCard}
+              hasCod={o.hasCod}
+              paymentTab={o.paymentTab}
+              onPaymentTab={o.handlePaymentTab}
+              deliveryReady={o.deliveryReady}
+              paymentError={o.paymentError}
+              onPaymentElementChange={o.handlePaymentElementChange}
+              performBuyClick={o.performBuyClick}
+              buyButtonNotReady={buyButtonNotReady}
+              buyButtonNotReadyReason={
+                !o.addressReady ? "address" : !o.deliveryReady ? "delivery" : null
+              }
+              total={o.optimisticTotal}
+              logError={logError}
+            />
+          </div>
+
+          {/* ═══ RIGHT: ORDER SUMMARY (desktop only) ═══════════════════ */}
+          <div className="hidden sm:block sm:w-[420px] flex-shrink-0">
+            <div className="sm:sticky sm:top-6">
+              <OrderSummary
+                client={client}
+                cart={o.summaryCart}
+                optimisticShippingCost={o.optimisticShippingCost}
+                onOptimisticShippingClear={() =>
+                  o.setOptimisticShippingCost(null)
+                }
+                optimisticCodFee={o.optimisticCodFee}
+                onOptimisticCodFeeClear={() => o.setOptimisticCodFee(null)}
+                showGiftCards={showGiftCards}
+                onCartChange={handleCartChange}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </PaymentWrapper>
+  )
+}