diff --git a/src/account-settings/AccountSettingsPage.jsx b/src/account-settings/AccountSettingsPage.jsx
index 3dcdc33..c82286c 100644
--- a/src/account-settings/AccountSettingsPage.jsx
+++ b/src/account-settings/AccountSettingsPage.jsx
@@ -162,8 +162,6 @@ class AccountSettingsPage extends React.Component {
this.props.saveSettings(formId, values);
}
- isVerifiedNameEditable = (verifiedName) => ['approved', 'denied'].includes(verifiedName.status)
-
isEditable(fieldName) {
return !this.props.staticFields.includes(fieldName);
}
@@ -386,23 +384,7 @@ 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 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 verifiedNameToDisplay = null;
- switch (mostRecentVerifiedName && mostRecentVerifiedName.status) {
- case 'approved':
- case 'denied':
- verifiedNameToDisplay = approvedVerifiedName;
- break;
- case 'submitted':
- verifiedNameToDisplay = mostRecentVerifiedName;
- break;
- default:
- verifiedNameToDisplay = null;
- }
+ const { verifiedName } = this.props.formValues;
const verifiedNameEnabled = this.props.formValues.verifiedNameHistory.verified_name_enabled;
const timeZoneOptions = this.getLocalizedTimeZoneOptions(
@@ -415,7 +397,7 @@ class AccountSettingsPage extends React.Component {
return (
<>
- {verifiedNameEnabled && this.renderVerifiedNameMessage(mostRecentVerifiedName)}
+ {verifiedNameEnabled && this.renderVerifiedNameMessage(this.props.formValues.mostRecentVerifiedName)}
{this.props.intl.formatMessage(messages['account.settings.section.account.information'])}
@@ -446,40 +428,40 @@ class AccountSettingsPage extends React.Component {
: this.renderEmptyStaticFieldMessage()
}
helpText={
- verifiedNameEnabled && verifiedNameToDisplay
- ? this.renderFullNameHelpText(verifiedNameToDisplay.status)
+ verifiedNameEnabled && verifiedName
+ ? this.renderFullNameHelpText(verifiedName.status)
: this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text'])
}
isEditable={
- verifiedNameEnabled && verifiedNameToDisplay
- ? this.isVerifiedNameEditable(verifiedNameToDisplay) && this.isEditable('name')
+ verifiedNameEnabled && verifiedName
+ ? this.isEditable('verifiedName') && this.isEditable('name')
: this.isEditable('name')
}
isGrayedOut={
- verifiedNameEnabled && verifiedNameToDisplay && !this.isVerifiedNameEditable(verifiedNameToDisplay)
+ verifiedNameEnabled && verifiedName && !this.isEditable('verifiedName')
}
{...editableFieldProps}
/>
- {verifiedNameEnabled && verifiedNameToDisplay
+ {verifiedNameEnabled && verifiedName
&& (
{this.props.intl.formatMessage(messages['account.settings.field.name.verified'])}
{
- this.renderVerifiedNameIcon(verifiedNameToDisplay.status)
+ this.renderVerifiedNameIcon(verifiedName.status)
}
)
}
- helpText={this.renderVerifiedNameHelpText(verifiedNameToDisplay.status)}
- isEditable={this.isVerifiedNameEditable(verifiedNameToDisplay) && this.isEditable('verified_name')}
- isGrayedOut={!this.isVerifiedNameEditable(verifiedNameToDisplay)}
- {...(this.isVerifiedNameEditable(verifiedNameToDisplay) && editableFieldProps)}
+ helpText={this.renderVerifiedNameHelpText(verifiedName.status)}
+ isEditable={this.isEditable('verifiedName')}
+ isGrayedOut={!this.isEditable('verifiedName')}
+ {...(this.isEditable('verifiedName') && editableFieldProps)}
/>
)}
@@ -764,10 +746,17 @@ AccountSettingsPage.propTypes = {
PropTypes.shape({
verified_name: PropTypes.string,
status: PropTypes.string,
- verified_name_enabled: PropTypes.bool,
}),
),
}),
+ verifiedName: PropTypes.shape({
+ verified_name: PropTypes.string,
+ status: PropTypes.string,
+ }),
+ mostRecentVerifiedName: PropTypes.shape({
+ verified_name: PropTypes.string,
+ status: PropTypes.string,
+ }),
}).isRequired,
siteLanguage: PropTypes.shape({
previousValue: PropTypes.string,
diff --git a/src/account-settings/data/selectors.js b/src/account-settings/data/selectors.js
index 2f717b5..b1d485b 100644
--- a/src/account-settings/data/selectors.js
+++ b/src/account-settings/data/selectors.js
@@ -7,9 +7,63 @@ export const accountSettingsSelector = state => ({ ...state[storeName] });
const editableFieldNameSelector = (state, props) => props.name;
+const sortedVerifiedNameHistorySelector = createSelector(
+ accountSettingsSelector,
+ accountSettings => {
+ function sortDates(a, b) {
+ const aTimeSinceEpoch = new Date(a).getTime();
+ const bTimeSinceEpoch = new Date(b).getTime();
+ return bTimeSinceEpoch - aTimeSinceEpoch;
+ }
+
+ const history = accountSettings.values.verifiedNameHistory && accountSettings.values.verifiedNameHistory.results;
+
+ if (Array.isArray(history)) {
+ return history.sort(sortDates);
+ }
+
+ return [];
+ },
+);
+
+const mostRecentVerifiedNameSelector = createSelector(
+ sortedVerifiedNameHistorySelector,
+ sortedHistory => (sortedHistory.length > 0 ? sortedHistory[0] : null),
+);
+
+const mostRecentApprovedVerifiedNameValueSelector = createSelector(
+ sortedVerifiedNameHistorySelector,
+ mostRecentVerifiedNameSelector,
+ (sortedHistory, mostRecentVerifiedName) => {
+ const approvedVerifiedNames = sortedHistory.filter(name => name.status === 'approved');
+ const approvedVerifiedName = approvedVerifiedNames.length > 0 ? approvedVerifiedNames[0] : null;
+
+ let verifiedName = null;
+ switch (mostRecentVerifiedName && mostRecentVerifiedName.status) {
+ case 'approved':
+ case 'denied':
+ verifiedName = approvedVerifiedName;
+ break;
+ case 'submitted':
+ verifiedName = mostRecentVerifiedName;
+ break;
+ default:
+ verifiedName = null;
+ }
+ return verifiedName;
+ },
+);
+
const valuesSelector = createSelector(
accountSettingsSelector,
- accountSettings => accountSettings.values,
+ mostRecentVerifiedNameSelector,
+ mostRecentApprovedVerifiedNameValueSelector,
+ (accountSettings, mostRecentVerifiedNameValue, mostRecentApprovedVerifiedNameValue) => (
+ {
+ ...accountSettings.values,
+ verifiedName: mostRecentApprovedVerifiedNameValue,
+ mostRecentVerifiedName: mostRecentVerifiedNameValue,
+ }),
);
const draftsSelector = createSelector(
@@ -69,7 +123,18 @@ export const profileDataManagerSelector = createSelector(
export const staticFieldsSelector = createSelector(
accountSettingsSelector,
- accountSettings => (accountSettings.profileDataManager ? ['name', 'email', 'country'] : []),
+ mostRecentVerifiedNameSelector,
+ (accountSettings, verifiedName) => {
+ const staticFields = [];
+ if (accountSettings.profileDataManager) {
+ staticFields.push('name', 'email', 'country');
+ }
+ if (verifiedName && ['pending', 'submitted'].includes(verifiedName.status)) {
+ staticFields.push('verifiedName');
+ }
+
+ return staticFields;
+ },
);
/**