diff --git a/src/account-settings/AccountSettingsPage.jsx b/src/account-settings/AccountSettingsPage.jsx index e34883f..b21fa8b 100644 --- a/src/account-settings/AccountSettingsPage.jsx +++ b/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 ( + +
+ {this.props.intl.formatMessage( + messages['account.settings.field.name.verified.failure.message'], { + verifiedName, + }, + )} +
+
+ {' '} +
+ + ) + } /> ); } @@ -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 ( <>
- {showVerifiedApproved && this.renderVerifiedNameSuccessMessage()} + {showVerifiedName && verifiedNameMessage}

{this.props.intl.formatMessage(messages['account.settings.section.account.information'])} diff --git a/src/account-settings/AccountSettingsPage.messages.jsx b/src/account-settings/AccountSettingsPage.messages.jsx index 132bdb3..d4735f4 100644 --- a/src/account-settings/AccountSettingsPage.messages.jsx +++ b/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)',