From e36c5aab91e46b7d2f0adcf7eaf6fbe6cb036941 Mon Sep 17 00:00:00 2001 From: Miroslav Mitev Date: Thu, 6 Feb 2025 13:34:58 +0200 Subject: [PATCH] Domain management: Fix redirect context on mailbox purchase (#99263) --- client/my-sites/email/add-mailboxes/index.tsx | 24 +++++------------ .../get-on-submit-new-mailboxes-handler.ts | 12 ++++++++- .../provider-cards/google-workspace-card.tsx | 3 +++ .../professional-email-card.tsx | 3 +++ client/my-sites/email/paths.ts | 24 +++++++++++++++++ client/my-sites/email/test/paths.ts | 26 +++++++++++++++++++ 6 files changed, 74 insertions(+), 18 deletions(-) diff --git a/client/my-sites/email/add-mailboxes/index.tsx b/client/my-sites/email/add-mailboxes/index.tsx index 0215c9035981a..ea8cd5a54c5ef 100644 --- a/client/my-sites/email/add-mailboxes/index.tsx +++ b/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 ) ] ) diff --git a/client/my-sites/email/email-providers-comparison/stacked/provider-cards/get-on-submit-new-mailboxes-handler.ts b/client/my-sites/email/email-providers-comparison/stacked/provider-cards/get-on-submit-new-mailboxes-handler.ts index da9ca4f63770f..8d1b54ff84774 100644 --- a/client/my-sites/email/email-providers-comparison/stacked/provider-cards/get-on-submit-new-mailboxes-handler.ts +++ b/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( () => { diff --git a/client/my-sites/email/email-providers-comparison/stacked/provider-cards/google-workspace-card.tsx b/client/my-sites/email/email-providers-comparison/stacked/provider-cards/google-workspace-card.tsx index a08ea5a8e1088..5066cc7a5736a 100644 --- a/client/my-sites/email/email-providers-comparison/stacked/provider-cards/google-workspace-card.tsx +++ b/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; diff --git a/client/my-sites/email/email-providers-comparison/stacked/provider-cards/professional-email-card.tsx b/client/my-sites/email/email-providers-comparison/stacked/provider-cards/professional-email-card.tsx index 56d15c49953da..47bbd16a392d4 100644 --- a/client/my-sites/email/email-providers-comparison/stacked/provider-cards/professional-email-card.tsx +++ b/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 = ( diff --git a/client/my-sites/email/paths.ts b/client/my-sites/email/paths.ts index cb7d7dc2bb3d9..e472a8b85ebd3 100644 --- a/client/my-sites/email/paths.ts +++ b/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`; diff --git a/client/my-sites/email/test/paths.ts b/client/my-sites/email/test/paths.ts index f0e5bb941973f..c858539f49d97 100644 --- a/client/my-sites/email/test/paths.ts +++ b/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 = 'hi@example.com'; + 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 ],