LG-10300: Add optional info alert to in person proofing location search

app/javascript/packages/address-search/README.md

@@ -26,12 +26,13 @@ import AddressSearch from '@18f/identity-address-search';
 return(
     <>
     <AddressSearch
-            registerField={registerFieldCallback}
-            onFoundAddress={setFoundAddressCallback}
-            onFoundLocations={setLocationResultsCallback}
-            onLoadingLocations={setLoadingLocationsCallback}
-            onError={setApiErrorCallback}
+            addressSearchURL={addressSearchURL}
             disabled={disabledAddressSearchCallback}
+            handleLocationSelect={handleLocationSelect}
+            locationsURL={LOCATIONS_URL}
+            onFoundLocations={setLocationResultsCallback}
+            registerField={registerFieldCallback}
+            resultsHeaderComponent={resultsHeaderComponent}
           />
     </>
 );

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

@@ -3,16 +3,17 @@ import { Alert, PageHeading } from '@18f/identity-components';
 import { t } from '@18f/identity-i18n';
 import InPersonLocations from './in-person-locations';
 import AddressInput from './address-input';
-import type { LocationQuery, FormattedLocation } from '../types';
+import type { AddressSearchProps, LocationQuery, FormattedLocation } from '../types';
 
 function AddressSearch({
-  registerField,
-  locationsURL,
   addressSearchURL,
-  handleLocationSelect,
   disabled,
+  handleLocationSelect,
+  locationsURL,
   onFoundLocations,
-}) {
+  registerField,
+  resultsHeaderComponent,
+}: AddressSearchProps) {
   const [apiError, setApiError] = useState<Error | null>(null);
   const [foundAddress, setFoundAddress] = useState<LocationQuery | null>(null);
   const [locationResults, setLocationResults] = useState<FormattedLocation[] | null | undefined>(
@@ -47,6 +48,7 @@ function AddressSearch({
           locations={locationResults}
           onSelect={handleLocationSelect}
           address={foundAddress?.address || ''}
+          resultsHeaderComponent={resultsHeaderComponent}
         />
       )}
     </>

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

@@ -0,0 +1,70 @@
+import { render } from '@testing-library/react';
+import { Alert } from '@18f/identity-components';
+import type { FormattedLocation } from './in-person-locations';
+import InPersonLocations from './in-person-locations';
+
+describe('InPersonLocations', () => {
+  const locations: FormattedLocation[] = [
+    {
+      formattedCityStateZip: 'one',
+      distance: 'one',
+      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',
+      isPilot: false,
+    },
+  ];
+
+  const onSelect = () => {};
+
+  const address = '123 Fake St, Hollywood, CA 90210';
+
+  it('renders a component at the top of results when passed', () => {
+    const alertText = 'hello world';
+    const alertComponent = () => <Alert>{alertText}</Alert>;
+
+    const { getByText } = render(
+      <InPersonLocations
+        address={address}
+        resultsHeaderComponent={alertComponent}
+        locations={locations}
+        onSelect={onSelect}
+      />,
+    );
+
+    // the alert text
+    expect(getByText(alertText)).to.exist();
+  });
+
+  it('renders results instructions when onSelect is passed', () => {
+    const { getByText } = render(
+      <InPersonLocations address={address} locations={locations} onSelect={onSelect} />,
+    );
+
+    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} />,
+    );
+
+    expect(
+      queryByText('in_person_proofing.body.location.po_search.results_instructions'),
+    ).to.not.exist();
+  });
+});

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

@@ -1,3 +1,4 @@
+import { ComponentType } from 'react';
 import { t } from '@18f/identity-i18n';
 import LocationCollection from './location-collection';
 import LocationCollectionItem from './location-collection-item';
@@ -19,9 +20,15 @@ interface InPersonLocationsProps {
   locations: FormattedLocation[] | null | undefined;
   onSelect;
   address: string;
+  resultsHeaderComponent?: ComponentType;
 }
 
-function InPersonLocations({ locations, onSelect, address }: InPersonLocationsProps) {
+function InPersonLocations({
+  locations,
+  onSelect,
+  address,
+  resultsHeaderComponent: HeaderComponent,
+}: InPersonLocationsProps) {
   const isPilot = locations?.some((l) => l.isPilot);
 
   if (locations?.length === 0) {
@@ -37,7 +44,8 @@ function InPersonLocations({ locations, onSelect, address }: InPersonLocationsPr
             count: locations?.length,
           })}
       </h3>
-      <p>{t('in_person_proofing.body.location.po_search.results_instructions')}</p>
+      {HeaderComponent && <HeaderComponent />}
+      {onSelect && <p>{t('in_person_proofing.body.location.po_search.results_instructions')}</p>}
       <LocationCollection>
         {(locations || []).map((item, index) => (
           <LocationCollectionItem

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

@@ -1,17 +1,17 @@
 import { snakeCase, formatLocations, transformKeys } from './utils';
-import InPersonLocations from './components/in-person-locations';
 import AddressInput from './components/address-input';
 import AddressSearch from './components/address-search';
+import InPersonLocations from './components/in-person-locations';
 import NoInPersonLocationsDisplay from './components/no-in-person-locations-display';
 import { requestUspsLocations } from './hooks/use-usps-locations';
 
 export {
-  snakeCase,
-  formatLocations,
-  transformKeys,
-  InPersonLocations,
   AddressInput,
+  InPersonLocations,
   NoInPersonLocationsDisplay,
+  formatLocations,
+  snakeCase,
+  transformKeys,
   requestUspsLocations,
 };
 

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

@@ -1,6 +1,6 @@
 {
   "name": "@18f/identity-address-search",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "private": false,
   "files": [

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

@@ -1,5 +1,5 @@
 import type { RegisterFieldCallback } from '@18f/identity-form-steps';
-import type { ReactNode } from 'react';
+import type { ComponentType, Dispatch, SetStateAction, ReactNode } from 'react';
 
 interface FormattedLocation {
   formattedCityStateZip: string;
@@ -54,6 +54,16 @@ interface AddressInputProps {
   locationsURL: string;
 }
 
+interface AddressSearchProps {
+  addressSearchURL: string;
+  disabled: boolean;
+  handleLocationSelect: ((e: any, id: number) => Promise<void>) | null | undefined;
+  resultsHeaderComponent?: ComponentType;
+  locationsURL: string;
+  onFoundLocations: Dispatch<SetStateAction<FormattedLocation[] | null | undefined>>;
+  registerField: RegisterFieldCallback;
+}
+
 interface InPersonLocationsProps {
   locations: FormattedLocation[] | null | undefined;
   onSelect;

app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.tsx

@@ -94,12 +94,12 @@ function InPersonLocationPostOfficeSearchStep({ onChange, toPreviousStep, regist
   return (
     <>
       <AddressSearch
-        registerField={registerField}
-        onFoundLocations={setLocationResults}
-        handleLocationSelect={handleLocationSelect}
+        addressSearchURL={ADDRESSES_URL}
         disabled={disabledAddressSearch}
+        handleLocationSelect={handleLocationSelect}
         locationsURL={LOCATIONS_URL}
-        addressSearchURL={ADDRESSES_URL}
+        onFoundLocations={setLocationResults}
+        registerField={registerField}
       />
       <BackButton role="link" includeBorder onClick={toPreviousStep} />
     </>