diff --git a/client/lib/emails/email-provider-constants.js b/client/lib/emails/email-provider-constants.js index d2bb5879686552..124248cb6f8098 100644 --- a/client/lib/emails/email-provider-constants.js +++ b/client/lib/emails/email-provider-constants.js @@ -11,3 +11,4 @@ export const EMAIL_WARNING_SLUG_UNVERIFIED_FORWARDS = 'unverified_forwards'; export const EMAIL_WARNING_CODE_OTHER_USER_OWNS_DOMAIN_SUBSCRIPTION = 'other-user-owns-subscription'; export const EMAIL_WARNING_CODE_OTHER_USER_OWNS_EMAIL = 'other-user-owns-email'; +export const EMAIL_WARNING_CODE_GRAVATAR_DOMAIN = 'domain-gravatar-domain'; diff --git a/client/my-sites/email/email-forwards-add/index.tsx b/client/my-sites/email/email-forwards-add/index.tsx index 9aa9fa084530ae..518358e6531f0b 100644 --- a/client/my-sites/email/email-forwards-add/index.tsx +++ b/client/my-sites/email/email-forwards-add/index.tsx @@ -7,7 +7,10 @@ import QueryProductsList from 'calypso/components/data/query-products-list'; import QuerySiteDomains from 'calypso/components/data/query-site-domains'; import HeaderCake from 'calypso/components/header-cake'; import Main from 'calypso/components/main'; +import Notice from 'calypso/components/notice'; import SectionHeader from 'calypso/components/section-header'; +import { getCurrentUserCannotAddEmailReason, getSelectedDomain } from 'calypso/lib/domains'; +import { EMAIL_WARNING_CODE_GRAVATAR_DOMAIN } from 'calypso/lib/emails/email-provider-constants'; import EmailForwardingAddNewCompactList from 'calypso/my-sites/email/email-forwarding/email-forwarding-add-new-compact-list'; import EmailHeader from 'calypso/my-sites/email/email-header'; import { @@ -17,6 +20,7 @@ import { import { useSelector } from 'calypso/state'; import getCurrentRoute from 'calypso/state/selectors/get-current-route'; import { + getDomainsBySiteId, hasLoadedSiteDomains, isRequestingSiteDomains, } from 'calypso/state/sites/domains/selectors'; @@ -46,6 +50,11 @@ const EmailForwardsAdd = ( { selectedDomainName, source }: EmailForwardsAddProps const translate = useTranslate(); + const domains = useSelector( ( state ) => getDomainsBySiteId( state, selectedSite?.ID ) ); + const selectedDomain = getSelectedDomain( { domains, selectedDomainName } ); + const cannotAddEmailWarningReason = getCurrentUserCannotAddEmailReason( selectedDomain ); + const isGravatarDomain = cannotAddEmailWarningReason?.code === EMAIL_WARNING_CODE_GRAVATAR_DOMAIN; + const goToEmail = useCallback( (): void => { if ( ! selectedSite ) { return; @@ -67,6 +76,32 @@ const EmailForwardsAdd = ( { selectedDomainName, source }: EmailForwardsAddProps page( getEmailManagementPath( selectedSite.slug, selectedDomainName, currentRoute ) ); }, [ currentRoute, selectedDomainName, selectedSite ] ); + const content = isGravatarDomain ? ( + + { translate( + 'This domain is associated with a Gravatar profile and cannot be used for email services at this time.' + ) } + + ) : ( + + { areDomainsLoading && ( +
+

+

+

+ ) } + + { ! areDomainsLoading && ( + + ) } +
+ ); + return (
@@ -84,23 +119,7 @@ const EmailForwardsAdd = ( { selectedDomainName, source }: EmailForwardsAddProps - - { areDomainsLoading && ( -
-

-

-

- ) } - - { ! areDomainsLoading && ( - - ) } -
+ { content }
); diff --git a/client/my-sites/email/email-forwards-add/style.scss b/client/my-sites/email/email-forwards-add/style.scss index 808e9f4e269b80..24d9d3447538df 100644 --- a/client/my-sites/email/email-forwards-add/style.scss +++ b/client/my-sites/email/email-forwards-add/style.scss @@ -30,3 +30,7 @@ margin-top: 3em; } } + +.email-forwards-add__notice { + margin-top: 24px; +} diff --git a/client/my-sites/email/email-management/home/email-plan-warning-notice.tsx b/client/my-sites/email/email-management/home/email-plan-warning-notice.tsx index 5c73b91baf7967..f30c0fa34b097d 100644 --- a/client/my-sites/email/email-management/home/email-plan-warning-notice.tsx +++ b/client/my-sites/email/email-management/home/email-plan-warning-notice.tsx @@ -5,6 +5,7 @@ import { } from 'calypso/lib/domains'; import { ResponseDomain } from 'calypso/lib/domains/types'; import { + EMAIL_WARNING_CODE_GRAVATAR_DOMAIN, EMAIL_WARNING_CODE_OTHER_USER_OWNS_DOMAIN_SUBSCRIPTION, EMAIL_WARNING_CODE_OTHER_USER_OWNS_EMAIL, } from 'calypso/lib/emails/email-provider-constants'; @@ -20,16 +21,26 @@ type EmailPlanWarningNoticeProps = { export const EmailPlanWarningNotice = ( props: EmailPlanWarningNoticeProps ) => { const { domain, selectedSite } = props; + const cannotAddEmailWarningReason = getCurrentUserCannotAddEmailReason( domain ); + const cannotAddEmailWarningMessage = cannotAddEmailWarningReason?.message ?? ''; + const cannotAddEmailWarningCode = cannotAddEmailWarningReason?.code ?? null; + + if ( cannotAddEmailWarningCode === EMAIL_WARNING_CODE_GRAVATAR_DOMAIN ) { + return ( +
+
+ { cannotAddEmailWarningMessage } +
+
+ ); + } + // If email and domain are owned by different users, none of the users will be able to make a purchase and the only way to resolve this // is to reach out to support. Therefore, we should surface a different message to address this scenario. if ( ! isDomainAndEmailSubscriptionsOwnedByDifferentUsers( domain ) ) { return ; } - const cannotAddEmailWarningReason = getCurrentUserCannotAddEmailReason( domain ); - const cannotAddEmailWarningMessage = cannotAddEmailWarningReason?.message ?? ''; - const cannotAddEmailWarningCode = cannotAddEmailWarningReason?.code ?? null; - switch ( cannotAddEmailWarningCode ) { case EMAIL_WARNING_CODE_OTHER_USER_OWNS_EMAIL: return ( diff --git a/client/my-sites/email/email-management/home/utils.ts b/client/my-sites/email/email-management/home/utils.ts index a9dd64e27c369f..d90dba8f56798e 100644 --- a/client/my-sites/email/email-management/home/utils.ts +++ b/client/my-sites/email/email-management/home/utils.ts @@ -1,6 +1,6 @@ import { translate } from 'i18n-calypso'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; -import { canCurrentUserAddEmail } from 'calypso/lib/domains'; +import { canCurrentUserAddEmail, getCurrentUserCannotAddEmailReason } from 'calypso/lib/domains'; import { getEmailForwardsCount, hasEmailForwards } from 'calypso/lib/domains/email-forwarding'; import { isRecentlyRegistered } from 'calypso/lib/domains/utils'; import { @@ -8,6 +8,7 @@ import { hasUnusedMailboxWarning, hasUnverifiedEmailForward, } from 'calypso/lib/emails'; +import { EMAIL_WARNING_CODE_GRAVATAR_DOMAIN } from 'calypso/lib/emails/email-provider-constants'; import { getGSuiteMailboxCount, getGSuiteSubscriptionId, @@ -133,6 +134,23 @@ export function resolveEmailPlanStatus( } ), }; + const gravatarDomainStatus = { + statusClass: 'warning', + icon: 'info', + text: translate( 'Gravatar domain', { + comment: 'Current user is not allowed to purchase new email subscriptions', + } ), + }; + + // Some Gravatar domains already had email purchased for them before we disabled it. + // These domains have a specific warning message. + if ( + ! canCurrentUserAddEmail( domain ) && + getCurrentUserCannotAddEmailReason( domain )?.code === EMAIL_WARNING_CODE_GRAVATAR_DOMAIN + ) { + return gravatarDomainStatus; + } + if ( hasGSuiteWithUs( domain ) ) { if ( ! canCurrentUserAddEmail( domain ) ) { return cannotManageStatus; diff --git a/client/my-sites/email/email-providers-comparison/stacked/index.tsx b/client/my-sites/email/email-providers-comparison/stacked/index.tsx index ebeb9e38412ea2..f1beb57ac56a43 100644 --- a/client/my-sites/email/email-providers-comparison/stacked/index.tsx +++ b/client/my-sites/email/email-providers-comparison/stacked/index.tsx @@ -13,12 +13,18 @@ import QueryProductsList from 'calypso/components/data/query-products-list'; import QuerySiteDomains from 'calypso/components/data/query-site-domains'; import { hasDiscount } from 'calypso/components/gsuite/gsuite-price'; import Main from 'calypso/components/main'; +import Notice from 'calypso/components/notice'; import TrackComponentView from 'calypso/lib/analytics/track-component-view'; -import { getSelectedDomain, canCurrentUserAddEmail } from 'calypso/lib/domains'; +import { + getSelectedDomain, + canCurrentUserAddEmail, + getCurrentUserCannotAddEmailReason, +} from 'calypso/lib/domains'; import { hasEmailForwards, getDomainsWithEmailForwards, } from 'calypso/lib/domains/email-forwarding'; +import { EMAIL_WARNING_CODE_GRAVATAR_DOMAIN } from 'calypso/lib/emails/email-provider-constants'; import { hasGSuiteSupportedDomain } from 'calypso/lib/gsuite'; import { GOOGLE_WORKSPACE_PRODUCT_TYPE } from 'calypso/lib/gsuite/constants'; import { domainAddNew } from 'calypso/my-sites/domains/paths'; @@ -93,6 +99,8 @@ const EmailProvidersStackedComparison = ( { const currentUserCanAddEmail = canCurrentUserAddEmail( domain ); const showNonOwnerMessage = ! currentUserCanAddEmail && ! isDomainInCart; + const cannotAddEmailWarningReason = getCurrentUserCannotAddEmailReason( domain ); + const isGravatarDomain = cannotAddEmailWarningReason?.code === EMAIL_WARNING_CODE_GRAVATAR_DOMAIN; const isGSuiteSupported = domain && canPurchaseGSuite && ( isDomainInCart || hasGSuiteSupportedDomain( [ domain ] ) ); @@ -292,13 +300,20 @@ const EmailProvidersStackedComparison = ( { { ! isDomainInCart && domain && } <> - { showNonOwnerMessage && ( + { showNonOwnerMessage && ! isGravatarDomain && ( ) } + { isGravatarDomain && ( + + { translate( + 'This domain is associated with a Gravatar profile and cannot be used for email services at this time.' + ) } + + ) } { shouldPromoteGoogleWorkspace ? [ ...emailProviderCards ].reverse() : emailProviderCards } diff --git a/client/my-sites/email/email-providers-comparison/stacked/style.scss b/client/my-sites/email/email-providers-comparison/stacked/style.scss index 87752ec62d6cd5..fa9e081899dbee 100644 --- a/client/my-sites/email/email-providers-comparison/stacked/style.scss +++ b/client/my-sites/email/email-providers-comparison/stacked/style.scss @@ -51,3 +51,7 @@ margin: 10px auto; } } + +.email-providers-stacked-comparison__notice { + margin-top: 24px; +}