fix in product page links and tabs, fixes in email template, minor change in reviews theming

resources/js/stimulus/index.js

@@ -15,8 +15,8 @@ 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 TabLinkController       from './tab-link-controller'
 import TabsController          from './tabs-controller'
 
 export function registerControllers(application) {
@@ -32,7 +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('tab-link',         TabLinkController)
     application.register('tabs',             TabsController)
 }

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

@@ -1,12 +0,0 @@
-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/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' })
+    }
+}