diff --git a/client/signup/controller.js b/client/signup/controller.js index 9fcc5607097bfe..c44960fe155ae2 100644 --- a/client/signup/controller.js +++ b/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' ) && diff --git a/client/signup/main.jsx b/client/signup/main.jsx index ec98dfd51114a5..8a12c07953e55d 100644 --- a/client/signup/main.jsx +++ b/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 ); diff --git a/client/signup/storageUtils.js b/client/signup/storageUtils.js index 7872b225c11308..c60e0c1938a914 100644 --- a/client/signup/storageUtils.js +++ b/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' )