diff --git a/client/my-sites/email/email-management/email-home.tsx b/client/my-sites/email/email-management/email-home.tsx index 88da68e8b215a..cf54b23402f16 100644 --- a/client/my-sites/email/email-management/email-home.tsx +++ b/client/my-sites/email/email-management/email-home.tsx @@ -166,6 +166,7 @@ const EmailHome = ( props: EmailManagementHomeProps ) => { hideMailPoetUpsell={ isAllDomainManagementContext } selectedSite={ selectedSite } source={ source } + context={ context } /> ); diff --git a/client/my-sites/email/email-management/home/email-plan-mailboxes-list.tsx b/client/my-sites/email/email-management/home/email-plan-mailboxes-list.tsx index 7790ddb3e7498..4559236fcf33e 100644 --- a/client/my-sites/email/email-management/home/email-plan-mailboxes-list.tsx +++ b/client/my-sites/email/email-management/home/email-plan-mailboxes-list.tsx @@ -1,10 +1,12 @@ import { Badge, MaterialIcon } from '@automattic/components'; import { useTranslate } from 'i18n-calypso'; +import Notice from 'calypso/components/notice'; import { isRecentlyRegistered } from 'calypso/lib/domains/utils'; import { isEmailUserAdmin } from 'calypso/lib/emails'; import { getGSuiteSubscriptionStatus } from 'calypso/lib/gsuite'; 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 EmailPlanWarnings from 'calypso/my-sites/email/email-management/home/email-plan-warnings'; import EmailForwardSecondaryDetails from './email-plan-mailboxes/email-forward-secondary-details'; import MailboxListHeader from './email-plan-mailboxes/list-header'; import MailboxListItem from './email-plan-mailboxes/list-item'; @@ -18,6 +20,7 @@ type Props = { mailboxes: Mailbox[]; addMailboxPath: string; isLoadingEmails: boolean; + configuringStateMode?: 'message' | 'notice'; }; function EmailPlanMailboxesList( { domain, @@ -25,13 +28,20 @@ function EmailPlanMailboxesList( { mailboxes, addMailboxPath, isLoadingEmails, + configuringStateMode = 'message', }: Props ) { const translate = useTranslate(); const accountType = account?.account_type; + const isNoMailboxes = ! mailboxes || mailboxes.length < 1; + const isAccountWarningPresent = !! account?.warnings.length; + const isGoogleConfiguring = + isRecentlyRegistered( domain.registrationDate, 45 ) && + getGSuiteSubscriptionStatus( domain ) === 'unknown'; + if ( isLoadingEmails ) { return ( - + @@ -40,63 +50,114 @@ function EmailPlanMailboxesList( { ); } - if ( ! mailboxes || mailboxes.length < 1 ) { - let missingMailboxesText = translate( 'No mailboxes' ); + if ( isGoogleConfiguring && configuringStateMode === 'message' ) { + return ; + } - if ( - isRecentlyRegistered( domain.registrationDate, 45 ) && - getGSuiteSubscriptionStatus( domain ) === 'unknown' - ) { - missingMailboxesText = translate( - 'We are configuring your mailboxes. You will receive an email shortly when they are ready to use.' - ); + if ( isNoMailboxes && configuringStateMode === 'message' ) { + return ; + } + + function MailboxItemsEmpty() { + return ( + +
+
+ { domain.domain } +
+
+
+ ); + } + + function MailboxContent( { type }: { type: 'configuring' | 'no-mailboxes' } ) { + let message; + + switch ( type ) { + case 'no-mailboxes': + message = translate( 'No mailboxes' ); + break; + case 'configuring': + message = translate( + 'We are configuring your mailboxes. You will receive an email shortly when they are ready to use.' + ); + break; } return ( - { missingMailboxesText } + { message } ); } - const mailboxItems = mailboxes.map( ( mailbox ) => { - const mailboxHasWarnings = Boolean( mailbox?.warnings?.length ); - - return ( - -
- - -
- - { isEmailUserAdmin( mailbox ) && ( - - { translate( 'Admin', { - comment: 'Email user role displayed as a badge', - } ) } - - ) } + function MailboxItems() { + return mailboxes.map( ( mailbox ) => { + const mailboxHasWarnings = Boolean( mailbox?.warnings?.length ); - + return ( + <> + +
+ + +
+ { isEmailUserAdmin( mailbox ) && ( + + { translate( 'Admin', { + comment: 'Email user role displayed as a badge', + } ) } + + ) } - { ! mailbox.temporary && ( - - ) } -
- ); - } ); + + { ! mailbox.temporary && ! isGoogleConfiguring && ( + + ) } +
+ + ); + } ); + } return ( - - { mailboxItems } - + <> + { ( isGoogleConfiguring || isAccountWarningPresent ) && configuringStateMode === 'notice' && ( + + { isAccountWarningPresent ? ( + + ) : ( + translate( + 'We are configuring your mailboxes. You will receive an email shortly when they are ready to use.' + ) + ) } + + ) } + + + { isNoMailboxes ? : } + + ); } diff --git a/client/my-sites/email/email-management/home/email-plan-mailboxes/list-header.tsx b/client/my-sites/email/email-management/home/email-plan-mailboxes/list-header.tsx index ca1020b9c0c17..4f6e8b1fb985b 100644 --- a/client/my-sites/email/email-management/home/email-plan-mailboxes/list-header.tsx +++ b/client/my-sites/email/email-management/home/email-plan-mailboxes/list-header.tsx @@ -12,6 +12,7 @@ type Props = React.PropsWithChildren< { addMailboxPath?: string; domain?: ResponseDomain; showIcon?: boolean; + disableActions?: boolean; } >; const MailboxListHeader = ( { accountType = null, @@ -20,6 +21,7 @@ const MailboxListHeader = ( { addMailboxPath, domain, showIcon, + disableActions, }: Props ) => { const translate = useTranslate(); @@ -56,7 +58,9 @@ const MailboxListHeader = ( { } > { addMailboxPath && ( - ) } diff --git a/client/my-sites/email/email-management/home/email-plan-mailboxes/list-item-link.tsx b/client/my-sites/email/email-management/home/email-plan-mailboxes/list-item-link.tsx index e4baa7126bdf5..c3407154ef7f0 100644 --- a/client/my-sites/email/email-management/home/email-plan-mailboxes/list-item-link.tsx +++ b/client/my-sites/email/email-management/home/email-plan-mailboxes/list-item-link.tsx @@ -9,12 +9,14 @@ import type { EmailAccount, Mailbox } from 'calypso/data/emails/types'; type Props = { account: EmailAccount; mailbox: Mailbox; + readonly?: boolean; }; -function MailboxLink( { account, mailbox }: Props ) { +function MailboxLink( { account, mailbox, readonly }: Props ) { const titanAppsUrlPrefix = useTitanAppsUrlPrefix(); const emailAddress = getEmailAddress( mailbox ); + const isReadonly = readonly || isEmailForwardAccount( account ); - if ( isEmailForwardAccount( account ) ) { + if ( isReadonly ) { return (
{ emailAddress } diff --git a/client/my-sites/email/email-management/home/email-plan-warnings.tsx b/client/my-sites/email/email-management/home/email-plan-warnings.tsx index 4672113d0338c..194efa0576b15 100644 --- a/client/my-sites/email/email-management/home/email-plan-warnings.tsx +++ b/client/my-sites/email/email-management/home/email-plan-warnings.tsx @@ -1,4 +1,4 @@ -import { Button, Gridicon } from '@automattic/components'; +import { Button, ButtonProps, Gridicon } from '@automattic/components'; import { useTranslate } from 'i18n-calypso'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import { canCurrentUserAddEmail, getCurrentUserCannotAddEmailReason } from 'calypso/lib/domains'; @@ -18,9 +18,10 @@ import type { ResponseDomain } from 'calypso/lib/domains/types'; type EmailPlanWarningsProps = { domain: ResponseDomain; emailAccount: EmailAccount; + ctaBtnProps?: ButtonProps; }; -const EmailPlanWarnings = ( { domain, emailAccount }: EmailPlanWarningsProps ) => { +const EmailPlanWarnings = ( { domain, emailAccount, ctaBtnProps }: EmailPlanWarningsProps ) => { const translate = useTranslate(); const selectedSite = useSelector( getSelectedSite ); const selectedSiteSlug = selectedSite?.slug ?? ''; @@ -37,7 +38,12 @@ const EmailPlanWarnings = ( { domain, emailAccount }: EmailPlanWarningsProps ) = if ( hasUnusedMailboxWarning( emailAccount ) && isTitanMailAccount( emailAccount ) ) { cta = ( - ); @@ -51,6 +57,7 @@ const EmailPlanWarnings = ( { domain, emailAccount }: EmailPlanWarningsProps ) = recordTracksEvent( 'calypso_email_management_google_workspace_accept_tos_link_click' ); } } target="_blank" + { ...ctaBtnProps } > { translate( 'Finish setup' ) } 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 index 88da7b31ea43e..3b405cb043031 100644 --- a/client/my-sites/email/email-management/home/email-plan/index.jsx +++ b/client/my-sites/email/email-management/home/email-plan/index.jsx @@ -101,6 +101,7 @@ function EmailPlan( { domain, selectedSite, source, + context, hideHeader = false, hideHeaderCake = false, hidePlanActions = false, @@ -365,6 +366,7 @@ function EmailPlan( { mailboxes={ getMailboxes( emailAccounts ) } isLoadingEmails={ isLoading } addMailboxPath={ hidePlanActions && getAddMailboxProps()?.path } + configuringStateMode={ context === 'domains' && 'notice' } /> { ! hidePlanActions && (
@@ -388,6 +390,7 @@ EmailPlan.propTypes = { domain: PropTypes.object.isRequired, selectedSite: PropTypes.object.isRequired, source: PropTypes.string, + context: PropTypes.string, hideHeader: PropTypes.bool, hideHeaderCake: PropTypes.bool, hidePlanActions: PropTypes.bool, diff --git a/client/my-sites/email/email-management/style.scss b/client/my-sites/email/email-management/style.scss index e2879d4722032..447cfad0b8523 100644 --- a/client/my-sites/email/email-management/style.scss +++ b/client/my-sites/email/email-management/style.scss @@ -511,4 +511,55 @@ .email-plan-mailboxes-list__mailbox-list-item > div { flex-grow: initial; } + + div.email-plan-mailboxes-list__mailbox-list-link span, + .section-header__actions button[disabled] { + color: var(--theme-highlight-color-50); + opacity: 0.5; + } + + .email-plan-mailboxes-list__notice { + margin-top: 1rem; + margin-bottom: 2rem; + + .email-plan-warnings__container { + margin: 0; + } + + .email-plan-warnings__warning { + display: flex; + padding: 0; + + .email-plan-warnings__message, + .email-plan-warnings__cta { + display: inline; + } + + .email-plan-warnings__message { + flex-grow: 1; + + span { + display: inline-block; + max-width: 700px; + } + } + + .email-plan-warnings__cta { + margin: 0; + flex-grow: 0; + align-self: center; + white-space: nowrap; + + svg { + height: 14px; + vertical-align: middle; + } + + a { + color: var(--studio-gray-20); + text-decoration: none; + } + } + } + } } \ No newline at end of file