From b29962bf9c41d5cd8eb726d877cb02f0e19f62aa Mon Sep 17 00:00:00 2001
From: metatroncubeswdev <info@metatroncubesolutions.com>
Date: Thu, 10 Sep 2026 16:47:59 -0400
Subject: [PATCH] feat: finish multi-pin pickup end-to-end; fix
 checkout-datetime followups
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Multi-pin pickup selection (study §3.4) — previously a standalone unused
endpoint + TODO comments:
- app/services/pickup-locations.server.ts: pure filterPickupLocationIds +
  I/O resolvePickupLocations (active + has a PICKUP slot template +
  ProductRule allowedLocationIds + inventory exclusion).
- resolveAvailabilityRequest returns pickupLocations[] on method=PICKUP and
  defaults the active location to the first eligible pickup point.
- apps.scheduling.locations.tsx refactored onto the shared resolver
  (was a second copy of the logic).
- Storefront widget: pickup-location chooser (name + address, optional
  multi-pin Google map) when >1 eligible point and none block-configured;
  picking one re-requests availability for that location. New styles +
  widget.choose_pickup_location locale (en + fr).
- Checkout extension Checkout.jsx: same chooser before the date list.
- tests/unit/pickup-locations.test.ts (5 cases); suite 161 green.

checkout-datetime follow-up fixes from the 808a3b7 review:
- typescript devDep ^7.0.2 -> ^5.6.3 (there is no typescript@7 on npm).
- Deleted dead shopify.d.ts (Preact-global shim, unused after the React
  rewrite) and dropped it from tsconfig include.

Also stages the CLI-written `uid` lines in the checkout-datetime and
payment-customization extension tomls.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 HANDOVER_STATUS_SUMMARY.md                    |  49 ++++---
 app/routes/apps.scheduling.locations.tsx      |  65 ++++------
 app/services/availability-request.server.ts   |  29 ++++-
 app/services/pickup-locations.server.ts       |  92 +++++++++++++
 .../checkout-datetime/locales/en.default.json |   1 +
 extensions/checkout-datetime/package.json     |   2 +-
 extensions/checkout-datetime/shopify.d.ts     |  19 ---
 .../checkout-datetime/shopify.extension.toml  |   2 +
 extensions/checkout-datetime/src/Checkout.jsx |  38 +++++-
 extensions/checkout-datetime/tsconfig.json    |   2 +-
 .../assets/datetime-widget.css                |  34 +++++
 .../datetime-widget/assets/datetime-widget.js |   2 +-
 .../datetime-widget/blocks/app-embed.liquid   |   1 +
 .../blocks/datetime-picker.liquid             |   1 +
 .../datetime-widget/locales/en.default.json   |   3 +-
 extensions/datetime-widget/locales/fr.json    |   3 +-
 .../shopify.extension.toml                    |   2 +
 tests/unit/pickup-locations.test.ts           |  52 ++++++++
 widget-src/datetime-widget/datetime-widget.ts | 122 ++++++++++++++++--
 19 files changed, 416 insertions(+), 103 deletions(-)
 create mode 100644 app/services/pickup-locations.server.ts
 delete mode 100644 extensions/checkout-datetime/shopify.d.ts
 create mode 100644 tests/unit/pickup-locations.test.ts

diff --git a/HANDOVER_STATUS_SUMMARY.md b/HANDOVER_STATUS_SUMMARY.md
index 08061c1..9caae5d 100644
--- a/HANDOVER_STATUS_SUMMARY.md
+++ b/HANDOVER_STATUS_SUMMARY.md
@@ -1,20 +1,28 @@
 # Handover Status Summary
 
-Based on the original `HANDOVER.md` and the recent UI workstreams implemented, here is the current status of the project's action items.
+Based on the original `HANDOVER.md` and the recent workstreams, here is the current status of the project's action items.
 
 ## ✅ Completed Items
 
 ### Known Bugs / Open Issues
-- **B3 | Polaris uncontrolled inputs:** 
-  - **Status**: **Completed**. Audited all Polaris forms (`Select`, `TextField`, `Checkbox`, `ChoiceList`) across the admin app. Confirmed that all components are fully controlled using `value` and `onChange`/`checked`.
-- **B4 | `checkout-datetime` `checkJs` & Type Errors:**
-  - **Status**: **Completed**. Reconciled the extension with the latest Shopify UI Extension APIs. Updated `tsconfig.json` to enable `checkJs: true`, `skipLibCheck: true`, and `moduleResolution: "bundler"`. Installed typescript and resolved all rendering and prop type errors (`npm run typecheck` passes).
+- **B3 | Polaris uncontrolled inputs:**
+  - **Status**: **Completed** (`f8dd5b2`). Weekday/method/location/zone `<Select>`s in the Slots, Blackout dates and Rates forms were inert (no `value`/`onChange`) — now controlled. Full admin-form audit done.
+- **B4 | `checkout-datetime` `checkJs` & type errors:**
+  - **Status**: **Completed** (`808a3b7` + follow-up). Rewritten to the React pattern (`@shopify/ui-extensions-react/checkout`, `reactExtension`, hooks). `tsconfig` `checkJs:true`, `moduleResolution:"bundler"`.
+  - **Follow-up fixes applied:** `typescript` devDep corrected `^7.0.2` → `^5.6.3` (TS 7 doesn't exist on npm); dead `shopify.d.ts` (Preact-global shim, unused after the rewrite) deleted and dropped from `tsconfig` include.
+  - **Still pending:** manual QA on a Plus dev store; confirm `OrderStatus.jsx`'s `customer-account.order-status.block.render` target against current Shopify docs (currently `@ts-ignore`'d).
+- **B9 | CI `typecheck:checkout`:**
+  - **Status**: **Should pass now** — extension has `package.json` + `tsconfig` + real `src/`. Confirm on the first CI run; it needs `npm ci` to install `@shopify/ui-extensions-react`, `react`, `typescript`.
 
 ### Next-Step Implementation
-- **P1.1 | Reconcile `checkout-datetime` with live types (B4):** 
-  - **Status**: **Completed**. Codebase is typed and reconciled. (Note: Still requires manual QA on a Plus dev store).
-- **P2.4 | Multi-pin pickup-location map:**
-  - **Status**: **Completed (Frontend)**. Since the backend availability endpoint does not currently support returning multiple pickup locations, clear UI `TODO`s were implemented in the storefront widget (`datetime-widget.ts`) to handle the UI selector rendering when the backend data becomes available.
+- **P1.1 | Reconcile `checkout-datetime` with live types (B4):**
+  - **Status**: **Completed** (code). Manual QA on Plus still pending.
+- **P2.4 | Multi-pin pickup-location selection (study §3.4):**
+  - **Status**: **Completed, end-to-end.**
+  - **Backend:** new pure `filterPickupLocationIds` + I/O `resolvePickupLocations` in `app/services/pickup-locations.server.ts` (active + has a PICKUP slot template + ProductRule `allowedLocationIds` + inventory exclusion). `resolveAvailabilityRequest` now returns `pickupLocations[]` on `method=PICKUP` responses and defaults the active location to the first eligible pickup point. `app/routes/apps.scheduling.locations.tsx` refactored to call the shared resolver (was a duplicate implementation).
+  - **Storefront widget:** renders a pickup-location chooser (name + address, optional multi-pin Google map) when >1 eligible point and none is block-configured; picking one re-requests availability for that location. New `dd-widget__pickup-locations` styles + `widget.choose_pickup_location` locale (en + fr).
+  - **Checkout extension:** same chooser in `Checkout.jsx` before the date list.
+  - **Tests:** `tests/unit/pickup-locations.test.ts` (5 cases). Full suite 161 green.
 
 ---
 
@@ -28,18 +36,17 @@ Based on the original `HANDOVER.md` and the recent UI workstreams implemented, h
 - **3.4 | Test-mode toggles:** Remove `UNLOCK_ALL_FEATURES` from `.env` before public launch.
 
 ### 2. Known Bugs / Open Issues
-- **B1 | Storefront widget "Couldn't load available dates":** Blocked by 3.1 and 3.3.
-- **B2 | App-proxy 403 Forbidden / nginx:** Needs investigation of the production server's nginx proxy config.
-- **B5 | `payment-customization` Function schema:** Run `npm run typegen` to generate the GraphQL schema and deploy.
-- **B6 | GDPR compliance webhooks:** Re-enable in `shopify.app.toml` once Protected Customer Data Access is granted.
-- **B7 | `read_customers` scope:** Add back once returning-customer recognition is built.
-- **B8 | Checkout snapshot stale horizon:** Build a periodic worker sweep.
-- **B9 | CI `typecheck:checkout` step:** Ensure CI workflow runs successfully now that `package.json` and `tsconfig.json` are fixed.
+- **B1 | Storefront widget "Couldn't load available dates":** Blocked by 3.1 and 3.3 (server-side). Not code.
+- **B2 | App-proxy 403 Forbidden / nginx:** Production server's nginx proxy config. Not code.
+- **B5 | `payment-customization` Function schema:** Run `npm --prefix extensions/payment-customization run typegen`, then `shopify app deploy`.
+- **B6 | GDPR compliance webhooks:** Re-enable in `shopify.app.toml` once Protected Customer Data Access is granted. **Blocked (Shopify approval).**
+- **B7 | `read_customers` scope:** Add back with B6, when returning-customer recognition is built. **Blocked.**
+- **B8 | Checkout snapshot stale horizon:** Periodic worker sweep — needs offline-session storage first so the worker can get an Admin client per shop.
 
 ### 3. Next-Step Implementation (P1 - P4)
 - **P1.2 | Deploy + smoke `payment-customization`:** Test on a dev store with a manual COD gateway.
