/** * Splash Screen Component. * * Displays when user is not authenticated and needs to connect to Sideconvo. * Left panel: branding, headline, API Key input, notice. * Right panel: full-bleed platform iframe. * * @package Sideconvo */ import { useState } from '@wordpress/element'; import { useAuth } from '../../contexts/AuthContext'; import { useSettings } from '../../contexts/SettingsContext'; import { useViewMode } from '../../contexts/ViewModeContext'; import './splash-screen.css'; // Sideconvo Logo SVG const SideconvoLogo = ( ); // Info Icon SVG const InfoIcon = ( ); /** * Splash Screen component. * * @return {JSX.Element} Splash screen component. */ interface SplashScreenProps { /** When true the platform iframe is suppressed (API key validation in progress). */ isValidating?: boolean; /** The API key being validated from the URL (auto-expands the input section). */ validatingApiKey?: string; } export default function SplashScreen( { isValidating = false, validatingApiKey = '' }: SplashScreenProps ) { const { saveApiKey } = useAuth(); const { showNotification } = useSettings(); const { isRTL } = useViewMode(); const [apiKey, setApiKey] = useState( () => ( isValidating && validatingApiKey ) ? validatingApiKey : '' ); const [isSaving, setIsSaving] = useState( () => isValidating && !! validatingApiKey ); const [errorMessage, setErrorMessage] = useState(''); const [showApiKey, setShowApiKey] = useState( () => isValidating && !! validatingApiKey ); const toastPosition = isRTL ? 'top-left' : 'top-right'; // Build platform signup iframe URL with query params. const platformUrl = ((window as any).sideconvoData?.platformUrl || '').replace(/\/$/, ''); const rawSiteUrl = (window as any).sideconvoData?.siteUrl || (window as any).sideconvoData?.siteDomain || ''; const siteDomain = rawSiteUrl.replace(/^https?:\/\//, '').replace(/:\d+$/, '').replace(/^localhost$/, 'localhost.com'); const siteId = (window as any).sideconvoData?.siteId || ''; const pluginVersion = (window as any).sideconvoData?.pluginVersion || ''; const indexedCount = (window as any).sideconvoData?.indexedCount || 0; const siteIdParam = siteId ? `&site_id=${encodeURIComponent(siteId)}` : ''; const indexedCountParam = indexedCount > 0 ? `&indexed_count=${indexedCount}` : ''; const iframeUrl = `${platformUrl}/#/signup?site_url=${encodeURIComponent(siteDomain)}${siteIdParam}${indexedCountParam}&plugin_name=sideconvo-wp&plugin_version=${encodeURIComponent(pluginVersion)}`; const handleContinue = async () => { if (!apiKey.trim()) { setErrorMessage('API Key is required'); return; } if (apiKey.trim().length < 20) { setErrorMessage('Invalid API Key format'); return; } setIsSaving(true); setErrorMessage(''); const result = await saveApiKey(apiKey); if (result === true) { showNotification( 'success', 'API Key validated and saved successfully!', toastPosition ); } else { setErrorMessage( typeof result === 'string' ? result : 'Failed to validate API Key. Please check and try again.' ); setIsSaving(false); } }; const handleClear = () => { setApiKey(''); setErrorMessage(''); }; return (

{/* Left Panel */}

{/* Logo */}

{SideconvoLogo}

{/* Header */}

Connect your WordPress site

{/* Toggle */} {/* API Key Input */} {showApiKey && (

API Key

{ setApiKey(e.target.value); if (errorMessage) setErrorMessage(''); }} disabled={isSaving} /> {apiKey && !isSaving && ( )}

{errorMessage && (

{errorMessage}

)}

)} {/* Notice */}

{InfoIcon}

For Staging & Development Sites

If you use a different domain name for your staging or development site, add it in your dashboard under Allowed Origins in Site Preferences.

{/* Right Panel — suppressed while validating to avoid loading the iframe */}

{ isValidating ? (

Validating your API key…

) : (