add to cart button disabled when 0 stock and newsletter form theming

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

@@ -2,7 +2,7 @@ import { Controller } from '@hotwired/stimulus'
 import { formatPrice } from '../utils/format-price'
 
 export default class extends Controller {
-    static targets = ['price', 'image', 'swatch', 'colorName', 'stockError']
+    static targets = ['price', 'image', 'swatch', 'colorName', 'stockError', 'submit']
     static values  = {
         variants: Array,
         selected: Number,
@@ -90,7 +90,7 @@ export default class extends Controller {
             // own server-side check have the final word rather than
             // silently blocking the shopper here.
         } finally {
-            if (submit) submit.disabled = false
+            if (submit) submit.disabled = !this.selectedVariant?.inStock
         }
 
         form.dataset.bbkStockChecked = 'true'
@@ -111,6 +111,10 @@ export default class extends Controller {
         this.stockErrorTarget.hidden = true
     }
 
+    get selectedVariant() {
+        return this.variantsValue.find(v => v.id === this.selectedValue)
+    }
+
     selectVariant(event) {
         const option = event.currentTarget.dataset.option
         const valueId = parseInt(event.currentTarget.dataset.valueId)
@@ -156,6 +160,9 @@ 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 = this.selections[swatch.dataset.option] === parseInt(swatch.dataset.valueId)
             swatch.classList.toggle('is-selected', isSelected)