Merge pull request #493 from edx/mroytman/MST-954-failure-name-change-additional-changes

fix: Fix Broken Editing of Verified Name Field

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 (
       <>
         <div className="account-section" id="basic-information" ref={this.navLinkRefs['#basic-information']}>
-          {verifiedNameEnabled && this.renderVerifiedNameMessage(mostRecentVerifiedName)}
+          {verifiedNameEnabled && this.renderVerifiedNameMessage(this.props.formValues.mostRecentVerifiedName)}
 
           <h2 className="section-heading">
             {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
             && (
             <EditableField
               name="verifiedName"
               type="text"
-              value={verifiedNameToDisplay.verified_name}
+              value={this.props.formValues.verifiedName.verified_name}
               label={
                 (
                   <div className="d-flex">
                     {this.props.intl.formatMessage(messages['account.settings.field.name.verified'])}
                     {
-                      this.renderVerifiedNameIcon(verifiedNameToDisplay.status)
+                      this.renderVerifiedNameIcon(verifiedName.status)
                     }
                   </div>
                 )
               }
-              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,

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;
+  },
 );
 
 /**