LG-9200 show hint text for addresses in puerto rico

[svalexander]

🎫 Ticket

LG-9200

🛠 Summary of changes

This pr adds hint text for address line 1 and address line 2 on the state id page and address page when a user selects "Puerto Rico" from the state dropdown.
If a user changes their selection then the inputs for address line 1 and 2 remain but the hint text is removed.
When a user clicks update for the state id section and address section from the "verify your info" page and is routed to the update pages they see the hint text if they previously chose puerto rico as their state.

📜 Testing Plan

Provide a checklist of steps to confirm the changes.

• Update in_person_capture_secondary_id_enabled to true
• Walk through ipp flow and arrive at state id page
• Select Puerto Rico from the state dropdown
• Verify that hint text shows for address lines 1 and 2; enter text to both input boxes
• Select another state
• Verify that hint text is hidden and inputs remain
• Re-select Puerto Rico
• Repeat same selection steps described for state id page on the address page
• Continue to "verify your info" page
• Select update button for state id section
• Verify that hint text shows for address lines 1 and 2
• Click update button to go back to "verify your info" page
• Repeat same update steps for address section

👀 Screenshots

If relevant, include a screenshot or screen capture of the changes.

Address page:

State id pg:

[eileen-nava]

Status update: I have started reviewing this PR and will wrap up the review tomorrow morning. Looking good so far! 💪🏻

[WheresHJ]

Generally looks good, just to cover all the bases can I see a screenshot of the non-Puerto Rico state of the Current Residential Address page? Thank you!

[eileen-nava]

HI @svalexander, I noticed that your build is failing on the pinpoint-check. If you merge in the latest version of main, you'll pick up the work from PR #8279. Based on what I saw in slack discussions, that should get your build to pass the pinpoint-check step.

(Also, there is one failing test in spec/services/idv/steps/in_person/state_id_step_spec.rb, which looks like it will pass once you update the variables.)

[carmenrosalop]

Looks good to me. Thanks Shannon!

[eileen-nava]

Status update 2: I think this looks really good, especially the feature test. I do agree with Andrew that it would be good to try and use class selectors, rather than id selectors.

[aduth]

You might need to rebase or merge the latest main, since hint_class: '...' was removed in favor of hint_html: { class: '...' } in #8232.

[svalexander]

i notice that the hint is flashing on the screen when the page is loaded. Not sure how to rectify this.

[aduth]

I think you might have fixed it with 6f6263f ? Normally that might introduce other problems with supporting browsers where JavaScript is disabled, but since IdV requires JavaScript, it should be fine. An alternative might be to add the class server-side depending if the known address state is Puerto Rico.

[svalexander]

yes that commit fixed it, yay! I do need to test the remote flow before merging though

[eileen-nava]

Looks good to me. 👍🏻

[eileen-nava]

👏🏻

[NavaTim]

Would consider approving, but a lint issue came up in CI & I'd like to see the tests run. Based on the type of issue, you may need to pull from origin/main.

[NavaTim]

If we want this to be reusable functionality, then I recommend a few changes.

• Use a new CSS class to specifically reference <select> dropdowns that should have this behavior instead of checking for jurisdiction in the element ID
• Split out the showOrHidePuertoRicoExtras into a separate file included by this one
• Consider moving onIdentityDocStateSelection into a separate file that doesn't immediately run the code nor setup an event listener

[svalexander]

i'm not sure i fully understand the last 2 bullet points

[NavaTim]

Those changes separate initialization on the web page from the function logic, which encourages more modular behavior and makes effective unit testing easier.

Also I am listing them separately because one pertains to showing/hiding the Puerto Rico text and the other pertains to the change event behavior.

[svalexander]

chatted w/ Micah about separating out the functions and came to the conclusion that could potentially be done in another ticket that generalizes this more to showOrHideHint() if we find there's a need for that.

[NavaTim]

Looks good at this point since the previous build passed. I think it's really good to have switched to the new CSS class too. Still recommend the remaining changes, but I think you're good to proceed if the next build passes.