Merge branch 'cart-temp' into box-now-test-

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "boboko-starter",
+    "name": "app",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
@@ -7,9 +7,8 @@
             "dependencies": {
                 "@hotwired/stimulus": "^3.2.2",
                 "@hotwired/turbo": "^8.0.23",
-                "@phosphor-icons/web": "^2.1.2",
                 "axios": "^1.15.2",
-                "flatpickr": "^4.6.13"
+                "leaflet": "^1.9.4"
             },
             "devDependencies": {
                 "@tailwindcss/vite": "^4.0.0",
@@ -147,12 +146,6 @@
                 "url": "https://github.com/sponsors/Boshen"
             }
         },
-        "node_modules/@phosphor-icons/web": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/@phosphor-icons/web/-/web-2.1.2.tgz",
-            "integrity": "sha512-rPAR9o/bEcp4Cw4DEeZHXf+nlGCMNGkNDRizYHM47NLxz9vvEHp/Tt6FMK1NcWadzw/pFDPnRBGi/ofRya958A==",
-            "license": "MIT"
-        },
         "node_modules/@rolldown/binding-android-arm64": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.4.tgz",
@@ -1015,12 +1008,6 @@
                 }
             }
         },
-        "node_modules/flatpickr": {
-            "version": "4.6.13",
-            "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
-            "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
-            "license": "MIT"
-        },
         "node_modules/follow-redirects": {
             "version": "1.16.0",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
@@ -1256,6 +1243,12 @@
                 }
             }
         },
+        "node_modules/leaflet": {
+            "version": "1.9.4",
+            "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+            "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+            "license": "BSD-2-Clause"
+        },
         "node_modules/lightningcss": {
             "version": "1.32.0",
             "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "dependencies": {
         "@hotwired/stimulus": "^3.2.2",
         "@hotwired/turbo": "^8.0.23",
-        "axios": "^1.15.2"
+        "axios": "^1.15.2",
+        "leaflet": "^1.9.4"
     }
 }

resources/css/checkout.css

