From 040cbd196205d494e2de638ed64b11bd78ae9a8c Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Mon, 23 Mar 2026 21:21:36 +0100
Subject: [PATCH] feat(loyalty): add customer autocomplete to terminal search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Terminal search now shows live autocomplete suggestions as the user
types (debounced 300ms, min 2 chars). Dropdown shows matching customers
with avatar, name, email, card number, and points balance. Uses the
existing GET /store/loyalty/cards?search= endpoint (limit=5).

Selecting a result loads the full card details via the lookup endpoint.
Enter key still works for exact lookup. No new dependencies — uses
native Alpine.js dropdown, no Tom Select needed.

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

diff --git a/app/modules/loyalty/static/store/js/loyalty-terminal.js b/app/modules/loyalty/static/store/js/loyalty-terminal.js
index 8ea4ed16..11553964 100644
--- a/app/modules/loyalty/static/store/js/loyalty-terminal.js
+++ b/app/modules/loyalty/static/store/js/loyalty-terminal.js
@@ -23,6 +23,9 @@ function storeLoyaltyTerminal() {
         searchQuery: '',
         lookingUp: false,
         selectedCard: null,
+        searchResults: [],
+        showSearchDropdown: false,
+        _searchTimeout: null,
 
         // Transaction inputs
         earnAmount: null,
@@ -146,6 +149,58 @@ function storeLoyaltyTerminal() {
             }
         },
 
+        // Debounced search for autocomplete suggestions
+        debouncedSearchCustomers() {
+            if (this._searchTimeout) clearTimeout(this._searchTimeout);
+            if (!this.searchQuery || this.searchQuery.length < 2) {
+                this.searchResults = [];
+                this.showSearchDropdown = false;
+                return;
+            }
+            this._searchTimeout = setTimeout(() => this.searchCustomers(), 300);
+        },
+
+        async searchCustomers() {
+            try {
+                const params = new URLSearchParams({
+                    search: this.searchQuery,
+                    limit: '5',
+                    is_active: 'true'
+                });
+                const response = await apiClient.get(`/store/loyalty/cards?${params}`);
+                if (response && response.cards) {
+                    this.searchResults = response.cards;
+                    this.showSearchDropdown = this.searchResults.length > 0;
+                }
+            } catch (error) {
+                loyaltyTerminalLog.warn('Search failed:', error.message);
+                this.searchResults = [];
+                this.showSearchDropdown = false;
+            }
+        },
+
+        // Select a customer from autocomplete dropdown
+        async selectCustomer(card) {
+            this.showSearchDropdown = false;
+            this.searchResults = [];
+            this.lookingUp = true;
+
+            try {
+                // Use the lookup endpoint to get full card details
+                const response = await apiClient.get(`/store/loyalty/cards/lookup?q=${encodeURIComponent(card.card_number)}`);
+                if (response) {
+                    this.selectedCard = response;
+                    this.searchQuery = '';
+                    loyaltyTerminalLog.info('Customer selected:', this.selectedCard.customer_name);
+                }
+            } catch (error) {
+                Utils.showToast(I18n.t('loyalty.store.terminal.error_lookup', {message: error.message}), 'error');
+                loyaltyTerminalLog.error('Lookup failed:', error);
+            } finally {
+                this.lookingUp = false;
+            }
+        },
+
         // Clear selected customer
         clearCustomer() {
             this.selectedCard = null;
diff --git a/app/modules/loyalty/templates/loyalty/store/terminal.html b/app/modules/loyalty/templates/loyalty/store/terminal.html
index 53bc4153..ebcca41c 100644
--- a/app/modules/loyalty/templates/loyalty/store/terminal.html
+++ b/app/modules/loyalty/templates/loyalty/store/terminal.html
@@ -63,18 +63,49 @@
                 </h3>
             </div>
             <div class="p-4">
-                <!-- Search Input -->
-                <div class="relative mb-4">
-                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                <!-- 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"
-                        @keyup.enter="lookupCustomer()"
+                        @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>
                 <button
                     @click="lookupCustomer()"