refactor(loyalty): replace inline modals with shared modal macros
Some checks failed
Some checks failed
Replace hand-written inline modal HTML in programs.html, merchant-detail.html, and program-edit.html with the project's confirm_modal, confirm_modal_dynamic, and modal macros from shared/macros/modals.html. Resolves all 4 FE-004 architecture warnings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||
{% from 'shared/macros/headers.html' import detail_page_header %}
|
||||
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
|
||||
{% from 'shared/macros/modals.html' import confirm_modal %}
|
||||
|
||||
{% block title %}Merchant Loyalty Details{% endblock %}
|
||||
|
||||
@@ -182,25 +183,16 @@
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div x-show="showDeleteModal" x-cloak
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Delete Loyalty Program</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
This will permanently delete the loyalty program and all associated data. This action cannot be undone.
|
||||
</p>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="showDeleteModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="deleteProgram()"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
|
||||
Delete Program
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ confirm_modal(
|
||||
'deleteProgramModal',
|
||||
'Delete Loyalty Program',
|
||||
'This will permanently delete the loyalty program and all associated data. This action cannot be undone.',
|
||||
'deleteProgram()',
|
||||
'showDeleteModal',
|
||||
'Delete Program',
|
||||
'Cancel',
|
||||
'danger'
|
||||
) }}
|
||||
|
||||
<!-- Location Breakdown -->
|
||||
<div x-show="locations.length > 0" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/headers.html' import detail_page_header %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||
{% from 'shared/macros/modals.html' import confirm_modal %}
|
||||
|
||||
{% block title %}Program Configuration{% endblock %}
|
||||
|
||||
@@ -225,26 +226,16 @@
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div x-show="showDeleteModal" x-cloak
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Delete Loyalty Program</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
This will permanently delete the loyalty program and all associated data (cards, transactions, rewards).
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="showDeleteModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="deleteProgram()" :disabled="deleting"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 disabled:opacity-50">
|
||||
<span x-text="deleting ? 'Deleting...' : 'Delete Program'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ confirm_modal(
|
||||
'deleteProgramModal',
|
||||
'Delete Loyalty Program',
|
||||
'This will permanently delete the loyalty program and all associated data (cards, transactions, rewards). This action cannot be undone.',
|
||||
'deleteProgram()',
|
||||
'showDeleteModal',
|
||||
'Delete Program',
|
||||
'Cancel',
|
||||
'danger'
|
||||
) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
{% from 'shared/macros/headers.html' import page_header %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
|
||||
{% from 'shared/macros/modals.html' import modal, confirm_modal_dynamic %}
|
||||
|
||||
{% block title %}Loyalty Programs{% endblock %}
|
||||
|
||||
@@ -255,102 +256,86 @@
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div x-show="showDeleteModal" x-cloak
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Delete Loyalty Program</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-1">
|
||||
Delete the loyalty program for <strong x-text="deletingProgram?.merchant_name"></strong>?
|
||||
</p>
|
||||
<p class="text-sm text-red-600 dark:text-red-400 mb-4">
|
||||
This will permanently remove the program and all associated data (cards, transactions, rewards). This cannot be undone.
|
||||
</p>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="showDeleteModal = false; deletingProgram = null"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="deleteProgram()"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
|
||||
Delete Program
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ confirm_modal_dynamic(
|
||||
'deleteProgramModal',
|
||||
'Delete Loyalty Program',
|
||||
"'Delete the loyalty program for \"' + (deletingProgram?.merchant_name || '') + '\"? This will permanently remove all associated data (cards, transactions, rewards). This cannot be undone.'",
|
||||
'deleteProgram()',
|
||||
'showDeleteModal',
|
||||
'Delete Program',
|
||||
'Cancel',
|
||||
'danger'
|
||||
) }}
|
||||
|
||||
<!-- Create Program Modal -->
|
||||
<div x-show="showCreateModal" x-cloak
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-lg w-full mx-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Create Loyalty Program</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Select a merchant to create a loyalty program for.
|
||||
</p>
|
||||
{% call modal('createProgramModal', 'Create Loyalty Program', 'showCreateModal', show_footer=false) %}
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Select a merchant to create a loyalty program for.
|
||||
</p>
|
||||
|
||||
<!-- Merchant Search -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search Merchant</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<span x-html="$icon('search', 'w-4 h-4 text-gray-400')"></span>
|
||||
</span>
|
||||
<input type="text"
|
||||
x-model="merchantSearch"
|
||||
@input="searchMerchants()"
|
||||
placeholder="Type merchant name..."
|
||||
class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Results -->
|
||||
<div class="mb-4 max-h-48 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-lg" x-show="merchantResults.length > 0">
|
||||
<template x-for="m in merchantResults" :key="m.id">
|
||||
<button @click="selectedMerchant = m; merchantSearch = m.name"
|
||||
class="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center justify-between"
|
||||
:class="selectedMerchant?.id === m.id ? 'bg-purple-50 dark:bg-purple-900/20' : ''">
|
||||
<div>
|
||||
<p class="font-medium text-gray-700 dark:text-gray-300" x-text="m.name"></p>
|
||||
<p class="text-xs text-gray-500" x-text="m.contact_email"></p>
|
||||
</div>
|
||||
<span x-show="selectedMerchant?.id === m.id" x-html="$icon('check', 'w-5 h-5 text-purple-600')"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div x-show="merchantSearch && merchantResults.length === 0 && !searchingMerchants" class="mb-4 text-sm text-gray-500 text-center py-4">
|
||||
No merchants found
|
||||
</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">This merchant already has a loyalty program.</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>
|
||||
View / Edit existing program
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="showCreateModal = false; merchantSearch = ''; merchantResults = []; selectedMerchant = null"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="goToCreateProgram()"
|
||||
:disabled="!selectedMerchant || existingProgramForMerchant(selectedMerchant?.id)"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
Continue
|
||||
</button>
|
||||
<!-- Merchant Search -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search Merchant</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<span x-html="$icon('search', 'w-4 h-4 text-gray-400')"></span>
|
||||
</span>
|
||||
<input type="text"
|
||||
x-model="merchantSearch"
|
||||
@input="searchMerchants()"
|
||||
placeholder="Type merchant name..."
|
||||
class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Results -->
|
||||
<div class="mb-4 max-h-48 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-lg" x-show="merchantResults.length > 0">
|
||||
<template x-for="m in merchantResults" :key="m.id">
|
||||
<button @click="selectedMerchant = m; merchantSearch = m.name"
|
||||
class="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center justify-between"
|
||||
:class="selectedMerchant?.id === m.id ? 'bg-purple-50 dark:bg-purple-900/20' : ''">
|
||||
<div>
|
||||
<p class="font-medium text-gray-700 dark:text-gray-300" x-text="m.name"></p>
|
||||
<p class="text-xs text-gray-500" x-text="m.contact_email"></p>
|
||||
</div>
|
||||
<span x-show="selectedMerchant?.id === m.id" x-html="$icon('check', 'w-5 h-5 text-purple-600')"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div x-show="merchantSearch && merchantResults.length === 0 && !searchingMerchants" class="mb-4 text-sm text-gray-500 text-center py-4">
|
||||
No merchants found
|
||||
</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">This merchant already has a loyalty program.</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>
|
||||
View / Edit existing program
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="showCreateModal = false; merchantSearch = ''; merchantResults = []; selectedMerchant = null"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="goToCreateProgram()"
|
||||
:disabled="!selectedMerchant || existingProgramForMerchant(selectedMerchant?.id)"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
|
||||
Reference in New Issue
Block a user