diff --git a/client/landing/stepper/declarative-flow/internals/hooks/use-flow-navigation/index.tsx b/client/landing/stepper/declarative-flow/internals/hooks/use-flow-navigation/index.tsx index 7c73789802f66..f2a6d4ebc5802 100644 --- a/client/landing/stepper/declarative-flow/internals/hooks/use-flow-navigation/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/hooks/use-flow-navigation/index.tsx @@ -42,7 +42,12 @@ export const useFlowNavigation = (): FlowNavigation => { const [ currentSearchParams ] = useSearchParams(); const customNavigate = useCallback< Navigate< StepperStep[] > >( - ( nextStep: string, extraData = {}, replace = false ) => { + ( nextStep: string | number, extraData = {}, replace = false ) => { + // Incase of navigating to `-1` to go back. + if ( typeof nextStep === 'number' ) { + return navigate( nextStep ); + } + const hasQueryParams = nextStep.includes( '?' ); // Get the latest search params from the current location diff --git a/client/landing/stepper/declarative-flow/internals/index.tsx b/client/landing/stepper/declarative-flow/internals/index.tsx index cf96a19784b51..b61b61bd88bdb 100644 --- a/client/landing/stepper/declarative-flow/internals/index.tsx +++ b/client/landing/stepper/declarative-flow/internals/index.tsx @@ -4,7 +4,7 @@ import { useI18n } from '@wordpress/react-i18n'; import React, { lazy, useEffect } from 'react'; import Modal from 'react-modal'; import { generatePath, useParams } from 'react-router'; -import { Route, Routes } from 'react-router-dom'; +import { Route, Routes, useLocation } from 'react-router-dom'; import DocumentHead from 'calypso/components/data/document-head'; import { STEPPER_INTERNAL_STORE } from 'calypso/landing/stepper/stores'; import AsyncCheckoutModal from 'calypso/my-sites/checkout/modal/async'; @@ -72,6 +72,7 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => { const isLoggedIn = useSelector( isUserLoggedIn ); const { lang = null } = useParams(); const isValidStep = params.step != null && stepPaths.includes( params.step ); + const location = useLocation(); // Start tracking performance for this step. useStartStepperPerformanceTracking( params.flow || '', currentStepRoute ); @@ -168,16 +169,15 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => { step: firstAuthWalledStep.slug, lang: lang === 'en' || isLoggedIn ? null : lang, } ); + const signupUrl = generatePath( '/setup/:flow/:step/:lang?', { flow: flow.name, step: 'user', lang: lang === 'en' || isLoggedIn ? null : lang, } ); - const lastPreAuthWalledStepIndex = - flowSteps.findIndex( ( step ) => step.slug === 'user' ) - 1; - const lastPreAuthWalledStep = - lastPreAuthWalledStepIndex < 0 ? null : flowSteps[ lastPreAuthWalledStepIndex ]; + const flowStartsWithAuth = flowSteps[ 0 ].slug === 'user'; + const hasHistory = location.key !== 'default'; return ( = ( { flow } ) => { submit() { navigate( firstAuthWalledStep.slug, undefined, true ); }, - ...( lastPreAuthWalledStep && { - goBack() { - navigate( lastPreAuthWalledStep.slug, undefined, true ); - }, - } ), + ...( ! flowStartsWithAuth && + hasHistory && { + goBack() { + navigate( -1 ); + }, + } ), } } flow={ flow.name } variantSlug={ flow.variantSlug } diff --git a/client/landing/stepper/declarative-flow/internals/types.ts b/client/landing/stepper/declarative-flow/internals/types.ts index 5608f989c2e16..7923233ebfd7a 100644 --- a/client/landing/stepper/declarative-flow/internals/types.ts +++ b/client/landing/stepper/declarative-flow/internals/types.ts @@ -86,7 +86,10 @@ export interface AsyncUserStep extends AsyncStepperStep { export type StepperStep = DeprecatedStepperStep | AsyncStepperStep | AsyncUserStep; export type Navigate< FlowSteps extends StepperStep[] > = ( - stepName: FlowSteps[ number ][ 'slug' ] | `${ FlowSteps[ number ][ 'slug' ] }?${ string }`, + stepName: + | FlowSteps[ number ][ 'slug' ] + | `${ FlowSteps[ number ][ 'slug' ] }?${ string }` + | number, extraData?: any, /** * If true, the current step will be replaced in the history stack.