From 37d0e6e0fbeaa8da9ef853375afa7eaa561dfcb0 Mon Sep 17 00:00:00 2001 From: michaelroytman Date: Mon, 30 Aug 2021 17:03:52 -0400 Subject: [PATCH] feat: Change Which VerifiedName Record is Displayed When Most Recent VerifiedName is Denied 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 changes the verified name that is displayed in this case. If a learner's most recent verified name record has been denied, and the learner has a previously approved verified name, display that. If If a learner's most recent verified name record has been denied, and the learner either has no previously verified name records or no previous verified name records at all, do not show a verified name field. It also refactors the code to better support UI treatments for other verified name statuses, like pending and submitted. MST-954 (https://openedx.atlassian.net/browse/MST-954) --- src/account-settings/AccountSettingsPage.jsx | 123 ++++++++++++------- 1 file changed, 76 insertions(+), 47 deletions(-) diff --git a/src/account-settings/AccountSettingsPage.jsx b/src/account-settings/AccountSettingsPage.jsx index b21fa8b..cf103a9 100644 --- a/src/account-settings/AccountSettingsPage.jsx +++ b/src/account-settings/AccountSettingsPage.jsx @@ -138,18 +138,19 @@ class AccountSettingsPage extends React.Component { })), })); - getMostRecentVerifiedNameRecord = verifiedNameHistory => { - if (verifiedNameHistory.length > 0) { - return verifiedNameHistory.reduce( - (prev, curr) => { - const prevDate = new Date(prev.created); - const currDate = new Date(curr.created); - return currDate > prevDate ? curr : prev; - }, - ); + sortDates = (a, b) => { + const aTimeSinceEpoch = new Date(a).getTime(); + const bTimeSinceEpoch = new Date(b).getTime(); + + return bTimeSinceEpoch - aTimeSinceEpoch; + } + + sortVerifiedNameRecords = verifiedNameHistory => { + if (Array.isArray(verifiedNameHistory)) { + return [...verifiedNameHistory].sort(this.sortDates); } - return null; + return []; } handleEditableFieldChange = (name, value) => { @@ -224,19 +225,17 @@ class AccountSettingsPage extends React.Component { ); } - renderVerifiedNameSuccessMessage() { - return ( - - ); - } + renderVerifiedNameSuccessMessage = () => ( + + ) - renderVerifiedNameFailureMessage(verifiedName, created) { + renderVerifiedNameFailureMessage = (verifiedName, created) => { const dateValue = new Date(created).valueOf(); const id = `dismissedVerifiedNameFailureMessage-${verifiedName}-${dateValue}`; @@ -271,6 +270,41 @@ class AccountSettingsPage extends React.Component { ); } + renderVerifiedNameMessage = verifiedNameRecord => { + const { created, status, verified_name: verifiedName } = verifiedNameRecord; + + switch (status) { + case 'approved': + return this.renderVerifiedNameSuccessMessage(); + case 'denied': + return this.renderVerifiedNameFailureMessage(verifiedName, created); + default: + return null; + } + } + + renderVerifiedNameIcon = (status) => { + switch (status) { + case 'approved': + return (); + case 'pending': + return (); + default: + return null; + } + } + + renderVerifiedNameHelpText = (status) => { + 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'])); + default: + return null; + } + } + renderEmptyStaticFieldMessage() { if (this.isManagedProfile()) { return this.props.intl.formatMessage(messages['account.settings.static.field.empty'], { @@ -326,23 +360,24 @@ class AccountSettingsPage extends React.Component { // Show State field only if the country is US (could include Canada later) const showState = this.props.formValues.country === COUNTRY_WITH_STATES; - const verifiedName = this.getMostRecentVerifiedNameRecord(this.props.formValues.verifiedNameHistory.results); - const showVerifiedName = verifiedName - && this.props.formValues.verifiedNameHistory.verified_name_enabled; + const sortedVerifiedNames = this.sortVerifiedNameRecords(this.props.formValues.verifiedNameHistory.results); + const mostRecentVerifiedName = sortedVerifiedNames.length > 0 ? sortedVerifiedNames[0] : null; + const approvedVerifiedNames = sortedVerifiedNames.filter(name => name.status === 'approved'); + const approvedVerifiedName = approvedVerifiedNames.length > 0 ? approvedVerifiedNames[0] : null; - let verifiedNameMessage; - let showVerifiedApproved = false; - switch (verifiedName.status) { + let verifiedNameToDisplay = null; + switch (mostRecentVerifiedName && mostRecentVerifiedName.status) { case 'approved': - showVerifiedApproved = true; - verifiedNameMessage = this.renderVerifiedNameSuccessMessage(); - break; case 'denied': - verifiedNameMessage = this.renderVerifiedNameFailureMessage(verifiedName.verified_name, verifiedName.created); + verifiedNameToDisplay = approvedVerifiedName; + break; + case 'pending': + verifiedNameToDisplay = mostRecentVerifiedName; break; default: - verifiedNameMessage = null; + verifiedNameToDisplay = null; } + const verifiedNameEnabled = this.props.formValues.verifiedNameHistory.verified_name_enabled; const timeZoneOptions = this.getLocalizedTimeZoneOptions( this.props.timeZoneOptions, @@ -354,7 +389,7 @@ class AccountSettingsPage extends React.Component { return ( <>
- {showVerifiedName && verifiedNameMessage} + {verifiedNameEnabled && this.renderVerifiedNameMessage(mostRecentVerifiedName)}

{this.props.intl.formatMessage(messages['account.settings.section.account.information'])} @@ -388,32 +423,26 @@ class AccountSettingsPage extends React.Component { isEditable={this.isEditable('name')} {...editableFieldProps} /> - {showVerifiedName + {verifiedNameEnabled && verifiedNameToDisplay && ( {this.props.intl.formatMessage(messages['account.settings.field.name.verified'])} { - showVerifiedApproved - ? () - : () + this.renderVerifiedNameIcon(verifiedNameToDisplay.status) }

) } - helpText={ - showVerifiedApproved - ? this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.verified']) - : this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.pending']) - } - isEditable={this.isVerifiedNameEditable(verifiedName) && this.isEditable('verified_name')} - isGrayedOut={!this.isVerifiedNameEditable(verifiedName)} - {...(this.isVerifiedNameEditable(verifiedName) && editableFieldProps)} + helpText={this.renderVerifiedNameHelpText(verifiedNameToDisplay.status)} + isEditable={this.isVerifiedNameEditable(verifiedNameToDisplay) && this.isEditable('verified_name')} + isGrayedOut={!this.isVerifiedNameEditable(verifiedNameToDisplay)} + {...(this.isVerifiedNameEditable(verifiedNameToDisplay) && editableFieldProps)} /> )}