From 227c0c1411afd7a2330c164cce6778f3d0a30ce0 Mon Sep 17 00:00:00 2001
From: Emanuele Buccelli <escapemanuele@gmail.com>
Date: Tue, 10 Dec 2024 12:54:46 +0100
Subject: [PATCH] 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
---
 .../stepper/declarative-flow/onboarding.ts    |  2 +
 client/lib/url/index.ts                       |  1 +
 client/lib/url/path-to-url.ts                 | 13 ++++++
 client/lib/url/test/path-to-url.ts            | 46 +++++++++++++++++++
 client/signup/config/flows.js                 | 17 +------
 5 files changed, 64 insertions(+), 15 deletions(-)
 create mode 100644 client/lib/url/path-to-url.ts
 create mode 100644 client/lib/url/test/path-to-url.ts

diff --git a/client/landing/stepper/declarative-flow/onboarding.ts b/client/landing/stepper/declarative-flow/onboarding.ts
index f8a5893769208..ccbacbab0613c 100644
--- a/client/landing/stepper/declarative-flow/onboarding.ts
+++ b/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 {
diff --git a/client/lib/url/index.ts b/client/lib/url/index.ts
index dea2a71c13421..f947a5d585cd1 100644
--- a/client/lib/url/index.ts
+++ b/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';
diff --git a/client/lib/url/path-to-url.ts b/client/lib/url/path-to-url.ts
new file mode 100644
index 0000000000000..1d055943a9959
--- /dev/null
+++ b/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 }`;
+}
diff --git a/client/lib/url/test/path-to-url.ts b/client/lib/url/test/path-to-url.ts
new file mode 100644
index 0000000000000..0873b6c9f87d2
--- /dev/null
+++ b/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' );
+	} );
+} );
diff --git a/client/signup/config/flows.js b/client/signup/config/flows.js
index 1d914f0752c67..94e78d4866368 100644
--- a/client/signup/config/flows.js
+++ b/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(
 		{