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 ba89e1abcae4..ee711a0f6f7d 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 @@ -199,6 +199,7 @@ function EmailPlanMailboxesList( { ( ! actionPathProps?.disabled && actionPathProps?.path ) || undefined } showIcon={ !! actionPathProps } + showContextMenu domain={ domain } disableActions={ isGoogleConfiguring } > diff --git a/client/my-sites/email/email-management/home/email-plan-mailboxes/context-menu.scss b/client/my-sites/email/email-management/home/email-plan-mailboxes/context-menu.scss new file mode 100644 index 000000000000..8c3783e4ace0 --- /dev/null +++ b/client/my-sites/email/email-management/home/email-plan-mailboxes/context-menu.scss @@ -0,0 +1,41 @@ +.email-plan-mailboxes-list__mailbox-context-menu { + .button { + float: none !important; + margin: 0 0 0 1rem !important; + padding: 0; + } +} + +.email-plan-mailboxes-list__mailbox-context-menu-popover { + .popover__menu-item { + display: flex; + gap: 0.5rem; + align-items: center; + + .label { + flex: 1; + } + + svg { + width: 1.5rem; + height: auto; + } + + svg.gridicons-external { + width: 0.875rem; + } + + &:hover, + &:focus { + svg { + fill: var(--color-text-inverted); + } + } + + &[disabled] { + svg { + fill: var(--color-neutral-20) !important; + } + } + } +} diff --git a/client/my-sites/email/email-management/home/email-plan-mailboxes/context-menu.tsx b/client/my-sites/email/email-management/home/email-plan-mailboxes/context-menu.tsx new file mode 100644 index 000000000000..f2f94e49e722 --- /dev/null +++ b/client/my-sites/email/email-management/home/email-plan-mailboxes/context-menu.tsx @@ -0,0 +1,149 @@ +import { isDesktop } from '@automattic/viewport'; +import { Icon, desktop, mobile, cloudUpload, payment, settings, login } from '@wordpress/icons'; +import { useTranslate } from 'i18n-calypso'; +import { useCallback } from 'react'; +import EllipsisMenu from 'calypso/components/ellipsis-menu'; +import PopoverMenuItem from 'calypso/components/popover-menu/item'; +import { getGoogleAdminUrl, hasGSuiteWithUs } from 'calypso/lib/gsuite'; +import { + TITAN_CONTROL_PANEL_CONTEXT_CONFIGURE_CATCH_ALL_EMAIL, + TITAN_CONTROL_PANEL_CONTEXT_CONFIGURE_DESKTOP_APP, + TITAN_CONTROL_PANEL_CONTEXT_CONFIGURE_INTERNAL_FORWARDING, + TITAN_CONTROL_PANEL_CONTEXT_GET_MOBILE_APP, + TITAN_CONTROL_PANEL_CONTEXT_IMPORT_EMAIL_DATA, +} from 'calypso/lib/titan/constants'; +import { getTitanControlPanelRedirectPath } from 'calypso/my-sites/email/paths'; +import { useSelector } from 'calypso/state'; +import { recordTracksEvent } from 'calypso/state/analytics/actions'; +import getCurrentRoute from 'calypso/state/selectors/get-current-route'; +import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors'; +import type { ResponseDomain } from 'calypso/lib/domains/types'; + +import './context-menu.scss'; + +const CONTEXT_VIEW_BILLING_PAYMENTS = 'view_billing_payments'; +const CONTEXT_GOOGLE_WORKSPACE = 'google_workspace'; + +type Props = { + className?: string; + domain?: ResponseDomain; +}; +export default function ContextMenu( { className, domain }: Props ) { + const translate = useTranslate(); + const currentRoute = useSelector( getCurrentRoute ); + const selectedSiteId = useSelector( getSelectedSiteId ); + const selectedSiteSlug = useSelector( getSelectedSiteSlug ); + const disableItem = ! isDesktop(); + + /** + * Options + */ + const viewBillingPaymentsOption = { + context: CONTEXT_VIEW_BILLING_PAYMENTS, + icon: , + label: translate( 'View billing and payments' ), + }; + + const manageTitanOptions = [ + { + context: TITAN_CONTROL_PANEL_CONTEXT_CONFIGURE_DESKTOP_APP, + icon: , + label: translate( 'Configure desktop app' ), + disabled: disableItem, + isExternalLink: true, + }, + { + context: TITAN_CONTROL_PANEL_CONTEXT_GET_MOBILE_APP, + icon: , + label: translate( 'Get mobile app' ), + isExternalLink: true, + }, + { + context: TITAN_CONTROL_PANEL_CONTEXT_IMPORT_EMAIL_DATA, + icon: , + label: translate( 'Import email data' ), + disabled: disableItem, + isExternalLink: true, + }, + { + context: TITAN_CONTROL_PANEL_CONTEXT_CONFIGURE_CATCH_ALL_EMAIL, + icon: , + label: translate( 'Configure catch-all email' ), + disabled: disableItem, + isExternalLink: true, + }, + { + context: TITAN_CONTROL_PANEL_CONTEXT_CONFIGURE_INTERNAL_FORWARDING, + icon: , + label: translate( 'Set up internal forwarding' ), + disabled: disableItem, + isExternalLink: true, + }, + viewBillingPaymentsOption, + ]; + + const manageGoogleOptions = [ + { + context: CONTEXT_GOOGLE_WORKSPACE, + icon: , + label: translate( 'Manage Google Workspace' ), + isExternalLink: true, + }, + viewBillingPaymentsOption, + ]; + + const contextMenuOptions = hasGSuiteWithUs( domain ) ? manageGoogleOptions : manageTitanOptions; + + /** + * Callbacks + */ + const onClick = useCallback( ( context: string ) => { + recordTracksEvent( 'calypso_email_management_titan_manage_mailboxes_link_click', { + context: context, + } ); + }, [] ); + + const getPath = useCallback( + ( context: string ) => { + if ( ! domain ) { + return ''; + } + + switch ( context ) { + case CONTEXT_VIEW_BILLING_PAYMENTS: + return `/purchases/subscriptions/${ domain.name }/${ selectedSiteId }`; + + case CONTEXT_GOOGLE_WORKSPACE: + return getGoogleAdminUrl( domain.name ); + + default: + return getTitanControlPanelRedirectPath( selectedSiteSlug, domain.name, currentRoute, { + context, + } ); + } + }, + [ currentRoute, domain, selectedSiteId, selectedSiteSlug ] + ); + + /** + * Template render + */ + return ( + + { contextMenuOptions.map( ( option, key ) => ( + + { option.label } + + ) ) } + + ); +} 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 4f6e8b1fb985..3d3042387136 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 @@ -4,6 +4,7 @@ import React, { useCallback } from 'react'; import SectionHeader from 'calypso/components/section-header'; import { EMAIL_ACCOUNT_TYPE_FORWARD } from 'calypso/lib/emails/email-provider-constants'; import EmailTypeIcon from '../email-type-icon'; +import ContextMenu from './context-menu'; import type { ResponseDomain } from 'calypso/lib/domains/types'; type Props = React.PropsWithChildren< { @@ -12,6 +13,7 @@ type Props = React.PropsWithChildren< { addMailboxPath?: string; domain?: ResponseDomain; showIcon?: boolean; + showContextMenu?: boolean; disableActions?: boolean; } >; const MailboxListHeader = ( { @@ -21,6 +23,7 @@ const MailboxListHeader = ( { addMailboxPath, domain, showIcon, + showContextMenu = false, disableActions, }: Props ) => { const translate = useTranslate(); @@ -64,6 +67,12 @@ const MailboxListHeader = ( { { translate( 'Add mailbox' ) } ) } + { showContextMenu && ( + + ) } { children }