From 1bade6e6b2739c9b34097f0a5d75b825fd4b4182 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Thu, 28 May 2026 23:55:14 +0200
Subject: [PATCH] fix(storefront): broken Alpine x-text from |tojson inside
 double-quoted attribute
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dashboard unread-messages count crashed Alpine with
"expected expression, got '}'" because I emitted Jinja {{ _(...) | tojson }}
directly inside x-text="..." — the JSON's double quotes broke out of the
attribute, leaving Alpine to parse a malformed expression.

The messages card has its own nested x-data="{ unreadCount: 0 }" scope,
so the parent component's i18n property isn't reachable. Moved the
singular/plural strings onto window.__accountDashboardI18n (added next
to logoutSuccess/logoutFailed) and referenced them by global path from
x-text — no quoting collision and the nested scope sees window fine.

Other touched templates (login/register/forgot/reset-password) already
use x-data='...' (single-quoted outer attribute) for their |tojson
language-selector args, so this collision only existed in dashboard.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../customers/templates/customers/storefront/dashboard.html   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/modules/customers/templates/customers/storefront/dashboard.html b/app/modules/customers/templates/customers/storefront/dashboard.html
index 34915a52..bd8ff102 100644
--- a/app/modules/customers/templates/customers/storefront/dashboard.html
+++ b/app/modules/customers/templates/customers/storefront/dashboard.html
@@ -91,7 +91,7 @@
             </div>
             <div x-show="unreadCount > 0">
                 <p class="text-sm text-primary font-medium" style="color: var(--color-primary)"
-                   x-text="(unreadCount === 1 ? {{ _('customers.storefront.pages.dashboard.unread_messages_singular')|tojson }} : {{ _('customers.storefront.pages.dashboard.unread_messages_plural')|tojson }}).replace('{count}', unreadCount)"></p>
+                   x-text="(unreadCount === 1 ? window.__accountDashboardI18n.unreadSingular : window.__accountDashboardI18n.unreadPlural).replace('{count}', unreadCount)"></p>
             </div>
         </a>
     </div>
@@ -138,6 +138,8 @@
 window.__accountDashboardI18n = {
     logoutSuccess: {{ _('customers.storefront.pages.dashboard.logout_success')|tojson }},
     logoutFailed: {{ _('customers.storefront.pages.dashboard.logout_failed')|tojson }},
+    unreadSingular: {{ _('customers.storefront.pages.dashboard.unread_messages_singular')|tojson }},
+    unreadPlural: {{ _('customers.storefront.pages.dashboard.unread_messages_plural')|tojson }},
 };
 function accountDashboard() {
     const i18n = window.__accountDashboardI18n || {};