From 6bd50c165936b81baf804f5aae90c500b3e6017e Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Thu, 1 Jan 2026 22:04:20 +0700
Subject: [PATCH] fix: button href broken by variable highlighting HTML spans

ROOT CAUSE (from screenshot DevTools):
href="<span style=...>[login_url]</span>" - HTML span inside href attribute!

Flow causing the bug:
1. parseCardsForPreview converts [button url="{login_url}"] to <a href="{login_url}">
2. sampleData replacement runs but login_url NOT in sampleData
3. Variable highlighting injects <span>[login_url]</span> INTO href="..."
4. HTML is completely broken

FIXES APPLIED:
1. Added missing URL variables to sampleData:
   - login_url, reset_link, reset_key
   - user_login, user_email, user_temp_password
   - customer_first_name, customer_last_name

2. Changed variable highlighting from HTML spans to plain text [variable]
   - Prevents breaking HTML attributes if variable is inside href, src, etc.
---
 .../routes/Settings/Notifications/EditTemplate.tsx  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
index 60e5a5c..38812e6 100644
--- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
@@ -264,6 +264,15 @@ export default function EditTemplate() {
       store_url: '#',
       store_email: 'store@example.com',
       support_email: 'support@example.com',
+      // Account-related URLs and variables
+      login_url: '#',
+      reset_link: '#',
+      reset_key: 'abc123xyz',
+      user_login: 'johndoe',
+      user_email: 'john@example.com',
+      user_temp_password: '••••••••',
+      customer_first_name: 'John',
+      customer_last_name: 'Doe',
     };
 
     Object.keys(sampleData).forEach((key) => {
@@ -272,10 +281,10 @@ export default function EditTemplate() {
     });
 
     // Highlight variables that don't have sample data
+    // Use plain text [variable] instead of HTML spans to avoid breaking href attributes
     variableKeys.forEach((key: string) => {
       if (!storeVariables[key] && !sampleData[key]) {
-        const sampleValue = `<span style="background: #fef3c7; padding: 2px 4px; border-radius: 2px;">[${key}]</span>`;
-        previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), sampleValue);
+        previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), `[${key}]`);
       }
     });