Goals first: Enable back button in the login step for the DIFM and Im…

…port flows (#97722)

* Accept back_url query parameter in signup/user

* Accept back_url query parameter in setup/hosted-site-migration

* Add back_url to DIFM and hosted-site-migration flows

* Move back_url conciliation within redux connect function

* Update implementation so it uses back_to instead of back_url

* Push back button to the right so it doesn't conflict with the WP Logo

* Update unit tests

client/landing/stepper/declarative-flow/hosted-site-migration-flow.ts

@@ -1,11 +1,22 @@
 import { HOSTED_SITE_MIGRATION_FLOW } from '@automattic/onboarding';
+import { useSearchParams } from 'react-router-dom';
 import { type Flow } from './internals/types';
 import siteMigration from './site-migration-flow';
 
 const hostedSiteMigrationFlow: Flow = {
 	...siteMigration,
 	variantSlug: HOSTED_SITE_MIGRATION_FLOW,
 	isSignupFlow: true,
+	useLoginParams() {
+		const [ searchParams ] = useSearchParams();
+		const backTo = searchParams.get( 'back_to' );
+
+		return {
+			extraQueryParams: {
+				...( backTo ? { back_to: backTo } : {} ),
+			},
+		};
+	},
 };
 
 export default hostedSiteMigrationFlow;

client/landing/stepper/declarative-flow/onboarding.ts

@@ -122,6 +122,11 @@ const onboarding: Flow = {
 		const submit = async ( providedDependencies: ProvidedDependencies = {} ) => {
 			switch ( currentStepSlug ) {
 				case 'goals': {
+					const goalsUrl =
+						locale && locale !== 'en'
+							? `/setup/onboarding/goals/${ locale }`
+							: '/setup/onboarding/goals';
+
 					const { intent } = providedDependencies;
 
 					switch ( intent ) {
@@ -130,7 +135,11 @@ const onboarding: Flow = {
 								locale && locale !== 'en'
 									? `/setup/hosted-site-migration/${ locale }`
 									: '/setup/hosted-site-migration';
-							return window.location.assign( migrationFlowLink );
+							return window.location.assign(
+								addQueryArgs( migrationFlowLink, {
+									back_to: goalsUrl,
+								} )
+							);
 						}
 
 						case SiteIntent.DIFM: {
@@ -139,7 +148,11 @@ const onboarding: Flow = {
 									? `/start/do-it-for-me/${ locale }`
 									: '/start/do-it-for-me';
 
-							return window.location.assign( difmFlowLink );
+							return window.location.assign(
+								addQueryArgs( difmFlowLink, {
+									back_to: goalsUrl,
+								} )
+							);
 						}
 
 						default: {

client/landing/stepper/declarative-flow/test/onboarding-flow.tsx

@@ -49,7 +49,9 @@ describe( 'Onboarding Flow', () => {
 				},
 			} );
 
-			expect( window.location.assign ).toHaveBeenCalledWith( '/setup/hosted-site-migration' );
+			expect( window.location.assign ).toHaveBeenCalledWith(
+				'/setup/hosted-site-migration?back_to=%2Fsetup%2Fonboarding%2Fgoals'
+			);
 		} );
 
 		it( 'should redirect to DIFM flow when intent is DIFM', async () => {
@@ -62,7 +64,9 @@ describe( 'Onboarding Flow', () => {
 				},
 			} );
 
-			expect( window.location.assign ).toHaveBeenCalledWith( '/start/do-it-for-me' );
+			expect( window.location.assign ).toHaveBeenCalledWith(
+				'/start/do-it-for-me?back_to=%2Fsetup%2Fonboarding%2Fgoals'
+			);
 		} );
 
 		it( 'should navigate to designSetup step for other intents', async () => {

client/signup/step-wrapper/index.jsx

@@ -9,6 +9,7 @@ import { usePresalesChat } from 'calypso/lib/presales-chat';
 import flows from 'calypso/signup/config/flows';
 import NavigationLink from 'calypso/signup/navigation-link';
 import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
+import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import { isReskinnedFlow } from '../is-flow';
 import './style.scss';
 
@@ -67,7 +68,7 @@ class StepWrapper extends Component {
 				backUrl={ this.props.backUrl }
 				rel={ this.props.isExternalBackUrl ? 'external' : '' }
 				labelText={ this.props.backLabelText }
-				allowBackFirstStep={ this.props.allowBackFirstStep }
+				allowBackFirstStep={ this.props.allowBackFirstStep || !! this.props.backUrl }
 				backIcon={ isReskinnedFlow( this.props.flowName ) ? 'chevron-left' : undefined }
 				queryParams={ this.props.queryParams }
 			/>
@@ -265,8 +266,14 @@ class StepWrapper extends Component {
 	}
 }
 
-export default connect( ( state ) => {
+export default connect( ( state, ownProps ) => {
+	const backToParam = getCurrentQueryArguments( state )?.back_to?.toString();
+	const backTo = backToParam?.startsWith( '/' ) ? backToParam : undefined;
+
+	const backUrl = ownProps.backUrl ?? backTo;
+
 	return {
+		backUrl,
 		userLoggedIn: isUserLoggedIn( state ),
 	};
 } )( localize( StepWrapper ) );

client/signup/step-wrapper/style.scss

@@ -57,7 +57,7 @@
 	@mixin unstick {
 		position: absolute;
 		top: 9px;
-		left: 11px;
+		left: 56px;
 		right: 16px;
 		padding: 0;
 		border: none;

client/signup/steps/user/index.jsx

@@ -773,6 +773,7 @@ export class UserStep extends Component {
 const ConnectedUser = connect(
 	( state ) => {
 		const oauth2Client = getCurrentOAuth2Client( state );
+
 		return {
 			oauth2Client: oauth2Client,
 			suggestedUsername: getSuggestedUsername( state ),