import { Plug, PlugZap, Trash2 } from 'lucide-react'; import { useState } from 'react'; import { Head, useForm } from '@inertiajs/react'; import { router } from '@inertiajs/react'; import ConnectionStatusBadge from '@/Components/Connections/ConnectionStatusBadge'; import InputError from '@/Components/InputError'; import EditorialPageHeader from '@/Components/layout/EditorialPageHeader'; import { Alert, AlertDescription, AlertTitle } from '@/Components/ui/alert'; import { Button } from '@/Components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'; import { ConfirmDialog } from '@/Components/ui/confirm-dialog'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import { Textarea } from '@/Components/ui/textarea'; import { useFlashToasts } from '@/hooks/useFlashToasts'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { formatDateTime } from '@/lib/format'; import type { PageProps, SiteSummary } from '@/types'; interface Ga4ConnectionData { property_id: string; sync_status: string; sync_error: string | null; last_synced_at: string | null; last_sync_failed_at: string | null; } interface Props extends PageProps { site: SiteSummary; has_connection: boolean; ga4_connection: Ga4ConnectionData | null; } export default function Ga4Connection({ site, has_connection, ga4_connection }: Props) { useFlashToasts(); const [showDisconnect, setShowDisconnect] = useState(false); const [testingConnection, setTestingConnection] = useState(false); const connectForm = useForm({ property_id: '', api_key: '', service_account_json: '', }); const disconnectForm = useForm({}); function handleConnect(e: React.FormEvent) { e.preventDefault(); connectForm.post(route('sites.settings.ga4.store', site.id), { onSuccess: () => connectForm.reset(), }); } function handleDisconnect() { disconnectForm.delete(route('sites.settings.ga4.destroy', site.id), { onFinish: () => setShowDisconnect(false), }); } /** * GA4-CONNECT-REACHABLE: Test-connection action. * Fire-and-forget (gotcha #11 — never await router.*). */ function handleTestConnection() { setTestingConnection(true); router.post( route('sites.settings.ga4.test', site.id), {}, { onFinish: () => setTestingConnection(false), onError: () => setTestingConnection(false), }, ); } return ( <>
{/* ── Current connection status ─────────────────────────────────── */} {has_connection && ga4_connection ? (
GA4 Property Connected Property: {ga4_connection.property_id}
{/* GA4-CONNECT-REACHABLE: status badge + honest pending copy */}
Status: {ga4_connection.sync_status === 'pending' && ( (Pending verification — click “Test connection” to verify credentials) )}
{/* Test connection CTA — GA4-CONNECT-REACHABLE honesty gate */} Test connection {/* Last synced timestamp */} {ga4_connection.last_synced_at && (

Last synced: {formatDateTime(ga4_connection.last_synced_at)}

)} {/* Sync error — shown when probe or nightly import fails */} {ga4_connection.sync_status === 'failed' && ga4_connection.sync_error && ( Connection failed {ga4_connection.sync_error}

Update your credentials below and click “Test connection” to retry.

)} ) : ( Not connected Connect a GA4 property below. After saving, click “Test connection” to verify your credentials before the nightly import runs. )} {/* ── Connect / update form ─────────────────────────────────────── */} {has_connection ? 'Update credentials' : 'Connect a GA4 property'} Provide your GA4 Property ID and either an API key or a service account JSON. Credentials are encrypted at rest.
{/* Property ID */}
connectForm.setData('property_id', e.target.value)} />
{/* API key */}
connectForm.setData('api_key', e.target.value)} />
{/* Service account JSON */}