Add email upsell navigation to the compare plans page

client/my-sites/email/controller.js

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

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

@@ -1,11 +1,14 @@
 /* eslint-disable wpcalypso/jsx-classname-namespace */
 
 import page from '@automattic/calypso-router';
+import { useShoppingCart } from '@automattic/shopping-cart';
 import { useMobileBreakpoint } from '@automattic/viewport-react';
 import { useTranslate } from 'i18n-calypso';
 import { stringify } from 'qs';
 import QueryProductsList from 'calypso/components/data/query-products-list';
 import Main from 'calypso/components/main';
+import { hasDomainInCart } from 'calypso/lib/cart-values/cart-items';
+import useCartKey from 'calypso/my-sites/checkout/use-cart-key';
 import { BillingIntervalToggle } from 'calypso/my-sites/email/email-providers-comparison/billing-interval-toggle';
 import EmailForwardingLink from 'calypso/my-sites/email/email-providers-comparison/email-forwarding-link';
 import ComparisonList from 'calypso/my-sites/email/email-providers-comparison/in-depth/comparison-list';
@@ -15,7 +18,11 @@ import {
 	googleWorkspaceFeatures,
 } from 'calypso/my-sites/email/email-providers-comparison/in-depth/data';
 import { IntervalLength } from 'calypso/my-sites/email/email-providers-comparison/interval-length';
-import { getEmailInDepthComparisonPath } from 'calypso/my-sites/email/paths';
+import EmailUpsellNavigation from 'calypso/my-sites/email/email-providers-comparison/stacked/provider-cards/email-upsell-navigation';
+import {
+	getEmailInDepthComparisonPath,
+	getEmailManagementPath,
+} from 'calypso/my-sites/email/paths';
 import { useDispatch, useSelector } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
@@ -28,13 +35,18 @@ const EmailProvidersInDepthComparison = ( {
 	selectedDomainName,
 	selectedIntervalLength = IntervalLength.ANNUALLY,
 	source,
+	context,
 }: EmailProvidersInDepthComparisonProps ) => {
 	const dispatch = useDispatch();
 	const translate = useTranslate();
 
 	const isMobile = useMobileBreakpoint();
 
 	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 ) => {
 		if ( ! selectedSite ) {
@@ -86,7 +98,12 @@ const EmailProvidersInDepthComparison = ( {
 	return (
 		<Main wideLayout>
 			<QueryProductsList />
-
+			{ ! hideNavigation && (
+				<EmailUpsellNavigation
+					backUrl={ getEmailManagementPath( selectedSite?.slug, selectedDomainName ) }
+					skipUrl={ isDomainInCart ? `/checkout/${ selectedSite?.slug }` : '' }
+				/>
+			) }
 			<h1 className="email-providers-in-depth-comparison__header">
 				{ translate( 'Choose the right plan for you' ) }
 			</h1>

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

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