Merge pull request #490 from edx/mroytman/MST-954-failure-name-change-alert

feat: Add Dismissible Alert Informing Learner of Failed Name Verification

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)',