Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stepper: Fix back button in user step #97786

Closed
wants to merge 1 commit into from
Closed

Stepper: Fix back button in user step #97786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion client/landing/stepper/declarative-flow/internals/hooks/use-flow-navigation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
21 changes: 11 additions & 10 deletions client/landing/stepper/declarative-flow/internals/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -168,28 +169,28 @@ 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 (
<StepComponent
navigation={ {
submit() {
navigate( firstAuthWalledStep.slug, undefined, true );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It still made the flow become linear after the auth. The user will always be redirected to the first step that requires auth. However, there may be another path after the auth. For example, if the user comes from A2 step, we have to redirect them to B2 step after the auth. But the B1 step may be the first step that requires auth so that the user still goes to B2 step even if they are from the A2 step.

A1 -> auth -> B1
A2 -> auth -> B2

},
...( lastPreAuthWalledStep && {
goBack() {
navigate( lastPreAuthWalledStep.slug, undefined, true );
},
} ),
...( ! flowStartsWithAuth &&
hasHistory && {
goBack() {
navigate( -1 );
},
} ),
} }
flow={ flow.name }
variantSlug={ flow.variantSlug }
Expand Down
5 changes: 4 additions & 1 deletion client/landing/stepper/declarative-flow/internals/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading