Domain management: Create add new mailbox subpage (#97847)

* Create add mailbox custom header component * Add subpage key class and update AddMailbox comp style * Extend AddMailbox component to support different use cases * Register new AddMailbox subpage * Update path to support all-domain context * Fix placeholder layout * Redirect back to emails page after checkout * Add missing new-email param --------- Co-authored-by: Paulo Cruz <[email protected]>
Automattic · Jan 7, 2025 · c43256e · c43256e
1 parent a38d693
commit c43256e
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 10 deletions.
diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/headers/add-mailbox-header.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/headers/add-mailbox-header.tsx
@@ -0,0 +1,41 @@
+import { useTranslate } from 'i18n-calypso';
+import NavigationHeader from 'calypso/components/navigation-header';
+import {
+	domainManagementAllEmailRoot,
+	domainManagementOverviewRoot,
+} from 'calypso/my-sites/domains/paths';
+import { CustomHeaderComponentType } from './custom-header-component-type';
+
+const AddMailboxHeader: CustomHeaderComponentType = ( {
+	selectedDomainName,
+	selectedSiteSlug,
+} ) => {
+	const translate = useTranslate();
+	return (
+		<>
+			<NavigationHeader
+				className="navigation-header__breadcrumb"
+				navigationItems={ [
+					{
+						label: selectedDomainName,
+						href: `${ domainManagementOverviewRoot() }/${ selectedDomainName }/${ selectedSiteSlug }`,
+					},
+					{
+						label: 'Emails',
+						href: `${ domainManagementAllEmailRoot() }/${ selectedDomainName }/${ selectedSiteSlug }`,
+					},
+					{
+						label: translate( 'Add new mailbox' ),
+					},
+				] }
+			/>
+			<NavigationHeader
+				className="navigation-header__title"
+				title={ translate( 'Add new Mailboxes' ) }
+				subtitle={ translate( 'Integrated email solution with powerful features.' ) }
+			/>
+		</>
+	);
+};
+
+export default AddMailboxHeader;
diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/index.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/index.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import NavigationHeader from 'calypso/components/navigation-header';
 import { domainManagementAllOverview } from 'calypso/my-sites/domains/paths';
 import { getSubpageParams } from './subpages';
@@ -15,7 +16,7 @@ const SubpageWrapper = ( { children, subpageKey, siteName, domainName }: Subpage
 
 	if ( CustomHeader ) {
 		return (
-			<div className="subpage-wrapper">
+			<div className={ clsx( 'subpage-wrapper', `subpage-wrapper--${ subpageKey }` ) }>
 				<CustomHeader
 					selectedDomainName={ domainName }
 					selectedSiteSlug={ siteName }
@@ -38,7 +39,7 @@ const SubpageWrapper = ( { children, subpageKey, siteName, domainName }: Subpage
 		];
 
 		return (
-			<div className="subpage-wrapper">
+			<div className={ clsx( 'subpage-wrapper', `subpage-wrapper--${ subpageKey }` ) }>
 				<NavigationHeader
 					className="subpage-wrapper__header"
 					navigationItems={ breadcrumbItems }

diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/style.scss b/client/my-sites/domains/domain-management/subpage-wrapper/style.scss
@@ -163,6 +163,35 @@
             }
         }
     }
+
+	&.subpage-wrapper--add-mailbox {
+		.card-heading.new-mailbox-list__numbered-heading,
+		.section-header__label {
+			color: $studio-gray-100;
+			font-size: 1rem;
+			font-weight: 500;
+			margin-bottom: 1rem;
+		}
+
+		.card.new-mailbox {
+			border-radius: 4px;
+		}
+
+        .new-mailbox-list__separator {
+            margin-inline: -24px;
+            background: $studio-gray-5;
+        }
+
+        .vertical-nav {
+            .card.is-placeholder:first-child {
+                border-radius: 4px 4px 0 0;
+            }
+
+            .card.is-placeholder:last-child {
+                border-radius: 0 0 4px 4px;
+            }
+        }
+	}
 }
 
 .is-bulk-all-domains-page .layout__content .main {

diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx
@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import AddForwardingEmailHeader from './headers/add-fowarding-email-header';
+import MailboxHeader from './headers/add-mailbox-header';
 import CompareEmailProvidersHeader from './headers/compare-email-providers';
 import { CustomHeaderComponentType } from './headers/custom-header-component-type';
 import DnsRecordHeader, {
@@ -21,6 +22,7 @@ type SubpageWrapperParamsType = {
 };
 
 // Subpage keys
+export const ADD_MAILBOX = 'add-mailbox';
 export const ADD_FORWARDING_EMAIL = 'add-forwarding-email';
 export const COMPARE_EMAIL_PROVIDERS = 'compare-email-providers';
 export const DNS_RECORDS = 'dns-records';
@@ -63,6 +65,12 @@ const SUBPAGE_TO_PARAMS_MAP: Record< string, SubpageWrapperParamsType > = {
 		showBreadcrumb: false,
 		context: 'edit',
 	},
+	[ ADD_MAILBOX ]: {
+		CustomHeader: MailboxHeader,
+		showFormHeader: false,
+		showPageHeader: false,
+		customFormHeader: __( 'New mailbox' ),
+	},
 };
 
 export const getSubpageParams = ( subPageKey: string ): SubpageWrapperParamsType => {

diff --git a/client/my-sites/domains/index.js b/client/my-sites/domains/index.js
@@ -17,6 +17,7 @@ import {
 	EMAIL_MANAGEMENT,
 } from './domain-management/domain-overview-pane/constants';
 import {
+	ADD_MAILBOX,
 	ADD_FORWARDING_EMAIL,
 	COMPARE_EMAIL_PROVIDERS,
 	DNS_RECORDS,
@@ -484,4 +485,16 @@ export default function () {
 		makeLayout,
 		clientRender
 	);
+
+	page(
+		paths.domainManagementAllEmailRoot() + '/:site/titan/new/:domain',
+		siteSelection,
+		navigation,
+		domainManagementController.domainManagementSubpageParams( ADD_MAILBOX ),
+		emailController.emailManagementNewTitanAccount,
+		domainManagementController.domainManagementSubpageView,
+		domainManagementController.domainDashboardLayout,
+		makeLayout,
+		clientRender
+	);
 }
diff --git a/client/my-sites/email/add-mailboxes/index.tsx b/client/my-sites/email/add-mailboxes/index.tsx
@@ -18,6 +18,10 @@ 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,
+	isUnderDomainManagementAll,
+} 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 {
@@ -62,6 +66,9 @@ interface AddMailboxesProps {
 	provider?: EmailProvider;
 	selectedDomainName: string;
 	source?: string;
+	showPageHeader?: boolean;
+	showFormHeader?: boolean;
+	customFormHeader?: boolean;
 }
 
 interface AddMailboxesAdditionalProps {
@@ -75,6 +82,9 @@ interface AddMailboxesAdditionalProps {
 	selectedSiteId: number | undefined | null;
 	source: string;
 	translate: typeof translate;
+	showPageHeader?: boolean;
+	showFormHeader?: boolean;
+	customFormHeader?: boolean;
 }
 
 const isTitan = ( provider: EmailProvider ): boolean => provider === EmailProvider.Titan;
@@ -83,6 +93,9 @@ const useAdditionalProps = ( {
 	provider = EmailProvider.Titan,
 	selectedDomainName,
 	source = '',
+	showPageHeader = true,
+	showFormHeader = true,
+	customFormHeader,
 }: AddMailboxesProps ): AddMailboxesAdditionalProps => {
 	const selectedSite = useSelector( getSelectedSite );
 	const selectedSiteId = selectedSite?.ID;
@@ -117,6 +130,9 @@ const useAdditionalProps = ( {
 		selectedSiteId,
 		source,
 		translate,
+		showPageHeader,
+		showFormHeader,
+		customFormHeader,
 	};
 };
 
@@ -231,6 +247,9 @@ const MailboxesForm = ( {
 	selectedSite,
 	source,
 	translate,
+	showFormHeader,
+	customFormHeader,
+	currentRoute,
 }: AddMailboxesAdditionalProps & {
 	emailProduct: ProductListItem | null;
 	goToEmail: () => void;
@@ -304,10 +323,19 @@ 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 = `${ domainManagementAllEmailRoot() }/${ selectedDomainName }/${ selectedSiteSlug }?new-email=${ newEmail }`;
+			checkoutPath += '?redirect_to=' + encodeURIComponent( redirectTo );
+		}
+
 		cartManager
 			.addProductsToCart( [ getCartItems( mailboxOperations.mailboxes, mailProperties ) ] )
 			.then( () => {
-				page( '/checkout/' + selectedSite?.slug ?? '' );
+				page( checkoutPath );
 			} )
 			.finally( () => setIsAddingToCart( false ) )
 			.catch( () => {
@@ -317,9 +345,14 @@ const MailboxesForm = ( {
 
 	return (
 		<>
-			<SectionHeader label={ translate( 'Add New Mailboxes' ) } />
-
-			<Card>
+			{ showFormHeader && <SectionHeader label={ translate( 'Add New Mailboxes' ) } /> }
+
+			<Card className="new-mailbox">
+				{ !! customFormHeader && (
+					<div className="section-header__label">
+						<span className="section-header__label-text">{ customFormHeader }</span>
+					</div>
+				) }
 				<NewMailBoxList
 					areButtonsBusy={ isAddingToCart || isValidating }
 					hiddenFieldNames={ hiddenFieldNames }
@@ -354,6 +387,7 @@ const AddMailboxes = ( props: AddMailboxesProps ): JSX.Element | null => {
 		selectedSite,
 		source,
 		translate,
+		showPageHeader,
 	} = additionalProps;
 
 	const emailProduct = useSelector( ( state ) =>
@@ -396,9 +430,14 @@ const AddMailboxes = ( props: AddMailboxesProps ): JSX.Element | null => {
 			<Main wideLayout>
 				<DocumentHead title={ translate( 'Add New Mailboxes' ) } />
 
-				<EmailHeader />
-
-				<HeaderCake onClick={ goToEmail }>{ productName + ': ' + selectedDomainName }</HeaderCake>
+				{ showPageHeader && (
+					<>
+						<EmailHeader />
+						<HeaderCake onClick={ goToEmail }>
+							{ productName + ': ' + selectedDomainName }
+						</HeaderCake>
+					</>
+				) }
 
 				<WithVerificationGate productFamily={ productName } provider={ provider }>
 					<MailboxNotices { ...additionalProps } emailProduct={ emailProduct } />

diff --git a/client/my-sites/email/controller.js b/client/my-sites/email/controller.js
@@ -103,6 +103,9 @@ export default {
 					provider={ EmailProvider.Titan }
 					selectedDomainName={ pageContext.params.domain }
 					source={ pageContext.query.source }
+					showPageHeader={ pageContext?.params?.showPageHeader }
+					showFormHeader={ pageContext?.params?.showFormHeader }
+					customFormHeader={ pageContext?.params?.customFormHeader }
 				/>
 			</CalypsoShoppingCartProvider>
 		);

diff --git a/client/my-sites/email/paths.ts b/client/my-sites/email/paths.ts
@@ -126,7 +126,15 @@ export const getNewTitanAccountPath: EmailPathUtilityFunction = (
 	domainName,
 	relativeTo,
 	urlParameters
-) => getPath( siteName, domainName, 'titan/new', relativeTo, urlParameters );
+) => {
+	if ( isUnderDomainManagementAll( relativeTo ) ) {
+		return `${ domainsManagementPrefix }/${ domainName }/titan/new/${ siteName }${ buildQueryString(
+			urlParameters
+		) }`;
+	}
+
+	return getPath( siteName, domainName, 'titan/new', relativeTo, urlParameters );
+};
 
 // Retrieves the URL to set up Titan mailboxes
 export const getTitanSetUpMailboxPath: EmailPathUtilityFunction = (