Domains: Implement multi-target email forwards

client/data/emails/types.ts

@@ -9,6 +9,12 @@ export type EmailAccountEmail = {
 	warnings: Warning[];
 };
 
+export type AlterDestinationParams = {
+	mailbox: string;
+	destination: string;
+	domain: string;
+};
+
 type EmailAccountDomain = {
 	domain: string;
 	is_primary: boolean;
@@ -45,4 +51,11 @@ export type Mailbox = {
 	mailbox: string;
 	warnings?: Warning[];
 	temporary?: boolean;
+	target: string;
+};
+
+export type MailboxesCluster = {
+	mailboxes: Mailbox[];
+	mailbox: string;
+	domain: string;
 };

client/data/emails/use-add-email-forward-mutation.tsx

@@ -10,8 +10,10 @@ import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import { getCacheKey as getEmailAccountsQueryKey } from './use-get-email-accounts-query';
 import type { UseMutationOptions } from '@tanstack/react-query';
 
+const ArrayOfFive = new Array( 5 );
+
 type AddMailboxFormData = {
-	destination: string;
+	destinations: typeof ArrayOfFive;
 	mailbox: string;
 };
 
@@ -65,7 +67,7 @@ export default function useAddEmailForwardMutation(
 	};
 
 	mutationOptions.onMutate = async ( variables ) => {
-		const { mailbox, destination } = variables;
+		const { mailbox, destinations } = variables;
 		suppliedOnMutate?.( variables );
 
 		await queryClient.cancelQueries( { queryKey: emailAccountsQueryKey } );
@@ -79,16 +81,16 @@ export default function useAddEmailForwardMutation(
 			const newEmailForwards = orderBy(
 				[
 					...emailForwards,
-					{
+					...destinations.map( ( d ) => ( {
 						domain: domainName,
 						email_type: 'email_forward',
 						is_verified: false,
 						mailbox,
 						role: 'standard',
-						target: destination,
+						target: d,
 						temporary: true,
 						warnings: [],
-					},
+					} ) ),
 				],
 				[ 'mailbox' ],
 				[ 'asc' ]
@@ -179,10 +181,10 @@ export default function useAddEmailForwardMutation(
 	};
 
 	return useMutation< any, unknown, AddMailboxFormData, Context >( {
-		mutationFn: ( { mailbox, destination } ) =>
+		mutationFn: ( { mailbox, destinations } ) =>
 			wp.req.post( `/domains/${ encodeURIComponent( domainName ) }/email/new`, {
 				mailbox,
-				destination,
+				destinations,
 			} ),
 		...mutationOptions,
 	} );

client/data/emails/use-remove-email-forward-mutation.tsx

@@ -8,7 +8,7 @@ import { useDispatch, useSelector } from 'calypso/state';
 import { errorNotice } from 'calypso/state/notices/actions';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import { getCacheKey as getEmailAccountsQueryKey } from './use-get-email-accounts-query';
-import type { EmailAccountEmail } from './types';
+import type { EmailAccountEmail, AlterDestinationParams, Mailbox } from './types';
 import type { UseMutationOptions } from '@tanstack/react-query';
 
 type Context = {
@@ -26,7 +26,7 @@ const MUTATION_KEY = 'removeEmailForward';
 export default function useRemoveEmailForwardMutation(
 	domainName: string,
 	mutationOptions: Omit<
-		UseMutationOptions< any, unknown, EmailAccountEmail, Context >,
+		UseMutationOptions< any, unknown, AlterDestinationParams, Context >,
 		'mutationFn'
 	> = {}
 ) {
@@ -70,7 +70,11 @@ export default function useRemoveEmailForwardMutation(
 					{
 						...previousEmailAccountsQueryData.accounts[ 0 ],
 						emails: emailForwards.filter(
-							( forward: EmailAccountEmail ) => forward.mailbox !== emailForward.mailbox
+							( forward: EmailAccountEmail ) =>
+								! (
+									forward.mailbox === emailForward.mailbox &&
+									forward.target === emailForward.destination
+								)
 						),
 					},
 				],
@@ -140,13 +144,14 @@ export default function useRemoveEmailForwardMutation(
 		dispatch( errorMessage );
 	};
 
-	return useMutation< any, unknown, EmailAccountEmail, Context >( {
-		mutationFn: ( { mailbox } ) =>
-			wp.req.post(
+	return useMutation< Mailbox, unknown, AlterDestinationParams, Context >( {
+		mutationFn: ( { mailbox, destination } ) => {
+			return wp.req.post(
 				`/domains/${ encodeURIComponent( domainName ) }/email/${ encodeURIComponent(
 					mailbox
-				) }/delete`
-			),
+				) }/${ encodeURIComponent( destination ) }/delete`
+			);
+		},
 		...mutationOptions,
 	} );
 }

client/data/emails/use-resend-verify-email-forward-mutation.tsx

@@ -1,11 +1,10 @@
 import { CALYPSO_CONTACT } from '@automattic/urls';
 import { useMutation } from '@tanstack/react-query';
 import { useTranslate } from 'i18n-calypso';
-import { getEmailForwardAddress } from 'calypso/lib/emails';
 import wp from 'calypso/lib/wp';
 import { useDispatch } from 'calypso/state';
 import { errorNotice, successNotice } from 'calypso/state/notices/actions';
-import type { EmailAccountEmail } from './types';
+import type { AlterDestinationParams } from './types';
 import type { UseMutationOptions } from '@tanstack/react-query';
 
 const MUTATION_KEY = 'reverifyEmailForward';
@@ -18,7 +17,10 @@ const MUTATION_KEY = 'reverifyEmailForward';
  */
 export default function useResendVerifyEmailForwardMutation(
 	domainName: string,
-	mutationOptions: Omit< UseMutationOptions< any, unknown, EmailAccountEmail >, 'mutationFn' > = {}
+	mutationOptions: Omit<
+		UseMutationOptions< any, unknown, AlterDestinationParams >,
+		'mutationFn'
+	> = {}
 ) {
 	const dispatch = useDispatch();
 	const translate = useTranslate();
@@ -31,7 +33,7 @@ export default function useResendVerifyEmailForwardMutation(
 	mutationOptions.onSuccess = ( data, emailForward, context ) => {
 		suppliedOnSuccess?.( data, emailForward, context );
 
-		const destination = getEmailForwardAddress( emailForward );
+		const { destination } = emailForward;
 
 		const successMessage = translate(
 			'Successfully sent confirmation email for %(email)s to %(destination)s.',
@@ -69,12 +71,12 @@ export default function useResendVerifyEmailForwardMutation(
 		dispatch( errorNotice( failureMessage ) );
 	};
 
-	return useMutation< any, unknown, EmailAccountEmail >( {
-		mutationFn: ( { mailbox } ) =>
+	return useMutation< any, unknown, AlterDestinationParams >( {
+		mutationFn: ( { mailbox, destination } ) =>
 			wp.req.post(
 				`/domains/${ encodeURIComponent( domainName ) }/email/${ encodeURIComponent(
 					mailbox
-				) }/resend-verification`
+				) }/${ encodeURIComponent( destination ) }/resend-verification`
 			),
 		...mutationOptions,
 	} );

client/lib/domains/email-forwarding/has-too-many-email-forwards.js

@@ -0,0 +1,14 @@
+const MAX_FORWARD_DESTINATIONS = 5;
+
+/**
+ * @param newEmailForward a string representing a new email forward
+ * @returns { boolean } If the email forward is has more than the maximum number of destinations.
+ */
+export function hasTooManyEmailForwardsForMailbox( newEmailForward, existingEmailForwards ) {
+	return (
+		existingEmailForwards?.filter(
+			( forward ) =>
+				forward.mailbox.localeCompare( newEmailForward, undefined, { sensitivity: 'base' } ) === 0
+		).length >= MAX_FORWARD_DESTINATIONS
+	);
+}

client/lib/domains/email-forwarding/index.js

@@ -1,8 +1,8 @@
 import emailValidator from 'email-validator';
 import { mapValues } from 'lodash';
-import { hasDuplicatedEmailForwards } from 'calypso/lib/domains/email-forwarding/has-duplicated-email-forwards';
+import { hasTooManyEmailForwardsForMailbox } from 'calypso/lib/domains/email-forwarding/has-too-many-email-forwards';
 
-function validateAllFields( fieldValues, existingEmailForwards = [] ) {
+export function validateAllFields( fieldValues, existingEmailForwards = [] ) {
 	return mapValues( fieldValues, ( value, fieldName ) => {
 		const isValid = validateField( {
 			value,
@@ -17,16 +17,23 @@ function validateAllFields( fieldValues, existingEmailForwards = [] ) {
 			return [];
 		}
 
-		return hasDuplicatedEmailForwards( value, existingEmailForwards ) ? [ 'Duplicated' ] : [];
+		return hasTooManyEmailForwardsForMailbox( value, existingEmailForwards ) ? [ 'Exhausted' ] : [];
 	} );
 }
 
-function validateField( { name, value } ) {
+export function validateField( { name, value } ) {
 	switch ( name ) {
 		case 'mailbox':
 			return /^[a-z0-9._+-]{1,64}$/i.test( value ) && ! /(^\.)|(\.{2,})|(\.$)/.test( value );
-		case 'destination':
-			return emailValidator.validate( value );
+		case 'destinations': {
+			const nonEmpty = value.filter( ( v ) => v.trim() );
+			const hasDuplicates = value.length !== new Set( value ).size;
+			return (
+				! hasDuplicates &&
+				nonEmpty.length &&
+				nonEmpty.every( ( v ) => emailValidator.validate( v ) )
+			);
+		}
 		default:
 			return true;
 	}
@@ -35,4 +42,3 @@ function validateField( { name, value } ) {
 export { getEmailForwardsCount } from './get-email-forwards-count';
 export { hasEmailForwards } from './has-email-forwards';
 export { getDomainsWithEmailForwards } from './get-domains-with-email-forwards';
-export { validateAllFields };

client/my-sites/email/email-forwarding/email-forwarding-add-new-compact-list.tsx

@@ -16,6 +16,10 @@ type Props = {
 	showFormHeader?: boolean;
 };
 
+type OnAddEmailForwardProps =
+	| { index: number; name: 'mailbox'; value: string }
+	| { index: number; name: 'destinations'; value: string[] };
+
 const EmailForwardingAddNewCompactList = ( {
 	onAddedEmailForwards,
 	onBeforeAddEmailForwards,
@@ -24,9 +28,9 @@ const EmailForwardingAddNewCompactList = ( {
 }: Props ) => {
 	const translate = useTranslate();
 
-	const [ emailForwards, setEmailForwards ] = useState( [
-		{ destination: '', mailbox: '', isValid: false },
-	] );
+	const [ emailForwards, setEmailForwards ] = useState<
+		Array< { destinations: string[]; mailbox: string; isValid: boolean } >
+	>( [ { destinations: [], mailbox: '', isValid: false } ] );
 
 	const selectedSiteId = useSelector( getSelectedSiteId );
 
@@ -52,16 +56,16 @@ const EmailForwardingAddNewCompactList = ( {
 
 		onBeforeAddEmailForwards?.();
 
-		emailForwards?.map( ( { mailbox, destination } ) => {
-			addEmailForward( { mailbox, destination } );
+		emailForwards?.map( ( { mailbox, destinations } ) => {
+			addEmailForward( { mailbox, destinations } );
 		} );
 
 		onAddedEmailForwards?.();
 	};
 
 	const onAddNewEmailForward = () => {
 		setEmailForwards( ( prev ) => {
-			return [ ...prev, { destination: '', mailbox: '', isValid: false } ];
+			return [ ...prev, { destinations: [], mailbox: '', isValid: false } ];
 		} );
 	};
 
@@ -71,18 +75,17 @@ const EmailForwardingAddNewCompactList = ( {
 		setEmailForwards( newEmailForwards );
 	};
 
-	const onUpdateEmailForward = (
-		index: number,
-		name: 'destination' | 'mailbox',
-		value: string
-	) => {
+	const onUpdateEmailForward = ( { index, name, value }: OnAddEmailForwardProps ) => {
 		const newEmailForwards = [ ...emailForwards ];
-		newEmailForwards[ index ][ name ] = value;
+		if ( name === 'destinations' ) {
+			newEmailForwards[ index ].destinations = value;
+		} else {
+			newEmailForwards[ index ].mailbox = value;
+		}
 
 		const validEmailForward = validateAllFields( newEmailForwards[ index ], existingEmailForwards );
 		newEmailForwards[ index ].isValid =
-			validEmailForward.mailbox.length === 0 && validEmailForward.destination.length === 0;
-
+			validEmailForward.mailbox.length === 0 && validEmailForward.destinations.length === 0;
 		setEmailForwards( newEmailForwards );
 	};