Merge pull request #492 from edx/alangsto/pending_alert

feat: add alert and correct messaging for submitted verified name

src/account-settings/AccountSettingsPage.jsx

@@ -13,14 +13,15 @@ import {
   getCountryList,
   getLanguageList,
 } from '@edx/frontend-platform/i18n';
-import { Button, Hyperlink, Icon } from '@edx/paragon';
+import {
+  Button, Hyperlink, Icon, Alert,
+} from '@edx/paragon';
 import { CheckCircle, Error, WarningFilled } from '@edx/paragon/icons';
 
 import messages from './AccountSettingsPage.messages';
 import { fetchSettings, saveSettings, updateDraft } from './data/actions';
 import { accountSettingsPageSelector } from './data/selectors';
 import PageLoading from './PageLoading';
-import Alert from './Alert';
 import JumpNav from './JumpNav';
 import DeleteAccount from './delete-account';
 import EditableField from './EditableField';
@@ -180,7 +181,7 @@ class AccountSettingsPage extends React.Component {
 
     return (
       <div>
-        <Alert className="alert alert-danger" role="alert">
+        <Alert variant="danger">
           <FormattedMessage
             id="account.settings.message.duplicate.tpa.provider"
             defaultMessage="The {provider} account you selected is already linked to another {siteName} account."
@@ -202,7 +203,7 @@ class AccountSettingsPage extends React.Component {
 
     return (
       <div>
-        <Alert className="alert alert-primary" role="alert">
+        <Alert variant="info">
           <FormattedMessage
             id="account.settings.message.managed.settings"
             defaultMessage="Your profile settings are managed by {managerTitle}. Contact your administrator or {support} for help."
@@ -270,6 +271,20 @@ class AccountSettingsPage extends React.Component {
     );
   }
 
+  renderVerifiedNameSubmittedMessage = () => (
+    <Alert
+      variant="warning"
+      icon={WarningFilled}
+    >
+      <Alert.Heading>
+        {this.props.intl.formatMessage(messages['account.settings.field.name.verified.submitted.message.header'])}
+      </Alert.Heading>
+      <p>
+        {this.props.intl.formatMessage(messages['account.settings.field.name.verified.submitted.message'])}
+      </p>
+    </Alert>
+  )
+
   renderVerifiedNameMessage = verifiedNameRecord => {
     const { created, status, verified_name: verifiedName } = verifiedNameRecord;
 
@@ -278,6 +293,8 @@ class AccountSettingsPage extends React.Component {
         return this.renderVerifiedNameSuccessMessage();
       case 'denied':
         return this.renderVerifiedNameFailureMessage(verifiedName, created);
+      case 'submitted':
+        return this.renderVerifiedNameSubmittedMessage();
       default:
         return null;
     }
@@ -287,7 +304,7 @@ class AccountSettingsPage extends React.Component {
     switch (status) {
       case 'approved':
         return (<Icon src={CheckCircle} className="ml-1" style={{ height: '18px', width: '18px', color: 'green' }} />);
-      case 'pending':
+      case 'submitted':
         return (<Icon src={WarningFilled} className="ml-1" style={{ height: '18px', width: '18px', color: 'yellow' }} />);
       default:
         return null;
@@ -298,13 +315,22 @@ class AccountSettingsPage extends React.Component {
     switch (status) {
       case 'approved':
         return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.verified']));
-      case 'pending':
-        return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.pending']));
+      case 'submitted':
+        return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.submitted']));
       default:
         return null;
     }
   }
 
+  renderFullNameHelpText = (status) => {
+    switch (status) {
+      case 'submitted':
+        return (this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.submitted']));
+      default:
+        return (this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text']));
+    }
+  }
+
   renderEmptyStaticFieldMessage() {
     if (this.isManagedProfile()) {
       return this.props.intl.formatMessage(messages['account.settings.static.field.empty'], {
@@ -371,7 +397,7 @@ class AccountSettingsPage extends React.Component {
       case 'denied':
         verifiedNameToDisplay = approvedVerifiedName;
         break;
-      case 'pending':
+      case 'submitted':
         verifiedNameToDisplay = mostRecentVerifiedName;
         break;
       default:
@@ -419,8 +445,19 @@ class AccountSettingsPage extends React.Component {
                 ? this.props.intl.formatMessage(messages['account.settings.field.full.name.empty'])
                 : this.renderEmptyStaticFieldMessage()
             }
-            helpText={this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text'])}
-            isEditable={this.isEditable('name')}
+            helpText={
+              verifiedNameEnabled && verifiedNameToDisplay
+                ? this.renderFullNameHelpText(verifiedNameToDisplay.status)
+                : this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text'])
+            }
+            isEditable={
+              verifiedNameEnabled && verifiedNameToDisplay
+                ? this.isVerifiedNameEditable(verifiedNameToDisplay) && this.isEditable('name')
+                : this.isEditable('name')
+            }
+            isGrayedOut={
+              verifiedNameEnabled && verifiedNameToDisplay && !this.isVerifiedNameEditable(verifiedNameToDisplay)
+            }
             {...editableFieldProps}
           />
           {verifiedNameEnabled && verifiedNameToDisplay

src/account-settings/AccountSettingsPage.messages.jsx

@@ -101,10 +101,15 @@ const messages = defineMessages({
     defaultMessage: 'This name has been verified by government ID.',
     description: 'Help text for the account settings verified name field when the name is verified.',
   },
-  'account.settings.field.name.verified.help.text.pending': {
-    id: 'account.settings.field.name.verified.help.text.pending',
-    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.help.text.submitted': {
+    id: 'account.settings.field.name.verified.help.text.submitted',
+    defaultMessage: 'Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.',
+    description: 'Help text for the account settings verified name field when a verified name has been submitted.',
+  },
+  'account.settings.field.full.name.help.text.submitted': {
+    id: 'account.settings.field.full.name.help.text.submitted',
+    defaultMessage: 'When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.',
+    description: 'Help text for the account settings full name field when a verified name has been submitted.',
   },
   'account.settings.field.name.verified.success.message': {
     id: 'account.settings.field.name.verified.success.message',
@@ -131,6 +136,16 @@ const messages = defineMessages({
     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.name.verified.submitted.message': {
+    id: 'account.settings.field.name.verified.submitted.message',
+    defaultMessage: 'Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.',
+    description: 'The body of the submitted alert indicating that a user\'s name has been submitted for verification',
+  },
+  'account.settings.field.name.verified.submitted.message.header': {
+    id: 'account.settings.field.name.verified.submitted.message.header',
+    defaultMessage: 'Your name change request is almost complete!',
+    description: 'The header of the submitted alert indicating that a user\'s name has been submitted for verification',
+  },
   'account.settings.field.email': {
     id: 'account.settings.field.email',
     defaultMessage: 'Email address (Sign in)',