feat: Add Dismissible Alert Informing Learner of Failed Name Verification

If a learner requests a profile name change or verified name change that requires ID verification, their ID verification submission may be rejected. This code change adds a dismissible error alert to the Account Settings page informing the learner of the failure and redirecting them to a help article about ID verification failures. The local storage key used to determine whether to show the alert or not uses the created time of the name verification object to ensure that subsequent ID verification failures still trigger this alert, even for the same name.

MST-954 (https://openedx.atlassian.net/browse/MST-954)

src/account-settings/AccountSettingsPage.jsx

@@ -13,8 +13,8 @@ import {
   getCountryList,
   getLanguageList,
 } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Icon } from '@edx/paragon';
-import { CheckCircle, WarningFilled } from '@edx/paragon/icons';
+import { Button, Hyperlink, Icon } from '@edx/paragon';
+import { CheckCircle, Error, WarningFilled } from '@edx/paragon/icons';
 
 import messages from './AccountSettingsPage.messages';
 import { fetchSettings, saveSettings, updateDraft } from './data/actions';
@@ -230,8 +230,43 @@ class AccountSettingsPage extends React.Component {
         id="dismissedVerifiedNameSuccessMessage"
         variant="success"
         icon={CheckCircle}
-        header={this.props.intl.formatMessage(messages['account.settings.field.name.verified.sucess.message.header'])}
-        body={this.props.intl.formatMessage(messages['account.settings.field.name.verified.sucess.message'])}
+        header={this.props.intl.formatMessage(messages['account.settings.field.name.verified.success.message.header'])}
+        body={this.props.intl.formatMessage(messages['account.settings.field.name.verified.success.message'])}
+      />
+    );
+  }
+
+  renderVerifiedNameFailureMessage(verifiedName, created) {
+    const dateValue = new Date(created).valueOf();
+    const id = `dismissedVerifiedNameFailureMessage-${verifiedName}-${dateValue}`;
+
+    return (
+      <OneTimeDismissibleAlert
+        id={id}
+        variant="danger"
+        icon={Error}
+        header={this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.header'])}
+        body={
+          (
+            <>
+              <div className="d-flex flex-row">
+                {this.props.intl.formatMessage(
+                  messages['account.settings.field.name.verified.failure.message'], {
+                    verifiedName,
+                  },
+                )}
+              </div>
+              <div className="d-flex flex-row-reverse mt-3">
+                <Button
+                  variant="primary"
+                  href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied"
+                >
+                  {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
+                </Button>{' '}
+              </div>
+            </>
+          )
+        }
       />
     );
   }
@@ -294,7 +329,20 @@ class AccountSettingsPage extends React.Component {
     const verifiedName = this.getMostRecentVerifiedNameRecord(this.props.formValues.verifiedNameHistory.results);
     const showVerifiedName = verifiedName
       && this.props.formValues.verifiedNameHistory.verified_name_enabled;
-    const showVerifiedApproved = showVerifiedName && verifiedName.status === 'approved';
+
+    let verifiedNameMessage;
+    let showVerifiedApproved = false;
+    switch (verifiedName.status) {
+      case 'approved':
+        showVerifiedApproved = true;
+        verifiedNameMessage = this.renderVerifiedNameSuccessMessage();
+        break;
+      case 'denied':
+        verifiedNameMessage = this.renderVerifiedNameFailureMessage(verifiedName.verified_name, verifiedName.created);
+        break;
+      default:
+        verifiedNameMessage = null;
+    }
 
     const timeZoneOptions = this.getLocalizedTimeZoneOptions(
       this.props.timeZoneOptions,
@@ -306,7 +354,7 @@ class AccountSettingsPage extends React.Component {
     return (
       <>
         <div className="account-section" id="basic-information" ref={this.navLinkRefs['#basic-information']}>
-          {showVerifiedApproved && this.renderVerifiedNameSuccessMessage()}
+          {showVerifiedName && verifiedNameMessage}
 
           <h2 className="section-heading">
             {this.props.intl.formatMessage(messages['account.settings.section.account.information'])}

src/account-settings/AccountSettingsPage.messages.jsx

@@ -106,16 +106,31 @@ const messages = defineMessages({
     defaultMessage: 'Verification Pending. This usually takes 48 hours or less. Verified Name cannot be changed while identity verification is pending',
     description: 'Help text for the account settings verified name field when the name is pending verification.',
   },
-  'account.settings.field.name.verified.sucess.message': {
-    id: 'account.settings.field.name.verified.sucess.message',
+  'account.settings.field.name.verified.success.message': {
+    id: 'account.settings.field.name.verified.success.message',
     defaultMessage: 'Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.',
     description: 'The body of the success alert indicating that a user\'s name has been verified',
   },
-  'account.settings.field.name.verified.sucess.message.header': {
-    id: 'account.settings.field.name.verified.sucess.message.header',
+  'account.settings.field.name.verified.success.message.header': {
+    id: 'account.settings.field.name.verified.success.message.header',
     defaultMessage: 'Your name change request is complete!',
     description: 'The header of the success alert indicating that a user\'s name has been verified',
   },
+  'account.settings.field.name.verified.failure.message': {
+    id: 'account.settings.field.name.verified.failure.message',
+    defaultMessage: 'Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.',
+    description: 'The body of the failure alert indicating that a user\'s name was not able to be verified',
+  },
+  'account.settings.field.name.verified.failure.message.header': {
+    id: 'account.settings.field.name.verified.failure.message.header',
+    defaultMessage: 'We were not able to verify your identity.',
+    description: 'The header of the failure alert indicating that a user\'s name was not able to be verified',
+  },
+  'account.settings.field.name.verified.failure.message.help.link': {
+    id: 'account.settings.field.name.verified.failure.message.help.link',
+    defaultMessage: 'Learn more about ID verification',
+    description: 'The text of the button displayed when a user\'s name was not able to be verified, intended to direct the user to a help article about ID verification.',
+  },
   'account.settings.field.email': {
     id: 'account.settings.field.email',
     defaultMessage: 'Email address (Sign in)',