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)}
/>
)}