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' })
+    }
+}

resources/views/components/reviews-stars.blade.php

@@ -33,7 +33,7 @@ class="flex items-center gap-1.5 text-brand"
         @if ($linkable)
             <button
                 type="button"
-                data-action="click->review-count#activate"
+                data-action="click->tab-link#activate"
                 class="text-sm text-neutral-500 hover:underline cursor-pointer"
                 aria-controls="tab-panel-reviews"
             >{{ $countText }}</button>

resources/views/emails/layout.blade.php

@@ -70,7 +70,7 @@
   </tr>
   <tr>
     <td style="padding:0 24px;">
-      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color:#ffffff;border-radius:12px;">
+      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color:#ffffff;border-radius:0;">
         <tr>
           <td class="email-card" style="padding:40px 32px;font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;color:#000000;text-align:left;">
             @yield('content')

resources/views/product/show.blade.php

@@ -154,8 +154,9 @@ class="absolute bottom-6 right-8 text-white text-sm"
                     :count="$product['reviews']['count']"
                     :showCount="true"
                     :linkable="true"
-                    data-controller="review-count"
-                    data-review-count-tabs-outlet="#product-tabs"
+                    data-controller="tab-link"
+                    data-tab-link-tabs-outlet="#product-tabs"
+                    data-tab-link-panel-value="reviews"
                 />
 
                 @if($product['price'] !== null)
@@ -172,7 +173,14 @@ class="absolute bottom-6 right-8 text-white text-sm"
                 <div class="text-base leading-relaxed">
                     {{ $descTruncated }}
                     @if($descNeedsMore)
-                        <a href="#tab-panel-description" class="underline-slide font-semibold whitespace-nowrap">{{ __('storefront.product.read_more') }}</a>
+                        <a
+                            href="#tab-panel-description"
+                            class="underline-slide font-semibold whitespace-nowrap"
+                            data-controller="tab-link"
+                            data-tab-link-tabs-outlet="#product-tabs"
+                            data-tab-link-panel-value="description"
+                            data-action="click->tab-link#activate"
+                        >{{ __('storefront.product.read_more') }}</a>
                     @endif
                 </div>
 

resources/views/vendor/core/auth/mail/otp.blade.php

@@ -15,8 +15,8 @@
 
     <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 24px;">
         <tr>
-            <td align="center" bgcolor="#18c28a" style="background-color:#18c28a;border-radius:8px;padding:20px;">
-                <span style="font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:32px;font-weight:800;letter-spacing:8px;color:#ffffff;">{{ $code }}</span>
+            <td align="center" bgcolor="#18c28a" style="background-color:#18c28a;border:1px solid #000000;border-radius:0;padding:20px;">
+                <span style="font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:32px;font-weight:800;letter-spacing:8px;color:#000000;">{{ $code }}</span>
             </td>
         </tr>
     </table>