Domain management: Email: Create context menu component (#97711)

* Domain management: Email: Create context menu component

* Update className to be dynamic

* Update icon hover/focus style and popover position

* Update context menu with generate path logic

* Add context menu style for disabled items

* Rename context constant

* Refactor titan options

* Integrate context menu for the all domain context

* Cover google workspace context

* Add external link icons

* Transfer px to rem unit

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 }
 						>

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;
+			}
+		}
+	}
+}

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: <Icon icon={ payment } />,
+		label: translate( 'View billing and payments' ),
+	};
+
+	const manageTitanOptions = [
+		{
+			context: TITAN_CONTROL_PANEL_CONTEXT_CONFIGURE_DESKTOP_APP,
+			icon: <Icon icon={ desktop } />,
+			label: translate( 'Configure desktop app' ),
+			disabled: disableItem,
+			isExternalLink: true,
+		},
+		{
+			context: TITAN_CONTROL_PANEL_CONTEXT_GET_MOBILE_APP,
+			icon: <Icon icon={ mobile } />,
+			label: translate( 'Get mobile app' ),
+			isExternalLink: true,
+		},
+		{
+			context: TITAN_CONTROL_PANEL_CONTEXT_IMPORT_EMAIL_DATA,
+			icon: <Icon icon={ cloudUpload } />,
+			label: translate( 'Import email data' ),
+			disabled: disableItem,
+			isExternalLink: true,
+		},
+		{
+			context: TITAN_CONTROL_PANEL_CONTEXT_CONFIGURE_CATCH_ALL_EMAIL,
+			icon: <Icon icon={ settings } />,
+			label: translate( 'Configure catch-all email' ),
+			disabled: disableItem,
+			isExternalLink: true,
+		},
+		{
+			context: TITAN_CONTROL_PANEL_CONTEXT_CONFIGURE_INTERNAL_FORWARDING,
+			icon: <Icon icon={ login } />,
+			label: translate( 'Set up internal forwarding' ),
+			disabled: disableItem,
+			isExternalLink: true,
+		},
+		viewBillingPaymentsOption,
+	];
+
+	const manageGoogleOptions = [
+		{
+			context: CONTEXT_GOOGLE_WORKSPACE,
+			icon: <Icon icon={ settings } />,
+			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 (
+		<EllipsisMenu
+			className={ className }
+			popoverClassName={ `${ className }-popover` }
+			position="bottom"
+		>
+			{ contextMenuOptions.map( ( option, key ) => (
+				<PopoverMenuItem
+					key={ key }
+					{ ...option }
+					onClick={ onClick }
+					href={ getPath( option.context ) }
+				>
+					<span className="label">{ option.label }</span>
+				</PopoverMenuItem>
+			) ) }
+		</EllipsisMenu>
+	);
+}

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' ) }
 					</Button>
 				) }
+				{ showContextMenu && (
+					<ContextMenu
+						domain={ domain }
+						className="email-plan-mailboxes-list__mailbox-context-menu"
+					/>
+				) }
 			</SectionHeader>
 			{ children }
 		</div>