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