Domains Management Revamp: Add email plans comparison subpage (#97944)

* Add email plans comparison subpage * Fix subpage scrolling * Add table border * Update path
Automattic · Jan 6, 2025 · 8d698c1 · 8d698c1
1 parent 0b0ff0a
commit 8d698c1
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 12 deletions.
diff --git a/...nt/my-sites/domains/domain-management/subpage-wrapper/headers/compare-email-providers.tsx b/...nt/my-sites/domains/domain-management/subpage-wrapper/headers/compare-email-providers.tsx
@@ -0,0 +1,45 @@
+import { localizeUrl } from '@automattic/i18n-utils';
+import { translate } from 'i18n-calypso';
+import React from 'react';
+import ExternalLink from 'calypso/components/external-link';
+import NavigationHeader from 'calypso/components/navigation-header';
+import { CustomHeaderComponentType } from './custom-header-component-type';
+
+export const addDnsRecordTitle = translate( 'Add a new DNS record' );
+export const editDnsRecordTitle = translate( 'Edit DNS record' );
+export const addDnsRecordsSubtitle = translate(
+	'DNS records change how your domain works. {{a}}Learn more{{/a}}.',
+	{
+		components: {
+			a: (
+				<ExternalLink href={ localizeUrl( 'https://wordpress.com/support/domains/custom-dns/' ) } />
+			),
+		},
+	}
+);
+
+const CompareEmailProvidersHeader: CustomHeaderComponentType = ( {
+	selectedDomainName,
+	selectedSiteSlug,
+} ) => {
+	return (
+		<NavigationHeader
+			className="navigation-header__breadcrumb"
+			navigationItems={ [
+				{
+					label: selectedDomainName,
+					href: `/domains/manage/all/overview/${ selectedDomainName }/${ selectedSiteSlug }`,
+				},
+				{
+					label: translate( 'Email' ),
+					href: `/domains/manage/all/email/${ selectedDomainName }/${ selectedSiteSlug }`,
+				},
+				{
+					label: translate( 'Compare plans' ),
+				},
+			] }
+		/>
+	);
+};
+
+export default CompareEmailProvidersHeader;
diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/style.scss b/client/my-sites/domains/domain-management/subpage-wrapper/style.scss
@@ -149,6 +149,20 @@
 			border-radius: 4px;
 		}
 	}
