LG-7927 AddressSearch (draft) component relays results to USPS location search

app/controllers/idv/in_person/address_search_controller.rb

@@ -6,13 +6,13 @@ class AddressSearchController < ApplicationController
       check_or_render_not_found -> { IdentityConfig.store.arcgis_search_enabled }
 
       def index
-        render json: addresses
+        render json: addresses(params[:address])
       end
 
       protected
 
-      def addresses
-        suggestion = geocoder.suggest(permitted_params[:address]).first
+      def addresses(search_term)
+        suggestion = geocoder.suggest(search_term).first
         return [] unless suggestion
         geocoder.find_address_candidates(suggestion.magic_key).slice(0, 1)
       rescue Faraday::ConnectionFailed
@@ -22,10 +22,6 @@ def addresses
       def geocoder
         @geocoder ||= ArcgisApi::Geocoder.new
       end
-
-      def permitted_params
-        params.permit(:address)
-      end
     end
   end
 end

app/javascript/packages/components/index.ts

@@ -19,8 +19,10 @@ export { default as ScrollIntoView } from './scroll-into-view';
 export { default as SpinnerDots } from './spinner-dots';
 export { default as StatusPage } from './status-page';
 export { default as Tag } from './tag';
+export { default as TextInput } from './text-input';
 export { default as TroubleshootingOptions } from './troubleshooting-options';
 
 export type { ButtonProps } from './button';
 export type { FullScreenRefHandle } from './full-screen';
 export type { LinkProps } from './link';
+export type { TextInputProps } from './text-input';

app/javascript/packages/components/text-input.spec.tsx

@@ -0,0 +1,48 @@
+import { createRef } from 'react';
+import { render } from '@testing-library/react';
+import TextInput from './text-input';
+
+describe('TextInput', () => {
+  it('renders with an associated label', () => {
+    const { getByLabelText } = render(<TextInput label="Input" />);
+
+    const input = getByLabelText('Input');
+
+    expect(input).to.be.an.instanceOf(HTMLInputElement);
+    expect(input.classList.contains('usa-input')).to.be.true();
+  });
+
+  it('uses an explicitly-provided ID', () => {
+    const customId = 'custom-id';
+    const { getByLabelText } = render(<TextInput label="Input" id={customId} />);
+
+    const input = getByLabelText('Input');
+
+    expect(input.id).to.equal(customId);
+  });
+
+  it('applies additional given classes', () => {
+    const customClass = 'custom-class';
+    const { getByLabelText } = render(<TextInput label="Input" className={customClass} />);
+
+    const input = getByLabelText('Input');
+
+    expect([...input.classList.values()]).to.have.all.members(['usa-input', customClass]);
+  });
+
+  it('applies additional input attributes', () => {
+    const type = 'password';
+    const { getByLabelText } = render(<TextInput label="Input" type={type} />);
+
+    const input = getByLabelText('Input') as HTMLInputElement;
+
+    expect(input.type).to.equal(type);
+  });
+
+  it('forwards ref', () => {
+    const ref = createRef<HTMLInputElement>();
+    render(<TextInput label="Input" ref={ref} />);
+
+    expect(ref.current).to.be.an.instanceOf(HTMLInputElement);
+  });
+});

app/javascript/packages/components/text-input.tsx

@@ -0,0 +1,40 @@
+import { forwardRef } from 'react';
+import type { InputHTMLAttributes, ForwardedRef } from 'react';
+import { useInstanceId } from '@18f/identity-react-hooks';
+
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Text of label associated with input.
+   */
+  label: string;
+
+  /**
+   * Optional explicit ID to use in place of default behavior.
+   */
+  id?: string;
+
+  /**
+   * Additional class name to be applied to the input element.
+   */
+  className?: string;
+}
+
+function TextInput(
+  { label, id, className, ...inputProps }: TextInputProps,
+  ref: ForwardedRef<HTMLInputElement>,
+) {
+  const instanceId = useInstanceId();
+  const inputId = id ?? `text-input-${instanceId}`;
+  const classes = ['usa-input', className].filter(Boolean).join(' ');
+
+  return (
+    <>
+      <label className="usa-label" htmlFor={inputId}>
+        {label}
+      </label>
+      <input ref={ref} className={classes} id={inputId} {...inputProps} />
+    </>
+  );
+}
+
+export default forwardRef(TextInput);

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

