From a31ebf5c9239024235bb1cf8329b2773449c08b3 Mon Sep 17 00:00:00 2001 From: Philip Jackson Date: Tue, 7 Jan 2025 19:49:49 +1300 Subject: [PATCH] Revert "Goals first: Reset onboard store when entering the flow (#97936)" (#98007) This reverts commit 9aae00eec3962a02ce867e7f0b1ee77d05eb6a0e. --- .../steps-repository/create-site/index.tsx | 5 +--- .../stepper/declarative-flow/onboarding.ts | 20 ++------------ .../declarative-flow/site-setup-flow.ts | 7 ++--- client/signup/steps/domains/index.jsx | 14 ---------- client/signup/storageUtils.js | 2 -- .../src/hooks/use-persisted-state.ts | 26 +++---------------- packages/onboarding/src/index.ts | 2 +- 7 files changed, 10 insertions(+), 66 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/create-site/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/create-site/index.tsx index eb8b558e1b21b..2db3704c18fa4 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/create-site/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/create-site/index.tsx @@ -183,10 +183,7 @@ const CreateSite: Step = function CreateSite( { navigation, flow, data } ) { //User has already reached checkout and then hit the browser back button. //In this case, site has already been created, and plan added to cart. We need to avoid to create another site. const isManageSiteFlow = Boolean( - wasSignupCheckoutPageUnloaded() && - signupDestinationCookieExists && - isReEnteringFlow && - getSignupCompleteSlug() + wasSignupCheckoutPageUnloaded() && signupDestinationCookieExists && isReEnteringFlow ); const { addTempSiteToSourceOption } = useAddTempSiteToSourceOptionMutation(); const urlQueryParams = useQuery(); diff --git a/client/landing/stepper/declarative-flow/onboarding.ts b/client/landing/stepper/declarative-flow/onboarding.ts index 03ad56bffd9d4..985e90673577d 100644 --- a/client/landing/stepper/declarative-flow/onboarding.ts +++ b/client/landing/stepper/declarative-flow/onboarding.ts @@ -1,18 +1,15 @@ import { OnboardSelect, Onboard, UserSelect } from '@automattic/data-stores'; -import { ONBOARDING_FLOW, clearStepPersistedState } from '@automattic/onboarding'; +import { ONBOARDING_FLOW } from '@automattic/onboarding'; import { useDispatch, useSelect } from '@wordpress/data'; import { addQueryArgs, getQueryArg, getQueryArgs, removeQueryArgs } from '@wordpress/url'; -import { useState, useMemo, useEffect } from 'react'; +import { useState, useMemo } from 'react'; import { SIGNUP_DOMAIN_ORIGIN } from 'calypso/lib/analytics/signup'; import { pathToUrl } from 'calypso/lib/url'; import { - clearSignupCompleteSlug, persistSignupDestination, setSignupCompleteFlowName, setSignupCompleteSlug, } from 'calypso/signup/storageUtils'; -import { useDispatch as useReduxDispatch } from 'calypso/state'; -import { setSelectedSiteId } from 'calypso/state/ui/actions'; import { STEPPER_TRACKS_EVENT_SIGNUP_START, STEPPER_TRACKS_EVENT_STEP_NAV_SUBMIT, @@ -347,19 +344,6 @@ const onboarding: Flow = { state: isLoading ? AssertConditionState.CHECKING : AssertConditionState.SUCCESS, }; }, - useSideEffect( currentStepSlug ) { - const reduxDispatch = useReduxDispatch(); - const { resetOnboardStore } = useDispatch( ONBOARD_STORE ); - - useEffect( () => { - if ( ! currentStepSlug ) { - resetOnboardStore(); - reduxDispatch( setSelectedSiteId( null ) ); - clearStepPersistedState( this.name ); - clearSignupCompleteSlug(); - } - }, [ currentStepSlug, reduxDispatch, resetOnboardStore ] ); - }, }; export default onboarding; diff --git a/client/landing/stepper/declarative-flow/site-setup-flow.ts b/client/landing/stepper/declarative-flow/site-setup-flow.ts index 5a23497976e95..4106c42350c8b 100644 --- a/client/landing/stepper/declarative-flow/site-setup-flow.ts +++ b/client/landing/stepper/declarative-flow/site-setup-flow.ts @@ -96,7 +96,6 @@ const siteSetupFlow: Flow = { }, useStepNavigation( currentStep, navigate ) { const isGoalsHoldout = useIsGoalsHoldout( currentStep ); - const isGoalsAtFrontExperiment = useGoalsAtFrontExperimentQueryParam(); const intent = useSelect( ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(), @@ -247,10 +246,8 @@ const siteSetupFlow: Flow = { navigate( 'processing' ); - if ( ! isGoalsAtFrontExperiment ) { - // Clean-up the store so that if onboard for new site will be launched it will be launched with no preselected values - resetOnboardStoreWithSkipFlags( [ 'skipPendingAction', 'skipIntent' ] ); - } + // Clean-up the store so that if onboard for new site will be launched it will be launched with no preselected values + resetOnboardStoreWithSkipFlags( [ 'skipPendingAction', 'skipIntent', 'skipSelectedDesign' ] ); }; const { getPostFlowUrl, initializeLaunchpadState } = useLaunchpadDecider( { diff --git a/client/signup/steps/domains/index.jsx b/client/signup/steps/domains/index.jsx index feef10ae620bf..0700df8411215 100644 --- a/client/signup/steps/domains/index.jsx +++ b/client/signup/steps/domains/index.jsx @@ -34,7 +34,6 @@ import { planItem, hasPlan, hasDomainRegistration, - hasPersonalPlan, getDomainsInCart, } from 'calypso/lib/cart-values/cart-items'; import { @@ -187,19 +186,6 @@ export class RenderDomainsStep extends Component { } } - componentDidUpdate( prevProps ) { - if ( prevProps?.cart?.products?.length !== this.props?.cart?.products?.length ) { - if ( - shouldUseMultipleDomainsInCart( this.props.flowName ) && - hasDomainRegistration( this.props.cart ) && - ! hasPersonalPlan( this.props.cart ) - ) { - // This call is expensive, so we only do it if the mini-cart hasDomainRegistration. - this.props.shoppingCartManager.addProductsToCart( [ this.props.multiDomainDefaultPlan ] ); - } - } - } - getLocale() { return ! this.props.userLoggedIn ? this.props.locale : ''; } diff --git a/client/signup/storageUtils.js b/client/signup/storageUtils.js index 4184fc3a07854..b914ae9509afd 100644 --- a/client/signup/storageUtils.js +++ b/client/signup/storageUtils.js @@ -39,8 +39,6 @@ export const setSignupCompleteSlug = ( value ) => ignoreFatalsForStorage( () => sessionStorage?.setItem( 'wpcom_signup_complete_site_slug', value ) ); -export const clearSignupCompleteSlug = () => - ignoreFatalsForStorage( () => sessionStorage?.removeItem( 'wpcom_signup_complete_site_slug' ) ); export const getSignupCompleteSiteID = () => ignoreFatalsForStorage( () => sessionStorage?.getItem( 'wpcom_signup_complete_site_id' ) ); export const setSignupCompleteSiteID = ( value ) => diff --git a/packages/onboarding/src/hooks/use-persisted-state.ts b/packages/onboarding/src/hooks/use-persisted-state.ts index 036c316a3dc34..e6b022aa38b8f 100644 --- a/packages/onboarding/src/hooks/use-persisted-state.ts +++ b/packages/onboarding/src/hooks/use-persisted-state.ts @@ -23,25 +23,6 @@ function getPersistedState( key: string, storage: Storage, TTL: number ) { } } -function getPersistedStateKey( flow?: string, step?: string, lang?: string, cacheKey?: string ) { - return [ VERSION, KEY, flow, step, lang, cacheKey ].filter( Boolean ).join( '-' ); -} - -/** - * Clears all persisted state created by useStepPersistedState - * @param flow The desired flow to clear - * @param storage The storage to clear (defaults to localStorage) - */ -export function clearStepPersistedState( flow?: string, storage: Storage = localStorage ): void { - const keys = Object.keys( storage ); - const persistedKeys = keys.filter( ( key ) => key.startsWith( getPersistedStateKey( flow ) ) ); - - persistedKeys.forEach( ( key ) => { - storage.removeItem( key ); - storage.removeItem( key + 'time' ); - } ); -} - type Options = { /** * The used storage, defaults to sessionStorage. @@ -55,6 +36,7 @@ type Options = { /** * A hook similar to useState, but persists the state. Uses `flow`, `step` and `lang`, and the passed key in the tree as keys. + * * @param cacheKey the cache key. It will be concatenated with the flow, step and lang. * @param defaultValue the initial value of the state. * @param options the options for the hook. @@ -64,10 +46,10 @@ export function useStepPersistedState< T >( cacheKey: string, defaultValue?: T, options: Options = { storage: localStorage, TTL: TWENTY_MINUTES } -) { +): [ T, ( newState: T ) => void ] { const match = useMatch( '/:flow/:step?/:lang?' ); const { flow = 'flow', step = 'step', lang = 'lang' } = match?.params || {}; - const key = getPersistedStateKey( flow, step, lang, cacheKey ); + const key = [ VERSION, KEY, flow, step, lang, cacheKey ].join( '-' ); const [ state, _setState ] = useState< T >( getPersistedState( key, options.storage, options.TTL ) || defaultValue @@ -81,5 +63,5 @@ export function useStepPersistedState< T >( [ _setState, key, options.storage ] ); - return [ state, setState ] as const; + return [ state, setState ]; } diff --git a/packages/onboarding/src/index.ts b/packages/onboarding/src/index.ts index 432b58c9a46ad..85b661cd9c3a9 100644 --- a/packages/onboarding/src/index.ts +++ b/packages/onboarding/src/index.ts @@ -26,7 +26,7 @@ export { default as SelectItemsAlt } from './select-items-alt'; export { default as StepContainer } from './step-container'; export { default as StepNavigationLink } from './step-navigation-link'; export { default as MShotsImage } from './mshots-image'; -export { useStepPersistedState, clearStepPersistedState } from './hooks/use-persisted-state'; +export { useStepPersistedState } from './hooks/use-persisted-state'; export * from './navigator'; export { default as Notice } from './notice'; export { default as SelectCardCheckbox } from './select-card-checkbox';