LG-11082 - Add optional info alert to FullAddressSearch by gina-yamada · Pull Request #9276 · 18F/identity-idp

gina-yamada · 2023-09-27T21:27:51Z

🎫 Ticket

LG-11082 Refactor identity-site to use FullAddressSearch
Help Center Figma Mocks

This PR adds the optional info alert prop resultsHeaderComponent to FullAddressSearch so that the prop can be used in identity-site FullAddressSearch
This PR adds logic to FullAddressSearch and AddressSearch to show/hide Find a participating Post Office and You can verify your identity in person at a local participating United States Post Office. so we can show both on Login.gov and hide both in the Help Center when eithe search component is rendered

🛠 Summary of changes

Increased version of "@18f/identity-address-search from 3.0.0 to 3.1.0
Add additional handleLocationSelect optional prop to FullAddressSearch and passed it into InPersonLocations
Created a FullAddressSearchProps interface list
Renamed the interface used by FullAddressSearchInput to include Input to avoid duplicate prop interface name along with alphabetized the arg list
Added logic to FullAddressSearch and AddressSearch to only display the Page Header and PO Search About Text when handleLocationsSelect is not null.

📜 Testing Plan

Step 1: Running the application locally, enter the in-person proofing flow and confirm that the location results display as expected, specifically that no info alert displays, and that the "Select a Post Office..." message displays, along with the Select button for each post office returned in the list. This will be the view/flow from Login.gov
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.
Add the Alert import near the top of the file, update the arg for handleLocationSelect to be null, pass in the resultsHeaderComponent prop and component to FullAddressSearch (See code snipped below 👇 )

import { Alert } from '@18f/identity-components';


<FullAddressSearch
   registerField={registerField}
   onFoundLocations={setLocationResults}
   disabled={disabledAddressSearch}
   locationsURL={locationsURL}
   handleLocationSelect={null} // <--- CHANGE ME TOO <--- CHANGE ME TOO <--- CHANGE ME TOO
   usStatesTerritories={usStatesTerritories}
   resultsHeaderComponent={() => ( // <--- ADD ME START <--- ADD ME START <--- ADD ME START
      <Alert type="info" className="margin-bottom-4">
         <strong>You must start this process on Login.gov before going to the Post Office.</strong>
         <a href="https://login.gov">Learn more about verifying your identity in person.</a>
      </Alert>
   )} // <--- ADD ME END <--- ADD ME END <--- ADD ME END
/>

👀 Screenshots

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

no changes

Ensure all behavior is working as you'd expect for Login.gov

showing Find a participating Post Office
showing You can verify your identity in person at a local participating United States Post Office.
not showing info alert
showing Select a Post.... message
showing Select buttons on PO list

PO Help Center (with no logic to Hide Header and PO Search About Text)

This is what Help Center looks like currently when using FullAddressSearch (not the version in this PR)

showing info alert and no "Select" messages or buttons (English)

Ensure all behavior is working as you'd expect (to be used in the Help Center)

not showing Find a participating Post Office
not showing You can verify your identity in person at a local participating United States Post Office.
showing info alert
not showing Select a Post.... message
not showing Select buttons on PO list

…sultsHeaderComponent prop onto FullAddressSearch so it can be passed in from help center

gina-yamada · 2023-09-28T15:37:53Z

app/javascript/packages/address-search/components/address-search.tsx

+          <PageHeading>{t('in_person_proofing.headings.po_search.location')}</PageHeading>
+          <p>{t('in_person_proofing.body.location.po_search.po_search_about')}</p>
+        </>
+      )}


Although we are not using AddressSearch at the moment, we will be. I wanted to update this component to have the same logic as FullAddressSearch so they behave similar. That will make switching over easier

It would be good if this change was covered with a spec, but probably of limited value until we get this back into use.

I added tests around this show/hide logic with commit d3f6b40

gina-yamada · 2023-09-28T15:41:43Z

app/javascript/packages/address-search/components/full-address-search.spec.tsx

@@ -21,9 +71,9 @@ describe('FullAddressSearch', () => {
            usStatesTerritories={usStatesTerritories}
            onFoundLocations={handleLocationsFound}
            locationsURL={locationsURL}


I created interface FullAddressSearchProps and as a result had to update these tests to satisfy the data type- that is the reason for the following updates in this test file

gina-yamada · 2023-09-28T15:46:45Z

app/javascript/packages/address-search/components/full-address-search.tsx

+          <PageHeading>{t('in_person_proofing.headings.po_search.location')}</PageHeading>
+          <p>{t('in_person_proofing.body.location.po_search.po_search_about')}</p>
+        </>
+      )}


I added logic to display/not display PageHeader and the PO Search About text. This logic is needed because we do not want to display both when this component is used in the Help Center, see the stuff in red. handleLoctionSelect is being used to display/not display the Select buttons on the PO list.

gina-yamada · 2023-09-28T15:51:29Z

app/javascript/packages/address-search/components/in-person-locations.tsx

-  noInPersonLocationsDisplay: ComponentType<{ address: string }>;
-  resultsHeaderComponent?: ComponentType;
-}
-


Looks like we had the InPersonLocationsProps interface in both types.d and in in-person-locations.tsx. I deleted this one and updated the one in types.d to have the complete prop list.

gina-yamada · 2023-09-28T15:52:14Z

app/javascript/packages/address-search/package.json

-  "version": "3.0.0",
+  "version": "3.1.0",
  "type": "module",
  "private": false,


My changes should not be breaking so I went with a minor update. Please confirm you agree, not breaking.

