Unify add site props

src/hooks/use-add-site.ts

@@ -35,7 +35,7 @@ export function useAddSite( options: UseAddSiteOptions = {} ) {
 	const defaultPhpVersion = useRootSelector( selectDefaultPhpVersion );
 	const defaultWordPressVersion = useRootSelector( selectDefaultWordPressVersion );
 	const [ error, setError ] = useState( '' );
-	const [ siteName, setSiteName ] = useState< string | null >( null );
+	const [ siteName, setSiteName ] = useState< string >( '' );
 	const [ sitePath, setSitePath ] = useState( '' );
 	const [ proposedSitePath, setProposedSitePath ] = useState( '' );
 	const [ doesPathContainWordPress, setDoesPathContainWordPress ] = useState( false );

src/modules/add-site/components/create-site-form.tsx

@@ -10,8 +10,10 @@ import FolderIcon from 'src/components/folder-icon';
 import { LearnMoreLink } from 'src/components/learn-more';
 import TextControlComponent from 'src/components/text-control';
 import { WPVersionSelector } from 'src/components/wp-version-selector';
+import { useAddSite } from 'src/hooks/use-add-site';
 import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
+import { getLocalizedLink } from 'src/lib/get-localized-link';
 import { AllowedPHPVersion } from 'src/lib/wordpress-provider/constants';
 import { useRootSelector } from 'src/stores';
 import { useCheckCertificateTrustQuery } from 'src/stores/certificate-trust-api';
@@ -35,27 +37,8 @@ interface SiteFormErrorProps {
 }
 
 interface CreateSiteFormProps {
-	siteName: string;
-	setSiteName: ( name: string ) => void;
-	sitePath?: string;
-	onSelectPath?: () => void;
-	error: string;
-	doesPathContainWordPress?: boolean;
+	addSiteProps: ReturnType< typeof useAddSite >;
 	onSubmit: ( event: FormEvent ) => void;
-	useCustomDomain?: boolean;
-	setUseCustomDomain?: ( use: boolean ) => void;
-	customDomain?: string | null;
-	setCustomDomain?: ( domain: string ) => void;
-	customDomainError?: string;
-	phpVersion: AllowedPHPVersion;
-	setPhpVersion: ( version: AllowedPHPVersion ) => void;
-	useHttps?: boolean;
-	setUseHttps?: ( use: boolean ) => void;
-	enableHttps?: boolean;
-	setEnableHttps?: ( use: boolean ) => void;
-	wpVersion: string;
-	setWpVersion: ( version: string ) => void;
-	blueprintPreferredVersions?: { php?: string; wp?: string };
 }
 
 const SiteFormError = ( { error, tipMessage = '', className = '' }: SiteFormErrorProps ) => {
@@ -141,28 +124,28 @@ function FormPathInputComponent( {
 	);
 }
 
-export const CreateSiteForm = ( {
-	siteName,
-	setSiteName,
-	phpVersion,
-	setPhpVersion,
-	wpVersion,
-	setWpVersion,
-	sitePath = '',
-	onSelectPath,
-	error,
-	onSubmit,
-	doesPathContainWordPress = false,
-	useCustomDomain,
-	setUseCustomDomain,
-	customDomain = null,
-	setCustomDomain,
-	customDomainError,
-	enableHttps,
-	setEnableHttps,
-	blueprintPreferredVersions,
-}: CreateSiteFormProps ) => {
+export const CreateSiteForm = ( { addSiteProps, onSubmit }: CreateSiteFormProps ) => {
 	const { __, isRTL } = useI18n();
+	const {
+		useCustomDomain,
+		setUseCustomDomain,
+		customDomain,
+		setCustomDomain,
+		customDomainError,
+		enableHttps,
+		setEnableHttps,
+		blueprintPreferredVersions,
+		phpVersion,
+		wpVersion,
+		siteName,
+		sitePath,
+		doesPathContainWordPress,
+		error,
+		handleSiteNameChange,
+		handlePathSelectorClick: onSelectPath,
+		setPhpVersion,
+		setWpVersion,
+	} = addSiteProps;
 	const { data: isCertificateTrusted } = useCheckCertificateTrustQuery();
 	const defaultWordPressVersion = useRootSelector( selectDefaultWordPressVersion );
 	const allowedPhpVersions = useRootSelector( selectAllowedPhpVersions );
@@ -206,7 +189,7 @@ export const CreateSiteForm = ( {
 				<label className="flex flex-col gap-1.5 leading-4 mb-6">
 					<span className="font-semibold">{ __( 'Site name' ) }</span>
 					<TextControlComponent
-						onChange={ setSiteName }
+						onChange={ handleSiteNameChange }
 						value={ siteName }
 						onKeyDown={ ( event ) => {
 							if ( event.key === 'Enter' ) {
@@ -331,51 +314,43 @@ export const CreateSiteForm = ( {
 									</Notice>
 								) }
 
-								{ setUseCustomDomain && setCustomDomain && (
-									<div className="flex items-center gap-2 mt-4">
-										<input
-											type="checkbox"
-											id="use-custom-domain"
-											checked={ useCustomDomain }
-											onChange={ ( e ) => setUseCustomDomain( e.target.checked ) }
-										/>
-										<label htmlFor="use-custom-domain">{ __( 'Use custom domain' ) }</label>
-									</div>
-								) }
+								<div className="flex items-center gap-2 mt-4">
+									<input
+										type="checkbox"
+										id="use-custom-domain"
+										checked={ useCustomDomain }
+										onChange={ ( e ) => setUseCustomDomain( e.target.checked ) }
+									/>
+									<label htmlFor="use-custom-domain">{ __( 'Use custom domain' ) }</label>
+								</div>
 
-								{ setUseCustomDomain && setCustomDomain && (
-									<div className="text-a8c-gray-50 text-xs mt-2">
-										{ __( 'Your system password will be required to set up the domain.' ) }
-									</div>
-								) }
+								<div className="text-a8c-gray-50 text-xs mt-2">
+									{ __( 'Your system password will be required to set up the domain.' ) }
+								</div>
 
-								{ useCustomDomain && setCustomDomain && (
-									<div className="flex flex-col gap-2 mt-4">
-										<label htmlFor="custom-domain" className="font-semibold">
-											{ __( 'Domain name' ) }
-										</label>
-										<TextControlComponent
-											id="custom-domain"
-											value={ customDomain !== null ? customDomain : generatedDomainName }
-											onChange={ setCustomDomain }
-										/>
-										{ customDomainError && <SiteFormError error={ customDomainError } /> }
-									</div>
-								) }
+								<div className="flex flex-col gap-2 mt-4">
+									<label htmlFor="custom-domain" className="font-semibold">
+										{ __( 'Domain name' ) }
+									</label>
+									<TextControlComponent
+										id="custom-domain"
+										value={ customDomain !== null ? customDomain : generatedDomainName }
+										onChange={ setCustomDomain }
+									/>
+									{ customDomainError && <SiteFormError error={ customDomainError } /> }
+								</div>
 
-								{ useCustomDomain && setEnableHttps && (
-									<div className="flex items-center gap-2 mt-4">
-										<input
-											type="checkbox"
-											id="enable-https"
-											checked={ enableHttps }
-											onChange={ ( e ) => setEnableHttps( e.target.checked ) }
-										/>
-										<label htmlFor="enable-https">{ __( 'Enable HTTPS' ) }</label>
-									</div>
-								) }
+								<div className="flex items-center gap-2 mt-4">
+									<input
+										type="checkbox"
+										id="enable-https"
+										checked={ enableHttps }
+										onChange={ ( e ) => setEnableHttps( e.target.checked ) }
+									/>
+									<label htmlFor="enable-https">{ __( 'Enable HTTPS' ) }</label>
+								</div>
 
-								{ ! isCertificateTrusted && useCustomDomain && setEnableHttps && (
+								{ ! isCertificateTrusted && (
 									<div className="text-a8c-gray-50 text-xs mt-2">
 										{ __(
 											'You need to manually add the Studio root certificate authority to your keychain and trust it to enable HTTPS.'

src/modules/add-site/components/create-site.tsx

@@ -4,51 +4,15 @@ import {
 } from '@wordpress/components';
 import { useI18n } from '@wordpress/react-i18n';
 import { FormEvent } from 'react';
+import { useAddSite } from 'src/hooks/use-add-site';
 import { CreateSiteForm } from 'src/modules/add-site/components/create-site-form';
 
 interface CreateSiteProps {
-	siteName: string | null;
-	handleSiteNameChange: ( name: string ) => Promise< void >;
-	phpVersion: string;
-	setPhpVersion: ( version: string ) => void;
-	wpVersion: string;
-	setWpVersion: ( version: string ) => void;
-	sitePath: string;
-	handlePathSelectorClick: () => void;
-	error: string;
+	addSiteProps: ReturnType< typeof useAddSite >;
 	handleSubmit: ( event: FormEvent ) => void;
-	doesPathContainWordPress: boolean;
-	useCustomDomain: boolean;
-	setUseCustomDomain: ( use: boolean ) => void;
-	customDomain: string | null;
-	setCustomDomain: ( domain: string | null ) => void;
-	customDomainError: string;
-	enableHttps: boolean;
-	setEnableHttps: ( enable: boolean ) => void;
-	blueprintPreferredVersions?: { php?: string; wp?: string };
 }
 
-export default function CreateSite( {
-	siteName,
-	handleSiteNameChange,
-	phpVersion,
-	setPhpVersion,
-	wpVersion,
-	setWpVersion,
-	sitePath,
-	handlePathSelectorClick,
-	error,
-	handleSubmit,
-	doesPathContainWordPress,
-	useCustomDomain,
-	setUseCustomDomain,
-	customDomain,
-	setCustomDomain,
-	customDomainError,
-	enableHttps,
-	setEnableHttps,
-	blueprintPreferredVersions,
-}: CreateSiteProps ) {
+export default function CreateSite( { addSiteProps, handleSubmit }: CreateSiteProps ) {
 	const { __ } = useI18n();
 
 	return (
@@ -57,27 +21,7 @@ export default function CreateSite( {
 				{ __( 'Add a site' ) }
 			</Heading>
 
-			<CreateSiteForm
-				siteName={ siteName || '' }
-				setSiteName={ ( name ) => void handleSiteNameChange( name ) }
-				phpVersion={ phpVersion }
-				setPhpVersion={ setPhpVersion }
-				wpVersion={ wpVersion }
-				setWpVersion={ setWpVersion }
-				sitePath={ sitePath }
-				onSelectPath={ handlePathSelectorClick }
-				error={ error }
-				onSubmit={ handleSubmit }
-				doesPathContainWordPress={ doesPathContainWordPress }
-				useCustomDomain={ useCustomDomain }
-				setUseCustomDomain={ setUseCustomDomain }
-				customDomain={ customDomain }
-				setCustomDomain={ setCustomDomain }
-				customDomainError={ customDomainError }
-				enableHttps={ enableHttps }
-				setEnableHttps={ setEnableHttps }
-				blueprintPreferredVersions={ blueprintPreferredVersions }
-			/>
+			<CreateSiteForm addSiteProps={ addSiteProps } onSubmit={ handleSubmit } />
 		</VStack>
 	);
 }