diff --git a/client/me/account/account-email-field.tsx b/client/me/account/account-email-field.tsx
index fb1202d599ae4..b25aa6a0f639e 100644
--- a/client/me/account/account-email-field.tsx
+++ b/client/me/account/account-email-field.tsx
@@ -7,8 +7,6 @@ import QueryAllDomains from 'calypso/components/data/query-all-domains';
import FormFieldset from 'calypso/components/forms/form-fieldset';
import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation';
import FormTextInput from 'calypso/components/forms/form-text-input';
-import Notice from 'calypso/components/notice';
-import NoticeAction from 'calypso/components/notice/notice-action';
import { type as domainTypes } from 'calypso/lib/domains/constants';
import { useDispatch, useSelector } from 'calypso/state';
import { isCurrentUserEmailVerified } from 'calypso/state/current-user/selectors';
@@ -96,68 +94,99 @@ const AccountEmailValidationNotice = ( {
return ;
};
-// TODO - remove this component
-const AccountEmailPendingEmailChangeNotice = ( {
- unsavedUserSettings,
- userSettings,
+const EmailFieldExplanationText = ( {
+ setIsLockedInput,
+ focusInput,
}: {
- unsavedUserSettings: UserSettingsType;
- userSettings: UserSettingsType;
+ setIsLockedInput: React.Dispatch< React.SetStateAction< boolean > >;
+ focusInput: () => void;
} ) => {
const dispatch = useDispatch();
const translate = useTranslate();
-
const domainsList: ResponseDomain[] = useSelector( getFlatDomainsList );
const isRequestingDomainList = useSelector( isRequestingAllDomains );
+ const isEmailVerified = useSelector( isCurrentUserEmailVerified );
const isEmailChangePending = useSelector( isPendingEmailChange );
-
- if ( ! isEmailChangePending ) {
- return null;
- }
-
- const editContactInfoInBulkUrl = `/domains/manage?site=all&action=edit-contact-email`;
- const email = getUserSetting( {
- settingName: 'new_user_email',
- unsavedUserSettings,
- userSettings,
- } ) as string;
-
const hasCustomDomainRegistration = domainsList.some( ( domain ) => {
return domainTypes.REGISTERED === domain.type;
} );
- const noticeText =
- isRequestingDomainList || ! hasCustomDomainRegistration
- ? translate(
- 'Your email change is pending. Please take a moment to check %(email)s for an email with the subject "[WordPress.com] New Email Address" to confirm your change.',
- {
- args: { email },
- }
- )
- : translate(
- 'Your email change is pending. Please take a moment to:{{br/}}1. Check %(email)s for an email with the subject "[WordPress.com] New Email Address" to confirm your change.{{br/}}2. Update contact information on your domain names if necessary {{link}}here{{/link}}.',
- {
- args: {
- email,
- },
- components: {
- br:
,
- link: ,
- },
- }
- );
+ const editContactInfoInBulkUrl = `/domains/manage?site=all&action=edit-contact-email`;
- return (
-
- dispatch( cancelPendingEmailChange() ) }>
- { translate( 'Cancel' ) }
-
-
+ const unlockWrapper = (
+