sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(loyalty): add customer autocomplete to terminal search

Browse Source 
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:
Samir Boulahtit
2026-03-23 21:21:36 +01:00
parent b679c9687d
commit 040cbd1962
2 changed files with 90 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/modules/loyalty/templates/loyalty/store/terminal.html
View File

@@ -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()"