Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/javascript/packages/address-search/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ return(
disabled={disabledAddressSearchCallback}
handleLocationSelect={handleLocationSelect}
locationsURL={LOCATIONS_URL}
noInPersonLocationsDisplay={noInPersonLocationsDisplay}
onFoundLocations={setLocationResultsCallback}
registerField={registerFieldCallback}
resultsHeaderComponent={resultsHeaderComponent}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ import { t } from '@18f/identity-i18n';
import InPersonLocations from './in-person-locations';
import AddressInput from './address-input';
import type { AddressSearchProps, LocationQuery, FormattedLocation } from '../types';
import NoInPersonLocationsDisplay from './no-in-person-locations-display';

function AddressSearch({
addressSearchURL,
disabled,
handleLocationSelect,
locationsURL,
noInPersonLocationsDisplay = NoInPersonLocationsDisplay,
onFoundLocations,
registerField,
resultsHeaderComponent,
Expand Down Expand Up @@ -46,6 +48,7 @@ function AddressSearch({
{locationResults && foundAddress && !isLoadingLocations && (
<InPersonLocations
locations={locationResults}
noInPersonLocationsDisplay={noInPersonLocationsDisplay}
onSelect={handleLocationSelect}
address={foundAddress?.address || ''}
resultsHeaderComponent={resultsHeaderComponent}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,30 +1,41 @@
import { render } from '@testing-library/react';
import { Alert } from '@18f/identity-components';
import { screen } from '@testing-library/dom';
import sinon from 'sinon';
import type { FormattedLocation } from './in-person-locations';
import InPersonLocations from './in-person-locations';

function NoLocationsViewMock({ address }) {
return (
<div data-testid="no-results-found">
<p>No PO found</p>
<p>{address}</p>
</div>
);
}

describe('InPersonLocations', () => {
const locations: FormattedLocation[] = [
{
formattedCityStateZip: 'one',
distance: 'one',
name: 'test name',
streetAddress: '123 Test Address',
formattedCityStateZip: 'City, State 12345-1234',
distance: '0.2 miles',
weekdayHours: '9 AM - 5 PM',
saturdayHours: '9 AM - 6 PM',
sundayHours: 'Closed',
id: 1,
name: 'one',
saturdayHours: 'one',
streetAddress: 'one',
sundayHours: 'one',
weekdayHours: 'one',
isPilot: false,
},
{
formattedCityStateZip: 'two',
distance: 'two',
id: 2,
name: 'two',
saturdayHours: 'two',
streetAddress: 'two',
sundayHours: 'two',
weekdayHours: 'two',
name: 'test name',
streetAddress: '456 Test Address',
formattedCityStateZip: 'City, State 12345-1234',
distance: '2.1 miles',
weekdayHours: '8 AM - 5 PM',
saturdayHours: '10 AM - 5 PM',
sundayHours: 'Closed',
id: 1,
isPilot: false,
},
];
Expand All @@ -43,6 +54,7 @@ describe('InPersonLocations', () => {
resultsHeaderComponent={alertComponent}
locations={locations}
onSelect={onSelect}
noInPersonLocationsDisplay={NoLocationsViewMock}
/>,
);

Expand All @@ -52,19 +64,81 @@ describe('InPersonLocations', () => {

it('renders results instructions when onSelect is passed', () => {
const { getByText } = render(
<InPersonLocations address={address} locations={locations} onSelect={onSelect} />,
<InPersonLocations
address={address}
locations={locations}
onSelect={onSelect}
noInPersonLocationsDisplay={NoLocationsViewMock}
/>,
);

expect(getByText('in_person_proofing.body.location.po_search.results_instructions')).to.exist();
});

it('does not render results instructions when onSelect is not passed', () => {
const { queryByText } = render(
<InPersonLocations address={address} locations={locations} onSelect={null} />,
<InPersonLocations
address={address}
locations={locations}
onSelect={null}
noInPersonLocationsDisplay={NoLocationsViewMock}
/>,
);

expect(
queryByText('in_person_proofing.body.location.po_search.results_instructions'),
).to.not.exist();
});

context('when no locations are found', () => {
it('renders the passed in noLocations component w/ address', () => {
const onClick = sinon.stub();
const { getByText } = render(
<InPersonLocations
locations={[]}
onSelect={onClick}
address={address}
noInPersonLocationsDisplay={NoLocationsViewMock}
/>,
);

expect(getByText('No PO found')).to.exist();
expect(getByText(address)).to.exist();
expect(screen.getByTestId('no-results-found')).to.exist();
});

it('does not render Post Office results', () => {
const onClick = sinon.stub();
const { queryByText } = render(
<InPersonLocations
locations={[]}
onSelect={onClick}
address={address}
noInPersonLocationsDisplay={NoLocationsViewMock}
/>,
);

expect(queryByText('in_person_proofing.body.location.po_search.results_instructions')).to.be
.null;
expect(queryByText('in_person_proofing.body.location.retail_hours_heading')).not.to.exist();
});
});

context('when at least 1 location is found', () => {
it('renders a list of Post Offices and does not render the passed in noInPersonLocationsDisplay component', () => {
const onClick = sinon.stub();
const { queryByText } = render(
<InPersonLocations
locations={locations}
onSelect={onClick}
address={address}
noInPersonLocationsDisplay={NoLocationsViewMock}
/>,
);

expect(queryByText('123 Test Address')).to.exist();
expect(queryByText('456 Test Address')).to.exist();
expect(queryByText('No PO found')).to.be.null;
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { ComponentType } from 'react';
import { t } from '@18f/identity-i18n';
import LocationCollection from './location-collection';
import LocationCollectionItem from './location-collection-item';
import NoInPersonLocationsDisplay from './no-in-person-locations-display';

export interface FormattedLocation {
formattedCityStateZip: string;
Expand All @@ -20,13 +19,15 @@ interface InPersonLocationsProps {
locations: FormattedLocation[] | null | undefined;
onSelect;
address: string;
noInPersonLocationsDisplay: ComponentType<{ address: string }>;
resultsHeaderComponent?: ComponentType;
}

function InPersonLocations({
locations,
onSelect,
address,
noInPersonLocationsDisplay: NoInPersonLocationsDisplay,
resultsHeaderComponent: HeaderComponent,
}: InPersonLocationsProps) {
const isPilot = locations?.some((l) => l.isPilot);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import { getAssetPath } from '@18f/identity-assets';
import { t } from '@18f/identity-i18n';

function NoInPersonLocationsDisplay({ address }) {
interface NoInPersonLocationsDisplayProps {
address: string;
}

function NoInPersonLocationsDisplay({ address }: NoInPersonLocationsDisplayProps) {
return (
<div className="grid-row grid-gap grid-gap-1">
<img
className="grid-col-2 margin-top-3"
alt={t('image_description.info_pin_map')}
width={65}
height={64.6}
height={65}
Comment thread
gina-yamada marked this conversation as resolved.
src={getAssetPath('info-pin-map.svg')}
/>
<div className="inline-block grid-col-10">
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/packages/address-search/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@18f/identity-address-search",
"version": "2.2.0",
"version": "2.3.0",
"type": "module",
Comment thread
gina-yamada marked this conversation as resolved.
"private": false,
"files": [
Expand Down
1 change: 1 addition & 0 deletions app/javascript/packages/address-search/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ interface AddressSearchProps {
addressSearchURL: string;
disabled: boolean;
handleLocationSelect: ((e: any, id: number) => Promise<void>) | null | undefined;
noInPersonLocationsDisplay?: ComponentType<{ address: string }>;
resultsHeaderComponent?: ComponentType;
locationsURL: string;
onFoundLocations: Dispatch<SetStateAction<FormattedLocation[] | null | undefined>>;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Alert, PageHeading } from '@18f/identity-components';
import { useState } from 'react';
import { t } from '@18f/identity-i18n';
import { InPersonLocations } from '@18f/identity-address-search';
import { InPersonLocations, NoInPersonLocationsDisplay } from '@18f/identity-address-search';
import type { LocationQuery, FormattedLocation } from '@18f/identity-address-search/types';
import FullAddressSearchInput from './full-address-search-input';

Expand All @@ -11,6 +11,7 @@ function FullAddressSearch({
handleLocationSelect,
disabled,
onFoundLocations,
noInPersonLocationsDisplay = NoInPersonLocationsDisplay,
}) {
const [apiError, setApiError] = useState<Error | null>(null);
const [foundAddress, setFoundAddress] = useState<LocationQuery | null>(null);
Expand Down Expand Up @@ -48,6 +49,7 @@ function FullAddressSearch({
locations={locationResults}
onSelect={handleLocationSelect}
address={foundAddress.address || ''}
noInPersonLocationsDisplay={noInPersonLocationsDisplay}
/>
)}
</>
Expand Down
2 changes: 1 addition & 1 deletion config/locales/in_person_proofing/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ en:
city_label: City
is_searching_message: Searching for Post Office locations…
none_found: Sorry, there are no participating Post Offices within 50 miles of
%{address}.
%{address}
none_found_tip: You can search using a different address, or add photos of your
Copy link
Copy Markdown
Contributor Author

@gina-yamada gina-yamada Sep 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The mocks and the French translation for none_found do not have a trailing period so I removed the period for the English and Spanish translations.

Screenshot 2023-09-18 at 1 28 45 PM

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it hasn't already, then this verbiage change should get a cursory review by @18F/identity-joy-designers. The outcome may also affect the changes in 18F/identity-site#1167 since I don't see a prior design review for those changes.

Copy link
Copy Markdown
Contributor Author

@gina-yamada gina-yamada Sep 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rutvigupta-design Here is the piece that could use a review, please and thank you. Reach out on Slack if you have questions or want to jump on a call.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gina-yamada matching the English and Spanish versions to the Figma designs makes sense to me. Screenshots look good to me!

ID to try and verify your identity online again.
po_search_about: You can verify your identity in person at a local participating
Expand Down
2 changes: 1 addition & 1 deletion config/locales/in_person_proofing/es.yml
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ es:
city_label: Ciudad
is_searching_message: Buscando oficinas de correos…
none_found: Lo sentimos, no hay Oficinas de Correos participantes en un radio de
50 millas de la %{address}.
50 millas de la %{address}
none_found_tip: Puede buscar utilizando una dirección diferente, o añadir fotos
de su documento de identidad para intentar verificar su identidad en
línea de nuevo.
Expand Down