LG-11082 Add Conditional Text To FullAddressSearch Component

[gina-yamada]

🎫 Ticket

LG-11082 Refactor identity-site to use FullAddressSearch

There are no mocks for Full Address Search in the Help Center. In this PR, it was decided to add this additional text. The text will display when the FullAddressSearch component is used in the Help Center but it will not display in identity-ipd (login).

🛠 Summary of changes

1. If handleLocationSelect is null (as would be the case for the Help Center), display Enter an address to find a Post Office near you. else do not display this text
2. Added a period to the English and Spanish translation files. (French already has a period.)
3. Increased the version of @18f/identity-address-search from 3.1.0 to 3.1.1
4. Added testing to check conditional rendering

📜 Testing Plan

Provide a checklist of steps to confirm the changes.

• Step 1: This will be the normal ipd view from Login.gov --
  Running the application locally, enter the in-person proofing flow and continue until you are on the Find a participating Post Office view. Confirm that you do not see the text Enter an address to find a Post Office near you. (It would be above the Address input field if it did.)

• Step 2: This will be the view/flow from the Help Center --
  Edit app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.tsx. Update the arg for handleLocationSelect to be null (See code snipped below 👇). Confirm that you do see the text Enter an address to find a Post Office near you.

<FullAddressSearch
   registerField={registerField}
   onFoundLocations={setLocationResults}
   disabled={disabledAddressSearch}
   locationsURL={locationsURL}
   handleLocationSelect={null} // <--- CHANGE ME <--- CHANGE ME <--- CHANGE ME
   usStatesTerritories={usStatesTerritories}
/>

👀 Screenshots

IPD View

Help Center View (only what is inside the purple box)

[svalexander]

everything works as expected but just checking - will there be a heading above this component when in the help center?

[gina-yamada]

everything works as expected but just checking - will there be a heading above this component when in the help center?

@svalexander Yes! There will be a heading in the Help Center. Look at the after screenshot in this PR to see the heading. Thanks for reviewing and testing. I am going to publish to npm soon. If you have never done this- reach out on Slack if you'd like to jump on a call to see it done.

[aduth]

If handleLocationSelect is null (as would be the case for the Help Center), display Enter an address to find a Post Office near you. else do not display this text

Is there a meaningful relation between this prop and the resulting text, or are we using it because it's incidentally how the brochure site configured the component, and we want to customize the text for the brochure site?

If it's the latter, would it be better to let that content be handled outside the component itself? I guess the alert placement makes this challenging, but I might imagine at least a separate prop for controlling the "intro" text.

[gina-yamada]

If handleLocationSelect is null (as would be the case for the Help Center), display Enter an address to find a Post Office near you. else do not display this text

Is there a meaningful relation between this prop and the resulting text, or are we using it because it's incidentally how the brochure site configured the component, and we want to customize the text for the brochure site?

If it's the latter, would it be better to let that content be handled outside the component itself? I guess the alert placement makes this challenging, but I might imagine at least a separate prop for controlling the "intro" text.

@aduth It is the latter. I thought about adding that content outside the component itself but ultimately decided against it for 2 reasons.

First, we are using the value of handleLocationSelect to conditionally render 5 other elements in that component. I thought it made sense to keep the same pattern and let IDP decide when to show/hide even though this particular text is at the top and can be moved outside of this component.

When handleLocationSelect is null...

• Text Find a participating Post Office is hidden
• Text You can verify your identity... is hidden
• Text Select a Post Office is hidden
• Select buttons are hidden
• Info alert is displayed (You must start this process...)
• ... and with this PR, in FullAddressSearch only, display Enter an address to find...

Additional, this text should only display when using FullAddressSearch, not AddressSearch. Currently, which component to use is being determined in IDP by the in_person_full_address_entry_enabled flag. If we moved this text outside of the FullAddressSearch component and into identity-sites, we would have to add logic to conditionally display this text depending on which component IDP was rendering. We would then be maintain two flags and they would always need to be in-sync- which seems more problematic to maintain than this approach here. Alternatively, rather than conditionally rendering it, we can just add/delete it inside identity-sites based on which component we used. This would require some rework of post_office_search as current we are just rendering the packaged component.

Please let me know your thoughts after hearing this information. I alway appreciate your thoughts and value your feedback! Thank you!

[aduth]

In that case, maybe it's something to follow-up on separately, if at least this is consistent with the current implementation.

I don't necessarily have an issue with a prop controlling different aspects like that, I just don't know that it's very obvious that the presence or absence of a callback would have such an effect on content.

[gina-yamada]

address-search version 3.1.1 published to npm