@cartbase/storefront 0.21.0 → 0.22.0

package/src/checkout/pigeon-office-selector.tsx

@@ -0,0 +1,379 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useState } from "react"
+
+import type { StorefrontClient } from "../api/http"
+import { listPigeonOffices, type PigeonOffice } from "../api/integrations"
+import { cn } from "../lib/utils"
+import {
+  distanceMeters,
+  formatDistance,
+  geocodeAddress,
+  normalizeForMatch,
+} from "./geocode"
+import { useCheckoutLabels } from "./context"
+
+/**
+ * PigeonOfficeSelector — the office picker for Pigeon Express, the third
+ * carrier with pickup points and the last one whose options a shopper could
+ * not actually choose (store-package card, 2026-09-18).
+ *
+ * It mirrors the BoxNow and Econt pickers 1:1: the loading line, the chosen
+ * point as a pill with a way to change it, the three nearest points by
+ * distance, and a search that opens on demand. The directory comes from
+ * `listPigeonOffices(client)` (GET /api/store/integrations/pigeon/offices),
+ * because Pigeon's catalogue is credentialed and the browser can never ask
+ * the carrier itself; the platform holds the answer for ten minutes.
+ *
+ * Pigeon's own shape: `name`, a real `city` field (so the city lock reads a
+ * city instead of sniffing an address line), `postal_code`, and `latitude` /
+ * `longitude`. Its id is the carrier's catalogue id and the waybill needs it
+ * verbatim.
+ *
+ * The CHOSEN point is client state only: the orchestration hook writes
+ * `pigeon_office_id` and the point's name, city and address into
+ * `carrier_metadata` at the Buy click, once, exactly as it does for the
+ * other two carriers.
+ */
+
+export type { PigeonOffice }
+
+type PigeonOfficeSelectorProps = {
+  /** The SDK transport — the point directory is fetched through it. */
+  client: StorefrontClient
+  userCity: string
+  userAddress: string
+  selectedOffice: PigeonOffice | null
+  onSelect: (office: PigeonOffice | null) => void
+}
+
+type OfficesState =
+  | { status: "loading" }
+  | { status: "ready"; offices: PigeonOffice[] }
+  | { status: "error" }
+
+// One store per app, so a module-level cache is safe: switching between
+// shipping rows must not ask the platform again.
+let officesCache: PigeonOffice[] | null = null
+let officesPromise: Promise<PigeonOffice[] | null> | null = null
+
+async function fetchOffices(
+  client: StorefrontClient
+): Promise<PigeonOffice[] | null> {
+  if (officesCache) return officesCache
+  if (officesPromise) return officesPromise
+
+  officesPromise = listPigeonOffices(client, { type: "office" })
+    .then((res) => {
+      officesCache = res.offices
+      return officesCache
+    })
+    .catch(() => {
+      // Not connected (503), the carrier refused (502), or the network
+      // failed: one "temporarily unavailable" line for all three. The
+      // promise is reset so a remount can try again.
+      officesPromise = null
+      return null
+    })
+
+  return officesPromise
+}
+
+export function PigeonOfficeSelector({
+  client,
+  userCity,
+  userAddress,
+  selectedOffice,
+  onSelect,
+}: PigeonOfficeSelectorProps) {
+  const labels = useCheckoutLabels()
+  const [officesState, setOfficesState] = useState<OfficesState>({
+    status: "loading",
+  })
+  const [userCoords, setUserCoords] = useState<{ lat: number; lng: number } | null>(
+    null
+  )
+  const [search, setSearch] = useState("")
+  const [showSearch, setShowSearch] = useState(false)
+
+  useEffect(() => {
+    setOfficesState({ status: "loading" })
+    Promise.all([
+      fetchOffices(client),
+      userCity && userAddress
+        ? geocodeAddress(userCity, userAddress)
+        : Promise.resolve(null),
+    ]).then(([fetched, coords]) => {
+      if (!fetched || fetched.length === 0) {
+        setOfficesState({ status: "error" })
+      } else {
+        setOfficesState({ status: "ready", offices: fetched })
+      }
+      setUserCoords(coords)
+    })
+  }, [client, userCity, userAddress])
+
+  const offices = officesState.status === "ready" ? officesState.offices : []
+
+  // City lock: both lists are restricted to the shopper's own town, matched
+  // through the Cyrillic to Latin transliteration so "Sofia" finds "София".
+  // With no town typed yet, everything shows rather than nothing.
+  const cityNormalized = normalizeForMatch(userCity.trim())
+  const cityLockedOffices = useMemo(() => {
+    if (!cityNormalized) return offices
+    return offices.filter((o) =>
+      normalizeForMatch(o.city ?? "").includes(cityNormalized)
+    )
+  }, [offices, cityNormalized])
+
+  const nearestOffices = useMemo(() => {
+    if (!cityLockedOffices.length) return []
+
+    const located = cityLockedOffices.filter(
+      (o) =>
+        typeof o.latitude === "number" &&
+        typeof o.longitude === "number" &&
+        !Number.isNaN(o.latitude) &&
+        !Number.isNaN(o.longitude)
+    )
+
+    if (userCoords && located.length > 0) {
+      return located
+        .map((o) => ({
+          office: o,
+          distance: distanceMeters(
+            userCoords.lat,
+            userCoords.lng,
+            o.latitude as number,
+            o.longitude as number
+          ),
+        }))
+        .sort((a, b) => a.distance - b.distance)
+        .slice(0, 3)
+    }
+
+    return cityLockedOffices.slice(0, 3).map((o) => ({ office: o, distance: 0 }))
+  }, [cityLockedOffices, userCoords])
+
+  const searchResults = useMemo(() => {
+    if (!search.trim() || search.trim().length < 2) return []
+    const q = normalizeForMatch(search.trim())
+    return cityLockedOffices.filter((o) => {
+      const name = normalizeForMatch(o.name ?? "")
+      const address = normalizeForMatch(o.address ?? "")
+      const city = normalizeForMatch(o.city ?? "")
+      const postal = (o.postal_code ?? "").toLowerCase()
+      return (
+        name.includes(q) ||
+        address.includes(q) ||
+        city.includes(q) ||
+        postal.includes(q)
+      )
+    })
+  }, [cityLockedOffices, search])
+
+  const renderOffice = useCallback(
+    (office: PigeonOffice, distance: number | null, isSelected: boolean) => (
+      <button
+        key={office.id}
+        type="button"
+        onClick={() => {
+          onSelect(office)
+          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">
+            {office.name}
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {office.address}
+            {office.city ? `, ${office.city}` : ""}
+            {office.postal_code ? `, ${office.postal_code}` : ""}
+          </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 (officesState.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.pigeonLoadingOffices}
+        </span>
+      </div>
+    )
+  }
+
+  if (officesState.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.pigeonUnavailable}</p>
+        </div>
+      </div>
+    )
+  }
+
+  // The shopper's town has no Pigeon office: say so, so they choose another
+  // way instead of looking at an empty box.
+  if (cityNormalized && cityLockedOffices.length === 0 && !selectedOffice) {
+    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.pigeonNoOfficesInCity}
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="px-4 pb-4 pt-2 space-y-3">
+      {selectedOffice && (
+        <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">{selectedOffice.name}</p>
+          <button
+            type="button"
+            onClick={() => onSelect(null)}
+            className="ml-auto text-xs text-primary hover:underline"
+          >
+            {labels.pigeonChange}
+          </button>
+        </div>
+      )}
+
+      {!selectedOffice && nearestOffices.length > 0 && (
+        <div>
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+            {labels.pigeonNearestOffices}
+          </p>
+          <div className="space-y-1.5">
+            {nearestOffices.map(({ office, distance }) =>
+              renderOffice(office, distance, false)
+            )}
+          </div>
+        </div>
+      )}
+
+      {!selectedOffice && (
+        <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.pigeonSearchAnother}
+            </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.pigeonSearchPlaceholder}
+                  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((office) => renderOffice(office, null, false))}
+                </div>
+              )}
+
+              {search.trim().length >= 2 && searchResults.length === 0 && (
+                <p className="mt-2 text-xs text-muted-foreground text-center py-3">
+                  {labels.pigeonNoResults} &quot;{search}&quot;
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -2,7 +2,7 @@
 
 import type { StorefrontClient } from "../api/http"
 import type { StoreShippingOption } from "../api/checkout"
-import type { BoxNowLocker } from "../api/integrations"
+import type { BoxNowLocker, PigeonOffice } from "../api/integrations"
 import { Price } from "../lib/price"
 import { cn } from "../lib/utils"
 import { useCheckoutLabels } from "./context"
@@ -11,6 +11,14 @@ import {
   type EcontOffice,
 } from "./econt-office-selector"
 import { BoxNowLockerSelector } from "./boxnow-locker-selector"
+import { PigeonOfficeSelector } from "./pigeon-office-selector"
+import {
+  PickupPointSelector,
+  type PickupPoint,
+} from "./pickup-point-selector"
+import type { PickupPointKeys } from "../api/integrations"
+import { pickupOptionOf, type PickupOption } from "./pickup-option"
+import { fulfillmentOptionId } from "./fulfillment-option"
 import { ErrorMessage } from "./error-message"
 
 /**
@@ -62,6 +70,38 @@ type CheckoutShippingMethodListProps = {
     userCity: string
     userAddress: string
   }
+  /** Optional: Pigeon Express office state + handler for inline-expand rows */
+  pigeon?: {
+    detect?: (option: StoreShippingOption) => boolean
+    /** SDK transport for the pickup-point directory (the carrier's own
+     * catalogue is credentialed, so it is served by the platform). */
+    client: StorefrontClient
+    selectedOffice: PigeonOffice | null
+    onSelectOffice: (office: PigeonOffice | null) => void
+    userCity: string
+    userAddress: string
+  }
+  /**
+   * The pickup picker, for EVERY carrier (2026-09-18). One entry replaces
+   * the three above: the option's own id says which carrier and whether it
+   * is an office or a locker, and the platform answers for all of them
+   * through one door, so a carrier connected tomorrow opens its picker with
+   * nothing added here. The three above stay for stores that mount them;
+   * where both are given, the carrier-specific one wins for its own carrier.
+   */
+  pickup?: {
+    /** SDK transport — the catalogue is the store's answer, not the
+     * carrier's: Speedy's needs the merchant's credentials and can never be
+     * reached from a browser. */
+    client: StorefrontClient
+    selectedPoint: PickupPoint | null
+    onSelectPoint: (
+      point: PickupPoint | null,
+      keys: PickupPointKeys | 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",
@@ -81,14 +121,10 @@ type CheckoutShippingMethodListProps = {
   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
-}
+// Detection uses the destination the merchant chose on the option, never
+// its display name (fulfillment-option.ts owns where that value lives).
+const getFulfillmentOptionId = (option: StoreShippingOption): string | null =>
+  fulfillmentOptionId(option)
 
 const defaultEcontDetect = (option: StoreShippingOption): boolean => {
   return getFulfillmentOptionId(option) === "econt-office"
@@ -98,6 +134,14 @@ const defaultBoxnowDetect = (option: StoreShippingOption): boolean => {
   return getFulfillmentOptionId(option) === "boxnow-locker"
 }
 
+const defaultPigeonDetect = (option: StoreShippingOption): boolean => {
+  return getFulfillmentOptionId(option) === "pigeon-office"
+}
+
+/** Which carrier, and which kind of point, from the option's own id. */
+const detectPickup = (option: StoreShippingOption): PickupOption | null =>
+  pickupOptionOf(getFulfillmentOptionId(option))
+
 export function CheckoutShippingMethodList({
   shippingMethods,
   selectedShippingMethodId,
@@ -110,12 +154,15 @@ export function CheckoutShippingMethodList({
   currencyCode,
   econt,
   boxnow,
+  pigeon,
+  pickup,
   logoByFulfillmentOptionId,
   previewWhenAddressNotReady = false,
 }: CheckoutShippingMethodListProps) {
   const labels = useCheckoutLabels()
   const detectEcont = econt?.detect ?? defaultEcontDetect
   const detectBoxnow = boxnow?.detect ?? defaultBoxnowDetect
+  const detectPigeon = pigeon?.detect ?? defaultPigeonDetect
 
   // 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
@@ -200,7 +247,20 @@ export function CheckoutShippingMethodList({
             const isEcontOffice = econt && detectEcont(option)
             const isBoxnowLocker =
               boxnow && !isEcontOffice && detectBoxnow(option)
-            const hasExpanded = selected && (isEcontOffice || isBoxnowLocker)
+            const isPigeonOffice =
+              pigeon && !isEcontOffice && !isBoxnowLocker && detectPigeon(option)
+            // Any option that delivers to a point, whatever the carrier
+            // (2026-09-18). The three flags above are the same question asked
+            // per carrier, which is why Speedy had no picker; this one reads
+            // the option's own id, so a carrier connected tomorrow opens its
+            // picker with no line added here. It yields to a legacy picker
+            // when the store still mounts one for that carrier.
+            const pickupOption = pickup ? detectPickup(option) : null
+            const isPickup =
+              !!pickupOption && !isEcontOffice && !isBoxnowLocker && !isPigeonOffice
+            const hasExpanded =
+              selected &&
+              (isEcontOffice || isBoxnowLocker || isPigeonOffice || isPickup)
             const logo = logoByFulfillmentOptionId
               ? logoByFulfillmentOptionId[getFulfillmentOptionId(option) ?? ""]
               : undefined
@@ -262,6 +322,16 @@ export function CheckoutShippingMethodList({
                         {boxnow.selectedLocker.title}
                       </p>
                     )}
+                    {selected && isPigeonOffice && pigeon?.selectedOffice && (
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        {pigeon.selectedOffice.name}
+                      </p>
+                    )}
+                    {selected && isPickup && pickup?.selectedPoint && (
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        {pickup.selectedPoint.name}
+                      </p>
+                    )}
                   </div>
                   <span
                     className={cn(
@@ -319,6 +389,28 @@ export function CheckoutShippingMethodList({
                     onSelect={boxnow.onSelectLocker}
                   />
                 )}
+
+                {hasExpanded && isPigeonOffice && pigeon && (
+                  <PigeonOfficeSelector
+                    client={pigeon.client}
+                    userCity={pigeon.userCity}
+                    userAddress={pigeon.userAddress}
+                    selectedOffice={pigeon.selectedOffice}
+                    onSelect={pigeon.onSelectOffice}
+                  />
+                )}
+
+                {hasExpanded && isPickup && pickup && pickupOption && (
+                  <PickupPointSelector
+                    client={pickup.client}
+                    provider={pickupOption.provider}
+                    mode={pickupOption.mode}
+                    userCity={pickup.userCity}
+                    userAddress={pickup.userAddress}
+                    selectedPoint={pickup.selectedPoint}
+                    onSelect={pickup.onSelectPoint}
+                  />
+                )}
               </div>
             )
           })}