-- **P1.3 | Rates:** Decide between display-only rates (current) vs. real carrier pricing integration.
-- **P2.5 | Returning-customer recognition:** Depends on B6/B7.
-- **P2.6 | Cart Transform / deposits:** Implement v2.
-- **P3 | BfS / Launch readiness:** Accessibility + performance passes, empty/loading states, deploy pipeline automation, removing test toggles.
-- **P4 | v1.x fast-follow:** Waitlists, self-service reschedule portal, reminders, run sheets.
+- **P1.3 | Rates:** **Product decision required** — display-only (current: `delivery-customization` renames the option with a price label) vs. real `delivery-customization` pricing / carrier integration. Not startable without that call.
+- **P2.5 | Returning-customer recognition:** Blocked on B6/B7.
+- **P2.6 | Cart Transform / deposits:** v2 milestone — draft orders + `cart-transform` Function. Its own task.
+- **P3 | BfS / Launch readiness:** a11y + perf passes (best against the live store — deferred per earlier direction), empty/loading states, deploy-pipeline automation (fold in `prisma migrate deploy`), remove `UNLOCK_ALL_FEATURES`.
+- **P4 | v1.x fast-follow:** Waitlists, self-service reschedule portal (order-status + magic link), email/SMS reminders (BullMQ + a `Notification` model), printable run sheets, holiday auto-import. Each is its own milestone (`IMPLEMENTATION_PLAN.md` Phase 9).
diff --git a/app/routes/apps.scheduling.locations.tsx b/app/routes/apps.scheduling.locations.tsx
index 1bf6773..19caa2e 100644
--- a/app/routes/apps.scheduling.locations.tsx
+++ b/app/routes/apps.scheduling.locations.tsx
@@ -1,11 +1,20 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { authenticate } from "../shopify.server";
 import db from "../db.server";
-import { resolveProductRuleConstraints, resolveProductRefs } from "../services/product-rules.server";
-import { productRefsFromCartLines } from "../services/product-rules.server";
+import {
+  resolveProductRuleConstraints,
+  resolveProductRefs,
+  productRefsFromCartLines,
+} from "../services/product-rules.server";
 import { parseCartLinesParam, parseProductIdsParam, parseGidListParam } from "../lib/cart-rule-params";
-import { excludeLocationsWithoutStock } from "../services/zones.server";
+import { resolvePickupLocations } from "../services/pickup-locations.server";
 
+// Standalone list of eligible pickup points (study §3.4 multi-pin pickup).
+// The same data is also returned inline on `method=PICKUP` availability
+// responses (`pickupLocations`) — this endpoint stays for callers that just
+// want the list without asking for a specific location's calendar. Shared
+// resolution logic lives in pickup-locations.server.ts so the two paths
+// can't drift.
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const { session, admin } = await authenticate.public.appProxy(request);
   if (!session) {
@@ -13,53 +22,27 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   }
 
   const url = new URL(request.url);
-  const method = "PICKUP";
 
   const productIds = parseProductIdsParam(url.searchParams.get("productIds"));
   const productRefs = admin && productIds.length > 0 ? await resolveProductRefs(admin, productIds) : [];
-  
+  const cartProductRefs = [
+    ...productRefs,
+    ...productRefsFromCartLines(parseCartLinesParam(url.searchParams.get("cartLines"))),
+  ];
+
   const productRules = await db.productRule.findMany({ where: { shopDomain: session.shop, active: true } });
-  const cartProductRefs = [...productRefs, ...productRefsFromCartLines(parseCartLinesParam(url.searchParams.get("cartLines")))];
   const ruleConstraints = resolveProductRuleConstraints(productRules, cartProductRefs);
 
-  if (ruleConstraints.allowedMethods != null && !ruleConstraints.allowedMethods.includes(method)) {
+  // A rule that forbids PICKUP for this cart ⇒ no pickup points at all.
+  if (ruleConstraints.allowedMethods != null && !ruleConstraints.allowedMethods.includes("PICKUP")) {
     return Response.json({ locations: [] });
   }
 
-  const locationWhere = ruleConstraints.allowedLocationIds != null ? { id: { in: ruleConstraints.allowedLocationIds } } : {};
-  
-  // Only locations that offer PICKUP (they have slot templates for it)
-  // Wait, the location model doesn't store methods, methods are on SlotTemplate.
-  // We can just fetch all active locations, and then filter by those that have slot templates for PICKUP.
-  const candidates = await db.location.findMany({
-    where: { shopDomain: session.shop, active: true, ...locationWhere },
-    orderBy: { createdAt: "asc" },
+  const locations = await resolvePickupLocations(session.shop, {
+    allowedLocationIds: ruleConstraints.allowedLocationIds,
+    admin: admin ?? undefined,
+    productVariantGids: parseGidListParam(url.searchParams.get("variantIds")),
   });
 
-  const templates = await db.slotTemplate.findMany({
-    where: { shopDomain: session.shop, method },
-    select: { locationId: true }
-  });
-  const locationsWithPickup = new Set(templates.map(t => t.locationId));
-  
-  const eligibleCandidates = candidates.filter(c => locationsWithPickup.has(c.id));
-
-  const productVariantGids = parseGidListParam(url.searchParams.get("variantIds"));
-  const stockCheckEnabled = Boolean(admin) && productVariantGids.length > 0;
-  
-  const stocked = stockCheckEnabled 
-    ? await excludeLocationsWithoutStock(admin!, eligibleCandidates.map(c => c.id), productVariantGids)
-    : new Set(eligibleCandidates.map(c => c.id));
-
-  const finalLocations = eligibleCandidates
-    .filter(c => stocked.has(c.id))
-    .map(c => ({
-      id: c.id,
-      name: c.name,
-      lat: c.lat,
-      lng: c.lng,
-      address: c.address,
-    }));
-
-  return Response.json({ locations: finalLocations });
+  return Response.json({ locations });
 };
diff --git a/app/services/availability-request.server.ts b/app/services/availability-request.server.ts
index dbea4d1..2c5e096 100644
--- a/app/services/availability-request.server.ts
+++ b/app/services/availability-request.server.ts
@@ -11,6 +11,7 @@ import {
 import { resolveRate } from "./rates.server";
 import { formatPriceLabel } from "../lib/currency";
 import { resolveProductRuleConstraints, productRefsFromCartLines, type ProductRef } from "./product-rules.server";
+import { resolvePickupLocations, type PickupLocationDto } from "./pickup-locations.server";
 
 // The single availability resolver every surface calls — storefront widget
 // (via apps.scheduling.availability.tsx, app-proxy auth), POS (via
@@ -62,6 +63,13 @@ export interface AvailabilityResult {
   zoneId: string | null;
   distanceKm: number | null;
   rate: { name: string; priceCents: number; label: string } | null;
+  /**
+   * All eligible pickup points, for the multi-pin selector (study §3.4).
+   * Present only for `method === "PICKUP"`. `dates` above is for whichever
+   * one is currently active (`locationId` / `locationName`); the caller
+   * re-requests with `locationId` when the shopper picks a different pin.
+   */
+  pickupLocations?: PickupLocationDto[];
   error?: string;
 }
 
@@ -104,6 +112,7 @@ export async function resolveAvailabilityRequest(
   let location: Awaited<ReturnType<typeof db.location.findFirst>> = null;
   let zoneId: string | null = null;
   let distanceKm: number | null = null;
+  let pickupLocations: PickupLocationDto[] | undefined;
 
   // Inventory-based location exclusion (study §3.4): only runs on the
   // app-proxy surface, which is the only one that hands us an Admin client
@@ -153,6 +162,20 @@ export async function resolveAvailabilityRequest(
         error: "This address is outside our delivery area right now.",
       };
     }
+  } else if (method === "PICKUP") {
+    // Multi-pin pickup (study §3.4): resolve every eligible pickup point so
+    // the widget/checkout can offer a chooser, then narrow the date picker
+    // to the shopper's pick (or the first eligible one).
+    pickupLocations = await resolvePickupLocations(shopDomain, {
+      allowedLocationIds: ruleConstraints.allowedLocationIds,
+      admin: params.admin,
+      productVariantGids: params.productVariantGids,
+    });
+    const activeId =
+      locationIdParam && pickupLocations.some((l) => l.id === locationIdParam)
+        ? locationIdParam
+        : pickupLocations[0]?.id;
+    location = activeId ? await db.location.findFirst({ where: { id: activeId, shopDomain, active: true } }) : null;
   } else {
     const locationWhere =
       ruleConstraints.allowedLocationIds != null ? { id: { in: ruleConstraints.allowedLocationIds } } : {};
@@ -174,12 +197,15 @@ export async function resolveAvailabilityRequest(
       zoneId: null,
       distanceKm: null,
       rate: null,
+      pickupLocations: method === "PICKUP" ? [] : undefined,
       error:
         ruleConstraints.allowedLocationIds != null
           ? "One or more items in your cart aren't available at this location."
           : stockCheckEnabled
             ? "No location currently stocks every item in your cart."
-            : "No active location configured",
+            : method === "PICKUP"
+              ? "No pickup location is available right now."
+              : "No active location configured",
     };
   }
 
@@ -280,5 +306,6 @@ export async function resolveAvailabilityRequest(
     rate: matchedRate
       ? { name: matchedRate.name, priceCents: matchedRate.priceCents, label: formatPriceLabel(matchedRate.priceCents) }
       : null,
+    pickupLocations,
   };
 }
diff --git a/app/services/pickup-locations.server.ts b/app/services/pickup-locations.server.ts
new file mode 100644
index 0000000..a37877e
--- /dev/null
+++ b/app/services/pickup-locations.server.ts
@@ -0,0 +1,92 @@
+import type { Method } from "@prisma/client";
+import db from "../db.server";
+import { excludeLocationsWithoutStock, type AdminGraphQLClient } from "./zones.server";
+
+// Multi-pin pickup selection (study §3.4 "Store pickup locations are shown
+// visually on Google Maps"). A shop can have several pickup points; the
+// shopper should be able to choose one before the date picker narrows to
+// that location's calendar. This resolves the *set* of eligible pickup
+// locations; resolveAvailabilityRequest then still returns one location's
+// worth of dates (the chosen one, or the first eligible).
+
+export interface PickupLocationDto {
+  id: string;
+  name: string;
+  address: string;
+  lat: number | null;
+  lng: number | null;
+}
+
+export interface PickupLocationFilterInput {
+  /** All active locations for the shop (already narrowed by any ProductRule allowedLocationIds). */
+  candidates: Array<{ id: string }>;
+  /** Location ids that have at least one PICKUP SlotTemplate — a location with no pickup slots can't be picked up from. */
+  pickupTemplateLocationIds: Set<string>;
+  /** Location ids that stock the cart (identity set when the inventory check is off). */
+  stockedLocationIds: Set<string>;
+}
+
+/**
+ * Pure intersection: a pickup location must be an active candidate, offer
+ * PICKUP slots, and stock the cart. Order is preserved from `candidates`
+ * (which the caller sorts by createdAt).
+ */
+export function filterPickupLocationIds(input: PickupLocationFilterInput): string[] {
+  const { candidates, pickupTemplateLocationIds, stockedLocationIds } = input;
+  return candidates
+    .map((c) => c.id)
+    .filter((id) => pickupTemplateLocationIds.has(id) && stockedLocationIds.has(id));
+}
+
+/**
+ * The eligible pickup locations for a shop, oldest-first. Applies the same
+ * ProductRule location restriction and inventory exclusion as the single-
+ * location path in resolveAvailabilityRequest, so the map/list the shopper
+ * sees never offers a location the order can't actually use.
+ */
+export async function resolvePickupLocations(
+  shopDomain: string,
+  opts: {
+    allowedLocationIds?: string[] | null;
+    admin?: AdminGraphQLClient;
+    productVariantGids?: string[];
+  } = {},
+): Promise<PickupLocationDto[]> {
+  const locationWhere =
+    opts.allowedLocationIds != null ? { id: { in: opts.allowedLocationIds } } : {};
+
+  const [candidates, pickupTemplates] = await Promise.all([
+    db.location.findMany({
+      where: { shopDomain, active: true, ...locationWhere },
+      orderBy: { createdAt: "asc" },
+      select: { id: true, name: true, address: true, lat: true, lng: true },
+    }),
+    db.slotTemplate.findMany({
+      where: { shopDomain, method: "PICKUP" as Method },
+      select: { locationId: true },
+    }),
+  ]);
+
+  const pickupTemplateLocationIds = new Set(pickupTemplates.map((t) => t.locationId));
+
+  const stockCheckEnabled = Boolean(opts.admin) && (opts.productVariantGids?.length ?? 0) > 0;
+  const stockedLocationIds = stockCheckEnabled
+    ? await excludeLocationsWithoutStock(
+        opts.admin!,
+        candidates.map((c) => c.id),
+        opts.productVariantGids!,
+      )
+    : new Set(candidates.map((c) => c.id));
+
+  const eligibleIds = new Set(
+    filterPickupLocationIds({
+      candidates,
+      pickupTemplateLocationIds,
+      stockedLocationIds,
+    }),
+  );
+
+  return candidates
+    .filter((c) => eligibleIds.has(c.id))
+    .map((c) => ({ id: c.id, name: c.name, address: c.address, lat: c.lat, lng: c.lng }));
+}
diff --git a/extensions/checkout-datetime/locales/en.default.json b/extensions/checkout-datetime/locales/en.default.json
index b4cbb96..3e38a8f 100644
--- a/extensions/checkout-datetime/locales/en.default.json
+++ b/extensions/checkout-datetime/locales/en.default.json
@@ -14,6 +14,7 @@
   "postal_code": "Enter your postal/ZIP code",
   "postal_code_submit": "Check availability",
   "out_of_area": "Sorry, we don't deliver to this address.",
+  "choose_pickup_location": "Choose a pickup location",
   "confirmation_pickup": "Pickup",
   "confirmation_delivery": "Delivery",
   "confirmation_shipping": "Shipping"
diff --git a/extensions/checkout-datetime/package.json b/extensions/checkout-datetime/package.json
index ce1ffcb..75ec5b9 100644
--- a/extensions/checkout-datetime/package.json
+++ b/extensions/checkout-datetime/package.json
@@ -12,6 +12,6 @@
     "react": "^18.3.1"
   },
   "devDependencies": {
-    "typescript": "^7.0.2"
+    "typescript": "^5.6.3"
   }
 }