@@ -0,0 +1,51 @@
+import { TextInput, Button } from '@18f/identity-components';
+import { request } from '@18f/identity-request';
+import { useState, useCallback, ChangeEvent } from 'react';
+
+interface Location {
+  street_address: string;
+  city: string;
+  state: string;
+  zip_code: string;
+  address: string;
+}
+
+interface AddressSearchProps {
+  onAddressFound?: (location: Location) => void;
+}
+
+export const ADDRESS_SEARCH_URL = '/api/addresses';
+
+function AddressSearch({ onAddressFound = () => {} }: AddressSearchProps) {
+  const [unvalidatedAddressInput, setUnvalidatedAddressInput] = useState('');
+  const [addressQuery, setAddressQuery] = useState({} as Location);
+  const handleAddressSearch = useCallback(async () => {
+    const addressCandidates = await request(ADDRESS_SEARCH_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      json: { address: unvalidatedAddressInput },
+    });
+
+    const bestMatchedAddress = addressCandidates[0];
+    setAddressQuery(bestMatchedAddress);
+    onAddressFound(bestMatchedAddress);
+  }, [unvalidatedAddressInput]);
+
+  return (
+    <>
+      <TextInput
+        value={unvalidatedAddressInput}
+        onChange={(event: ChangeEvent) => {
+          const target = event.target as HTMLInputElement;
+
+          setUnvalidatedAddressInput(target.value);
+        }}
+        label="Search for an address"
+      />
+      <Button onClick={handleAddressSearch}>Search</Button>
+      <>{addressQuery.address}</>
+    </>
+  );
+}
+
+export default AddressSearch;

app/javascript/packages/document-capture/components/in-person-location-step.spec.tsx

@@ -6,6 +6,8 @@ import userEvent from '@testing-library/user-event';
 import { useSandbox } from '@18f/identity-test-helpers';
 import AnalyticsContext, { AnalyticsContextProvider } from '../context/analytics';
 import InPersonLocationStep, { LOCATIONS_URL } from './in-person-location-step';
+import { ADDRESS_SEARCH_URL } from './address-search';
+import InPersonContext from '../context/in-person';
 
 describe('InPersonLocationStep', () => {
   const DEFAULT_PROPS = { toPreviousStep() {}, onChange() {}, value: {} };
@@ -18,6 +20,20 @@ describe('InPersonLocationStep', () => {
       .withArgs(LOCATIONS_URL)
       .resolves({
         json: () => Promise.resolve([{ name: 'Baltimore' }]),
+      } as Response)
+      .withArgs(ADDRESS_SEARCH_URL)
+      .resolves({
+        json: () =>
+          Promise.resolve([
+            {
+              address: '100 Main St, South Fulton, Tennessee, 38257',
+              location: { latitude: 36.501462000000004, longitude: -88.875981 },
+              street_address: '100 Main St',
+              city: 'South Fulton',
+              state: 'TN',
+              zip_code: '38257',
+            },
+          ]),
       } as Response);
   });
 
@@ -40,4 +56,23 @@ describe('InPersonLocationStep', () => {
 
     await findByText('{"selected_location":"Baltimore"}');
   });
+
+  it('allows search by address when enabled', async () => {
+    const { findByText, findByLabelText } = render(
+      <InPersonContext.Provider value={{ arcgisSearchEnabled: true }}>
+        <InPersonLocationStep {...DEFAULT_PROPS} />
+      </InPersonContext.Provider>,
+    );
+
+    await userEvent.type(await findByLabelText('Search for an address'), '100 main');
+    await userEvent.click(await findByText('Search'));
+    await findByText('100 Main St, South Fulton, Tennessee, 38257');
+    expect(window.fetch).to.have.been.calledWith(
+      LOCATIONS_URL,
+      sandbox.match({
+        body: '{"address":{"street_address":"100 Main St","city":"South Fulton","state":"TN","zip_code":"38257"}}',
+        method: 'post',
+      }),
+    );
+  });
 });

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

@@ -1,10 +1,13 @@
 import { useState, useEffect, useCallback, useRef, useContext } from 'react';
 import { useI18n } from '@18f/identity-react-i18n';
 import { PageHeading, SpinnerDots } from '@18f/identity-components';
+import { request } from '@18f/identity-request';
 import BackButton from './back-button';
 import LocationCollection from './location-collection';
 import LocationCollectionItem from './location-collection-item';
 import AnalyticsContext from '../context/analytics';