+
+    .email-providers-in-depth-comparison__table {
+        border: solid 1px $studio-gray-5;
+        border-radius: 4px;
+        padding: 24px;
+
+        > table {
+            margin-top: 0;
+
+            td {
+                padding-top: 12px;
+            }
+        }
+    }
 }
 
 .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 CompareEmailProvidersHeader from './headers/compare-email-providers';
 import { CustomHeaderComponentType } from './headers/custom-header-component-type';
 import DnsRecordHeader, {
 	addDnsRecordTitle,
@@ -21,6 +22,7 @@ type SubpageWrapperParamsType = {
 
 // Subpage keys
 export const ADD_FORWARDING_EMAIL = 'add-forwarding-email';
+export const COMPARE_EMAIL_PROVIDERS = 'compare-email-providers';
 export const DNS_RECORDS = 'dns-records';
 export const ADD_DNS_RECORD = 'add-dns-record';
 export const EDIT_DNS_RECORD = 'edit-dns-record';
@@ -33,6 +35,9 @@ const SUBPAGE_TO_PARAMS_MAP: Record< string, SubpageWrapperParamsType > = {
 		showFormHeader: true,
 		showPageHeader: false,
 	},
+	[ COMPARE_EMAIL_PROVIDERS ]: {
+		CustomHeader: CompareEmailProvidersHeader,
+	},
 	[ DNS_RECORDS ]: {
 		CustomHeader: DNSRecordsHeader,
 		titleOverride: dnsRecordsTitle,
@@ -41,21 +46,18 @@ const SUBPAGE_TO_PARAMS_MAP: Record< string, SubpageWrapperParamsType > = {
 		showDetails: false,
 	},
 	[ EDIT_CONTACT_INFO ]: {
-		subPageKey: EDIT_CONTACT_INFO,
 		title: __( 'Contact information' ),
 		subtitle: __( "Manage your domain's contact details." ),
 	},
 	[ ADD_DNS_RECORD ]: {
 		CustomHeader: DnsRecordHeader,
-		subPageKey: ADD_DNS_RECORD,
 		titleOverride: addDnsRecordTitle,
 		subtitleOverride: addDnsRecordsSubtitle,
 		showBreadcrumb: false,
 		context: 'add',
 	},
 	[ EDIT_DNS_RECORD ]: {
 		CustomHeader: DnsRecordHeader,
-		subPageKey: EDIT_DNS_RECORD,
 		titleOverride: editDnsRecordTitle,
 		subtitleOverride: addDnsRecordsSubtitle,
 		showBreadcrumb: false,

diff --git a/client/my-sites/domains/index.js b/client/my-sites/domains/index.js
@@ -18,6 +18,7 @@ import {
 } from './domain-management/domain-overview-pane/constants';
 import {
 	ADD_FORWARDING_EMAIL,
+	COMPARE_EMAIL_PROVIDERS,
 	DNS_RECORDS,
 	ADD_DNS_RECORD,
 	EDIT_DNS_RECORD,
@@ -412,6 +413,18 @@ export default function () {
 		clientRender
 	);
 
+	page(
+		paths.domainManagementAllEmailRoot() + '/:domain/compare/:site',
+		siteSelection,
+		navigation,
+		domainManagementController.domainManagementSubpageParams( COMPARE_EMAIL_PROVIDERS ),
+		emailController.emailManagementInDepthComparison,
+		domainManagementController.domainManagementSubpageView,
+		domainManagementController.domainDashboardLayout,
+		makeLayout,
+		clientRender
+	);
+
 	page(
 		paths.domainManagementAllEmailRoot() + '/:domain/forwarding/add/:site',
 		siteSelection,

diff --git a/client/my-sites/domains/style.scss b/client/my-sites/domains/style.scss
@@ -81,6 +81,9 @@ body.is-section-domains.is-domain-plan-package-flow {
 	}
 
 	.domains-overview__details.main {
-		height: 100%;
+		&,
+		.hosting-dashboard-layout-column__container {
+			height: 100%;
+		}
 	}
 }
diff --git a/client/my-sites/email/email-providers-comparison/in-depth/index.tsx b/client/my-sites/email/email-providers-comparison/in-depth/index.tsx
@@ -121,12 +121,14 @@ const EmailProvidersInDepthComparison = ( {
 				onIntervalChange={ changeIntervalLength }
 			/>
 
-			<ComparisonComponent
-				emailProviders={ [ professionalEmailFeatures, googleWorkspaceFeatures ] }
-				intervalLength={ selectedIntervalLength }
-				onSelectEmailProvider={ selectEmailProvider }
-				selectedDomainName={ selectedDomainName }
-			/>
+			<div className="email-providers-in-depth-comparison__table">
+				<ComparisonComponent
+					emailProviders={ [ professionalEmailFeatures, googleWorkspaceFeatures ] }
+					intervalLength={ selectedIntervalLength }
+					onSelectEmailProvider={ selectEmailProvider }
+					selectedDomainName={ selectedDomainName }
+				/>
+			</div>
 
 			<EmailForwardingLink selectedDomainName={ selectedDomainName } />
 		</Main>

diff --git a/client/my-sites/email/paths.ts b/client/my-sites/email/paths.ts
@@ -184,12 +184,21 @@ export const getEmailInDepthComparisonPath = (
 	relativeTo?: string,
 	source?: string,
 	intervalLength?: string
-) =>
-	getPath( siteName, domainName, 'compare', relativeTo, {
+) => {
+	if ( isEnabled( 'calypso/all-domain-management' ) && isUnderDomainManagementAll( relativeTo ) ) {
+		return `${ domainsManagementPrefix }/${ domainName }/compare/${ siteName }${ buildQueryString( {
+			interval: intervalLength,
+			referrer: relativeTo,
+			source,
+		} ) }`;
+	}
+
+	return getPath( siteName, domainName, 'compare', relativeTo, {
 		interval: intervalLength,
 		referrer: relativeTo,
 		source,
 	} );
+};
 
 export const getProfessionalEmailCheckoutUpsellPath = (
 	siteName: string,

diff --git a/client/my-sites/email/test/paths.ts b/client/my-sites/email/test/paths.ts
@@ -25,6 +25,8 @@ import {
 const siteName = 'hello.wordpress.com';
 const domainName = 'hello.com';
 
+jest.mock( '@automattic/calypso-config', () => ( { isEnabled: () => true } ) );
+
 describe( 'path helper functions', () => {
 	it( 'getAddEmailForwardsPath', () => {
 		expect( getAddEmailForwardsPath( siteName, domainName ) ).toEqual(
@@ -170,6 +172,13 @@ describe( 'path helper functions', () => {
 		);
 		expect( getEmailInDepthComparisonPath( siteName, null ) ).toEqual( `/email/${ siteName }` );
 		expect( getEmailInDepthComparisonPath( null, null ) ).toEqual( '/email' );
+
+		const relativeTo = '/domains/manage/all/email';
+		expect( getEmailInDepthComparisonPath( siteName, domainName, relativeTo ) ).toEqual(
+			`/domains/manage/all/email/${ domainName }/compare/${ siteName }?referrer=${ encodeURIComponent(
+				relativeTo
+			) }`
+		);
 	} );
 
 	it( 'getMailboxesPath', () => {