Domains Management Revamp: Add email plans comparison subpage to site…

… context (#98430)

* Register plans comparison route

* Update page header

* Hide back button

* Update path generation

* Fix popover style

* Reduce table padding for smaller screens

* Fix breadcrumb navigation on domain context

client/hosting/overview/index.tsx

@@ -21,6 +21,7 @@ import {
 	ADD_DNS_RECORD,
 	EDIT_DNS_RECORD,
 	ADD_FORWARDING_EMAIL,
+	COMPARE_EMAIL_PROVIDERS,
 	EDIT_CONTACT_INFO,
 } from 'calypso/my-sites/domains/domain-management/subpage-wrapper/subpages';
 import emailController from 'calypso/my-sites/email/controller';
@@ -179,4 +180,13 @@ export default function () {
 			domainManagementController.domainManagementSubpageView,
 		],
 	} );
+
+	registerSiteDomainPage( {
+		path: '/overview/site-domain/email/:domain/compare/:site',
+		controllers: [
+			domainManagementController.domainManagementSubpageParams( COMPARE_EMAIL_PROVIDERS ),
+			emailController.emailManagementInDepthComparison,
+			domainManagementController.domainManagementSubpageView,
+		],
+	} );
 }

client/my-sites/domains/domain-management/subpage-wrapper/headers/add-fowarding-email-header.tsx

@@ -6,6 +6,7 @@ import { domainManagementAllOverview } from 'calypso/my-sites/domains/paths';
 import { getEmailManagementPath } from 'calypso/my-sites/email/paths';
 import SiteIcon from 'calypso/sites/components/sites-dataviews/site-icon';
 import { useSelector } from 'calypso/state';
+import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import { getSite } from 'calypso/state/sites/selectors';
 import { CustomHeaderComponentType } from './custom-header-component-type';
 
@@ -16,6 +17,7 @@ const AddForwardingEmailHeader: CustomHeaderComponentType = ( {
 } ) => {
 	const translate = useTranslate();
 	const site = useSelector( ( state ) => getSite( state, selectedSiteSlug ) as SiteExcerptData );
+	const currentRoute = useSelector( getCurrentRoute );
 
 	const navigationItems = useMemo( () => {
 		const baseNavigationItems = [
@@ -24,7 +26,7 @@ const AddForwardingEmailHeader: CustomHeaderComponentType = ( {
 				href: domainManagementAllOverview(
 					selectedSiteSlug,
 					selectedDomainName,
-					null,
+					currentRoute,
 					inSiteContext
 				),
 			},
@@ -33,7 +35,7 @@ const AddForwardingEmailHeader: CustomHeaderComponentType = ( {
 				href: getEmailManagementPath(
 					selectedSiteSlug,
 					selectedDomainName,
-					null,
+					currentRoute,
 					undefined,
 					inSiteContext
 				),

client/my-sites/domains/domain-management/subpage-wrapper/headers/compare-email-providers.tsx

@@ -1,43 +1,67 @@
-import { localizeUrl } from '@automattic/i18n-utils';
+import { SiteExcerptData } from '@automattic/sites';
 import { translate } from 'i18n-calypso';
-import React from 'react';
-import ExternalLink from 'calypso/components/external-link';
+import { useMemo } from 'react';
 import NavigationHeader from 'calypso/components/navigation-header';
+import { domainManagementAllOverview } from 'calypso/my-sites/domains/paths';
+import { getEmailManagementPath } from 'calypso/my-sites/email/paths';
+import SiteIcon from 'calypso/sites/components/sites-dataviews/site-icon';
+import { useSelector } from 'calypso/state';
+import getCurrentRoute from 'calypso/state/selectors/get-current-route';
+import { getSite } from 'calypso/state/sites/selectors';
 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,
+	inSiteContext,
 } ) => {
+	const site = useSelector( ( state ) => getSite( state, selectedSiteSlug ) as SiteExcerptData );
+	const currentRoute = useSelector( getCurrentRoute );
+
+	const navigationItems = useMemo( () => {
+		const baseNavigationItems = [
+			{
+				label: selectedDomainName,
+				href: domainManagementAllOverview(
+					selectedSiteSlug,
+					selectedDomainName,
+					currentRoute,
+					inSiteContext
+				),
+			},
+			{
+				label: translate( 'Email' ),
+				href: getEmailManagementPath(
+					selectedSiteSlug,
+					selectedDomainName,
+					currentRoute,
+					undefined,
+					inSiteContext
+				),
+			},
+			{
+				label: translate( 'Compare plans' ),
+			},
+		];
+
+		if ( inSiteContext ) {
+			return [
+				{
+					label: site?.name || selectedDomainName,
+					href: `/overview/${ selectedSiteSlug }`,
+					icon: <SiteIcon site={ site } viewType="breadcrumb" disableClick />,
+				},
+				...baseNavigationItems,
+			];
+		}
+
+		return baseNavigationItems;
+	}, [ inSiteContext, selectedDomainName, selectedSiteSlug, site ] );
+
 	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' ),
-				},
-			] }
+			navigationItems={ navigationItems }
 		/>
 	);
 };

client/my-sites/domains/domain-management/subpage-wrapper/style.scss

@@ -174,6 +174,10 @@
                 padding-top: 12px;
             }
         }
