From bc1363dbf3465713da1393be41ed618c725a97fd Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Wed, 11 Dec 2024 22:44:19 +0100 Subject: [PATCH 1/3] Do not clear flowName in step-route tracker --- .../step-route/hooks/use-step-route-tracking/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/components/step-route/hooks/use-step-route-tracking/index.tsx b/client/landing/stepper/declarative-flow/internals/components/step-route/hooks/use-step-route-tracking/index.tsx index 2adf6feda575d..bfe23f6f18844 100644 --- a/client/landing/stepper/declarative-flow/internals/components/step-route/hooks/use-step-route-tracking/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/components/step-route/hooks/use-step-route-tracking/index.tsx @@ -16,7 +16,7 @@ import kebabCase from 'calypso/landing/stepper/utils/kebabCase'; import useSnakeCasedKeys from 'calypso/landing/stepper/utils/use-snake-cased-keys'; import { recordPageView } from 'calypso/lib/analytics/page-view'; import { - getSignupCompleteFlowNameAndClear, + getSignupCompleteFlowName, getSignupCompleteStepNameAndClear, } from 'calypso/signup/storageUtils'; import { useSelector } from 'calypso/state'; @@ -78,7 +78,7 @@ export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props return; } - const signupCompleteFlowName = getSignupCompleteFlowNameAndClear(); + const signupCompleteFlowName = getSignupCompleteFlowName(); const signupCompleteStepName = getSignupCompleteStepNameAndClear(); const isReEnteringStepAfterSignupComplete = signupCompleteFlowName === flowName && signupCompleteStepName === stepSlug; From 364bc32ffdd700afbfa07774b42f50115c294eb5 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Thu, 12 Dec 2024 13:30:22 +0100 Subject: [PATCH 2/3] Update tests --- .../internals/components/step-route/test/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/components/step-route/test/index.tsx b/client/landing/stepper/declarative-flow/internals/components/step-route/test/index.tsx index 466fd5833bbc2..5aefee328371c 100644 --- a/client/landing/stepper/declarative-flow/internals/components/step-route/test/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/components/step-route/test/index.tsx @@ -12,7 +12,7 @@ import { useIntent } from 'calypso/landing/stepper/hooks/use-intent'; import { useSelectedDesign } from 'calypso/landing/stepper/hooks/use-selected-design'; import { recordPageView } from 'calypso/lib/analytics/page-view'; import { - getSignupCompleteFlowNameAndClear, + getSignupCompleteFlowName, getSignupCompleteStepNameAndClear, } from 'calypso/signup/storageUtils'; import { isUserLoggedIn } from 'calypso/state/current-user/selectors'; @@ -171,7 +171,7 @@ describe( 'StepRoute', () => { } ); it( 'records recordStepStart with additional props when the step is re-entered', () => { - ( getSignupCompleteFlowNameAndClear as jest.Mock ).mockReturnValue( 'some-flow' ); + ( getSignupCompleteFlowName as jest.Mock ).mockReturnValue( 'some-flow' ); ( getSignupCompleteStepNameAndClear as jest.Mock ).mockReturnValue( 'some-step-slug' ); render( { step: regularStep } ); @@ -187,7 +187,7 @@ describe( 'StepRoute', () => { } ); it( 'records step-complete when the step is unmounted and step-start was previously recorded', () => { - ( getSignupCompleteFlowNameAndClear as jest.Mock ).mockReturnValue( 'some-other-flow' ); + ( getSignupCompleteFlowName as jest.Mock ).mockReturnValue( 'some-other-flow' ); ( getSignupCompleteStepNameAndClear as jest.Mock ).mockReturnValue( 'some-other-step-slug' ); const { unmount } = render( { step: regularStep } ); @@ -206,7 +206,7 @@ describe( 'StepRoute', () => { it( 'records skip_step_render on start, complete and page view when the login is required and the user is not logged in', async () => { ( isUserLoggedIn as jest.Mock ).mockReturnValue( false ); - ( getSignupCompleteFlowNameAndClear as jest.Mock ).mockReturnValue( 'some-other-flow' ); + ( getSignupCompleteFlowName as jest.Mock ).mockReturnValue( 'some-other-flow' ); ( getSignupCompleteStepNameAndClear as jest.Mock ).mockReturnValue( 'some-other-step-slug' ); const { unmount } = render( { step: requiresLoginStep } ); @@ -241,7 +241,7 @@ describe( 'StepRoute', () => { } ); it( 'records skip_step_render on start, complete and page view when renderStep returns null', async () => { - ( getSignupCompleteFlowNameAndClear as jest.Mock ).mockReturnValue( 'some-other-flow' ); + ( getSignupCompleteFlowName as jest.Mock ).mockReturnValue( 'some-other-flow' ); ( getSignupCompleteStepNameAndClear as jest.Mock ).mockReturnValue( 'some-other-step-slug' ); const { unmount } = render( { step: regularStep, renderStep: () => null } ); From 701c39206104bb797c36784b08312db3ffb3e067 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Thu, 12 Dec 2024 22:28:20 +0100 Subject: [PATCH 3/3] Fix contradiction with the domain step --- .../use-is-managed-site-flow.ts | 31 ++++++++++--------- .../steps-repository/unified-plans/index.tsx | 6 +++- client/landing/stepper/hooks/use-site.ts | 4 +-- 3 files changed, 24 insertions(+), 17 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/unified-domains/use-is-managed-site-flow.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/unified-domains/use-is-managed-site-flow.ts index 9589b78a4a8de..f7f1caa751c1c 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/unified-domains/use-is-managed-site-flow.ts +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/unified-domains/use-is-managed-site-flow.ts @@ -1,15 +1,19 @@ -import { useEffect, useState } from 'react'; +import { useEffect } from 'react'; +import { useSite } from 'calypso/landing/stepper/hooks/use-site'; import { getSignupCompleteFlowName, retrieveSignupDestination, wasSignupCheckoutPageUnloaded, clearSignupDestinationCookie, getSignupCompleteSlug, + getSignupCompleteSiteID, } from 'calypso/signup/storageUtils'; export const useIsManagedSiteFlowProps = () => { - const [ props, setProps ] = useState( {} ); - const signupSlug = getSignupCompleteSlug(); + const postSignUpSiteSlugParam = getSignupCompleteSlug(); + const postSignUpSiteIdParam = getSignupCompleteSiteID(); + + const selectedSite = useSite( postSignUpSiteSlugParam || postSignUpSiteIdParam ); useEffect( () => { const signupDestinationCookieExists = retrieveSignupDestination(); @@ -21,16 +25,15 @@ export const useIsManagedSiteFlowProps = () => { clearSignupDestinationCookie(); return; } + }, [] ); - if ( signupSlug ) { - return setProps( { - selectedSite: { slug: signupSlug }, - showExampleSuggestions: false, - showSkipButton: true, - includeWordPressDotCom: false, - } ); - } - }, [ signupSlug ] ); - - return props; + if ( selectedSite ) { + return { + selectedSite, + showExampleSuggestions: false, + showSkipButton: true, + includeWordPressDotCom: false, + }; + } + return {}; }; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/index.tsx index 87837b4ef0262..68112893ef91f 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/index.tsx @@ -7,6 +7,7 @@ import { useQuery } from 'calypso/landing/stepper/hooks/use-query'; import { useSite } from 'calypso/landing/stepper/hooks/use-site'; import { useSiteSlug } from 'calypso/landing/stepper/hooks/use-site-slug'; import { ONBOARD_STORE } from 'calypso/landing/stepper/stores'; +import { getSignupCompleteSiteID, getSignupCompleteSlug } from 'calypso/signup/storageUtils'; import { useSelector } from 'calypso/state'; import { getCurrentUserName } from 'calypso/state/current-user/selectors'; import { ProvidedDependencies, StepProps } from '../../types'; @@ -44,7 +45,10 @@ export default function PlansStepAdaptor( props: StepProps ) { domainCart: domainItems, }; - const site = useSite(); + const postSignUpSiteSlugParam = getSignupCompleteSlug(); + const postSignUpSiteIdParam = getSignupCompleteSiteID(); + + const site = useSite( postSignUpSiteSlugParam || postSignUpSiteIdParam ); const customerType = useQuery().get( 'customerType' ) ?? undefined; const [ planInterval, setPlanInterval ] = useState< string | undefined >( undefined ); diff --git a/client/landing/stepper/hooks/use-site.ts b/client/landing/stepper/hooks/use-site.ts index 5437e70ccdd6c..9939d87533060 100644 --- a/client/landing/stepper/hooks/use-site.ts +++ b/client/landing/stepper/hooks/use-site.ts @@ -8,11 +8,11 @@ import { useSiteIdParam } from './use-site-id-param'; import { useSiteSlugParam } from './use-site-slug-param'; import type { SiteSelect } from '@automattic/data-stores'; -export function useSite() { +export function useSite( siteFragment?: number | string ) { const dispatch = useDispatch(); const siteSlug = useSiteSlugParam(); const siteIdParam = useSiteIdParam(); - const siteIdOrSlug = siteIdParam ?? siteSlug ?? ''; + const siteIdOrSlug = siteFragment ?? siteIdParam ?? siteSlug; const site = useSelect( ( select ) => {