feat(loyalty): add customer autocomplete to terminal search
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>
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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()"
|
||||
|
||||
Reference in New Issue
Block a user