From 8d6830fc97f4403d0be85812dc4324cc5aa08a0a Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sun, 17 May 2026 14:25:34 +0200
Subject: [PATCH] fix(loyalty-admin): existing-program warning crashes when no
 merchant selected
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The warning panel was wrapped in x-show, which only toggles
display:none — child :href bindings still evaluate, so the
'selectedMerchant.id' access inside the link threw
'TypeError: can't access property "id", selectedMerchant is null'
on every reactive update before a merchant was picked.

Switch to <template x-if> so the element is removed from the DOM
entirely when the condition is false; child bindings then never
run.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../templates/loyalty/admin/programs.html     | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/modules/loyalty/templates/loyalty/admin/programs.html b/app/modules/loyalty/templates/loyalty/admin/programs.html
index 7ddff529..af420e25 100644
--- a/app/modules/loyalty/templates/loyalty/admin/programs.html
+++ b/app/modules/loyalty/templates/loyalty/admin/programs.html
@@ -310,20 +310,21 @@
     </div>
 
     <!-- Existing program warning -->
-    <div x-show="selectedMerchant && existingProgramForMerchant(selectedMerchant.id)"
-         class="mb-4 px-4 py-3 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
-        <div class="flex items-start">
-            <span x-html="$icon('exclamation-triangle', 'w-5 h-5 text-yellow-500 mr-3 mt-0.5 flex-shrink-0')"></span>
-            <div>
-                <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">{{ _('loyalty.admin.programs.existing_program_warning') }}</p>
-                <a :href="'/admin/loyalty/merchants/' + selectedMerchant.id + '/program'"
-                   class="inline-flex items-center mt-1 text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400">
-                    <span x-html="$icon('eye', 'w-4 h-4 mr-1')"></span>
-                    {{ _('loyalty.admin.programs.view_edit_existing') }}
-                </a>
+    <template x-if="selectedMerchant && existingProgramForMerchant(selectedMerchant.id)">
+        <div class="mb-4 px-4 py-3 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
+            <div class="flex items-start">
+                <span x-html="$icon('exclamation-triangle', 'w-5 h-5 text-yellow-500 mr-3 mt-0.5 flex-shrink-0')"></span>
+                <div>
+                    <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">{{ _('loyalty.admin.programs.existing_program_warning') }}</p>
+                    <a :href="'/admin/loyalty/merchants/' + selectedMerchant.id + '/program'"
+                       class="inline-flex items-center mt-1 text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400">
+                        <span x-html="$icon('eye', 'w-4 h-4 mr-1')"></span>
+                        {{ _('loyalty.admin.programs.view_edit_existing') }}
+                    </a>
+                </div>
             </div>
         </div>
-    </div>
+    </template>
 
     <!-- Actions -->
     <div class="flex justify-end gap-3">