From 5a33f68743da071d67f014deb672077f5d3a7825 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Mon, 23 Mar 2026 21:24:00 +0100
Subject: [PATCH] refactor(loyalty): use search_autocomplete macro for terminal
 lookup

Replace custom inline autocomplete HTML with the shared
search_autocomplete macro from inputs.html. Same behavior (debounced
search, dropdown with name + email, loading/no-results states) but
using the established reusable component.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../static/store/js/loyalty-terminal.js       |  4 ++
 .../templates/loyalty/store/terminal.html     | 58 +++++--------------
 2 files changed, 20 insertions(+), 42 deletions(-)

diff --git a/app/modules/loyalty/static/store/js/loyalty-terminal.js b/app/modules/loyalty/static/store/js/loyalty-terminal.js
index 11553964..ac5114d8 100644
--- a/app/modules/loyalty/static/store/js/loyalty-terminal.js
+++ b/app/modules/loyalty/static/store/js/loyalty-terminal.js
@@ -25,6 +25,7 @@ function storeLoyaltyTerminal() {
         selectedCard: null,
         searchResults: [],
         showSearchDropdown: false,
+        searchingCustomers: false,
         _searchTimeout: null,
 
         // Transaction inputs
@@ -161,6 +162,7 @@ function storeLoyaltyTerminal() {
         },
 
         async searchCustomers() {
+            this.searchingCustomers = true;
             try {
                 const params = new URLSearchParams({
                     search: this.searchQuery,
@@ -176,6 +178,8 @@ function storeLoyaltyTerminal() {
                 loyaltyTerminalLog.warn('Search failed:', error.message);
                 this.searchResults = [];
                 this.showSearchDropdown = false;
+            } finally {
+                this.searchingCustomers = false;
             }
         },
 
diff --git a/app/modules/loyalty/templates/loyalty/store/terminal.html b/app/modules/loyalty/templates/loyalty/store/terminal.html
index ebcca41c..ff6deb9a 100644
--- a/app/modules/loyalty/templates/loyalty/store/terminal.html
+++ b/app/modules/loyalty/templates/loyalty/store/terminal.html
@@ -3,6 +3,7 @@
 {% from 'shared/macros/headers.html' import page_header_flex %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/modals.html' import modal_simple %}
+{% from 'shared/macros/inputs.html' import search_autocomplete %}
 
 {% block title %}{{ _('loyalty.store.terminal.title') }}{% endblock %}
 
@@ -64,48 +65,21 @@
             </div>
             <div class="p-4">
                 <!-- Search Input with Autocomplete -->
-                <div class="relative mb-4" @click.outside="showSearchDropdown = false">
-                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 z-10">
-                        <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
-                    </span>
-                    <input
-                        type="text"
-                        x-model="searchQuery"
-                        @input="debouncedSearchCustomers()"
-                        @keyup.enter="showSearchDropdown = false; lookupCustomer()"
-                        @focus="searchResults.length > 0 && (showSearchDropdown = true)"
-                        autocomplete="off"
-                        placeholder="{{ _('loyalty.store.terminal.search_placeholder') }}"
-                        class="w-full pl-10 pr-4 py-3 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"
-                    >
-                    <!-- Autocomplete Dropdown -->
-                    <div x-show="showSearchDropdown" x-cloak
-                         class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-64 overflow-y-auto">
-                        <template x-for="card in searchResults" :key="card.id">
-                            <button type="button"
-                                    @click="selectCustomer(card)"
-                                    class="w-full px-4 py-3 text-left hover:bg-purple-50 dark:hover:bg-gray-600 border-b border-gray-100 dark:border-gray-600 last:border-0 transition-colors">
-                                <div class="flex items-center justify-between">
-                                    <div class="flex items-center min-w-0">
-                                        <div class="w-8 h-8 mr-3 rounded-full flex items-center justify-center flex-shrink-0"
-                                             :style="'background-color: ' + (program?.card_color || '#4F46E5') + '20'">
-                                            <span class="text-xs font-semibold"
-                                                  :style="'color: ' + (program?.card_color || '#4F46E5')"
-                                                  x-text="(card.customer_name || '?').charAt(0).toUpperCase()"></span>
-                                        </div>
-                                        <div class="min-w-0">
-                                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate" x-text="card.customer_name || 'Unknown'"></p>
-                                            <p class="text-xs text-gray-500 dark:text-gray-400 truncate" x-text="card.customer_email || ''"></p>
-                                        </div>
-                                    </div>
-                                    <div class="text-right flex-shrink-0 ml-3">
-                                        <p class="text-xs font-mono text-gray-500 dark:text-gray-400" x-text="card.card_number"></p>
-                                        <p class="text-xs font-semibold text-purple-600 dark:text-purple-400" x-text="(card.points_balance || 0) + ' pts'"></p>
-                                    </div>
-                                </div>
-                            </button>
-                        </template>
-                    </div>
+                <div class="mb-4">
+                    {{ search_autocomplete(
+                        search_var='searchQuery',
+                        results_var='searchResults',
+                        show_dropdown_var='showSearchDropdown',
+                        loading_var='searchingCustomers',
+                        search_action='debouncedSearchCustomers()',
+                        select_action='selectCustomer(item)',
+                        display_field='customer_name',
+                        secondary_field='customer_email',
+                        placeholder=_('loyalty.store.terminal.search_placeholder'),
+                        min_chars=2,
+                        no_results_text=_('loyalty.store.terminal.customer_not_found'),
+                        loading_text=_('loyalty.store.terminal.looking_up')
+                    ) }}
                 </div>
                 <button
                     @click="lookupCustomer()"