diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx index fbe2979..73b475d 100644 --- a/app/sites/[id]/settings/page.tsx +++ b/app/sites/[id]/settings/page.tsx @@ -54,7 +54,7 @@ export default function SiteSettingsPage() { }) const [scriptCopied, setScriptCopied] = useState(false) const [linkCopied, setLinkCopied] = useState(false) - const [verifying, setVerifying] = useState(false) + const [verificationStatus, setVerificationStatus] = useState<'idle' | 'checking' | 'success' | 'error'>('idle') useEffect(() => { loadSite() @@ -136,46 +136,34 @@ export default function SiteSettingsPage() { const handleVerify = async () => { if (!site?.domain) return - setVerifying(true) - let attempts = 0 - const maxAttempts = 10 // Try for 20 seconds (10 * 2s) - // 1. Open the site in a new tab with a cache-busting/tracking param - // We use a timestamp to ensure it's a fresh navigation + setVerificationStatus('checking') + let attempts = 0 + const maxAttempts = 10 + + // 1. Open site const protocol = site.domain.includes('http') ? '' : 'https://' const verificationUrl = `${protocol}${site.domain}/?utm_source=ciphera_verify&_t=${Date.now()}` window.open(verificationUrl, '_blank') - toast.info('Checking for connection... (Please ensure the new tab loads)') - // 2. Poll for success const checkInterval = setInterval(async () => { attempts++ try { const data = await getRealtime(siteId) - // Success condition: We see visitors if (data.visitors > 0) { clearInterval(checkInterval) - setVerifying(false) - toast.success('Success! Installation verified.') - } - // Failure condition: Time out - else if (attempts >= maxAttempts) { + setVerificationStatus('success') + toast.success('Connection established!') + } else if (attempts >= maxAttempts) { clearInterval(checkInterval) - setVerifying(false) - toast.warning( - 'We couldn\'t detect the connection yet. Please checking the following:', - { - description: '1. Ad blockers are disabled\n2. The script is in the \n3. You are not on localhost (unless configured)', - duration: 6000 - } - ) + setVerificationStatus('error') } } catch (e) { - // Ignore network errors during polling + // Ignore errors while polling } - }, 2000) // Poll every 2 seconds + }, 2000) } const copyScript = () => { @@ -348,23 +336,73 @@ export default function SiteSettingsPage() { -
- + + {/* Status Text */} + {verificationStatus === 'checking' && ( + + Waiting for signal from {site.domain}... + )} - Verify Installation - -

- This will open your site in a new tab to check connection. -

+
+ + {/* Error State - Inline Troubleshooting */} + + {verificationStatus === 'error' && ( + +
+
+ +
+

+ We couldn't detect the script. +

+

+ Please ensure you opened the new tab and check the following: +

+
    +
  • Ad blockers are disabled on your site
    • +
  • The script is placed in the <head> tag
    • +
  • You are not testing on localhost (unless configured)
    • +
+ +
+
+
+ + )} +