import { AlertTriangle, ArrowRight, Bell, Check, Clock, Copy, ExternalLink, Loader2, PlayCircle, Sparkles, TrendingUp, UserPlus, X, } from 'lucide-react'; import { toast } from 'sonner'; import { useEffect, useRef, useState } from 'react'; import { Link, router, useForm, usePage } from '@inertiajs/react'; import { DraftOutputTeaser } from '@/Components/Ai/DraftOutputTeaser'; import { TrialExpiryCard } from '@/Components/billing/TrialExpiryCard'; import { Badge } from '@/Components/ui/badge'; import { Button } from '@/Components/ui/button'; import { Progress } from '@/Components/ui/progress'; import { useExperiment } from '@/hooks/useExperiment'; import { usePolling } from '@/hooks/usePolling'; import { trackEvent, trackProductEvent } from '@/lib/analytics'; import { ANALYZE_NOW_CLICKED, BYOK_NUDGE_DEFERRED, DEMO_MODE_ENTERED, GSC_CONNECT_CLICKED, GSC_SYNC_COMPLETED, GSC_SYNC_ESCAPE, GSC_SYNC_STARTED, GSC_SYNC_WAIT_ABANDONED, ONBOARDING_ABANDONED, ONBOARDING_COMPLETED, ONBOARDING_STEP_VIEWED, ONBOARDING_WIZARD_VIEWED, REFERRAL_CTA_SHOWN, REFERRAL_LINK_COPIED, TEAM_INVITE_SENT, UPGRADE_PROMPT_CLICKED, WIZARD_AI_STEP_SHOWN, WIZARD_SEE_RECOMMENDATIONS_CLICKED, WP_CONNECT_CLICKED, WP_INSTALL_STARTED, WP_PLUGIN_DETECTED, } from '@/lib/event-catalog'; import { cn } from '@/lib/utils'; import { PageProps, SiteBasic } from '@/types'; interface GscConnection { property_url: string; last_synced_at: string | null; status: string; sync_progress_pct?: number | null; } interface WpConnection { wp_url: string; setup_token?: string; status: string; plugin_version?: string; capabilities?: Record; last_webhook_at?: string | null; last_sync_at?: string | null; } interface LatestRun { id: number; status: string; before_start: string | null; before_end: string | null; after_start: string | null; after_end: string | null; summary: { overall: { clicks_after: number; clicks_delta_pct: number; impressions_after: number; impressions_delta_pct: number; ctr_after: number; ctr_delta_pct: number; position_after: number; position_delta_pct: number; }; } | null; } interface OnboardingWizardProps { site: SiteBasic & { is_demo: boolean }; gscConnection: GscConnection | null; wpConnection: WpConnection | null; gscDataRange?: { earliest: string | null; latest: string | null; coverage_days?: number | null }; latestRun?: LatestRun | null; winnersCount?: number; losersCount?: number; recommendationsCount?: number; referralUrl?: string | null; productOverviewVideoUrl?: string | null; demoDataAvailable?: boolean; /** ACT-003: User role for persona-conditional messaging. Matches UserRole enum values. */ userRole?: string | null; } /** ACT-003: Return a role-specific description for the Run Analysis card. */ function getAnalysisStepDescription(userRole: string | null | undefined): string { switch (userRole) { case 'agency_owner': return 'Analyze your GSC data to surface SEO wins across client properties. Generate team-ready action plans and shareable reports.'; case 'blogger': return 'Analyze your GSC data to find underperforming posts and content gaps. Get AI-powered rewrite suggestions for your highest-traffic pages.'; case 'ecommerce_manager': return 'Analyze your GSC data to surface product page and category SEO opportunities. Find quick wins to drive more organic traffic to your store.'; case 'freelancer': return 'Analyze your GSC data to surface client SEO opportunities quickly. Generate polished reports to share insights with clients.'; case 'in_house_seo': return 'Analyze your GSC data to surface competitive opportunities and traffic trends. Track performance across your full site architecture.'; default: return 'Analyze your GSC data to surface SEO opportunities and recommendations.'; } } interface Step { label: string; key: 'gsc' | 'analysis' | 'recommendations'; } const steps: Step[] = [ { label: 'Connect GSC', key: 'gsc' }, { label: 'Run Analysis', key: 'analysis' }, { label: 'Review Recommendations', key: 'recommendations' }, ]; const SYNC_STAGES = [ 'Authenticating with Google and verifying permissions…', 'Fetching your last 16 months of search data…', 'Processing clicks, impressions, and position metrics…', 'Building your performance baseline…', ] as const; /** Sample cards shown during first sync so the user sees what results will look like. * @param domain - The user's site domain, used to personalise the sample URL. */ function SyncWaitPreview({ domain }: { domain?: string }) { const bareDomain = domain ? domain.replace(/^https?:\/\//, '') : ''; const samplePath = bareDomain ? `https://${bareDomain}/blog/your-first-post` : '/blog/example-post'; return (

Here's what you'll see after sync

{/* Sample finding card */} {/* Sample recommendation card */}
); } /** Persistent banner shown when the site is running in demo mode (ACT-003). Disappears once a real GSC connection exists. */ function DemoModeBanner({ siteId, onDismiss }: { siteId: number; onDismiss?: () => void }) { return (
); } /** Compact non-blocking sync indicator shown inline inside the GSC card. */ function GscSyncStatusCompact({ syncProgressPct = 0, productOverviewVideoUrl, propertyUrl, isFirstSync = false, domain, siteId, }: { syncProgressPct?: number; productOverviewVideoUrl?: string | null; propertyUrl?: string; isFirstSync?: boolean; domain?: string; siteId?: number; }) { const [stageIndex, setStageIndex] = useState(0); useEffect(() => { const stageInterval = setInterval(() => { setStageIndex((prev) => (prev + 1) % SYNC_STAGES.length); }, 4000); return () => clearInterval(stageInterval); }, []); const displayPct = Math.min(100, Math.max(0, syncProgressPct)); let notifSettingsHref: string | null = null; if (siteId) { try { notifSettingsHref = route('notification-settings.show', { site: siteId }); } catch { // route name not registered in Ziggy manifest (e.g. feature flag off) } } return (
{propertyUrl &&

Connected: {propertyUrl}

}

{SYNC_STAGES[stageIndex]}

{typeof Notification !== 'undefined' && Notification.permission === 'default' && ( )} {(typeof Notification === 'undefined' || Notification.permission === 'denied') && (notifSettingsHref ? ( ) : (

))} {productOverviewVideoUrl && ( )} {isFirstSync && }
); } function WizardStepper({ completedKeys, currentStep, }: { completedKeys: Set; currentStep: number; }) { return (
    {steps.map((step, index) => { const stepNumber = index + 1; const isCompleted = completedKeys.has(step.key); const isCurrent = stepNumber === currentStep && !isCompleted; const isUpcoming = !isCompleted && !isCurrent; const isLast = index === steps.length - 1; return (
  1. {/* Circle + label */}
    {isCurrent && ( )}
    {isCompleted ?
    {isCompleted ? 'Completed: ' : isCurrent ? 'Current step: ' : 'Upcoming: '} {step.label}
    {/* Connector line */} {!isLast && (
    )}
    2. ); })}
); } function PluginInstallHelper({ siteId, domain }: { siteId: number; domain?: string }) { const [open, setOpen] = useState(false); const wpAdminUploadUrl = domain ? `${domain.replace(/\/$/, '')}/wp-admin/plugin-install.php?tab=upload` : null; const handleToggle = () => { const next = !open; setOpen(next); if (next) { trackEvent(WP_INSTALL_STARTED, { site_id: String(siteId) }); } }; return (
{open && (
  1. Download the plugin zip using the button below.
  2. {wpAdminUploadUrl ? ( <> Open WP Plugin Installer {' '} (or go to Plugins → Add New → Upload Plugin). ) : ( 'In your WordPress admin, go to Plugins → Add New → Upload Plugin.' )}
  3. Choose the downloaded zip file and click Install Now.
  4. Activate the plugin.
  5. Return here and enter your WordPress URL to connect.
Download Plugin
)}
); } // Defined at module scope for stable useEffect dependency array reference (INST-003). const ACTIVE_STEPS = [ 'gsc_connect', 'gsc_syncing', 'analysis_ready', 'analysis_running', 'recommendations', 'healthy_complete', ] as const; export default function OnboardingWizard({ site, gscConnection, wpConnection, gscDataRange, latestRun, recommendationsCount, referralUrl, productOverviewVideoUrl, demoDataAvailable = false, userRole, }: OnboardingWizardProps) { const { polling_interval_ms, trial, plan, features, ai_status: aiStatus, } = usePage().props; // ACT-002: A/B experiment — test whether showing demo CTA earlier improves activation // for users without a GSC connection. variant_a: demo card shown above the GSC section. const demoPlacementVariant = useExperiment('onboarding_demo_placement'); const gscStatus = gscConnection?.status ?? null; const isSyncing = gscStatus === 'syncing' || gscStatus === 'pending'; // ACT-001: Highlight Analyze Now when server reports 100% progress (may precede status flip to 'synced') const syncProgressPct = gscConnection?.sync_progress_pct ?? 0; const syncReadyEarly = isSyncing && syncProgressPct >= 100; // ACT-011: Compute data coverage days for insufficient-data warning const dataCoverageDays = gscDataRange?.coverage_days ?? null; // Inline WP connection form const { data: wpData, setData: setWpData, post: postWp, processing: wpProcessing, errors: wpErrors, } = useForm({ wp_url: '' }); const [detecting, setDetecting] = useState(false); const [detectResult, setDetectResult] = useState<'found' | 'not-found' | null>(null); const [wpTokenCopied, setWpTokenCopied] = useState(false); const [referralCopied, setReferralCopied] = useState(false); const [syncWaitReferralCopied, setSyncWaitReferralCopied] = useState(false); const handleWpConnect = (e: React.FormEvent) => { e.preventDefault(); trackEvent(WP_CONNECT_CLICKED, { site_id: String(site.id) }); postWp(route('wp.connect', { site: site.id })); }; const handleDetectPlugin = async () => { const url = wpData.wp_url.trim().replace(/\/$/, ''); if (!url) return; setDetecting(true); setDetectResult(null); const controller = new AbortController(); const timeout = setTimeout(() => controller.abort(), 10_000); try { const response = await fetch(`${url}/wp-json/rankwiz/v1/status`, { method: 'HEAD', signal: controller.signal, }); if (response.ok) { setDetectResult('found'); trackEvent(WP_PLUGIN_DETECTED, { site_id: String(site.id) }); } else { setDetectResult('not-found'); } } catch { setDetectResult('not-found'); } finally { clearTimeout(timeout); setDetecting(false); } }; const copySetupToken = async (token: string) => { await navigator.clipboard.writeText(token); setWpTokenCopied(true); setTimeout(() => setWpTokenCopied(false), 2000); }; // ACT-003: Detect auto-triggered analysis (from AutomationOrchestrationService) const isAnalysisPending = latestRun?.status === 'pending' || latestRun?.status === 'processing'; // ACT-001: Track wizard viewed on mount const syncStartRef = useRef(null); // Tracks explicit escape via "Go to Dashboard" CTA during sync — suppresses ONBOARDING_ABANDONED on unmount const escapedViaSyncCtaRef = useRef(false); const [isEscapingSync, setIsEscapingSync] = useState(false); useEffect(() => { trackEvent(ONBOARDING_WIZARD_VIEWED, { site_id: String(site.id) }); }, [site.id]); // Poll when syncing, analysis pending, or WP setup token is displayed (waiting for plugin activation) usePolling( isSyncing || isAnalysisPending || !!wpConnection?.setup_token, polling_interval_ms ?? 5000, ['gsc_connection', 'latest_run', 'wp_connection'], ); // ACT-001: Track GSC sync start useEffect(() => { if (isSyncing && syncStartRef.current === null) { syncStartRef.current = Date.now(); trackEvent(GSC_SYNC_STARTED, { site_id: String(site.id) }); } }, [isSyncing, site.id]); // ACT-008: Track referral CTA shown during sync wait useEffect(() => { if (isSyncing && referralUrl) { trackEvent(REFERRAL_CTA_SHOWN, { source: 'sync_wait_card', site_id: String(site.id) }); } }, [isSyncing, referralUrl, site.id]); // Show a toast when sync finishes (status transitions away from syncing/pending) const prevStatusRef = useRef(gscStatus); useEffect(() => { const prev = prevStatusRef.current; const wasSyncing = prev === 'syncing' || prev === 'pending'; const nowSynced = gscStatus === 'synced'; if (wasSyncing && nowSynced) { toast.success('Your GSC data is ready — run your first analysis now!'); // ACT-001: Track GSC sync completed with duration const durationMs = syncStartRef.current ? Date.now() - syncStartRef.current : undefined; trackEvent(GSC_SYNC_COMPLETED, { site_id: String(site.id), ...(durationMs !== undefined && { duration_ms: durationMs }), }); syncStartRef.current = null; // ACT-004: Fire browser notification if user navigated away if ( typeof Notification !== 'undefined' && Notification.permission === 'granted' && document.hidden ) { new Notification('GSC data is ready!', { body: `${site.name} is ready for analysis. Run your first analysis now.`, icon: '/favicon.ico', }); } } prevStatusRef.current = gscStatus; }, [gscStatus, site.id, site.name]); const analysisCompleted = latestRun?.status === 'completed'; const hasRecommendations = (recommendationsCount ?? 0) > 0; // A healthy site with 0 recommendations is a valid completion — no urgent issues found. const isHealthySite = analysisCompleted && (recommendationsCount ?? 0) === 0; const step3Complete = hasRecommendations || isHealthySite; const totalSteps = 3; const stepsCompleted = (gscConnection ? 1 : 0) + (analysisCompleted ? 1 : 0) + (step3Complete ? 1 : 0); const currentStep = Math.min(stepsCompleted + 1, totalSteps); // Granular wizard sub-steps for per-step drop-off measurement (INST-003). // These 6 states capture every distinct UI experience a user can see during the wizard. // Defined outside component to keep stable reference for useEffect dependency array. type OnboardingActiveStep = (typeof ACTIVE_STEPS)[number]; const activeStep: OnboardingActiveStep = (() => { if (isHealthySite) return 'healthy_complete'; if (hasRecommendations) return 'recommendations'; if (isAnalysisPending) return 'analysis_running'; if (gscConnection && gscStatus === 'synced') return 'analysis_ready'; if (isSyncing) return 'gsc_syncing'; return 'gsc_connect'; })(); // Track step views — fires on every distinct activeStep transition so per-step // abandon rates are measurable. 6 distinct events fire across a full walkthrough. const stepStartRef = useRef(Date.now()); useEffect(() => { trackProductEvent(ONBOARDING_STEP_VIEWED, { step_name: activeStep, step_index: ACTIVE_STEPS.indexOf(activeStep) + 1, total_steps: ACTIVE_STEPS.length, site_id: String(site.id), plan_tier: plan ?? 'free', // ACT-002: experiment variant for demo placement (null = not enrolled or loading) ...(demoPlacementVariant !== null && { experiment_demo_variant: demoPlacementVariant }), // ACT-003: user role for persona-based conversion analysis ...(userRole !== null && userRole !== undefined && { user_role: userRole }), }); stepStartRef.current = Date.now(); }, [activeStep, site.id, plan, demoPlacementVariant, userRole]); // Track onboarding completion server-side (consent-free) + client-side supplement const completionTrackedRef = useRef(false); useEffect(() => { if (stepsCompleted === totalSteps && !completionTrackedRef.current) { completionTrackedRef.current = true; // Server-side: fires in audit_logs regardless of analytics consent (INST-012) router.post( route('onboarding.complete', { site: site.id }), {}, { preserveState: true, preserveScroll: true }, ); // Client-side supplement: GA4 / PostHog client (may be consent-blocked for new users) // ACT-003: include user role for persona-based conversion analysis trackProductEvent(ONBOARDING_COMPLETED, { site_id: String(site.id), ...(userRole !== null && userRole !== undefined && { user_role: userRole }), }); trackEvent(REFERRAL_CTA_SHOWN, { site_id: String(site.id) }); } }, [stepsCompleted, totalSteps, site.id, userRole]); // Keep a ref up-to-date with the latest values needed for unmount cleanup (avoids stale closure) const abandonmentRef = useRef({ site_id: String(site.id), step_key: activeStep, step_name: activeStep, stepsCompleted, isSyncing, }); abandonmentRef.current = { site_id: String(site.id), step_key: activeStep, step_name: activeStep, stepsCompleted, isSyncing, }; // Fire ONBOARDING_ABANDONED on unmount when wizard is not yet complete. // Suppressed when user explicitly clicked "Go to Dashboard" during sync (escapedViaSyncCtaRef), // since that fires GSC_SYNC_ESCAPE instead and is not an unintentional abandonment. useEffect(() => { return () => { const { site_id, step_key, step_name, stepsCompleted: sc, isSyncing: syncing, } = abandonmentRef.current; if (sc < totalSteps && !escapedViaSyncCtaRef.current) { trackEvent(ONBOARDING_ABANDONED, { site_id, step_key, step_name, time_on_step_ms: Date.now() - stepStartRef.current, was_syncing: syncing, }); if (syncing && syncStartRef.current !== null) { trackEvent(GSC_SYNC_WAIT_ABANDONED, { site_id, wait_time_ms: Date.now() - syncStartRef.current, }); } } }; }, []); const progressPct = Math.round((stepsCompleted / totalSteps) * 100); const completedKeys = new Set([ ...(gscConnection ? ['gsc'] : []), ...(analysisCompleted ? ['analysis'] : []), ...(step3Complete ? ['recommendations'] : []), ]); return (

Set up your SEO insights

{site.name} · {site.domain}

Step {currentStep} of {totalSteps} {gscConnection && gscStatus === 'synced' ? '~2 minutes to first insights' : 'Get your first insights in ~10 minutes'}
{trial?.active && trial.daysRemaining !== null && (
)} {/* ACT-006: Upgrade nudge for trial users approaching expiry (≤5 days) */} {features?.billing && trial?.active && trial.daysRemaining !== null && trial.daysRemaining <= 5 && (
)}
{/* Step visual indicator */}
{/* ACT-003: Demo mode banner — shown when site is running on seeded data with no real GSC */} {site.is_demo && !gscConnection && } {/* ACT-002: variant_a — demo CTA promoted above GSC card for users without a connection */} {demoDataAvailable && !gscConnection && demoPlacementVariant === 'variant_a' && (

See RankWiz in action instantly

Not ready to connect GSC yet? Explore with sample data and see real SEO insights before linking your account.

)} {/* GSC card — compact non-blocking status when syncing */}

Google Search Console

{isSyncing ? ( ) : gscConnection ? (

Connected: {gscConnection.property_url}

) : (
{/* ACT-002: control/null path — show demo CTA inside GSC card. variant_a shows it as a prominent card above, so hide it here. */} {demoDataAvailable && demoPlacementVariant !== 'variant_a' && (
or
)} {demoDataAvailable && demoPlacementVariant !== 'variant_a' && ( )}
)}
{/* CRO-003: Escape card — promoted above the locked analysis button so users see it without scrolling. Primary styling makes it the primary call to action during sync. Users who navigate away will receive a browser notification when sync completes. */} {isSyncing && (

No need to wait here

Your data is syncing in the background. Explore RankWiz or come back later — the page will update automatically when sync finishes.

{/* ACT-008: Referral nudge during sync wait — high attentional availability */} {referralUrl && (

Know someone who needs SEO insights?{' '} Invite them while you wait — you both get 5 extra AI drafts.

)}
)} {/* Run First Analysis card — shown before WP so core flow is GSC → Analysis → WP */}

Run First Analysis

{/* ACT-003: Persona-conditional description based on user role */}

{getAnalysisStepDescription(userRole)}

{/* ACT-003: Show waiting state when analysis was auto-triggered */} {isAnalysisPending ? (
Analysis is running — we'll show your results when it's done...
) : gscConnection && gscStatus === 'synced' && !analysisCompleted ? (
{/* ACT-011: Non-blocking warning when GSC history < 56 days */} {dataCoverageDays !== null && dataCoverageDays < 56 && (
)} trackEvent(ANALYZE_NOW_CLICKED, { site_id: String(site.id), source: 'onboarding_wizard', ...(dataCoverageDays !== null ? { data_coverage_days: dataCoverageDays } : {}), }) } >
) : gscConnection && isSyncing && syncReadyEarly ? (
trackEvent(ANALYZE_NOW_CLICKED, { site_id: String(site.id), source: 'onboarding_wizard_sync_ready_early', }) } >
) : gscConnection && isSyncing ? (
Available when sync completes
) : gscConnection && gscStatus === 'failed' ? (

GSC sync failed. Please retry the connection.

Retry Connection
) : (

Connect Google Search Console first to run an analysis.

)}
{/* ACT-003: Healthy site card — shown when analysis completes with 0 recommendations */} {isHealthySite && (
)} {/* ACT-007: Prominent "See Your Recommendations" CTA — primary action after analysis completes */} {analysisCompleted && hasRecommendations && (
)} {/* ACT-001: AI draft nudge card — shown inline after analysis completes */} {analysisCompleted && ( )} {/* CRO-008: Upgrade card — shown at highest-intent moment (analysis complete, free plan) */} {analysisCompleted && features?.billing && !trial?.active && !plan && ( )} {/* ACT-007: Team invite card — shown after analysis completes to seed B2B viral loop */} {analysisCompleted && } {/* CRO-014: Activation-complete upgrade prompt — highest-conversion moment for free users */} {stepsCompleted === totalSteps && features?.billing && !trial?.active && !plan && ( )} {/* ACT-002: Referral completion card — shown when all steps are done */} {stepsCompleted === totalSteps && referralUrl && ( { await navigator.clipboard.writeText(referralUrl); setReferralCopied(true); trackEvent(REFERRAL_LINK_COPIED, { site_id: String(site.id) }); setTimeout(() => setReferralCopied(false), 2000); }} /> )} {/* ACT-004: WP Plugin bonus step — post-activation only, never blocks core wizard progress */} {stepsCompleted === totalSteps && (

WordPress Plugin Bonus step

{wpConnection && !wpConnection.setup_token ? (

Connected: {wpConnection.wp_url}

) : wpConnection?.setup_token ? ( /* Pending: connection created, polling will auto-detect activation */

Paste this token in your WP admin → Settings → RankWiz AI:

{wpConnection.setup_token}
{/* CRO-007: Skip consequence — content quality rules require WP content */}

Connect WordPress to unlock full content analysis and publish AI drafts directly from RankWiz.

) : ( /* Not connected: inline URL form */

Connect to publish AI drafts directly to your WordPress site and unlock full content analysis.

{ setWpData('wp_url', e.target.value); setDetectResult(null); }} placeholder="https://yoursite.com" aria-invalid={!!wpErrors.wp_url} aria-describedby={wpErrors.wp_url ? 'wp-url-wizard-error' : undefined} className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" /> {wpErrors.wp_url && (

{wpErrors.wp_url}

)}
{/* Deep link + auto-detect — shown once user types a URL */} {wpData.wp_url && (
)} {detectResult === 'found' && (

)} {detectResult === 'not-found' && (

Plugin not detected. Install it first using the link above, then connect.

)}
{/* CRO-007: Skip consequence — content quality rules require WP content */}

Connect WordPress to unlock full content analysis and publish AI drafts directly from RankWiz.

)}
)}
); } const BYOK_DEFERRED_KEY = 'byok_nudge_deferred'; interface AiDraftNudgeCardProps { siteId: number; bundledRemaining: number | null; } function AiDraftNudgeCard({ siteId, bundledRemaining }: AiDraftNudgeCardProps) { const { trial, plan, features } = usePage().props; const [deferred, setDeferred] = useState(() => { try { return localStorage.getItem(BYOK_DEFERRED_KEY) === '1'; } catch { return false; } }); useEffect(() => { trackEvent(WIZARD_AI_STEP_SHOWN, { site_id: String(siteId) }); // intentional: fire once on mount // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const hasCredits = bundledRemaining !== null && bundledRemaining > 0; const isTrialUser = trial?.active === true; const isFreePlan = !plan && !isTrialUser; if (deferred) return null; const handleDefer = () => { trackEvent(BYOK_NUDGE_DEFERRED, { site_id: String(siteId), plan: isTrialUser ? 'trial' : 'free', }); try { localStorage.setItem(BYOK_DEFERRED_KEY, '1'); } catch { // localStorage unavailable — ignore } setDeferred(true); }; return (
); } function OnboardingUpgradeCard({ siteId, recommendationsCount, }: { siteId: number; recommendationsCount: number; }) { return (
); } function ActivationCompleteUpgradeCard({ siteId }: { siteId: number }) { const [dismissed, setDismissed] = useState(false); if (dismissed) return null; return (
); } function TeamInviteCard({ siteId }: { siteId: number }) { const [sent, setSent] = useState(false); const { data, setData, post, processing, errors, reset } = useForm({ email: '', role: 'viewer' }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post(route('site-members.store', { site: siteId }), { preserveScroll: true, onSuccess: () => { setSent(true); reset(); trackEvent(TEAM_INVITE_SENT, { site_id: String(siteId) }); }, }); }; if (sent) { return (
); } return (
setData('email', e.target.value)} placeholder="colleague@company.com" aria-invalid={!!errors.email} aria-describedby={errors.email ? 'invite-email-error' : undefined} className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" /> {errors.email && (

{errors.email}

)}

They'll get an email to join — no account needed yet.

Optional — do this later from Site Settings
); } interface ReferralCompletionCardProps { referralUrl: string; referralCopied: boolean; onCopy: () => Promise; } function ReferralCompletionCard({ referralUrl, referralCopied, onCopy, }: ReferralCompletionCardProps) { return (

When a friend signs up with your link, you each receive 5 bonus AI draft credits automatically within 24 hours.

{referralUrl}
); }