From ad01bc7f4d3165dc400f8909775d02c58458cd6f Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Sat, 28 Mar 2026 17:07:50 +0300
Subject: [PATCH] feat: auto-close pair modal on agent connect, center close
 button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/EquipmentPage.tsx | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/pages/EquipmentPage.tsx b/src/pages/EquipmentPage.tsx
index 4fd1647..41f6d27 100644
--- a/src/pages/EquipmentPage.tsx
+++ b/src/pages/EquipmentPage.tsx
@@ -80,6 +80,7 @@ function PairCodeModal({
   const [loading, setLoading] = useState(true)
   const [copied, setCopied] = useState(false)
   const [timeLeft, setTimeLeft] = useState(600)
+  const [paired, setPaired] = useState(false)
 
   const fetchCode = useCallback(() => {
     setLoading(true)
@@ -91,6 +92,22 @@ function PairCodeModal({
     })
   }, [slug, workstation.id])
 
+  // Poll workstation status — auto-close when agent connects
+  useEffect(() => {
+    const poll = setInterval(async () => {
+      try {
+        const list = await api.workstations.list(slug)
+        const ws = list.find((w: Workstation) => w.id === workstation.id)
+        if (ws?.agentId && ws?.isOnline) {
+          setPaired(true)
+          clearInterval(poll)
+          setTimeout(onClose, 1500)
+        }
+      } catch { /* ignore */ }
+    }, 3000)
+    return () => clearInterval(poll)
+  }, [slug, workstation.id, onClose])
+
   useEffect(() => { fetchCode() }, [fetchCode])
 
   useEffect(() => {
@@ -131,7 +148,15 @@ function PairCodeModal({
           Рабочее место: <span className="font-semibold text-slate-900 dark:text-slate-100">{workstation.name}</span>
         </p>
 
-        {loading ? (
+        {paired ? (
+          <div className="flex flex-col items-center justify-center py-8 gap-3">
+            <div className="w-14 h-14 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
+              <Check size={28} className="text-emerald-600 dark:text-emerald-400" />
+            </div>
+            <p className="text-base font-semibold text-slate-900 dark:text-slate-100">Агент подключён!</p>
+            <p className="text-sm text-slate-500">Окно закроется автоматически...</p>
+          </div>
+        ) : loading ? (
           <div className="flex justify-center py-8">
             <RefreshCw size={24} className="animate-spin text-brand-600" />
           </div>
@@ -163,7 +188,7 @@ function PairCodeModal({
           </>
         )}
 
-        <button onClick={onClose} className="mt-6 w-full btn-secondary py-2.5">
+        <button onClick={onClose} className="mt-6 w-full btn-secondary py-2.5 flex justify-center">
           Закрыть
         </button>
       </div>