From 39e90f4f09d4c7b6984a40a64870f4691d67a2c0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 8 Feb 2026 15:09:17 +0100
Subject: [PATCH] feat: implement site creation confirmation with integration
 options and script copying functionality

---
 app/sites/new/page.tsx | 124 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 120 insertions(+), 4 deletions(-)

diff --git a/app/sites/new/page.tsx b/app/sites/new/page.tsx
index 0350d07..b4f0522 100644
--- a/app/sites/new/page.tsx
+++ b/app/sites/new/page.tsx
@@ -1,12 +1,18 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
-import { createSite, listSites } from '@/lib/api/sites'
+import Link from 'next/link'
+import { createSite, listSites, type Site } from '@/lib/api/sites'
 import { getSubscription } from '@/lib/api/billing'
+import { API_URL, APP_URL } from '@/lib/api/client'
+import { integrations, getIntegration } from '@/lib/integrations'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@/lib/utils/authErrors'
 import { Button, Input } from '@ciphera-net/ui'
+import { CheckCircleIcon, CheckIcon } from '@ciphera-net/ui'
+
+const popularIntegrations = integrations.filter((i) => i.category === 'framework').slice(0, 10)
 
 export default function NewSitePage() {
   const router = useRouter()
@@ -15,6 +21,9 @@ export default function NewSitePage() {
     name: '',
     domain: '',
   })
+  const [createdSite, setCreatedSite] = useState<Site | null>(null)
+  const [selectedIntegrationSlug, setSelectedIntegrationSlug] = useState<string | null>(null)
+  const [scriptCopied, setScriptCopied] = useState(false)
 
   // * Check for plan limits on mount
   useEffect(() => {
@@ -38,6 +47,15 @@ export default function NewSitePage() {
     checkLimits()
   }, [router])
 
+  const copyScript = useCallback(() => {
+    if (!createdSite) return
+    const script = `<script defer data-domain="${createdSite.domain}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`
+    navigator.clipboard.writeText(script)
+    setScriptCopied(true)
+    toast.success('Script copied to clipboard')
+    setTimeout(() => setScriptCopied(false), 2000)
+  }, [createdSite])
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setLoading(true)
@@ -45,14 +63,112 @@ export default function NewSitePage() {
     try {
       const site = await createSite(formData)
       toast.success('Site created successfully')
-      router.push(`/sites/${site.id}`)
-    } catch (error: any) {
+      setCreatedSite(site)
+    } catch (error: unknown) {
       toast.error(getAuthErrorMessage(error) || 'Failed to create site: ' + ((error as Error)?.message || 'Unknown error'))
     } finally {
       setLoading(false)
     }
   }
 
+  // * Step 2: Show framework picker + script (same as /welcome after adding first site)
+  if (createdSite) {
+    return (
+      <div className="container mx-auto px-4 py-8 max-w-2xl">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-8">
+          <div className="text-center">
+            <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-6">
+              <CheckCircleIcon className="h-7 w-7" />
+            </div>
+            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white">
+              Site created
+            </h2>
+            <p className="mt-2 text-neutral-600 dark:text-neutral-400">
+              Add the script to your site to start collecting data.
+            </p>
+          </div>
+
+          <div className="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-700">
+            <h3 className="text-sm font-semibold text-neutral-900 dark:text-white mb-1">
+              Add the script to your site
+            </h3>
+            <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3">
+              Choose your framework for setup instructions.
+            </p>
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-4">
+              {popularIntegrations.map((int) => (
+                <button
+                  key={int.id}
+                  type="button"
+                  onClick={() => setSelectedIntegrationSlug(selectedIntegrationSlug === int.id ? null : int.id)}
+                  className={`flex items-center gap-2 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors ${
+                    selectedIntegrationSlug === int.id
+                      ? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
+                      : 'border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300'
+                  }`}
+                >
+                  <span className="[&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 flex items-center justify-center">
+                    {int.icon}
+                  </span>
+                  <span className="truncate font-medium">{int.name}</span>
+                </button>
+              ))}
+            </div>
+            <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-2">
+              <Link href="/integrations" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
+                View all integrations →
+              </Link>
+            </p>
+
+            <div className="rounded-xl bg-neutral-100 dark:bg-neutral-800 p-4 relative group">
+              <code className="text-xs text-neutral-900 dark:text-white break-all font-mono block pr-10">
+                {`<script defer data-domain="${createdSite.domain}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`}
+              </code>
+              <button
+                type="button"
+                onClick={copyScript}
+                className="absolute top-2 right-2 p-2 bg-white dark:bg-neutral-700 rounded-lg shadow-sm hover:bg-neutral-50 dark:hover:bg-neutral-600 transition-colors"
+                title="Copy script"
+                aria-label={scriptCopied ? 'Copied' : 'Copy script to clipboard'}
+              >
+                {scriptCopied ? (
+                  <CheckIcon className="w-4 h-4 text-green-500" />
+                ) : (
+                  <svg className="w-4 h-4 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <rect x="9" y="9" width="13" height="13" rx="2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                )}
+              </button>
+            </div>
+            {selectedIntegrationSlug && getIntegration(selectedIntegrationSlug) && (
+              <p className="mt-3 text-xs">
+                <Link
+                  href={`/integrations/${selectedIntegrationSlug}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-brand-orange hover:underline"
+                >
+                  See full {getIntegration(selectedIntegrationSlug)!.name} guide →
+                </Link>
+              </p>
+            )}
+          </div>
+
+          <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
+            <Button variant="primary" onClick={() => router.push('/')} className="min-w-[160px]">
+              Back to dashboard
+            </Button>
+            <Button variant="secondary" onClick={() => router.push(`/sites/${createdSite.id}`)} className="min-w-[160px]">
+              View {createdSite.name}
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // * Step 1: Name & domain form
   return (
     <div className="container mx-auto px-4 py-8 max-w-2xl">
       <h1 className="text-2xl font-bold mb-8 text-neutral-900 dark:text-white">