From db319b6cdf6c45f78d19f4a7732566441701dadc Mon Sep 17 00:00:00 2001
From: Alie Langston <alangsto@wellesley.edu>
Date: Wed, 29 Sep 2021 08:09:23 -0400
Subject: [PATCH] fix: Checkbox incorrectly tied to profile name

Fixed a bug that incorrectly rendered the certificate preference checkbox upon each page render. The bug caused the 1) the checkboxes to both be selected at the same time, 2) the checkbox to always be selected for the profile name, and 3) wouldn't allow the proper UI changes upon saving a verified name. The checkbox selection works correctly now, and the save button for the verified name field also works as expected.
---
 src/account-settings/AccountSettingsPage.jsx        |  2 ++
 .../CertificatePreference.jsx                       |  2 +-
 .../test/CertificatePreference.test.jsx             | 13 +++++++++++++
 src/account-settings/data/selectors.js              |  2 +-
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/account-settings/AccountSettingsPage.jsx b/src/account-settings/AccountSettingsPage.jsx
index 328bde1..890d1af 100644
--- a/src/account-settings/AccountSettingsPage.jsx
+++ b/src/account-settings/AccountSettingsPage.jsx
@@ -192,6 +192,8 @@ class AccountSettingsPage extends React.Component {
     }
     if (values !== this.props.committedValues?.verified_name) {
       this.props.beginNameChange(formId);
+    } else {
+      this.props.saveSettings(formId, values);
     }
   }
 
diff --git a/src/account-settings/certificate-preference/CertificatePreference.jsx b/src/account-settings/certificate-preference/CertificatePreference.jsx
index 1c539b2..f044a26 100644
--- a/src/account-settings/certificate-preference/CertificatePreference.jsx
+++ b/src/account-settings/certificate-preference/CertificatePreference.jsx
@@ -76,7 +76,7 @@ function CertificatePreference({
   }
 
   useEffect(() => {
-    if (fieldName === 'verifiedName') {
+    if (fieldName === 'verified_name') {
       setChecked(useVerifiedNameForCerts);
     } else {
       setChecked(!useVerifiedNameForCerts);
diff --git a/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx b/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx
index 1ff28ab..df96134 100644
--- a/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx
+++ b/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx
@@ -158,4 +158,17 @@ describe('NameChange', () => {
       type: 'ACCOUNT_SETTINGS__SAVE_SETTINGS',
     });
   });
+
+  it('checks box for verified name', () => {
+    props = {
+      ...props,
+      fieldName: 'verified_name',
+      useVerifiedNameForCerts: true,
+    };
+
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    expect(checkbox.checked).toEqual(true);
+  });
 });
diff --git a/src/account-settings/data/selectors.js b/src/account-settings/data/selectors.js
index 7a1835c..94b7883 100644
--- a/src/account-settings/data/selectors.js
+++ b/src/account-settings/data/selectors.js
@@ -63,7 +63,7 @@ const valuesSelector = createSelector(
   mostRecentApprovedVerifiedNameValueSelector,
   (accountSettings, mostRecentApprovedVerifiedNameValue) => {
     let useVerifiedNameForCerts = (
-      accountSettings.values.verifiedNameHistory?.use_verified_name_for_certs || false
+      accountSettings.verifiedNameHistory?.use_verified_name_for_certs || false
     );
 
     if (Object.keys(accountSettings.confirmationValues).includes('useVerifiedNameForCerts')) {