diff --git a/extensions/checkout-datetime/shopify.d.ts b/extensions/checkout-datetime/shopify.d.ts
deleted file mode 100644
index c7be4e3..0000000
--- a/extensions/checkout-datetime/shopify.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import '@shopify/ui-extensions';
-
-//@ts-ignore
-declare module './src/Checkout.jsx' {
-  const shopify: import('@shopify/ui-extensions/purchase.checkout.block.render').Api;
-  const globalThis: { shopify: typeof shopify };
-}
-
-//@ts-ignore
-declare module './src/ThankYou.jsx' {
-  const shopify: import('@shopify/ui-extensions/purchase.thank-you.block.render').Api;
-  const globalThis: { shopify: typeof shopify };
-}
-
-//@ts-ignore
-declare module './src/OrderStatus.jsx' {
-  const shopify: import('@shopify/ui-extensions/customer-account.order-status.block.render').Api;
-  const globalThis: { shopify: typeof shopify };
-}
diff --git a/extensions/checkout-datetime/shopify.extension.toml b/extensions/checkout-datetime/shopify.extension.toml
index 6ac8612..d6a64b9 100644
--- a/extensions/checkout-datetime/shopify.extension.toml
+++ b/extensions/checkout-datetime/shopify.extension.toml
@@ -4,6 +4,8 @@ api_version = "2025-10"
 type = "ui_extension"
 name = "t:name"
 handle = "checkout-datetime"
+
+uid = "14165501-9e99-cb7d-e2bf-2e25f3028ca218bc5e8a"
 description = "Native delivery date & time picker in checkout (Plus), plus confirmation blocks on the Thank you and Order status pages (all plans)."
 
 # The picker calls this app's own backend (checkout.scheduling.* routes,