@@ -656,6 +656,141 @@ .bbk-checkout-status {
 
 .bbk-checkout-status[data-state="error"] { color: var(--bbk-color-danger); }
 
+/* Dummy Box Now locker picker — see shipping-options.blade.php. */
+.bbk-checkout-box-now-locker {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+    padding: 0.875rem 1rem;
+    border: 1px solid var(--bbk-color-border);
+    border-radius: var(--bbk-radius-sm);
+}
+
+.bbk-checkout-box-now-locker-label {
+    font-weight: 600;
+    font-size: 0.8125rem;
+}
+
+.bbk-checkout-box-now-locker-map {
+    width: 100%;
+    height: 480px;
+    border-radius: var(--bbk-radius-sm);
+    z-index: 0;
+}
+
+.bbk-checkout-box-now-locker-search {
+    width: 100%;
+    padding: 0.625rem 0.875rem;
+    border: 1px solid var(--bbk-color-border);
+    border-radius: var(--bbk-radius-sm);
+    font-size: 0.875rem;
+}
+
+.bbk-checkout-box-now-locker-search:focus {
+    outline: none;
+    border-color: var(--bbk-color-accent);
+}
+
+.bbk-checkout-box-now-locker-chosen {
+    margin: 0;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--bbk-color-accent);
+}
+
+/* Custom SVG pin (see bbk-box-now-locker-controller.js pinIcon()) — no
+   default Leaflet drop-shadow image, so a CSS shadow stands in for it. */
+.bbk-box-now-pin svg {
+    filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35));
+}
+
+/* Leaflet's own popup chrome, restyled to match the checkout's cards
+   instead of the library's square-cornered default. */
+.leaflet-popup-content-wrapper {
+    border-radius: 0.75rem;
+    box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
+}
+
+.leaflet-popup-content {
+    margin: 0.875rem;
+}
+
+.bbk-box-now-popup {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 220px;
+}
+
+.bbk-box-now-popup-image {
+    width: calc(100% + 1.75rem);
+    margin: -0.875rem -0.875rem 0.125rem;
+    height: 110px;
+    object-fit: cover;
+    border-radius: 0.75rem 0.75rem 0 0;
+}
+
+.bbk-box-now-popup-name {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin: 0;
+    font-weight: 700;
+    font-size: 0.9375rem;
+}
+
+.bbk-box-now-popup-name::before {
+    content: '';
+    flex: 0 0 auto;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 999px;
+    background: #00c389;
+}
+
+.bbk-box-now-popup-address {
+    margin: 0;
+    padding-left: 0.875rem;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--bbk-color-muted);
+}
+
+.bbk-box-now-popup-note {
+    margin: 0 0 0 0.875rem;
+    padding: 0.5rem 0.625rem;
+    background: color-mix(in srgb, #00c389 8%, transparent);
+    border-radius: var(--bbk-radius-sm);
+    font-size: 0.75rem;
+    font-style: italic;
+    color: var(--bbk-color-muted);
+}
+
+.bbk-box-now-popup-select {
+    margin-top: 0.25rem;
+    padding: 0.625rem 0.875rem;
+    width: 100%;
+    border: none;
+    border-radius: var(--bbk-radius-sm);
+    background: #00c389;
+    color: #ffffff;
+    font-weight: 700;
+    font-size: 0.8125rem;
+    letter-spacing: 0.01em;
+    cursor: pointer;
+    transition: background-color 0.15s ease, transform 0.1s ease;
+}
+
+.bbk-box-now-popup-select:hover { background: #00a876; transform: translateY(-1px); }
+.bbk-box-now-popup-select:active { transform: translateY(0); }
+
+.bbk-box-now-popup-select--selected,
+.bbk-box-now-popup-select--selected:hover {
+    background: var(--bbk-color-muted);
+    cursor: default;
+}
+
 /* Continue / submit buttons — same look as the drawer's checkout CTA */
 
 .bbk-checkout-continue {

resources/js/checkout/bbk-box-now-locker-controller.js

@@ -0,0 +1,220 @@
+import { Controller } from '@hotwired/stimulus'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { csrfToken } from './csrf'
+
+// Box Now's own brand green, used for the pin instead of Leaflet's default
+// blue teardrop — a small SVG data URI rather than another bundled asset.
+const PIN_COLOR = '#00c389'
+const PIN_COLOR_SELECTED = '#0a7a52'
+
+function pinIcon(color) {
+    const svg = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="34" height="46" viewBox="0 0 34 46">
+            <path
+                d="M17 0C7.6 0 0 7.6 0 17c0 12.75 17 29 17 29s17-16.25 17-29C34 7.6 26.4 0 17 0Z"
+                fill="${color}"
+                stroke="#ffffff"
+                stroke-width="1.5"
+            />
+            <circle cx="17" cy="17" r="7" fill="#ffffff" />
+        </svg>
+    `
+
+    return L.divIcon({
+        className: 'bbk-box-now-pin',
+        html: svg,
+        iconSize: [34, 46],
+        iconAnchor: [17, 46],
+        popupAnchor: [0, -40],
+    })
+}
+
+const ICON = pinIcon(PIN_COLOR)
+const ICON_SELECTED = pinIcon(PIN_COLOR_SELECTED)
+
+// A self-hosted Leaflet map standing in for Box Now's own Destination Map
+// JS widget — that widget only talks to Box Now's Production API (see
+// their Partner API manual §4.1), so it can't be used while developing
+// against Stage credentials. Same underlying /destinations data, rendered
+// with OpenStreetMap tiles instead of Box Now's map.
+//
+// Visibility is toggled by bbk-checkout-form (see its own
+// toggleBoxNowLocker()) whenever the "box-now" shipping option becomes
+// selected/deselected — this controller only owns loading the locker list
+// once visible, rendering pins, and autosaving the chosen one.
+export default class extends Controller {
+    static targets = ['map', 'search', 'status', 'chosen']
+
+    static values = {
+        lockersUrl: String,
+        selectUrl: String,
+        loading: String,
+        selectLabel: String,
+        selectedLabel: String,
+        noResults: String,
+    }
+
+    // Athens — a reasonable default center before any locker is loaded.
+    static DEFAULT_CENTER = [37.9838, 23.7275]
+
+    connect() {
+        this.map = null
+        this.markers = new Map()
+        this.selectedId = null
+        this.loaded = false
+
+        if (!this.element.hidden) this.show()
+    }
+
+    disconnect() {
+        this.map?.remove()
+        this.map = null
+    }
+
+    // Called by bbk-checkout-form right after it un-hides this element.
+    show() {
+        this.element.hidden = false
+
+        // Leaflet measures its container's size on init — doing that while
+        // the element (or an ancestor) is still `hidden` produces a
+        // collapsed/blank map, so this is deferred to the same tick `hidden`
+        // is cleared, then Leaflet is nudged once more via invalidateSize().
+        requestAnimationFrame(() => {
+            if (!this.map) this.initMap()
+            this.map.invalidateSize()
+
+            if (!this.loaded) this.loadLockers()
+        })
+    }
+
+    hide() {
+        this.element.hidden = true
+    }
+
+    initMap() {
+        this.map = L.map(this.mapTarget).setView(this.constructor.DEFAULT_CENTER, 10)
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors',
+            maxZoom: 19,
+        }).addTo(this.map)
+
+        // Delegated: popup content is re-inserted by Leaflet on every open,
+        // so a listener bound once on the map's container beats binding (and
+        // losing) one on the button each time a popup renders.
+        this.map.getContainer().addEventListener('click', (event) => {
+            const button = event.target.closest('[data-locker-id]')
+            if (button) this.select(button.dataset.lockerId)
+        })
+    }
+
+    async loadLockers() {
+        this.setStatus(this.loadingValue)
+
+        try {
+            const response = await fetch(this.lockersUrlValue, {
+                headers: { Accept: 'application/json' },
+            })
+
+            if (!response.ok) return
+
+            const { lockers } = await response.json()
+            this.loaded = true
+            this.lockers = new Map(lockers.map((locker) => [String(locker.id), locker]))
+            this.renderMarkers(lockers)
+            this.setStatus('')
+        } catch {
+            this.setStatus('')
+        }
+    }
+
+    renderMarkers(lockers) {
+        this.markers.forEach((marker) => marker.remove())
+        this.markers = new Map(lockers.map((locker) => {
+            const marker = L.marker([locker.lat, locker.lng], { icon: ICON })
+                .addTo(this.map)
+                .bindPopup(this.popupHtml(locker), { maxWidth: 260 })
+
+            return [String(locker.id), marker]
+        }))
+
+        if (this.markers.size) {
+            this.map.fitBounds(L.featureGroup([...this.markers.values()]).getBounds().pad(0.2))
+        }
+    }
+
+    popupHtml(locker) {
+        const isSelected = String(locker.id) === this.selectedId
+
+        return `
+            <div class="bbk-box-now-popup">
+                ${locker.image ? `<img class="bbk-box-now-popup-image" src="${locker.image}" alt="">` : ''}
+                <p class="bbk-box-now-popup-name">${locker.name}</p>
+                <p class="bbk-box-now-popup-address">
+                    ${[locker.addressLine1, locker.addressLine2].filter(Boolean).join(', ')}
+                    ${locker.postalCode ? ` ${locker.postalCode}` : ''}
+                </p>
+                ${locker.note ? `<p class="bbk-box-now-popup-note">${locker.note}</p>` : ''}
+                <button
+                    type="button"
+                    class="bbk-box-now-popup-select${isSelected ? ' bbk-box-now-popup-select--selected' : ''}"
+                    data-locker-id="${locker.id}"
+                    ${isSelected ? 'disabled' : ''}
+                >
+                    ${isSelected ? this.selectedLabelValue : this.selectLabelValue}
+                </button>
+            </div>
+        `
+    }
+
+    async select(lockerId) {
+        const locker = this.lockers?.get(String(lockerId))
+        if (!locker) return
+
+        const previousId = this.selectedId
+        this.selectedId = String(lockerId)
+
+        this.restyleMarker(previousId, ICON)
+        this.restyleMarker(this.selectedId, ICON_SELECTED)
+        this.markers.get(this.selectedId)?.setPopupContent(this.popupHtml(locker))
+
+        this.chosenTarget.hidden = false
+        this.chosenTarget.textContent = locker.addressLine1
+            ? `${locker.name} — ${locker.addressLine1}`
+            : locker.name
+
+        const body = new FormData()
+        body.append('locker_id', locker.id)
+        body.append('locker_name', locker.name ?? '')
+        body.append('locker_address', locker.addressLine1 ?? '')
+
+        try {
+            await fetch(this.selectUrlValue, {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': csrfToken(),
+                    'X-Requested-With': 'XMLHttpRequest',
+                    Accept: 'application/json',
+                },
+                body,
+            })
+        } catch {
+            // Best-effort autosave, same as the rest of checkout — a failed
+            // save here surfaces later at place-order time via the normal
+            // shipment-creation error path, not as an inline field error.
+        }
+    }
+
+    restyleMarker(lockerId, icon) {
+        if (!lockerId) return
+        this.markers.get(lockerId)?.setIcon(icon)
+    }
+
+    setStatus(text) {
+        if (!this.hasStatusTarget) return
+
+        this.statusTarget.textContent = text
+        this.statusTarget.hidden = !text
+    }
+}

resources/js/checkout/bbk-checkout-form-controller.js

@@ -123,12 +123,34 @@ export default class extends Controller {
     }
 
     async selectShipping(event) {
+        this.toggleBoxNowLocker(event.target.value)
+
         // Tracked so flush() can await it — nothing else stops "place order"
         // (a separate, unrelated click) from racing ahead of this request.
         this.shippingPromise = this.doSelectShipping(event.target.value)
         await this.shippingPromise
     }
 
+    // The dummy Box Now locker <select> (see shipping-options.blade.php)
+    // lives inside the #bbk-shipping-options fragment this controller
+    // re-renders wholesale on every shipping-option change — so its own
+    // Stimulus controller reconnects fresh each time and has no memory of
+    // which option was previously selected. This is the one place that
+    // knows the newly-chosen option's identifier, so it also owns
+    // showing/hiding the picker.
+    toggleBoxNowLocker(identifier) {
+        const picker = this.shippingOptionsTarget.querySelector('#bbk-box-now-locker')
+        if (!picker) return
+
+        const controller = this.application.getControllerForElementAndIdentifier(picker, 'bbk-box-now-locker')
+
+        if (identifier === 'box-now') {
+            controller?.show()
+        } else {
+            controller?.hide()
+        }
+    }
+
     async doSelectShipping(value) {
         this.saveController?.abort()
         this.setStatus('saving')

resources/js/checkout/index.js

@@ -1,4 +1,5 @@
 import BbkAddToCartController from './bbk-add-to-cart-controller'
+import BbkBoxNowLockerController from './bbk-box-now-locker-controller'
 import BbkCartController from './bbk-cart-controller'
 import BbkCheckoutFormController from './bbk-checkout-form-controller'
 import BbkPaymentController from './bbk-payment-controller'
@@ -13,6 +14,7 @@ import BbkPaymentController from './bbk-payment-controller'
 // only that one import line in the host entry point differs per project.
 export function registerCheckout(application) {
     application.register('bbk-add-to-cart', BbkAddToCartController)
+    application.register('bbk-box-now-locker', BbkBoxNowLockerController)
     application.register('bbk-cart', BbkCartController)
     application.register('bbk-checkout-form', BbkCheckoutFormController)
     application.register('bbk-payment', BbkPaymentController)