fix: update and replace onboarding modal

.eslintrc.json

@@ -0,0 +1,75 @@
+{
+	"root": true,
+	"extends": [
+		"plugin:@wordpress/eslint-plugin/recommended-with-formatting",
+		"plugin:import/recommended",
+		"plugin:import/typescript",
+		"plugin:eslint-comments/recommended"
+	],
+	"plugins": [],
+	"env": {
+		"browser": true
+	},
+	"settings": {
+		"import/resolver": {
+			"node": {
+				"extensions": [".js", ".jsx", ".ts", ".tsx"]
+			}
+		}
+	},
+	"globals": {
+		"_": true,
+		"patternSyncData": true
+	},
+	"rules": {
+		"jsdoc/check-indentation": "error",
+		"no-shadow": "warn",
+		/* WordPress surfaces snake_case keys and globals; allow them */
+		"camelcase": "off",
+		"import/no-unresolved": "off",
+		"import/extensions": "off",
+		"import/no-extraneous-dependencies": "off",
+		"import/default": "off",
+		"import/namespace": "off",
+		"import/no-named-as-default": "off",
+		"import/no-named-as-default-member": "off",
+		"eslint-comments/disable-enable-pair": "off",
+		"eslint-comments/no-unlimited-disable": "error",
+		"jsx-a11y/label-has-associated-control": "off",
+		"no-unused-vars": "off" // TODO: Fix this for flagging the types from functions.
+	},
+	"overrides": [
+		{
+			"files": ["**/*.{ts,tsx}"],
+			"parser": "@typescript-eslint/parser",
+			"parserOptions": {
+				"ecmaFeatures": { "jsx": true },
+				"sourceType": "module"
+			},
+			"rules": {
+				"no-undef": "off"
+			}
+		},
+		{
+			"files": ["**/*.d.ts"],
+			"parser": "@typescript-eslint/parser",
+			"rules": {
+				"no-undef": "off",
+				"import/no-unresolved": "off",
+				"@typescript-eslint/triple-slash-reference": "off"
+			}
+		},
+		{
+			"files": [
+				"**/__tests__/**/*.js",
+				"**/test/*.js",
+				"**/?(*.)test.js",
+				"tests/js/**/*.js"
+			],
+			"extends": ["plugin:jest/all"],
+			"rules": {
+				// Add Rules for Jest here
+			}
+		}
+	]
+}

assets/src/admin/onboarding/index.tsx

@@ -0,0 +1,21 @@
+import { createRoot } from 'react-dom/client';
+import OnboardingScreen, { type SiteType } from './page';
+
+interface OneSearchPluginGlobal {
+	nonce: string;
+	site_type: SiteType | '';
+	setup_url: string;
+}
+
+declare global {
+	interface Window {
+		OneSearchPluginGlobal: OneSearchPluginGlobal;
+	}
+}
+
+// Render to the target element.
+const target = document.getElementById( 'onesearch-site-selection-modal' );
+if ( target ) {
+	const root = createRoot( target );
+	root.render( <OnboardingScreen /> );
+}

assets/src/admin/onboarding/page.tsx

@@ -0,0 +1,136 @@
+import { useState, useEffect } from 'react';
+import apiFetch from '@wordpress/api-fetch';
+import { __ } from '@wordpress/i18n';
+import {
+	Card,
+	CardHeader,
+	CardBody,
+	Notice,
+	Button,
+	SelectControl,
+} from '@wordpress/components';
+
+const BRAND_SITE = 'brand-site';
+const GOVERNING_SITE = 'governing-site';
+
+export type SiteType = typeof BRAND_SITE | typeof GOVERNING_SITE;
+
+interface NoticeState {
+	type: 'success' | 'error' | 'warning' | 'info';
+	message: string;
+}
+
+const SiteTypeSelector = ( { value, setSiteType }: {
+	value: SiteType | '';
+	setSiteType: ( v: SiteType | '' ) => void;
+} ) => (
+	<SelectControl
+		label={ __( 'Site Type', 'onesearch' ) }
+		value={ value }
+		help={ __(
+			"Choose your site's primary purpose. This setting cannot be changed later and affects available features and configurations.",
+			'onesearch',
+		) }
+		onChange={ ( v ) => {
+			setSiteType( v );
+		} }
+		options={ [
+			{ label: __( 'Select…', 'onesearch' ), value: '' },
+			{ label: __( 'Brand Site', 'onesearch' ), value: BRAND_SITE },
+			{ label: __( 'Governing site', 'onesearch' ), value: GOVERNING_SITE },
+		] }
+	/>
+);
+
+const OnboardingScreen = () => {
+	// WordPress provides snake_case keys here. Using them intentionally. eslint-disable-next-line camelcase
+	const { nonce, setup_url, site_type } = window.OneSearchPluginGlobal;
+
+	const [ siteType, setSiteType ] = useState<SiteType | ''>( site_type || '' );
+	const [ notice, setNotice ] = useState<NoticeState | null>( null );
+	const [ isSaving, setIsSaving ] = useState<boolean>( false );
+
+	useEffect( () => {
+		apiFetch.use( apiFetch.createNonceMiddleware( nonce ) );
+		apiFetch<{ onesearch_site_type?: SiteType }>( { path: '/wp/v2/settings' } )
+			.then( ( settings ) => {
+				if ( settings?.onesearch_site_type ) {
+					setSiteType( settings.onesearch_site_type );
+				}
+			} )
+			.catch( () => {
+				setNotice( {
+					type: 'error',
+					message: __( 'Error fetching site type.', 'onesearch' ),
+				} );
+			} );
+	}, [ nonce ] );
+
+	const handleSiteTypeChange = async ( value: SiteType | '' ) => {
+		// Optimistically set site type.
+		setSiteType( value );
+		setIsSaving( true );
+
+		try {
+			await apiFetch<{ onesearch_site_type?: SiteType }>( {
+				path: '/wp/v2/settings',
+				method: 'POST',
+				data: { onesearch_site_type: value },
+			} ).then( ( settings ) => {
+				if ( ! settings?.onesearch_site_type ) {
+					throw new Error( 'No site type in response' );
+				}
+
+				setSiteType( settings.onesearch_site_type );
+
+				// Redirect user to setup page.
+				if ( setup_url ) {
+					window.location.href = setup_url;
+				}
+			} );
+		} catch {
+			setNotice( {
+				type: 'error',
+				message: __( 'Error setting site type.', 'onesearch' ),
+			} );
+		} finally {
+			setIsSaving( false );
+		}
+	};
+
+	return (
+		<Card>
+			{ !! notice?.message && (
+				<Notice
+					status={ notice?.type ?? 'success' }
+					isDismissible={ true }
+					onRemove={ () => setNotice( null ) }
+				>
+					{ notice?.message }
+				</Notice>
+			) }
+
+			<CardHeader>
+				<h2>{ __( 'OneSearch', 'onesearch' ) }</h2>
+			</CardHeader>
+
+			<CardBody className="onesearch-onboarding-page">
+				<SiteTypeSelector
+					value={ siteType }
+					setSiteType={ setSiteType }
+				/>
+				<Button
+					variant="primary"
+					onClick={ () => handleSiteTypeChange( siteType ) }
+					disabled={ isSaving || ! siteType }
+					style={ { marginTop: '1.5rem' } }
+					className={ isSaving ? 'is-busy' : '' }
+				>
+					{ __( 'Select Current Site Type', 'onesearch' ) }
+				</Button>
+			</CardBody>
+		</Card>
+	);
+};
+
+export default OnboardingScreen;