stock check, variants in cart, variant buttons in product page

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,7 +13,7 @@ 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)
@@ -78,6 +78,7 @@ export default class extends Controller {
 
     async send(form) {
         this.bodyTarget.setAttribute('aria-busy', 'true')
+        this.clearError()
 
         try {
             const response = await fetch(form.action, {
@@ -85,16 +86,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-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/product-form-controller.js

@@ -2,8 +2,18 @@ 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']
+    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)
@@ -13,6 +23,88 @@ export default class extends Controller {
         this.selectedValue = urlId && this.variantsValue.find(v => v.id === urlId)
             ? urlId
             : defaultId
+
+        // 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 = false
+        }
+
+        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
     }
 
     selectVariant(event) {
@@ -30,6 +122,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)
         }