fix(loyalty-admin): existing-program warning crashes when no merchant selected
Some checks failed
CI / ruff (push) Successful in 16s
CI / validate (push) Has been cancelled
CI / dependency-scanning (push) Has been cancelled
CI / docs (push) Has been cancelled
CI / deploy (push) Has been cancelled
CI / pytest (push) Has started running

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>
This commit is contained in:
2026-05-17 14:25:34 +02:00
parent e94b6d07bb
commit 8d6830fc97

View File

@@ -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">