@cartbase/storefront 0.22.1 → 0.24.0

package/README.md

@@ -47,12 +47,14 @@ NEXT_PUBLIC_CARTBASE_URL=              # optional: only to point at a local or s
 
 ### Pickup points
 
-The checkout pickup picker loads each carrier's complete eligible catalogue
-through the store API, then shows the nearest three to the typed address.
-Its search accepts Latin or Cyrillic; the mounted locale pack selects
-Speedy's display language. Offices exclude automated lockers. BoxNow keeps
-both lists within the checkout city. No carrier credentials or copied
-catalogue are needed in the storefront.
+The checkout pickup picker loads each carrier's complete eligible catalogue
+through the store API, then shows the nearest three to the typed address.
+Its search accepts Latin or Cyrillic; the mounted locale pack selects
+Speedy's display language. Offices exclude automated lockers. BoxNow keeps
+both lists within the checkout city. No carrier credentials or copied
+catalogue are needed in the storefront. Every shipping option carries the
+connected adapter's identity, mark, destination mode and pickup scope, so the
+same picker and logo path work for every carrier without storefront branches.
 
 ### Tracking, in three lines
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartbase/storefront",
-  "version": "0.22.1",
+  "version": "0.24.0",
   "description": "Storefront SDK + UI component library for Cartbase stores: typed API client, checkout orchestration, cart drawer, product/catalog components, tracking. Source-shipped TypeScript — add it to transpilePackages.",
   "license": "MIT",
   "repository": {

package/src/api/checkout.ts

@@ -49,6 +49,18 @@ export interface StoreShippingOption {
   service_zone_id: string | null
   shipping_profile_id: string | null
   data: Record<string, unknown> | null
+  /** Carrier identity and destination, resolved by the platform adapter. */
+  carrier?: {
+    id: string
+    name: string
+    mark_url: string | null
+    fulfillment_option: {
+      id: string
+      mode: "address" | "office" | "locker"
+      label: string
+    } | null
+    pickup_scope: "city" | "global"
+  } | null
   /** The option's display label (e.g. "Express") as `{ label }`, or null. */
   type: { label: string } | null
   /** Flat price in the cart currency; null without `cart_id` or when no price row matches. */

package/src/api/integrations.ts

@@ -177,9 +177,11 @@ export interface StorePickupPoint {
   provider: string
   mode: "office" | "locker"
   /** THEIR id, exactly as the order will carry it. */
-  id: string
-  name: string
-  city: string
+  id: string
+  name: string
+  /** Alternate script/transliteration supplied by the carrier. */
+  secondary_name?: string
+  city: string
   address: string
   postal_code: string
   phone: string

package/src/checkout/carrier-marks.ts

@@ -1,53 +1,14 @@
-/**
- * The carrier's own mark beside its name on a checkout shipping row.
- *
- * A shopper picks a courier by recognising it, and until 2026-09-18 a store
- * got names only unless it hunted down logo files and passed a map of its
- * own (store-package card). The marks are the platform's: the same files
- * the admin's integrations screens wear, served from the platform the store
- * already talks to, so a carrier we add tomorrow arrives with its mark and
- * no store copies an image anywhere.
- *
- * Keyed by the carrier's fulfillment option id, which the platform's
- * registry owns and a shipping option carries in `data.id`. Both modes of a
- * carrier wear the same mark: it names the courier, not the destination.
- */
-
-const MARK: Record<string, { carrier: string; alt: string }> = {
-  "econt-address": { carrier: "econt", alt: "Econt" },
-  "econt-office": { carrier: "econt", alt: "Econt" },
-  "speedy-address": { carrier: "speedy", alt: "Speedy" },
-  "speedy-office": { carrier: "speedy", alt: "Speedy" },
-  "boxnow-locker": { carrier: "boxnow", alt: "BOX NOW" },
-  "pigeon-address": { carrier: "pigeon", alt: "Pigeon Express" },
-  "pigeon-office": { carrier: "pigeon", alt: "Pigeon Express" },
-  "pigeon-locker": { carrier: "pigeon", alt: "Pigeon Express" },
-}
+import type { StoreShippingOption } from "../api/checkout"
 
 /**
- * The default `logoByFulfillmentOptionId` map for a checkout's shipping
- * list. A store that passes its own map keeps it: this is the floor, not a
- * ceiling.
- *
- * `origin` is the SDK client's own (`client.origin`), which in a storefront
- * is the shop's own address, because the store API ships no CORS headers and
- * every storefront reaches it through a same-origin `/api/store/*` rewrite.
- * So the mark is asked for under that same path, which is the one address a
- * storefront can always reach; the platform answers it with the file it
- * already serves. Pointing at the platform's own `/integrations/…` instead
- * is what made every mark 404, since that path is not proxied and the shop's
- * own domain has no such file (found on the workbench before release).
+ * The carrier's mark beside its checkout row. Identity and the same-origin
+ * mark path arrive resolved by the platform adapter; the package keeps no
+ * carrier list.
  */
-export function carrierMarks(
-  origin: string
-): Record<string, { src: string; alt: string }> {
-  const base = origin.replace(/\/+$/, "")
-  const marks: Record<string, { src: string; alt: string }> = {}
-  for (const [optionId, mark] of Object.entries(MARK)) {
-    marks[optionId] = {
-      src: `${base}/api/store/integrations/marks/${mark.carrier}`,
-      alt: mark.alt,
-    }
-  }
-  return marks
+export function carrierMark(
+  option: Pick<StoreShippingOption, "carrier">
+): { src: string; alt: string } | null {
+  const carrier = option.carrier
+  if (!carrier?.mark_url) return null
+  return { src: carrier.mark_url, alt: carrier.name }
 }

package/src/checkout/checkout-client.tsx

@@ -5,9 +5,9 @@ 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 type { StoreCustomer } from "../api/customers"
+import type { PaymentMethod } from "../common/payment-icons"
 import { CheckoutAddressForm } from "./address-form"
-import { carrierMarks } from "./carrier-marks"
 import { DiscountSection } from "./discount-section"
 import { MobileCheckoutBottomBar } from "./mobile-checkout-bottom-bar"
 import { MobileCheckoutTopBar } from "./mobile-checkout-top-bar"
@@ -60,7 +60,11 @@ type CheckoutClientProps = {
   cart: Cart
   customer: StoreCustomer | null
   availableShippingMethods: StoreShippingOption[] | null
-  availablePaymentMethods: PaymentProviderLike[] | null
+  availablePaymentMethods: PaymentProviderLike[] | null
+  /** Card and wallet marks returned by `GET /api/store/payment-marks`. */
+  paymentMarks?: readonly PaymentMethod[]
+  /** Store-owned terms notice, including links to its content pages. */
+  termsContent?: React.ReactNode
   /**
    * The country to PRESELECT when the cart has no shipping address yet.
    * Optional, like the hook's own: the offer comes from the store
@@ -77,8 +81,10 @@ type CheckoutClientProps = {
     methods: PaymentProviderLike[] | null,
     selectedShippingOption: StoreShippingOption | null
   ) => PaymentProviderLike[] | null
-  /** Show the gift-card widget in the summary (default true). */
-  showGiftCards?: boolean
+  /** Show the gift-card widget in the summary (default true). */
+  showGiftCards?: boolean
+  /** Show the security reassurance below the desktop total (default true). */
+  showSecureCheckout?: boolean
   logoByFulfillmentOptionId?: Record<string, { src: string; alt: string }>
   /** Stripe Elements appearance + fonts forwarded to PaymentWrapper. */
   appearance?: Appearance
@@ -108,11 +114,14 @@ export function CheckoutClient({
   cart,
   customer,
   availableShippingMethods,
-  availablePaymentMethods,
+  availablePaymentMethods,
+  paymentMarks,
+  termsContent,
   countryCode,
   countries,
   paymentMethodFilter,
-  showGiftCards = true,
+  showGiftCards = true,
+  showSecureCheckout = true,
   logoByFulfillmentOptionId,
   appearance,
   fonts,
@@ -166,9 +175,10 @@ export function CheckoutClient({
       <MobileCheckoutTopBar
         client={client}
         cart={o.summaryCart}
-        optimisticShippingCost={o.optimisticShippingCost}
-        optimisticMethodFee={o.optimisticMethodFee}
-        showGiftCards={showGiftCards}
+        optimisticShippingCost={o.optimisticShippingCost}
+        optimisticMethodFee={o.optimisticMethodFee}
+        methodFeeLabel={o.paymentTab === "cod" ? o.offlineMethod?.fee_label ?? undefined : undefined}
+        showGiftCards={showGiftCards}
         onCartChange={handleCartChange}
       />
 
@@ -214,18 +224,18 @@ export function CheckoutClient({
                 userCity: o.formData["shipping_address.city"] ?? "",
                 userAddress: o.formData["shipping_address.address_1"] ?? "",
               }}
-              // Every carrier wears its own mark without the store lifting a
-              // finger; a store that passes its own map keeps it.
-              logoByFulfillmentOptionId={
-                logoByFulfillmentOptionId ?? carrierMarks(client.origin)
-              }
+              logoByFulfillmentOptionId={logoByFulfillmentOptionId}
             />
 
             <CheckoutPaymentMethodList
               cart={cart}
-              hasCard={o.hasCard}
-              hasCod={o.hasCod}
-              paymentTab={o.paymentTab}
+              hasCard={o.hasCard}
+              hasCod={o.hasCod}
+              offlineMethod={o.offlineMethod}
+              paymentMethodOrder={o.paymentMethodOrder}
+              paymentMarks={paymentMarks}
+              termsContent={termsContent}
+              paymentTab={o.paymentTab}
               onPaymentTab={o.handlePaymentTab}
               deliveryReady={o.deliveryReady}
               nothingToPay={o.nothingToPay}
@@ -257,9 +267,10 @@ export function CheckoutClient({
                   <MobileCheckoutBottomBar
                     client={client}
                     cart={o.summaryCart}
-                    optimisticShippingCost={o.optimisticShippingCost}
-                    optimisticMethodFee={o.optimisticMethodFee}
-                    showGiftCards={showGiftCards}
+                    optimisticShippingCost={o.optimisticShippingCost}
+                    optimisticMethodFee={o.optimisticMethodFee}
+                    methodFeeLabel={o.paymentTab === "cod" ? o.offlineMethod?.fee_label ?? undefined : undefined}
+                    showGiftCards={showGiftCards}
                     hideDiscount
                     onCartChange={handleCartChange}
                   />
@@ -278,10 +289,12 @@ export function CheckoutClient({
                 onOptimisticShippingClear={() =>
                   o.setOptimisticShippingCost(null)
                 }
-                optimisticMethodFee={o.optimisticMethodFee}
-                onOptimisticMethodFeeClear={() => o.setOptimisticMethodFee(null)}
-                showGiftCards={showGiftCards}
-                onCartChange={handleCartChange}
+                optimisticMethodFee={o.optimisticMethodFee}
+                onOptimisticMethodFeeClear={() => o.setOptimisticMethodFee(null)}
+                methodFeeLabel={o.paymentTab === "cod" ? o.offlineMethod?.fee_label ?? undefined : undefined}
+                showGiftCards={showGiftCards}
+                showSecureCheckout={showSecureCheckout}
+                onCartChange={handleCartChange}
               />
             </div>
           </div>

package/src/checkout/fulfillment-option.ts

@@ -16,8 +16,10 @@ import type { StoreShippingOption } from "../api/checkout"
  * because a cart carried over from that platform still speaks it.
  */
 export function fulfillmentOptionId(
-  option: Pick<StoreShippingOption, "data"> | null | undefined
+  option: Pick<StoreShippingOption, "data" | "carrier"> | null | undefined
 ): string | null {
+  const resolved = option?.carrier?.fulfillment_option?.id
+  if (typeof resolved === "string" && resolved) return resolved
   const data = option?.data as
     | { fulfillment_option?: unknown; id?: unknown }
     | null

package/src/checkout/index.ts

@@ -44,7 +44,7 @@ export {
   type PickupPoint,
 } from "./pickup-point-selector"
 export { pickupOptionOf, type PickupOption } from "./pickup-option"
-export { carrierMarks } from "./carrier-marks"
+export { carrierMark } from "./carrier-marks"
 export { AddressSelect } from "./address-select"
 export { CompanyDetails } from "./company-details"
 export { DiscountSection } from "./discount-section"

package/src/checkout/order-summary.tsx

@@ -168,7 +168,9 @@ type OrderSummaryProps = {
   /** Show the gift-card widget. Default true; pass false for stores that
    * haven't enabled gift cards (the widget itself is harmless either way —
    * an unknown code gets the generic refusal). */
-  showGiftCards?: boolean
+  showGiftCards?: boolean
+  /** Show the security reassurance below the total. Default true. */
+  showSecureCheckout?: boolean
   /**
    * Receives every decorated cart returned by a summary mutation
    * (quantity change, promo apply, gift-card apply/remove). Hosts update
@@ -186,9 +188,10 @@ export function OrderSummary({
   onOptimisticShippingClear,
   optimisticMethodFee,
   onOptimisticMethodFeeClear,
-  methodFeeLabel,
-  showGiftCards = true,
-  onCartChange,
+  methodFeeLabel,
+  showGiftCards = true,
+  showSecureCheckout = true,
+  onCartChange,
 }: OrderSummaryProps) {
   const labels = useCheckoutLabels()
 
@@ -377,7 +380,11 @@ export function OrderSummary({
           )}
         </div>
 
-        <div className="mx-5 sm:mx-6 mt-4 pt-4 border-t border-border">
+        <div
+          className={`mx-5 sm:mx-6 mt-4 pt-4 border-t border-border ${
+            showSecureCheckout ? "" : "pb-5"
+          }`}
+        >
           <div className="flex justify-between items-center">
             <span className="text-lg font-bold text-foreground">
               {labels.total}
@@ -420,22 +427,24 @@ export function OrderSummary({
           )}
         </div>
 
-        <div className="px-5 sm:px-6 pb-5 pt-4 flex items-center justify-center gap-2 text-xs text-muted-foreground">
-          <svg
-            className="w-3.5 h-3.5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-            />
-          </svg>
-          <span>{labels.secureCheckout}</span>
-        </div>
+        {showSecureCheckout && (
+          <div className="px-5 sm:px-6 pb-5 pt-4 flex items-center justify-center gap-2 text-xs text-muted-foreground">
+            <svg
+              className="w-3.5 h-3.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+              />
+            </svg>
+            <span>{labels.secureCheckout}</span>
+          </div>
+        )}
       </div>
     </div>
   )

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

@@ -2,9 +2,11 @@
 
 import { PaymentElement } from "@stripe/react-stripe-js"
 import type { StripePaymentElementChangeEvent } from "@stripe/stripe-js"
-import { useContext, useEffect, useState } from "react"
-
-import { cn } from "../lib/utils"
+import { useContext, useEffect, useState } from "react"
+
+import type { StorePaymentMethodEntry } from "../api/checkout"
+import { PaymentIcon, type PaymentMethod } from "../common/payment-icons"
+import { cn } from "../lib/utils"
 import { useCheckoutLabels } from "./context"
 import { ErrorMessage } from "./error-message"
 import { PaymentButton } from "./payment-button"
@@ -34,9 +36,17 @@ import type { CheckoutLogError } from "./use-checkout-orchestration"
 type CheckoutPaymentMethodListProps = {
   /** Structural cart — forwarded to PaymentButton (`id`/`total`/`currency_code`). */
   cart: { id: string; total?: number | null; currency_code: string }
-  hasCard: boolean
-  hasCod: boolean
-  paymentTab: "card" | "cod"
+  hasCard: boolean
+  hasCod: boolean
+  /** The merchant-configured method shown by the offline/COD tab. */
+  offlineMethod: StorePaymentMethodEntry | null
+  /** Platform-defined order after checkout rules have been applied. */
+  paymentMethodOrder: Array<"card" | "cod">
+  /** Card and wallet marks enabled for the connected payment provider. */
+  paymentMarks?: readonly PaymentMethod[]
+  /** Store-owned terms notice. Falls back to the locale's plain text. */
+  termsContent?: React.ReactNode
+  paymentTab: "card" | "cod"
   onPaymentTab: (tab: "card" | "cod") => void
   deliveryReady: boolean
   paymentError: string | null
@@ -117,9 +127,13 @@ type CheckoutPaymentMethodListProps = {
 
 export function CheckoutPaymentMethodList({
   cart,
-  hasCard,
-  hasCod,
-  paymentTab,
+  hasCard,
+  hasCod,
+  offlineMethod,
+  paymentMethodOrder,
+  paymentMarks = [],
+  termsContent,
+  paymentTab,
   onPaymentTab,
   deliveryReady,
   paymentError,
@@ -138,7 +152,13 @@ export function CheckoutPaymentMethodList({
 
   // Which extra tab is active, if any. Selecting card/cod clears it; the
   // radio group stays single-select across built-in and extra tabs.
-  const [extraTab, setExtraTab] = useState<string | null>(null)
+  const [extraTab, setExtraTab] = useState<string | null>(null)
+  const methodPosition = (method: "card" | "cod") => {
+    const position = paymentMethodOrder.indexOf(method)
+    return position === -1 ? paymentMethodOrder.length : position
+  }
+  const visiblePaymentMarks = paymentMarks.slice(0, 3)
+  const hiddenPaymentMarkCount = Math.max(0, paymentMarks.length - visiblePaymentMarks.length)
 
   // When the store opts out of gating (gatePaymentUntilDelivery=false),
   // the payment section is always shown + interactive regardless of
@@ -212,7 +232,9 @@ export function CheckoutPaymentMethodList({
       <h2 className="text-lg font-semibold text-foreground mb-1 tracking-tight">
         {labels.paymentMethod}
       </h2>
-      <p className="text-xs text-muted-foreground mb-4">{labels.termsText}</p>
+      <p className="text-xs text-muted-foreground mb-4">
+        {termsContent ?? labels.termsText}
+      </p>
 
       {paymentGated ? (
         <div className="p-4 bg-muted rounded-lg border border-border">
@@ -239,7 +261,7 @@ export function CheckoutPaymentMethodList({
         // and tracking refs upstream are NOT torn down. That's the
         // whole point of moving away from PaymentWrapper-wraps-all.
         <StripeElementsScope passthrough>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-2">
             {nothingToPay && (
               // One line instead of a tender list. The shopper owes
               // nothing, so every radio here would be a question with no
@@ -250,8 +272,9 @@ export function CheckoutPaymentMethodList({
               </div>
             )}
             {!nothingToPay && hasCard && (
-              <div
-                className={cn(
+              <div
+                style={{ order: methodPosition("card") }}
+                className={cn(
                   "rounded-lg border overflow-hidden transition-colors duration-150",
                   paymentTab === "card" && !extraTab
                     ? "border-primary bg-primary/5"
@@ -276,10 +299,22 @@ export function CheckoutPaymentMethodList({
                       <div className="w-2 h-2 rounded-full bg-primary" />
                     )}
                   </div>
-                  <span className="text-sm font-medium text-foreground">
-                    {labels.payOnline}
-                  </span>
-                </button>
+                  <span className="text-sm font-medium text-foreground">
+                    {labels.payOnline}
+                  </span>
+                  {visiblePaymentMarks.length > 0 && (
+                    <span className="ml-auto flex items-center gap-1.5 pl-3">
+                      {visiblePaymentMarks.map((method) => (
+                        <PaymentIcon key={method} method={method} className="h-6" />
+                      ))}
+                      {hiddenPaymentMarkCount > 0 && (
+                        <span className="flex h-6 min-w-8 items-center justify-center rounded border border-border bg-card px-1.5 text-xs font-medium text-foreground">
+                          +{hiddenPaymentMarkCount}
+                        </span>
+                      )}
+                    </span>
+                  )}
+                </button>
 
                 {paymentTab === "card" && !extraTab && (
                   <div className="px-4 pb-4 pt-2">
@@ -329,8 +364,9 @@ export function CheckoutPaymentMethodList({
             )}
 
             {!nothingToPay && hasCod && (
-              <div
-                className={cn(
+              <div
+                style={{ order: methodPosition("cod") }}
+                className={cn(
                   "rounded-lg border overflow-hidden transition-colors duration-150",
                   paymentTab === "cod" && !extraTab
                     ? "border-primary bg-primary/5"
@@ -355,23 +391,24 @@ export function CheckoutPaymentMethodList({
                       <div className="w-2 h-2 rounded-full bg-primary" />
                     )}
                   </div>
-                  <span className="text-sm font-medium text-foreground">
-                    {labels.cashOnDelivery}
-                  </span>
+                  <span className="text-sm font-medium text-foreground">
+                    {offlineMethod?.name ?? labels.cashOnDelivery}
+                  </span>
                 </button>
                 {paymentTab === "cod" && !extraTab && (
                   <div className="px-4 pb-3 pt-0">
-                    <p className="text-xs text-muted-foreground ml-[30px]">
-                      {labels.codNote}
-                    </p>
+                    <p className="text-xs text-muted-foreground ml-[30px]">
+                      {offlineMethod?.instructions ?? labels.codNote}
+                    </p>
                   </div>
                 )}
               </div>
             )}
 
-            {!nothingToPay && extraTabs?.map((tab) => (
-              <div
-                key={tab.id}
+            {!nothingToPay && extraTabs?.map((tab, index) => (
+              <div
+                key={tab.id}
+                style={{ order: paymentMethodOrder.length + index }}
                 className={cn(
                   "rounded-lg border overflow-hidden transition-colors duration-150",
                   extraTab === tab.id

package/src/checkout/pickup-option.ts

@@ -1,11 +1,11 @@
+import type { StoreShippingOption } from "../api/checkout"
+
 /**
  * Does this shipping option deliver to a POINT, and to whose?
  *
- * Every carrier names its fulfillment options `<carrier>-<mode>`, because the
- * platform's registry declares them that way and the same ids key the carrier
- * marks and the order's own destination editor. So one reader answers for all
- * of them, and a carrier connected tomorrow opens its picker with no line
- * added anywhere.
+ * The platform resolves provider, mode and picker scope through the carrier
+ * adapter. The string form remains as rollout compatibility for older store
+ * API responses.
  *
  * `address` is the door: there is no point to choose, so it answers null.
  *
@@ -17,19 +17,43 @@
  */
 
 export type PickupOption = {
-  /** `econt`, `speedy`, `boxnow`, `pigeon`. */
+  /** Carrier adapter id. */
   provider: string
   mode: "office" | "locker"
+  scope: "city" | "global"
 }
 
 export function pickupOptionOf(
-  fulfillmentOptionId: string | null | undefined
+  input:
+    | string
+    | Partial<Pick<StoreShippingOption, "carrier" | "data">>
+    | null
+    | undefined
 ): PickupOption | null {
+  if (typeof input === "object" && input) {
+    const carrier = input.carrier
+    const mode = carrier?.fulfillment_option?.mode
+    if (carrier && (mode === "office" || mode === "locker")) {
+      return { provider: carrier.id, mode, scope: carrier.pickup_scope }
+    }
+    const data = input.data as
+      | { fulfillment_option?: unknown; id?: unknown }
+      | null
+      | undefined
+    const legacy =
+      typeof data?.fulfillment_option === "string"
+        ? data.fulfillment_option
+        : typeof data?.id === "string"
+          ? data.id
+          : null
+    return pickupOptionOf(legacy)
+  }
+  const fulfillmentOptionId = input
   if (!fulfillmentOptionId) return null
   const dash = fulfillmentOptionId.lastIndexOf("-")
   if (dash <= 0) return null
   const mode = fulfillmentOptionId.slice(dash + 1)
   if (mode !== "office" && mode !== "locker") return null
   const provider = fulfillmentOptionId.slice(0, dash)
-  return provider ? { provider, mode } : null
+  return provider ? { provider, mode, scope: "global" } : null
 }

package/src/checkout/pickup-point-selector.tsx

@@ -53,10 +53,12 @@ export type PickupPoint = StorePickupPoint
 type PickupPointSelectorProps = {
   /** The SDK transport — the points come from the store, never the carrier. */
   client: StorefrontClient
-  /** `econt`, `speedy`, `boxnow`, `pigeon`, from the shipping option. */
+  /** Carrier adapter id from the shipping option contract. */
   provider: string
-  /** Which kind of point this option delivers to. */
-  mode: "office" | "locker"
+  /** Which kind of point this option delivers to. */
+  mode: "office" | "locker"
+  /** Adapter-declared catalogue scope. */
+  scope: "city" | "global"
   /** The address the shopper has typed so far, for "nearest to me". */
   userCity: string
   userAddress: string
@@ -70,8 +72,9 @@ const MIN_SEARCH_CHARS = 2
 
 export function PickupPointSelector({
   client,
-  provider,
-  mode,
+  provider,
+  mode,
+  scope,
   userCity,
   userAddress,
   selectedPoint,
@@ -120,10 +123,10 @@ export function PickupPointSelector({
     return () => { alive = false; clearTimeout(timer) }
   }, [userCity, userAddress])
 
-  // Alenika's BoxNow picker locks both nearest and search to the town.
-  // Econt (and the shared office pattern used for Speedy) searches all offices.
-  const eligiblePoints = useMemo(() => provider === "boxnow"
-    ? pickupPointsInCity(points, userCity) : points, [points, provider, userCity])
+  const eligiblePoints = useMemo(
+    () => (scope === "city" ? pickupPointsInCity(points, userCity) : points),
+    [points, scope, userCity]
+  )
   const nearest = useMemo(() => nearestPickupPoints(eligiblePoints, coords, userCity),
     [eligiblePoints, coords, userCity])
   const searchResults = useMemo(() => searchPickupPoints(eligiblePoints, search),
@@ -174,10 +177,11 @@ export function PickupPointSelector({
         <div className="flex-1 min-w-0">
           <p className="text-sm font-medium text-foreground leading-tight">
             {point.name}
-          </p>
-          <p className="text-xs text-muted-foreground mt-0.5">
-            {[point.address, point.city].filter(Boolean).join(", ")}
-          </p>
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {point.secondary_name ||
+              [point.address, point.city].filter(Boolean).join(", ")}
+          </p>
         </div>
 
         {distance !== null && distance > 0 && (