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

resources/js/checkout/bbk-add-to-cart-controller.js

@@ -6,12 +6,15 @@ import { csrfToken } from './csrf'
 // `bbk-cart:changed` window event. No DOM building here — the drawer
 // (bbk-cart-controller) owns rendering.
 export default class extends Controller {
+    static targets = ['error']
+
     async add(event) {
         event.preventDefault()
 
         const form = this.element
         const submit = form.querySelector('[type="submit"]')
 
+        this.clearError()
         form.setAttribute('data-bbk-add-to-cart-state', 'loading')
         if (submit) submit.disabled = true
 
@@ -21,11 +24,16 @@ export default class extends Controller {
                 headers: {
                     'X-CSRF-TOKEN': csrfToken(),
                     'X-Requested-With': 'XMLHttpRequest',
+                    Accept: 'application/json',
                 },
                 body: new FormData(form),
             })
 
-            if (!response.ok) return
+            if (!response.ok) {
+                const data = await response.json().catch(() => null)
+                this.showError(data?.error)
+                return
+            }
 
             window.dispatchEvent(new CustomEvent('bbk-cart:changed', {
                 detail: { html: await response.text() },
@@ -35,4 +43,15 @@ export default class extends Controller {
             if (submit) submit.disabled = false
         }
     }
+
+    showError(message) {
+        if (!this.hasErrorTarget || !message) return
+        this.errorTarget.textContent = message
+        this.errorTarget.hidden = false
+    }
+
+    clearError() {
+        if (!this.hasErrorTarget) return
+        this.errorTarget.hidden = true
+    }
 }

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

@@ -13,11 +13,12 @@ import { csrfToken } from './csrf'
 // Appearance is entirely CSS-driven: open state is the data-bbk-cart-state
 // attribute on the root, nothing here touches styles or class lists.
 export default class extends Controller {
-    static targets = ['panel', 'body']
+    static targets = ['panel', 'body', 'error']
 
     connect() {
         this.onChanged = this.onChanged.bind(this)
         this.onKeydown = this.onKeydown.bind(this)
+        this.updateTimers = new Map() // line id -> pending debounce timer
 
         window.addEventListener('bbk-cart:changed', this.onChanged)
         window.addEventListener('bbk-cart:open', this.open.bind(this))
@@ -30,6 +31,7 @@ export default class extends Controller {
     disconnect() {
         window.removeEventListener('bbk-cart:changed', this.onChanged)
         document.removeEventListener('keydown', this.onKeydown)
+        this.updateTimers.forEach((timer) => clearTimeout(timer))
     }
 
     onChanged(event) {
@@ -63,7 +65,11 @@ export default class extends Controller {
     submit(event) {
         event.preventDefault()
         const form = event.target.closest('form')
-        if (form) this.send(form)
+        if (!form) return
+
+        // A remove is a deliberate, one-shot action — only the quantity form
+        // (typing, or the +/- stepper below) benefits from debouncing.
+        form.classList.contains('bbk-cart-qty') ? this.scheduleSend(form) : this.send(form)
     }
 
     // +/- stepper buttons inside a line
@@ -73,11 +79,27 @@ export default class extends Controller {
         const input = form.querySelector('input[type="number"]')
         const next = Math.max(0, parseInt(input.value || '0', 10) + Number(event.params.dir))
         input.value = String(next)
-        this.send(form)
+        this.scheduleSend(form)
+    }
+
+    // Repeated clicks (or spinner nudges) update the input instantly but only
+    // send once they settle for 300ms — sending on every single click was
+    // firing overlapping requests that raced each other and made the drawer
+    // visibly flicker/lag under quick clicking.
+    scheduleSend(form) {
+        const lineId = form.closest('[data-bbk-line-id]')?.dataset.bbkLineId
+        if (!lineId) return this.send(form)
+
+        clearTimeout(this.updateTimers.get(lineId))
+        this.updateTimers.set(lineId, setTimeout(() => {
+            this.updateTimers.delete(lineId)
+            this.send(form)
+        }, 300))
     }
 
     async send(form) {
         this.bodyTarget.setAttribute('aria-busy', 'true')
+        this.clearError()
 
         try {
             const response = await fetch(form.action, {
@@ -85,16 +107,42 @@ export default class extends Controller {
                 headers: {
                     'X-CSRF-TOKEN': csrfToken(),
                     'X-Requested-With': 'XMLHttpRequest',
+                    Accept: 'application/json',
                 },
                 body: new FormData(form),
             })
 
-            if (response.ok) this.replaceBody(await response.text())
+            if (response.ok) {
+                this.replaceBody(await response.text())
+                return
+            }
+
+            const data = await response.json().catch(() => null)
+            this.showError(data?.error)
+
+            // The rejected quantity (typed, or from a +/- click) is left
+            // sitting in the input with nothing to correct it — the update
+            // never reached the cart, so the input must be put back to what
+            // the cart actually still holds, not just left showing whatever
+            // was rejected.
+            const input = form.querySelector('[data-bbk-cart-confirmed-quantity]')
+            if (input) input.value = input.dataset.bbkCartConfirmedQuantity
         } finally {
             this.bodyTarget.removeAttribute('aria-busy')
         }
     }
 
+    showError(message) {
+        if (!this.hasErrorTarget || !message) return
+        this.errorTarget.textContent = message
+        this.errorTarget.hidden = false
+    }
+
+    clearError() {
+        if (!this.hasErrorTarget) return
+        this.errorTarget.hidden = true
+    }
+
     replaceBody(html) {
         this.bodyTarget.innerHTML = html
         this.emitUpdated(this.bodyTarget.querySelector('[data-bbk-cart-count]'))

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

@@ -13,7 +13,6 @@ import { csrfToken } from './csrf'
 // already uses). Shipping-method radios post to selectShippingUrl the same way.
 export default class extends Controller {
     static targets = [
-        'guestTab', 'loginTab', 'guestPanel', 'loginPanel',
         'sameAsBilling', 'shippingFields',
         'form', 'shippingOptions', 'status',
     ]
@@ -41,22 +40,6 @@ export default class extends Controller {
         this.saveController?.abort()
     }
 
-    // ── Contact tabs ────────────────────────────────────────────────────
-
-    showGuest() {
-        this.guestPanelTarget.hidden = false
-        this.loginPanelTarget.hidden = true
-        this.guestTabTarget.setAttribute('aria-selected', 'true')
-        this.loginTabTarget.setAttribute('aria-selected', 'false')
-    }
-
-    showLogin() {
-        this.guestPanelTarget.hidden = true
-        this.loginPanelTarget.hidden = false
-        this.guestTabTarget.setAttribute('aria-selected', 'false')
-        this.loginTabTarget.setAttribute('aria-selected', 'true')
-    }
-
     // ── Same as billing ────────────────────────────────────────────────
 
     toggleSameAsBilling() {
@@ -93,7 +76,6 @@ export default class extends Controller {
         // react to fields that actually belong to the address form.
         const el = event.target
         const belongsToForm = el.form?.id === 'bbk-address-form'
-            || el.closest('[data-bbk-checkout-form-target="guestPanel"]')
         if (!belongsToForm) return
 
         // No status during the wait — it only shows once the request is in flight,

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

@@ -43,6 +43,16 @@ export default class extends Controller {
                 this.amountValue = total
                 this.elements.update({ amount: Math.max(total, 1) })
             }
+
+            // Removing the last line while sitting on the checkout page (via
+            // the order summary's own remove form) must not leave "place
+            // order" clickable with nothing left to charge for — this fires
+            // from both the drawer and the checkout page's own summary
+            // instance, whichever the shopper actually used.
+            const count = event.detail?.count
+            if (typeof count === 'number' && this.hasSubmitTarget) {
+                this.submitTarget.disabled = count === 0
+            }
         }
         window.addEventListener('bbk-cart:updated', this.onSummaryUpdate)
 

resources/js/stimulus/custom-field-upload-controller.js

@@ -0,0 +1,108 @@
+import { Controller } from '@hotwired/stimulus'
+
+// One product custom field of type `file` (see x-product-custom-fields).
+// Uploads the photo to the storefront's own endpoint (CustomFieldUploadController)
+// as soon as it's picked, then writes the returned File row's id (boboko-core's
+// Modules\Core\File\Models\File) into the hidden input the add-to-cart form
+// actually submits — the checkout module never receives the file itself.
+//
+// While uploading, the file input is marked invalid via setCustomValidity(),
+// so the browser's own form validation blocks add-to-cart until the id is in
+// place. A failed upload clears the input, so `required` blocks it too.
+export default class extends Controller {
+    static targets = ['file', 'reference', 'preview', 'error']
+    static values  = {
+        url: String,
+        label: String,
+        uploadingMessage: String,
+        failedMessage: String,
+    }
+
+    disconnect() {
+        this.abortController?.abort()
+        this.revokePreview()
+    }
+
+    async upload() {
+        this.reset()
+
+        const file = this.fileTarget.files[0]
+        if (!file) return
+
+        const abortController = new AbortController()
+        this.abortController = abortController
+
+        this.fileTarget.setCustomValidity(this.uploadingMessageValue)
+        this.fileTarget.setAttribute('aria-busy', 'true')
+
+        const body = new FormData()
+        body.append('file', file)
+        body.append('label', this.labelValue)
+
+        try {
+            const response = await fetch(this.urlValue, {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    Accept: 'application/json',
+                },
+                body,
+                signal: abortController.signal,
+            })
+            const data = await response.json().catch(() => null)
+
+            if (!response.ok || !data?.file_id) {
+                this.fail(data?.error)
+                return
+            }
+
+            this.referenceTarget.value = data.file_id
+            this.showPreview(file)
+        } catch (error) {
+            // A newer pick superseded this upload — reset() already handled it.
+            if (error.name === 'AbortError') return
+            this.fail()
+        } finally {
+            if (!abortController.signal.aborted) this.markIdle()
+        }
+    }
+
+    reset() {
+        this.abortController?.abort()
+        this.referenceTarget.value = ''
+        this.errorTarget.hidden = true
+        this.markIdle()
+        this.revokePreview()
+    }
+
+    fail(message) {
+        this.fileTarget.value = ''
+        this.errorTarget.textContent = message || this.failedMessageValue
+        this.errorTarget.hidden = false
+    }
+
+    markIdle() {
+        this.fileTarget.setCustomValidity('')
+        this.fileTarget.removeAttribute('aria-busy')
+    }
+
+    showPreview(file) {
+        this.previewUrl = URL.createObjectURL(file)
+        this.previewTarget.src = this.previewUrl
+        this.previewTarget.hidden = false
+    }
+
+    // Formats the browser can't render (HEIC outside Safari) — the file
+    // input's own filename is enough there.
+    hidePreview() {
+        this.previewTarget.hidden = true
+    }
+
+    revokePreview() {
+        if (this.previewUrl) URL.revokeObjectURL(this.previewUrl)
+        this.previewUrl = null
+        this.previewTarget.removeAttribute('src')
+        this.previewTarget.hidden = true
+    }
+}

resources/js/stimulus/index.js

@@ -8,6 +8,7 @@ import AutoSubmitController     from './auto-submit-controller'
 import BackToTopController      from './back-to-top-controller'
 import CartCountController      from './cart-count-controller'
 import CarouselController       from './carousel-controller'
+import CustomFieldUploadController from './custom-field-upload-controller'
 import DropdownController       from './dropdown-controller'
 import FrameScrollController    from './frame-scroll-controller'
 import NavSearchController      from './nav-search-controller'
@@ -16,7 +17,9 @@ import ProductGalleryController from './product-gallery-controller'
 import QuantityController      from './quantity-controller'
 import RangeSliderController   from './range-slider-controller'
 import StarRatingController    from './star-rating-controller'
+import TabLinkController       from './tab-link-controller'
 import TabsController          from './tabs-controller'
+import WishlistController      from './wishlist-controller'
 
 export function registerControllers(application) {
     application.register('appear',           AppearController)
@@ -24,6 +27,7 @@ export function registerControllers(application) {
     application.register('back-to-top',      BackToTopController)
     application.register('cart-count',       CartCountController)
     application.register('carousel',         CarouselController)
+    application.register('custom-field-upload', CustomFieldUploadController)
     application.register('dropdown',         DropdownController)
     application.register('frame-scroll',     FrameScrollController)
     application.register('nav-search',       NavSearchController)
@@ -32,5 +36,7 @@ export function registerControllers(application) {
     application.register('quantity',         QuantityController)
     application.register('range-slider',     RangeSliderController)
     application.register('star-rating',      StarRatingController)
+    application.register('tab-link',         TabLinkController)
     application.register('tabs',             TabsController)
+    application.register('wishlist',         WishlistController)
 }

resources/js/stimulus/product-form-controller.js

@@ -2,25 +2,138 @@ import { Controller } from '@hotwired/stimulus'
 import { formatPrice } from '../utils/format-price'
 
 export default class extends Controller {
-    static targets = ['price', 'image', 'swatch', 'colorName']
-    static values  = { variants: Array, selected: Number }
+    static targets = ['price', 'image', 'swatch', 'colorName', 'stockError', 'submit']
+    static values  = {
+        variants: Array,
+        selected: Number,
+        stockCheckUrl: String,
+        // Two pre-rendered translated templates (see product/show.blade.php)
+        // rather than one — this controller doesn't reimplement Laravel's
+        // pluralization rules, it just picks whichever of these two the
+        // count actually needs and fills in the number.
+        stockErrorOne: String,
+        stockErrorMany: String,
+    }
 
     connect() {
-        const params    = new URLSearchParams(window.location.search)
-        const urlId     = parseInt(params.get('variant'))
-        const defaultId = this.variantsValue[0]?.id
+        const params      = new URLSearchParams(window.location.search)
+        const urlId       = parseInt(params.get('variant'))
+        const urlVariant  = this.variantsValue.find(v => v.id === urlId)
+        const initial     = urlVariant ?? this.variantsValue[0]
 
-        this.selectedValue = urlId && this.variantsValue.find(v => v.id === urlId)
-            ? urlId
-            : defaultId
+        // A product can have several independent options (e.g. size + style
+        // + person-count) — this tracks the currently-picked value id per
+        // option handle, and selectVariant() below resolves the full
+        // combination back to one exact variant on every change.
+        this.selections = { ...initial?.options }
+        this.selectedValue = initial?.id
+
+        // Capture phase, on this controller's own root element (an ancestor
+        // of the checkout module's add-to-cart <form>) — runs BEFORE that
+        // form's own bubble-phase submit handler (bbk-add-to-cart#add), so a
+        // failed check can stop it from ever reaching the module at all. The
+        // module itself is never touched or modified for this: it keeps
+        // validating server-side regardless, this is purely an up-front,
+        // storefront-owned check (see [[project_checkout_module]] for why
+        // that split matters — stock UX is a catalog concern, not something
+        // the portable checkout module should own) — and a REAL, live check
+        // against the backend (ProductController::checkStock(), reading the
+        // Eloquent model directly), not page-load data that can go stale.
+        this.onSubmitCapture = this.checkStock.bind(this)
+        this.element.addEventListener('submit', this.onSubmitCapture, true)
+    }
+
+    disconnect() {
+        this.element.removeEventListener('submit', this.onSubmitCapture, true)
+    }
+
+    checkStock(event) {
+        const form = event.target
+        if (!form.matches('.bbk-add-to-cart')) return
+
+        // The re-submit this itself triggers below, once the backend has
+        // confirmed the quantity is fine — let that one through to the
+        // module's own submit handler instead of checking a second time.
+        if (form.dataset.bbkStockChecked) {
+            delete form.dataset.bbkStockChecked
+            return
+        }
+
+        event.preventDefault()
+        event.stopPropagation()
+        this.verifyStock(form)
+    }
+
+    async verifyStock(form) {
+        this.clearStockError()
+
+        const submit = form.querySelector('[type="submit"]')
+        if (submit) submit.disabled = true
+
+        const purchasableId = form.querySelector('[data-bbk-purchasable-input]')?.value
+        const quantity = form.querySelector('[name="quantity"]')?.value || '1'
+
+        try {
+            const url = new URL(this.stockCheckUrlValue, window.location.origin)
+            url.searchParams.set('variant', purchasableId)
+            url.searchParams.set('quantity', quantity)
+
+            const response = await fetch(url, { headers: { Accept: 'application/json' } })
+            const data = await response.json()
+
+            if (!data.ok) {
+                this.showStockError(data.stock)
+                return
+            }
+        } catch {
+            // Network hiccup — fall through and let the checkout module's
+            // own server-side check have the final word rather than
+            // silently blocking the shopper here.
+        } finally {
+            if (submit) submit.disabled = !this.selectedVariant?.inStock
+        }
+
+        form.dataset.bbkStockChecked = 'true'
+        form.requestSubmit()
+    }
+
+    showStockError(available) {
+        if (!this.hasStockErrorTarget) return
+
+        this.stockErrorTarget.textContent = available === 1
+            ? this.stockErrorOneValue
+            : this.stockErrorManyValue.replace(':count', String(available))
+        this.stockErrorTarget.hidden = false
+    }
+
+    clearStockError() {
+        if (!this.hasStockErrorTarget) return
+        this.stockErrorTarget.hidden = true
+    }
+
+    get selectedVariant() {
+        return this.variantsValue.find(v => v.id === this.selectedValue)
     }
 
     selectVariant(event) {
-        const id = parseInt(event.currentTarget.dataset.variantId)
-        this.selectedValue = id
+        const option = event.currentTarget.dataset.option
+        const valueId = parseInt(event.currentTarget.dataset.valueId)
+        this.selections = { ...this.selections, [option]: valueId }
+
+        const match = this.variantsValue.find(variant =>
+            Object.keys(this.selections).every(key => variant.options?.[key] === this.selections[key])
+        )
+
+        // No variant exists for this combination (e.g. an option value that
+        // isn't offered together with another currently-selected value) —
+        // leave the previous selection in place rather than pointing the
+        // add-to-cart form at nothing.
+        if (!match) return
+
+        this.selectedValue = match.id
 
         const url = new URL(window.location)
-        url.searchParams.set('variant', id)
+        url.searchParams.set('variant', match.id)
         window.history.pushState({}, '', url)
     }
 
@@ -30,6 +143,8 @@ export default class extends Controller {
         const variant = this.variantsValue.find(v => v.id === id)
         if (!variant) return
 
+        this.clearStockError()
+
         if (this.hasPriceTarget && variant.price !== null) {
             this.priceTarget.textContent = formatPrice(variant.price)
         }
@@ -45,13 +160,20 @@ export default class extends Controller {
         const purchasableInput = this.element.querySelector('[data-bbk-purchasable-input]')
         if (purchasableInput) purchasableInput.value = id
 
+        // Out-of-stock variant (as of page load) can't be added at all.
+        if (this.hasSubmitTarget) this.submitTarget.disabled = !variant.inStock
+
         this.swatchTargets.forEach(swatch => {
-            const isSelected = parseInt(swatch.dataset.variantId) === id
+            const isSelected = this.selections[swatch.dataset.option] === parseInt(swatch.dataset.valueId)
             swatch.classList.toggle('is-selected', isSelected)
             swatch.setAttribute('aria-pressed', String(isSelected))
 
-            if (isSelected && this.hasColorNameTarget) {
-                this.colorNameTarget.textContent = swatch.getAttribute('aria-label')
+            if (isSelected) {
+                // Each color-option group has its own colorName echo (see
+                // x-ui.color-swatch) — matched by option handle so a swatch
+                // in one group never overwrites another group's label.
+                const colorName = this.colorNameTargets.find(target => target.dataset.option === swatch.dataset.option)
+                if (colorName) colorName.textContent = swatch.getAttribute('aria-label')
             }
         })
     }

resources/js/stimulus/star-rating-controller.js

@@ -1,9 +1,25 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-    static targets = ['star', 'input']
+    static targets = ['star', 'input', 'error']
     static values  = { rating: { type: Number, default: 0 } }
 
+    connect() {
+        this.#fill(this.ratingValue)
+    }
+
+    // Bound to the form's submit event (this controller sits on the <form>
+    // itself, not just the star widget) — a plain `required` on the hidden
+    // rating input would never surface: browsers exclude type="hidden" from
+    // constraint validation entirely, so there'd be nothing to see or hear.
+    validate(event) {
+        if (this.ratingValue < 1) {
+            event.preventDefault()
+            this.errorTarget.hidden = false
+            this.starTargets[0]?.focus()
+        }
+    }
+
     hover(event) {
         this.#fill(parseInt(event.currentTarget.dataset.value))
     }
@@ -16,6 +32,7 @@ export default class extends Controller {
         const val = parseInt(event.currentTarget.dataset.value)
         this.ratingValue = val
         this.inputTarget.value = val
+        this.errorTarget.hidden = true
 
         this.starTargets.forEach(star => {
             star.setAttribute('aria-pressed', String(parseInt(star.dataset.value) === val))

resources/js/stimulus/tab-link-controller.js

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Jumps to a tab panel from an element outside the tabs' own markup — the
+// review count and the "read more" link both sit elsewhere in the DOM, too
+// far apart from the tabs for a plain data-action, hence the outlet.
+export default class extends Controller {
+    static outlets = ['tabs']
+    static values = { panel: String }
+
+    activate(event) {
+        event?.preventDefault()
+        this.tabsOutlet.activate(this.panelValue)
+        this.tabsOutlet.element.scrollIntoView({ block: 'start', behavior: 'smooth' })
+    }
+}

resources/js/stimulus/tabs-controller.js

@@ -4,10 +4,10 @@ export default class extends Controller {
     static targets = ['button', 'panel']
 
     show(event) {
-        this.#activate(event.currentTarget.dataset.panel)
+        this.activate(event.currentTarget.dataset.panel)
     }
 
-    #activate(panelId) {
+    activate(panelId) {
         this.buttonTargets.forEach(btn => {
             const active = btn.dataset.panel === panelId
             btn.classList.toggle('is-active', active)

resources/js/stimulus/wishlist-controller.js

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Heart toggle (x-wishlist-button). Posts the form with fetch and reflects the
+// server's answer on aria-pressed, which the CSS uses to swap the outline and
+// filled heart. If the request fails, falls back to a normal form submit.
+export default class extends Controller {
+    static targets = ['button', 'status']
+
+    static values = {
+        addLabel: String,
+        removeLabel: String,
+        addedMessage: String,
+        removedMessage: String,
+    }
+
+    async toggle(event) {
+        event.preventDefault()
+
+        if (this.busy) return
+        this.busy = true
+
+        try {
+            const response = await fetch(this.element.action, {
+                method: 'POST',
+                headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
+                body: new FormData(this.element),
+            })
+
+            if (!response.ok) throw new Error(`Wishlist toggle failed: ${response.status}`)
+
+            const { active } = await response.json()
+
+            this.buttonTarget.setAttribute('aria-pressed', active ? 'true' : 'false')
+            this.buttonTarget.setAttribute('aria-label', active ? this.removeLabelValue : this.addLabelValue)
+            this.statusTarget.textContent = active ? this.addedMessageValue : this.removedMessageValue
+        } catch {
+            this.element.submit()
+        } finally {
+            this.busy = false
+        }
+    }
+}