temp emails, reviews theming and form, minor change in checkout module, validation translations seeder

resources/js/stimulus/index.js

@@ -15,6 +15,7 @@ import ProductFormController   from './product-form-controller'
 import ProductGalleryController from './product-gallery-controller'
 import QuantityController      from './quantity-controller'
 import RangeSliderController   from './range-slider-controller'
+import ReviewCountController   from './review-count-controller'
 import StarRatingController    from './star-rating-controller'
 import TabsController          from './tabs-controller'
 
@@ -31,6 +32,7 @@ export function registerControllers(application) {
     application.register('product-gallery',  ProductGalleryController)
     application.register('quantity',         QuantityController)
     application.register('range-slider',     RangeSliderController)
+    application.register('review-count',     ReviewCountController)
     application.register('star-rating',      StarRatingController)
     application.register('tabs',             TabsController)
 }

resources/js/stimulus/review-count-controller.js

@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus'
+
+// The review count sits next to the star rating, outside the tabs markup —
+// too far apart in the DOM for a plain data-action, hence the outlet.
+export default class extends Controller {
+    static outlets = ['tabs']
+
+    activate() {
+        this.tabsOutlet.activate('reviews')
+        this.tabsOutlet.element.scrollIntoView({ block: 'start', behavior: 'smooth' })
+    }
+}

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/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)