+import AddressSearch from './address-search';
+import InPersonContext from '../context/in-person';
 
 interface PostOffice {
   address: string;
@@ -29,64 +32,20 @@ interface FormattedLocation {
   sundayHours: string;
   weekdayHours: string;
 }
-
-interface RequestOptions {
-  /**
-   * Whether to send the request as a JSON request. Defaults to true.
-   */
-  json?: boolean;
-
-  /**
-   * Whether to include CSRF token in the request. Defaults to true.
-   */
-  csrf?: boolean;
-
-  /**
-   * Optional. HTTP verb used. Defaults to GET.
-   */
-  method?: string;
+interface LocationQuery {
+  streetAddress: string;
+  city: string;
+  state: string;
+  zipCode: string;
 }
 
-const DEFAULT_FETCH_OPTIONS = { csrf: true, json: true };
-
-const getCSRFToken = () =>
-  document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content;
-
-const request = async (
-  url: string,
-  body: BodyInit | object,
-  options: Partial<RequestOptions> = {},
-) => {
-  const headers: HeadersInit = {};
-  const mergedOptions: Partial<RequestOptions> = {
-    ...DEFAULT_FETCH_OPTIONS,
-    ...options,
-  };
-
-  if (mergedOptions.csrf) {
-    const csrf = getCSRFToken();
-    if (csrf) {
-      headers['X-CSRF-Token'] = csrf;
-    }
-  }
-
-  if (mergedOptions.json) {
-    headers['Content-Type'] = 'application/json';
-    body = JSON.stringify(body);
-  }
-
-  const response = await window.fetch(url, {
-    method: mergedOptions.method,
-    headers,
-    body: body as BodyInit,
-  });
-
-  return mergedOptions.json ? response.json() : response.text();
-};
-
 export const LOCATIONS_URL = '/verify/in_person/usps_locations';
 
-const getUspsLocations = () => request(LOCATIONS_URL, {}, { method: 'post' });
+const getUspsLocations = (address) =>
+  request(LOCATIONS_URL, {
+    method: 'post',
+    json: { address },
+  });
 
 const formatLocation = (postOffices: PostOffice[]) => {
   const formattedLocations = [] as FormattedLocation[];
@@ -124,10 +83,12 @@ const prepToSend = (location: object) => {
 function InPersonLocationStep({ onChange, toPreviousStep }) {
   const { t } = useI18n();
   const [locationData, setLocationData] = useState([] as FormattedLocation[]);
+  const [foundAddress, setFoundAddress] = useState({} as LocationQuery);
   const [inProgress, setInProgress] = useState(false);
   const [autoSubmit, setAutoSubmit] = useState(false);
   const [isLoadingComplete, setIsLoadingComplete] = useState(false);
   const { setSubmitEventMetadata } = useContext(AnalyticsContext);
+  const { arcgisSearchEnabled } = useContext(InPersonContext);
 
   // ref allows us to avoid a memory leak
   const mountedRef = useRef(false);
@@ -156,7 +117,8 @@ function InPersonLocationStep({ onChange, toPreviousStep }) {
       }
       const selected = prepToSend(selectedLocation);
       setInProgress(true);
-      await request(LOCATIONS_URL, selected, {
+      await request(LOCATIONS_URL, {
+        json: selected,
         method: 'PUT',
       })
         .then(() => {
@@ -181,26 +143,35 @@ function InPersonLocationStep({ onChange, toPreviousStep }) {
     [locationData, inProgress],
   );
 
+  const handleFoundAddress = useCallback((address) => {
+    setFoundAddress({
+      streetAddress: address.street_address,
+      city: address.city,
+      state: address.state,
+      zipCode: address.zip_code,
+    });
+  }, []);
+
   useEffect(() => {
-    let mounted = true;
+    let didCancel = false;
     (async () => {
       try {
-        const fetchedLocations = await getUspsLocations();
+        const fetchedLocations = await getUspsLocations(prepToSend(foundAddress));
 
-        if (mounted) {
+        if (!didCancel) {
           const formattedLocations = formatLocation(fetchedLocations);
           setLocationData(formattedLocations);
         }
       } finally {
-        if (mounted) {
+        if (!didCancel) {
           setIsLoadingComplete(true);
         }
       }
     })();
     return () => {
-      mounted = false;
+      didCancel = true;
     };
-  }, []);
+  }, [foundAddress]);
 
   let locationsContent: React.ReactNode;
   if (!isLoadingComplete) {
@@ -230,6 +201,7 @@ function InPersonLocationStep({ onChange, toPreviousStep }) {
   return (
     <>
       <PageHeading>{t('in_person_proofing.headings.location')}</PageHeading>
+      {arcgisSearchEnabled && <AddressSearch onAddressFound={handleFoundAddress} />}
       <p>{t('in_person_proofing.body.location.location_step_about')}</p>
       {locationsContent}
       <BackButton onClick={toPreviousStep} />