abstract field logic to new hook

Automattic · Sep 2, 2024 · b5c9d28 · b5c9d28
1 parent e654eae
commit b5c9d28
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 52 deletions.
diff --git a/client/my-sites/email/add-mailboxes/index.tsx b/client/my-sites/email/add-mailboxes/index.tsx
@@ -38,14 +38,14 @@ import {
 	FIELD_PASSWORD_RESET_EMAIL,
 } from 'calypso/my-sites/email/form/mailboxes/constants';
 import { EmailProvider } from 'calypso/my-sites/email/form/mailboxes/types';
+import { usePasswordResetEmailField } from 'calypso/my-sites/email/hooks/use-password-reset-email-field';
 import { MAILBOXES_SOURCE } from 'calypso/my-sites/email/mailboxes/constants';
 import {
 	getEmailManagementPath,
 	getMailboxesPath,
 	getTitanSetUpMailboxPath,
 } from 'calypso/my-sites/email/paths';
 import { useSelector } from 'calypso/state';
-import { getCurrentUserEmail } from 'calypso/state/current-user/selectors';
 import { ProductListItem } from 'calypso/state/products-list/selectors/get-products-list';
 import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import {
@@ -235,21 +235,17 @@ const MailboxesForm = ( {
 	emailProduct: ProductListItem | null;
 	goToEmail: () => void;
 } ): JSX.Element => {
-	const userEmail = useSelector( getCurrentUserEmail );
 	const [ isAddingToCart, setIsAddingToCart ] = useState( false );
 	const [ isValidating, setIsValidating ] = useState( false );
 
-	const isPasswordResetEmailValid = ! new RegExp( `@${ selectedDomainName }$` ).test( userEmail );
+	const defaultHiddenFields: HiddenFieldNames[] = [ FIELD_NAME ];
 
-	// Check if the email is valid prior to official validation so we can
-	// show the field without triggering a validation error when the page
-	// first loads.
-	const defaultHiddenFields: HiddenFieldNames[] = isPasswordResetEmailValid
-		? [ FIELD_NAME, FIELD_PASSWORD_RESET_EMAIL ]
-		: [ FIELD_NAME ];
+	const { hiddenFields, passwordResetEmailFieldInitialValue } = usePasswordResetEmailField( {
+		selectedDomainName,
+		defaultHiddenFields,
+	} );
 
-	const [ hiddenFieldNames, setHiddenFieldNames ] =
-		useState< HiddenFieldNames[] >( defaultHiddenFields );
+	const [ hiddenFieldNames, setHiddenFieldNames ] = useState< HiddenFieldNames[] >( hiddenFields );
 
 	const cartKey = useCartKey();
 	const cartManager = useShoppingCart( cartKey );
@@ -327,7 +323,7 @@ const MailboxesForm = ( {
 					areButtonsBusy={ isAddingToCart || isValidating }
 					hiddenFieldNames={ hiddenFieldNames }
 					initialFieldValues={ {
-						[ FIELD_PASSWORD_RESET_EMAIL ]: isPasswordResetEmailValid ? userEmail : '',
+						[ FIELD_PASSWORD_RESET_EMAIL ]: passwordResetEmailFieldInitialValue,
 					} }
 					onSubmit={ onSubmit }
 					onCancel={ onCancel }

diff --git a/...y-sites/email/email-providers-comparison/stacked/provider-cards/google-workspace-card.tsx b/...y-sites/email/email-providers-comparison/stacked/provider-cards/google-workspace-card.tsx
@@ -22,8 +22,8 @@ import {
 import PasswordResetTipField from 'calypso/my-sites/email/form/mailboxes/components/password-reset-tip-field';
 import { FIELD_PASSWORD_RESET_EMAIL } from 'calypso/my-sites/email/form/mailboxes/constants';
 import { EmailProvider } from 'calypso/my-sites/email/form/mailboxes/types';
+import { usePasswordResetEmailField } from 'calypso/my-sites/email/hooks/use-password-reset-email-field';
 import { useDispatch, useSelector } from 'calypso/state';
-import { getCurrentUserEmail } from 'calypso/state/current-user/selectors';
 import canUserPurchaseGSuite from 'calypso/state/selectors/can-user-purchase-gsuite';
 import { getDomainsBySiteId } from 'calypso/state/sites/domains/selectors';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
@@ -87,19 +87,11 @@ const GoogleWorkspaceCard = ( props: EmailProvidersStackedCardProps ) => {
 
 	const [ addingToCart, setAddingToCart ] = useState( false );
 
-	const userEmail = useSelector( getCurrentUserEmail );
-
-	// Check if the email is valid prior to official validation so we can
-	// show the field without triggering a validation error when the page
-	// first loads.
-	const isPasswordResetEmailValid = ! new RegExp( `@${ selectedDomainName }$` ).test( userEmail );
-
-	const defaultHiddenFields: HiddenFieldNames[] = isPasswordResetEmailValid
-		? [ FIELD_PASSWORD_RESET_EMAIL ]
-		: [];
+	const { hiddenFields, passwordResetEmailFieldInitialValue } = usePasswordResetEmailField( {
+		selectedDomainName,
+	} );
 
-	const [ hiddenFieldNames, setHiddenFieldNames ] =
-		useState< HiddenFieldNames[] >( defaultHiddenFields );
+	const [ hiddenFieldNames, setHiddenFieldNames ] = useState< HiddenFieldNames[] >( hiddenFields );
 
 	const showPasswordResetEmailField = ( event: MouseEvent< HTMLElement > ) => {
 		event.preventDefault();
@@ -137,7 +129,7 @@ const GoogleWorkspaceCard = ( props: EmailProvidersStackedCardProps ) => {
 		<NewMailBoxList
 			areButtonsBusy={ addingToCart }
 			initialFieldValues={ {
-				[ FIELD_PASSWORD_RESET_EMAIL ]: isPasswordResetEmailValid ? userEmail : '',
+				[ FIELD_PASSWORD_RESET_EMAIL ]: passwordResetEmailFieldInitialValue,
 			} }
 			isInitialMailboxPurchase
 			hiddenFieldNames={ hiddenFieldNames }

diff --git a/...sites/email/email-providers-comparison/stacked/provider-cards/professional-email-card.tsx b/...sites/email/email-providers-comparison/stacked/provider-cards/professional-email-card.tsx
@@ -21,8 +21,8 @@ import {
 	FIELD_PASSWORD_RESET_EMAIL,
 } from 'calypso/my-sites/email/form/mailboxes/constants';
 import { EmailProvider } from 'calypso/my-sites/email/form/mailboxes/types';
+import { usePasswordResetEmailField } from 'calypso/my-sites/email/hooks/use-password-reset-email-field';
 import { useDispatch, useSelector } from 'calypso/state';
-import { getCurrentUserEmail } from 'calypso/state/current-user/selectors';
 import { getDomainsBySiteId } from 'calypso/state/sites/domains/selectors';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import type { EmailProvidersStackedCardProps, ProviderCardProps } from './provider-card-props';
@@ -91,20 +91,14 @@ const ProfessionalEmailCard = ( props: EmailProvidersStackedCardProps ) => {
 	const dispatch = useDispatch();
 	const shoppingCartManager = useShoppingCart( cartKey );
 	const [ addingToCart, setAddingToCart ] = useState( false );
+	const defaultHiddenFields: HiddenFieldNames[] = [ FIELD_NAME ];
 
-	const userEmail = useSelector( getCurrentUserEmail );
-
-	// Check if the email is valid prior to official validation so we can
-	// show the field without triggering a validation error when the page
-	// first loads.
-	const isPasswordResetEmailValid = ! new RegExp( `@${ selectedDomainName }$` ).test( userEmail );
-
-	const defaultHiddenFields: HiddenFieldNames[] = isPasswordResetEmailValid
-		? [ FIELD_NAME, FIELD_PASSWORD_RESET_EMAIL ]
-		: [ FIELD_NAME ];
+	const { hiddenFields, passwordResetEmailFieldInitialValue } = usePasswordResetEmailField( {
+		selectedDomainName,
+		defaultHiddenFields,
+	} );
 
-	const [ hiddenFieldNames, setHiddenFieldNames ] =
-		useState< HiddenFieldNames[] >( defaultHiddenFields );
+	const [ hiddenFieldNames, setHiddenFieldNames ] = useState< HiddenFieldNames[] >( hiddenFields );
 
 	const showPasswordResetEmailField = ( event: MouseEvent< HTMLElement > ) => {
 		event.preventDefault();
@@ -135,7 +129,7 @@ const ProfessionalEmailCard = ( props: EmailProvidersStackedCardProps ) => {
 			areButtonsBusy={ addingToCart }
 			hiddenFieldNames={ hiddenFieldNames }
 			initialFieldValues={ {
-				[ FIELD_PASSWORD_RESET_EMAIL ]: isPasswordResetEmailValid ? userEmail : '',
+				[ FIELD_PASSWORD_RESET_EMAIL ]: passwordResetEmailFieldInitialValue,
 			} }
 			isInitialMailboxPurchase
 			onSubmit={ handleSubmit }

diff --git a/client/my-sites/email/hooks/use-password-reset-email-field.ts b/client/my-sites/email/hooks/use-password-reset-email-field.ts
@@ -0,0 +1,33 @@
+import { useSelector } from 'react-redux';
+import { FIELD_PASSWORD_RESET_EMAIL } from 'calypso/my-sites/email/form/mailboxes/constants';
+import { getCurrentUserEmail } from 'calypso/state/current-user/selectors';
+import { HiddenFieldNames } from '/Users/chad/dev/wp-calypso/client/my-sites/email/form/mailboxes/components/new-mailbox-list/index';
+
+type PasswordResetEmailFieldProps = {
+	selectedDomainName: string;
+	defaultHiddenFields?: HiddenFieldNames[];
+};
+
+type PasswordResetEmailFieldOptions = {
+	hiddenFields: HiddenFieldNames[];
+	passwordResetEmailFieldInitialValue: string;
+};
+
+export function usePasswordResetEmailField( {
+	selectedDomainName,
+	defaultHiddenFields = [],
+}: PasswordResetEmailFieldProps ): PasswordResetEmailFieldOptions {
+	const userEmail = useSelector( getCurrentUserEmail );
+
+	// Check if the email is valid prior to official validation so we can
+	// show the field without triggering a validation error when the page
+	// first loads.
+	const isPasswordResetEmailValid = ! new RegExp( `@${ selectedDomainName }$` ).test( userEmail );
+
+	return {
+		hiddenFields: isPasswordResetEmailValid
+			? [ ...defaultHiddenFields, FIELD_PASSWORD_RESET_EMAIL ]
+			: defaultHiddenFields,
+		passwordResetEmailFieldInitialValue: isPasswordResetEmailValid ? userEmail : '',
+	};
+}
diff --git a/client/my-sites/email/titan-set-up-mailbox/titan-set-up-mailbox-form.tsx b/client/my-sites/email/titan-set-up-mailbox/titan-set-up-mailbox-form.tsx
@@ -14,10 +14,10 @@ import {
 	FIELD_PASSWORD_RESET_EMAIL,
 } from 'calypso/my-sites/email/form/mailboxes/constants';
 import { EmailProvider } from 'calypso/my-sites/email/form/mailboxes/types';
+import { usePasswordResetEmailField } from 'calypso/my-sites/email/hooks/use-password-reset-email-field';
 import { getEmailManagementPath } from 'calypso/my-sites/email/paths';
 import { useDispatch, useSelector } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
-import { getCurrentUserEmail } from 'calypso/state/current-user/selectors';
 import { successNotice, errorNotice } from 'calypso/state/notices/actions';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import type { MailboxForm } from 'calypso/my-sites/email/form/mailboxes';
@@ -117,19 +117,15 @@ const TitanSetUpMailboxForm = ( {
 	const translate = useTranslate();
 	const [ isValidating, setIsValidating ] = useState( false );
 	const handleCompleteSetup = useHandleCompleteSetup( selectedDomainName, setIsValidating );
-	const userEmail = useSelector( getCurrentUserEmail );
 
-	// Check if the email is valid prior to official validation so we can
-	// show the field without triggering a validation error when the page
-	// first loads.
-	const isPasswordResetEmailValid = ! new RegExp( `@${ selectedDomainName }$` ).test( userEmail );
+	const defaultHiddenFields: HiddenFieldNames[] = [ FIELD_NAME ];
 
-	const defaultHiddenFields: HiddenFieldNames[] = isPasswordResetEmailValid
-		? [ FIELD_NAME, FIELD_PASSWORD_RESET_EMAIL ]
-		: [ FIELD_NAME ];
+	const { hiddenFields, passwordResetEmailFieldInitialValue } = usePasswordResetEmailField( {
+		selectedDomainName,
+		defaultHiddenFields,
+	} );
 
-	const [ hiddenFieldNames, setHiddenFieldNames ] =
-		useState< HiddenFieldNames[] >( defaultHiddenFields );
+	const [ hiddenFieldNames, setHiddenFieldNames ] = useState< HiddenFieldNames[] >( hiddenFields );
 
 	if ( ! areSiteDomainsLoaded ) {
 		return <AddEmailAddressesCardPlaceholder />;
@@ -146,7 +142,7 @@ const TitanSetUpMailboxForm = ( {
 				areButtonsBusy={ isValidating }
 				hiddenFieldNames={ hiddenFieldNames }
 				initialFieldValues={ {
-					[ FIELD_PASSWORD_RESET_EMAIL ]: isPasswordResetEmailValid ? userEmail : '',
+					[ FIELD_PASSWORD_RESET_EMAIL ]: passwordResetEmailFieldInitialValue,
 				} }
 				isAutoFocusEnabled
 				onSubmit={ handleCompleteSetup }