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 }