LG-11857: add header post office search results

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

@@ -1,5 +1,9 @@
 # `Change Log`
 
+## v3.4.0 (2024-11-07)
+
+- Added new optional resultsSectionHeading component prop to FullAddressSearch
+
 ## v3.3.0 (2024-11-05)
 
 - Remove obsolete `is_pilot` field from PostOffice and FormattedLocation types

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

@@ -320,4 +320,57 @@ describe('FullAddressSearch', () => {
       await expect(handleLocationsFound).to.eventually.be.called();
     });
   });
+
+  context('Address Search with Results Section Heading', () => {
+    let server: SetupServer;
+    before(() => {
+      server = setupServer(
+        http.post(locationsURL, () => HttpResponse.json([{ name: 'Baltimore' }])),
+      );
+      server.listen();
+    });
+
+    after(() => {
+      server.close();
+    });
+
+    it('renders the results section heading when passed in', async () => {
+      const handleLocationsFound = sandbox.stub();
+      const onSelect = sinon.stub();
+      const resultsSectionHeadingText = 'Mock Heading';
+      const { findByText, getByLabelText, getByText } = render(
+        <SWRConfig value={{ provider: () => new Map() }}>
+          <FullAddressSearch
+            usStatesTerritories={usStatesTerritories}
+            onFoundLocations={handleLocationsFound}
+            locationsURL={locationsURL}
+            registerField={() => undefined}
+            handleLocationSelect={onSelect}
+            disabled={false}
+            resultsSectionHeading={() => <h2>{resultsSectionHeadingText}</h2>}
+          />
+        </SWRConfig>,
+      );
+
+      await userEvent.type(
+        getByLabelText('in_person_proofing.body.location.po_search.address_label'),
+        '200 main',
+      );
+      await userEvent.type(
+        getByLabelText('in_person_proofing.body.location.po_search.city_label'),
+        'Endeavor',
+      );
+      await userEvent.selectOptions(
+        getByLabelText('in_person_proofing.body.location.po_search.state_label'),
+        'DE',
+      );
+      await userEvent.type(
+        getByLabelText('in_person_proofing.body.location.po_search.zipcode_label'),
+        '17201',
+      );
+      await userEvent.click(getByText('in_person_proofing.body.location.po_search.search_button'));
+
+      expect(await findByText(resultsSectionHeadingText)).to.exist();
+    });
+  });
 });

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

@@ -15,6 +15,7 @@ function FullAddressSearch({
   registerField,
   resultsHeaderComponent,
   usStatesTerritories,
+  resultsSectionHeading,
 }: FullAddressSearchProps) {
   const [apiError, setApiError] = useState<Error | null>(null);
   const [foundAddress, setFoundAddress] = useState<LocationQuery | null>(null);
@@ -61,6 +62,7 @@ function FullAddressSearch({
           address={foundAddress.address || ''}
           noInPersonLocationsDisplay={noInPersonLocationsDisplay}
           resultsHeaderComponent={resultsHeaderComponent}
+          resultsSectionHeading={resultsSectionHeading}
         />
       )}
     </>

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

@@ -88,6 +88,23 @@ describe('InPersonLocations', () => {
     ).to.not.exist();
   });
 
+  it('renders a header at the top of the results', () => {
+    const headingText = 'mock heading';
+    const testId = 'mock-heading';
+    const { getByTestId } = render(
+      <InPersonLocations
+        address={address}
+        locations={locations}
+        onSelect={onSelect}
+        noInPersonLocationsDisplay={NoLocationsViewMock}
+        resultsSectionHeading={() => <h2 data-testid={testId}>{headingText}</h2>}
+      />,
+    );
+
+    expect(getByTestId(testId)).to.exist();
+    expect(getByTestId(testId).textContent).to.equal(headingText);
+  });
+
   context('when no locations are found', () => {
     it('renders the passed in noLocations component w/ address', () => {
       const onClick = sinon.stub();

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

@@ -20,13 +20,15 @@ function InPersonLocations({
   address,
   noInPersonLocationsDisplay: NoInPersonLocationsDisplay,
   resultsHeaderComponent: HeaderComponent,
+  resultsSectionHeading: ResultsSectionHeading,
 }: InPersonLocationsProps) {
   if (locations?.length === 0) {
     return <NoInPersonLocationsDisplay address={address} />;
   }
 
   return (
     <>
+      {ResultsSectionHeading && <ResultsSectionHeading />}
       <h3 role="status">
         {t('in_person_proofing.body.location.po_search.results_description', {
           address,

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

@@ -1,6 +1,6 @@
 {
   "name": "@18f/identity-address-search",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "type": "module",
   "private": false,
   "files": [
@@ -34,4 +34,4 @@
     "directory": "app/javascript/packages/address-search"
   },
   "sideEffects": false
-}
+}

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

@@ -69,6 +69,7 @@ interface InPersonLocationsProps {
   noInPersonLocationsDisplay: ComponentType<{ address: string }>;
   onSelect;
   resultsHeaderComponent?: ComponentType;
+  resultsSectionHeading?: ComponentType;
 }
 
 interface LocationCollectionItemProps {
@@ -98,4 +99,5 @@ interface FullAddressSearchProps {
   registerField: RegisterFieldCallback;
   resultsHeaderComponent?: ComponentType;
   usStatesTerritories: string[][];
+  resultsSectionHeading?: ComponentType;
 }