Signup: Submit the domains step on checkout back button click (#94859)

* Submit the domains step on checkout back button click.

* Use a cookie to retrieve dependencies.

* Use session storage to correctly persist domains data.

* Limit persisted data to onboarding flow.

* Clean up code.

* Clean up code.

* Fix the paid domain showing up again.

* Rename DomainsDependencies and clear storage in all flows.

client/signup/controller.js

@@ -13,6 +13,7 @@ import { updateDependencies } from 'calypso/state/signup/actions';
 import { getSignupDependencyStore } from 'calypso/state/signup/dependency-store/selectors';
 import { setCurrentFlowName, setPreviousFlowName } from 'calypso/state/signup/flow/actions';
 import { getCurrentFlowName } from 'calypso/state/signup/flow/selectors';
+import { submitSignupStep } from 'calypso/state/signup/progress/actions';
 import { getSignupProgress } from 'calypso/state/signup/progress/selectors';
 import { requestSite } from 'calypso/state/sites/actions';
 import { getSiteId } from 'calypso/state/sites/selectors';
@@ -23,6 +24,7 @@ import { isReskinnedFlow } from './is-flow';
 import SignupComponent from './main';
 import {
 	retrieveSignupDestination,
+	getDomainsDependencies,
 	clearSignupDestinationCookie,
 	getSignupCompleteFlowName,
 	wasSignupCheckoutPageUnloaded,
@@ -37,7 +39,6 @@ import {
 	getFlowPageTitle,
 	shouldForceLogin,
 } from './utils';
-
 /**
  * Constants
  */
@@ -305,6 +306,21 @@ export default {
 		const isManageSiteFlow =
 			! excludeFromManageSiteFlows && ! isAddNewSiteFlow && isReEnteringSignupViaBrowserBack;
 
+		// Hydrate the store with domains dependencies from session storage,
+		// only in the onboarding flow.
+		const domainsDependencies = getDomainsDependencies();
+		if (
+			domainsDependencies &&
+			isManageSiteFlow &&
+			flowName === 'onboarding' &&
+			stepName !== 'domains'
+		) {
+			const { step, dependencies } = JSON.parse( domainsDependencies );
+			if ( step && dependencies ) {
+				context.store.dispatch( submitSignupStep( step, dependencies ) );
+			}
+		}
+
 		// If the flow has siteId or siteSlug as query dependencies, we should not clear selected site id
 		if (
 			! providesDependenciesInQuery?.includes( 'siteId' ) &&

client/signup/main.jsx

@@ -83,6 +83,8 @@ import { addP2SignupClassName } from './controller';
 import { isReskinnedFlow, isP2Flow } from './is-flow';
 import {
 	persistSignupDestination,
+	setDomainsDependencies,
+	clearDomainsDependencies,
 	setSignupCompleteSlug,
 	getSignupCompleteSlug,
 	setSignupCompleteFlowName,
@@ -268,7 +270,7 @@ class Signup extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { flowName, stepName, sitePlanName, sitePlanSlug } = this.props;
+		const { flowName, stepName, sitePlanName, sitePlanSlug, signupDependencies } = this.props;
 
 		if (
 			( flowName !== prevProps.flowName || stepName !== prevProps.stepName ) &&
@@ -315,6 +317,13 @@ class Signup extends Component {
 			this.handleLogin( this.props.signupDependencies, stepUrl, false );
 			this.handleDestination( this.props.signupDependencies, stepUrl, this.props.flowName );
 		}
+
+		const { domainItem: prevDomainItem } = prevProps.signupDependencies;
+
+		// Clear domains dependencies when the domains data is updated.
+		if ( stepName === 'domains' && signupDependencies.domainItem !== prevDomainItem ) {
+			clearDomainsDependencies();
+		}
 	}
 
 	getRecordPropsFromFlow = () => {
@@ -406,6 +415,24 @@ class Signup extends Component {
 			setSignupCompleteFlowName( this.props.flowName );
 		}
 
+		// Persist current domains data in the onboarding flow.
+		if ( this.props.flowName === 'onboarding' ) {
+			const { domainItem, siteUrl, domainCart } = dependencies;
+			const { stepSectionName } = this.props;
+
+			setDomainsDependencies( {
+				step: {
+					stepName: 'domains',
+					domainItem,
+					siteUrl,
+					isPurchasingItem: true,
+					stepSectionName,
+					domainCart,
+				},
+				dependencies: { domainItem, siteUrl, domainCart },
+			} );
+		}
+
 		this.handleFlowComplete( dependencies, filteredDestination );
 
 		this.handleLogin( dependencies, filteredDestination );

client/signup/storageUtils.js

@@ -41,6 +41,15 @@ export const setSignupCompleteSlug = ( value ) =>
 	ignoreFatalsForSessionStorage( () =>
 		sessionStorage?.setItem( 'wpcom_signup_complete_site_slug', value )
 	);
+export const setDomainsDependencies = ( dependencies ) => {
+	ignoreFatalsForSessionStorage( () =>
+		sessionStorage.setItem( 'wpcom_domains_dependencies', JSON.stringify( dependencies ) )
+	);
+};
+export const getDomainsDependencies = () =>
+	ignoreFatalsForSessionStorage( () => sessionStorage?.getItem( 'wpcom_domains_dependencies' ) );
+export const clearDomainsDependencies = () =>
+	ignoreFatalsForSessionStorage( () => sessionStorage?.removeItem( 'wpcom_domains_dependencies' ) );
 export const wasSignupCheckoutPageUnloaded = () =>
 	ignoreFatalsForSessionStorage( () =>
 		sessionStorage?.getItem( 'was_signup_checkout_page_unloaded' )