@cartbase/storefront 0.20.1 → 0.22.0

package/src/api/http.ts

@@ -62,6 +62,7 @@ const CACHEABLE_READ_PREFIXES = [
   "/api/store/product-types",
   "/api/store/product-tags",
   "/api/store/reviews",
+  "/api/store/payment-marks",
   "/api/store/currencies",
   "/api/store/countries",
   "/api/store/locales",
@@ -97,6 +98,15 @@ export class StorefrontClient {
     }
   }
 
+  /**
+   * The platform this store talks to, without a trailing slash. Read by the
+   * parts that point at something the platform serves rather than answers,
+   * such as the carrier marks on the checkout's shipping rows.
+   */
+  get origin(): string {
+    return this.config.baseUrl.replace(/\/+$/, "")
+  }
+
   /** The low-level typed request. Domain modules call this — apps rarely should. */
   async request<T>(path: string, opts: RequestOptions = {}): Promise<T> {
     const url = new URL(

package/src/api/integrations.ts

@@ -116,3 +116,124 @@ export async function listBoxNowLockers(
 ): Promise<BoxNowLockersResponse> {
   return client.get("/api/store/integrations/boxnow/lockers")
 }
+
+/** One Pigeon Express pickup point, the allowlisted fields the door serves. */
+export interface PigeonOffice {
+  /**
+   * Pigeon's own catalogue id, which the waybill needs verbatim. It arrives
+   * as a NUMBER on the wire (the carrier's catalogue is numeric), so a
+   * caller that stores it stringifies at the edge and never assumes.
+   */
+  id: string | number
+  code?: string | null
+  name: string
+  /** "office" or "locker": one catalogue, told apart by this. */
+  type: string
+  city?: string | null
+  address?: string | null
+  postal_code?: string | null
+  phone?: string | null
+  latitude?: number | null
+  longitude?: number | null
+  max_weight?: number | null
+  max_dimensions?: string | null
+}
+
+export interface PigeonOfficesResponse {
+  offices: PigeonOffice[]
+  /** Present only when the carrier is not connected or refused. */
+  message?: string
+}
+
+/**
+ * GET /api/store/integrations/pigeon/offices — the Pigeon Express pickup
+ * points for the checkout picker. Pigeon's catalogue is credentialed, so
+ * unlike Econt the browser can never ask the carrier itself: the platform
+ * holds the carrier's answer per store and query for ten minutes and serves
+ * allowlisted fields only.
+ *
+ * Auth: anon (the store's key).
+ * Errors: 503 when Pigeon is not connected for the store, 502 when Pigeon
+ * itself fails; both carry an empty `offices` list.
+ */
+export async function listPigeonOffices(
+  client: StorefrontClient,
+  opts: { q?: string; type?: "office" | "locker" } = {}
+): Promise<PigeonOfficesResponse> {
+  const query = new URLSearchParams()
+  if (opts.q) query.set("q", opts.q)
+  if (opts.type) query.set("type", opts.type)
+  const suffix = query.size > 0 ? `?${query.toString()}` : ""
+  return client.get(`/api/store/integrations/pigeon/offices${suffix}`)
+}
+
+// ---------------------------------------------------------------------------
+// Pickup points — ONE door, every carrier (2026-09-18)
+// ---------------------------------------------------------------------------
+
+/** Where a parcel can be collected, in the one shape every carrier answers in. */
+export interface StorePickupPoint {
+  /** `econt`, `speedy`, `boxnow`, `pigeon`. */
+  provider: string
+  mode: "office" | "locker"
+  /** THEIR id, exactly as the order will carry it. */
+  id: string
+  name: string
+  city: string
+  address: string
+  postal_code: string
+  phone: string
+  /** The carrier's own coordinates, for "nearest to me". Null when absent. */
+  latitude: number | null
+  longitude: number | null
+}
+
+/**
+ * What the chosen point is called on the cart and on the order, for this
+ * carrier and this mode. Travels with the answer so a storefront writes the
+ * point under the names THIS carrier's booking reads without carrying a copy
+ * of that map: the names are declared once on the platform, and the waybill
+ * compositions read the same declaration.
+ */
+export interface PickupPointKeys {
+  point: string
+  name: string | null
+  city: string | null
+  address: string | null
+  phone: string | null
+  postal: string | null
+}
+
+export interface PickupPointsResponse {
+  points: StorePickupPoint[]
+  keys: PickupPointKeys
+}
+
+/**
+ * GET /api/store/integrations/:provider/pickup-points — every carrier's
+ * offices and lockers, one shape, one ranking, the store twin of the admin's
+ * own picker door.
+ *
+ * Search is the CARRIER'S where the carrier searches (Speedy by office name
+ * and by town, Pigeon by name compensated with town and postcode) and the
+ * platform's where it does not (Econt and BoxNow publish whole catalogues,
+ * held per store for ten minutes and ranked so a town's own offices beat an
+ * office on a street that shares the town's name). A storefront sends the
+ * query and gets the right answer either way.
+ *
+ * Auth: anon (the store's key).
+ * Errors: 400 when `mode` is missing or the carrier does not serve it, 404
+ * for an unknown carrier, 503 when the store has not connected it.
+ */
+export async function listPickupPoints(
+  client: StorefrontClient,
+  provider: string,
+  opts: { mode: "office" | "locker"; q?: string; limit?: number }
+): Promise<PickupPointsResponse> {
+  const query = new URLSearchParams({ mode: opts.mode })
+  if (opts.q) query.set("q", opts.q)
+  if (opts.limit) query.set("limit", String(opts.limit))
+  return client.get(
+    `/api/store/integrations/${encodeURIComponent(provider)}/pickup-points?${query.toString()}`
+  )
+}

package/src/api/store.ts

@@ -5,6 +5,8 @@
  * storefront needs to title, head and foot itself without hardcoding a
  * name. One anonymous read at layout level. Docs: docs/storefront/store.md.
  */
+import type { PaymentMethod } from "../common/icons/payment-marks"
+import type { SocialNetwork } from "../common/icons/social-marks"
 import type { StorefrontClient } from "./http"
 
 export interface StoreBrand {
@@ -17,8 +19,16 @@ export interface StoreBrand {
   /** `#rrggbb` or null. */
   color_secondary: string | null
   slogan: string | null
+  /**
+   * The store's social profiles by network, only the ones set (Settings,
+   * Brand, Social links). Absent from platforms before 2026-09-17.
+   */
+  social?: StoreSocialLinks
 }
 
+/** A profile address per network the kit has a mark for; `SocialLinks` (common) draws them. */
+export type StoreSocialLinks = Partial<Record<SocialNetwork, string>>
+
 export interface StoreIdentity {
   /** The store's public id: what `<PlatformInit storeId>` mounts. */
   id: string
@@ -33,3 +43,14 @@ export interface StoreIdentity {
 export function getStore(client: StorefrontClient): Promise<{ store: StoreIdentity }> {
   return client.request<{ store: StoreIdentity }>("/api/store/store")
 }
+
+/**
+ * GET /api/store/payment-marks — anon. The payment marks the store's
+ * Stripe account allows, in the kit's order (every card brand when cards
+ * are on; Apple Pay, Google Pay, PayPal, Revolut, Klarna, Bancontact,
+ * iDEAL each when its method is on); empty with no Stripe. `PaymentIcons`
+ * (common) draws them. Platforms before 2026-09-17 answer 404.
+ */
+export function getPaymentMarks(client: StorefrontClient): Promise<{ payment_marks: PaymentMethod[] }> {
+  return client.get<{ payment_marks: PaymentMethod[] }>("/api/store/payment-marks")
+}

package/src/cart-drawer/payment-badges.tsx

@@ -1,96 +1,36 @@
-"use client"
-
-import type { ReactNode } from "react"
-
-/**
- * CartPaymentBadges — row of small payment-method logos shown near the
- * checkout button.
- *
- * Ported from `@1click/ui/src/cart-drawer/payment-badges.tsx` (v2.3.1);
- * originally extracted from mindpages-storefront
- * src/modules/cart-drawer/cart-payment-badges.tsx.
- * Inline SVGs are kept so stores don't need to provide asset files for the
- * default set, but stores can pass their own badges map via the `badges`
- * prop to override.
- */
-
-type BadgeKey = "visa" | "mastercard" | "applepay" | "googlepay" | "amex"
-
-const defaultBadges: Record<BadgeKey, ReactNode> = {
-  visa: (
-    <svg viewBox="0 0 48 32" width="42" height="28" fill="none">
-      <rect width="48" height="32" rx="4" fill="#fff" stroke="#e4e4e7" strokeWidth="1" />
-      <path
-        d="M20.3 21h-2.7l1.7-10.5h2.7L20.3 21zm-4.7 0l-2.5-7.2-.3-1.5c-.5-1.3-1.7-1.8-1.7-1.8h-.1l-1 .2L7 21h2.8l.6-1.5h3.4l.3 1.5h2.5zm-3.2-3.6l1.4-3.8.8 3.8h-2.2zM32 10.5L29.3 21h-2.5l1.5-8.2-.1-.2-2 8.4h-2l-2-8.4v.3L20.7 21h-2.4l2.8-10.5h3.4l1.7 7.2 1.7-7.2H32zm8.8 0L38 21h-2.5l2.8-10.5h2.5z"
-        fill="#1a1f71"
-      />
-    </svg>
-  ),
-  mastercard: (
-    <svg viewBox="0 0 48 32" width="42" height="28" fill="none">
-      <rect width="48" height="32" rx="4" fill="#fff" stroke="#e4e4e7" strokeWidth="1" />
-      <circle cx="19" cy="16" r="8" fill="#eb001b" />
-      <circle cx="29" cy="16" r="8" fill="#f79e1b" />
-      <path d="M24 9.8a8 8 0 010 12.4 8 8 0 000-12.4z" fill="#ff5f00" />
-    </svg>
-  ),
-  applepay: (
-    <svg viewBox="0 0 48 32" width="42" height="28" fill="none">
-      <rect width="48" height="32" rx="4" fill="#000" />
-      <g fill="#fff">
-        <path d="M15.2 11.8c-.6.7-1.5 1.2-2.4 1.1-.1-1 .4-2 .9-2.6.6-.7 1.5-1.2 2.3-1.2.1 1-.3 2-.8 2.7zm.8 1.4c-1.3-.1-2.5.8-3.1.8s-1.6-.7-2.7-.7c-1.4 0-2.7.8-3.4 2.1-1.4 2.5-.4 6.2 1 8.2.7 1 1.5 2.1 2.6 2s1.4-.7 2.7-.7 1.6.7 2.7.7 1.8-1 2.5-2c.8-1.1 1.1-2.2 1.1-2.3-1.2-.5-2-1.8-2-3.3 0-1.3.7-2.5 1.8-3.1-.7-1-1.8-1.7-3.2-1.7z" />
-        <path d="M25 12.5v10.8h1.7v-3.7h2.3c2.1 0 3.6-1.5 3.6-3.6s-1.5-3.5-3.5-3.5H25zm1.7 1.4h1.9c1.5 0 2.3.8 2.3 2.1s-.8 2.1-2.3 2.1h-1.9v-4.2zm8.8 9.5c1.1 0 2.1-.5 2.5-1.4h0v1.3H39.6v-5.2c0-1.8-1.4-2.9-3.5-2.9-2 0-3.4 1.1-3.4 2.8h1.6c.1-.8.9-1.4 1.8-1.4 1.2 0 1.8.5 1.8 1.5v.7l-2.4.1c-2.2.1-3.4 1-3.4 2.6 0 1.6 1.2 2.7 2.9 2.7v-.8zm.4-1.3c-1 0-1.7-.5-1.7-1.3 0-.8.6-1.3 1.8-1.4l2.1-.1v.7c0 1.2-1 2.1-2.2 2.1z" />
-      </g>
-    </svg>
-  ),
-  googlepay: (
-    <svg viewBox="0 0 48 32" width="42" height="28" fill="none">
-      <rect width="48" height="32" rx="4" fill="#fff" stroke="#e4e4e7" strokeWidth="1" />
-      <path
-        d="M23.5 16.7v3.1h-1v-7.6h2.7c.7 0 1.2.2 1.7.6.5.4.7.9.7 1.5s-.2 1.1-.7 1.5c-.5.4-1 .6-1.7.6h-1.7zm0-3.5v2.5h1.7c.4 0 .8-.2 1.1-.4.3-.3.4-.6.4-1s-.1-.7-.4-1c-.3-.3-.6-.4-1.1-.4h-1.7z"
-        fill="#3c4043"
-      />
-      <path
-        d="M30.6 14.2c.7 0 1.3.2 1.8.6.4.4.7 1 .7 1.7v3.3h-1v-.7c-.4.6-.9.9-1.6.9-.6 0-1.1-.2-1.5-.5-.4-.3-.6-.8-.6-1.3 0-.5.2-1 .5-1.3.4-.3.9-.5 1.5-.5.6 0 1.1.2 1.4.5v-.3c0-.4-.2-.7-.4-.9-.3-.2-.6-.4-1-.4-.6 0-1 .2-1.3.7l-.8-.5c.5-.7 1.1-1 2-1h.3zm-1 4.6c.3.2.6.3 1 .3s.7-.1 1-.3c.3-.2.4-.5.4-.8s-.1-.6-.4-.8c-.3-.2-.6-.3-1-.3s-.7.1-1 .3c-.3.2-.4.5-.4.8s.2.6.4.8z"
-        fill="#3c4043"
-      />
-      <path d="M37 14.4l-2.4 5.5h-1l.9-1.9-1.6-3.6h1.1l1 2.5 1-2.5H37z" fill="#3c4043" />
-      <path d="M18.3 16c0-.3 0-.6-.1-.9h-4.6v1.7h2.7c-.1.6-.4 1.1-.9 1.4v1.2h1.5c.9-.8 1.4-2 1.4-3.4z" fill="#4285f4" />
-      <path d="M13.6 19.7c1.2 0 2.2-.4 3-1.1l-1.5-1.2c-.4.3-.9.4-1.5.4-1.2 0-2.1-.8-2.5-1.8H9.7v1.2c.7 1.5 2.2 2.5 3.9 2.5z" fill="#34a853" />
-      <path d="M11.1 16c0-.3.1-.7.2-1v-1.2H9.7c-.4.7-.6 1.4-.6 2.2s.2 1.5.6 2.2l1.6-1.2c-.1-.3-.2-.7-.2-1z" fill="#fbbc04" />
-      <path d="M13.6 12.2c.7 0 1.3.2 1.8.7l1.3-1.3c-.8-.8-1.9-1.2-3.1-1.2-1.7 0-3.2 1-3.9 2.5l1.6 1.2c.4-1.1 1.3-1.9 2.3-1.9z" fill="#ea4335" />
-    </svg>
-  ),
-  amex: (
-    <svg viewBox="0 0 48 32" width="42" height="28" fill="none">
-      <rect width="48" height="32" rx="4" fill="#006fcf" />
-      <text x="24" y="20" fill="#fff" fontSize="10" fontWeight="700" textAnchor="middle" fontFamily="Arial, sans-serif">
-        AMEX
-      </text>
-    </svg>
-  ),
-}
-
-type CartPaymentBadgesProps = {
-  methods?: BadgeKey[]
-  badges?: Partial<Record<BadgeKey, ReactNode>>
-}
-
-export function CartPaymentBadges({
-  methods = ["visa", "mastercard", "googlepay", "applepay"],
-  badges,
-}: CartPaymentBadgesProps) {
-  const resolved = { ...defaultBadges, ...badges }
-  return (
-    <div className="flex items-center justify-center gap-2 px-5 py-3">
-      {methods.map((method) => (
-        <div
-          key={method}
-          className="opacity-70 hover:opacity-100 transition-opacity"
-        >
-          {resolved[method]}
-        </div>
-      ))}
-    </div>
-  )
-}
+"use client"
+
+import type { ReactNode } from "react"
+import { PaymentIcon, type PaymentMethod } from "../common/payment-icons"
+
+/**
+ * CartPaymentBadges — row of small payment-method logos shown near the
+ * checkout button.
+ *
+ * Ported from `@1click/ui/src/cart-drawer/payment-badges.tsx` (v2.3.1);
+ * originally extracted from mindpages-storefront
+ * src/modules/cart-drawer/cart-payment-badges.tsx. Since 2026-09-17 the
+ * badges are the kit's payment marks (`common/payment-icons`), the same the
+ * footer shows, so any mark the kit carries can be named; a store can still
+ * pass its own badge per method through `badges`.
+ */
+
+type CartPaymentBadgesProps = {
+  methods?: PaymentMethod[]
+  badges?: Partial<Record<PaymentMethod, ReactNode>>
+}
+
+export function CartPaymentBadges({
+  methods = ["visa", "mastercard", "googlepay", "applepay"],
+  badges,
+}: CartPaymentBadgesProps) {
+  return (
+    <div className="flex items-center justify-center gap-2 px-5 py-3">
+      {methods.map((method) => (
+        <div key={method} className="opacity-70 transition-opacity hover:opacity-100">
+          {badges?.[method] ?? <PaymentIcon method={method} className="h-7" />}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/checkout/card-offer.ts

@@ -0,0 +1,68 @@
+import { isStripeLike } from "../lib/payment-constants"
+
+/**
+ * Is there a card at this checkout, and how does the browser reach it?
+ *
+ * One row answers both. The `pp_stripe` entry of
+ * `GET /api/store/payment-providers` carries its own `publishable_key` and,
+ * for a store that linked Stripe by Connect, the merchant's `account_id`.
+ * Reading the two apart is what broke: a store could offer a card it had no
+ * way to charge, and a shopper met a card form that never loaded.
+ *
+ * A card with no key is NOT an offer. Stripe.js cannot load without a
+ * publishable key, so the tab would sit on a loading skeleton for ever and
+ * the checkout would read as broken. It is a misconfiguration, never the
+ * shopper's problem, so the caller hides the tab and tells the merchant's
+ * checkout error log instead.
+ *
+ * `env` is the storefront's own `NEXT_PUBLIC_STRIPE_KEY` and
+ * `NEXT_PUBLIC_STRIPE_ACCOUNT_ID`, the fallback for a storefront running its
+ * own Stripe outside the platform. It is taken as a PAIR, never mixed with
+ * the store's: a platform key with no account charges the platform, and a
+ * merchant account under the wrong key is refused by Stripe.
+ */
+
+/** What a processor entry has to carry for the browser to use it. */
+export type CardEntryLike = {
+  id: string
+  publishable_key?: string
+  account_id?: string
+}
+
+export type CardOffer = {
+  /** The entry, whether or not it can be mounted. */
+  entry: CardEntryLike | null
+  /** True when the browser has a publishable key for it. */
+  mountable: boolean
+  /** The key to load Stripe.js with, the store's before the storefront's. */
+  publishableKey: string | undefined
+  /** The merchant's linked account, Connect stores only. */
+  accountId: string | undefined
+}
+
+const NO_CARD: CardOffer = {
+  entry: null,
+  mountable: false,
+  publishableKey: undefined,
+  accountId: undefined,
+}
+
+export function resolveCardOffer(
+  methods: ReadonlyArray<Record<string, unknown>> | null | undefined,
+  env?: { key?: string; accountId?: string }
+): CardOffer {
+  const entry = methods?.find(
+    (m) => "id" in m && isStripeLike(m.id as string)
+  ) as CardEntryLike | undefined
+  if (!entry) return NO_CARD
+  // The store's answer wins, as one pair or not at all.
+  const fromStore = !!entry.publishable_key
+  const publishableKey = fromStore ? entry.publishable_key : env?.key
+  const accountId = fromStore ? entry.account_id : env?.accountId
+  return {
+    entry,
+    mountable: !!publishableKey,
+    publishableKey,
+    accountId,
+  }
+}

package/src/checkout/carrier-marks.ts

@@ -0,0 +1,53 @@
+/**
+ * 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" },
+}
+
+/**
+ * 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).
+ */
+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
+}

package/src/checkout/checkout-client.tsx

@@ -7,6 +7,10 @@ import type { Cart } from "../api/carts"
 import type { StoreShippingOption } from "../api/checkout"
 import type { StoreCustomer } from "../api/customers"
 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"
 import { OrderSummary } from "./order-summary"
 import { CheckoutPaymentMethodList } from "./payment-method-list"
 import { CheckoutShippingMethodList } from "./shipping-method-list"
@@ -41,9 +45,13 @@ import {
  *    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.
+ *
+ * On a phone the summary column would be a wall of items above the form, so
+ * it is replaced by two bars carrying the same content behind one tap: the
+ * total at the top of the page, and, above Place order, a card with the
+ * first item and the total. Both open onto `MobileOrderSummaryBody`, all
+ * three surfaces take their numbers from `checkoutTotals`, and the promo
+ * field is exposed above the bottom bar rather than left two taps deep.
  */
 
 type CheckoutClientProps = {
@@ -147,7 +155,23 @@ export function CheckoutClient({
       amount={o.optimisticTotalCents}
       appearance={appearance}
       fonts={fonts}
+      // The store's own Stripe, off the card entry the listing already
+      // carried here. Nothing for a storefront to configure: connecting
+      // Stripe in the admin is the whole setup.
+      publishableKey={o.cardPublishableKey}
+      stripeAccountId={o.cardStripeAccountId}
     >
+      {/* The phone's first sight of the order: the total, one tap from what
+          makes it up. Above the form, as the desktop summary is beside it. */}
+      <MobileCheckoutTopBar
+        client={client}
+        cart={o.summaryCart}
+        optimisticShippingCost={o.optimisticShippingCost}
+        optimisticMethodFee={o.optimisticMethodFee}
+        showGiftCards={showGiftCards}
+        onCartChange={handleCartChange}
+      />
+
       <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 ════════════════════════════════════════════ */}
@@ -174,20 +198,27 @@ export function CheckoutClient({
               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={{
+              // ONE picker, every carrier (2026-09-18). This used to mount
+              // three: an Econt one that called the carrier from the browser,
+              // a BoxNow one and a Pigeon one that each called a store route
+              // written for them alone, and nothing for Speedy, whose
+              // catalogue is credentialed and can never be reached from a
+              // browser at all. So a store could offer delivery to a Speedy
+              // office and give the shopper no way to name one. All four are
+              // the same question, answered by one platform door. The three
+              // components stay exported for a store that mounts its own.
+              pickup={{
                 client,
-                selectedLocker: o.selectedBoxnowLocker,
-                onSelectLocker: o.handleSelectBoxnowLocker,
+                selectedPoint: o.selectedPickupPoint,
+                onSelectPoint: o.handleSelectPickupPoint,
                 userCity: o.formData["shipping_address.city"] ?? "",
                 userAddress: o.formData["shipping_address.address_1"] ?? "",
               }}
-              logoByFulfillmentOptionId={logoByFulfillmentOptionId}
+              // 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)
+              }
             />
 
             <CheckoutPaymentMethodList
@@ -197,6 +228,7 @@ export function CheckoutClient({
               paymentTab={o.paymentTab}
               onPaymentTab={o.handlePaymentTab}
               deliveryReady={o.deliveryReady}
+              nothingToPay={o.nothingToPay}
               paymentError={o.paymentError}
               onPaymentElementChange={o.handlePaymentElementChange}
               performBuyClick={o.performBuyClick}
@@ -207,6 +239,32 @@ export function CheckoutClient({
               total={o.optimisticTotal}
               logError={logError}
               extraTabs={extraPaymentTabs}
+              beforePaymentButton={
+                // Phone only: the desktop summary already carries both, and
+                // an empty slot would still take its margin above the button.
+                <div className="sm:hidden space-y-3">
+                  {/* The code field itself, open: inside a closed bar it
+                      would be the second tap and a shopper holding a code
+                      would never reach it. */}
+                  <DiscountSection
+                    client={client}
+                    cart={o.summaryCart}
+                    alwaysOpen
+                    onCartChange={handleCartChange}
+                  />
+                  {/* What they are paying for, last thing before they pay.
+                      Its own promo door is off: the field above is the one. */}
+                  <MobileCheckoutBottomBar
+                    client={client}
+                    cart={o.summaryCart}
+                    optimisticShippingCost={o.optimisticShippingCost}
+                    optimisticMethodFee={o.optimisticMethodFee}
+                    showGiftCards={showGiftCards}
+                    hideDiscount
+                    onCartChange={handleCartChange}
+                  />
+                </div>
+              }
             />
           </div>