Domain management: Match component design in the case where user has …

…Mailboxes (#97252) * Extend EmailComparison component to support adding container className * Customize EmailComparison component to match figma design * Customize EmailComparison component to match figma design * Replace feature flag with usage context * Rename constant to be a more accurate name * Extend EmailPlanMailboxesList props to customize component * Extend EmailPlan props to customize component * Customize EmailPlan component based on feature flag * Add context-all-domain-management style * Show optional icon next to the mailbox title based on type * Replace feature flag with context property * Add mailbox icon based on context * Rename constant to be a more accurate name * Simplify header icon rendering * Use destructor inside a function param * Hide MailPoet upsell for all domains management context * Add missing align-items property style * Update children type definition * Adjust section header text and button font size * Update color variable * Rearange css selector to avoid important operator * Remove custom logic for getting email icon * Fix alignment issue
Automattic · Dec 12, 2024 · f505c7b · f505c7b
1 parent 0a75bc9
commit f505c7b
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 36 deletions.
diff --git a/client/my-sites/email/email-management/email-home.tsx b/client/my-sites/email/email-management/email-home.tsx
@@ -2,6 +2,7 @@ import page from '@automattic/calypso-router';
 import { Card } from '@automattic/components';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
+import React, { ReactNode } from 'react';
 import DocumentHead from 'calypso/components/data/document-head';
 import EmptyContent from 'calypso/components/empty-content';
 import Main from 'calypso/components/main';
@@ -26,19 +27,22 @@ import { createSiteDomainObject } from 'calypso/state/sites/domains/assembler';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import type { ResponseDomain } from 'calypso/lib/domains/types';
 import type { TranslateResult } from 'i18n-calypso';
-import type { ReactNode } from 'react';
 
 import './style.scss';
 
-const ContentWithHeader = ( props: { children: ReactNode } ) => {
+type ContentWithHeaderProps = React.PropsWithChildren< {
+	className?: string;
+} >;
+const ContentWithHeader = ( { children, className }: ContentWithHeaderProps ) => {
 	const translate = useTranslate();
+
 	return (
-		<Main wideLayout>
+		<Main wideLayout className={ className }>
 			<DocumentHead title={ translate( 'Emails', { textOnly: true } ) } />
 
 			<EmailHeader />
 
-			{ props.children }
+			{ children }
 		</Main>
 	);
 };
@@ -147,14 +151,19 @@ const EmailHome = ( props: EmailManagementHomeProps ) => {
 		}
 
 		return (
-			<ContentWithHeader>
+			<ContentWithHeader
+				className={ clsx( { 'context-all-domain-management': isAllDomainManagementContext } ) }
+			>
 				<EmailPlan
 					domain={ selectedDomain }
 					// When users have a single domain with email, they are auto-redirected from the
 					// `/email/:site_slug` page to `/email/:domain/manage/:site_slug`. That's why
 					// we also hide the back button, to avoid scenarios where clicking "Back"
 					// redirects users to the same page as they are currently on.
-					hideHeaderCake={ isSingleDomainThatHasEmail }
+					hideHeaderCake={ isAllDomainManagementContext || isSingleDomainThatHasEmail }
+					hideHeader={ isAllDomainManagementContext }
+					hidePlanActions={ isAllDomainManagementContext }
+					hideMailPoetUpsell={ isAllDomainManagementContext }
 					selectedSite={ selectedSite }
 					source={ source }
 				/>

diff --git a/client/my-sites/email/email-management/home/email-plan-mailboxes-list.jsx b/client/my-sites/email/email-management/home/email-plan-mailboxes-list.jsx
@@ -1,4 +1,5 @@
 import { Badge, CompactCard, Gridicon, MaterialIcon } from '@automattic/components';
+import { Button } from '@wordpress/components';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import PropTypes from 'prop-types';
@@ -18,6 +19,7 @@ import { getGSuiteSubscriptionStatus, getGmailUrl } from 'calypso/lib/gsuite';
 import { getTitanEmailUrl, useTitanAppsUrlPrefix } from 'calypso/lib/titan';
 import EmailMailboxActionMenu from 'calypso/my-sites/email/email-management/home/email-mailbox-action-menu';
 import EmailMailboxWarnings from 'calypso/my-sites/email/email-management/home/email-mailbox-warnings';
+import EmailTypeIcon from 'calypso/my-sites/email/email-management/home/email-type-icon';
 import { recordEmailAppLaunchEvent } from './utils';
 
 const getListHeaderTextForAccountType = ( accountType, translate ) => {
@@ -32,15 +34,39 @@ const getListHeaderTextForAccountType = ( accountType, translate ) => {
 	} );
 };
 
-const MailboxListHeader = ( { accountType = null, children, isPlaceholder = false } ) => {
+const MailboxListHeader = ( {
+	accountType = null,
+	children,
+	isPlaceholder = false,
+	addMailboxPath,
+	domain,
+	showIcon,
+} ) => {
 	const translate = useTranslate();
 
+	const HeaderIcon = () => (
+		<div className="email-plan-mailboxes-list__mailbox-header-icon">
+			<EmailTypeIcon domain={ domain } />
+		</div>
+	);
+
 	return (
 		<div className="email-plan-mailboxes-list__mailbox-list">
 			<SectionHeader
 				isPlaceholder={ isPlaceholder }
-				label={ getListHeaderTextForAccountType( accountType, translate ) }
-			/>
+				label={
+					<>
+						{ !! showIcon && domain && <HeaderIcon /> }
+						{ getListHeaderTextForAccountType( accountType, translate ) }
+					</>
+				}
+			>
+				{ addMailboxPath && (
+					<Button isLink="link" href={ addMailboxPath }>
+						{ translate( 'Add mailbox' ) }
+					</Button>
+				) }
+			</SectionHeader>
 			{ children }
 		</div>
 	);
@@ -107,13 +133,13 @@ function MailboxLink( { account, mailbox } ) {
 	);
 }
 
-function EmailPlanMailboxesList( { account, domain, isLoadingEmails, mailboxes } ) {
+function EmailPlanMailboxesList( { account, domain, isLoadingEmails, mailboxes, addMailboxPath } ) {
 	const translate = useTranslate();
 	const accountType = account?.account_type;
 
 	if ( isLoadingEmails ) {
 		return (
-			<MailboxListHeader isPlaceholder accountType={ accountType }>
+			<MailboxListHeader isPlaceholder accountType={ accountType } domain={ domain }>
 				<MailboxListItem isPlaceholder>
 					<MaterialIcon icon="email" />
 					<span />
@@ -170,14 +196,24 @@ function EmailPlanMailboxesList( { account, domain, isLoadingEmails, mailboxes }
 		);
 	} );
 
-	return <MailboxListHeader accountType={ accountType }>{ mailboxItems }</MailboxListHeader>;
+	return (
+		<MailboxListHeader
+			accountType={ accountType }
+			addMailboxPath={ addMailboxPath }
+			showIcon={ !! addMailboxPath }
+			domain={ domain }
+		>
+			{ mailboxItems }
+		</MailboxListHeader>
+	);
 }
 
 EmailPlanMailboxesList.propTypes = {
 	account: PropTypes.object,
 	domain: PropTypes.object,
 	isLoadingEmails: PropTypes.bool,
 	mailboxes: PropTypes.array,
+	addMailboxPath: PropTypes.string,
 };
 
 export default EmailPlanMailboxesList;
diff --git a/client/my-sites/email/email-management/home/email-plan/index.jsx b/client/my-sites/email/email-management/home/email-plan/index.jsx
@@ -97,7 +97,15 @@ function getMailboxes( data ) {
 	return account?.emails ?? [];
 }
 
-function EmailPlan( { domain, hideHeaderCake = false, selectedSite, source } ) {
+function EmailPlan( {
+	domain,
+	selectedSite,
+	source,
+	hideHeader = false,
+	hideHeaderCake = false,
+	hidePlanActions = false,
+	hideMailPoetUpsell = false,
+} ) {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
 
@@ -338,44 +346,52 @@ function EmailPlan( { domain, hideHeaderCake = false, selectedSite, source } ) {
 		<>
 			{ selectedSite && hasSubscription && <QuerySitePurchases siteId={ selectedSite.ID } /> }
 			<DocumentHead title={ titleCase( getHeaderText() ) } />
-			<MailPoetUpsell />
+			{ ! hideMailPoetUpsell && <MailPoetUpsell /> }
 			{ ! hideHeaderCake && <HeaderCake onClick={ handleBack }>{ getHeaderText() }</HeaderCake> }
-			<EmailPlanHeader
-				domain={ domain }
-				hasEmailSubscription={ hasSubscription }
-				isLoadingEmails={ isLoading }
-				isLoadingPurchase={ isLoadingPurchase }
-				purchase={ purchase }
-				selectedSite={ selectedSite }
-				emailAccount={ getAccount( emailAccounts ) }
-			/>
+			{ ! hideHeader && (
+				<EmailPlanHeader
+					domain={ domain }
+					hasEmailSubscription={ hasSubscription }
+					isLoadingEmails={ isLoading }
+					isLoadingPurchase={ isLoadingPurchase }
+					purchase={ purchase }
+					selectedSite={ selectedSite }
+					emailAccount={ getAccount( emailAccounts ) }
+				/>
+			) }
 			<EmailPlanMailboxesList
 				account={ getAccount( emailAccounts ) }
 				domain={ domain }
 				mailboxes={ getMailboxes( emailAccounts ) }
 				isLoadingEmails={ isLoading }
+				addMailboxPath={ hidePlanActions && getAddMailboxProps()?.path }
 			/>
-			<div className="email-plan__actions">
-				<VerticalNav>
-					{ renderAddNewMailboxesOrRenewNavItem( getMailboxes( emailAccounts ) ) }
-					<UpgradeNavItem
-						currentRoute={ currentRoute }
-						domain={ domain }
-						selectedSiteSlug={ selectedSite.slug }
-					/>
-					{ renderManageAllMailboxesNavItem() }
-					{ renderViewBillingAndPaymentSettingsNavItem() }
-				</VerticalNav>
-			</div>
+			{ ! hidePlanActions && (
+				<div className="email-plan__actions">
+					<VerticalNav>
+						{ renderAddNewMailboxesOrRenewNavItem( getMailboxes( emailAccounts ) ) }
+						<UpgradeNavItem
+							currentRoute={ currentRoute }
+							domain={ domain }
+							selectedSiteSlug={ selectedSite.slug }
+						/>
+						{ renderManageAllMailboxesNavItem() }
+						{ renderViewBillingAndPaymentSettingsNavItem() }
+					</VerticalNav>
+				</div>
+			) }
 		</>
 	);
 }
 
 EmailPlan.propTypes = {
 	domain: PropTypes.object.isRequired,
-	hideHeaderCake: PropTypes.bool,
 	selectedSite: PropTypes.object.isRequired,
 	source: PropTypes.string,
+	hideHeader: PropTypes.bool,
+	hideHeaderCake: PropTypes.bool,
+	hidePlanActions: PropTypes.bool,
+	hideMailPoetUpsell: PropTypes.bool,
 };
 
 export default EmailPlan;
diff --git a/client/my-sites/email/email-management/style.scss b/client/my-sites/email/email-management/style.scss
@@ -440,3 +440,75 @@
 		}
 	}
 }
+
+.context-all-domain-management {
+	&.main {
+		width: 100%;
+
+		.email-header .navigation-header {
+			border-block-end: none;
+
+			.navigation-header__main {
+				padding-inline: 0 !important;
+
+				.navigation-header__actions {
+					flex-grow: 0;
+				}
+			}
+		}
+	}
+
+	.email-plan-mailboxes-list__mailbox-list {
+		border: solid 1px var(--color-border-subtle);
+		border-radius: 4px;
+
+		.card {
+			box-shadow: none;
+			background: none;
+		}
+
+		.card.section-header {
+			padding: 1.5rem 0 1rem 0;
+			margin: 0 1.5rem;
+			border-bottom: solid 1px var(--color-border-subtle);
+		}
+
+		.section-header__label-text {
+			display: flex;
+			align-items: center;
+			font-size: 1rem;
+			color: var(--studio-gray-100);
+		}
+
+		.section-header__actions {
+			flex: none;
+
+			.components-button {
+				font-size: 0.875rem;
+			}
+
+			.components-button.is-link {
+				text-decoration: none;
+			}
+		}
+	}
+
+	.email-plan-mailboxes-list__mailbox-header-icon {
+		display: flex;
+		margin-inline-end: 0.5rem;
+		width: 24px;
+
+		img {
+			height: 24px;
+		}
+
+		svg {
+			height: 24px;
+			fill: var(--color-accent);
+		}
+	}
+
+	.email-plan-mailboxes-list__mailbox-list-item > div {
+		flex-grow: initial;
+	}
+}