Domain Search Rewrite: Make sure Start flows behave correctly

client/components/domains/use-my-domain/style.scss

@@ -9,7 +9,7 @@
 	flex-direction: column;
 	padding: 36px 24px;
 	background-color: inherit;
-	& .card {
+	& .card, &.card {
 		box-shadow: none;
 	}
 

client/components/domains/use-my-domain/transfer-or-connect/style.scss

@@ -15,6 +15,7 @@
 		// Specificity increase to override Card background color loaded later in the cascade.
 		&.domain-transfer-or-connect__content {
 			background-color: transparent;
+			box-shadow: none;
 		}
 
 		.option-content {

client/components/domains/wpcom-domain-search/index.tsx

@@ -15,25 +15,10 @@ type DomainSearchProps = Omit< ComponentProps< typeof DomainSearch >, 'cart' | '
 	flowAllowsMultipleDomainsInCart: boolean;
 };
 
-const SESSION_STORAGE_QUERY_KEY = 'domain-search-query';
-
-const getSessionStorageQuery = () => {
-	try {
-		return sessionStorage.getItem( SESSION_STORAGE_QUERY_KEY ) ?? '';
-	} catch {
-		return '';
-	}
-};
-
-const setSessionStorageQuery = ( query: string ) => {
-	sessionStorage.setItem( SESSION_STORAGE_QUERY_KEY, query );
-};
-
 const DomainSearchWithCart = ( {
 	currentSiteId,
 	currentSiteUrl,
 	flowName,
-	initialQuery: externalInitialQuery,
 	config: externalConfig,
 	isFirstDomainFreeForFirstYear,
 	flowAllowsMultipleDomainsInCart,
@@ -45,24 +30,12 @@ const DomainSearchWithCart = ( {
 	const { cart, isNextDomainFree, items } = useWPCOMShoppingCartForDomainSearch( {
 		cartKey,
 		flowName,
-		isFirstDomainFreeForFirstYear: isFirstDomainFreeForFirstYear ?? false,
+		isFirstDomainFreeForFirstYear: isFirstDomainFreeForFirstYear || false,
 		flowAllowsMultipleDomainsInCart,
 		onContinue,
 		onAddDomainToCart,
 	} );
 
-	const initialQuery = useMemo( () => {
-		if ( externalInitialQuery ) {
-			return externalInitialQuery;
-		}
-
-		if ( currentSiteUrl ) {
-			return new URL( currentSiteUrl ).host.replace( /\.(wordpress|wpcomstaging)\.com$/, '' );
-		}
-
-		return getSessionStorageQuery();
-	}, [ externalInitialQuery, currentSiteUrl ] );
-
 	const cartItemsLength = cart.items.length;
 
 	const config = useMemo( () => {
@@ -80,7 +53,7 @@ const DomainSearchWithCart = ( {
 		return {
 			...props.events,
 			onQueryChange: ( query: string ) => {
-				setSessionStorageQuery( query );
+				props.events?.onQueryChange?.( query );
 			},
 			onContinue: () => {
 				props.events?.onContinue?.( items );
@@ -95,7 +68,6 @@ const DomainSearchWithCart = ( {
 			config={ config }
 			cart={ cart }
 			events={ events }
-			initialQuery={ initialQuery }
 		/>
 	);
 };

client/components/domains/wpcom-domain-search/use-query-handler.ts

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+const SESSION_STORAGE_QUERY_KEY = 'domain-search-query';
+
+const getSessionStorageQuery = () => {
+	try {
+		return sessionStorage.getItem( SESSION_STORAGE_QUERY_KEY ) ?? undefined;
+	} catch {
+		return undefined;
+	}
+};
+
+const setSessionStorageQuery = ( query: string ) => {
+	sessionStorage.setItem( SESSION_STORAGE_QUERY_KEY, query );
+};
+
+export const useQueryHandler = ( {
+	initialQuery: externalInitialQuery,
+	currentSiteUrl,
+}: {
+	initialQuery?: string;
+	currentSiteUrl?: string;
+} ) => {
+	const [ localQuery, setLocalQuery ] = useState< string | undefined >( () => {
+		if ( externalInitialQuery ) {
+			return externalInitialQuery;
+		}
+
+		if ( currentSiteUrl ) {
+			return new URL( currentSiteUrl ).host.replace( /\.(wordpress|wpcomstaging)\.com$/, '' );
+		}
+
+		return getSessionStorageQuery();
+	} );
+
+	return {
+		query: localQuery,
+		setQuery: ( query: string ) => {
+			setLocalQuery( query );
+			setSessionStorageQuery( query );
+		},
+	};
+};

client/landing/stepper/declarative-flow/internals/steps-repository/domain-search/index.tsx

@@ -11,9 +11,11 @@ import {
 	StepContainer,
 } from '@automattic/onboarding';
 import { __ } from '@wordpress/i18n';
+import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
 import { WPCOMDomainSearch } from 'calypso/components/domains/wpcom-domain-search';
 import { FreeDomainForAYearPromo } from 'calypso/components/domains/wpcom-domain-search/free-domain-for-a-year-promo';
+import { useQueryHandler } from 'calypso/components/domains/wpcom-domain-search/use-query-handler';
 import FormattedHeader from 'calypso/components/formatted-header';
 import { SIGNUP_DOMAIN_ORIGIN } from 'calypso/lib/analytics/signup';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
@@ -51,11 +53,21 @@ type StepSubmission = {
 const DomainSearchStep: StepType< {
 	submits: UseMyDomain | StepSubmission;
 } > = function DomainSearchStep( { navigation, flow } ) {
+	const translate = useTranslate();
+
 	const site = useSite();
 	const siteSlug = useSiteSlugParam();
 	const initialQuery = useQuery().get( 'new' ) ?? '';
 	const tldQuery = useQuery().get( 'tld' );
 
+	// eslint-disable-next-line no-nested-ternary
+	const currentSiteUrl = site?.URL ? site.URL : siteSlug ? `https://${ siteSlug }` : undefined;
+
+	const { query, setQuery } = useQueryHandler( {
+		initialQuery,
+		currentSiteUrl,
+	} );
+
 	const config = useMemo( () => {
 		const allowedTlds = tldQuery?.split( ',' ) ?? [];
 
@@ -83,6 +95,7 @@ const DomainSearchStep: StepType< {
 
 	const events = useMemo( () => {
 		return {
+			onQueryChange: setQuery,
 			onMoveDomainToSiteClick( otherSiteDomain: string, domainName: string ) {
 				window.location.assign(
 					domainManagementTransferToOtherSite( otherSiteDomain, domainName )
@@ -121,7 +134,7 @@ const DomainSearchStep: StepType< {
 				} );
 			},
 		};
-	}, [ submit ] );
+	}, [ submit, setQuery ] );
 
 	const slots = useMemo( () => {
 		return {
@@ -165,11 +178,10 @@ const DomainSearchStep: StepType< {
 					: 'domain-search--step-container'
 			}
 			currentSiteId={ site?.ID }
-			// eslint-disable-next-line no-nested-ternary
-			currentSiteUrl={ site?.URL ? site.URL : siteSlug ? `https://${ siteSlug }` : undefined }
+			currentSiteUrl={ currentSiteUrl }
 			flowName={ flow }
 			config={ config }
-			initialQuery={ initialQuery }
+			query={ query }
 			isFirstDomainFreeForFirstYear={ isOnboardingFlow( flow ) || isDomainFlow( flow ) }
 			events={ events }
 			flowAllowsMultipleDomainsInCart={
@@ -187,6 +199,13 @@ const DomainSearchStep: StepType< {
 						leftElement={
 							navigation.goBack ? <Step.BackButton onClick={ navigation.goBack } /> : undefined
 						}
+						rightElement={
+							query && config.allowsUsingOwnDomain ? (
+								<Step.LinkButton onClick={ () => events.onExternalDomainClick( query ) }>
+									{ translate( 'Use a domain I already own' ) }
+								</Step.LinkButton>
+							) : undefined
+						}
 					/>
 				}
 				columnWidth={ 10 }

client/my-sites/domains/domain-search/index.tsx

@@ -5,6 +5,7 @@ import { type ResponseCartProduct, useShoppingCart } from '@automattic/shopping-
 import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
 import { WPCOMDomainSearch } from 'calypso/components/domains/wpcom-domain-search';
+import { useQueryHandler } from 'calypso/components/domains/wpcom-domain-search/use-query-handler';
 import FormattedHeader from 'calypso/components/formatted-header';
 import Main from 'calypso/components/main';
 import BodySectionCssClass from 'calypso/layout/body-section-css-class';
@@ -56,8 +57,17 @@ export default function DomainSearch() {
 
 	const selectedSiteSlug = selectedSite?.slug;
 
+	const initialQuery = queryArguments?.suggestion?.toString() ?? '';
+	const currentSiteUrl = selectedSite?.URL;
+
+	const { query, setQuery } = useQueryHandler( {
+		initialQuery,
+		currentSiteUrl,
+	} );
+
 	const events = useMemo( () => {
 		return {
+			onQueryChange: setQuery,
 			onMoveDomainToSiteClick( otherSiteDomain: string, domainName: string ) {
 				page( domainManagementTransferToOtherSite( otherSiteDomain, domainName ) );
 			},
@@ -81,19 +91,18 @@ export default function DomainSearch() {
 				}
 			},
 		};
-	}, [ selectedSiteSlug ] );
+	}, [ selectedSiteSlug, setQuery ] );
 
 	const currentRoute = useSelector( getCurrentRoute );
-	const query = useSelector( getCurrentQueryArguments );
 
-	const isFromMyHome = query?.from === 'my-home';
+	const isFromMyHome = queryArguments?.from === 'my-home';
 
 	const getBackButtonHref = () => {
 		// If we have the from query param, we should use that as the back button href
 		if ( isFromMyHome ) {
 			return `/home/${ selectedSiteSlug }`;
-		} else if ( query?.redirect_to ) {
-			return query.redirect_to.toString();
+		} else if ( queryArguments?.redirect_to ) {
+			return queryArguments.redirect_to.toString();
 		}
 
 		return domainManagementList( selectedSiteSlug ?? undefined, currentRoute );
@@ -112,10 +121,10 @@ export default function DomainSearch() {
 			<WPCOMDomainSearch
 				className="domain-search--calypso"
 				currentSiteId={ selectedSite?.ID }
-				currentSiteUrl={ selectedSite?.URL }
+				currentSiteUrl={ currentSiteUrl }
 				flowName={ FLOW_NAME }
-				initialQuery={ queryArguments?.suggestion?.toString() ?? '' }
 				config={ config }
+				query={ query }
 				events={ events }
 				flowAllowsMultipleDomainsInCart
 			/>