LG-10405: Add state dropdown

app/controllers/application_controller.rb

@@ -421,12 +421,6 @@ def sp_session_request_url_with_updated_params
     url = if request_url.path.match?('saml')
             sp_session[:final_auth_request] = true
             complete_saml_url
-          elsif IdentityConfig.store.rewrite_oidc_request_prompt
-            # Login.gov redirects to the orginal request_url after a user authenticates
-            # replace prompt=login with prompt=select_account to prevent sign_out
-            # which should only ever occur once when the user
-            # lands on Login.gov with prompt=login
-            sp_session[:request_url]&.gsub('prompt=login', 'prompt=select_account')
           else
             sp_session[:request_url]
           end

app/javascript/packages/components/index.ts

@@ -16,6 +16,7 @@ export { default as ProcessList } from './process-list/process-list';
 export { default as ProcessListHeading } from './process-list/process-list-heading';
 export { default as ProcessListItem } from './process-list/process-list-item';
 export { default as ScrollIntoView } from './scroll-into-view';
+export { default as SelectInput } from './select-input';
 export { default as SpinnerDots } from './spinner-dots';
 export { default as StatusPage } from './status-page';
 export { default as Tag } from './tag';

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

@@ -0,0 +1,94 @@
+import { createRef } from 'react';
+import { render } from '@testing-library/react';
+import { computeAccessibleDescription } from 'dom-accessibility-api';
+import SelectInput from './select-input';
+
+describe('SelectInput', () => {
+  it('renders with an associated label', () => {
+    const { getByLabelText } = render(<SelectInput label="Input">test</SelectInput>);
+
+    const input = getByLabelText('Input');
+
+    expect(input).to.be.an.instanceOf(HTMLSelectElement);
+    expect(input.classList.contains('usa-select')).to.be.true();
+  });
+
+  it('renders with child elements', () => {
+    const childElement = <option value="abc">def</option>;
+    const { getByText, getByLabelText } = render(
+      <SelectInput label="Input">{childElement}</SelectInput>,
+    );
+
+    const input = getByLabelText('Input');
+
+    expect(input).to.be.an.instanceOf(HTMLSelectElement);
+    const optionElement = getByText('def');
+    expect(optionElement).to.be.an.instanceOf(HTMLOptionElement);
+    expect((optionElement as HTMLOptionElement).selected).to.be.true();
+  });
+
+  it('uses an explicitly-provided ID', () => {
+    const customId = 'custom-id';
+    const { getByLabelText } = render(
+      <SelectInput label="Input" id={customId}>
+        test
+      </SelectInput>,
+    );
+
+    const input = getByLabelText('Input');
+
+    expect(input.id).to.equal(customId);
+  });
+
+  it('applies additional given classes', () => {
+    const customClass = 'custom-class';
+    const { getByLabelText } = render(
+      <SelectInput label="Input" className={customClass}>
+        test
+      </SelectInput>,
+    );
+
+    const input = getByLabelText('Input');
+
+    expect([...input.classList.values()]).to.have.all.members(['usa-select', customClass]);
+  });
+
+  it('applies additional input attributes', () => {
+    const value = 'password';
+    const { getByLabelText } = render(
+      <SelectInput label="Input" title={value}>
+        test
+      </SelectInput>,
+    );
+
+    const input = getByLabelText('Input');
+
+    expect(input.title).to.equal(value);
+  });
+
+  it('forwards ref', () => {
+    const ref = createRef<HTMLSelectElement>();
+    render(
+      <SelectInput label="Input" ref={ref}>
+        test
+      </SelectInput>,
+    );
+
+    expect(ref.current).to.be.an.instanceOf(HTMLSelectElement);
+  });
+
+  it('renders with a hint', () => {
+    const { getByLabelText, getByText } = render(
+      <SelectInput label="Input" hint="Something special">
+        test
+      </SelectInput>,
+    );
+
+    const input = getByLabelText('Input');
+    const description = computeAccessibleDescription(input);
+    const hint = getByText('Something special');
+
+    expect(description).to.equal('Something special');
+    expect(hint.classList.contains('usa-hint')).to.be.true();
+  });
+});

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

@@ -0,0 +1,64 @@
+import { forwardRef } from 'react';
+import type { InputHTMLAttributes, ForwardedRef } from 'react';
+import { useInstanceId } from '@18f/identity-react-hooks';
+
+export interface SelectInputProps extends InputHTMLAttributes<HTMLSelectElement> {
+  /**
+   * Text of label associated with input.
+   */
+  label: string;
+
+  /**
+   * Muted explainer text sitting below the label.
+   */
+  hint?: 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;
+
+  /**
+   * Child elements
+   */
+  children: React.ReactNode;
+}
+
+function SelectInput(
+  { label, hint, id, className, children, ...inputProps }: SelectInputProps,
+  ref: ForwardedRef<HTMLSelectElement>,
+) {
+  const instanceId = useInstanceId();
+  const inputId = id ?? `select-input-${instanceId}`;
+  const hintId = id ?? `select-input-hint-${instanceId}`;
+  const classes = ['usa-select', className].filter(Boolean).join(' ');
+
+  return (
+    <>
+      <label className="usa-label" htmlFor={inputId}>
+        {label}
+      </label>
+      {hint && (
+        <div id={hintId} className="usa-hint">
+          {hint}
+        </div>
+      )}
+      <select
+        ref={ref}
+        className={classes}
+        id={inputId}
+        aria-describedby={hint && hintId}
+        {...inputProps}
+      >
+        {children}
+      </select>
+    </>
+  );
+}
+
+export default forwardRef(SelectInput);

