From 314360a39451451c42b0c3cec0cdace278b963d6 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Mon, 23 Mar 2026 21:13:44 +0100
Subject: [PATCH] fix(loyalty): clear staff_id when autocomplete selection is
 removed

When a staff member was selected and then the name field was edited or
cleared, the staff_id (email) remained set. Now tracks the selected
member name and clears staff_id when the search text diverges.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../loyalty/static/shared/js/loyalty-pins-list.js  | 14 ++++++++++++++
 .../templates/loyalty/shared/pins-list.html        |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/modules/loyalty/static/shared/js/loyalty-pins-list.js b/app/modules/loyalty/static/shared/js/loyalty-pins-list.js
index 73a9a1f2..97d5b509 100644
--- a/app/modules/loyalty/static/shared/js/loyalty-pins-list.js
+++ b/app/modules/loyalty/static/shared/js/loyalty-pins-list.js
@@ -62,6 +62,9 @@ function loyaltyPinsList(config) {
         staffSearch: '',
         showStaffDropdown: false,
 
+        // Track which member was selected (to detect when user edits away)
+        _selectedStaffName: '',
+
         get filteredStaff() {
             if (!this.staffSearch) return this.staffMembers;
             const q = this.staffSearch.toLowerCase();
@@ -75,13 +78,24 @@ function loyaltyPinsList(config) {
             this.pinForm.name = member.full_name;
             this.pinForm.staff_id = member.email;
             this.staffSearch = member.full_name;
+            this._selectedStaffName = member.full_name;
             this.showStaffDropdown = false;
         },
 
+        onStaffSearchInput() {
+            this.pinForm.name = this.staffSearch;
+            // If user modified the text away from the selected member, clear staff_id
+            if (this._selectedStaffName && this.staffSearch !== this._selectedStaffName) {
+                this.pinForm.staff_id = '';
+                this._selectedStaffName = '';
+            }
+        },
+
         clearStaffSelection() {
             this.staffSearch = '';
             this.pinForm.name = '';
             this.pinForm.staff_id = '';
+            this._selectedStaffName = '';
             this.showStaffDropdown = false;
         },
 
diff --git a/app/modules/loyalty/templates/loyalty/shared/pins-list.html b/app/modules/loyalty/templates/loyalty/shared/pins-list.html
index 29a2f161..c006badd 100644
--- a/app/modules/loyalty/templates/loyalty/shared/pins-list.html
+++ b/app/modules/loyalty/templates/loyalty/shared/pins-list.html
@@ -136,7 +136,7 @@
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_name') }}</label>
                 <input type="text" x-model="staffSearch" required
                        @focus="open = staffMembers.length > 0"
-                       @input="open = staffMembers.length > 0; pinForm.name = staffSearch"
+                       @input="open = staffMembers.length > 0; onStaffSearchInput()"
                        autocomplete="off"
                        class="w-full px-3 py-2 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"
                        placeholder="{{ _('loyalty.shared.pins.pin_name') }}">
@@ -205,7 +205,7 @@
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('loyalty.shared.pins.pin_name') }}</label>
                 <input type="text" x-model="staffSearch" required
                        @focus="open = staffMembers.length > 0"
-                       @input="open = staffMembers.length > 0; pinForm.name = staffSearch"
+                       @input="open = staffMembers.length > 0; onStaffSearchInput()"
                        autocomplete="off"
                        class="w-full px-3 py-2 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"
                        placeholder="{{ _('loyalty.shared.pins.pin_name') }}">