From 5f111d1808a61e05c82fe8046d52da37d5bc4938 Mon Sep 17 00:00:00 2001
From: Omair Saleh <omair@quikcue.com>
Date: Tue, 3 Mar 2026 05:47:20 +0800
Subject: [PATCH] fix: only show WhatsApp QR after user clicks Connect

- Don't auto-poll WAHA on settings page load
- Check connection status once on mount (to show 'Connected' if already paired)
- QR screenshot + polling only starts after clicking 'Connect WhatsApp'
- Polling stops once status changes to CONNECTED
---
 .../src/app/dashboard/settings/page.tsx          | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/pledge-now-pay-later/src/app/dashboard/settings/page.tsx b/pledge-now-pay-later/src/app/dashboard/settings/page.tsx
index c655275..5f919d9 100644
--- a/pledge-now-pay-later/src/app/dashboard/settings/page.tsx
+++ b/pledge-now-pay-later/src/app/dashboard/settings/page.tsx
@@ -144,6 +144,7 @@ function WhatsAppPanel() {
   const [phone, setPhone] = useState<string>("")
   const [pushName, setPushName] = useState<string>("")
   const [starting, setStarting] = useState(false)
+  const [showQr, setShowQr] = useState(false) // only true after user clicks Connect
 
   const checkStatus = useCallback(async () => {
     try {
@@ -153,23 +154,28 @@ function WhatsAppPanel() {
       if (data.screenshot) setQrImage(data.screenshot)
       if (data.phone) setPhone(data.phone)
       if (data.pushName) setPushName(data.pushName)
+      // Auto-show QR panel once connected (user paired successfully)
+      if (data.status === "CONNECTED") setShowQr(false)
     } catch {
       setStatus("ERROR")
     }
   }, [])
 
+  // On mount: just check if already connected. Don't start polling yet.
+  useEffect(() => { checkStatus() }, [checkStatus])
+
+  // Poll only when user has clicked Connect and we're waiting for scan
   useEffect(() => {
-    checkStatus()
-    // Poll every 5 seconds when waiting for QR scan
+    if (!showQr) return
     const interval = setInterval(checkStatus, 5000)
     return () => clearInterval(interval)
-  }, [checkStatus])
+  }, [showQr, checkStatus])
 
   const startSession = async () => {
     setStarting(true)
+    setShowQr(true)
     try {
       await fetch("/api/whatsapp/qr", { method: "POST" })
-      // Wait a bit for session to initialize
       await new Promise(r => setTimeout(r, 3000))
       await checkStatus()
     } catch { /* ignore */ }
@@ -217,7 +223,7 @@ function WhatsAppPanel() {
     )
   }
 
-  if (status === "SCAN_QR_CODE") {
+  if (status === "SCAN_QR_CODE" && showQr) {
     return (
       <Card className="border-warm-amber/30">
         <CardHeader className="pb-3">