From e9d419e187dcd73a35df00df87b59ee317bfdc6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joachim=20L=C3=B8vgaard?= <joachim@loevgaard.dk>
Date: Mon, 8 Jun 2026 13:25:49 +0200
Subject: [PATCH 1/6] Rebuild the checkout chooser as a class-based ES module
 with overridable templates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shop pickup-point chooser was a closed IIFE that built all its markup in
JavaScript, so none of it was unit-testable and a consumer could only customize
it by forking the whole file.

Rewrite public/js/setono-pickup-point.js as a native ES module (loaded with
<script type="module">, still no bundler) exporting the pure helpers and a
PickupPointChooser class. The class builds the UI by cloning server-rendered
<template>s from the new templates/shop/checkout/_pickup_point_templates.html.twig
partial and filling their [data-slot]/[data-role]/[data-action] hooks, so all
markup, translations and styling live in Twig — overriding that one partial
restyles the chooser with no JavaScript. A missing template renders nothing
rather than fabricating markup.

Consumers can also subclass PickupPointChooser (registered on
window.SetonoSyliusPickupPointChooser), listen for the bubbling
setono:pickup-point(s):* CustomEvents, or set window.setonoSyliusPickupPointConfig.
The field partial drops its eight data-*-text attributes (the strings moved into
the templates), and the templates partial is emitted once per checkout page via
the sylius_shop.checkout#javascripts hook.
---
 public/js/setono-pickup-point.js              | 611 +++++++++++-------
 .../SetonoSyliusPickupPointExtension.php      |   4 +
 templates/_javascripts.html.twig              |   2 +-
 .../_pickup_point_templates.html.twig         |  58 ++
 .../shipment/pickupPoint.html.twig            |  20 +-
 5 files changed, 442 insertions(+), 253 deletions(-)
 create mode 100644 templates/shop/checkout/_pickup_point_templates.html.twig

diff --git a/public/js/setono-pickup-point.js b/public/js/setono-pickup-point.js
index 07a82c7..bb7c808 100644
--- a/public/js/setono-pickup-point.js
+++ b/public/js/setono-pickup-point.js
@@ -1,325 +1,462 @@
 /**
- * Pickup-point chooser (no framework, no Stimulus).
+ * Pickup-point chooser — a framework-free ES module (no build step, no Stimulus).
  *
- * The shipping page renders without any provider calls. Once it is on screen this script fetches — once
- * per visit, asynchronously — every pickup-capable method's points for the current cart from a single
- * JSON endpoint (window.setonoSyliusPickupPointUrl); a slow or down provider therefore degrades
- * gracefully instead of blocking checkout.
+ * The shipping page renders without any provider calls. Once it is on screen this module fetches — once per
+ * visit, asynchronously — every pickup-capable method's points for the current cart from a single JSON
+ * endpoint (window.setonoSyliusPickupPointUrl); a slow or down provider therefore degrades gracefully
+ * instead of blocking checkout.
  *
- * The chooser is built client-side and inserted into the selected pickup-capable shipping method's card.
- * It has two states: a compact summary of the chosen point (with a "Change" button) and an expandable
- * list of points (with a "Selected" badge on the current one and a "Keep this" shortcut). Selecting a
- * point writes its opaque token into the hidden input, which the server decodes on submit (no re-fetch).
+ * The chooser is built by CLONING server-rendered <template> elements (the `_pickup_point_templates.html.twig`
+ * partial) and filling their [data-slot]/[data-role]/[data-action] hooks — so the markup, its translations and
+ * its styling all live in Twig, and a consumer can restyle it by overriding that partial with no JavaScript.
+ * It has two states: a compact summary of the chosen point (with a "Change" button) and an expandable list of
+ * points (with a "Selected" badge on the current one and a "Keep this" shortcut). Selecting a point writes its
+ * opaque token into the hidden input, which the server decodes on submit (no re-fetch). If a template is
+ * absent the chooser renders nothing rather than building markup of its own.
  *
- * Sylius' shop navigates with Turbo (checkout steps are AJAX body swaps), so init is bound to both
- * DOMContentLoaded and turbo:load; a per-field flag keeps it from running twice on the same DOM.
+ * Extension points for plugin users:
+ *   - subclass {@link PickupPointChooser} and register it on `window.SetonoSyliusPickupPointChooser` to override
+ *     a seam (renderRow, formatAddress, fetchPoints, shouldAutoSelect, …) — the boot uses that global if set;
+ *   - listen for the bubbling CustomEvents `setono:pickup-points:loaded` / `:error` and `setono:pickup-point:selected`
+ *     (the last is cancelable: preventDefault() vetoes writing the token);
+ *   - set `window.setonoSyliusPickupPointConfig` to tweak behaviour, e.g. `{ autoSelectNearest: false }`.
+ *
+ * Sylius' shop navigates with Turbo (checkout steps are AJAX body swaps), so the boot is bound to both
+ * DOMContentLoaded and turbo:load; a per-field flag keeps it from running twice on the same DOM. Loaded as
+ * `<script type="module">`.
  */
