From 07c88199365b5e41e414975e11fdf1296da50646 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Thu, 20 Nov 2025 10:31:42 +0300
Subject: [PATCH] Add interactive customer selection to checkout modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced static customer display in the checkout/sale modal with the same interactive button functionality from the cart sidebar.

Changes:
- **HTML**: Replaced static div with interactive button + reset button in checkout modal
- **JavaScript**:
  - Updated updateCustomerDisplay() to handle both locations (cart + checkout modal)
  - Added event listeners for checkout modal customer buttons
  - Both buttons now synchronized and use the same selection modal

Benefits:
✅ Consistent UX across cart and checkout modal
✅ Full code reuse - same selection modal, search, and logic
✅ Both locations stay synchronized automatically
✅ Can search, select, and reset customer directly from checkout modal

Implementation:
- Cart sidebar button: customerSelectBtn, resetCustomerBtn
- Checkout modal button: checkoutCustomerSelectBtn, checkoutResetCustomerBtn
- Single updateCustomerDisplay() updates both locations
- Single selectCustomer() used by all buttons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 myproject/pos/static/pos/js/terminal.js   | 50 ++++++++++++++---------
 myproject/pos/templates/pos/terminal.html | 15 +++++--
 2 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/myproject/pos/static/pos/js/terminal.js b/myproject/pos/static/pos/js/terminal.js
index e6f6cea..5928464 100644
--- a/myproject/pos/static/pos/js/terminal.js
+++ b/myproject/pos/static/pos/js/terminal.js
@@ -81,30 +81,31 @@ function formatMoney(v) {
  * Обновляет отображение выбранного клиента в UI
  * Обновляет:
  * - Кнопку "Выбрать клиента" в корзине (показывает имя клиента)
- * - Имя клиента в модалке продажи
- * - Видимость кнопки сброса (показываем только для не-системного клиента)
+ * - Кнопку "Выбрать клиента" в модалке продажи (показывает имя клиента)
+ * - Видимость кнопок сброса в обоих местах (показываем только для не-системного клиента)
  */
 function updateCustomerDisplay() {
-  // Обновляем текст кнопки - всегда показываем имя клиента
+  // Обновляем текст кнопки в корзине
   const btnText = document.getElementById('customerSelectBtnText');
-  btnText.textContent = selectedCustomer.name;
-
-  // Обновляем имя клиента в модалке продажи
-  const checkoutCustomerName = document.getElementById('checkoutCustomerName');
-  if (checkoutCustomerName) {
-    checkoutCustomerName.textContent = selectedCustomer.name;
+  if (btnText) {
+    btnText.textContent = selectedCustomer.name;
   }
 
-  // Показываем/скрываем кнопку сброса
-  const resetBtn = document.getElementById('resetCustomerBtn');
-  if (resetBtn) {
-    // Показываем кнопку сброса только если выбран НЕ системный клиент
-    if (selectedCustomer.id !== SYSTEM_CUSTOMER.id) {
-      resetBtn.style.display = 'block';
-    } else {
-      resetBtn.style.display = 'none';
+  // Обновляем текст кнопки в модалке продажи
+  const checkoutBtnText = document.getElementById('checkoutCustomerSelectBtnText');
+  if (checkoutBtnText) {
+    checkoutBtnText.textContent = selectedCustomer.name;
+  }
+
+  // Обновляем видимость кнопок сброса (в корзине и в модалке продажи)
+  const isSystemCustomer = selectedCustomer.id === SYSTEM_CUSTOMER.id;
+
+  [document.getElementById('resetCustomerBtn'),
+   document.getElementById('checkoutResetCustomerBtn')].forEach(resetBtn => {
+    if (resetBtn) {
+      resetBtn.style.display = isSystemCustomer ? 'none' : 'block';
     }
-  }
+  });
 }
 
 /**
@@ -1436,11 +1437,22 @@ document.getElementById('customerSelectBtn').addEventListener('click', () => {
   modal.show();
 });
 
-// Кнопка сброса клиента на системного
+// Кнопка сброса клиента на системного (в корзине)
 document.getElementById('resetCustomerBtn').addEventListener('click', () => {
   selectCustomer(SYSTEM_CUSTOMER.id, SYSTEM_CUSTOMER.name);
 });
 
+// Кнопка "Выбрать клиента" в модалке продажи
+document.getElementById('checkoutCustomerSelectBtn').addEventListener('click', () => {
+  const modal = new bootstrap.Modal(document.getElementById('selectCustomerModal'));
+  modal.show();
+});
+
+// Кнопка сброса клиента на системного (в модалке продажи)
+document.getElementById('checkoutResetCustomerBtn').addEventListener('click', () => {
+  selectCustomer(SYSTEM_CUSTOMER.id, SYSTEM_CUSTOMER.name);
+});
+
 // Кнопка "Создать нового клиента" в модалке выбора
 document.getElementById('createNewCustomerBtn').addEventListener('click', () => {
   // Закрываем модалку выбора
diff --git a/myproject/pos/templates/pos/terminal.html b/myproject/pos/templates/pos/terminal.html
index deb234a..6bfe6b6 100644
--- a/myproject/pos/templates/pos/terminal.html
+++ b/myproject/pos/templates/pos/terminal.html
@@ -277,9 +277,18 @@
           <div class="col-md-7">
             <!-- Информация о клиенте -->
             <div class="mb-3">
-              <strong>Клиент</strong>
-              <div class="border rounded p-2 mt-2 bg-light">
-                <div class="fw-bold" id="checkoutCustomerName">—</div>
+              <label class="form-label fw-semibold">Клиент</label>
+              <div class="d-flex gap-1 align-items-center">
+                <button class="btn btn-outline-primary btn-sm d-flex align-items-center" id="checkoutCustomerSelectBtn">
+                  <i class="bi bi-person me-1"></i>
+                  <div class="d-flex flex-column align-items-start lh-1">
+                    <small class="text-muted" style="font-size: 0.65rem;">Клиент</small>
+                    <span id="checkoutCustomerSelectBtnText" class="fw-semibold">Выбрать</span>
+                  </div>
+                </button>
+                <button class="btn btn-sm btn-outline-danger" id="checkoutResetCustomerBtn" title="Сброс на системного клиента" style="display: none;">
+                  <i class="bi bi-x-lg"></i>
+                </button>
               </div>
             </div>