[#1150] Part 2: User Profile Enhancements for Former Names #857

jhflorey · 2024-11-20T16:05:45Z

This PR addresses issue episphere/connect#1150

amber-emmes

Comments added.

amber-emmes · 2024-11-20T16:07:36Z

i18n/en.js

@@ -98,11 +98,31 @@ const en = {
        "preferredNameField": {
            "placeholder": "Enter preferred name"
        },
+        "formerNameSubHeader": "Former Names",
+        "formerNameIntrodution": "Former names are other name(s) you have used in the past for paperwork and administrative purposes (for example, legal name changes, unmarried or “maiden name”, married name). We collect this information so that we can match information we collect from other sources, like state health registries, to you.",


Should formerNameIntrodution be corrected to formerNameIntroduction?

amber-emmes · 2024-11-20T16:08:24Z

i18n/es.js

@@ -99,6 +99,26 @@
        "preferredNameField": {
            "placeholder": "Ingrese el nombre de pila preferido"
        },
+        "formerNameSubHeader": "Nombres anteriores",
+        "formerNameIntrodution": "Los nombres anteriores son otros nombres que ha utilizado en el pasado en documentos y procesos administrativos (por ejemplo, cambios de nombre legal, apellido de soltera, apellido de casada). Recopilamos esta información para poder vincular la información que recopilamos de otras fuentes, como los registros de salud estatales, con la suya. ",


Same comment.

amber-emmes · 2024-11-20T16:08:47Z

js/components/form.js

@@ -64,6 +64,26 @@ export const renderUserProfile = async () => {
            </div>
            <br>
            <hr style="color:#A9AEB1;">
+
+            <p class="userProfileSubHeaders" data-i18n="form.formerNameSubHeader">Former Names</p> 
+            <span data-i18n="form.formerNameIntrodution">Former names are other name(s) you have used in the past for paperwork and administrative purposes (for example, legal name changes, unmarried or “maiden name”, married name). We collect this information so that we can match information we collect from other sources, like state health registries, to you.</span>


Same comment.

amber-emmes

Looks good! Approved.

JoeArmani

Left some comments.

•The state and country dropdowns (from a previous PR) are helpful for long-term analytics

•I think it's important to match the existing UP History data structure so it can be:
(1) Implemented in the user profile in a consistent way
(2) Reliably accessed when needed

Question:
Is this going to be implemented on the My Profile page, or is that not part of this update?

JoeArmani · 2024-11-20T19:55:03Z

js/event.js

+    const selectId = `former-name-category-${formerNameItems.length + 1}`;
+
+    const div1 = document.createElement('div');	
+    div1.classList = ['form-group row former-name-item'];


https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
I think .add with an array of classes is more widely supported across browsers: div1.classList.add('form-group', 'row', 'former-name-item');

JoeArmani · 2024-11-20T19:55:30Z

js/event.js

+    div1_1.classList = ['col-md-3'];
+
+    const select = document.createElement('select');	
+    select.classList = ['form-control'];


same about classList.add()

JoeArmani · 2024-11-20T19:55:47Z

js/event.js

+
+    formerNameOptions.forEach((option) => {
+        const opt = document.createElement("option");
+        opt.classList = ["option-dark-mode"];


same about classList.add()

JoeArmani · 2024-11-20T19:55:59Z

js/event.js

+    div1_2.classList = ['col-md-4'];
+
+    const input = document.createElement('input');	
+    input.classList = ['form-control'];


same about classList.add()

js/components/form.js

JoeArmani · 2024-11-20T21:19:17Z

js/settingsHelpers.js

+export const getFormerNameData = () => {
+    const formerNameItems = document.getElementsByClassName("former-name-item");
+    const fNameArray = [];
+    const mNameArray = [];
+    const lNameArray = [];
+    Array.from(formerNameItems).forEach((_, index) => {
+        const inputElement = document.getElementById(
+            `former-name-value-${index + 1}`
+        );
+        const selectElement = document.getElementById(
+            `former-name-category-${index + 1}`
+        );
+        if (inputElement.value) {
+            switch (selectElement.value) {
+                case "first":
+                    fNameArray.push(inputElement.value);
+                    break;
+                case "middle":
+                    mNameArray.push(inputElement.value);
+                    break;
+                case "last":
+                    lNameArray.push(inputElement.value);
+                    break;
+            }
+        }
+    });
+    return fNameArray.length || mNameArray.length || lNameArray.length
+        ? {
+              [cId.userProfileUpdateTimestamp]: new Date().toISOString(),
+              [cId.fName]: fNameArray.length ? fNameArray : undefined,
+              [cId.mName]: mNameArray.length ? mNameArray : undefined,
+              [cId.lName]: lNameArray.length ? lNameArray : undefined,
+          }
+        : undefined;
+};


I really think we need to match these data structures for long-term compatibility.

Here's a screenshot of the data strucure this generated (from Firestore dev):

Here's an example of the existing data structure for the user profile history spec:

Here is the result after using the code change.

I see mixed data issues in the [Array] parts. Those are strings in the existing UP history implementation.

We are starting to use that UP history for some things like NORC Birthday cards, and we need to make sure the data is in a predictable format.

There will be more entries in the array, but I think those should be expanded out so each entry for 231676651, 399159511, and 996038075 is a separate object in the 569151507 UP History array.

Each UP history object needs:
•update string (first/middle/last name).
•update timestamp 371303487.
•profile change requested by 611005658 (this will be the participant's email address for this case).

Just updated, please check it again.

JoeArmani

Confirming the UP history data structure now matches the existing spec. Thank you.

I ran into an issue in testing where I:
(1) Filled out the form (creating my profile)
(2) Clicked the submit button
(3) Viewed the verification form
(4) Clicked that submit button

Everything worked well to that point.

Then, the data saved correctly, but the form did not advance to the next screen.

Please test this and I'll approve once you're sure that part is working.

JoeArmani · 2024-11-22T16:08:19Z

app.js

@@ -18,7 +18,7 @@ import { firebaseConfig as prodFirebaseConfig } from "./prod/config.js";
 // When doing local development, uncomment this.
 // Get the API key file from Box or the DevOps team
 // Do not accept PRs with the localDevFirebaseConfig import uncommented
-// import { firebaseConfig as  localDevFirebaseConfig} from "./local-dev/config.js";
+import { firebaseConfig as  localDevFirebaseConfig} from "./local-dev/config.js";


Please disable this before merging

Implement User Profile Former Name

659ab2f

jhflorey requested review from JoeArmani, a team and amber-emmes and removed request for a team November 20, 2024 16:05

amber-emmes reviewed Nov 20, 2024

View reviewed changes

amber-emmes approved these changes Nov 20, 2024

View reviewed changes

JoeArmani requested changes Nov 20, 2024

View reviewed changes

jhflorey force-pushed the i1150-user-profile-part-2 branch from e7842b5 to a37c763 Compare November 21, 2024 16:03

Fix spelling errors

71660eb

jhflorey force-pushed the i1150-user-profile-part-2 branch from a37c763 to 71660eb Compare November 21, 2024 16:06

Update data structure of User Profile

836d5ba

JoeArmani requested changes Nov 22, 2024

View reviewed changes

jhflorey added 2 commits November 23, 2024 06:21

Remove debug code

b4b8b6e

Update Spanish text

0463a1e

JoeArmani approved these changes Nov 25, 2024

View reviewed changes

jhflorey merged commit a1eec5a into dev Nov 25, 2024

jhflorey deleted the i1150-user-profile-part-2 branch November 25, 2024 14:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#1150] Part 2: User Profile Enhancements for Former Names #857

[#1150] Part 2: User Profile Enhancements for Former Names #857

jhflorey commented Nov 20, 2024 •

edited

Loading

amber-emmes left a comment

amber-emmes Nov 20, 2024

jhflorey Nov 20, 2024

amber-emmes Nov 20, 2024

jhflorey Nov 20, 2024

amber-emmes Nov 20, 2024

jhflorey Nov 20, 2024

amber-emmes left a comment

JoeArmani left a comment •

edited

Loading

JoeArmani Nov 20, 2024

JoeArmani Nov 20, 2024

JoeArmani Nov 20, 2024

JoeArmani Nov 20, 2024

JoeArmani Nov 20, 2024

jhflorey Nov 21, 2024

JoeArmani Nov 21, 2024

jhflorey Nov 22, 2024

JoeArmani left a comment •

edited

Loading

JoeArmani Nov 22, 2024

jhflorey Nov 23, 2024

[#1150] Part 2: User Profile Enhancements for Former Names #857

[#1150] Part 2: User Profile Enhancements for Former Names #857

Conversation

jhflorey commented Nov 20, 2024 • edited Loading

amber-emmes left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amber-emmes left a comment

Choose a reason for hiding this comment

JoeArmani left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JoeArmani left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jhflorey commented Nov 20, 2024 •

edited

Loading

JoeArmani left a comment •

edited

Loading

JoeArmani left a comment •

edited

Loading