From 62b83b46a41ec6feba85173ad6978695a5a1531d Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 25 Apr 2026 12:34:37 +0200
Subject: [PATCH] feat(loyalty): category view mode + mandatory translations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add eye icon to expand read-only view of all translations
- View panel shows EN/FR/DE/LB values with "Edit" button to switch
  to edit mode
- All 4 language fields (EN/FR/DE/LB) now mandatory — Save button
  disabled until all are filled (both add and edit forms)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../admin/js/loyalty-merchant-detail.js       |  1 +
 .../loyalty/admin/merchant-detail.html        | 51 +++++++++++++++----
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/app/modules/loyalty/static/admin/js/loyalty-merchant-detail.js b/app/modules/loyalty/static/admin/js/loyalty-merchant-detail.js
index e43d4ff1..36210023 100644
--- a/app/modules/loyalty/static/admin/js/loyalty-merchant-detail.js
+++ b/app/modules/loyalty/static/admin/js/loyalty-merchant-detail.js
@@ -39,6 +39,7 @@ function adminLoyaltyMerchantDetail() {
         showAddCategory: false,
         newCategoryName: '',
         newCategoryTranslations: { fr: '', de: '', lb: '' },
+        viewingCategoryId: null,
         editingCategoryId: null,
         editCategoryData: { name: '', translations: { fr: '', de: '', lb: '' } },
 
diff --git a/app/modules/loyalty/templates/loyalty/admin/merchant-detail.html b/app/modules/loyalty/templates/loyalty/admin/merchant-detail.html
index d7f120f7..dbcf73a3 100644
--- a/app/modules/loyalty/templates/loyalty/admin/merchant-detail.html
+++ b/app/modules/loyalty/templates/loyalty/admin/merchant-detail.html
@@ -259,7 +259,7 @@
                             class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">
                         {{ _('loyalty.common.cancel') }}
                     </button>
-                    <button @click="createCategory()" :disabled="!newCategoryName"
+                    <button @click="createCategory()" :disabled="!newCategoryName || !newCategoryTranslations.fr || !newCategoryTranslations.de || !newCategoryTranslations.lb"
                             class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50">
                         {{ _('loyalty.common.save') }}
                     </button>
@@ -270,20 +270,17 @@
             <div class="space-y-2">
                 <template x-for="cat in storeCategories" :key="cat.id">
                     <div class="border border-gray-200 dark:border-gray-700 rounded-lg">
-                        <!-- View mode -->
-                        <div x-show="editingCategoryId !== cat.id" class="flex items-center justify-between p-3">
+                        <!-- List mode -->
+                        <div x-show="viewingCategoryId !== cat.id && editingCategoryId !== cat.id" class="flex items-center justify-between p-3">
                             <div class="flex items-center gap-3">
                                 <span class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="cat.name"></span>
-                                <template x-if="cat.name_translations">
-                                    <span class="text-xs text-gray-400" x-text="Object.entries(cat.name_translations || {}).filter(([k,v]) => v && k !== 'en').map(([k,v]) => k.toUpperCase() + ': ' + v).join(' · ')"></span>
-                                </template>
                                 <span x-show="!cat.is_active" class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-500 dark:bg-gray-700">{{ _('loyalty.common.inactive') }}</span>
                             </div>
                             <div class="flex items-center gap-2">
-                                <button @click="startEditCategory(cat)" type="button"
-                                        aria-label="{{ _('loyalty.common.edit') }}"
-                                        class="text-purple-500 hover:text-purple-700">
-                                    <span x-html="$icon('pencil', 'w-4 h-4')"></span>
+                                <button @click="viewingCategoryId = (viewingCategoryId === cat.id ? null : cat.id)" type="button"
+                                        aria-label="{{ _('loyalty.common.view') }}"
+                                        class="text-blue-500 hover:text-blue-700">
+                                    <span x-html="$icon('eye', 'w-4 h-4')"></span>
                                 </button>
                                 <button @click="toggleCategoryActive(cat)" type="button"
                                         :aria-label="cat.is_active ? '{{ _('loyalty.common.deactivate') }}' : '{{ _('loyalty.common.activate') }}'"
@@ -297,6 +294,38 @@
                                 </button>
                             </div>
                         </div>
+                        <!-- View mode (read-only) -->
+                        <div x-show="viewingCategoryId === cat.id && editingCategoryId !== cat.id" class="p-3 bg-gray-50 dark:bg-gray-900/20">
+                            <div class="grid gap-2 md:grid-cols-2 mb-3">
+                                <div>
+                                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400">English (EN)</p>
+                                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="cat.name || '-'"></p>
+                                </div>
+                                <div>
+                                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400">French (FR)</p>
+                                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="cat.name_translations?.fr || '-'"></p>
+                                </div>
+                                <div>
+                                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400">German (DE)</p>
+                                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="cat.name_translations?.de || '-'"></p>
+                                </div>
+                                <div>
+                                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400">Luxembourgish (LB)</p>
+                                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="cat.name_translations?.lb || '-'"></p>
+                                </div>
+                            </div>
+                            <div class="flex justify-end gap-2">
+                                <button @click="viewingCategoryId = null" type="button"
+                                        class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">
+                                    {{ _('loyalty.common.close') }}
+                                </button>
+                                <button @click="viewingCategoryId = null; startEditCategory(cat)" type="button"
+                                        class="px-3 py-1.5 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
+                                    <span x-html="$icon('pencil', 'inline w-3.5 h-3.5 mr-1')"></span>
+                                    {{ _('loyalty.common.edit') }}
+                                </button>
+                            </div>
+                        </div>
                         <!-- Edit mode -->
                         <div x-show="editingCategoryId === cat.id" class="p-3 bg-purple-50 dark:bg-purple-900/20">
                             <div class="grid gap-2 md:grid-cols-2 mb-3">
@@ -326,7 +355,7 @@
                                         class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">
                                     {{ _('loyalty.common.cancel') }}
                                 </button>
-                                <button @click="saveEditCategory(cat.id)" :disabled="!editCategoryData.name"
+                                <button @click="saveEditCategory(cat.id)" :disabled="!editCategoryData.name || !editCategoryData.translations.fr || !editCategoryData.translations.de || !editCategoryData.translations.lb"
                                         class="px-3 py-1.5 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50">
                                     {{ _('loyalty.common.save') }}
                                 </button>