From 7c5611612e1b9740260238970b099d4436c3eb54 Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 08:51:10 -0700 Subject: [PATCH 01/16] use select component on page w/sample options --- .../components/in-person-full-address-search.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx b/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx index 205ff2d4e9b..2c3a5976b69 100644 --- a/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx +++ b/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx @@ -1,4 +1,4 @@ -import { TextInput } from '@18f/identity-components'; +import { TextInput, SelectInput } from '@18f/identity-components'; import { useState, useRef, useEffect, useCallback } from 'react'; import { t } from '@18f/identity-i18n'; import { request } from '@18f/identity-request'; @@ -137,9 +137,14 @@ function FullAddressSearch({ input(target.value); }; + const selectInputChangeHandler = (input) => (event: React.ChangeEvent) => { + const { target } = event; + input(target.value); + }; + const onAddressChange = textInputChangeHandler(setAddressInput); const onCityChange = textInputChangeHandler(setCityInput); - const onStateChange = textInputChangeHandler(setStateInput); + const onStateChange = selectInputChangeHandler(setStateInput); const onZipCodeChange = textInputChangeHandler(setZipCodeInput); useEffect(() => { @@ -186,14 +191,17 @@ function FullAddressSearch({ /> - + > + + + Date: Thu, 20 Jul 2023 08:51:31 -0700 Subject: [PATCH 02/16] pass states list to react --- app/views/idv/shared/_document_capture.html.erb | 1 + 1 file changed, 1 insertion(+) diff --git a/app/views/idv/shared/_document_capture.html.erb b/app/views/idv/shared/_document_capture.html.erb index 204e8406a81..54a48fe0836 100644 --- a/app/views/idv/shared/_document_capture.html.erb +++ b/app/views/idv/shared/_document_capture.html.erb @@ -33,6 +33,7 @@ in_person_full_address_entry_enabled: IdentityConfig.store.in_person_full_address_entry_enabled, in_person_outage_message_enabled: IdentityConfig.store.in_person_outage_message_enabled, in_person_outage_expected_update_date: IdentityConfig.store.in_person_outage_expected_update_date, + us_states_territories: us_states_territories, } %> <%= simple_form_for( :doc_auth, From 75d6bf0aa8031cfd5869059550f52d89863eac82 Mon Sep 17 00:00:00 2001 From: Timothy Bradley Date: Thu, 20 Jul 2023 09:57:28 -0700 Subject: [PATCH 03/16] LG-10405: Inject states into PO search dropdown; fix bug using select with ValidatedField React component --- .../in-person-full-address-search.tsx | 36 ++++++++++--------- .../document-capture/context/in-person.ts | 7 ++++ app/javascript/packs/document-capture.tsx | 7 ++++ 3 files changed, 34 insertions(+), 16 deletions(-) diff --git a/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx b/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx index 2c3a5976b69..6af8df3d7a3 100644 --- a/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx +++ b/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx @@ -1,5 +1,5 @@ import { TextInput, SelectInput } from '@18f/identity-components'; -import { useState, useRef, useEffect, useCallback } from 'react'; +import { useState, useRef, useEffect, useCallback, useContext } from 'react'; import { t } from '@18f/identity-i18n'; import { request } from '@18f/identity-request'; import ValidatedField from '@18f/identity-validated-field/validated-field'; @@ -15,6 +15,7 @@ import { LOCATIONS_URL, PostOffice, } from '@18f/identity-address-search'; +import { InPersonContext } from '../context'; const formatLocations = (postOffices: PostOffice[]): FormattedLocation[] => postOffices.map((po: PostOffice, index) => ({ @@ -132,20 +133,17 @@ function FullAddressSearch({ validatedZipCodeFieldRef, } = useUspsLocations(); - const textInputChangeHandler = (input) => (event: React.ChangeEvent) => { - const { target } = event; - input(target.value); - }; - - const selectInputChangeHandler = (input) => (event: React.ChangeEvent) => { - const { target } = event; - input(target.value); - }; + const inputChangeHandler = + (input) => + (event: React.ChangeEvent) => { + const { target } = event; + input(target.value); + }; - const onAddressChange = textInputChangeHandler(setAddressInput); - const onCityChange = textInputChangeHandler(setCityInput); - const onStateChange = selectInputChangeHandler(setStateInput); - const onZipCodeChange = textInputChangeHandler(setZipCodeInput); + const onAddressChange = inputChangeHandler(setAddressInput); + const onCityChange = inputChangeHandler(setCityInput); + const onStateChange = inputChangeHandler(setStateInput); + const onZipCodeChange = inputChangeHandler(setZipCodeInput); useEffect(() => { spinnerButtonRef.current?.toggleSpinner(isLoading); @@ -168,6 +166,8 @@ function FullAddressSearch({ [addressInput, cityInput, stateInput, zipCodeInput], ); + const { usStatesTerritories } = useContext(InPersonContext); + return ( <> @@ -199,8 +199,12 @@ function FullAddressSearch({ label={t('in_person_proofing.body.location.po_search.state_label')} disabled={disabled} > - - + + {usStatesTerritories.map(([name, abbr]) => ( + + ))} diff --git a/app/javascript/packages/document-capture/context/in-person.ts b/app/javascript/packages/document-capture/context/in-person.ts index d554fae3c55..6cc1cb3ae12 100644 --- a/app/javascript/packages/document-capture/context/in-person.ts +++ b/app/javascript/packages/document-capture/context/in-person.ts @@ -20,11 +20,18 @@ export interface InPersonContextProps { * When true users must enter a full address when searching for a Post Office location */ inPersonFullAddressEntryEnabled: boolean; + + /** + * Collection of US states and territories + * Each item is [Long name, abbreviation], e.g. ['Ohio', 'OH'] + */ + usStatesTerritiories: Array<[string, string]>; } const InPersonContext = createContext({ inPersonOutageMessageEnabled: false, inPersonFullAddressEntryEnabled: false, + usStatesTerritiories: [], }); InPersonContext.displayName = 'InPersonContext'; diff --git a/app/javascript/packs/document-capture.tsx b/app/javascript/packs/document-capture.tsx index 19f936a3685..d70821ccd6e 100644 --- a/app/javascript/packs/document-capture.tsx +++ b/app/javascript/packs/document-capture.tsx @@ -83,8 +83,14 @@ const { inPersonFullAddressEntryEnabled, inPersonOutageMessageEnabled, inPersonOutageExpectedUpdateDate, + usStatesTerritories = '', } = appRoot.dataset as DOMStringMap & AppRootData; +let parsedUsStatesTerritories = []; +try { + parsedUsStatesTerritories = JSON.parse(usStatesTerritories); +} catch (e) {} + const App = composeComponents( [MarketingSiteContextProvider, { helpCenterRedirectURL, securityAndPrivacyHowItWorksURL }], [DeviceContext.Provider, { value: device }], @@ -96,6 +102,7 @@ const App = composeComponents( inPersonOutageMessageEnabled: inPersonOutageMessageEnabled === 'true', inPersonOutageExpectedUpdateDate, inPersonFullAddressEntryEnabled: inPersonFullAddressEntryEnabled === 'true', + usStatesTerritories: parsedUsStatesTerritories, }, }, ], From fb8e93ecd93335a6f025d194a9e0e08cb9730c91 Mon Sep 17 00:00:00 2001 From: Timothy Bradley Date: Thu, 20 Jul 2023 11:01:57 -0700 Subject: [PATCH 04/16] LG-10405: Fix typo and type issue --- .../packages/document-capture/context/in-person.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/javascript/packages/document-capture/context/in-person.ts b/app/javascript/packages/document-capture/context/in-person.ts index 6cc1cb3ae12..9a609923e88 100644 --- a/app/javascript/packages/document-capture/context/in-person.ts +++ b/app/javascript/packages/document-capture/context/in-person.ts @@ -19,19 +19,19 @@ export interface InPersonContextProps { /** * When true users must enter a full address when searching for a Post Office location */ - inPersonFullAddressEntryEnabled: boolean; + inPersonFullAddressEntryEnabled?: boolean; /** * Collection of US states and territories * Each item is [Long name, abbreviation], e.g. ['Ohio', 'OH'] */ - usStatesTerritiories: Array<[string, string]>; + usStatesTerritories: Array<[string, string]>; } const InPersonContext = createContext({ inPersonOutageMessageEnabled: false, inPersonFullAddressEntryEnabled: false, - usStatesTerritiories: [], + usStatesTerritories: [], }); InPersonContext.displayName = 'InPersonContext'; From bae6604732383992023d473b997c7fee19a53054 Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 11:08:58 -0700 Subject: [PATCH 05/16] keep flag non-optional --- app/javascript/packages/document-capture/context/in-person.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/packages/document-capture/context/in-person.ts b/app/javascript/packages/document-capture/context/in-person.ts index 9a609923e88..818ada23e4c 100644 --- a/app/javascript/packages/document-capture/context/in-person.ts +++ b/app/javascript/packages/document-capture/context/in-person.ts @@ -19,7 +19,7 @@ export interface InPersonContextProps { /** * When true users must enter a full address when searching for a Post Office location */ - inPersonFullAddressEntryEnabled?: boolean; + inPersonFullAddressEntryEnabled: boolean; /** * Collection of US states and territories From 7062b2ef375bf4d83eebbe5e2a71da0a2674c86b Mon Sep 17 00:00:00 2001 From: Timothy Bradley Date: Thu, 20 Jul 2023 11:49:48 -0700 Subject: [PATCH 06/16] LG-10405: Fix lint issues --- .../components/in-person-prepare-step.spec.tsx | 7 ++++++- app/javascript/packages/form-steps/form-steps.tsx | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/app/javascript/packages/document-capture/components/in-person-prepare-step.spec.tsx b/app/javascript/packages/document-capture/components/in-person-prepare-step.spec.tsx index 4c6543b8056..933c97aa072 100644 --- a/app/javascript/packages/document-capture/components/in-person-prepare-step.spec.tsx +++ b/app/javascript/packages/document-capture/components/in-person-prepare-step.spec.tsx @@ -26,6 +26,7 @@ describe('InPersonPrepareStep', () => { inPersonOutageMessageEnabled: true, inPersonOutageExpectedUpdateDate: 'January 1, 2024', inPersonFullAddressEntryEnabled: false, + usStatesTerritories: [], }} > @@ -38,7 +39,11 @@ describe('InPersonPrepareStep', () => { it('does not render a warning when the flag is disabled', () => { const { queryByText } = render( , diff --git a/app/javascript/packages/form-steps/form-steps.tsx b/app/javascript/packages/form-steps/form-steps.tsx index 497b3e9ce56..d072b2f6324 100644 --- a/app/javascript/packages/form-steps/form-steps.tsx +++ b/app/javascript/packages/form-steps/form-steps.tsx @@ -31,7 +31,7 @@ interface FormStepRegisterFieldOptions { export type RegisterFieldCallback = ( field: string, options?: Partial, -) => undefined | RefCallback; +) => undefined | RefCallback; export type OnErrorCallback = (error: Error, options?: { field?: string | null }) => void; From e581a467203c010a6d464ed59a7d49547413bfc8 Mon Sep 17 00:00:00 2001 From: Timothy Bradley Date: Thu, 20 Jul 2023 12:52:56 -0700 Subject: [PATCH 07/16] LG-10405: Fix type for registerField --- app/javascript/packages/form-steps/form-steps.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/packages/form-steps/form-steps.tsx b/app/javascript/packages/form-steps/form-steps.tsx index d072b2f6324..497b3e9ce56 100644 --- a/app/javascript/packages/form-steps/form-steps.tsx +++ b/app/javascript/packages/form-steps/form-steps.tsx @@ -31,7 +31,7 @@ interface FormStepRegisterFieldOptions { export type RegisterFieldCallback = ( field: string, options?: Partial, -) => undefined | RefCallback; +) => undefined | RefCallback; export type OnErrorCallback = (error: Error, options?: { field?: string | null }) => void; From aca703e46305a7b447beee201711e3a40e3049b3 Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 19:06:07 -0700 Subject: [PATCH 08/16] fix lint errors --- ...-location-full-address-entry-post-office-search-step.spec.tsx | 1 + .../document-capture/components/in-person-outage-alert.spec.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx b/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx index 6b14bb194a9..439e9b088b4 100644 --- a/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx +++ b/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx @@ -2,6 +2,7 @@ import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { I18n } from '@18f/identity-i18n'; import { setupServer } from 'msw/node'; +import type { SetupServer } from 'msw/node'; import { rest } from 'msw'; import { SWRConfig } from 'swr'; import { I18nContext } from '@18f/identity-react-i18n'; diff --git a/app/javascript/packages/document-capture/components/in-person-outage-alert.spec.tsx b/app/javascript/packages/document-capture/components/in-person-outage-alert.spec.tsx index f69d556b7f0..f8440070c7a 100644 --- a/app/javascript/packages/document-capture/components/in-person-outage-alert.spec.tsx +++ b/app/javascript/packages/document-capture/components/in-person-outage-alert.spec.tsx @@ -11,6 +11,7 @@ describe('InPersonOutageAlert', () => { inPersonOutageExpectedUpdateDate: 'January 1, 2024', inPersonOutageMessageEnabled: true, inPersonFullAddressEntryEnabled: false, + usStatesTerritories: [], }} > From a498826932db15cea17f3e11da2ad8a76e90092e Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 19:19:40 -0700 Subject: [PATCH 09/16] update feature spec to use select --- spec/support/features/in_person_helper.rb | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/spec/support/features/in_person_helper.rb b/spec/support/features/in_person_helper.rb index cb7b884f0d8..01ed1149994 100644 --- a/spec/support/features/in_person_helper.rb +++ b/spec/support/features/in_person_helper.rb @@ -118,8 +118,7 @@ def search_for_post_office_with_full_address with: GOOD_ADDRESS1 fill_in t('in_person_proofing.body.location.po_search.city_label'), with: GOOD_CITY - fill_in t('in_person_proofing.body.location.po_search.state_label'), - with: GOOD_STATE + select GOOD_STATE, from: t('in_person_proofing.form.state_id.identity_doc_address_state') fill_in t('in_person_proofing.body.location.po_search.zipcode_label'), with: GOOD_ZIPCODE click_spinner_button_and_wait(t('in_person_proofing.body.location.po_search.search_button')) From c166dfd3dbb95ec08984ad5a971806d58ff5b5ec Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 19:20:31 -0700 Subject: [PATCH 10/16] [skip changelog] From 128d2f3343e8e3ac2890b0a28f07238c97ff1c2b Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 19:34:39 -0700 Subject: [PATCH 11/16] selected not needed on default option --- .../components/in-person-full-address-search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx b/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx index 6af8df3d7a3..507756784da 100644 --- a/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx +++ b/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx @@ -199,7 +199,7 @@ function FullAddressSearch({ label={t('in_person_proofing.body.location.po_search.state_label')} disabled={disabled} > - {usStatesTerritories.map(([name, abbr]) => ( From b6033ed65aa3c8ffcbca63722b5c1c8feff5e285 Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 19:58:19 -0700 Subject: [PATCH 12/16] give options keys --- .../components/in-person-full-address-search.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx b/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx index 507756784da..7123836f236 100644 --- a/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx +++ b/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx @@ -199,11 +199,11 @@ function FullAddressSearch({ label={t('in_person_proofing.body.location.po_search.state_label')} disabled={disabled} > - {usStatesTerritories.map(([name, abbr]) => ( - + ))} From dee1037ba16077068b242b7a48d0e1ec66e28dad Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 20:46:47 -0700 Subject: [PATCH 13/16] fix js tests for state select --- ...ess-entry-post-office-search-step.spec.tsx | 112 ++++++++++++++---- 1 file changed, 89 insertions(+), 23 deletions(-) diff --git a/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx b/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx index 439e9b088b4..044058f078c 100644 --- a/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx +++ b/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx @@ -8,6 +8,7 @@ import { SWRConfig } from 'swr'; import { I18nContext } from '@18f/identity-react-i18n'; import { ComponentType } from 'react'; import { LOCATIONS_URL } from '@18f/identity-address-search'; +import { InPersonContext } from '../context'; import InPersonLocationFullAddressEntryPostOfficeSearchStep from './in-person-location-full-address-entry-post-office-search-step'; const USPS_RESPONSE = [ @@ -68,10 +69,17 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { it('renders the step', () => { const { getByRole } = render( - , - { - wrapper, - }, + + , + , + { wrapper }, ); expect(getByRole('heading', { name: 'in_person_proofing.headings.po_search.location' })); @@ -84,7 +92,16 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { it('displays a try again error message', async () => { const { findByText, findByLabelText } = render( - , + + , + , { wrapper }, ); @@ -96,7 +113,7 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { await findByLabelText('in_person_proofing.body.location.po_search.city_label'), 'Endeavor', ); - await userEvent.type( + await userEvent.selectOptions( await findByLabelText('in_person_proofing.body.location.po_search.state_label'), 'DE', ); @@ -116,10 +133,17 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { it('displays validation error messages to the user if fields are empty', async () => { const { findAllByText, findByText } = render( - , - { - wrapper, - }, + + , + , + { wrapper }, ); await userEvent.click( @@ -132,7 +156,16 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { it('displays no post office results if a successful search is followed by an unsuccessful search', async () => { const { findByText, findByLabelText, queryByRole } = render( - , + + , + , { wrapper }, ); @@ -144,7 +177,7 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { await findByLabelText('in_person_proofing.body.location.po_search.city_label'), 'Endeavor', ); - await userEvent.type( + await userEvent.selectOptions( await findByLabelText('in_person_proofing.body.location.po_search.state_label'), 'DE', ); @@ -172,7 +205,16 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { it('clicking search again after first results do not clear results', async () => { const { findAllByText, findByText, findByLabelText } = render( - , + + , + , { wrapper }, ); @@ -184,7 +226,7 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { await findByLabelText('in_person_proofing.body.location.po_search.city_label'), 'Endeavor', ); - await userEvent.type( + await userEvent.selectOptions( await findByLabelText('in_person_proofing.body.location.po_search.state_label'), 'DE', ); @@ -216,7 +258,16 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { }) } > - + + , + , , { wrapper }, ); @@ -228,7 +279,7 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { await findByLabelText('in_person_proofing.body.location.po_search.city_label'), 'Endeavor', ); - await userEvent.type( + await userEvent.selectOptions( await findByLabelText('in_person_proofing.body.location.po_search.state_label'), 'DE', ); @@ -267,7 +318,16 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { }) } > - + + , + , , { wrapper }, ); @@ -280,7 +340,7 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { await findByLabelText('in_person_proofing.body.location.po_search.city_label'), 'Endeavor', ); - await userEvent.type( + await userEvent.selectOptions( await findByLabelText('in_person_proofing.body.location.po_search.state_label'), 'DE', ); @@ -304,7 +364,16 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { it('allows user to select a location', async () => { const { findAllByText, findByLabelText, findByText, queryByText } = render( - , + + , + , { wrapper }, ); await userEvent.type( @@ -315,7 +384,7 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { await findByLabelText('in_person_proofing.body.location.po_search.city_label'), 'Endeavor', ); - await userEvent.type( + await userEvent.selectOptions( await findByLabelText('in_person_proofing.body.location.po_search.state_label'), 'DE', ); @@ -334,9 +403,6 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { await userEvent.clear( await findByLabelText('in_person_proofing.body.location.po_search.city_label'), ); - await userEvent.clear( - await findByLabelText('in_person_proofing.body.location.po_search.state_label'), - ); await userEvent.clear( await findByLabelText('in_person_proofing.body.location.po_search.zipcode_label'), ); From aad8a2b8ddbd7b88091507f516d2d01a212456b5 Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 21:07:46 -0700 Subject: [PATCH 14/16] safe navigation not needed --- ...rson-location-full-address-entry-post-office-search-step.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.tsx index e0506317236..c57dbd34c93 100644 --- a/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.tsx +++ b/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.tsx @@ -128,7 +128,7 @@ function InPersonLocationFullAddressEntryPostOfficeSearchStep({ )} From 68152ca3f49551e20d957bb34a7452b45f0fd2ef Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 21:10:02 -0700 Subject: [PATCH 15/16] use Value suffix instead of Input --- .../in-person-full-address-search.tsx | 53 ++++++++++--------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx b/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx index 7123836f236..208a7b70bc9 100644 --- a/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx +++ b/app/javascript/packages/document-capture/components/in-person-full-address-search.tsx @@ -47,7 +47,7 @@ function useUspsLocations() { const validatedZipCodeFieldRef = useRef(null); const handleLocationSearch = useCallback( - (event, addressInput, cityInput, stateInput, zipCodeInput) => { + (event, addressValue, cityValue, stateValue, zipCodeValue) => { event.preventDefault(); validatedAddressFieldRef.current?.setCustomValidity(''); validatedAddressFieldRef.current?.reportValidity(); @@ -59,20 +59,20 @@ function useUspsLocations() { validatedZipCodeFieldRef.current?.reportValidity(); if ( - addressInput.trim().length === 0 || - cityInput.trim().length === 0 || - stateInput.trim().length === 0 || - zipCodeInput.trim().length === 0 + addressValue.trim().length === 0 || + cityValue.trim().length === 0 || + stateValue.trim().length === 0 || + zipCodeValue.trim().length === 0 ) { return; } setLocationQuery({ - address: `${addressInput}, ${cityInput}, ${stateInput} ${zipCodeInput}`, - streetAddress: addressInput, - city: cityInput, - state: stateInput, - zipCode: zipCodeInput, + address: `${addressValue}, ${cityValue}, ${stateValue} ${zipCodeValue}`, + streetAddress: addressValue, + city: cityValue, + state: stateValue, + zipCode: zipCodeValue, }); }, [], @@ -115,12 +115,11 @@ function FullAddressSearch({ onError = () => undefined, disabled = false, }: FullAddressSearchProps) { - // todo: should we get rid of verbose 'input' word? const spinnerButtonRef = useRef(null); - const [addressInput, setAddressInput] = useState(''); - const [cityInput, setCityInput] = useState(''); - const [stateInput, setStateInput] = useState(''); - const [zipCodeInput, setZipCodeInput] = useState(''); + const [addressValue, setAddressValue] = useState(''); + const [cityValue, setCityValue] = useState(''); + const [stateValue, setStateValue] = useState(''); + const [zipCodeValue, setZipCodeValue] = useState(''); const { locationQuery, locationResults, @@ -140,10 +139,10 @@ function FullAddressSearch({ input(target.value); }; - const onAddressChange = inputChangeHandler(setAddressInput); - const onCityChange = inputChangeHandler(setCityInput); - const onStateChange = inputChangeHandler(setStateInput); - const onZipCodeChange = inputChangeHandler(setZipCodeInput); + const onAddressChange = inputChangeHandler(setAddressValue); + const onCityChange = inputChangeHandler(setCityValue); + const onStateChange = inputChangeHandler(setStateValue); + const onZipCodeChange = inputChangeHandler(setZipCodeValue); useEffect(() => { spinnerButtonRef.current?.toggleSpinner(isLoading); @@ -161,9 +160,9 @@ function FullAddressSearch({ const handleSearch = useCallback( (event) => { onError(null); - onSearch(event, addressInput, cityInput, stateInput, zipCodeInput); + onSearch(event, addressValue, cityValue, stateValue, zipCodeValue); }, - [addressInput, cityInput, stateInput, zipCodeInput], + [addressValue, cityValue, stateValue, zipCodeValue], ); const { usStatesTerritories } = useContext(InPersonContext); @@ -174,7 +173,7 @@ function FullAddressSearch({ {usStatesTerritories.map(([name, abbr]) => ( - + ))} @@ -212,7 +213,7 @@ function FullAddressSearch({ required className="tablet:grid-col-5" ref={registerField('zip_code')} - value={zipCodeInput} + value={zipCodeValue} onChange={onZipCodeChange} label={t('in_person_proofing.body.location.po_search.zipcode_label')} disabled={disabled} From 27541fae37bdec98678f3cd7bb63d274927960b7 Mon Sep 17 00:00:00 2001 From: Tomas Apodaca Date: Thu, 20 Jul 2023 21:20:45 -0700 Subject: [PATCH 16/16] lint fix --- ...tion-full-address-entry-post-office-search-step.spec.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx b/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx index 044058f078c..d61391e3e15 100644 --- a/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx +++ b/app/javascript/packages/document-capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx @@ -267,7 +267,8 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { }} > , - , + + , , { wrapper }, ); @@ -327,7 +328,8 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { }} > , - , + + , , { wrapper }, );