…82-UpdateFullAddressSearchWithResultsHeaderComponent

NavaTim

My comments are non-blocking since they pertain to minor code quality issues, but I highly recommend implementing the suggested changes before merging.

NavaTim · 2023-09-29T00:51:31Z

app/javascript/packages/address-search/components/full-address-search-input.tsx

-  locationsURL: string;
-  usStatesTerritories: [string, string][];
+  registerField?: RegisterFieldCallback;
+  usStatesTerritories: Array<Array<string>>;


Is there a reason we're making the type of usStatesTerritories less specific? In cases like this, where the string at index zero and index one have specific meaning (abbreviation vs name), using the stricter type can be helpful in ensuring that the value is correctly used.

@NavaTim I modified this value as I was getting errors with newly created props on FullAddressSearch. I am not able to resolve errors with this data type but was able to with string[][].

I had to change it for FullAddressSearchProps for usStateTerritories as well. Perhaps we can jump on a call if you have availability if you still think I should stick with [string, string][].

app/javascript/packages/address-search/components/full-address-search.spec.tsx

NavaTim · 2023-09-29T01:26:56Z

app/javascript/packages/address-search/types.d.ts

+interface FullAddressSearchProps {
+  disabled: boolean;
+  handleLocationSelect: ((e: any, id: number) => Promise<void>) | null | undefined;
+  locationsURL: string;
+  noInPersonLocationsDisplay?: ComponentType<{ address: string }>;
+  onFoundLocations: Dispatch<SetStateAction<FormattedLocation[] | null | undefined>>;
+  registerField: RegisterFieldCallback;
+  resultsHeaderComponent?: ComponentType;
+  usStatesTerritories: Array<Array<string>>;
+}


This looks like a good use case for extending types since many of the properties are shared between these components.

This is a great idea!

I looked into using this with FullAddressSearchProps - with AddressSearchProps as the extend but there is a prop on AddressSearchProps not needed by FullAddressSearchProp. I can create a third prop category and then extend it for both AddressSearchProp and FullAddressSearchProp listing only the unique props needed but think although nearly duplicate, keeping it as is might be best for readability and if we decide to remove on or the other down the road keeps it separate. Same with FullAddressSearchInputProps (extending FullAddressSearchProps).

NavaTim · 2023-09-29T01:39:18Z

app/javascript/packages/address-search/components/address-search.tsx

+          <PageHeading>{t('in_person_proofing.headings.po_search.location')}</PageHeading>
+          <p>{t('in_person_proofing.body.location.po_search.po_search_about')}</p>
+        </>
+      )}


It would be good if this change was covered with a spec, but probably of limited value until we get this back into use.

…82-UpdateFullAddressSearchWithResultsHeaderComponent

gina-yamada · 2023-09-29T20:24:25Z

Published to npm shortly after merging branch into main

gina-yamada added 15 commits September 27, 2023 15:08

Add FullAddressSearchProps to types.d.ts

c733763

Rename interfact, alpha order args

143e48c

Add resultsHeaderComponent arg, alpha order

3a9d8b4

fix linter errors

8b41d67

increase version of identity-address-search

b319b70

clean up duplicate interface

e3b75be

update data type and tests

fd56d10

delete unused var

ca91397

changelog: Upcoming Features, In-person proofing, Add new optional re…

7a39614

…sultsHeaderComponent prop onto FullAddressSearch so it can be passed in from help center

change data type

1c4a5ca

Move FullAddressSearchInputProps to types.d

12c6057

Added logic to show/hide header and info text

131df3d

moved props back inside component

a9d4128

Add show/hide logic to AddressSearch

b939e8a

fix linter errors

248751b

gina-yamada commented Sep 28, 2023

View reviewed changes

Merge branch 'main' of github.com:18F/identity-idp into yamada/LG-110…

e183cf6

…82-UpdateFullAddressSearchWithResultsHeaderComponent

gina-yamada marked this pull request as ready for review September 28, 2023 19:34

gina-yamada requested review from allthesignals and tomas-nava September 28, 2023 20:59

NavaTim approved these changes Sep 29, 2023

View reviewed changes

gina-yamada added 5 commits September 29, 2023 08:45

change prop type

7de2c25

change data type

4b53875

update test

e695888

lint fix

66c08ce

add tests for address-search

d3f6b40

gina-yamada added 3 commits September 29, 2023 11:19

fix linter errors

28d9a11

Merge branch 'main' of github.com:18F/identity-idp into yamada/LG-110…

abc8ce7

…82-UpdateFullAddressSearchWithResultsHeaderComponent

Merge branch 'main' of github.com:18F/identity-idp into yamada/LG-110…

f650012

…82-UpdateFullAddressSearchWithResultsHeaderComponent

gina-yamada merged commit d32eb9f into main Sep 29, 2023

gina-yamada deleted the yamada/LG-11082-UpdateFullAddressSearchWithResultsHeaderComponent branch September 29, 2023 20:19

jmhooper mentioned this pull request Oct 3, 2023

Deploy RC 319 to prod #9302

Merged

Conversation

gina-yamada commented Sep 27, 2023 • edited by svalexander Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎫 Ticket

🛠 Summary of changes

📜 Testing Plan

👀 Screenshots

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gina-yamada Sep 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NavaTim left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gina-yamada Sep 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gina-yamada commented Sep 29, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gina-yamada commented Sep 27, 2023 •

edited by svalexander

Loading

gina-yamada Sep 28, 2023 •

edited

Loading

gina-yamada Sep 29, 2023 •

edited

Loading