Stepper: Leave checkout bring you to site-setup in onboarding (#97244)

* Leave cart bring you to site-setup in onboarding

* Do not touch Start

* Use function already in Start, adds tests

* Renamed test

* Fix tests

* Unused code

* Add skippedCheckout

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

@@ -4,6 +4,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { addQueryArgs, getQueryArg, getQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { useState } from 'react';
 import { SIGNUP_DOMAIN_ORIGIN } from 'calypso/lib/analytics/signup';
+import { pathToUrl } from 'calypso/lib/url';
 import {
 	persistSignupDestination,
 	setSignupCompleteFlowName,
@@ -219,6 +220,7 @@ const onboarding: Flow = {
 							addQueryArgs( `/checkout/${ encodeURIComponent( siteSlug ) }`, {
 								redirect_to: destination,
 								signup: 1,
+								checkoutBackUrl: pathToUrl( addQueryArgs( destination, { skippedCheckout: 1 } ) ),
 							} )
 						);
 					} else {

client/lib/url/index.ts

@@ -11,3 +11,4 @@ export { default as isHttps } from './is-https';
 export { addSchemeIfMissing, setUrlScheme } from './scheme-utils';
 export { decodeURIIfValid, decodeURIComponentIfValid } from './decode-utils';
 export { default as resolveRelativePath } from './resolve-relative-path';
+export { pathToUrl } from './path-to-url';

client/lib/url/path-to-url.ts

@@ -0,0 +1,13 @@
+import config from '@automattic/calypso-config';
+
+export function pathToUrl( path: string ) {
+	if ( config( 'env' ) !== 'production' ) {
+		const protocol = config( 'protocol' ) ?? 'https';
+		const port = config( 'port' ) ? ':' + config( 'port' ) : '';
+		const hostName = config( 'hostname' );
+
+		return `${ protocol }://${ hostName }${ port }${ path }`;
+	}
+
+	return `https://${ config( 'hostname' ) }${ path }`;
+}

client/lib/url/test/path-to-url.ts

@@ -0,0 +1,46 @@
+import config from '@automattic/calypso-config';
+import { pathToUrl } from '../path-to-url';
+
+jest.mock( '@automattic/calypso-config', () => jest.fn() );
+
+const mockConfig = config as unknown as jest.Mock;
+
+describe( 'pathToUrl', () => {
+	beforeEach( () => {
+		mockConfig.mockReset();
+	} );
+
+	test( 'should return production URL', () => {
+		mockConfig.mockImplementation( ( key: string ) => {
+			switch ( key ) {
+				case 'env':
+					return 'production';
+				case 'hostname':
+					return 'wordpress.com';
+				default:
+					return undefined;
+			}
+		} );
+
+		expect( pathToUrl( '/start' ) ).toBe( 'https://wordpress.com/start' );
+	} );
+
+	test( 'should return development URL', () => {
+		mockConfig.mockImplementation( ( key: string ) => {
+			switch ( key ) {
+				case 'env':
+					return 'development';
+				case 'protocol':
+					return 'http';
+				case 'hostname':
+					return 'calypso.localhost';
+				case 'port':
+					return '3000';
+				default:
+					return undefined;
+			}
+		} );
+
+		expect( pathToUrl( '/start' ) ).toBe( 'http://calypso.localhost:3000/start' );
+	} );
+} );

client/signup/config/flows.js

@@ -1,4 +1,3 @@
-import config from '@automattic/calypso-config';
 import { getPlan, TYPE_ECOMMERCE, TYPE_BUSINESS } from '@automattic/calypso-products/';
 import {
 	PREMIUM_THEME,
@@ -12,22 +11,10 @@ import { isURL } from '@wordpress/url';
 import { get, includes, reject } from 'lodash';
 import { getPlanCartItem } from 'calypso/lib/cart-values/cart-items';
 import { getQueryArgs } from 'calypso/lib/query-args';
-import { addQueryArgs } from 'calypso/lib/url';
+import { addQueryArgs, pathToUrl } from 'calypso/lib/url';
 import { generateFlows } from 'calypso/signup/config/flows-pure';
 import stepConfig from './steps';
 
-function constructBackUrlFromPath( path ) {
-	if ( config( 'env' ) !== 'production' ) {
-		const protocol = config( 'protocol' ) ?? 'https';
-		const port = config( 'port' ) ? ':' + config( 'port' ) : '';
-		const hostName = config( 'hostname' );
-
-		return `${ protocol }://${ hostName }${ port }${ path }`;
-	}
-
-	return `https://${ config( 'hostname' ) }${ path }`;
-}
-
 function getCheckoutUrl( dependencies, localeSlug, flowName, destination ) {
 	let checkoutURL = `/checkout/${ dependencies.siteSlug }`;
 
@@ -47,7 +34,7 @@ function getCheckoutUrl( dependencies, localeSlug, flowName, destination ) {
 	// the domain only flow has special rule. Ideally they should also be configurable in flows-pure.
 	const checkoutBackUrl = isURL( destination )
 		? destination
-		: constructBackUrlFromPath( isDomainOnly ? `/start/${ flowName }/domain-only` : destination );
+		: pathToUrl( isDomainOnly ? `/start/${ flowName }/domain-only` : destination );
 
 	return addQueryArgs(
 		{