-(function () {
-    'use strict';
 
-    if (window.__setonoSyliusPickupPointBooted) {
-        return;
+const SECTION_ATTR = 'data-setono-pickup-section';
+
+const DEFAULTS = {
+    autoSelectNearest: true,
+    summaryAddressSeparator: ' · ',
+    listAddressSeparator: ', ',
+};
+
+// The token is base64url(JSON of the whole point); decoding it lets the compact summary show the chosen
+// point's details without matching it back to a (possibly regenerated) fetched point.
+export function decodeToken(token) {
+    try {
+        let base64 = String(token).replace(/-/g, '+').replace(/_/g, '/');
+        while (0 !== base64.length % 4) {
+            base64 += '=';
+        }
+        const bytes = Uint8Array.from(atob(base64), function (character) {
+            return character.charCodeAt(0);
+        });
+
+        return JSON.parse(new TextDecoder().decode(bytes));
+    } catch (error) {
+        return null;
+    }
+}
+
+// A point's identity is provider + id — matching the server-side PickupPointIdentifier, where country is not
+// part of the identity but travels in the identifier's metadata (it is what re-resolves a point, not what names
+// it). It is NOT the full token: a provider may return slightly different details for the same point between
+// calls (and the faker provider regenerates them), so a persisted selection must still match its list entry on
+// reload by identity rather than byte-equality.
+export function identity(token) {
+    const point = decodeToken(token);
+
+    return null === point ? null : [point.provider, point.id].join(' ');
+}
+
+export function addressLine(point, separator) {
+    const locality = [point.zipCode, point.city].filter(Boolean).join(' ');
+
+    return [point.address, locality].filter(Boolean).join(separator);
+}
+
+function shipmentIndex(name) {
+    const match = /\[shipments]\[(\d+)]/.exec(name || '');
+
+    return match ? match[1] : '0';
+}
+
+function methodRadioSelector(index) {
+    return 'input[type="radio"][name*="[shipments][' + index + '][method]"]';
+}
+
+// Clones the first element of a server-rendered <template>, or returns null when it is absent. Callers treat
+// null as "nothing to render" so the chooser degrades gracefully if the templates partial was not rendered.
+function cloneTemplate(id) {
+    const template = document.getElementById(id);
+    if (template instanceof HTMLTemplateElement) {
+        const node = template.content.firstElementChild;
+        if (null !== node) {
+            return node.cloneNode(true);
+        }
     }
-    window.__setonoSyliusPickupPointBooted = true;
 
-    const SVG_NS = 'http://www.w3.org/2000/svg';
-    const SECTION_ATTR = 'data-setono-pickup-section';
+    return null;
+}
 
-    function shipmentIndex(name) {
-        const match = /\[shipments]\[(\d+)]/.exec(name || '');
+// One fetch per visit, shared by every shipment's chooser. Reset by the boot so a re-entered checkout step
+// re-fetches (the points depend on the cart's shipping address, which may have changed).
+let pointsPromise = null;
 
-        return match ? match[1] : '0';
-    }
+function loadPoints(url) {
+    if (null === pointsPromise) {
+        pointsPromise = fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' })
+            .then(function (response) {
+                if (!response.ok) {
+                    throw new Error('Request failed: ' + response.status);
+                }
 
-    function methodRadioSelector(index) {
-        return 'input[type="radio"][name*="[shipments][' + index + '][method]"]';
+                return response.json();
+            });
     }
 
-    function el(tag, className, text) {
-        const node = document.createElement(tag);
-        if (className) {
-            node.className = className;
-        }
-        if (undefined !== text && null !== text) {
-            node.textContent = text;
-        }
-
-        return node;
+    return pointsPromise;
+}
+
+export class PickupPointChooser {
+    constructor(field, options) {
+        this.field = field;
+        this.input = field.querySelector('[data-pickup-point-input]');
+        this.index = shipmentIndex(this.input ? this.input.getAttribute('name') : '');
+        this.options = Object.assign(
+            {},
+            DEFAULTS,
+            { url: window.setonoSyliusPickupPointUrl },
+            window.setonoSyliusPickupPointConfig || {},
+            options || {},
+        );
+        this.mode = 'summary';
+        // null = loading, false = failed, object = points keyed by shipping method code.
+        this.data = null;
     }
 
-    // The token is base64url(JSON of the whole point); decoding it lets the compact summary show the
-    // chosen point's details without matching it back to a (possibly regenerated) fetched point.
-    function decodeToken(token) {
-        try {
-            let base64 = String(token).replace(/-/g, '+').replace(/_/g, '/');
-            while (0 !== base64.length % 4) {
-                base64 += '=';
-            }
-            const bytes = Uint8Array.from(atob(base64), function (character) {
-                return character.charCodeAt(0);
-            });
-
-            return JSON.parse(new TextDecoder().decode(bytes));
-        } catch (error) {
-            return null;
+    start() {
+        if (null === this.input) {
+            return;
         }
-    }
 
-    function addressLine(point, separator) {
-        const locality = [point.zipCode, point.city].filter(Boolean).join(' ');
+        const self = this;
+        document.querySelectorAll(methodRadioSelector(this.index)).forEach(function (radio) {
+            radio.addEventListener('change', function () {
+                self.input.value = '';
+                self.mode = 'summary';
+                self.render();
+            });
+        });
 
-        return [point.address, locality].filter(Boolean).join(separator);
+        this.render();
     }
 
-    // A point's identity is provider + id + country, not its full token: a provider may return slightly
-    // different details for the same point between calls (and the faker provider regenerates them), so a
-    // persisted selection must still match its list entry on reload by identity rather than byte-equality.
-    function identity(token) {
-        const point = decodeToken(token);
-
-        return null === point ? null : [point.provider, point.id, point.country].join(' ');
+    fetchPoints() {
+        return loadPoints(this.options.url);
     }
 
-    function checkIcon() {
-        const svg = document.createElementNS(SVG_NS, 'svg');
-        svg.setAttribute('viewBox', '0 0 16 16');
-        svg.setAttribute('width', '16');
-        svg.setAttribute('height', '16');
-        svg.setAttribute('fill', 'currentColor');
+    setData(data) {
+        this.data = data;
 
-        const path = document.createElementNS(SVG_NS, 'path');
-        path.setAttribute('d', 'M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z');
-        svg.appendChild(path);
+        const method = this.currentMethod();
+        const methodCode = null !== method ? method.value : null;
+        if (false === data) {
+            this.dispatch('setono:pickup-points:error', { error: null });
+        } else {
+            const points = (null !== methodCode && data) ? (data[methodCode] || []) : [];
+            this.dispatch('setono:pickup-points:loaded', { methodCode: methodCode, points: points });
+        }
 
-        return svg;
+        this.render();
     }
 
-    function message(field, attribute) {
-        return el('div', 'setono-sylius-pickup-point-field-message text-body-secondary small py-2', field.getAttribute(attribute));
+    currentMethod() {
+        return document.querySelector(methodRadioSelector(this.index) + ':checked');
     }
 
-    function summary(field, input, rerender) {
-        const point = decodeToken(input.value) || {};
-
-        const box = el('div', 'd-flex align-items-center gap-3 bg-body border border-primary rounded-3 p-3');
-
-        const check = el('span', 'setono-pickup-point__check rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center');
-        check.appendChild(checkIcon());
-        box.appendChild(check);
+    pointsFor(method) {
+        if (this.data && false !== this.data) {
+            return this.data[method.value] || [];
+        }
 
-        const info = el('div', 'flex-grow-1');
-        info.appendChild(el('div', 'fw-bold', point.name || ''));
-        info.appendChild(el('div', 'text-body-secondary small', addressLine(point, ' · ')));
-        box.appendChild(info);
+        return null;
+    }
 
-        const change = el('button', 'btn btn-link text-primary fw-semibold text-decoration-none p-0', field.getAttribute('data-change-text'));
-        change.type = 'button';
-        change.addEventListener('click', function () {
-            field._mode = 'list';
-            rerender();
+    removeSection() {
+        document.querySelectorAll('[' + SECTION_ATTR + '="' + this.index + '"]').forEach(function (section) {
+            section.remove();
         });
-        box.appendChild(change);
-
-        return box;
     }
 
-    function list(field, input, points, rerender) {
-        const wrapper = el('div');
+    shouldAutoSelect(points) {
+        // Index of the point to pre-select (providers return them ordered by distance), or -1 to skip.
+        return this.options.autoSelectNearest && Array.isArray(points) && points.length > 0 ? 0 : -1;
+    }
 
-        const current = input.value ? decodeToken(input.value) : null;
-        const currentIdentity = input.value ? identity(input.value) : null;
-        if (null !== current) {
-            const head = el('div', 'd-flex justify-content-between align-items-center gap-2 mb-2');
+    formatAddress(point, separator) {
+        return addressLine(point, separator);
+    }
 
-            const label = el('div', 'small text-body-secondary');
-            label.appendChild(document.createTextNode((field.getAttribute('data-currently-text') || '') + ' '));
-            label.appendChild(el('span', 'fw-bold text-body', current.name || ''));
-            head.appendChild(label);
+    render() {
+        this.removeSection();
 
-            const keep = el('button', 'btn btn-sm btn-outline-primary flex-shrink-0', field.getAttribute('data-keep-text'));
-            keep.type = 'button';
-            keep.addEventListener('click', function () {
-                field._mode = 'summary';
-                rerender();
-            });
-            head.appendChild(keep);
+        const method = this.currentMethod();
+        if (null === method || !method.hasAttribute('data-pickup-point-provider')) {
+            return;
+        }
 
-            wrapper.appendChild(head);
+        const card = method.closest('.card');
+        if (null === card) {
+            return;
         }
 
-        const group = el('div', 'setono-pickup-point__list list-group');
-        const groupName = 'setono-pickup-point-choice-' + shipmentIndex(input.getAttribute('name'));
+        const section = cloneTemplate('setono-pickup-point-section');
+        if (null === section) {
+            // The templates partial is not on the page — render nothing rather than fabricate markup.
+            return;
+        }
+        section.setAttribute(SECTION_ATTR, this.index);
 
-        points.forEach(function (point) {
-            const isSelected = null !== currentIdentity && identity(point.value) === currentIdentity;
-            const item = el('label', 'list-group-item d-flex align-items-center gap-3' + (isSelected ? ' bg-primary-subtle' : ''));
+        const points = this.pointsFor(method);
 
-            const radio = el('input', 'form-check-input flex-shrink-0 m-0');
-            radio.type = 'radio';
-            radio.name = groupName;
-            radio.value = point.value;
-            radio.checked = isSelected;
-            radio.addEventListener('change', function () {
-                input.value = radio.value;
-                field._mode = 'summary';
-                rerender();
-            });
-            item.appendChild(radio);
+        // Pre-select the nearest point so the shopper lands on the most likely choice in the compact summary
+        // instead of an open list; they can still open the list to pick another.
+        if ('' === this.input.value && Array.isArray(points)) {
+            const autoIndex = this.shouldAutoSelect(points);
+            if (autoIndex >= 0 && autoIndex < points.length) {
+                this.selectPoint(points[autoIndex], 'auto', false);
+            }
+        }
 
-            const info = el('div', 'flex-grow-1');
-            info.appendChild(el('div', 'fw-bold', point.name || ''));
-            info.appendChild(el('div', 'text-body-secondary small', addressLine(point, ', ')));
-            item.appendChild(info);
+        const summaryMode = 'summary' === this.mode && '' !== this.input.value;
 
-            if (isSelected) {
-                item.appendChild(el('span', 'badge bg-primary text-white flex-shrink-0', field.getAttribute('data-selected-text')));
-            }
+        const required = section.querySelector('[data-role="required"]');
+        if (null !== required) {
+            required.hidden = !(!summaryMode && Array.isArray(points) && points.length > 0);
+        }
 
-            group.appendChild(item);
-        });
+        let content;
+        if (summaryMode) {
+            content = this.renderSummary();
+        } else if (null === this.data) {
+            content = this.renderMessage('loading');
+        } else if (false === this.data) {
+            content = this.renderMessage('error');
+        } else if (!Array.isArray(points) || 0 === points.length) {
+            content = this.renderMessage('empty');
+        } else {
+            content = this.renderList(points);
+        }
 
-        wrapper.appendChild(group);
+        if (null !== content) {
+            const body = section.querySelector('[data-role="body"]') || section;
+            body.appendChild(content);
+        }
 
-        return wrapper;
+        card.appendChild(section);
     }
 
-    function removeSection(index) {
-        document.querySelectorAll('[' + SECTION_ATTR + '="' + index + '"]').forEach(function (section) {
-            section.remove();
-        });
-    }
+    renderSummary() {
+        const node = cloneTemplate('setono-pickup-point-summary');
+        if (null === node) {
+            return null;
+        }
 
-    function render(field, state) {
-        const input = field.querySelector('[data-pickup-point-input]');
-        if (null === input) {
-            return;
+        const point = decodeToken(this.input.value) || {};
+        const name = node.querySelector('[data-slot="name"]');
+        if (null !== name) {
+            name.textContent = point.name || '';
+        }
+        const address = node.querySelector('[data-slot="address"]');
+        if (null !== address) {
+            address.textContent = this.formatAddress(point, this.options.summaryAddressSeparator);
         }
 
-        const index = shipmentIndex(input.getAttribute('name'));
-        removeSection(index);
+        const change = node.querySelector('[data-action="change"]');
+        if (null !== change) {
+            const self = this;
+            change.addEventListener('click', function () {
+                self.mode = 'list';
+                self.render();
+            });
+        }
 
-        const method = document.querySelector(methodRadioSelector(index) + ':checked');
-        if (null === method || !method.hasAttribute('data-pickup-point-provider')) {
-            return;
+        return node;
+    }
+
+    renderList(points) {
+        const node = cloneTemplate('setono-pickup-point-list');
+        if (null === node) {
+            return null;
         }
 
-        const card = method.closest('.card');
-        if (null === card) {
-            return;
+        const current = this.input.value ? decodeToken(this.input.value) : null;
+        const currentIdentity = this.input.value ? identity(this.input.value) : null;
+
+        const header = node.querySelector('[data-role="header"]');
+        if (null !== header) {
+            if (null !== current) {
+                header.hidden = false;
+                const currentName = header.querySelector('[data-slot="current-name"]');
+                if (null !== currentName) {
+                    currentName.textContent = current.name || '';
+                }
+                const keep = header.querySelector('[data-action="keep"]');
+                if (null !== keep) {
+                    const self = this;
+                    keep.addEventListener('click', function () {
+                        self.mode = 'summary';
+                        self.render();
+                    });
+                }
+            } else {
+                header.hidden = true;
+            }
         }
 
-        const section = el('div', 'setono-pickup-point px-3 pb-3');
-        section.setAttribute(SECTION_ATTR, index);
-        section.appendChild(el('hr', 'setono-pickup-point__divider my-3'));
+        const list = node.querySelector('[data-role="list"]') || node;
+        const self = this;
+        points.forEach(function (point) {
+            const row = self.renderRow(point, currentIdentity);
+            if (null !== row) {
+                list.appendChild(row);
+            }
+        });
 
-        const points = (state.data && false !== state.data) ? (state.data[method.value] || []) : null;
+        return node;
+    }
 
-        // Pre-select the nearest point (providers return them ordered by distance from the address) so
-        // the shopper lands on the most likely choice in the compact summary instead of an open list;
-        // they can still open the list to pick another.
-        if (Array.isArray(points) && points.length > 0 && '' === input.value) {
-            input.value = points[0].value;
-            field._mode = 'summary';
+    renderRow(point, currentIdentity) {
+        const node = cloneTemplate('setono-pickup-point-row');
+        if (null === node) {
+            return null;
         }
 
-        const summaryMode = 'summary' === field._mode && '' !== input.value;
+        if (undefined === currentIdentity) {
+            currentIdentity = this.input.value ? identity(this.input.value) : null;
+        }
+        const isSelected = null !== currentIdentity && identity(point.value) === currentIdentity;
+        if (isSelected) {
+            node.classList.add('bg-primary-subtle');
+        }
 
-        const heading = el('div', 'fw-bold mb-2');
-        heading.appendChild(document.createTextNode(field.getAttribute('data-label-text') || ''));
-        if (!summaryMode && Array.isArray(points) && points.length > 0) {
-            heading.appendChild(document.createTextNode(' '));
-            heading.appendChild(el('span', 'text-danger', '*'));
+        const radio = node.querySelector('[data-role="radio"]');
+        if (null !== radio) {
+            radio.name = 'setono-pickup-point-choice-' + this.index;
+            radio.value = point.value;
+            radio.checked = isSelected;
+            const self = this;
+            radio.addEventListener('change', function () {
+                self.selectPoint(point, 'list');
+            });
         }
-        section.appendChild(heading);
 
-        const rerender = function () {
-            render(field, state);
-        };
+        const name = node.querySelector('[data-slot="name"]');
+        if (null !== name) {
+            name.textContent = point.name || '';
+        }
+        const address = node.querySelector('[data-slot="address"]');
+        if (null !== address) {
+            address.textContent = this.formatAddress(point, this.options.listAddressSeparator);
+        }
 
-        if (summaryMode) {
-            section.appendChild(summary(field, input, rerender));
-        } else if (null === state.data) {
-            section.appendChild(message(field, 'data-loading-text'));
-        } else if (false === state.data) {
-            section.appendChild(message(field, 'data-error-text'));
-        } else if (!Array.isArray(points) || 0 === points.length) {
-            section.appendChild(message(field, 'data-empty-text'));
-        } else {
-            section.appendChild(list(field, input, points, rerender));
+        const badge = node.querySelector('[data-role="badge"]');
+        if (null !== badge) {
+            badge.hidden = !isSelected;
         }
 
-        card.appendChild(section);
+        return node;
     }
 
-    function setup(field, state) {
-        const input = field.querySelector('[data-pickup-point-input]');
-        if (null === input) {
-            return;
+    renderMessage(state) {
+        const node = cloneTemplate('setono-pickup-point-message');
+        if (null === node) {
+            return null;
         }
 
-        field._mode = 'summary';
-
-        document.querySelectorAll(methodRadioSelector(shipmentIndex(input.getAttribute('name')))).forEach(function (radio) {
-            radio.addEventListener('change', function () {
-                input.value = '';
-                field._mode = 'summary';
-                render(field, state);
-            });
+        node.querySelectorAll('[data-state]').forEach(function (span) {
+            span.hidden = span.getAttribute('data-state') !== state;
         });
 
-        render(field, state);
+        return node;
     }
 
-    function init() {
-        const url = window.setonoSyliusPickupPointUrl;
-        if (!url) {
-            return;
-        }
-
-        const fields = [];
-        document.querySelectorAll('[data-pickup-point-field]').forEach(function (field) {
-            if (!field.hasAttribute('data-pickup-point-ready')) {
-                field.setAttribute('data-pickup-point-ready', '');
-                fields.push(field);
+    // Writes the chosen point's token into the hidden input and switches to the summary, dispatching a
+    // cancelable `selected` event first so a listener can veto it. Used by both list selection and auto-select.
+    selectPoint(point, source, rerender) {
+        const token = point.value;
+        const event = this.dispatch(
+            'setono:pickup-point:selected',
+            { point: decodeToken(token), token: token, source: source },
+            true,
+        );
+        if (event.defaultPrevented) {
+            this.mode = 'list';
+            if (false !== rerender) {
+                this.render();
             }
-        });
-        if (0 === fields.length) {
+
             return;
         }
 
-        // null = still loading, false = failed, object = points keyed by shipping method code.
-        const state = { data: null };
+        this.input.value = token;
+        this.mode = 'summary';
+        if (false !== rerender) {
+            this.render();
+        }
+    }
 
-        fields.forEach(function (field) {
-            setup(field, state);
+    dispatch(name, detail, cancelable) {
+        const event = new CustomEvent(name, {
+            bubbles: true,
+            cancelable: Boolean(cancelable),
+            detail: Object.assign({ chooser: this, field: this.field }, detail),
         });
+        this.field.dispatchEvent(event);
 
-        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' })
-            .then(function (response) {
-                if (!response.ok) {
-                    throw new Error('Request failed: ' + response.status);
-                }
+        return event;
+    }
+}
 
-                return response.json();
-            })
+function boot() {
+    const url = window.setonoSyliusPickupPointUrl;
+    if (!url) {
+        return;
+    }
+
+    const Ctor = window.SetonoSyliusPickupPointChooser || PickupPointChooser;
+
+    const choosers = [];
+    document.querySelectorAll('[data-pickup-point-field]').forEach(function (field) {
+        if (field.hasAttribute('data-pickup-point-ready')) {
+            return;
+        }
+        field.setAttribute('data-pickup-point-ready', '');
+        choosers.push(new Ctor(field, {}));
+    });
+    if (0 === choosers.length) {
+        return;
+    }
+
+    // Fresh fetch for this visit (see loadPoints) — one request shared by all of this page's shipments.
+    pointsPromise = null;
+
+    choosers.forEach(function (chooser) {
+        chooser.start();
+        chooser.fetchPoints()
             .then(function (data) {
-                state.data = data;
+                chooser.setData(data);
             })
             .catch(function () {
-                state.data = false;
-            })
-            .then(function () {
-                fields.forEach(function (field) {
-                    render(field, state);
-                });
+                chooser.setData(false);
             });
-    }
+    });
+}
 
-    document.addEventListener('DOMContentLoaded', init);
-    document.addEventListener('turbo:load', init);
+// Test-only: resets the per-visit fetch memo so specs can re-run the boot deterministically.
+export function __resetBootForTests() {
+    pointsPromise = null;
+}
 
-    // The script itself may be (re-)evaluated after the DOM is already interactive.
-    if ('loading' !== document.readyState) {
-        init();
-    }
-})();
+document.addEventListener('DOMContentLoaded', boot);
+document.addEventListener('turbo:load', boot);
+
+// The module may be evaluated after the DOM is already interactive.
+if ('loading' !== document.readyState) {
+    boot();
+}
diff --git a/src/DependencyInjection/SetonoSyliusPickupPointExtension.php b/src/DependencyInjection/SetonoSyliusPickupPointExtension.php
index c63fcf0..bc55cbd 100644
--- a/src/DependencyInjection/SetonoSyliusPickupPointExtension.php
+++ b/src/DependencyInjection/SetonoSyliusPickupPointExtension.php
@@ -108,6 +108,10 @@ public function prepend(ContainerBuilder $container): void
                     ],
                 ],
                 'sylius_shop.checkout#javascripts' => [
+                    'setono_sylius_pickup_point.templates' => [
+                        'template' => '@SetonoSyliusPickupPointPlugin/shop/checkout/_pickup_point_templates.html.twig',
+                        'priority' => -90,
+                    ],
                     'setono_sylius_pickup_point.javascripts' => [
                         'template' => '@SetonoSyliusPickupPointPlugin/_javascripts.html.twig',
                         'priority' => -100,
diff --git a/templates/_javascripts.html.twig b/templates/_javascripts.html.twig
index 75c5646..483e8fb 100644
--- a/templates/_javascripts.html.twig
+++ b/templates/_javascripts.html.twig
@@ -1,2 +1,2 @@
 <script>window.setonoSyliusPickupPointUrl = '{{ path('setono_sylius_pickup_point_shop_pickup_points') }}';</script>
-<script src="{{ asset('bundles/setonosyliuspickuppointplugin/js/setono-pickup-point.js') }}"></script>
+<script type="module" src="{{ asset('bundles/setonosyliuspickuppointplugin/js/setono-pickup-point.js') }}"></script>
diff --git a/templates/shop/checkout/_pickup_point_templates.html.twig b/templates/shop/checkout/_pickup_point_templates.html.twig
new file mode 100644
index 0000000..5837428
--- /dev/null
+++ b/templates/shop/checkout/_pickup_point_templates.html.twig
@@ -0,0 +1,58 @@
+{#
+    Overridable markup for the checkout pickup-point chooser. public/js/setono-pickup-point.js clones these
+    <template>s and fills their [data-slot] / [data-role] / [data-action] hooks; a consumer can restyle the
+    chooser by overriding this single partial — no JavaScript needed — as long as those hooks are preserved.
+    Emitted once per checkout page via the sylius_shop.checkout#javascripts hook.
+#}
+<template id="setono-pickup-point-section">
+    <div class="setono-pickup-point px-3 pb-3">
+        <hr class="setono-pickup-point__divider my-3">
+        <div class="fw-bold mb-2">
+            <span data-slot="label">{{ 'setono_sylius_pickup_point.form.shipment.pickup_point'|trans }}</span>
+            <span class="text-danger" data-role="required" hidden>*</span>
+        </div>
+        <div data-role="body"></div>
+    </div>
+</template>
+
+<template id="setono-pickup-point-summary">
+    <div class="d-flex align-items-center gap-3 bg-body border border-primary rounded-3 p-3">
+        <span class="setono-pickup-point__check rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center">
+            <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>
+        </span>
+        <div class="flex-grow-1">
+            <div class="fw-bold" data-slot="name"></div>
+            <div class="text-body-secondary small" data-slot="address"></div>
+        </div>
+        <button type="button" class="btn btn-link text-primary fw-semibold text-decoration-none p-0" data-action="change">{{ 'setono_sylius_pickup_point.ui.change'|trans }}</button>
+    </div>
+</template>
+
+<template id="setono-pickup-point-list">
+    <div>
+        <div class="d-flex justify-content-between align-items-center gap-2 mb-2" data-role="header" hidden>
+            <div class="small text-body-secondary">{{ 'setono_sylius_pickup_point.ui.currently'|trans }} <span class="fw-bold text-body" data-slot="current-name"></span></div>
+            <button type="button" class="btn btn-sm btn-outline-primary flex-shrink-0" data-action="keep">{{ 'setono_sylius_pickup_point.ui.keep_this'|trans }}</button>
+        </div>
+        <div class="setono-pickup-point__list list-group" data-role="list"></div>
+    </div>
+</template>
+
+<template id="setono-pickup-point-row">
+    <label class="list-group-item d-flex align-items-center gap-3">
+        <input type="radio" class="form-check-input flex-shrink-0 m-0" data-role="radio">
+        <div class="flex-grow-1">
+            <div class="fw-bold" data-slot="name"></div>
+            <div class="text-body-secondary small" data-slot="address"></div>
+        </div>
+        <span class="badge bg-primary text-white flex-shrink-0" data-role="badge" hidden>{{ 'setono_sylius_pickup_point.ui.selected'|trans }}</span>
+    </label>
+</template>
+
+<template id="setono-pickup-point-message">
+    <div class="setono-sylius-pickup-point-field-message text-body-secondary small py-2">
+        <span data-state="loading">{{ 'setono_sylius_pickup_point.ui.loading_pickup_points'|trans }}</span>
+        <span data-state="empty" hidden>{{ 'setono_sylius_pickup_point.ui.no_pickup_points'|trans }}</span>
+        <span data-state="error" hidden>{{ 'setono_sylius_pickup_point.ui.error_loading_pickup_points'|trans }}</span>
+    </div>
+</template>
diff --git a/templates/shop/checkout/select_shipping/shipment/pickupPoint.html.twig b/templates/shop/checkout/select_shipping/shipment/pickupPoint.html.twig
index dde32ad..239567d 100644
--- a/templates/shop/checkout/select_shipping/shipment/pickupPoint.html.twig
+++ b/templates/shop/checkout/select_shipping/shipment/pickupPoint.html.twig
@@ -2,22 +2,12 @@
 
 {% if form.pickupPoint is defined %}
     {#
-        Carrier only: the hidden field is what is submitted, and the data attributes hand the localized
-        strings to public/js/setono-pickup-point.js. The visible chooser is built by that script and
-        inserted into the selected pickup-capable shipping method's card, because the points are fetched
-        asynchronously after the page has rendered (a slow/down provider never blocks the page).
+        Carrier only: the hidden field is what is submitted. The visible chooser is built by
+        public/js/setono-pickup-point.js, which clones the <template>s from `_pickup_point_templates.html.twig`
+        and inserts the result into the selected pickup-capable shipping method's card — the points are fetched
+        asynchronously after the page has rendered, so a slow/down provider never blocks the page.
     #}
-    <div data-pickup-point-field
-         data-label-text="{{ 'setono_sylius_pickup_point.form.shipment.pickup_point'|trans }}"
-         data-loading-text="{{ 'setono_sylius_pickup_point.ui.loading_pickup_points'|trans }}"
-         data-empty-text="{{ 'setono_sylius_pickup_point.ui.no_pickup_points'|trans }}"
-         data-error-text="{{ 'setono_sylius_pickup_point.ui.error_loading_pickup_points'|trans }}"
-         data-change-text="{{ 'setono_sylius_pickup_point.ui.change'|trans }}"
-         data-keep-text="{{ 'setono_sylius_pickup_point.ui.keep_this'|trans }}"
-         data-currently-text="{{ 'setono_sylius_pickup_point.ui.currently'|trans }}"
-         data-selected-text="{{ 'setono_sylius_pickup_point.ui.selected'|trans }}"
-         hidden
-    >
+    <div data-pickup-point-field hidden>
         {{ form_widget(form.pickupPoint, {'attr': {'data-pickup-point-input': ''}}) }}
     </div>
 {% endif %}

From 37a1304ca1e311f60696a1e901a44d3caf6e3d48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joachim=20L=C3=B8vgaard?= <joachim@loevgaard.dk>
Date: Mon, 8 Jun 2026 13:26:02 +0200
Subject: [PATCH 2/6] Add Vitest unit tests for the pickup-point chooser and a
 CI job

Cover the now-exported helpers (decodeToken/identity/addressLine) and the
PickupPointChooser render/list/state/event/boot behaviour with Vitest + jsdom,
added to tests/Application (the repo's Node tooling home). A javascript-tests
workflow job runs them; because tests/Application/package.json has file: deps on
the installed Sylius/Symfony assets, the job sets up PHP + composer (to populate
vendor/) before yarn + vitest, mirroring the functional-tests setup.

The Vitest config is a .mjs file so tests/Application/package.json need not become
"type": "module" (which would break Encore's CommonJS webpack.config.js).
---
 .github/workflows/build.yaml               |  19 ++++
 tests/Application/package.json             |   7 +-
 tests/Application/tests/js/boot.spec.js    |  65 +++++++++++
 tests/Application/tests/js/events.spec.js  |  59 ++++++++++
 tests/Application/tests/js/fixtures.js     | 122 +++++++++++++++++++++
 tests/Application/tests/js/helpers.spec.js |  46 ++++++++
 tests/Application/tests/js/list.spec.js    |  51 +++++++++
 tests/Application/tests/js/render.spec.js  |  53 +++++++++
 tests/Application/tests/js/states.spec.js  |  34 ++++++
 tests/Application/vitest.config.mjs        |  19 ++++
 10 files changed, 473 insertions(+), 2 deletions(-)
 create mode 100644 tests/Application/tests/js/boot.spec.js
 create mode 100644 tests/Application/tests/js/events.spec.js
 create mode 100644 tests/Application/tests/js/fixtures.js
 create mode 100644 tests/Application/tests/js/helpers.spec.js
 create mode 100644 tests/Application/tests/js/list.spec.js
 create mode 100644 tests/Application/tests/js/render.spec.js
 create mode 100644 tests/Application/tests/js/states.spec.js
 create mode 100644 tests/Application/vitest.config.mjs

diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 42ec099..800ed9d 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -72,3 +72,22 @@ jobs:
                     dependencies: "${{ matrix.dependencies }}"
                     symfony: "${{ matrix.symfony }}"
                     testsuite: "functional"
+
+    javascript-tests:
+        runs-on: "ubuntu-latest"
+        steps:
+            -   uses: "actions/checkout@v4"
+            # The chooser JS unit tests live in tests/Application, whose package.json has file: deps on the
+            # installed Sylius/Symfony assets — so PHP + a composer install are needed to populate vendor/
+            # before yarn can resolve them.
+            -   uses: "shivammathur/setup-php@v2"
+                with:
+                    php-version: "8.4"
+                    extensions: "intl, mbstring"
+                    coverage: "none"
+            -   uses: "ramsey/composer-install@v4"
+            -   uses: "actions/setup-node@v4"
+                with:
+                    node-version: "22"
+            -   run: "yarn --cwd tests/Application install"
+            -   run: "yarn --cwd tests/Application test"
diff --git a/tests/Application/package.json b/tests/Application/package.json
index bdebb61..3806ef3 100644
--- a/tests/Application/package.json
+++ b/tests/Application/package.json
@@ -3,7 +3,8 @@
     "scripts": {
         "build": "encore dev",
         "build:prod": "encore production",
-        "watch": "encore dev --watch"
+        "watch": "encore dev --watch",
+        "test": "vitest run"
     },
     "dependencies": {
         "@sylius-ui/admin": "file:../../vendor/sylius/sylius/src/Sylius/Bundle/AdminBundle",
@@ -15,6 +16,8 @@
         "@hotwired/stimulus": "^3.0.0",
         "@symfony/stimulus-bridge": "^3.2.0",
         "@symfony/webpack-encore": "^5.0.1",
-        "tom-select": "^2.2.2"
+        "jsdom": "^29.1.1",
+        "tom-select": "^2.2.2",
+        "vitest": "^4.1.8"
     }
 }
diff --git a/tests/Application/tests/js/boot.spec.js b/tests/Application/tests/js/boot.spec.js
new file mode 100644
index 0000000..09af528
--- /dev/null
+++ b/tests/Application/tests/js/boot.spec.js
@@ -0,0 +1,65 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { PickupPointChooser } from '../../../../public/js/setono-pickup-point.js';
+import { buildDom, makePoints, section, resetGlobals } from './fixtures.js';
+
+afterEach(() => resetGlobals());
+
+// The module binds boot() to DOMContentLoaded at import time; dispatching the event re-runs it deterministically.
+function fireBoot() {
+    document.dispatchEvent(new Event('DOMContentLoaded'));
+}
+
+function stubFetch(data) {
+    vi.stubGlobal('fetch', vi.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve(data) })));
+}
+
+describe('boot', () => {
+    it('boots: stamps the field ready, fetches once and renders', async () => {
+        const { field } = buildDom();
+        window.setonoSyliusPickupPointUrl = '/pickup-points';
+        stubFetch({ faker: makePoints(2) });
+
+        fireBoot();
+
+        expect(field.hasAttribute('data-pickup-point-ready')).toBe(true);
+        // start() renders a loading section synchronously; wait for the summary that appears after the fetch.
+        await vi.waitFor(() => {
+            const name = section() && section().querySelector('[data-slot="name"]');
+            expect(name && name.textContent).toBe('Point #0');
+        });
+        expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('does nothing and does not throw when no endpoint URL is set', () => {
+        const { field } = buildDom();
+
+        expect(() => fireBoot()).not.toThrow();
+        expect(field.hasAttribute('data-pickup-point-ready')).toBe(false);
+        expect(section()).toBeNull();
+    });
+
+    it('uses a subclass registered on window.SetonoSyliusPickupPointChooser', async () => {
+        buildDom();
+        window.setonoSyliusPickupPointUrl = '/pickup-points';
+        window.setonoSyliusPickupPointConfig = { autoSelectNearest: false }; // show the list so rows render
+        window.SetonoSyliusPickupPointChooser = class extends PickupPointChooser {
+            renderRow(point, currentIdentity) {
+                const node = super.renderRow(point, currentIdentity);
+                if (null !== node) {
+                    node.setAttribute('data-custom', '');
+                }
+
+                return node;
+            }
+        };
+        stubFetch({ faker: makePoints(2) });
+
+        fireBoot();
+
+        // Wait for the list (autoSelectNearest=false) rendered after the fetch resolves.
+        await vi.waitFor(() => {
+            expect(section()).not.toBeNull();
+            expect(section().querySelectorAll('[data-role="list"] label[data-custom]').length).toBe(2);
+        });
+    });
+});
diff --git a/tests/Application/tests/js/events.spec.js b/tests/Application/tests/js/events.spec.js
new file mode 100644
index 0000000..17773e5
--- /dev/null
+++ b/tests/Application/tests/js/events.spec.js
@@ -0,0 +1,59 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { PickupPointChooser } from '../../../../public/js/setono-pickup-point.js';
+import { buildDom, makePoints, rows, resetGlobals } from './fixtures.js';
+
+afterEach(() => resetGlobals());
+
+describe('events', () => {
+    it('dispatches a bubbling selected event (source=list) on row click', () => {
+        const { field } = buildDom();
+        const points = makePoints(3);
+        new PickupPointChooser(field, { autoSelectNearest: false }).setData({ faker: points });
+
+        const handler = vi.fn();
+        document.addEventListener('setono:pickup-point:selected', handler);
+        const radio = rows()[1].querySelector('[data-role="radio"]');
+        radio.checked = true;
+        radio.dispatchEvent(new Event('change', { bubbles: true }));
+
+        expect(handler).toHaveBeenCalledOnce();
+        const detail = handler.mock.calls[0][0].detail;
+        expect(detail.source).toBe('list');
+        expect(detail.token).toBe(points[1].value);
+        expect(detail.point.id).toBe('1');
+    });
+
+    it('dispatches a selected event (source=auto) during auto-select', () => {
+        const { field } = buildDom();
+        const handler = vi.fn();
+        document.addEventListener('setono:pickup-point:selected', handler);
+        new PickupPointChooser(field).setData({ faker: makePoints(2) });
+
+        expect(handler).toHaveBeenCalledOnce();
+        expect(handler.mock.calls[0][0].detail.source).toBe('auto');
+    });
+
+    it('lets a listener veto the selection with preventDefault()', () => {
+        const { field, input } = buildDom();
+        document.addEventListener('setono:pickup-point:selected', (event) => event.preventDefault());
+        new PickupPointChooser(field).setData({ faker: makePoints(2) }); // auto-select vetoed
+
+        expect(input.value).toBe('');
+    });
+
+    it('dispatches loaded (with methodCode + points) and error', () => {
+        const { field } = buildDom();
+        const loaded = vi.fn();
+        const error = vi.fn();
+        document.addEventListener('setono:pickup-points:loaded', loaded);
+        document.addEventListener('setono:pickup-points:error', error);
+
+        new PickupPointChooser(field).setData({ faker: makePoints(2) });
+        expect(loaded).toHaveBeenCalledOnce();
+        expect(loaded.mock.calls[0][0].detail.methodCode).toBe('faker');
+        expect(loaded.mock.calls[0][0].detail.points.length).toBe(2);
+
+        new PickupPointChooser(field).setData(false);
+        expect(error).toHaveBeenCalledOnce();
+    });
+});
diff --git a/tests/Application/tests/js/fixtures.js b/tests/Application/tests/js/fixtures.js
new file mode 100644
index 0000000..a7b85d6
--- /dev/null
+++ b/tests/Application/tests/js/fixtures.js
@@ -0,0 +1,122 @@
+// Test fixtures for the pickup-point chooser specs.
+//
+// The TEMPLATES_HTML below mirrors templates/shop/checkout/_pickup_point_templates.html.twig — keep the
+// [data-slot] / [data-role] / [data-action] / [data-state] hooks in sync with that partial (the real Twig
+// markup, with its translations and Bootstrap classes, is covered by the Playwright/Behat layer). The chooser
+// only ever reads those hooks, so the unstyled copy here is enough to exercise the JS.
+
+import { __resetBootForTests } from '../../../../public/js/setono-pickup-point.js';
+
+export const TEMPLATES_HTML = `
+<template id="setono-pickup-point-section">
+    <div class="setono-pickup-point">
+        <hr>
+        <div class="fw-bold mb-2"><span data-slot="label">Pickup point</span> <span class="text-danger" data-role="required" hidden>*</span></div>
+        <div data-role="body"></div>
+    </div>
+</template>
+<template id="setono-pickup-point-summary">
+    <div class="border border-primary">
+        <span class="setono-pickup-point__check"><svg viewBox="0 0 16 16"><path d="M0 0"/></svg></span>
+        <div><div class="fw-bold" data-slot="name"></div><div data-slot="address"></div></div>
+        <button type="button" data-action="change">Change</button>
+    </div>
+</template>
+<template id="setono-pickup-point-list">
+    <div>
+        <div class="header" data-role="header" hidden><div>Currently: <span data-slot="current-name"></span></div><button type="button" data-action="keep">Keep this</button></div>
+        <div class="list-group" data-role="list"></div>
+    </div>
+</template>
+<template id="setono-pickup-point-row">
+    <label class="list-group-item"><input type="radio" data-role="radio"><div><div class="fw-bold" data-slot="name"></div><div data-slot="address"></div></div><span class="badge" data-role="badge" hidden>Selected</span></label>
+</template>
+<template id="setono-pickup-point-message">
+    <div><span data-state="loading">Loading…</span><span data-state="empty" hidden>None</span><span data-state="error" hidden>Error</span></div>
+</template>
+`;
+
+// base64url(JSON) — mirrors the server-side PickupPointEncoder so specs build valid tokens (incl. UTF-8).
+export function tokenFor(point) {
+    const bytes = new TextEncoder().encode(JSON.stringify(point));
+    let binary = '';
+    bytes.forEach((b) => {
+        binary += String.fromCharCode(b);
+    });
+
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+// A "fetched point" as the endpoint returns it: flat display fields + the opaque `value` token (base64url of
+// the full pickup point, carrying provider/id/country/metadata used by decodeToken/identity).
+export function makePoint(overrides = {}) {
+    const full = Object.assign(
+        { provider: 'faker', id: '0', name: 'Post office #0', address: 'Main Street 1', zipCode: '9000', city: 'Aalborg', country: 'DK', latitude: '57.0', longitude: '9.9', metadata: [] },
+        overrides,
+    );
+
+    return { value: tokenFor(full), name: full.name, address: full.address, zipCode: full.zipCode, city: full.city, latitude: full.latitude, longitude: full.longitude };
+}
+
+export function makePoints(count, provider = 'faker') {
+    const points = [];
+    for (let i = 0; i < count; i++) {
+        points.push(makePoint({ provider: provider, id: String(i), name: 'Point #' + i, address: 'Street ' + i }));
+    }
+
+    return points;
+}
+
+// Builds the minimal checkout DOM the chooser needs: the <template>s, a shipping-method radio inside a `.card`,
+// and the field wrapper with the hidden input.
+export function buildDom({ provider = 'faker', methodValue = 'faker', checked = true, templates = true } = {}) {
+    document.body.innerHTML = '';
+
+    if (templates) {
+        const holder = document.createElement('div');
+        holder.innerHTML = TEMPLATES_HTML.trim();
+        Array.from(holder.children).forEach((child) => document.body.appendChild(child));
+    }
+
+    const card = document.createElement('div');
+    card.className = 'card';
+    const radio = document.createElement('input');
+    radio.type = 'radio';
+    radio.name = 'sylius_shop_checkout_select_shipping[shipments][0][method]';
+    radio.value = methodValue;
+    if (null !== provider) {
+        radio.setAttribute('data-pickup-point-provider', provider);
+    }
+    radio.checked = checked;
+    card.appendChild(radio);
+    document.body.appendChild(card);
+
+    const field = document.createElement('div');
+    field.setAttribute('data-pickup-point-field', '');
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = 'sylius_shop_checkout_select_shipping[shipments][0][pickupPoint]';
+    input.setAttribute('data-pickup-point-input', '');
+    field.appendChild(input);
+    document.body.appendChild(field);
+
+    return { card, radio, field, input };
+}
+
+export function section() {
+    return document.querySelector('[data-setono-pickup-section]');
+}
+
+export function rows() {
+    const list = document.querySelector('[data-role="list"]');
+
+    return list ? Array.from(list.querySelectorAll('label')) : [];
+}
+
+export function resetGlobals() {
+    __resetBootForTests();
+    delete window.setonoSyliusPickupPointUrl;
+    delete window.setonoSyliusPickupPointConfig;
+    delete window.SetonoSyliusPickupPointChooser;
+    document.body.innerHTML = '';
+}
diff --git a/tests/Application/tests/js/helpers.spec.js b/tests/Application/tests/js/helpers.spec.js
new file mode 100644
index 0000000..48b5ac3
--- /dev/null
+++ b/tests/Application/tests/js/helpers.spec.js
@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { decodeToken, identity, addressLine } from '../../../../public/js/setono-pickup-point.js';
+import { tokenFor } from './fixtures.js';
+
+describe('decodeToken', () => {
+    it('round-trips a base64url JSON token (incl. UTF-8)', () => {
+        const token = tokenFor({ provider: 'gls', id: '42', name: 'Kiosk Ø', city: 'København' });
+        expect(decodeToken(token)).toMatchObject({ provider: 'gls', id: '42', name: 'Kiosk Ø', city: 'København' });
+    });
+
+    it('returns null for malformed input', () => {
+        expect(decodeToken('!!! not base64 !!!')).toBeNull();
+        expect(decodeToken('')).toBeNull();
+        expect(decodeToken(null)).toBeNull();
+        expect(decodeToken(undefined)).toBeNull();
+        expect(decodeToken(btoa('hello'))).toBeNull(); // valid base64, not JSON
+    });
+});
+
+describe('identity', () => {
+    it('is provider + id (not country or name)', () => {
+        expect(identity(tokenFor({ provider: 'gls', id: '42', country: 'DK', name: 'A' }))).toBe('gls 42');
+    });
+
+    it('matches across faker drift — same provider+id, different name/country', () => {
+        const a = identity(tokenFor({ provider: 'faker', id: '3', name: 'Old', country: 'DK' }));
+        const b = identity(tokenFor({ provider: 'faker', id: '3', name: 'New', country: 'SE' }));
+        expect(a).toBe(b);
+        expect(a).toBe('faker 3');
+    });
+
+    it('returns null for a bad token', () => {
+        expect(identity('!!!')).toBeNull();
+    });
+});
+
+describe('addressLine', () => {
+    it('joins the address and "zip city" with the separator', () => {
+        expect(addressLine({ address: 'Main St 1', zipCode: '9000', city: 'Aalborg' }, ' · ')).toBe('Main St 1 · 9000 Aalborg');
+    });
+
+    it('omits empty parts', () => {
+        expect(addressLine({ address: '', zipCode: '', city: 'Aalborg' }, ', ')).toBe('Aalborg');
+        expect(addressLine({ address: 'Main St', zipCode: '', city: '' }, ', ')).toBe('Main St');
+    });
+});
diff --git a/tests/Application/tests/js/list.spec.js b/tests/Application/tests/js/list.spec.js
new file mode 100644
index 0000000..239aecb
--- /dev/null
+++ b/tests/Application/tests/js/list.spec.js
@@ -0,0 +1,51 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { PickupPointChooser } from '../../../../public/js/setono-pickup-point.js';
+import { buildDom, makePoints, tokenFor, section, rows, resetGlobals } from './fixtures.js';
+
+afterEach(() => resetGlobals());
+
+function openList() {
+    section().querySelector('[data-action="change"]').click();
+}
+
+describe('list', () => {
+    it('marks the persisted point as Selected by identity on reload (faker drift)', () => {
+        const { field, input } = buildDom();
+        const points = makePoints(3); // provider faker, ids 0,1,2
+        // A persisted token with the same provider+id as points[1] but a drifted name.
+        input.value = tokenFor({ provider: 'faker', id: '1', name: 'Old name', country: 'DK', metadata: [] });
+        new PickupPointChooser(field).setData({ faker: points }); // summary (input already set)
+        openList();
+
+        const allRows = rows();
+        expect(allRows[1].querySelector('[data-role="badge"]').hidden).toBe(false);
+        expect(allRows[1].classList.contains('bg-primary-subtle')).toBe(true);
+        expect(allRows[1].querySelector('[data-role="radio"]').checked).toBe(true);
+        expect(allRows[0].querySelector('[data-role="badge"]').hidden).toBe(true);
+        expect(section().querySelector('[data-slot="current-name"]').textContent).toBe('Old name');
+    });
+
+    it('selecting a row writes its token and returns to the summary', () => {
+        const { field, input } = buildDom();
+        const points = makePoints(3);
+        new PickupPointChooser(field, { autoSelectNearest: false }).setData({ faker: points }); // list
+
+        const radio = rows()[2].querySelector('[data-role="radio"]');
+        radio.checked = true;
+        radio.dispatchEvent(new Event('change', { bubbles: true }));
+
+        expect(input.value).toBe(points[2].value);
+        expect(section().querySelector('[data-action="change"]')).not.toBeNull(); // back to summary
+    });
+
+    it('"Keep this" returns to the summary without changing the input', () => {
+        const { field, input } = buildDom();
+        new PickupPointChooser(field).setData({ faker: makePoints(3) }); // auto-selected summary
+        const token = input.value;
+        openList();
+        section().querySelector('[data-action="keep"]').click();
+
+        expect(input.value).toBe(token);
+        expect(section().querySelector('[data-action="change"]')).not.toBeNull();
+    });
+});
diff --git a/tests/Application/tests/js/render.spec.js b/tests/Application/tests/js/render.spec.js
new file mode 100644
index 0000000..98d7511
--- /dev/null
+++ b/tests/Application/tests/js/render.spec.js
@@ -0,0 +1,53 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { PickupPointChooser } from '../../../../public/js/setono-pickup-point.js';
+import { buildDom, makePoints, section, rows, resetGlobals } from './fixtures.js';
+
+afterEach(() => resetGlobals());
+
+describe('render', () => {
+    it('auto-selects the nearest point and shows the summary', () => {
+        const { field, input } = buildDom();
+        const points = makePoints(3);
+        new PickupPointChooser(field).setData({ faker: points });
+
+        expect(input.value).toBe(points[0].value);
+        const sec = section();
+        expect(sec).not.toBeNull();
+        expect(sec.querySelector('[data-action="change"]')).not.toBeNull();
+        expect(sec.querySelector('[data-slot="name"]').textContent).toBe(points[0].name);
+    });
+
+    it('with autoSelectNearest=false leaves the input empty and shows the list + required marker', () => {
+        const { field, input } = buildDom();
+        new PickupPointChooser(field, { autoSelectNearest: false }).setData({ faker: makePoints(3) });
+
+        expect(input.value).toBe('');
+        expect(rows().length).toBe(3);
+        expect(section().querySelector('[data-role="required"]').hidden).toBe(false);
+    });
+
+    it('renders no section for a method without a provider', () => {
+        const { field } = buildDom({ provider: null });
+        new PickupPointChooser(field).setData({ faker: makePoints(2) });
+
+        expect(section()).toBeNull();
+    });
+
+    it('removes the prior section on re-render', () => {
+        const { field } = buildDom();
+        const chooser = new PickupPointChooser(field);
+        chooser.setData({ faker: makePoints(2) });
+        chooser.render();
+        chooser.render();
+
+        expect(document.querySelectorAll('[data-setono-pickup-section]').length).toBe(1);
+    });
+
+    it('renders nothing and does not crash when the templates are absent', () => {
+        const { field } = buildDom({ templates: false });
+        const chooser = new PickupPointChooser(field);
+
+        expect(() => chooser.setData({ faker: makePoints(2) })).not.toThrow();
+        expect(section()).toBeNull();
+    });
+});
diff --git a/tests/Application/tests/js/states.spec.js b/tests/Application/tests/js/states.spec.js
new file mode 100644
index 0000000..881bab6
--- /dev/null
+++ b/tests/Application/tests/js/states.spec.js
@@ -0,0 +1,34 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { PickupPointChooser } from '../../../../public/js/setono-pickup-point.js';
+import { buildDom, section, resetGlobals } from './fixtures.js';
+
+afterEach(() => resetGlobals());
+
+function visibleStates() {
+    return Array.from(section().querySelectorAll('[data-state]'))
+        .filter((span) => !span.hidden)
+        .map((span) => span.getAttribute('data-state'));
+}
+
+describe('states', () => {
+    it('shows the loading message before data arrives', () => {
+        const { field } = buildDom();
+        new PickupPointChooser(field).render(); // data is null
+
+        expect(visibleStates()).toEqual(['loading']);
+    });
+
+    it('shows the error message on fetch failure', () => {
+        const { field } = buildDom();
+        new PickupPointChooser(field).setData(false);
+
+        expect(visibleStates()).toEqual(['error']);
+    });
+
+    it('shows the empty message when the method has no points', () => {
+        const { field } = buildDom();
+        new PickupPointChooser(field).setData({ faker: [] });
+
+        expect(visibleStates()).toEqual(['empty']);
+    });
+});
diff --git a/tests/Application/vitest.config.mjs b/tests/Application/vitest.config.mjs
new file mode 100644
index 0000000..3c5c85d
--- /dev/null
+++ b/tests/Application/vitest.config.mjs
@@ -0,0 +1,19 @@
+// ESM config (.mjs) on purpose: tests/Application/package.json is NOT "type": "module" because Encore's
+// webpack.config.js is CommonJS. Vitest still imports the ESM source under test via Vite.
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        environment: 'jsdom',
+        include: ['tests/js/**/*.spec.js'],
+        restoreMocks: true,
+        unstubGlobals: true,
+    },
+    // The module under test lives at the repo root (public/js), above this config's root (tests/Application),
+    // so allow Vite to read files up there.
+    server: {
+        fs: {
+            allow: ['../..'],
+        },
+    },
+});

From 765cda0d2218d11da65ddc4e53c26121960e72ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joachim=20L=C3=B8vgaard?= <joachim@loevgaard.dk>
Date: Mon, 8 Jun 2026 13:26:02 +0200
Subject: [PATCH 3/6] Document customizing the pickup-point chooser

Add docs/customizing-the-chooser.md describing the four extension levels (override
the Twig templates, config object, DOM events, subclass) and update README,
CLAUDE.md and UPGRADE.md to note the chooser is now an ES module that clones
overridable templates.
---
 CLAUDE.md                       |  2 +-
 README.md                       |  4 ++
 UPGRADE.md                      |  8 +++-
 docs/customizing-the-chooser.md | 76 +++++++++++++++++++++++++++++++++
 4 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 docs/customizing-the-chooser.md

diff --git a/CLAUDE.md b/CLAUDE.md
index 7b6b9ed..5ddceb5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -57,7 +57,7 @@ When adding/changing a provider, the work happens in three places: the `Provider
 **Checkout pickup-point selection (async, no framework).** This is the heart of the shop UX and it deliberately makes **zero provider calls while the shipping page renders**, so a slow or down carrier can never stall checkout:
 
 - `Form/Extension/ShipmentTypeExtension` adds a hidden `pickupPoint` field (`Form/Type/PickupPointType`, a `HiddenType` + `Form/DataTransformer/PickupPointTransformer`). `Form/Extension/ShippingMethodChoiceTypeExtension` stamps `data-pickup-point-provider` onto each pickup-capable shipping-method radio.
-- After the page is on screen, the framework-free `public/js/setono-pickup-point.js` (wired via the `_javascripts` twig hook on `sylius_shop.base#javascripts`) fetches `GET /pickup-points` (`Controller/Action/PickupPointsAction`) **once**. That endpoint returns each pickup-capable method's points for the current cart, keyed by method code, with a per-provider `try/catch` so one failing carrier doesn't take the others down. The script builds the radio list, toggles the visible group as the shipping method changes, and shows loading/empty/error states. It (re-)initialises on both `DOMContentLoaded` and `turbo:load` because Sylius' shop navigates with Turbo (checkout steps are AJAX body swaps).
+- After the page is on screen, `public/js/setono-pickup-point.js` — a framework-free native **ES module** (`<script type="module">`, no bundler) wired via the `_javascripts` twig hook on `sylius_shop.checkout#javascripts` — fetches `GET /pickup-points` (`Controller/Action/PickupPointsAction`) **once**. That endpoint returns each pickup-capable method's points for the current cart, keyed by method code, with a per-provider `try/catch` so one failing carrier doesn't take the others down. The module's `PickupPointChooser` class builds the chooser by **cloning the `<template>`s** rendered by `templates/shop/checkout/_pickup_point_templates.html.twig` (all markup, translations and styling live there — there is no JS-built markup; a missing template just renders nothing), toggles the visible group as the shipping method changes, and shows loading/empty/error states. It (re-)initialises on both `DOMContentLoaded` and `turbo:load` because Sylius' shop navigates with Turbo (checkout steps are AJAX body swaps). It is extensible without forking — subclass `PickupPointChooser` (register it on `window.SetonoSyliusPickupPointChooser`), listen for the bubbling `setono:pickup-point(s):*` CustomEvents, or set `window.setonoSyliusPickupPointConfig`; see `docs/customizing-the-chooser.md`. JS unit tests run under Vitest/jsdom: `yarn --cwd tests/Application test`.
 - Each radio's value is a `value` token — the whole `DTO/PickupPoint` base64url-encoded by `Encoder/PickupPointEncoder`. Selecting a radio writes the token into the hidden field; on submit `PickupPointTransformer` decodes it straight back into the `PickupPoint` (no provider call, no re-resolve, no faker drift) and `Model/PickupPointAwareTrait::setPickupPoint()` persists it to the `pickup_point` JSON column. `Validator/Constraints/HasPickupPointSelected` enforces that a pickup-capable method actually got a point.
 
 **Identity lives on the DTO.** `DTO/PickupPoint` is a plain final class with public properties (`provider`, `id`, `country`, `name`, …, plus an open `metadata` map) and `fromArray()`/`jsonSerialize()` — not a Doctrine resource. The 1.x `Model/PickupPoint*` resources and the `PickupPointCode` (`provider---id---country`) value object were removed in 2.0.
diff --git a/README.md b/README.md
index ab8dc4a..2df6673 100644
--- a/README.md
+++ b/README.md
@@ -189,6 +189,10 @@ bin/console assets:install
 
 The plugin's JavaScript and CSS are auto-included on the shop checkout via Twig
 hooks (`sylius_shop.checkout#javascripts` / `sylius_shop.checkout#stylesheets`).
+The chooser is a framework-free ES module (loaded with `<script type="module">`)
+that builds its UI by cloning overridable Twig `<template>`s, so you can restyle or
+extend it without forking — see
+[docs/customizing-the-chooser.md](docs/customizing-the-chooser.md).
 
 ### Step 8: Admin shipping method form
 
diff --git a/UPGRADE.md b/UPGRADE.md
index 04c293e..e65b873 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -28,8 +28,12 @@ pickup points for the current cart. Each point carries display fields (`name`,
 `address`, `zipCode`, `city`, `latitude`, `longitude`) plus a `value` token —
 the *whole* point, base64url-encoded by `PickupPointEncoder`. The shipping page
 fetches this **asynchronously, after it has rendered** (so a slow or down carrier
-API never blocks the page), and the framework-free shop JS
-(`public/js/setono-pickup-point.js`) builds the radio list from the response.
+API never blocks the page), and the framework-free shop JS — a native ES module
+(`public/js/setono-pickup-point.js`, loaded with `<script type="module">`) — builds
+the chooser by cloning overridable Twig `<template>`s from
+`_pickup_point_templates.html.twig`. It is extensible without forking: subclass the
+exported `PickupPointChooser`, listen for the `setono:pickup-point(s):*` CustomEvents,
+or set `window.setonoSyliusPickupPointConfig` — see `docs/customizing-the-chooser.md`.
 
 ## Plugin file layout
 
diff --git a/docs/customizing-the-chooser.md b/docs/customizing-the-chooser.md
new file mode 100644
index 0000000..66bcd9f
--- /dev/null
+++ b/docs/customizing-the-chooser.md
@@ -0,0 +1,76 @@
+# Customizing the checkout pickup-point chooser (JavaScript)
+
+The shop checkout pickup-point chooser is a framework-free ES module
+(`public/js/setono-pickup-point.js`, loaded as `<script type="module">`). Once the shipping page is on screen it
+fetches the pickup points for the current cart, then builds the UI by **cloning the `<template>` elements** from
+`templates/shop/checkout/_pickup_point_templates.html.twig`.
+
+You can customize it at four levels, from easiest to most powerful — reach for the lowest one that does the job.
+
+## 1. Restyle the markup — override the Twig templates (no JavaScript)
+
+The chooser's entire markup lives in `_pickup_point_templates.html.twig` as `<template>`s. Copy it into your app
+at `templates/bundles/SetonoSyliusPickupPointPlugin/shop/checkout/_pickup_point_templates.html.twig` and change
+the classes/structure however you like — add a map, show opening hours from a point's `metadata`, swap icons.
+The JavaScript only reads these hooks, so keep them on the right elements:
+
+- `[data-slot="name|address|label|current-name"]` — text is written into them.
+- `[data-role="body|list|required|header|radio|badge"]` — structural anchors / toggled elements.
+- `[data-action="change|keep"]` — buttons the script wires up.
+- `[data-state="loading|empty|error"]` — the message spans.
+
+The five templates are `#setono-pickup-point-section`, `-summary`, `-list`, `-row` and `-message`.
+
+## 2. Toggle behaviour — `window.setonoSyliusPickupPointConfig`
+
+Set a global config object before the module boots:
+
+```html
+<script>
+    window.setonoSyliusPickupPointConfig = {
+        autoSelectNearest: false,        // don't pre-select the nearest point; show the list instead
+        summaryAddressSeparator: ', ',   // separator in the compact summary
+        listAddressSeparator: ' — ',     // separator in the list rows
+    };
+</script>
+```
+
+## 3. React to the chooser — DOM events
+
+The chooser dispatches bubbling `CustomEvent`s on the field element (they bubble up to `document`):
+
+| Event | `detail` | Notes |
+| --- | --- | --- |
+| `setono:pickup-points:loaded` | `{ chooser, field, methodCode, points }` | points fetched for the selected method |
+| `setono:pickup-points:error` | `{ chooser, field, error }` | the fetch failed |
+| `setono:pickup-point:selected` | `{ chooser, field, point, token, source }` | a point was chosen (`source`: `auto` / `list` / `keep`); **cancelable** |
+
+```js
+document.addEventListener('setono:pickup-point:selected', (event) => {
+    analytics.track('pickup_point_selected', event.detail.point);
+    // event.preventDefault() vetoes writing the token (e.g. to block auto-select)
+});
+```
+
+## 4. Change behaviour — subclass `PickupPointChooser`
+
+Register a subclass on `window.SetonoSyliusPickupPointChooser`; the boot instantiates it instead of the default.
+Override one of the seams: `renderRow`, `renderSummary`, `renderList`, `formatAddress`, `shouldAutoSelect`,
+`fetchPoints`.
+
+```html
+<script type="module">
+    import { PickupPointChooser } from '/bundles/setonosyliuspickuppointplugin/js/setono-pickup-point.js';
+
+    window.SetonoSyliusPickupPointChooser = class extends PickupPointChooser {
+        renderRow(point, currentIdentity) {
+            const node = super.renderRow(point, currentIdentity);
+            // ... tweak the cloned row node ...
+            return node;
+        }
+    };
+</script>
+```
+
+Because module scripts are deferred and `DOMContentLoaded` waits for them, your registration runs before the
+chooser's boot reads the global — no ordering tricks needed.

From 57cdfc6da9ddd7bce4be5e6ac394886ea7255ef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joachim=20L=C3=B8vgaard?= <joachim@loevgaard.dk>
Date: Mon, 8 Jun 2026 13:27:10 +0200
Subject: [PATCH 4/6] Resolve dependencies fresh in the javascript-tests job
 (no committed lock)

---
 .github/workflows/build.yaml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 800ed9d..5d2d2ce 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -85,7 +85,11 @@ jobs:
                     php-version: "8.4"
                     extensions: "intl, mbstring"
                     coverage: "none"
+            # composer.lock is gitignored (this is a plugin), so resolve fresh ("highest") rather than the
+            # default locked install which would fail without a lock file.
             -   uses: "ramsey/composer-install@v4"
+                with:
+                    dependency-versions: "highest"
             -   uses: "actions/setup-node@v4"
                 with:
                     node-version: "22"

From 7b3884f191ad3f301f3b7961e17c321e974cbc7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joachim=20L=C3=B8vgaard?= <joachim@loevgaard.dk>
Date: Mon, 8 Jun 2026 13:31:56 +0200
Subject: [PATCH 5/6] Drop redundant dependency-versions on composer-install

ramsey/composer-install already falls back to highest when there is no
composer.lock, so stating it explicitly added nothing.
---
 .github/workflows/build.yaml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 5d2d2ce..800ed9d 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -85,11 +85,7 @@ jobs:
                     php-version: "8.4"
                     extensions: "intl, mbstring"
                     coverage: "none"
-            # composer.lock is gitignored (this is a plugin), so resolve fresh ("highest") rather than the
-            # default locked install which would fail without a lock file.
             -   uses: "ramsey/composer-install@v4"
-                with:
-                    dependency-versions: "highest"
             -   uses: "actions/setup-node@v4"
                 with:
                     node-version: "22"

From 25d490dbf8fc3ea69ca91a9de64b4841cd24b8d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joachim=20L=C3=B8vgaard?= <joachim@loevgaard.dk>
Date: Mon, 8 Jun 2026 13:31:56 +0200
Subject: [PATCH 6/6] Wrap the chooser templates in overridable Twig blocks

Each <template> now sits in its own {% block setono_sylius_pickup_point_* %} so a
consumer can override a single template via Twig inheritance instead of copying the
whole partial. The rendered output (and the <template> ids the JS clones) is unchanged.
---
 .../_pickup_point_templates.html.twig         | 104 ++++++++++--------
 1 file changed, 57 insertions(+), 47 deletions(-)

diff --git a/templates/shop/checkout/_pickup_point_templates.html.twig b/templates/shop/checkout/_pickup_point_templates.html.twig
index 5837428..4e51ccd 100644
--- a/templates/shop/checkout/_pickup_point_templates.html.twig
+++ b/templates/shop/checkout/_pickup_point_templates.html.twig
@@ -1,58 +1,68 @@
 {#
     Overridable markup for the checkout pickup-point chooser. public/js/setono-pickup-point.js clones these
     <template>s and fills their [data-slot] / [data-role] / [data-action] hooks; a consumer can restyle the
-    chooser by overriding this single partial — no JavaScript needed — as long as those hooks are preserved.
-    Emitted once per checkout page via the sylius_shop.checkout#javascripts hook.
+    chooser by overriding this partial (or just one of the blocks below) — no JavaScript needed — as long as
+    those hooks are preserved. Emitted once per checkout page via the sylius_shop.checkout#javascripts hook.
 #}
-<template id="setono-pickup-point-section">
-    <div class="setono-pickup-point px-3 pb-3">
-        <hr class="setono-pickup-point__divider my-3">
-        <div class="fw-bold mb-2">
-            <span data-slot="label">{{ 'setono_sylius_pickup_point.form.shipment.pickup_point'|trans }}</span>
-            <span class="text-danger" data-role="required" hidden>*</span>
+{% block setono_sylius_pickup_point_section %}
+    <template id="setono-pickup-point-section">
+        <div class="setono-pickup-point px-3 pb-3">
+            <hr class="setono-pickup-point__divider my-3">
+            <div class="fw-bold mb-2">
+                <span data-slot="label">{{ 'setono_sylius_pickup_point.form.shipment.pickup_point'|trans }}</span>
+                <span class="text-danger" data-role="required" hidden>*</span>
+            </div>
+            <div data-role="body"></div>
         </div>
-        <div data-role="body"></div>
-    </div>
-</template>
+    </template>
+{% endblock %}
 
-<template id="setono-pickup-point-summary">
-    <div class="d-flex align-items-center gap-3 bg-body border border-primary rounded-3 p-3">
-        <span class="setono-pickup-point__check rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center">
-            <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>
-        </span>
-        <div class="flex-grow-1">
-            <div class="fw-bold" data-slot="name"></div>
-            <div class="text-body-secondary small" data-slot="address"></div>
+{% block setono_sylius_pickup_point_summary %}
+    <template id="setono-pickup-point-summary">
+        <div class="d-flex align-items-center gap-3 bg-body border border-primary rounded-3 p-3">
+            <span class="setono-pickup-point__check rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center">
+                <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>
+            </span>
+            <div class="flex-grow-1">
+                <div class="fw-bold" data-slot="name"></div>
+                <div class="text-body-secondary small" data-slot="address"></div>
+            </div>
+            <button type="button" class="btn btn-link text-primary fw-semibold text-decoration-none p-0" data-action="change">{{ 'setono_sylius_pickup_point.ui.change'|trans }}</button>
         </div>
-        <button type="button" class="btn btn-link text-primary fw-semibold text-decoration-none p-0" data-action="change">{{ 'setono_sylius_pickup_point.ui.change'|trans }}</button>
-    </div>
-</template>
+    </template>
+{% endblock %}
 
-<template id="setono-pickup-point-list">
-    <div>
-        <div class="d-flex justify-content-between align-items-center gap-2 mb-2" data-role="header" hidden>
-            <div class="small text-body-secondary">{{ 'setono_sylius_pickup_point.ui.currently'|trans }} <span class="fw-bold text-body" data-slot="current-name"></span></div>
-            <button type="button" class="btn btn-sm btn-outline-primary flex-shrink-0" data-action="keep">{{ 'setono_sylius_pickup_point.ui.keep_this'|trans }}</button>
+{% block setono_sylius_pickup_point_list %}
+    <template id="setono-pickup-point-list">
+        <div>
+            <div class="d-flex justify-content-between align-items-center gap-2 mb-2" data-role="header" hidden>
+                <div class="small text-body-secondary">{{ 'setono_sylius_pickup_point.ui.currently'|trans }} <span class="fw-bold text-body" data-slot="current-name"></span></div>
+                <button type="button" class="btn btn-sm btn-outline-primary flex-shrink-0" data-action="keep">{{ 'setono_sylius_pickup_point.ui.keep_this'|trans }}</button>
+            </div>
+            <div class="setono-pickup-point__list list-group" data-role="list"></div>
         </div>
-        <div class="setono-pickup-point__list list-group" data-role="list"></div>
-    </div>
-</template>
+    </template>
+{% endblock %}
 
-<template id="setono-pickup-point-row">
-    <label class="list-group-item d-flex align-items-center gap-3">
-        <input type="radio" class="form-check-input flex-shrink-0 m-0" data-role="radio">
-        <div class="flex-grow-1">
-            <div class="fw-bold" data-slot="name"></div>
-            <div class="text-body-secondary small" data-slot="address"></div>
-        </div>
-        <span class="badge bg-primary text-white flex-shrink-0" data-role="badge" hidden>{{ 'setono_sylius_pickup_point.ui.selected'|trans }}</span>
-    </label>
-</template>
+{% block setono_sylius_pickup_point_row %}
+    <template id="setono-pickup-point-row">
+        <label class="list-group-item d-flex align-items-center gap-3">
+            <input type="radio" class="form-check-input flex-shrink-0 m-0" data-role="radio">
+            <div class="flex-grow-1">
+                <div class="fw-bold" data-slot="name"></div>
+                <div class="text-body-secondary small" data-slot="address"></div>
+            </div>
+            <span class="badge bg-primary text-white flex-shrink-0" data-role="badge" hidden>{{ 'setono_sylius_pickup_point.ui.selected'|trans }}</span>
+        </label>
+    </template>
+{% endblock %}
 
-<template id="setono-pickup-point-message">
-    <div class="setono-sylius-pickup-point-field-message text-body-secondary small py-2">
-        <span data-state="loading">{{ 'setono_sylius_pickup_point.ui.loading_pickup_points'|trans }}</span>
-        <span data-state="empty" hidden>{{ 'setono_sylius_pickup_point.ui.no_pickup_points'|trans }}</span>
-        <span data-state="error" hidden>{{ 'setono_sylius_pickup_point.ui.error_loading_pickup_points'|trans }}</span>
-    </div>
-</template>
+{% block setono_sylius_pickup_point_message %}
+    <template id="setono-pickup-point-message">
+        <div class="setono-sylius-pickup-point-field-message text-body-secondary small py-2">
+            <span data-state="loading">{{ 'setono_sylius_pickup_point.ui.loading_pickup_points'|trans }}</span>
+            <span data-state="empty" hidden>{{ 'setono_sylius_pickup_point.ui.no_pickup_points'|trans }}</span>
+            <span data-state="error" hidden>{{ 'setono_sylius_pickup_point.ui.error_loading_pickup_points'|trans }}</span>
+        </div>
+    </template>
+{% endblock %}