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("") const [pushName, setPushName] = useState("") 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 (