From 7dfda7b84a8c1c18553b8da76123f46b32267e28 Mon Sep 17 00:00:00 2001 From: Bogdan Nikolic Date: Mon, 30 Dec 2024 14:39:21 +0100 Subject: [PATCH 1/8] Create add mailbox custom header component --- .../headers/add-mailbox-header.tsx | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 client/my-sites/domains/domain-management/subpage-wrapper/headers/add-mailbox-header.tsx diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/headers/add-mailbox-header.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/headers/add-mailbox-header.tsx new file mode 100644 index 0000000000000..38b06dfe57299 --- /dev/null +++ b/client/my-sites/domains/domain-management/subpage-wrapper/headers/add-mailbox-header.tsx @@ -0,0 +1,41 @@ +import { useTranslate } from 'i18n-calypso'; +import NavigationHeader from 'calypso/components/navigation-header'; +import { + domainManagementAllEmailRoot, + domainManagementOverviewRoot, +} from 'calypso/my-sites/domains/paths'; +import { CustomHeaderComponentType } from './custom-header-component-type'; + +const AddMailboxHeader: CustomHeaderComponentType = ( { + selectedDomainName, + selectedSiteSlug, +} ) => { + const translate = useTranslate(); + return ( + <> + + + + ); +}; + +export default AddMailboxHeader; From ec49b0f57f71645d17bbbabc97b58be037352b5d Mon Sep 17 00:00:00 2001 From: Bogdan Nikolic Date: Mon, 30 Dec 2024 18:44:49 +0100 Subject: [PATCH 2/8] Add subpage key class and update AddMailbox comp style --- .../domain-management/subpage-wrapper/index.tsx | 5 +++-- .../domain-management/subpage-wrapper/style.scss | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/index.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/index.tsx index 3ccc7caa40f4f..5d5fe44cfc88a 100644 --- a/client/my-sites/domains/domain-management/subpage-wrapper/index.tsx +++ b/client/my-sites/domains/domain-management/subpage-wrapper/index.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import NavigationHeader from 'calypso/components/navigation-header'; import { domainManagementAllOverview } from 'calypso/my-sites/domains/paths'; import { getSubpageParams } from './subpages'; @@ -15,7 +16,7 @@ const SubpageWrapper = ( { children, subpageKey, siteName, domainName }: Subpage if ( CustomHeader ) { return ( -
+
+
Date: Mon, 30 Dec 2024 18:46:46 +0100 Subject: [PATCH 3/8] Extend AddMailbox component to support different use cases --- client/my-sites/email/add-mailboxes/index.tsx | 37 ++++++++++++++++--- 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/client/my-sites/email/add-mailboxes/index.tsx b/client/my-sites/email/add-mailboxes/index.tsx index 1fcfd74cf1d0a..9fa6a5d780b06 100644 --- a/client/my-sites/email/add-mailboxes/index.tsx +++ b/client/my-sites/email/add-mailboxes/index.tsx @@ -62,6 +62,9 @@ interface AddMailboxesProps { provider?: EmailProvider; selectedDomainName: string; source?: string; + showPageHeader?: boolean; + showFormHeader?: boolean; + customFormHeader?: boolean; } interface AddMailboxesAdditionalProps { @@ -75,6 +78,9 @@ interface AddMailboxesAdditionalProps { selectedSiteId: number | undefined | null; source: string; translate: typeof translate; + showPageHeader?: boolean; + showFormHeader?: boolean; + customFormHeader?: boolean; } const isTitan = ( provider: EmailProvider ): boolean => provider === EmailProvider.Titan; @@ -83,6 +89,9 @@ const useAdditionalProps = ( { provider = EmailProvider.Titan, selectedDomainName, source = '', + showPageHeader = true, + showFormHeader = true, + customFormHeader, }: AddMailboxesProps ): AddMailboxesAdditionalProps => { const selectedSite = useSelector( getSelectedSite ); const selectedSiteId = selectedSite?.ID; @@ -117,6 +126,9 @@ const useAdditionalProps = ( { selectedSiteId, source, translate, + showPageHeader, + showFormHeader, + customFormHeader, }; }; @@ -231,6 +243,8 @@ const MailboxesForm = ( { selectedSite, source, translate, + showFormHeader, + customFormHeader, }: AddMailboxesAdditionalProps & { emailProduct: ProductListItem | null; goToEmail: () => void; @@ -317,9 +331,14 @@ const MailboxesForm = ( { return ( <> - - - + { showFormHeader && } + + + { !! customFormHeader && ( +
+ { customFormHeader } +
+ ) } { selectedSite, source, translate, + showPageHeader, } = additionalProps; const emailProduct = useSelector( ( state ) => @@ -396,9 +416,14 @@ const AddMailboxes = ( props: AddMailboxesProps ): JSX.Element | null => {
- - - { productName + ': ' + selectedDomainName } + { showPageHeader && ( + <> + + + { productName + ': ' + selectedDomainName } + + + ) } From 10f7a13d7b3d293c5cb303fb48de20936bc2a409 Mon Sep 17 00:00:00 2001 From: Bogdan Nikolic Date: Mon, 30 Dec 2024 18:48:22 +0100 Subject: [PATCH 4/8] Register new AddMailbox subpage --- .../domain-management/subpage-wrapper/subpages.tsx | 8 ++++++++ client/my-sites/domains/index.js | 13 +++++++++++++ client/my-sites/email/controller.js | 3 +++ 3 files changed, 24 insertions(+) diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx index 4e1eaf93c8015..228d8da914906 100644 --- a/client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx +++ b/client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx @@ -1,5 +1,6 @@ import { __ } from '@wordpress/i18n'; import AddForwardingEmailHeader from './headers/add-fowarding-email-header'; +import MailboxHeader from './headers/add-mailbox-header'; import CompareEmailProvidersHeader from './headers/compare-email-providers'; import { CustomHeaderComponentType } from './headers/custom-header-component-type'; import DnsRecordHeader, { @@ -21,6 +22,7 @@ type SubpageWrapperParamsType = { }; // Subpage keys +export const ADD_MAILBOX = 'add-mailbox'; export const ADD_FORWARDING_EMAIL = 'add-forwarding-email'; export const COMPARE_EMAIL_PROVIDERS = 'compare-email-providers'; export const DNS_RECORDS = 'dns-records'; @@ -63,6 +65,12 @@ const SUBPAGE_TO_PARAMS_MAP: Record< string, SubpageWrapperParamsType > = { showBreadcrumb: false, context: 'edit', }, + [ ADD_MAILBOX ]: { + CustomHeader: MailboxHeader, + showFormHeader: false, + showPageHeader: false, + customFormHeader: __( 'New mailbox' ), + }, }; export const getSubpageParams = ( subPageKey: string ): SubpageWrapperParamsType => { diff --git a/client/my-sites/domains/index.js b/client/my-sites/domains/index.js index b1cbde2818571..0bd92b7b719e1 100644 --- a/client/my-sites/domains/index.js +++ b/client/my-sites/domains/index.js @@ -17,6 +17,7 @@ import { EMAIL_MANAGEMENT, } from './domain-management/domain-overview-pane/constants'; import { + ADD_MAILBOX, ADD_FORWARDING_EMAIL, COMPARE_EMAIL_PROVIDERS, DNS_RECORDS, @@ -484,4 +485,16 @@ export default function () { makeLayout, clientRender ); + + page( + paths.domainManagementAllEmailRoot() + '/:site/titan/new/:domain', + siteSelection, + navigation, + domainManagementController.domainManagementSubpageParams( ADD_MAILBOX ), + emailController.emailManagementNewTitanAccount, + domainManagementController.domainManagementSubpageView, + domainManagementController.domainDashboardLayout, + makeLayout, + clientRender + ); } diff --git a/client/my-sites/email/controller.js b/client/my-sites/email/controller.js index b504e07371d5f..f0b8564192795 100644 --- a/client/my-sites/email/controller.js +++ b/client/my-sites/email/controller.js @@ -103,6 +103,9 @@ export default { provider={ EmailProvider.Titan } selectedDomainName={ pageContext.params.domain } source={ pageContext.query.source } + showPageHeader={ pageContext?.params?.showPageHeader } + showFormHeader={ pageContext?.params?.showFormHeader } + customFormHeader={ pageContext?.params?.customFormHeader } /> ); From 3967d50236290cae87440b7453144a9e54b92185 Mon Sep 17 00:00:00 2001 From: Bogdan Nikolic Date: Mon, 30 Dec 2024 18:48:47 +0100 Subject: [PATCH 5/8] Update path to support all-domain context --- client/my-sites/email/paths.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/my-sites/email/paths.ts b/client/my-sites/email/paths.ts index 0be6072ac8c19..cf914b8d739a9 100644 --- a/client/my-sites/email/paths.ts +++ b/client/my-sites/email/paths.ts @@ -126,7 +126,15 @@ export const getNewTitanAccountPath: EmailPathUtilityFunction = ( domainName, relativeTo, urlParameters -) => getPath( siteName, domainName, 'titan/new', relativeTo, urlParameters ); +) => { + if ( isUnderDomainManagementAll( relativeTo ) ) { + return `${ domainsManagementPrefix }/${ domainName }/titan/new/${ siteName }${ buildQueryString( + urlParameters + ) }`; + } + + return getPath( siteName, domainName, 'titan/new', relativeTo, urlParameters ); +}; // Retrieves the URL to set up Titan mailboxes export const getTitanSetUpMailboxPath: EmailPathUtilityFunction = ( From bd753a49e42b8ee6fbfa702a8f093dcb7f6bf8ea Mon Sep 17 00:00:00 2001 From: Paulo Cruz Date: Mon, 6 Jan 2025 18:57:05 -0300 Subject: [PATCH 6/8] Fix placeholder layout --- .../subpage-wrapper/style.scss | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/style.scss b/client/my-sites/domains/domain-management/subpage-wrapper/style.scss index c23206e5eb475..bf421590da3af 100644 --- a/client/my-sites/domains/domain-management/subpage-wrapper/style.scss +++ b/client/my-sites/domains/domain-management/subpage-wrapper/style.scss @@ -167,7 +167,7 @@ &.subpage-wrapper--add-mailbox { .card-heading.new-mailbox-list__numbered-heading, .section-header__label { - color: var(--studio-gray-100); + color: $studio-gray-100; font-size: 1rem; font-weight: 500; margin-bottom: 1rem; @@ -176,6 +176,21 @@ .card.new-mailbox { border-radius: 4px; } + + .new-mailbox-list__separator { + margin-inline: -24px; + background: $studio-gray-5; + } + + .vertical-nav { + .card.is-placeholder:first-child { + border-radius: 4px 4px 0 0; + } + + .card.is-placeholder:last-child { + border-radius: 0 0 4px 4px; + } + } } } From 22fa5a945dd72912b293177c33ef5dd0885a49b4 Mon Sep 17 00:00:00 2001 From: Paulo Cruz Date: Mon, 6 Jan 2025 18:57:37 -0300 Subject: [PATCH 7/8] Redirect back to emails page after checkout --- client/my-sites/email/add-mailboxes/index.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/client/my-sites/email/add-mailboxes/index.tsx b/client/my-sites/email/add-mailboxes/index.tsx index 9fa6a5d780b06..f297c6029f01a 100644 --- a/client/my-sites/email/add-mailboxes/index.tsx +++ b/client/my-sites/email/add-mailboxes/index.tsx @@ -18,6 +18,10 @@ import { GOOGLE_PROVIDER_NAME } from 'calypso/lib/gsuite/constants'; import { getTitanProductName } from 'calypso/lib/titan'; import { TITAN_PROVIDER_NAME } from 'calypso/lib/titan/constants'; import useCartKey from 'calypso/my-sites/checkout/use-cart-key'; +import { + domainManagementAllEmailRoot, + isUnderDomainManagementAll, +} from 'calypso/my-sites/domains/paths'; import AddEmailAddressesCardPlaceholder from 'calypso/my-sites/email/add-mailboxes/add-users-placeholder'; import EmailProviderPricingNotice from 'calypso/my-sites/email/add-mailboxes/email-provider-pricing-notice'; import { @@ -245,6 +249,7 @@ const MailboxesForm = ( { translate, showFormHeader, customFormHeader, + currentRoute, }: AddMailboxesAdditionalProps & { emailProduct: ProductListItem | null; goToEmail: () => void; @@ -318,10 +323,18 @@ const MailboxesForm = ( { recordContinueEvent( { canContinue: true } ); setIsAddingToCart( true ); + const selectedSiteSlug = selectedSite?.slug ?? ''; + let checkoutPath = '/checkout/' + selectedSiteSlug; + + if ( isUnderDomainManagementAll( currentRoute ) ) { + const redirectTo = `${ domainManagementAllEmailRoot() }/${ selectedDomainName }/${ selectedSiteSlug }`; + checkoutPath += '?redirect_to=' + encodeURIComponent( redirectTo ); + } + cartManager .addProductsToCart( [ getCartItems( mailboxOperations.mailboxes, mailProperties ) ] ) .then( () => { - page( '/checkout/' + selectedSite?.slug ?? '' ); + page( checkoutPath ); } ) .finally( () => setIsAddingToCart( false ) ) .catch( () => { From e1ab69731ac59dc094edb7ada7bd118f57f498d1 Mon Sep 17 00:00:00 2001 From: Paulo Cruz Date: Tue, 7 Jan 2025 09:23:21 -0300 Subject: [PATCH 8/8] Add missing new-email param --- client/my-sites/email/add-mailboxes/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/my-sites/email/add-mailboxes/index.tsx b/client/my-sites/email/add-mailboxes/index.tsx index f297c6029f01a..4c7ca91a4cef7 100644 --- a/client/my-sites/email/add-mailboxes/index.tsx +++ b/client/my-sites/email/add-mailboxes/index.tsx @@ -327,7 +327,8 @@ const MailboxesForm = ( { let checkoutPath = '/checkout/' + selectedSiteSlug; if ( isUnderDomainManagementAll( currentRoute ) ) { - const redirectTo = `${ domainManagementAllEmailRoot() }/${ selectedDomainName }/${ selectedSiteSlug }`; + const newEmail = mailboxOperations.mailboxes[ 0 ].getAsCartItem().email; + const redirectTo = `${ domainManagementAllEmailRoot() }/${ selectedDomainName }/${ selectedSiteSlug }?new-email=${ newEmail }`; checkoutPath += '?redirect_to=' + encodeURIComponent( redirectTo ); }