LG-8948: Swap order of form steps "Location" and "Prepare"

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

@@ -111,16 +111,16 @@ function DocumentCapture({ isAsyncForm = false, onStepChange = () => {} }: Docum
     inPersonURL === undefined
       ? []
       : ([
-          {
-            name: 'location',
-            form: InPersonLocationPostOfficeSearchStep,
-            title: t('in_person_proofing.headings.po_search.location'),
-          },
           {
             name: 'prepare',
             form: InPersonPrepareStep,
             title: t('in_person_proofing.headings.prepare'),
           },
+          {
+            name: 'location',
+            form: InPersonLocationPostOfficeSearchStep,
+            title: t('in_person_proofing.headings.po_search.location'),
+          },
           flowPath === 'hybrid' && {
             name: 'switch_back',
             form: InPersonSwitchBackStep,
@@ -155,7 +155,7 @@ function DocumentCapture({ isAsyncForm = false, onStepChange = () => {} }: Docum
       ].filter(Boolean) as FormStep[]);
 
   const stepIndicatorPath =
-    stepName && ['location', 'prepare', 'switch_back'].includes(stepName)
+    stepName && ['prepare', 'location', 'switch_back'].includes(stepName)
       ? VerifyFlowPath.IN_PERSON
       : VerifyFlowPath.DEFAULT;
 

app/javascript/packages/document-capture/components/in-person-call-to-action.tsx

@@ -34,7 +34,7 @@ function InPersonCallToAction({ altHeading, altPrompt, altButtonText }: InPerson
         isWide
         className="margin-top-3 margin-bottom-1"
         onClick={() => {
-          setStepName('location');
+          setStepName('prepare');
           trackEvent('IdV: verify in person troubleshooting option clicked', {
             in_person_cta_variant: inPersonCtaVariantActive,
           });

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef, useContext } from 'react';
 import { useI18n } from '@18f/identity-react-i18n';
 import { Alert, PageHeading } from '@18f/identity-components';
 import { request } from '@18f/identity-request';
+import { forceRedirect } from '@18f/identity-url';
 import BackButton from './back-button';
 import AnalyticsContext from '../context/analytics';
 import AddressSearch, {
@@ -14,12 +15,13 @@ import InPersonLocations, { FormattedLocation } from './in-person-locations';
 import { InPersonContext } from '../context';
 
 function InPersonLocationPostOfficeSearchStep({ onChange, toPreviousStep, registerField }) {
-  const { inPersonCtaVariantActive } = useContext(InPersonContext);
+  const { inPersonCtaVariantActive, inPersonURL } = useContext(InPersonContext);
   const { t } = useI18n();
+
   const [inProgress, setInProgress] = useState<boolean>(false);
   const [isLoadingLocations, setLoadingLocations] = useState<boolean>(false);
   const [autoSubmit, setAutoSubmit] = useState<boolean>(false);
-  const { setSubmitEventMetadata } = useContext(AnalyticsContext);
+  const { trackEvent } = useContext(AnalyticsContext);
   const [locationResults, setLocationResults] = useState<FormattedLocation[] | null | undefined>(
     null,
   );
@@ -40,13 +42,10 @@ function InPersonLocationPostOfficeSearchStep({ onChange, toPreviousStep, regist
   // useCallBack here prevents unnecessary rerenders due to changing function identity
   const handleLocationSelect = useCallback(
     async (e: any, id: number) => {
+      e.preventDefault();
       const selectedLocation = locationResults![id]!;
       const { streetAddress, formattedCityStateZip } = selectedLocation;
       const selectedLocationAddress = `${streetAddress}, ${formattedCityStateZip}`;
-      setSubmitEventMetadata({
-        selected_location: selectedLocationAddress,
-        in_person_cta_variant: inPersonCtaVariantActive,
-      });
       onChange({ selectedLocationAddress });
       if (autoSubmit) {
         setDisabledAddressSearch(true);
@@ -57,24 +56,29 @@ function InPersonLocationPostOfficeSearchStep({ onChange, toPreviousStep, regist
         }, 250);
         return;
       }
-      // prevent navigation from continuing
-      e.preventDefault();
+
       if (inProgress) {
         return;
       }
+
       const selected = transformKeys(selectedLocation, snakeCase);
       setInProgress(true);
       try {
         await request(LOCATIONS_URL, {
           json: selected,
           method: 'PUT',
         });
+
         if (mountedRef.current) {
           setAutoSubmit(true);
           setImmediate(() => {
             // continue with navigation
             e.target.disabled = false;
-            e.target.click();
+            trackEvent('IdV: location submitted', {
+              selected_location: selectedLocationAddress,
+              in_person_cta_variant: inPersonCtaVariantActive,
+            });
+            forceRedirect(inPersonURL!);
             // allow process to be re-triggered in case submission did not work as expected
             setAutoSubmit(false);
           });

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

@@ -1,52 +1,48 @@
 import { useContext, useState } from 'react';
 import type { MouseEventHandler } from 'react';
-import { Alert, Link, PageHeading, ProcessList, ProcessListItem } from '@18f/identity-components';
-import { removeUnloadProtection } from '@18f/identity-url';
+import { Button, Link, PageHeading, ProcessList, ProcessListItem } from '@18f/identity-components';
 import { getConfigValue } from '@18f/identity-config';
 import { useI18n } from '@18f/identity-react-i18n';
 import { FormStepsButton } from '@18f/identity-form-steps';
-import { SpinnerButton } from '@18f/identity-spinner-button';
+import useHistoryParam from '@18f/identity-form-steps/use-history-param';
 import UploadContext from '../context/upload';
 import MarketingSiteContext from '../context/marketing-site';
 import AnalyticsContext from '../context/analytics';
 import BackButton from './back-button';
 import InPersonTroubleshootingOptions from './in-person-troubleshooting-options';
 import { InPersonContext } from '../context';
 
-function InPersonPrepareStep({ toPreviousStep, value }) {
+function InPersonPrepareStep({ toPreviousStep }) {
   const { t } = useI18n();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { inPersonURL } = useContext(InPersonContext);
+  const [, setStepName] = useHistoryParam(undefined);
+  const { inPersonURL, inPersonCtaVariantActive } = useContext(InPersonContext);
   const { flowPath } = useContext(UploadContext);
-  const { trackEvent } = useContext(AnalyticsContext);
+  const { trackEvent, setSubmitEventMetadata } = useContext(AnalyticsContext);
   const { securityAndPrivacyHowItWorksURL } = useContext(MarketingSiteContext);
-  const { selectedLocationAddress } = value;
 
-  const onContinue: MouseEventHandler = async (event) => {
+  const onContinue: MouseEventHandler = (event: React.MouseEvent) => {
     event.preventDefault();
 
     if (!isSubmitting) {
       setIsSubmitting(true);
-      removeUnloadProtection();
-      await trackEvent('IdV: prepare submitted');
-      window.location.href = inPersonURL!;
+      setSubmitEventMetadata({ in_person_cta_variant: inPersonCtaVariantActive });
+      trackEvent('IdV: prepare submitted');
+      setStepName('location');
     }
   };
 
   return (
     <>
-      {selectedLocationAddress && (
-        <Alert type="success" className="margin-bottom-4">
-          {t('in_person_proofing.body.prepare.alert_selected_post_office', {
-            full_address: selectedLocationAddress,
-          })}
-        </Alert>
-      )}
       <PageHeading>{t('in_person_proofing.headings.prepare')}</PageHeading>
 
       <p>{t('in_person_proofing.body.prepare.verify_step_about')}</p>
 
       <ProcessList className="margin-bottom-4">
+        <ProcessListItem
+          heading={t('in_person_proofing.body.prepare.verify_step_post_office')}
+          headingUnstyled
+        />
         <ProcessListItem
           heading={t('in_person_proofing.body.prepare.verify_step_enter_pii')}
           headingUnstyled
@@ -59,9 +55,14 @@ function InPersonPrepareStep({ toPreviousStep, value }) {
       {flowPath === 'hybrid' && <FormStepsButton.Continue />}
       {inPersonURL && flowPath === 'standard' && (
         <div className="margin-y-5">
-          <SpinnerButton onClick={onContinue} isBig isWide>
+          <Button
+            isBig
+            isWide
+            className="margin-top-3 margin-bottom-1"
+            onClick={(event: React.MouseEvent) => onContinue(event)}
+          >
             {t('forms.buttons.continue')}
-          </SpinnerButton>
+          </Button>
         </div>
       )}
       <p>

app/javascript/packages/document-capture/components/in-person-troubleshooting-options.tsx

@@ -39,6 +39,15 @@ function InPersonTroubleshootingOptions({
             text: t('idv.troubleshooting.options.learn_more_verify_in_person'),
             isExternal: true,
           },
+          {
+            url: getHelpCenterURL({
+              category: 'verify-your-identity',
+              article: 'phone-number',
+              location,
+            }),
+            text: t('idv.troubleshooting.options.learn_more_verify_by_phone_in_person'),
+            isExternal: true,
+          },
           spName && {
             url: getFailureToProofURL(location),
             text: t('idv.troubleshooting.options.get_help_at_sp', { sp_name: spName }),

app/javascript/packages/document-capture/components/location-collection-item.tsx

@@ -26,7 +26,6 @@ function LocationCollectionItem({
 }: LocationCollectionItemProps) {
   const { t } = useI18n();
   const numericDistance = distance?.split(' ')[0];
-
   return (
     <li className="location-collection-item">
       <div className="usa-collection__body">
@@ -71,9 +70,7 @@ function LocationCollectionItem({
           <div className="grid-col-auto">
             <SpinnerButton
               className="display-none tablet:display-inline-block"
-              onClick={(event) => {
-                handleSelect(event, selectId);
-              }}
+              onClick={(event) => handleSelect(event, selectId)}
               type="submit"
             >
               {t('in_person_proofing.body.location.location_button')}

app/javascript/packages/document-capture/components/review-issues-step.tsx

@@ -187,7 +187,7 @@ function ReviewIssuesStep({
           actionOnClick={onWarningPageDismissed}
           altActionText={t('in_person_proofing.body.cta.button_variant')}
           altActionOnClick={onInPersonSelected}
-          altHref="#location"
+          altHref="#prepare"
           location="doc_auth_review_issues"
           remainingAttempts={remainingAttempts}
           troubleshootingOptions={

app/javascript/packages/document-capture/context/analytics.tsx

@@ -44,7 +44,7 @@ type AnalyticsContextProviderProps = Pick<AnalyticsContextValue, 'trackEvent'> &
 
 const DEFAULT_EVENT_METADATA: Record<string, any> = {};
 
-export const LOGGED_STEPS: string[] = ['location', 'prepare', 'switch_back'];
+export const LOGGED_STEPS: string[] = ['prepare', 'location', 'switch_back'];
 
 const AnalyticsContext = createContext<AnalyticsContextValue>({
   trackEvent: () => Promise.resolve(),
@@ -71,7 +71,7 @@ export function AnalyticsContextProvider({ children, trackEvent }: AnalyticsCont
 
   const extraAnalyticsAttributes = (stepName) => {
     const extra: EventMetadata = { ...DEFAULT_EVENT_METADATA };
-    if (stepName === 'location') {
+    if (stepName === 'prepare') {
       extra.in_person_cta_variant = inPersonCtaVariantActive;
     }
     return extra;

config/locales/idv/en.yml

@@ -234,6 +234,7 @@ en:
         learn_more_address_verification_options: Learn more about verifying by phone or mail
         learn_more_verify_by_mail: Learn more about verifying your address by mail
         learn_more_verify_by_phone: Learn more about what phone number to use
+        learn_more_verify_by_phone_in_person: Learn more about verifying your phone number
         learn_more_verify_in_person: Learn more about verifying in person
         supported_documents: See a list of accepted state-issued IDs
         verify_by_mail: Verify your address by mail instead

config/locales/idv/es.yml

@@ -248,6 +248,7 @@ es:
         learn_more_verify_by_mail: Obtenga más información sobre la verificación de su
           dirección por correo
         learn_more_verify_by_phone: Más información sobre qué número de teléfono usar
+        learn_more_verify_by_phone_in_person: Más información sobre cómo verificar su número de teléfono
         learn_more_verify_in_person: Más información sobre la verificación en persona
         supported_documents: Vea la lista de documentos de identidad emitidos por el
           estado que son aceptados

config/locales/idv/fr.yml

@@ -262,6 +262,7 @@ fr:
         learn_more_address_verification_options: En savoir plus sur la vérification par téléphone ou par courrier
         learn_more_verify_by_mail: En savoir plus sur la vérification de votre adresse par courrier
         learn_more_verify_by_phone: Apprenez-en plus sur quel numéro de téléphone utiliser
+        learn_more_verify_by_phone_in_person: En savoir plus sur la vérification de votre numéro de téléphone
         learn_more_verify_in_person: En savoir plus sur la vérification en personne
         supported_documents: Voir la liste des pièces d’identité acceptées et délivrées par l’État
         verify_by_mail: Vérifiez plutôt votre adresse par courrier

config/locales/in_person_proofing/en.yml

@@ -45,8 +45,8 @@ en:
             %{address}.
           none_found_tip: You can search using a different address, or add photos of your
             ID to try and verify your identity online again.
-          po_search_about: If you are having trouble adding your ID, you may be able to
-            verify your identity in person at a local United States Post Office.
+          po_search_about: You can verify your identity in person at a local participating
+            United States Post Office.
           results_description:
             one: There is one participating Post Office within 50 miles of %{address}.
             other: There are %{count} participating Post Offices within 50 miles of
@@ -59,7 +59,6 @@ en:
         retail_hours_sun: 'Sun:'
         retail_hours_weekday: 'Monday to Friday:'
       prepare:
-        alert_selected_post_office: You’ve selected the Post Office at %{full_address}.
         privacy_disclaimer: '%{app_name} is a secure, government website. We and the
           U.S. Postal Service use your data to verify your identity.'
         privacy_disclaimer_link: Learn more about privacy and security.
@@ -69,6 +68,7 @@ en:
         verify_step_enter_phone: Enter your primary phone number or the number that you use most often.
         verify_step_enter_pii: Enter your name, date of birth, state-issued ID number,
           address and Social Security number.
+        verify_step_post_office: Find a participating Post Office near you.
       state_id:
         alert_message: 'Your state-issued ID must not be expired. Accepted forms of ID are:'
         id_types:

config/locales/in_person_proofing/es.yml

@@ -67,7 +67,6 @@ es:
         retail_hours_sun: 'Dom:'
         retail_hours_weekday: 'De Lunes a Viernes:'
       prepare:
-        alert_selected_post_office: Ha seleccionado la oficina de correos a %{full_address}.
         privacy_disclaimer: '%{app_name} es un sitio web seguro del gobierno. Nosotros y
           el Servicio Postal de los Estados Unidos utilizamos sus datos para
           verificar su identidad.'
@@ -80,6 +79,7 @@ es:
         verify_step_enter_pii: Ingrese su nombre, fecha de nacimiento, número de
           identificación emitido por el estado, dirección y número de la
           Seguridad Social.
+        verify_step_post_office: Encuentre una Oficina de Correos participantes cercana a usted.
       state_id:
         alert_message: 'Su identificación emitida por el estado no debe estar vencida.
           Se aceptan las siguientes formas de identificación:'

config/locales/in_person_proofing/fr.yml

@@ -51,9 +51,8 @@ fr:
           none_found_tip: Vous pouvez effectuer une recherche en utilisant une autre
             adresse, ou ajouter des photos de votre pièce d’identité pour
             essayer de vérifier à nouveau votre identité en ligne.
-          po_search_about: Si vous avez des difficultés à ajouter votre pièce d’identité,
-            vous pouvez vérifier votre identité en personne dans un bureau de
-            poste américain proche.
+          po_search_about: Vous pouvez vérifier votre identité en personne dans un bureau
+            de poste américain local participant.
           results_description:
             one: Il y a 1 bureau de poste participant dans un rayon de 50 miles autour de
               %{address}.
@@ -67,7 +66,6 @@ fr:
         retail_hours_sun: 'Dim:'
         retail_hours_weekday: 'Lundi à Vendredi:'
       prepare:
-        alert_selected_post_office: Vous avez sélectionné le bureau de poste à %{full_address}.
         privacy_disclaimer: '%{app_name} est un site gouvernemental sécurisé. Nous et le
           service postal américain utilisons vos données pour vérifier votre
           identité.'
@@ -80,6 +78,7 @@ fr:
         verify_step_enter_pii: Saisissez votre nom, votre date de naissance, votre
           document d’identité délivré par l’État, votre adresse et votre numéro
           de sécurité sociale.
+        verify_step_post_office: Trouver un bureau de poste participant.
       state_id:
         alert_message: 'Votre carte d’identité délivrée par l’État ne doit pas être
           périmée. Les pièces d’identité acceptées sont:'

spec/controllers/idv/hybrid_mobile/document_capture_controller_spec.rb

@@ -87,7 +87,7 @@
           change { doc_auth_log.reload.document_capture_view_count }.from(0).to(1),
         )
       end
-
+      
       context 'with expired DocumentCaptureSession' do
         let(:document_capture_session_requested_at) do
           Time.zone.now.advance(

spec/features/idv/analytics_spec.rb

@@ -86,10 +86,10 @@
       'IdV: doc auth image upload form submitted' => { success: true, errors: {}, attempts: 1, remaining_attempts: 3, user_id: user.uuid, flow_path: 'standard' },
       'IdV: doc auth image upload vendor submitted' => hash_including(success: true, flow_path: 'standard', attention_with_barcode: true, doc_auth_result: 'Attention'),
       'IdV: verify in person troubleshooting option clicked' => { flow_path: 'standard', in_person_cta_variant: 'in_person_variant_a' },
-      'IdV: in person proofing location visited' => { flow_path: 'standard', in_person_cta_variant: 'in_person_variant_a' },
-      'IdV: in person proofing location submitted' => { flow_path: 'standard', selected_location: '606 E JUNEAU AVE, MILWAUKEE, WI, 53202-9998', in_person_cta_variant: 'in_person_variant_a' },
       'IdV: in person proofing prepare visited' => { flow_path: 'standard' },
       'IdV: in person proofing prepare submitted' => { flow_path: 'standard' },
+      'IdV: in person proofing location visited' => hash_including(flow_path: 'standard'),
+      'IdV: in person proofing location submitted' => { flow_path: 'standard', selected_location: '606 E JUNEAU AVE, MILWAUKEE, WI, 53202-9998', in_person_cta_variant: 'in_person_variant_a' },
       'IdV: in person proofing state_id visited' => { step: 'state_id', flow_path: 'standard', step_count: 1, analytics_id: 'In Person Proofing', irs_reproofing: false },
       'IdV: in person proofing state_id submitted' => { success: true, flow_path: 'standard', step: 'state_id', step_count: 1, analytics_id: 'In Person Proofing', irs_reproofing: false, errors: {} },
       'IdV: in person proofing address visited' => { step: 'address', flow_path: 'standard', step_count: 1, analytics_id: 'In Person Proofing', irs_reproofing: false },