diff --git a/app/javascript/packages/address-search/components/address-search.tsx b/app/javascript/packages/address-search/components/address-search.tsx index dcf6232319d..ac6d82fce1e 100644 --- a/app/javascript/packages/address-search/components/address-search.tsx +++ b/app/javascript/packages/address-search/components/address-search.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { Alert, PageHeading } from '@18f/identity-components'; -import { useI18n } from '@18f/identity-react-i18n'; +import { t } from '@18f/identity-i18n'; import InPersonLocations from './in-person-locations'; import AddressInput from './address-input'; import type { LocationQuery, FormattedLocation } from '../types'; @@ -19,7 +19,6 @@ function AddressSearch({ null, ); const [isLoadingLocations, setLoadingLocations] = useState(false); - const { t } = useI18n(); return ( <> diff --git a/app/javascript/packages/address-search/components/in-person-locations.tsx b/app/javascript/packages/address-search/components/in-person-locations.tsx index 6ea458b12b0..fe258755a69 100644 --- a/app/javascript/packages/address-search/components/in-person-locations.tsx +++ b/app/javascript/packages/address-search/components/in-person-locations.tsx @@ -1,4 +1,4 @@ -import { useI18n } from '@18f/identity-react-i18n'; +import { t } from '@18f/identity-i18n'; import LocationCollection from './location-collection'; import LocationCollectionItem from './location-collection-item'; @@ -21,7 +21,6 @@ interface InPersonLocationsProps { } function InPersonLocations({ locations, onSelect, address }: InPersonLocationsProps) { - const { t } = useI18n(); const isPilot = locations?.some((l) => l.isPilot); if (locations?.length === 0) { diff --git a/app/javascript/packages/address-search/components/location-collection-item.tsx b/app/javascript/packages/address-search/components/location-collection-item.tsx index 5d27d870685..1b2066959b5 100644 --- a/app/javascript/packages/address-search/components/location-collection-item.tsx +++ b/app/javascript/packages/address-search/components/location-collection-item.tsx @@ -1,5 +1,5 @@ import { SpinnerButton } from '@18f/identity-spinner-button'; -import { useI18n } from '@18f/identity-react-i18n'; +import { t } from '@18f/identity-i18n'; interface LocationCollectionItemProps { distance?: string; @@ -24,7 +24,6 @@ function LocationCollectionItem({ sundayHours, weekdayHours, }: LocationCollectionItemProps) { - const { t } = useI18n(); const numericDistance = distance?.split(' ')[0]; return ( diff --git a/app/javascript/packages/address-search/package.json b/app/javascript/packages/address-search/package.json index c0118198d48..f68b6a85b7b 100644 --- a/app/javascript/packages/address-search/package.json +++ b/app/javascript/packages/address-search/package.json @@ -1,6 +1,6 @@ { "name": "@18f/identity-address-search", - "version": "1.0.5", + "version": "2.0.0", "type": "module", "private": false, "files": [ 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 26a5b757233..eb56ce29695 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 @@ -1,11 +1,11 @@ import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { I18n } from '@18f/identity-i18n'; +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'; +import { usePropertyValue } from '@18f/identity-test-helpers'; import { ComponentType } from 'react'; import { InPersonContext } from '../context'; import InPersonLocationFullAddressEntryPostOfficeSearchStep from './in-person-location-full-address-entry-post-office-search-step'; @@ -243,21 +243,16 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => { await findAllByText('in_person_proofing.body.location.location_button'); }); - it('displays correct pluralization for a single location result', async () => { - const { findByLabelText, findByText } = render( - + context('pluralized and singularized translations are set', () => { + usePropertyValue(i18n, 'strings', { + 'in_person_proofing.body.location.po_search.results_description': { + one: 'There is one participating Post Office within 50 miles of %{address}.', + other: 'There are %{count} participating Post Offices within 50 miles of %{address}.', + }, + }); + + it('displays correct pluralization for a single location result', async () => { + const { findByLabelText, findByText } = render( { }} > , - - , - , - { wrapper }, - ); - await userEvent.type( - await findByLabelText('in_person_proofing.body.location.po_search.address_label'), - '222 Merchandise Mart Plaza', - ); - await userEvent.type( - await findByLabelText('in_person_proofing.body.location.po_search.city_label'), - 'Endeavor', - ); - await userEvent.selectOptions( - await findByLabelText('in_person_proofing.body.location.po_search.state_label'), - 'DE', - ); - await userEvent.type( - await findByLabelText('in_person_proofing.body.location.po_search.zipcode_label'), - '19701', - ); - await userEvent.click( - await findByText('in_person_proofing.body.location.po_search.search_button'), - ); - await userEvent.click( - await findByText('in_person_proofing.body.location.po_search.search_button'), - ); + , + { wrapper }, + ); + await userEvent.type( + await findByLabelText('in_person_proofing.body.location.po_search.address_label'), + '222 Merchandise Mart Plaza', + ); + await userEvent.type( + await findByLabelText('in_person_proofing.body.location.po_search.city_label'), + 'Endeavor', + ); + await userEvent.selectOptions( + await findByLabelText('in_person_proofing.body.location.po_search.state_label'), + 'DE', + ); + await userEvent.type( + await findByLabelText('in_person_proofing.body.location.po_search.zipcode_label'), + '19701', + ); + await userEvent.click( + await findByText('in_person_proofing.body.location.po_search.search_button'), + ); + await userEvent.click( + await findByText('in_person_proofing.body.location.po_search.search_button'), + ); - const addressQuery = '222 Merchandise Mart Plaza, Endeavor, DE 19701'; - const searchResultAlert = await findByText( - `There is one participating Post Office within 50 miles of ${addressQuery}.`, - ); - expect(searchResultAlert).to.exist(); - }); + const addressQuery = '222 Merchandise Mart Plaza, Endeavor, DE 19701'; + const searchResultAlert = await findByText( + `There is one participating Post Office within 50 miles of ${addressQuery}.`, + ); + expect(searchResultAlert).to.exist(); + }); - it('displays correct pluralization for multiple location results', async () => { - server.resetHandlers(); - server.use(rest.post(LOCATIONS_URL, (_req, res, ctx) => res(ctx.json(USPS_RESPONSE)))); - const { findByLabelText, findByText } = render( - + it('displays correct pluralization for multiple location results', async () => { + server.resetHandlers(); + server.use(rest.post(LOCATIONS_URL, (_req, res, ctx) => res(ctx.json(USPS_RESPONSE)))); + const { findByLabelText, findByText } = render( { }} > , - - , - , - { wrapper }, - ); + , + { wrapper }, + ); - await userEvent.type( - await findByLabelText('in_person_proofing.body.location.po_search.address_label'), - '222 Merchandise Mart Plaza', - ); - await userEvent.type( - await findByLabelText('in_person_proofing.body.location.po_search.city_label'), - 'Endeavor', - ); - await userEvent.selectOptions( - await findByLabelText('in_person_proofing.body.location.po_search.state_label'), - 'DE', - ); - await userEvent.type( - await findByLabelText('in_person_proofing.body.location.po_search.zipcode_label'), - '19701', - ); - await userEvent.click( - await findByText('in_person_proofing.body.location.po_search.search_button'), - ); - await userEvent.click( - await findByText('in_person_proofing.body.location.po_search.search_button'), - ); + await userEvent.type( + await findByLabelText('in_person_proofing.body.location.po_search.address_label'), + '222 Merchandise Mart Plaza', + ); + await userEvent.type( + await findByLabelText('in_person_proofing.body.location.po_search.city_label'), + 'Endeavor', + ); + await userEvent.selectOptions( + await findByLabelText('in_person_proofing.body.location.po_search.state_label'), + 'DE', + ); + await userEvent.type( + await findByLabelText('in_person_proofing.body.location.po_search.zipcode_label'), + '19701', + ); + await userEvent.click( + await findByText('in_person_proofing.body.location.po_search.search_button'), + ); + await userEvent.click( + await findByText('in_person_proofing.body.location.po_search.search_button'), + ); - const addressQuery = '222 Merchandise Mart Plaza, Endeavor, DE 19701'; - const searchResultAlert = await findByText( - `There are ${USPS_RESPONSE.length} participating Post Offices within 50 miles of ${addressQuery}.`, - ); - expect(searchResultAlert).to.exist(); + const addressQuery = '222 Merchandise Mart Plaza, Endeavor, DE 19701'; + const searchResultAlert = await findByText( + `There are ${USPS_RESPONSE.length} participating Post Offices within 50 miles of ${addressQuery}.`, + ); + expect(searchResultAlert).to.exist(); + }); }); it('allows user to select a location', async () => { 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 4b952423185..564c9fdcb0c 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 @@ -1,5 +1,5 @@ import { useState, useEffect, useCallback, useRef, useContext } from 'react'; -import { useI18n } from '@18f/identity-react-i18n'; +import { t } from '@18f/identity-i18n'; import { Alert, PageHeading } from '@18f/identity-components'; import { request } from '@18f/identity-request'; import { forceRedirect } from '@18f/identity-url'; @@ -18,7 +18,6 @@ function InPersonLocationFullAddressEntryPostOfficeSearchStep({ registerField, }) { const { inPersonURL } = useContext(InPersonContext); - const { t } = useI18n(); const [inProgress, setInProgress] = useState(false); const [isLoadingLocations, setLoadingLocations] = useState(false); const [autoSubmit, setAutoSubmit] = useState(false); diff --git a/app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.spec.tsx b/app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.spec.tsx index 28648a445a6..e85f0d1575d 100644 --- a/app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.spec.tsx +++ b/app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.spec.tsx @@ -1,11 +1,11 @@ import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { I18n } from '@18f/identity-i18n'; +import { i18n } from '@18f/identity-i18n'; +import { usePropertyValue } from '@18f/identity-test-helpers'; import { setupServer } from 'msw/node'; import { rest } from 'msw'; import type { SetupServer } from 'msw/node'; import { SWRConfig } from 'swr'; -import { I18nContext } from '@18f/identity-react-i18n'; import { ComponentType } from 'react'; import InPersonLocationPostOfficeSearchStep, { ADDRESSES_URL, @@ -222,82 +222,63 @@ describe('InPersonLocationPostOfficeSearchStep', () => { await findAllByText('in_person_proofing.body.location.location_button'); }); - it('displays correct pluralization for a single location result', async () => { - const { findByLabelText, findByText } = render( - - - , - { wrapper }, - ); - await userEvent.type( - await findByLabelText('in_person_proofing.body.location.po_search.address_search_label'), - '800 main', - ); - await userEvent.click( - await findByText('in_person_proofing.body.location.po_search.search_button'), - ); - await userEvent.click( - await findByText('in_person_proofing.body.location.po_search.search_button'), - ); + context('pluralized and singularized translations are set', () => { + usePropertyValue(i18n, 'strings', { + 'in_person_proofing.body.location.po_search.results_description': { + one: 'There is one participating Post Office within 50 miles of %{address}.', + other: 'There are %{count} participating Post Offices within 50 miles of %{address}.', + }, + }); - const searchResultAlert = await findByText( - `There is one participating Post Office within 50 miles of ${MULTI_LOCATION_RESPONSE[0].address}.`, - ); - expect(searchResultAlert).to.exist(); - }); + it('displays correct pluralization for a single location result', async () => { + const { findByLabelText, findByText } = render( + , + { wrapper }, + ); + await userEvent.type( + await findByLabelText('in_person_proofing.body.location.po_search.address_search_label'), + '800 main', + ); + await userEvent.click( + await findByText('in_person_proofing.body.location.po_search.search_button'), + ); + await userEvent.click( + await findByText('in_person_proofing.body.location.po_search.search_button'), + ); + + const searchResultAlert = await findByText( + `There is one participating Post Office within 50 miles of ${MULTI_LOCATION_RESPONSE[0].address}.`, + ); + expect(searchResultAlert).to.exist(); + }); - it('displays correct pluralization for multiple location results', async () => { - server.resetHandlers(); - server.use( - rest.post(ADDRESSES_URL, (_req, res, ctx) => - res(ctx.json(DEFAULT_RESPONSE), ctx.status(200)), - ), - rest.post(LOCATIONS_URL, (_req, res, ctx) => res(ctx.json(MULTI_LOCATION_RESPONSE))), - ); - const { findByLabelText, findByText } = render( - - - , - { wrapper }, - ); - await userEvent.type( - await findByLabelText('in_person_proofing.body.location.po_search.address_search_label'), - '800 main', - ); - await userEvent.click( - await findByText('in_person_proofing.body.location.po_search.search_button'), - ); - await userEvent.click( - await findByText('in_person_proofing.body.location.po_search.search_button'), - ); - const searchResultAlert = await findByText( - `There are ${MULTI_LOCATION_RESPONSE.length} participating Post Offices within 50 miles of ${MULTI_LOCATION_RESPONSE[0].address}.`, - ); - expect(searchResultAlert).to.exist(); + it('displays correct pluralization for multiple location results', async () => { + server.resetHandlers(); + server.use( + rest.post(ADDRESSES_URL, (_req, res, ctx) => + res(ctx.json(DEFAULT_RESPONSE), ctx.status(200)), + ), + rest.post(LOCATIONS_URL, (_req, res, ctx) => res(ctx.json(MULTI_LOCATION_RESPONSE))), + ); + const { findByLabelText, findByText } = render( + , + { wrapper }, + ); + await userEvent.type( + await findByLabelText('in_person_proofing.body.location.po_search.address_search_label'), + '800 main', + ); + await userEvent.click( + await findByText('in_person_proofing.body.location.po_search.search_button'), + ); + await userEvent.click( + await findByText('in_person_proofing.body.location.po_search.search_button'), + ); + const searchResultAlert = await findByText( + `There are ${MULTI_LOCATION_RESPONSE.length} participating Post Offices within 50 miles of ${MULTI_LOCATION_RESPONSE[0].address}.`, + ); + expect(searchResultAlert).to.exist(); + }); }); });