+
+        @media ( max-width: $break-small ) {
+            padding: 8px;
+        }
     }
 
 	&.subpage-wrapper--add-mailbox {

client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx

@@ -40,6 +40,7 @@ const SUBPAGE_TO_PARAMS_MAP: Record< string, SubpageWrapperParamsType > = {
 	},
 	[ COMPARE_EMAIL_PROVIDERS ]: {
 		CustomHeader: CompareEmailProvidersHeader,
+		showBackButton: false,
 	},
 	[ DNS_RECORDS ]: {
 		CustomHeader: DNSRecordsHeader,

client/my-sites/email/controller.js

@@ -175,7 +175,7 @@ export default {
 					selectedDomainName={ pageContext.params.domain }
 					selectedIntervalLength={ castIntervalLength( pageContext.query.interval ) }
 					source={ pageContext.query.source }
-					context={ pageContext.section.name }
+					showBackButton={ pageContext.params.showBackButton }
 				/>
 			</CalypsoShoppingCartProvider>
 		);

client/my-sites/email/email-providers-comparison/billing-interval-toggle/style.scss

@@ -67,7 +67,7 @@
 	}
 }
 
-.emails-save-paying-annually__popover {
+.emails-save-paying-annually__popover.popover {
 	z-index: z-index("root", ".masterbar") - 1;
 
 	.popover__inner {

client/my-sites/email/email-providers-comparison/in-depth/index.tsx

@@ -35,7 +35,7 @@ const EmailProvidersInDepthComparison = ( {
 	selectedDomainName,
 	selectedIntervalLength = IntervalLength.ANNUALLY,
 	source,
-	context,
+	showBackButton = true,
 }: EmailProvidersInDepthComparisonProps ) => {
 	const dispatch = useDispatch();
 	const translate = useTranslate();
@@ -45,7 +45,6 @@ const EmailProvidersInDepthComparison = ( {
 	const selectedSite = useSelector( getSelectedSite );
 	const cartKey = useCartKey();
 	const shoppingCartManager = useShoppingCart( cartKey );
-	const hideNavigation = context === 'domains';
 	const isDomainInCart = hasDomainInCart( shoppingCartManager.responseCart, selectedDomainName );
 
 	const changeIntervalLength = ( newIntervalLength: IntervalLength ) => {
@@ -98,7 +97,7 @@ const EmailProvidersInDepthComparison = ( {
 	return (
 		<Main wideLayout>
 			<QueryProductsList />
-			{ ! hideNavigation && (
+			{ showBackButton && (
 				<EmailUpsellNavigation
 					backUrl={
 						isDomainInCart

client/my-sites/email/email-providers-comparison/in-depth/types.ts

@@ -41,7 +41,7 @@ export type EmailProvidersInDepthComparisonProps = {
 	selectedDomainName: string;
 	selectedIntervalLength?: IntervalLength;
 	source?: string;
-	context?: string;
+	showBackButton?: boolean;
 };
 
 export type LearnMoreLinkProps = {

client/my-sites/email/paths.ts

@@ -1,4 +1,3 @@
-import { isEnabled } from '@automattic/calypso-config';
 import { stringify } from 'qs';
 import {
 	isUnderDomainManagementAll,
@@ -212,8 +211,12 @@ export const getEmailInDepthComparisonPath = (
 	source?: string,
 	intervalLength?: string
 ) => {
-	if ( isEnabled( 'calypso/all-domain-management' ) && isUnderDomainManagementAll( relativeTo ) ) {
-		return `${ domainsManagementPrefix }/${ domainName }/compare/${ siteName }${ buildQueryString( {
+	if ( isUnderDomainManagementAll( relativeTo ) ) {
+		const prefix = isUnderDomainSiteContext( relativeTo )
+			? emailSiteContextPrefix
+			: domainsManagementPrefix;
+
+		return `${ prefix }/${ domainName }/compare/${ siteName }${ buildQueryString( {
 			interval: intervalLength,
 			referrer: relativeTo,
 			source,

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

@@ -194,6 +194,12 @@ describe( 'path helper functions', () => {
 				relativeTo
 			) }`
 		);
+		const relativeToSiteDomain = '/overview/site-domain/email';
+		expect( getEmailInDepthComparisonPath( siteName, domainName, relativeToSiteDomain ) ).toEqual(
+			`/overview/site-domain/email/${ domainName }/compare/${ siteName }?referrer=${ encodeURIComponent(
+				relativeToSiteDomain
+			) }`
+		);
 	} );
 
 	it( 'getMailboxesPath', () => {