app/javascript/packages/document-capture/components/acuant-camera.tsx

@@ -93,14 +93,11 @@ interface AcuantCameraUIOptions {
   text: AcuantCameraUIText;
 }
 
-/**
- * Document type.
- *
- * 0 = None
- * 1 = ID
- * 2 = Passport
- */
-export type AcuantDocumentType = 0 | 1 | 2;
+export enum AcuantDocumentType {
+  NONE = 0,
+  ID = 1,
+  PASSPORT = 2,
+}
 
 export type AcuantCaptureFailureError =
   | undefined // Cropping failure (SDK v11.5.0, L1171)

app/javascript/packages/document-capture/components/acuant-capture.tsx

@@ -30,7 +30,7 @@ import type {
 } from './acuant-camera';
 
 type AcuantDocumentTypeLabel = 'id' | 'passport' | 'none';
-type AcuantImageAssessment = 'success' | 'glare' | 'blurry';
+type AcuantImageAssessment = 'success' | 'glare' | 'blurry' | 'unsupported';
 type ImageSource = 'acuant' | 'upload';
 
 interface ImageAnalyticsPayload {
@@ -438,15 +438,19 @@ function AcuantCapture(
     const { image, cardtype, dpi, moire, glare, sharpness } = nextCapture;
     const isAssessedAsGlare = glare < glareThreshold;
     const isAssessedAsBlurry = sharpness < sharpnessThreshold;
+    const isAssessedAsUnsupported = cardtype !== 1;
     const { width, height, data } = image;
 
     let assessment: AcuantImageAssessment;
-    if (isAssessedAsGlare) {
-      setOwnErrorMessage(t('doc_auth.errors.glare.failed_short'));
-      assessment = 'glare';
-    } else if (isAssessedAsBlurry) {
+    if (isAssessedAsBlurry) {
       setOwnErrorMessage(t('doc_auth.errors.sharpness.failed_short'));
       assessment = 'blurry';
+    } else if (isAssessedAsGlare) {
+      setOwnErrorMessage(t('doc_auth.errors.glare.failed_short'));
+      assessment = 'glare';
+    } else if (isAssessedAsUnsupported) {
+      setOwnErrorMessage(t('doc_auth.errors.card_type'));
+      assessment = 'unsupported';
     } else {
       assessment = 'success';
     }
@@ -456,6 +460,7 @@ function AcuantCapture(
       height,
       mimeType: 'image/jpeg', // Acuant Web SDK currently encodes all images as JPEG
       source: 'acuant',
+      isAssessedAsUnsupported,
       documentType: getDocumentTypeLabel(cardtype),
       dpi,
       moire,
@@ -475,7 +480,11 @@ function AcuantCapture(
       onChangeAndResetError(data, analyticsPayload);
       onResetFailedCaptureAttempts();
     } else {
-      onFailedCaptureAttempt({ isAssessedAsGlare, isAssessedAsBlurry });
+      onFailedCaptureAttempt({
+        isAssessedAsGlare,
+        isAssessedAsBlurry,
+        isAssessedAsUnsupported,
+      });
     }
 
     setIsCapturingEnvironment(false);

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

@@ -10,6 +10,7 @@ import { UploadFormEntriesError } from '../services/upload';
 import DocumentsStep from './documents-step';
 import InPersonPrepareStep from './in-person-prepare-step';
 import InPersonLocationPostOfficeSearchStep from './in-person-location-post-office-search-step';
+import InPersonLocationFullAddressEntryPostOfficeSearchStep from './in-person-location-full-address-entry-post-office-search-step';
 import InPersonSwitchBackStep from './in-person-switch-back-step';
 import ReviewIssuesStep from './review-issues-step';
 import UploadContext from '../context/upload';
@@ -36,7 +37,7 @@ function DocumentCapture({ onStepChange = () => {} }: DocumentCaptureProps) {
   const { t } = useI18n();
   const { flowPath } = useContext(UploadContext);
   const { trackSubmitEvent, trackVisitEvent } = useContext(AnalyticsContext);
-  const { inPersonURL } = useContext(InPersonContext);
+  const { inPersonFullAddressEntryEnabled, inPersonURL } = useContext(InPersonContext);
   const appName = getConfigValue('appName');
 
   useDidUpdateEffect(onStepChange, [stepName]);
@@ -78,6 +79,10 @@ function DocumentCapture({ onStepChange = () => {} }: DocumentCaptureProps) {
     initialValues = formValues;
   }
 
+  const inPersonLocationPostOfficeSearchForm = inPersonFullAddressEntryEnabled
+    ? InPersonLocationFullAddressEntryPostOfficeSearchStep
+    : InPersonLocationPostOfficeSearchStep;
+
   const inPersonSteps: FormStep[] =
     inPersonURL === undefined
       ? []
@@ -89,7 +94,7 @@ function DocumentCapture({ onStepChange = () => {} }: DocumentCaptureProps) {
           },
           {
             name: 'location',
-            form: InPersonLocationPostOfficeSearchStep,
+            form: inPersonLocationPostOfficeSearchForm,
             title: t('in_person_proofing.headings.po_search.location'),
           },
           flowPath === 'hybrid' && {