Domain management: Fix redirect context on mailbox purchase (#99263)

client/my-sites/email/add-mailboxes/index.tsx

@@ -18,12 +18,6 @@ import { GOOGLE_PROVIDER_NAME } from 'calypso/lib/gsuite/constants';
 import { getTitanProductName } from 'calypso/lib/titan';
 import { TITAN_PROVIDER_NAME } from 'calypso/lib/titan/constants';
 import useCartKey from 'calypso/my-sites/checkout/use-cart-key';
-import {
-	domainManagementAllEmailRoot,
-	domainSiteContextRoot,
-	isUnderDomainManagementAll,
-	isUnderDomainSiteContext,
-} from 'calypso/my-sites/domains/paths';
 import AddEmailAddressesCardPlaceholder from 'calypso/my-sites/email/add-mailboxes/add-users-placeholder';
 import EmailProviderPricingNotice from 'calypso/my-sites/email/add-mailboxes/email-provider-pricing-notice';
 import {
@@ -47,6 +41,7 @@ import { EmailProvider } from 'calypso/my-sites/email/form/mailboxes/types';
 import { usePasswordResetEmailField } from 'calypso/my-sites/email/hooks/use-password-reset-email-field';
 import { MAILBOXES_SOURCE } from 'calypso/my-sites/email/mailboxes/constants';
 import {
+	getEmailCheckoutPath,
 	getEmailManagementPath,
 	getMailboxesPath,
 	getTitanSetUpMailboxPath,
@@ -325,17 +320,12 @@ const MailboxesForm = ( {
 		recordContinueEvent( { canContinue: true } );
 		setIsAddingToCart( true );
 
-		const selectedSiteSlug = selectedSite?.slug ?? '';
-		let checkoutPath = '/checkout/' + selectedSiteSlug;
-
-		if ( isUnderDomainManagementAll( currentRoute ) ) {
-			const newEmail = mailboxOperations.mailboxes[ 0 ].getAsCartItem().email;
-			const redirectTo = isUnderDomainSiteContext( currentRoute )
-				? `${ domainSiteContextRoot() }/email/${ selectedDomainName }/${ selectedSiteSlug }?new-email=${ newEmail }`
-				: `${ domainManagementAllEmailRoot() }/${ selectedDomainName }/${ selectedSiteSlug }?new-email=${ newEmail }`;
-
-			checkoutPath += '?redirect_to=' + encodeURIComponent( redirectTo );
-		}
+		const checkoutPath = getEmailCheckoutPath(
+			selectedSite?.slug ?? '',
+			selectedDomainName,
+			currentRoute,
+			mailboxOperations.mailboxes[ 0 ].getAsCartItem().email
+		);
 
 		cartManager
 			.addProductsToCart( [ getCartItems( mailboxOperations.mailboxes, mailProperties ) ] )

client/my-sites/email/email-providers-comparison/stacked/provider-cards/get-on-submit-new-mailboxes-handler.ts

@@ -12,6 +12,7 @@ import {
 } from 'calypso/my-sites/email/form/mailboxes/components/utilities/get-email-product-properties';
 import { MailboxOperations } from 'calypso/my-sites/email/form/mailboxes/components/utilities/mailbox-operations';
 import { EmailProvider } from 'calypso/my-sites/email/form/mailboxes/types';
+import { getEmailCheckoutPath } from 'calypso/my-sites/email/paths';
 import { errorNotice } from 'calypso/state/notices/actions';
 import { ProductListItem } from 'calypso/state/products-list/selectors/get-products-list';
 
@@ -26,6 +27,7 @@ export type GetOnSubmitNewMailboxesHandlerProps = {
 	shoppingCartManager: ShoppingCartManagerActions;
 	siteSlug: string;
 	source: string;
+	currentRoute: string;
 };
 
 const getEmailProductPropertiesForUpsell = (
@@ -51,6 +53,7 @@ const getOnSubmitNewMailboxesHandler =
 		shoppingCartManager,
 		siteSlug,
 		source,
+		currentRoute,
 	}: GetOnSubmitNewMailboxesHandlerProps ) =>
 	async ( mailboxOperations: MailboxOperations ) => {
 		setAddingToCart( true );
@@ -93,10 +96,17 @@ const getOnSubmitNewMailboxesHandler =
 			  )
 			: getEmailProductPropertiesForUpsell( emailProduct, numberOfMailboxes );
 
+		const checkoutPath = getEmailCheckoutPath(
+			siteSlug,
+			domain.name,
+			currentRoute,
+			mailboxOperations.mailboxes[ 0 ].getAsCartItem().email
+		);
+
 		shoppingCartManager
 			.addProductsToCart( [ getCartItems( mailboxOperations.mailboxes, emailProperties ) ] )
 			.then( () => {
-				page( '/checkout/' + siteSlug );
+				page( checkoutPath );
 			} )
 			.finally( () => setAddingToCart( false ) )
 			.catch( () => {

client/my-sites/email/email-providers-comparison/stacked/provider-cards/google-workspace-card.tsx

@@ -25,6 +25,7 @@ import { EmailProvider } from 'calypso/my-sites/email/form/mailboxes/types';
 import { usePasswordResetEmailField } from 'calypso/my-sites/email/hooks/use-password-reset-email-field';
 import { useDispatch, useSelector } from 'calypso/state';
 import canUserPurchaseGSuite from 'calypso/state/selectors/can-user-purchase-gsuite';
+import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import { getDomainsBySiteId } from 'calypso/state/sites/domains/selectors';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import type { TranslateResult } from 'i18n-calypso';
@@ -73,6 +74,7 @@ const GoogleWorkspaceCard = ( props: EmailProvidersStackedCardProps ) => {
 		domains,
 		selectedDomainName: selectedDomainName,
 	} );
+	const currentRoute = useSelector( getCurrentRoute );
 
 	const cartKey = useCartKey();
 	const dispatch = useDispatch();
@@ -123,6 +125,7 @@ const GoogleWorkspaceCard = ( props: EmailProvidersStackedCardProps ) => {
 		setAddingToCart,
 		shoppingCartManager,
 		siteSlug,
+		currentRoute,
 	} );
 
 	googleWorkspace.onExpandedChange = onExpandedChange;

client/my-sites/email/email-providers-comparison/stacked/provider-cards/professional-email-card.tsx

@@ -23,6 +23,7 @@ import {
 import { EmailProvider } from 'calypso/my-sites/email/form/mailboxes/types';
 import { usePasswordResetEmailField } from 'calypso/my-sites/email/hooks/use-password-reset-email-field';
 import { useDispatch, useSelector } from 'calypso/state';
+import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import { getDomainsBySiteId } from 'calypso/state/sites/domains/selectors';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import type { EmailProvidersStackedCardProps, ProviderCardProps } from './provider-card-props';
@@ -81,6 +82,7 @@ const ProfessionalEmailCard = ( props: EmailProvidersStackedCardProps ) => {
 		domains,
 		selectedDomainName: selectedDomainName,
 	} );
+	const currentRoute = useSelector( getCurrentRoute );
 
 	const provider = EmailProvider.Titan;
 	const emailProduct = useSelector( ( state ) =>
@@ -123,6 +125,7 @@ const ProfessionalEmailCard = ( props: EmailProvidersStackedCardProps ) => {
 		setAddingToCart,
 		shoppingCartManager,
 		siteSlug,
+		currentRoute,
 	} );
 
 	professionalEmail.formFields = (

client/my-sites/email/paths.ts

@@ -5,6 +5,7 @@ import {
 	isUnderDomainSiteContext,
 	domainManagementRoot,
 	domainSiteContextRoot,
+	domainManagementAllEmailRoot,
 } from 'calypso/my-sites/domains/paths';
 
 type QueryStringParameters = { [ key: string ]: string | undefined };
@@ -245,5 +246,28 @@ export const getProfessionalEmailCheckoutUpsellPath = (
 	receiptId: number | string
 ) => `/checkout/offer-professional-email/${ domainName }/${ receiptId }/${ siteName }`;
 
+export const getEmailCheckoutPath = (
+	siteName: string,
+	domainName: string,
+	relativeTo?: string,
+	newEmail?: string
+): string => {
+	let checkoutPath = '/checkout/' + siteName;
+
+	if ( isUnderDomainManagementAll( relativeTo ) ) {
+		let redirectTo = isUnderDomainSiteContext( relativeTo )
+			? `${ domainSiteContextRoot() }/email/${ domainName }/${ siteName }`
+			: `${ domainManagementAllEmailRoot() }/${ domainName }/${ siteName }`;
+
+		if ( newEmail ) {
+			redirectTo += `?new-email=${ newEmail }`;
+		}
+
+		checkoutPath += '?redirect_to=' + encodeURIComponent( redirectTo );
+	}
+
+	return checkoutPath;
+};
+
 export const getMailboxesPath = ( siteName?: string | null ) =>
 	siteName ? `/mailboxes/${ siteName }` : `/mailboxes`;

client/my-sites/email/test/paths.ts

@@ -20,6 +20,7 @@ import {
 	getProfessionalEmailCheckoutUpsellPath,
 	getMailboxesPath,
 	isUnderEmailManagementAll,
+	getEmailCheckoutPath,
 } from '../paths';
 
 const siteName = 'hello.wordpress.com';
@@ -217,6 +218,31 @@ describe( 'path helper functions', () => {
 		);
 	} );
 
+	it( 'getEmailCheckoutPath', () => {
+		const email = '[email protected]';
+		const relativeToDomainManagement = '/domains/manage/all/email';
+		const relativeToSiteDomain = '/overview/site-domain/email';
+
+		expect( getEmailCheckoutPath( siteName, domainName ) ).toEqual( `/checkout/${ siteName }` );
+		expect( getEmailCheckoutPath( siteName, domainName, relativeToDomainManagement ) ).toEqual(
+			`/checkout/${ siteName }?redirect_to=${ encodeURIComponent(
+				`${ relativeToDomainManagement }/${ domainName }/${ siteName }`
+			) }`
+		);
+		expect(
+			getEmailCheckoutPath( siteName, domainName, relativeToDomainManagement, email )
+		).toEqual(
+			`/checkout/${ siteName }?redirect_to=${ encodeURIComponent(
+				`${ relativeToDomainManagement }/${ domainName }/${ siteName }?new-email=${ email }`
+			) }`
+		);
+		expect( getEmailCheckoutPath( siteName, domainName, relativeToSiteDomain, email ) ).toEqual(
+			`/checkout/${ siteName }?redirect_to=${ encodeURIComponent(
+				`${ relativeToSiteDomain }/${ domainName }/${ siteName }?new-email=${ email }`
+			) }`
+		);
+	} );
+
 	it.each( [
 		[ '/domains', false ],
 		[ '/email', false ],