diff --git a/extensions/checkout-datetime/src/Checkout.jsx b/extensions/checkout-datetime/src/Checkout.jsx
index fcefb75..a51e0ba 100644
--- a/extensions/checkout-datetime/src/Checkout.jsx
+++ b/extensions/checkout-datetime/src/Checkout.jsx
@@ -32,6 +32,7 @@ function Extension() {
 
   const [method, setMethod] = useState(initialMethod);
   const [postalCode, setPostalCode] = useState("");
+  const [pickupLocationId, setPickupLocationId] = useState(/** @type {string | null} */ (null));
   const [availability, setAvailability] = useState(/** @type {any} */ (null));
   const [date, setDate] = useState("");
   const [status, setStatus] = useState("idle"); // idle|loading|error
@@ -39,17 +40,26 @@ function Extension() {
 
   const needsPostal = method === "LOCAL_DELIVERY";
 
-  async function loadAvailability() {
+  /** @param {string | null} [locId] */
+  async function loadAvailability(locId) {
     setStatus("loading");
     setAvailability(null);
     setDate("");
     try {
       const params = new URLSearchParams({ method, days: "14" });
       if (needsPostal && postalCode) params.set("postalCode", postalCode);
+      if (locId) params.set("locationId", locId);
       const base = backendBase(settings);
       const token = await sessionToken.get();
       const res = await authedFetch(base, token, `/checkout/scheduling/availability?${params.toString()}`);
       const body = await res.json();
+      // Multi-pin pickup (study §3.4): more than one eligible pickup point and
+      // none picked yet → let the shopper choose before we show a calendar.
+      if (method === "PICKUP" && !locId && (body.pickupLocations?.length ?? 0) > 1) {
+        setAvailability(body);
+        setStatus("idle");
+        return;
+      }
       if (!res.ok || !body.locationId) {
         setStatus("idle");
         setAvailability({ error: body.error || translate("out_of_area"), dates: {} });
@@ -63,10 +73,14 @@ function Extension() {
   }
 
   useEffect(() => {
+    setPickupLocationId(null);
     if (!needsPostal) loadAvailability();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [method]);
 
+  const pickupLocations = availability?.pickupLocations ?? [];
+  const needsPickupChoice = method === "PICKUP" && !pickupLocationId && pickupLocations.length > 1;
+
   /** @type {string[]} */
   const dates = useMemo(() => Object.keys(availability?.dates ?? {}).sort(), [availability]);
   /** @type {any[]} */
@@ -172,7 +186,25 @@ function Extension() {
       {status === "error" && <Banner status="critical">{translate("error")}</Banner>}
       {availability?.error && <Banner status="warning">{availability.error}</Banner>}
 
-      {dates.length > 0 && (
+      {needsPickupChoice && <Text>{translate("choose_pickup_location")}</Text>}
+      {needsPickupChoice && (
+        <ChoiceList
+          name="dd-pickup-location"
+          value=""
+          onChange={(/** @type {string} */ val) => {
+            setPickupLocationId(val);
+            loadAvailability(val);
+          }}
+        >
+          {pickupLocations.map((/** @type {any} */ loc) => (
+            <Choice key={loc.id} id={loc.id}>
+              {loc.name}{loc.address ? ` — ${loc.address}` : ""}
+            </Choice>
+          ))}
+        </ChoiceList>
+      )}
+
+      {!needsPickupChoice && dates.length > 0 && (
         <ChoiceList name="dd-date" value={date} onChange={(/** @type {string} */ val) => setDate(val)}>
           {dates.map((d) => (
             <Choice key={d} id={d}>
@@ -181,7 +213,7 @@ function Extension() {
           ))}
         </ChoiceList>
       )}
-      {availability && !availability.error && dates.length === 0 && status === "idle" && (
+      {!needsPickupChoice && availability && !availability.error && dates.length === 0 && status === "idle" && (
         <Text>{translate("no_dates")}</Text>
       )}
 
diff --git a/extensions/checkout-datetime/tsconfig.json b/extensions/checkout-datetime/tsconfig.json
index d3585dc..4c534a1 100644
--- a/extensions/checkout-datetime/tsconfig.json
+++ b/extensions/checkout-datetime/tsconfig.json
@@ -10,6 +10,6 @@
     "esModuleInterop": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*", "shopify.d.ts"],
+  "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/extensions/datetime-widget/assets/datetime-widget.css b/extensions/datetime-widget/assets/datetime-widget.css
index 79e8996..06a43b7 100644
--- a/extensions/datetime-widget/assets/datetime-widget.css
+++ b/extensions/datetime-widget/assets/datetime-widget.css
@@ -119,3 +119,37 @@
 .dd-widget__preview-item {
   font-size: 0.9rem;
 }
+
+.dd-widget__pickup-locations {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.dd-widget__pickup-location {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.1rem;
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid currentColor;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+.dd-widget__pickup-location[aria-pressed="true"] {
+  outline: 2px solid currentColor;
+}
+
+.dd-widget__pickup-location-name {
+  font-weight: 600;
+}
+
+.dd-widget__pickup-location-address {
+  font-size: 0.8rem;
+  opacity: 0.75;
+}
diff --git a/extensions/datetime-widget/assets/datetime-widget.js b/extensions/datetime-widget/assets/datetime-widget.js
index 9d998b4..52fbed8 100644
--- a/extensions/datetime-widget/assets/datetime-widget.js
+++ b/extensions/datetime-widget/assets/datetime-widget.js
@@ -1 +1 @@
-"use strict";(()=>{var k=Object.defineProperty;var S=(i,t,e)=>t in i?k(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var c=(i,t,e)=>S(i,typeof t!="symbol"?t+"":t,e);var M="/apps/scheduling";function C(i){let t=Math.floor(i/60),e=i%60,n=t<12?"AM":"PM";return`${t%12===0?12:t%12}:${e.toString().padStart(2,"0")} ${n}`}function p(i){return h(i.slice(0,10))}function v(i){return i.arrivalRangeStart&&i.arrivalRangeEnd?`Arrives ${p(i.arrivalRangeStart)}\u2013${p(i.arrivalRangeEnd)}`:i.arrivalRangeStart?`Arrives from ${p(i.arrivalRangeStart)}`:i.arrivalRangeEnd?`Arrives by ${p(i.arrivalRangeEnd)}`:`${C(i.startMin)}\u2013${C(i.endMin)}`}function h(i){let[t,e,n]=i.split("-").map(Number);return new Date(Date.UTC(t,e-1,n)).toLocaleDateString(void 0,{weekday:"short",month:"short",day:"numeric",timeZone:"UTC"})}function I(i){if(!i||i.indexOf("&")===-1)return i;let t=document.createElement("textarea");return t.innerHTML=i,t.value}function E(i){let t=i.dataset,e=(a,o)=>{let r=t[a];return r?I(r):o},n=[];return t.showShipping==="true"&&n.push({value:"SHIPPING",label:e("labelShipping","Shipping"),attrLabel:e("attrLabelShipping","Shipping date")}),t.showLocalDelivery==="true"&&n.push({value:"LOCAL_DELIVERY",label:e("labelLocalDelivery","Local delivery"),attrLabel:e("attrLabelLocalDelivery","Delivery date")}),t.showPickup==="true"&&n.push({value:"PICKUP",label:e("labelPickup","Pickup"),attrLabel:e("attrLabelPickup","Pickup date")}),{root:i,heading:e("heading",""),locationId:t.locationId||null,googleMapsApiKey:t.googleMapsApiKey||null,mode:t.mode==="preview"?"preview":"full",methods:n,labels:{chooseDate:e("labelChooseDate","Choose a date"),chooseTime:e("labelChooseTime","Choose a time"),noDates:e("labelNoDates","No dates are available right now."),confirmed:e("labelConfirmed","Confirmed for"),change:e("labelChange","Change"),loading:e("labelLoading","Loading available dates\u2026"),error:e("labelError","Couldn't load available dates. Please try again."),postalCodeLabel:e("labelPostalCode","Enter your postal/ZIP code"),postalCodeSubmit:e("labelPostalCodeSubmit","Check availability"),outOfArea:e("labelOutOfArea","Sorry, we don't deliver to this address."),earliestPrefix:e("labelEarliestPrefix","Earliest"),deliveryAtCheckout:e("labelDeliveryAtCheckout","Enter your address at checkout to see local delivery dates.")}}}async function w(){var e;let t=await(await fetch("/cart.js",{headers:{Accept:"application/json"}})).json();return{token:t.token,lines:((e=t.items)!=null?e:[]).map(n=>{var a,o,r;return{vendor:(a=n.vendor)!=null?a:"",productType:(o=n.product_type)!=null?o:"",productId:`gid://shopify/Product/${n.product_id}`,variantId:`gid://shopify/ProductVariant/${(r=n.variant_id)!=null?r:n.id}`}})}}async function L(i,t,e,n){let a=new URLSearchParams({method:i,days:"14"});t&&a.set("locationId",t),n&&a.set("postalCode",n),e.lines.length>0&&(a.set("cartLines",JSON.stringify(e.lines.map(s=>({vendor:s.vendor,productType:s.productType})))),a.set("productIds",e.lines.map(s=>s.productId).join(",")),a.set("variantIds",e.lines.map(s=>s.variantId).join(",")));let o=await fetch(`${M}/availability?${a.toString()}`,{headers:{Accept:"application/json"}}),r=await o.json();if(!o.ok)throw new Error(r.error||`Request failed (${o.status})`);return r}async function _(i){let t=await fetch(`${M}/hold`,{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify(i)}),e=await t.json();return!t.ok&&i.intent==="create"?{success:!1,error:e.error||"Slot unavailable"}:e}async function A(i,t,e){await fetch("/cart/update.js",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({attributes:{[i]:e,...t}})})}var f=null;function P(i){return f||(f=new Promise((t,e)=>{let n="__ddMapsReady";window[n]=()=>t();let a=document.createElement("script");a.src=`https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(i)}&callback=${n}`,a.async=!0,a.onerror=()=>e(new Error("Failed to load Google Maps")),document.head.appendChild(a)}),f)}async function T(i,t,e,n,a){try{await P(t);let o=window.google,r=new o.maps.Map(i,{center:{lat:e,lng:n},zoom:13});new o.maps.Marker({position:{lat:e,lng:n},map:r,title:a})}catch{i.hidden=!0}}var b=class{constructor(t){c(this,"config");c(this,"el",{heading:document.createElement("h3"),methodRow:document.createElement("div"),postalRow:document.createElement("div"),mapContainer:document.createElement("div"),dateRow:document.createElement("div"),timeRow:document.createElement("div"),status:document.createElement("p"),confirmation:document.createElement("div")});c(this,"selectedMethod",null);c(this,"selectedDate",null);c(this,"availability",null);c(this,"heldSlot",null);this.config=t}mount(){let{root:t,heading:e,methods:n}=this.config;if(t.classList.add("dd-widget--ready"),t.innerHTML="",n.length!==0){if(this.config.mode==="preview"){this.mountPreview();return}e&&(this.el.heading.className="dd-widget__heading",this.el.heading.textContent=e,t.appendChild(this.el.heading)),this.el.methodRow.className="dd-widget__row dd-widget__methods",this.el.postalRow.className="dd-widget__row dd-widget__postal",this.el.postalRow.hidden=!0,this.el.mapContainer.className="dd-widget__map",this.el.mapContainer.hidden=!0,this.el.dateRow.className="dd-widget__row dd-widget__dates",this.el.timeRow.className="dd-widget__row dd-widget__times",this.el.status.className="dd-widget__status",this.el.confirmation.className="dd-widget__confirmation",this.el.confirmation.hidden=!0,t.append(this.el.confirmation,this.el.methodRow,this.el.postalRow,this.el.mapContainer,this.el.dateRow,this.el.timeRow,this.el.status),n.length===1?this.selectMethod(n[0]):this.renderMethods()}}async mountPreview(){let{root:t,heading:e,methods:n}=this.config;e&&(this.el.heading.className="dd-widget__heading",this.el.heading.textContent=e,t.appendChild(this.el.heading));let a=document.createElement("ul");a.className="dd-widget__preview",t.appendChild(a);let o=await w().catch(()=>({token:"",lines:[]}));await Promise.all(n.map(async r=>{var d;let s=document.createElement("li");if(s.className="dd-widget__preview-item",r.value==="LOCAL_DELIVERY"){s.textContent=this.config.labels.deliveryAtCheckout,a.appendChild(s);return}s.textContent=this.config.labels.loading,a.appendChild(s);try{let g=await L(r.value,this.config.locationId,o),l=Object.keys((d=g.dates)!=null?d:{}).sort()[0];s.textContent=l?`${this.config.labels.earliestPrefix} ${r.label.toLowerCase()}: ${h(l)}`:`${r.label}: ${this.config.labels.noDates}`}catch{s.textContent=`${r.label}: ${this.config.labels.error}`}}))}renderMethods(){var t;this.el.methodRow.innerHTML="";for(let e of this.config.methods){let n=document.createElement("button");n.type="button",n.className="dd-widget__pill",n.textContent=e.label,n.setAttribute("aria-pressed",String(((t=this.selectedMethod)==null?void 0:t.value)===e.value)),n.addEventListener("click",()=>this.selectMethod(e)),this.el.methodRow.appendChild(n)}}async selectMethod(t){if(this.selectedMethod=t,this.selectedDate=null,this.el.timeRow.innerHTML="",this.el.dateRow.innerHTML="",this.el.mapContainer.hidden=!0,this.el.confirmation.hidden=!1,this.el.confirmation.hidden=!0,this.config.methods.length>1&&this.renderMethods(),t.value==="LOCAL_DELIVERY"){this.renderPostalCodeInput(t);return}this.el.postalRow.hidden=!0,await this.loadAvailability(t)}renderPostalCodeInput(t){this.el.postalRow.hidden=!1,this.el.postalRow.innerHTML="",this.el.status.textContent="";let e=document.createElement("input");e.type="text",e.className="dd-widget__input",e.placeholder=this.config.labels.postalCodeLabel,e.setAttribute("aria-label",this.config.labels.postalCodeLabel);let n=document.createElement("button");n.type="button",n.className="dd-widget__pill",n.textContent=this.config.labels.postalCodeSubmit,n.addEventListener("click",async()=>{let a=e.value.trim();a&&await this.loadAvailability(t,a)}),e.addEventListener("keydown",a=>{a.key==="Enter"&&n.click()}),this.el.postalRow.append(e,n)}async loadAvailability(t,e){this.el.status.textContent=this.config.labels.loading,this.el.dateRow.innerHTML="";try{let n=await w();if(this.availability=await L(t.value,this.config.locationId,n,e),!this.availability.locationId){this.el.status.textContent=this.availability.error||this.config.labels.outOfArea;return}t.value==="PICKUP"&&this.config.googleMapsApiKey&&this.showPickupMap(),this.renderDates()}catch{this.el.status.textContent=this.config.labels.error}}showPickupMap(){var e;let t=this.availability;!(t!=null&&t.locationLat)||!(t!=null&&t.locationLng)||!this.config.googleMapsApiKey||(this.el.mapContainer.hidden=!1,T(this.el.mapContainer,this.config.googleMapsApiKey,t.locationLat,t.locationLng,(e=t.locationName)!=null?e:""))}renderDates(){var e,n;let t=Object.keys((n=(e=this.availability)==null?void 0:e.dates)!=null?n:{}).sort();if(this.el.dateRow.innerHTML="",t.length===0){this.el.status.textContent=this.config.labels.noDates;return}this.el.status.textContent=this.config.labels.chooseDate;for(let a of t){let o=document.createElement("button");o.type="button",o.className="dd-widget__pill",o.textContent=h(a),o.setAttribute("aria-pressed",String(this.selectedDate===a)),o.addEventListener("click",()=>this.selectDate(a)),this.el.dateRow.appendChild(o)}}selectDate(t){var n,a;this.selectedDate=t;for(let o of Array.from(this.el.dateRow.children))o.setAttribute("aria-pressed",String(o.textContent===h(t)));let e=(a=(n=this.availability)==null?void 0:n.dates[t])!=null?a:[];this.el.timeRow.innerHTML="",this.el.status.textContent=this.config.labels.chooseTime;for(let o of e){let r=document.createElement("button");r.type="button",r.className="dd-widget__pill",r.textContent=v(o),r.addEventListener("click",()=>this.selectSlot(t,o)),this.el.timeRow.appendChild(r)}}async selectSlot(t,e){var s;let n=this.selectedMethod,a=this.availability,o=a.rate?` (${a.rate.label})`:"",r=e.arrivalRangeStart||e.arrivalRangeEnd?`Ships ${h(t)}, ${v(e)}${o}`:`${h(t)}, ${v(e)}${o}`;this.el.status.textContent=this.config.labels.loading;try{let d=await w(),g=await _({intent:"create",locationId:a.locationId,method:n.value,date:t,startMin:e.startMin,cartToken:d.token,cartLines:d.lines.map(m=>({vendor:m.vendor,productType:m.productType})),productIds:d.lines.map(m=>m.productId)});if(!g.success){this.el.status.textContent=g.error||this.config.labels.error,await this.selectMethod(n);return}this.heldSlot={locationId:a.locationId,method:n.value,date:t,startMin:e.startMin,cartToken:d.token,zoneId:(s=a.zoneId)!=null?s:null};let l={dd_method:n.value,dd_date:t,dd_start_min:String(e.startMin),dd_end_min:String(e.endMin),dd_location_id:a.locationId};a.zoneId&&(l.dd_zone_id=a.zoneId),a.rate&&(l.dd_rate_label=a.rate.label),e.arrivalRangeStart&&(l.dd_arrival_range_start=e.arrivalRangeStart),e.arrivalRangeEnd&&(l.dd_arrival_range_end=e.arrivalRangeEnd),await A(n.attrLabel,l,r),this.el.status.textContent="",this.el.methodRow.hidden=!0,this.el.postalRow.hidden=!0,this.el.mapContainer.hidden=!0,this.el.dateRow.hidden=!0,this.el.timeRow.hidden=!0,this.el.confirmation.hidden=!1,this.el.confirmation.innerHTML="";let y=document.createElement("p");y.textContent=`${this.config.labels.confirmed} ${r}`;let u=document.createElement("button");u.type="button",u.className="dd-widget__link",u.textContent=this.config.labels.change,u.addEventListener("click",()=>{this.heldSlot&&(_({intent:"release",...this.heldSlot}),this.heldSlot=null),this.el.methodRow.hidden=!1,this.el.dateRow.hidden=!1,this.el.timeRow.hidden=!1,this.el.confirmation.hidden=!0}),this.el.confirmation.append(y,u)}catch{this.el.status.textContent=this.config.labels.error}}},D=['form[action*="/cart"] button[name="checkout"]','form[action*="/cart"] input[name="checkout"]','[name="checkout"]',"#checkout",'a[href="/checkout"]'];function $(){for(let i of D){let t=document.querySelector(i);if(t)return t}return null}function x(){return window.location.pathname.replace(/\/+$/,"").endsWith("/cart")}function N(){if(!x()||document.querySelector("[data-dd-widget]"))return;let i=document.getElementById("dd-widget-cart-template");if(!i)return;let t=$();if(!t)return;let e=document.createElement("div");e.setAttribute("data-dd-widget",""),e.classList.add("dd-widget--cart-injected");for(let n of Array.from(i.attributes))n.name!=="id"&&e.setAttribute(n.name,n.value);t.insertAdjacentElement("beforebegin",e),new b(E(e)).mount()}function R(){document.querySelectorAll("[data-dd-widget]").forEach(t=>{new b(E(t)).mount()}),N()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",R):R();})();
+"use strict";(()=>{var P=Object.defineProperty;var I=(a,t,e)=>t in a?P(a,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[t]=e;var c=(a,t,e)=>I(a,typeof t!="symbol"?t+"":t,e);var M="/apps/scheduling";function C(a){let t=Math.floor(a/60),e=a%60,n=t<12?"AM":"PM";return`${t%12===0?12:t%12}:${e.toString().padStart(2,"0")} ${n}`}function m(a){return h(a.slice(0,10))}function w(a){return a.arrivalRangeStart&&a.arrivalRangeEnd?`Arrives ${m(a.arrivalRangeStart)}\u2013${m(a.arrivalRangeEnd)}`:a.arrivalRangeStart?`Arrives from ${m(a.arrivalRangeStart)}`:a.arrivalRangeEnd?`Arrives by ${m(a.arrivalRangeEnd)}`:`${C(a.startMin)}\u2013${C(a.endMin)}`}function h(a){let[t,e,n]=a.split("-").map(Number);return new Date(Date.UTC(t,e-1,n)).toLocaleDateString(void 0,{weekday:"short",month:"short",day:"numeric",timeZone:"UTC"})}function A(a){if(!a||a.indexOf("&")===-1)return a;let t=document.createElement("textarea");return t.innerHTML=a,t.value}function E(a){let t=a.dataset,e=(i,o)=>{let s=t[i];return s?A(s):o},n=[];return t.showShipping==="true"&&n.push({value:"SHIPPING",label:e("labelShipping","Shipping"),attrLabel:e("attrLabelShipping","Shipping date")}),t.showLocalDelivery==="true"&&n.push({value:"LOCAL_DELIVERY",label:e("labelLocalDelivery","Local delivery"),attrLabel:e("attrLabelLocalDelivery","Delivery date")}),t.showPickup==="true"&&n.push({value:"PICKUP",label:e("labelPickup","Pickup"),attrLabel:e("attrLabelPickup","Pickup date")}),{root:a,heading:e("heading",""),locationId:t.locationId||null,googleMapsApiKey:t.googleMapsApiKey||null,mode:t.mode==="preview"?"preview":"full",methods:n,labels:{chooseDate:e("labelChooseDate","Choose a date"),chooseTime:e("labelChooseTime","Choose a time"),noDates:e("labelNoDates","No dates are available right now."),confirmed:e("labelConfirmed","Confirmed for"),change:e("labelChange","Change"),loading:e("labelLoading","Loading available dates\u2026"),error:e("labelError","Couldn't load available dates. Please try again."),postalCodeLabel:e("labelPostalCode","Enter your postal/ZIP code"),postalCodeSubmit:e("labelPostalCodeSubmit","Check availability"),outOfArea:e("labelOutOfArea","Sorry, we don't deliver to this address."),earliestPrefix:e("labelEarliestPrefix","Earliest"),deliveryAtCheckout:e("labelDeliveryAtCheckout","Enter your address at checkout to see local delivery dates."),choosePickupLocation:e("labelChoosePickupLocation","Choose a pickup location")}}}async function v(){var e;let t=await(await fetch("/cart.js",{headers:{Accept:"application/json"}})).json();return{token:t.token,lines:((e=t.items)!=null?e:[]).map(n=>{var i,o,s;return{vendor:(i=n.vendor)!=null?i:"",productType:(o=n.product_type)!=null?o:"",productId:`gid://shopify/Product/${n.product_id}`,variantId:`gid://shopify/ProductVariant/${(s=n.variant_id)!=null?s:n.id}`}})}}async function L(a,t,e,n){let i=new URLSearchParams({method:a,days:"14"});t&&i.set("locationId",t),n&&i.set("postalCode",n),e.lines.length>0&&(i.set("cartLines",JSON.stringify(e.lines.map(r=>({vendor:r.vendor,productType:r.productType})))),i.set("productIds",e.lines.map(r=>r.productId).join(",")),i.set("variantIds",e.lines.map(r=>r.variantId).join(",")));let o=await fetch(`${M}/availability?${i.toString()}`,{headers:{Accept:"application/json"}}),s=await o.json();if(!o.ok)throw new Error(s.error||`Request failed (${o.status})`);return s}async function k(a){let t=await fetch(`${M}/hold`,{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify(a)}),e=await t.json();return!t.ok&&a.intent==="create"?{success:!1,error:e.error||"Slot unavailable"}:e}async function S(a,t,e){await fetch("/cart/update.js",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({attributes:{[a]:e,...t}})})}var f=null;function T(a){return f||(f=new Promise((t,e)=>{let n="__ddMapsReady";window[n]=()=>t();let i=document.createElement("script");i.src=`https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(a)}&callback=${n}`,i.async=!0,i.onerror=()=>e(new Error("Failed to load Google Maps")),document.head.appendChild(i)}),f)}async function _(a,t,e){if(e.length===0){a.hidden=!0;return}try{await T(t);let n=window.google,i=new n.maps.Map(a,{center:{lat:e[0].lat,lng:e[0].lng},zoom:13});for(let o of e)new n.maps.Marker({position:{lat:o.lat,lng:o.lng},map:i,title:o.title})}catch{a.hidden=!0}}var b=class{constructor(t){c(this,"config");c(this,"el",{heading:document.createElement("h3"),methodRow:document.createElement("div"),postalRow:document.createElement("div"),pickupRow:document.createElement("div"),mapContainer:document.createElement("div"),dateRow:document.createElement("div"),timeRow:document.createElement("div"),status:document.createElement("p"),confirmation:document.createElement("div")});c(this,"selectedMethod",null);c(this,"selectedDate",null);c(this,"selectedPickupLocationId",null);c(this,"availability",null);c(this,"heldSlot",null);this.config=t}mount(){let{root:t,heading:e,methods:n}=this.config;if(t.classList.add("dd-widget--ready"),t.innerHTML="",n.length!==0){if(this.config.mode==="preview"){this.mountPreview();return}e&&(this.el.heading.className="dd-widget__heading",this.el.heading.textContent=e,t.appendChild(this.el.heading)),this.el.methodRow.className="dd-widget__row dd-widget__methods",this.el.postalRow.className="dd-widget__row dd-widget__postal",this.el.postalRow.hidden=!0,this.el.pickupRow.className="dd-widget__row dd-widget__pickup-locations",this.el.pickupRow.hidden=!0,this.el.mapContainer.className="dd-widget__map",this.el.mapContainer.hidden=!0,this.el.dateRow.className="dd-widget__row dd-widget__dates",this.el.timeRow.className="dd-widget__row dd-widget__times",this.el.status.className="dd-widget__status",this.el.confirmation.className="dd-widget__confirmation",this.el.confirmation.hidden=!0,t.append(this.el.confirmation,this.el.methodRow,this.el.postalRow,this.el.pickupRow,this.el.mapContainer,this.el.dateRow,this.el.timeRow,this.el.status),n.length===1?this.selectMethod(n[0]):this.renderMethods()}}async mountPreview(){let{root:t,heading:e,methods:n}=this.config;e&&(this.el.heading.className="dd-widget__heading",this.el.heading.textContent=e,t.appendChild(this.el.heading));let i=document.createElement("ul");i.className="dd-widget__preview",t.appendChild(i);let o=await v().catch(()=>({token:"",lines:[]}));await Promise.all(n.map(async s=>{var l;let r=document.createElement("li");if(r.className="dd-widget__preview-item",s.value==="LOCAL_DELIVERY"){r.textContent=this.config.labels.deliveryAtCheckout,i.appendChild(r);return}r.textContent=this.config.labels.loading,i.appendChild(r);try{let u=await L(s.value,this.config.locationId,o),d=Object.keys((l=u.dates)!=null?l:{}).sort()[0];r.textContent=d?`${this.config.labels.earliestPrefix} ${s.label.toLowerCase()}: ${h(d)}`:`${s.label}: ${this.config.labels.noDates}`}catch{r.textContent=`${s.label}: ${this.config.labels.error}`}}))}renderMethods(){var t;this.el.methodRow.innerHTML="";for(let e of this.config.methods){let n=document.createElement("button");n.type="button",n.className="dd-widget__pill",n.textContent=e.label,n.setAttribute("aria-pressed",String(((t=this.selectedMethod)==null?void 0:t.value)===e.value)),n.addEventListener("click",()=>this.selectMethod(e)),this.el.methodRow.appendChild(n)}}async selectMethod(t){if(this.selectedMethod=t,this.selectedDate=null,this.selectedPickupLocationId=null,this.el.timeRow.innerHTML="",this.el.dateRow.innerHTML="",this.el.pickupRow.hidden=!0,this.el.pickupRow.innerHTML="",this.el.mapContainer.hidden=!0,this.el.confirmation.hidden=!1,this.el.confirmation.hidden=!0,this.config.methods.length>1&&this.renderMethods(),t.value==="LOCAL_DELIVERY"){this.renderPostalCodeInput(t);return}this.el.postalRow.hidden=!0,await this.loadAvailability(t)}renderPostalCodeInput(t){this.el.postalRow.hidden=!1,this.el.postalRow.innerHTML="",this.el.status.textContent="";let e=document.createElement("input");e.type="text",e.className="dd-widget__input",e.placeholder=this.config.labels.postalCodeLabel,e.setAttribute("aria-label",this.config.labels.postalCodeLabel);let n=document.createElement("button");n.type="button",n.className="dd-widget__pill",n.textContent=this.config.labels.postalCodeSubmit,n.addEventListener("click",async()=>{let i=e.value.trim();i&&await this.loadAvailability(t,i)}),e.addEventListener("keydown",i=>{i.key==="Enter"&&n.click()}),this.el.postalRow.append(e,n)}async loadAvailability(t,e,n){var i,o,s;this.el.status.textContent=this.config.labels.loading,this.el.dateRow.innerHTML="";try{let r=await v(),l=(o=(i=this.config.locationId)!=null?i:n)!=null?o:null;this.availability=await L(t.value,l,r,e);let u=(s=this.availability.pickupLocations)!=null?s:[];if(t.value==="PICKUP"&&!this.config.locationId&&!this.selectedPickupLocationId&&u.length>1){this.renderPickupLocations(t,u);return}if(!this.availability.locationId){this.el.status.textContent=this.availability.error||this.config.labels.outOfArea;return}t.value==="PICKUP"&&this.config.googleMapsApiKey&&this.showPickupMap(),this.renderDates()}catch{this.el.status.textContent=this.config.labels.error}}renderPickupLocations(t,e){if(this.el.pickupRow.hidden=!1,this.el.pickupRow.innerHTML="",this.el.status.textContent=this.config.labels.choosePickupLocation,this.config.googleMapsApiKey){let n=e.filter(i=>i.lat!=null&&i.lng!=null).map(i=>({lat:i.lat,lng:i.lng,title:i.name}));n.length>0&&(this.el.mapContainer.hidden=!1,_(this.el.mapContainer,this.config.googleMapsApiKey,n))}for(let n of e){let i=document.createElement("button");i.type="button",i.className="dd-widget__pickup-location",i.setAttribute("aria-pressed",String(this.selectedPickupLocationId===n.id));let o=document.createElement("span");o.className="dd-widget__pickup-location-name",o.textContent=n.name;let s=document.createElement("span");s.className="dd-widget__pickup-location-address",s.textContent=n.address,i.append(o,s),i.addEventListener("click",async()=>{this.selectedPickupLocationId=n.id,this.el.pickupRow.hidden=!0,await this.loadAvailability(t,void 0,n.id)}),this.el.pickupRow.appendChild(i)}}showPickupMap(){var n,i;let t=this.availability;if(!this.config.googleMapsApiKey)return;let e=((n=t==null?void 0:t.pickupLocations)!=null?n:[]).filter(o=>o.lat!=null&&o.lng!=null).map(o=>({lat:o.lat,lng:o.lng,title:o.name}));e.length===0&&(t==null?void 0:t.locationLat)!=null&&(t==null?void 0:t.locationLng)!=null&&e.push({lat:t.locationLat,lng:t.locationLng,title:(i=t.locationName)!=null?i:""}),e.length!==0&&(this.el.mapContainer.hidden=!1,_(this.el.mapContainer,this.config.googleMapsApiKey,e))}renderDates(){var e,n;let t=Object.keys((n=(e=this.availability)==null?void 0:e.dates)!=null?n:{}).sort();if(this.el.dateRow.innerHTML="",t.length===0){this.el.status.textContent=this.config.labels.noDates;return}this.el.status.textContent=this.config.labels.chooseDate;for(let i of t){let o=document.createElement("button");o.type="button",o.className="dd-widget__pill",o.textContent=h(i),o.setAttribute("aria-pressed",String(this.selectedDate===i)),o.addEventListener("click",()=>this.selectDate(i)),this.el.dateRow.appendChild(o)}}selectDate(t){var n,i;this.selectedDate=t;for(let o of Array.from(this.el.dateRow.children))o.setAttribute("aria-pressed",String(o.textContent===h(t)));let e=(i=(n=this.availability)==null?void 0:n.dates[t])!=null?i:[];this.el.timeRow.innerHTML="",this.el.status.textContent=this.config.labels.chooseTime;for(let o of e){let s=document.createElement("button");s.type="button",s.className="dd-widget__pill",s.textContent=w(o),s.addEventListener("click",()=>this.selectSlot(t,o)),this.el.timeRow.appendChild(s)}}async selectSlot(t,e){var r;let n=this.selectedMethod,i=this.availability,o=i.rate?` (${i.rate.label})`:"",s=e.arrivalRangeStart||e.arrivalRangeEnd?`Ships ${h(t)}, ${w(e)}${o}`:`${h(t)}, ${w(e)}${o}`;this.el.status.textContent=this.config.labels.loading;try{let l=await v(),u=await k({intent:"create",locationId:i.locationId,method:n.value,date:t,startMin:e.startMin,cartToken:l.token,cartLines:l.lines.map(g=>({vendor:g.vendor,productType:g.productType})),productIds:l.lines.map(g=>g.productId)});if(!u.success){this.el.status.textContent=u.error||this.config.labels.error,await this.selectMethod(n);return}this.heldSlot={locationId:i.locationId,method:n.value,date:t,startMin:e.startMin,cartToken:l.token,zoneId:(r=i.zoneId)!=null?r:null};let d={dd_method:n.value,dd_date:t,dd_start_min:String(e.startMin),dd_end_min:String(e.endMin),dd_location_id:i.locationId};i.zoneId&&(d.dd_zone_id=i.zoneId),i.rate&&(d.dd_rate_label=i.rate.label),e.arrivalRangeStart&&(d.dd_arrival_range_start=e.arrivalRangeStart),e.arrivalRangeEnd&&(d.dd_arrival_range_end=e.arrivalRangeEnd),await S(n.attrLabel,d,s),this.el.status.textContent="",this.el.methodRow.hidden=!0,this.el.postalRow.hidden=!0,this.el.mapContainer.hidden=!0,this.el.dateRow.hidden=!0,this.el.timeRow.hidden=!0,this.el.confirmation.hidden=!1,this.el.confirmation.innerHTML="";let y=document.createElement("p");y.textContent=`${this.config.labels.confirmed} ${s}`;let p=document.createElement("button");p.type="button",p.className="dd-widget__link",p.textContent=this.config.labels.change,p.addEventListener("click",()=>{this.heldSlot&&(k({intent:"release",...this.heldSlot}),this.heldSlot=null),this.el.methodRow.hidden=!1,this.el.dateRow.hidden=!1,this.el.timeRow.hidden=!1,this.el.confirmation.hidden=!0}),this.el.confirmation.append(y,p)}catch{this.el.status.textContent=this.config.labels.error}}},D=['form[action*="/cart"] button[name="checkout"]','form[action*="/cart"] input[name="checkout"]','[name="checkout"]',"#checkout",'a[href="/checkout"]'];function x(){for(let a of D){let t=document.querySelector(a);if(t)return t}return null}function $(){return window.location.pathname.replace(/\/+$/,"").endsWith("/cart")}function N(){if(!$()||document.querySelector("[data-dd-widget]"))return;let a=document.getElementById("dd-widget-cart-template");if(!a)return;let t=x();if(!t)return;let e=document.createElement("div");e.setAttribute("data-dd-widget",""),e.classList.add("dd-widget--cart-injected");for(let n of Array.from(a.attributes))n.name!=="id"&&e.setAttribute(n.name,n.value);t.insertAdjacentElement("beforebegin",e),new b(E(e)).mount()}function R(){document.querySelectorAll("[data-dd-widget]").forEach(t=>{new b(E(t)).mount()}),N()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",R):R();})();
diff --git a/extensions/datetime-widget/blocks/app-embed.liquid b/extensions/datetime-widget/blocks/app-embed.liquid
index ff787fd..698b17a 100644
--- a/extensions/datetime-widget/blocks/app-embed.liquid
+++ b/extensions/datetime-widget/blocks/app-embed.liquid
@@ -41,6 +41,7 @@
     data-label-postal-code="{{ 'widget.postal_code' | t | escape }}"
     data-label-postal-code-submit="{{ 'widget.postal_code_submit' | t | escape }}"
     data-label-out-of-area="{{ 'widget.out_of_area' | t | escape }}"
+    data-label-choose-pickup-location="{{ 'widget.choose_pickup_location' | t | escape }}"
     {% if block.settings.location_id != blank %}data-location-id="{{ block.settings.location_id | escape }}"{% endif %}
     {% if block.settings.google_maps_api_key != blank %}data-google-maps-api-key="{{ block.settings.google_maps_api_key | escape }}"{% endif %}
   ></template>
diff --git a/extensions/datetime-widget/blocks/datetime-picker.liquid b/extensions/datetime-widget/blocks/datetime-picker.liquid
index 0ca7aa1..42e4145 100644
--- a/extensions/datetime-widget/blocks/datetime-picker.liquid
+++ b/extensions/datetime-widget/blocks/datetime-picker.liquid
@@ -21,6 +21,7 @@
   data-label-postal-code="{{ 'widget.postal_code' | t | escape }}"
   data-label-postal-code-submit="{{ 'widget.postal_code_submit' | t | escape }}"
   data-label-out-of-area="{{ 'widget.out_of_area' | t | escape }}"
+  data-label-choose-pickup-location="{{ 'widget.choose_pickup_location' | t | escape }}"
   {% if block.settings.location_id != blank %}data-location-id="{{ block.settings.location_id | escape }}"{% endif %}
   {% if block.settings.google_maps_api_key != blank %}data-google-maps-api-key="{{ block.settings.google_maps_api_key | escape }}"{% endif %}
   {{ block.shopify_attributes }}
diff --git a/extensions/datetime-widget/locales/en.default.json b/extensions/datetime-widget/locales/en.default.json
index fc6e524..d8a773c 100644
--- a/extensions/datetime-widget/locales/en.default.json
+++ b/extensions/datetime-widget/locales/en.default.json
@@ -18,7 +18,8 @@
     "postal_code_submit": "Check availability",
     "out_of_area": "Sorry, we don't deliver to this address.",
     "earliest_prefix": "Earliest",
-    "delivery_at_checkout": "Enter your address at checkout to see local delivery dates."
+    "delivery_at_checkout": "Enter your address at checkout to see local delivery dates.",
+    "choose_pickup_location": "Choose a pickup location"
   },
   "order_confirmation": {
     "pickup_label": "Pickup",
diff --git a/extensions/datetime-widget/locales/fr.json b/extensions/datetime-widget/locales/fr.json
index d3ddea7..6c36ad9 100644
--- a/extensions/datetime-widget/locales/fr.json
+++ b/extensions/datetime-widget/locales/fr.json
@@ -18,7 +18,8 @@
     "postal_code_submit": "Vérifier la disponibilité",
     "out_of_area": "Désolé, nous ne livrons pas à cette adresse.",
     "earliest_prefix": "Au plus tôt",
-    "delivery_at_checkout": "Saisissez votre adresse au paiement pour voir les dates de livraison locale."
+    "delivery_at_checkout": "Saisissez votre adresse au paiement pour voir les dates de livraison locale.",
+    "choose_pickup_location": "Choisissez un point de retrait"
   },
   "order_confirmation": {
     "pickup_label": "Retrait",
diff --git a/extensions/payment-customization/shopify.extension.toml b/extensions/payment-customization/shopify.extension.toml
index 9d63c88..62222c3 100644
--- a/extensions/payment-customization/shopify.extension.toml
+++ b/extensions/payment-customization/shopify.extension.toml
@@ -3,6 +3,8 @@ api_version = "2026-07"
 [[extensions]]
 name = "t:name"
 handle = "payment-customization"
+
+uid = "4f8a281d-8599-ed4f-dd32-1297c2872b96939fbf00"
 type = "function"
 description = "t:description"
 
diff --git a/tests/unit/pickup-locations.test.ts b/tests/unit/pickup-locations.test.ts
new file mode 100644
index 0000000..711b72e
--- /dev/null
+++ b/tests/unit/pickup-locations.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { filterPickupLocationIds } from "../../app/services/pickup-locations.server";
+
+const candidates = [{ id: "a" }, { id: "b" }, { id: "c" }, { id: "d" }];
+
+describe("filterPickupLocationIds", () => {
+  it("keeps only candidates that both offer PICKUP slots and stock the cart, in candidate order", () => {
+    const result = filterPickupLocationIds({
+      candidates,
+      pickupTemplateLocationIds: new Set(["a", "b", "c"]),
+      stockedLocationIds: new Set(["b", "c", "d"]),
+    });
+    expect(result).toEqual(["b", "c"]);
+  });
+
+  it("drops a location with no PICKUP slot template even if it's in stock", () => {
+    const result = filterPickupLocationIds({
+      candidates,
+      pickupTemplateLocationIds: new Set(["a"]),
+      stockedLocationIds: new Set(["a", "b", "c", "d"]),
+    });
+    expect(result).toEqual(["a"]);
+  });
+
+  it("drops a pickup-capable location that stocks none of the cart", () => {
+    const result = filterPickupLocationIds({
+      candidates,
+      pickupTemplateLocationIds: new Set(["a", "b"]),
+      stockedLocationIds: new Set(["b"]),
+    });
+    expect(result).toEqual(["b"]);
+  });
+
+  it("returns [] when nothing qualifies", () => {
+    expect(
+      filterPickupLocationIds({
+        candidates,
+        pickupTemplateLocationIds: new Set(["a"]),
+        stockedLocationIds: new Set(["b"]),
+      }),
+    ).toEqual([]);
+  });
+
+  it("preserves the candidate ordering (oldest-first) rather than set iteration order", () => {
+    const result = filterPickupLocationIds({
+      candidates: [{ id: "d" }, { id: "c" }, { id: "b" }, { id: "a" }],
+      pickupTemplateLocationIds: new Set(["a", "b", "c", "d"]),
+      stockedLocationIds: new Set(["a", "b", "c", "d"]),
+    });
+    expect(result).toEqual(["d", "c", "b", "a"]);
+  });
+});
diff --git a/widget-src/datetime-widget/datetime-widget.ts b/widget-src/datetime-widget/datetime-widget.ts
index fdab963..4c9e96a 100644
--- a/widget-src/datetime-widget/datetime-widget.ts
+++ b/widget-src/datetime-widget/datetime-widget.ts
@@ -34,11 +34,21 @@ interface RateDto {
   label: string;
 }
 
+interface PickupLocationDto {
+  id: string;
+  name: string;
+  address: string;
+  lat: number | null;
+  lng: number | null;
+}
+
 interface AvailabilityResponse {
   locationId: string | null;
   locationName?: string;
-  // TODO: Add pickupLocations array when backend supports returning multiple pickup locations for selection.
-  // pickupLocations?: Array<{ id: string, name: string, lat: number | null, lng: number | null }>;
+  // Every eligible pickup point (study §3.4 multi-pin pickup). Present only
+  // for method === "PICKUP"; `dates` is for whichever one is currently
+  // active — re-request with `locationId` to switch.
+  pickupLocations?: PickupLocationDto[];
   locationLat?: number | null;
   locationLng?: number | null;
   timezone?: string;
@@ -76,6 +86,7 @@ interface WidgetConfig {
     outOfArea: string;
     earliestPrefix: string;
     deliveryAtCheckout: string;
+    choosePickupLocation: string;
   };
 }
 
@@ -177,6 +188,7 @@ function readConfig(root: HTMLElement): WidgetConfig {
       outOfArea: get("labelOutOfArea", "Sorry, we don't deliver to this address."),
       earliestPrefix: get("labelEarliestPrefix", "Earliest"),
       deliveryAtCheckout: get("labelDeliveryAtCheckout", "Enter your address at checkout to see local delivery dates."),
+      choosePickupLocation: get("labelChoosePickupLocation", "Choose a pickup location"),
     },
   };
 }
@@ -300,12 +312,22 @@ interface GoogleMapsGlobal {
   };
 }
 
-async function renderPickupMap(container: HTMLElement, apiKey: string, lat: number, lng: number, title: string) {
+async function renderPickupMap(
+  container: HTMLElement,
+  apiKey: string,
+  points: Array<{ lat: number; lng: number; title: string }>,
+) {
+  if (points.length === 0) {
+    container.hidden = true;
+    return;
+  }
   try {
     await loadGoogleMaps(apiKey);
     const google = (window as unknown as { google: GoogleMapsGlobal }).google;
-    const map = new google.maps.Map(container, { center: { lat, lng }, zoom: 13 });
-    new google.maps.Marker({ position: { lat, lng }, map, title });
+    const map = new google.maps.Map(container, { center: { lat: points[0].lat, lng: points[0].lng }, zoom: 13 });
+    for (const p of points) {
+      new google.maps.Marker({ position: { lat: p.lat, lng: p.lng }, map, title: p.title });
+    }
   } catch {
     container.hidden = true; // no map, no crash — the date/time picker still works fine without it
   }
@@ -317,6 +339,7 @@ class DateTimeWidget {
     heading: document.createElement("h3"),
     methodRow: document.createElement("div"),
     postalRow: document.createElement("div"),
+    pickupRow: document.createElement("div"),
     mapContainer: document.createElement("div"),
     dateRow: document.createElement("div"),
     timeRow: document.createElement("div"),
@@ -325,6 +348,7 @@ class DateTimeWidget {
   };
   private selectedMethod: WidgetConfig["methods"][number] | null = null;
   private selectedDate: string | null = null;
+  private selectedPickupLocationId: string | null = null;
   private availability: AvailabilityResponse | null = null;
   private heldSlot:
     | { locationId: string; method: Method; date: string; startMin: number; cartToken: string; zoneId: string | null }
@@ -355,6 +379,8 @@ class DateTimeWidget {
     this.el.methodRow.className = "dd-widget__row dd-widget__methods";
     this.el.postalRow.className = "dd-widget__row dd-widget__postal";
     this.el.postalRow.hidden = true;
+    this.el.pickupRow.className = "dd-widget__row dd-widget__pickup-locations";
+    this.el.pickupRow.hidden = true;
     this.el.mapContainer.className = "dd-widget__map";
     this.el.mapContainer.hidden = true;
     this.el.dateRow.className = "dd-widget__row dd-widget__dates";
@@ -367,6 +393,7 @@ class DateTimeWidget {
       this.el.confirmation,
       this.el.methodRow,
       this.el.postalRow,
+      this.el.pickupRow,
       this.el.mapContainer,
       this.el.dateRow,
       this.el.timeRow,
@@ -443,8 +470,11 @@ class DateTimeWidget {
   private async selectMethod(method: WidgetConfig["methods"][number]) {
     this.selectedMethod = method;
     this.selectedDate = null;
+    this.selectedPickupLocationId = null;
     this.el.timeRow.innerHTML = "";
     this.el.dateRow.innerHTML = "";
+    this.el.pickupRow.hidden = true;
+    this.el.pickupRow.innerHTML = "";
     this.el.mapContainer.hidden = true;
     this.el.confirmation.hidden = false;
     this.el.confirmation.hidden = true;
@@ -489,23 +519,40 @@ class DateTimeWidget {
     this.el.postalRow.append(input, button);
   }
 
-  private async loadAvailability(method: WidgetConfig["methods"][number], postalCode?: string) {
+  private async loadAvailability(
+    method: WidgetConfig["methods"][number],
+    postalCode?: string,
+    pickupLocationId?: string,
+  ) {
     this.el.status.textContent = this.config.labels.loading;
     this.el.dateRow.innerHTML = "";
 
     try {
       const cart = await fetchCartInfo();
-      this.availability = await fetchAvailability(method.value, this.config.locationId, cart, postalCode);
+      // A block-configured fixed locationId always wins; otherwise use the
+      // shopper's pin choice (multi-pin pickup), else let the backend default.
+      const locationId = this.config.locationId ?? pickupLocationId ?? null;
+      this.availability = await fetchAvailability(method.value, locationId, cart, postalCode);
+
+      // Multi-pin pickup (study §3.4): when the shop has more than one
+      // eligible pickup point and the shopper hasn't picked one yet (and the
+      // block didn't hard-code one), show the chooser before the calendar.
+      const pickupLocations = this.availability.pickupLocations ?? [];
+      if (
+        method.value === "PICKUP" &&
+        !this.config.locationId &&
+        !this.selectedPickupLocationId &&
+        pickupLocations.length > 1
+      ) {
+        this.renderPickupLocations(method, pickupLocations);
+        return;
+      }
 
       if (!this.availability.locationId) {
         this.el.status.textContent = this.availability.error || this.config.labels.outOfArea;
         return;
       }
 
-      // TODO: When backend supports `pickupLocations`, implement a UI selector (list/map)
-      // to let the user choose a location before rendering dates. Currently, it just defaults
-      // to the single returned location.
-
       if (method.value === "PICKUP" && this.config.googleMapsApiKey) {
         this.showPickupMap();
       }
@@ -516,11 +563,60 @@ class DateTimeWidget {
     }
   }
 
+  private renderPickupLocations(
+    method: WidgetConfig["methods"][number],
+    locations: PickupLocationDto[],
+  ) {
+    this.el.pickupRow.hidden = false;
+    this.el.pickupRow.innerHTML = "";
+    this.el.status.textContent = this.config.labels.choosePickupLocation;
+
+    if (this.config.googleMapsApiKey) {
+      const points = locations
+        .filter((l): l is PickupLocationDto & { lat: number; lng: number } => l.lat != null && l.lng != null)
+        .map((l) => ({ lat: l.lat, lng: l.lng, title: l.name }));
+      if (points.length > 0) {
+        this.el.mapContainer.hidden = false;
+        void renderPickupMap(this.el.mapContainer, this.config.googleMapsApiKey, points);
+      }
+    }
+
+    for (const loc of locations) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "dd-widget__pickup-location";
+      button.setAttribute("aria-pressed", String(this.selectedPickupLocationId === loc.id));
+
+      const name = document.createElement("span");
+      name.className = "dd-widget__pickup-location-name";
+      name.textContent = loc.name;
+      const addr = document.createElement("span");
+      addr.className = "dd-widget__pickup-location-address";
+      addr.textContent = loc.address;
+      button.append(name, addr);
+
+      button.addEventListener("click", async () => {
+        this.selectedPickupLocationId = loc.id;
+        this.el.pickupRow.hidden = true;
+        await this.loadAvailability(method, undefined, loc.id);
+      });
+      this.el.pickupRow.appendChild(button);
+    }
+  }
+
   private showPickupMap() {
     const a = this.availability;
-    if (!a?.locationLat || !a?.locationLng || !this.config.googleMapsApiKey) return;
+    if (!this.config.googleMapsApiKey) return;
+    // Prefer plotting every pin; fall back to the single active location.
+    const points = (a?.pickupLocations ?? [])
+      .filter((l): l is PickupLocationDto & { lat: number; lng: number } => l.lat != null && l.lng != null)
+      .map((l) => ({ lat: l.lat, lng: l.lng, title: l.name }));
+    if (points.length === 0 && a?.locationLat != null && a?.locationLng != null) {
+      points.push({ lat: a.locationLat, lng: a.locationLng, title: a.locationName ?? "" });
+    }
+    if (points.length === 0) return;
     this.el.mapContainer.hidden = false;
-    void renderPickupMap(this.el.mapContainer, this.config.googleMapsApiKey, a.locationLat, a.locationLng, a.locationName ?? "");
+    void renderPickupMap(this.el.mapContainer, this.config.googleMapsApiKey, points);
   }
 
   private renderDates() {