feat(analytics): add site verification modal
This commit is contained in:
Usman Baig
@@ -6,6 +6,7 @@ import { getSite, updateSite, resetSiteData, deleteSite, type Site } from '@/lib
|
|||||||
import { getRealtime } from '@/lib/api/stats'
|
import { getRealtime } from '@/lib/api/stats'
|
||||||
import { toast } from 'sonner'
|
import { toast } from 'sonner'
|
||||||
import LoadingOverlay from '@/components/LoadingOverlay'
|
import LoadingOverlay from '@/components/LoadingOverlay'
|
||||||
|
import VerificationModal from '@/components/sites/VerificationModal'
|
||||||
import { APP_URL, API_URL } from '@/lib/api/client'
|
import { APP_URL, API_URL } from '@/lib/api/client'
|
||||||
import { motion, AnimatePresence } from 'framer-motion'
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
import {
|
import {
|
||||||
@@ -15,7 +16,7 @@ import {
|
|||||||
CheckIcon,
|
CheckIcon,
|
||||||
CopyIcon,
|
CopyIcon,
|
||||||
ExclamationTriangleIcon,
|
ExclamationTriangleIcon,
|
||||||
LightningBoltIcon
|
LightningBoltIcon,
|
||||||
} from '@radix-ui/react-icons'
|
} from '@radix-ui/react-icons'
|
||||||
|
|
||||||
const TIMEZONES = [
|
const TIMEZONES = [
|
||||||
@@ -54,7 +55,7 @@ export default function SiteSettingsPage() {
|
|||||||
})
|
})
|
||||||
const [scriptCopied, setScriptCopied] = useState(false)
|
const [scriptCopied, setScriptCopied] = useState(false)
|
||||||
const [linkCopied, setLinkCopied] = useState(false)
|
const [linkCopied, setLinkCopied] = useState(false)
|
||||||
const [verificationStatus, setVerificationStatus] = useState<'idle' | 'checking' | 'success' | 'error'>('idle')
|
const [showVerificationModal, setShowVerificationModal] = useState(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadSite()
|
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 copyScript = () => {
|
||||||
const script = `<script defer data-domain="${site?.domain}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`
|
const script = `<script defer data-domain="${site?.domain}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`
|
||||||
navigator.clipboard.writeText(script)
|
navigator.clipboard.writeText(script)
|
||||||
@@ -336,75 +305,21 @@ export default function SiteSettingsPage() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-4 pt-2">
|
<div className="flex items-center gap-4">
|
||||||
<div className="flex items-center gap-3">
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
onClick={() => setShowVerificationModal(true)}
|
||||||
onClick={handleVerify}
|
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"
|
||||||
disabled={verificationStatus === 'checking'}
|
>
|
||||||
className={`flex items-center gap-2 px-4 py-2 border rounded-xl text-sm font-medium transition-all
|
<LightningBoltIcon className="w-4 h-4" />
|
||||||
${verificationStatus === 'success'
|
Verify Installation
|
||||||
? 'bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-900 dark:text-green-400'
|
</button>
|
||||||
: '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'
|
<p className="text-xs text-neutral-500 dark:text-neutral-500">
|
||||||
}`}
|
Check if your site is sending data correctly.
|
||||||
>
|
</p>
|
||||||
{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><head></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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
|
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
|
||||||
<button
|
<button
|
||||||
@@ -623,7 +538,12 @@ export default function SiteSettingsPage() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<VerificationModal
|
||||||
|
isOpen={showVerificationModal}
|
||||||
|
onClose={() => setShowVerificationModal(false)}
|
||||||
|
site={site}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
230
components/sites/VerificationModal.tsx
Normal file
230
components/sites/VerificationModal.tsx
Normal file
@@ -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><head></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
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user