feat(analytics): add site verification modal

2026-01-18 22:15:34 +01:00
parent 6b1c1651bf
commit 1c5184988b
2 changed files with 252 additions and 102 deletions
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -6,6 +6,7 @@ import { getSite, updateSite, resetSiteData, deleteSite, type Site } from '@/lib
 import { getRealtime } from '@/lib/api/stats'
 import { toast } from 'sonner'
 import LoadingOverlay from '@/components/LoadingOverlay'
+import VerificationModal from '@/components/sites/VerificationModal'
 import { APP_URL, API_URL } from '@/lib/api/client'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
@@ -15,7 +16,7 @@ import {
  CheckIcon,
  CopyIcon,
  ExclamationTriangleIcon,
-  LightningBoltIcon
+  LightningBoltIcon,
 } from '@radix-ui/react-icons'

 const TIMEZONES = [
@@ -54,7 +55,7 @@ export default function SiteSettingsPage() {
  })
  const [scriptCopied, setScriptCopied] = useState(false)
  const [linkCopied, setLinkCopied] = useState(false)
-  const [verificationStatus, setVerificationStatus] = useState<'idle' | 'checking' | 'success' | 'error'>('idle')
+  const [showVerificationModal, setShowVerificationModal] = useState(false)

  useEffect(() => {
    loadSite()
@@ -134,38 +135,6 @@ export default function SiteSettingsPage() {
    }
  }

-  const handleVerify = async () => {
-    if (!site?.domain) return
-    
-    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')
-
-    // 2. Poll for success
-    const checkInterval = setInterval(async () => {
-      attempts++
-      try {
-        const data = await getRealtime(siteId)
-        
-        if (data.visitors > 0) {
-          clearInterval(checkInterval)
-          setVerificationStatus('success')
-          toast.success('Connection established!')
-        } else if (attempts >= maxAttempts) {
-          clearInterval(checkInterval)
-          setVerificationStatus('error')
-        }
-      } catch (e) {
-        // Ignore errors while polling
-      }
-    }, 2000)
-  }
-
  const copyScript = () => {
    const script = `<script defer data-domain="${site?.domain}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`
    navigator.clipboard.writeText(script)
@@ -336,75 +305,21 @@ export default function SiteSettingsPage() {
                      </button>
                    </div>

-                    <div className="space-y-4 pt-2">
-                      <div className="flex items-center gap-3">
-                        <button
-                          type="button"
-                          onClick={handleVerify}
-                          disabled={verificationStatus === 'checking'}
-                          className={`flex items-center gap-2 px-4 py-2 border rounded-xl text-sm font-medium transition-all
-                            ${verificationStatus === 'success' 
-                              ? 'bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-900 dark:text-green-400'
-                              : 'bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700'
-                            }`}
-                        >
-                          {verificationStatus === 'checking' ? (
-                            <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-                          ) : verificationStatus === 'success' ? (
-                            <CheckIcon className="w-4 h-4" />
-                          ) : (
-                            <LightningBoltIcon className="w-4 h-4" />
-                          )}
-                          {verificationStatus === 'checking' ? 'Checking...' : 
-                           verificationStatus === 'success' ? 'Installation Verified' : 'Verify Installation'}
-                        </button>
-
-                        {/* Status Text */}
-                        {verificationStatus === 'checking' && (
-                          <span className="text-sm text-neutral-500 animate-pulse">
-                            Waiting for signal from {site.domain}...
-                          </span>
-                        )}
-                      </div>
-
-                      {/* Error State - Inline Troubleshooting */}
-                      <AnimatePresence>
-                        {verificationStatus === 'error' && (
-                          <motion.div
-                            initial={{ opacity: 0, height: 0 }}
-                            animate={{ opacity: 1, height: 'auto' }}
-                            exit={{ opacity: 0, height: 0 }}
-                            className="overflow-hidden"
-                          >
-                            <div className="p-4 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-xl text-sm">
-                              <div className="flex items-start gap-3">
-                                <ExclamationTriangleIcon className="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5" />
-                                <div className="space-y-2">
-                                  <p className="font-medium text-red-900 dark:text-red-200">
-                                    We couldn't detect the script.
-                                  </p>
-                                  <p className="text-red-700 dark:text-red-300">
-                                    Please ensure you opened the new tab and check the following:
-                                  </p>
-                                  <ul className="list-disc list-inside space-y-1 text-red-700 dark:text-red-300 ml-1">
-                                    <li>Ad blockers are disabled on your site</li>
-                                    <li>The script is placed in the <code>&lt;head&gt;</code> tag</li>
-                                    <li>You are not testing on localhost (unless configured)</li>
-                                  </ul>
-                                  <button 
-                                    onClick={handleVerify}
-                                    className="text-red-700 dark:text-red-300 underline font-medium hover:text-red-800 mt-1"
-                                  >
-                                    Try Again
-                                  </button>
-                                </div>
-                              </div>
-                            </div>
-                          </motion.div>
-                        )}
-                      </AnimatePresence>
+                    <div className="flex items-center gap-4">
+                      <button
+                        type="button"
+                        onClick={() => setShowVerificationModal(true)}
+                        className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium"
+                      >
+                        <LightningBoltIcon className="w-4 h-4" />
+                        Verify Installation
+                      </button>
+                      <p className="text-xs text-neutral-500 dark:text-neutral-500">
+                        Check if your site is sending data correctly.
+                      </p>
                    </div>
                  </div>
+                  </div>

                  <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
                    <button
@@ -623,7 +538,12 @@ export default function SiteSettingsPage() {
          </motion.div>
        </div>
      </div>
+
+      <VerificationModal
+        isOpen={showVerificationModal}
+        onClose={() => setShowVerificationModal(false)}
+        site={site}
+      />
    </div>
-  </div>
  )
 }
--- a/components/sites/VerificationModal.tsx
+++ b/components/sites/VerificationModal.tsx
@@ -0,0 +1,230 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { motion, AnimatePresence } from 'framer-motion'
+import { 
+  Cross2Icon, 
+  ExternalLinkIcon, 
+  CheckCircledIcon, 
+  ExclamationTriangleIcon,
+  LightningBoltIcon 
+} from '@radix-ui/react-icons'
+import { Site } from '@/lib/api/sites'
+import { getRealtime } from '@/lib/api/stats'
+import { toast } from 'sonner'
+
+interface VerificationModalProps {
+  isOpen: boolean
+  onClose: () => void
+  site: Site
+}
+
+export default function VerificationModal({ isOpen, onClose, site }: VerificationModalProps) {
+  const [mounted, setMounted] = useState(false)
+  const [status, setStatus] = useState<'idle' | 'checking' | 'success' | 'error'>('idle')
+  const [attempts, setAttempts] = useState(0)
+
+  useEffect(() => {
+    setMounted(true)
+    return () => setMounted(false)
+  }, [])
+
+  useEffect(() => {
+    if (isOpen) {
+      setStatus('idle')
+      setAttempts(0)
+    }
+  }, [isOpen])
+
+  // * Polling Logic
+  useEffect(() => {
+    let interval: NodeJS.Timeout
+    const maxAttempts = 30 // 60 seconds (2s interval)
+
+    if (status === 'checking') {
+      interval = setInterval(async () => {
+        setAttempts(prev => {
+            if (prev >= maxAttempts) {
+                setStatus('error')
+                return prev
+            }
+            return prev + 1
+        })
+
+        try {
+          const data = await getRealtime(site.id)
+          if (data.visitors > 0) {
+            setStatus('success')
+            toast.success('Connection established!')
+          }
+        } catch (e) {
+          // Ignore errors
+        }
+      }, 2000)
+    }
+
+    return () => clearInterval(interval)
+  }, [status, site.id])
+
+  const handleStartVerification = () => {
+    const protocol = site.domain.includes('http') ? '' : 'https://'
+    const verificationUrl = `${protocol}${site.domain}/?utm_source=ciphera_verify&_t=${Date.now()}`
+    
+    // * Open site
+    window.open(verificationUrl, '_blank')
+    
+    // * Start polling
+    setStatus('checking')
+    setAttempts(0)
+  }
+
+  if (!mounted) return null
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={onClose}
+            className="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm"
+          />
+
+          {/* Modal */}
+          <div className="fixed inset-0 z-[101] flex items-center justify-center p-4 pointer-events-none">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 20 }}
+              className="w-full max-w-md bg-white dark:bg-neutral-900 rounded-2xl shadow-xl border border-neutral-200 dark:border-neutral-800 pointer-events-auto overflow-hidden"
+            >
+              {/* Header */}
+              <div className="flex items-center justify-between px-6 py-4 border-b border-neutral-100 dark:border-neutral-800">
+                <h3 className="font-semibold text-neutral-900 dark:text-white">
+                  Verify Installation
+                </h3>
+                <button
+                  onClick={onClose}
+                  className="p-1 rounded-lg text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                >
+                  <Cross2Icon className="w-5 h-5" />
+                </button>
+              </div>
+
+              {/* Content */}
+              <div className="p-6">
+                {status === 'idle' && (
+                  <div className="space-y-4">
+                    <div className="p-4 rounded-xl bg-brand-orange/5 border border-brand-orange/10 flex gap-4">
+                      <div className="p-2 bg-brand-orange/10 rounded-lg h-fit text-brand-orange">
+                        <LightningBoltIcon className="w-5 h-5" />
+                      </div>
+                      <div className="space-y-1">
+                        <h4 className="font-medium text-brand-orange">How this works</h4>
+                        <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                          We will open your website in a new tab. Keep it open while we check if the script sends back a signal.
+                        </p>
+                      </div>
+                    </div>
+
+                    <button
+                      onClick={handleStartVerification}
+                      className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
+                    >
+                      Open Website & Verify
+                      <ExternalLinkIcon className="w-4 h-4" />
+                    </button>
+                  </div>
+                )}
+
+                {status === 'checking' && (
+                  <div className="flex flex-col items-center justify-center py-8 space-y-6">
+                    <div className="relative">
+                      <div className="w-16 h-16 border-4 border-neutral-100 dark:border-neutral-800 rounded-full" />
+                      <div className="absolute inset-0 w-16 h-16 border-4 border-brand-orange border-t-transparent rounded-full animate-spin" />
+                    </div>
+                    <div className="text-center space-y-1">
+                      <h4 className="font-medium text-neutral-900 dark:text-white">
+                        Checking connection...
+                      </h4>
+                      <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                        Waiting for signal from {site.domain}
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {status === 'success' && (
+                  <div className="flex flex-col items-center justify-center py-6 space-y-6">
+                    <div className="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center text-green-600 dark:text-green-400">
+                      <CheckCircledIcon className="w-8 h-8" />
+                    </div>
+                    <div className="text-center space-y-1">
+                      <h4 className="text-xl font-bold text-neutral-900 dark:text-white">
+                        You're all set!
+                      </h4>
+                      <p className="text-neutral-500 dark:text-neutral-400">
+                        We are successfully receiving data from your website.
+                      </p>
+                    </div>
+                    <button
+                      onClick={onClose}
+                      className="w-full px-4 py-3 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
+                    >
+                      Done
+                    </button>
+                  </div>
+                )}
+
+                {status === 'error' && (
+                  <div className="space-y-6">
+                    <div className="flex flex-col items-center justify-center space-y-2 text-center">
+                      <div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
+                        <ExclamationTriangleIcon className="w-6 h-6" />
+                      </div>
+                      <h4 className="font-medium text-red-600 dark:text-red-400">
+                        Connection Timed Out
+                      </h4>
+                    </div>
+
+                    <div className="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-xl border border-neutral-100 dark:border-neutral-800">
+                      <p className="text-sm font-medium text-neutral-900 dark:text-white mb-2">
+                        Troubleshooting Checklist:
+                      </p>
+                      <ul className="text-sm text-neutral-600 dark:text-neutral-400 space-y-1 list-disc list-inside">
+                        <li>Did the new tab open successfully?</li>
+                        <li>Is your ad blocker disabled?</li>
+                        <li>Is the script inside the <code>&lt;head&gt;</code> tag?</li>
+                        <li>Are you running on a valid domain (not localhost)?</li>
+                      </ul>
+                    </div>
+
+                    <div className="flex gap-3">
+                      <button
+                        onClick={onClose}
+                        className="flex-1 px-4 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
+                      >
+                        Close
+                      </button>
+                      <button
+                        onClick={handleStartVerification}
+                        className="flex-1 px-4 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
+                      >
+                        Try Again
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>,
+    document.body
+  )
+}