From 24791d080ccc3b70af1120564b018aa60700edd2 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Thu, 14 Jul 2022 16:51:34 -0400
Subject: [PATCH 01/43] add naive process & icon list React components

---
 .../packages/components/icon-list-content.tsx | 20 +++++++++++++++
 .../packages/components/icon-list-icon.tsx    | 20 +++++++++++++++
 .../packages/components/icon-list-item.tsx    | 20 +++++++++++++++
 .../packages/components/icon-list-title.tsx   | 20 +++++++++++++++
 .../packages/components/icon-list.tsx         | 20 +++++++++++++++
 .../components/process-list-heading.tsx       | 25 +++++++++++++++++++
 .../packages/components/process-list-item.tsx | 20 +++++++++++++++
 .../packages/components/process-list.tsx      | 20 +++++++++++++++
 8 files changed, 165 insertions(+)
 create mode 100644 app/javascript/packages/components/icon-list-content.tsx
 create mode 100644 app/javascript/packages/components/icon-list-icon.tsx
 create mode 100644 app/javascript/packages/components/icon-list-item.tsx
 create mode 100644 app/javascript/packages/components/icon-list-title.tsx
 create mode 100644 app/javascript/packages/components/icon-list.tsx
 create mode 100644 app/javascript/packages/components/process-list-heading.tsx
 create mode 100644 app/javascript/packages/components/process-list-item.tsx
 create mode 100644 app/javascript/packages/components/process-list.tsx

diff --git a/app/javascript/packages/components/icon-list-content.tsx b/app/javascript/packages/components/icon-list-content.tsx
new file mode 100644
index 00000000000..fb6e101fca5
--- /dev/null
+++ b/app/javascript/packages/components/icon-list-content.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+interface IconListContentProps extends Record<string, any> {
+  children?: ReactNode;
+
+  className?: string;
+}
+
+function IconListContent({ children, className }: IconListContentProps, ref) {
+  const classes = ['usa-icon-list__content', className].filter(Boolean).join(' ');
+
+  return (
+    <div ref={ref} className={classes}>
+      {children}
+    </div>
+  );
+}
+
+export default forwardRef(IconListContent);
diff --git a/app/javascript/packages/components/icon-list-icon.tsx b/app/javascript/packages/components/icon-list-icon.tsx
new file mode 100644
index 00000000000..aae8bdd990f
--- /dev/null
+++ b/app/javascript/packages/components/icon-list-icon.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+interface IconListIconProps extends Record<string, any> {
+  children?: ReactNode;
+
+  className?: string;
+}
+
+function IconListIcon({ children, className }: IconListIconProps, ref) {
+  const classes = ['usa-icon-list__icon', className].filter(Boolean).join(' ');
+
+  return (
+    <div ref={ref} className={classes}>
+      {children}
+    </div>
+  );
+}
+
+export default forwardRef(IconListIcon);
diff --git a/app/javascript/packages/components/icon-list-item.tsx b/app/javascript/packages/components/icon-list-item.tsx
new file mode 100644
index 00000000000..2f8b3e0b275
--- /dev/null
+++ b/app/javascript/packages/components/icon-list-item.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+interface IconListItemProps extends Record<string, any> {
+  children?: ReactNode;
+
+  className?: string;
+}
+
+function IconListItem({ children, className }: IconListItemProps, ref) {
+  const classes = ['usa-icon-list__item', className].filter(Boolean).join(' ');
+
+  return (
+    <li ref={ref} className={classes}>
+      {children}
+    </li>
+  );
+}
+
+export default forwardRef(IconListItem);
diff --git a/app/javascript/packages/components/icon-list-title.tsx b/app/javascript/packages/components/icon-list-title.tsx
new file mode 100644
index 00000000000..aabd9200826
--- /dev/null
+++ b/app/javascript/packages/components/icon-list-title.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+interface IconListTitleProps extends Record<string, any> {
+  children?: ReactNode;
+
+  className?: string;
+}
+
+function IconListTitle({ children, className }: IconListTitleProps, ref) {
+  const classes = ['usa-icon-list__title', className].filter(Boolean).join(' ');
+
+  return (
+    <h4 ref={ref} className={classes}>
+      {children}
+    </h4>
+  );
+}
+
+export default forwardRef(IconListTitle);
diff --git a/app/javascript/packages/components/icon-list.tsx b/app/javascript/packages/components/icon-list.tsx
new file mode 100644
index 00000000000..d4f7b7e4723
--- /dev/null
+++ b/app/javascript/packages/components/icon-list.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+interface IconListProps extends Record<string, any> {
+  children?: ReactNode;
+
+  className?: string;
+}
+
+function IconList({ children, className }: IconListProps, ref) {
+  const classes = ['usa-icon-list', className].filter(Boolean).join(' ');
+
+  return (
+    <ul ref={ref} className={classes}>
+      {children}
+    </ul>
+  );
+}
+
+export default forwardRef(IconList);
diff --git a/app/javascript/packages/components/process-list-heading.tsx b/app/javascript/packages/components/process-list-heading.tsx
new file mode 100644
index 00000000000..6494482a57e
--- /dev/null
+++ b/app/javascript/packages/components/process-list-heading.tsx
@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+interface ProcessListHeadingProps extends Record<string, any> {
+  children?: ReactNode;
+
+  className?: string;
+
+  // pass unstyled to render unstyled text
+  unstyled?: boolean;
+}
+
+function ProcessListHeading({ children, className, unstyled }: ProcessListHeadingProps, ref) {
+  const headingClass = unstyled === true ? undefined : 'usa-process-list__heading';
+  const noClasses = headingClass === undefined && className === undefined;
+  const classes = noClasses ? undefined : [headingClass, className].filter(Boolean).join(' ');
+
+  return (
+    <p ref={ref} className={classes}>
+      {children}
+    </p>
+  );
+}
+
+export default forwardRef(ProcessListHeading);
diff --git a/app/javascript/packages/components/process-list-item.tsx b/app/javascript/packages/components/process-list-item.tsx
new file mode 100644
index 00000000000..d190b1de382
--- /dev/null
+++ b/app/javascript/packages/components/process-list-item.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+interface ProcessListItemProps extends Record<string, any> {
+  className?: string;
+
+  children?: ReactNode;
+}
+
+function ProcessListItem({ children, className }: ProcessListItemProps, ref) {
+  const classes = ['usa-process-list__item', className].filter(Boolean).join(' ');
+
+  return (
+    <li ref={ref} className={classes}>
+      {children}
+    </li>
+  );
+}
+
+export default forwardRef(ProcessListItem);
diff --git a/app/javascript/packages/components/process-list.tsx b/app/javascript/packages/components/process-list.tsx
new file mode 100644
index 00000000000..f9d8715e1f0
--- /dev/null
+++ b/app/javascript/packages/components/process-list.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+interface ProcessListProps extends Record<string, any> {
+  className?: string;
+
+  children?: ReactNode;
+}
+
+function ProcessList({ children, className }: ProcessListProps, ref) {
+  const classes = ['usa-process-list', className].filter(Boolean).join(' ');
+
+  return (
+    <ol ref={ref} className={classes}>
+      {children}
+    </ol>
+  );
+}
+
+export default forwardRef(ProcessList);

From 2351891b4b287a327bed16b1768290c34e6692ff Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Tue, 21 Jun 2022 14:11:03 -0700
Subject: [PATCH 02/43] add new copy (english)

---
 config/locales/in_person_proofing/en.yml | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/config/locales/in_person_proofing/en.yml b/config/locales/in_person_proofing/en.yml
index 8549dc3e2b0..3efb00da7d6 100644
--- a/config/locales/in_person_proofing/en.yml
+++ b/config/locales/in_person_proofing/en.yml
@@ -34,6 +34,30 @@ en:
         info_html: 'Enter information <strong>exactly as it appears on your state-issued
           ID.</strong> We will use this information to confirm it matches your
           ID in person.'
+      welcome:
+        alert_selected_post_office: 'You’ve selected the %{name} Post Office.'
+        bring_barcode_header: A copy of your barcode
+        bring_barcode_info: 'We will give you a unique code that expires within 30 days.'
+        bring_id_header: 'Your state-issued ID'
+        bring_id_info_acceptable: 'Your ID must not be expired. Acceptable forms of ID are:'
+        bring_id_info_dl: State Driver’s License
+        bring_id_info_id_card: 'State Non-Driver’s Identification Card'
+        bring_id_info_no_other_forms: We do not currently accept any other forms of
+          Identification, such as passports and military IDs
+        bring_proof_header: Proof of your current address
+        bring_proof_info_acceptable: 'You need a proof of address if your current
+          address is different than the address on your ID. Acceptable forms of
+          proof of address are:'
+        bring_proof_info_card: Vehicle Registration Card
+        bring_proof_info_lease: Lease, Mortgage, or Deed of Trust
+        bring_proof_info_policy: Home or Vehicle Insurance Policy
+        bring_proof_info_registration: Voter Registration
+        bring_title: 'When you go to the Post Office, please bring:'
+        verify_step_about: 'Complete the steps below to generate the barcode you’ll take
+          with you to the Post Office:'
+        verify_step_enter_phone: Enter a phone number with your name on the plan.
+        verify_step_enter_pii: 'Enter your name, date of birth, state-issued ID number,
+          address and Social Security number.'
     form:
       address:
         address1: Address

From 7992d3e30f2e14d0235bf88d2f990eb05348ccc4 Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Tue, 21 Jun 2022 14:12:52 -0700
Subject: [PATCH 03/43] add welcome step (will rename)

---
 .../components/welcome-step.jsx               | 115 ++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 app/javascript/packages/document-capture/components/welcome-step.jsx

diff --git a/app/javascript/packages/document-capture/components/welcome-step.jsx b/app/javascript/packages/document-capture/components/welcome-step.jsx
new file mode 100644
index 00000000000..056e6a8d17e
--- /dev/null
+++ b/app/javascript/packages/document-capture/components/welcome-step.jsx
@@ -0,0 +1,115 @@
+import { useContext } from 'react';
+import { hasMediaAccess } from '@18f/identity-device';
+import { useI18n } from '@18f/identity-react-i18n';
+import { FormStepsButton } from '@18f/identity-form-steps';
+import {
+  Alert,
+  Icon,
+  IconList,
+  IconListItem,
+  IconListIcon,
+  IconListTitle,
+  IconListContent,
+  PageHeading,
+  ProcessList,
+  ProcessListItem,
+  ProcessListHeading,
+} from '@18f/identity-components';
+import DeviceContext from '../context/device';
+import StartOverOrCancel from './start-over-or-cancel';
+
+/**
+ * @typedef WelcomeStepValue
+ *
+ * @prop {Blob|string|null|undefined} welcome Welcome value.
+ */
+
+/**
+ * @param {import('@18f/identity-form-steps').FormStepComponentProps<WelcomeStepValue>} props Props object.
+ */
+function WelcomeStep({
+  value = {},
+  onChange = () => {},
+  errors = [],
+  registerField = () => undefined,
+}) {
+  const { t } = useI18n();
+  const error = errors.find(({ field }) => field === 'welcome')?.error;
+
+  return (
+    <>
+      <Alert type="success" className="margin-bottom-4">
+        {t('in_person_proofing.body.welcome.alert_selected_post_office', { name: 'EASTCHESTER' })}
+      </Alert>
+      <PageHeading>{t('in_person_proofing.headings.welcome')}</PageHeading>
+
+      <p>{t('in_person_proofing.body.welcome.verify_step_about')}</p>
+
+      <ProcessList>
+        <ProcessListItem>
+          <ProcessListHeading unstyled>
+            {t('in_person_proofing.body.welcome.verify_step_enter_pii')}
+          </ProcessListHeading>
+        </ProcessListItem>
+        <ProcessListItem>
+          <ProcessListHeading unstyled>
+            {t('in_person_proofing.body.welcome.verify_step_enter_phone')}
+          </ProcessListHeading>
+        </ProcessListItem>
+      </ProcessList>
+
+      <hr />
+
+      <h2>{t('in_person_proofing.body.welcome.bring_title')}</h2>
+
+      <IconList>
+        <IconListItem>
+          <IconListIcon className="text-indigo">
+            <Icon icon="check_circle" />
+          </IconListIcon>
+          <IconListContent>
+            <IconListTitle>
+              {t('in_person_proofing.body.welcome.bring_barcode_header')}
+            </IconListTitle>
+            <p>{t('in_person_proofing.body.welcome.bring_barcode_info')}</p>
+          </IconListContent>
+        </IconListItem>
+
+        <IconListItem>
+          <IconListIcon className="text-indigo">
+            <Icon icon="check_circle" />
+          </IconListIcon>
+          <IconListContent>
+            <IconListTitle>{t('in_person_proofing.body.welcome.bring_id_header')}</IconListTitle>
+            <p>{t('in_person_proofing.body.welcome.bring_id_info_acceptable')}</p>
+            <ul>
+              <li>{t('in_person_proofing.body.welcome.bring_id_info_dl')}</li>
+              <li>{t('in_person_proofing.body.welcome.bring_id_info_id_card')}</li>
+            </ul>
+            <p>{t('in_person_proofing.body.welcome.bring_id_info_no_other_forms')}</p>
+          </IconListContent>
+        </IconListItem>
+
+        <IconListItem>
+          <IconListIcon className="text-indigo">
+            <Icon icon="check_circle" />
+          </IconListIcon>
+          <IconListContent>
+            <IconListTitle>{t('in_person_proofing.body.welcome.bring_proof_header')}</IconListTitle>
+            <p>{t('in_person_proofing.body.welcome.bring_proof_info_acceptable')}</p>
+            <ul>
+              <li>{t('in_person_proofing.body.welcome.bring_proof_info_lease')}</li>
+              <li>{t('in_person_proofing.body.welcome.bring_proof_info_registration')}</li>
+              <li>{t('in_person_proofing.body.welcome.bring_proof_info_card')}</li>
+              <li>{t('in_person_proofing.body.welcome.bring_proof_info_policy')}</li>
+            </ul>
+          </IconListContent>
+        </IconListItem>
+      </IconList>
+      <FormStepsButton.Submit />
+      <StartOverOrCancel />
+    </>
+  );
+}
+
+export default WelcomeStep;

From f9deb37b513656ef3f51efb2d439077dcd084bac Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Tue, 21 Jun 2022 14:16:35 -0700
Subject: [PATCH 04/43] add WelcomeStep to the flow

---
 .../packages/document-capture/components/document-capture.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/javascript/packages/document-capture/components/document-capture.jsx b/app/javascript/packages/document-capture/components/document-capture.jsx
index 49760bc3238..26bd61ab830 100644
--- a/app/javascript/packages/document-capture/components/document-capture.jsx
+++ b/app/javascript/packages/document-capture/components/document-capture.jsx
@@ -125,6 +125,10 @@ function DocumentCapture({ isAsyncForm = false, onStepChange }) {
                 })(ReviewIssuesStep)
               : ReviewIssuesStep,
         },
+        {
+          name: 'welcome',
+          form: WelcomeStep,
+        },
       ]
         .concat(inPersonSteps)
         .filter(Boolean)

From a2b098f63225e13dc0da6cfd7ff1ecfc1de930b1 Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Tue, 21 Jun 2022 15:41:24 -0700
Subject: [PATCH 05/43] organize list components into directories

---
 .../packages/components/icon-list-content.tsx | 20 ---------------
 .../packages/components/icon-list-icon.tsx    | 20 ---------------
 .../packages/components/icon-list-item.tsx    | 20 ---------------
 .../packages/components/icon-list-title.tsx   | 20 ---------------
 .../packages/components/icon-list.tsx         | 20 ---------------
 .../components/process-list-heading.tsx       | 25 -------------------
 .../packages/components/process-list-item.tsx | 20 ---------------
 .../packages/components/process-list.tsx      | 20 ---------------
 8 files changed, 165 deletions(-)
 delete mode 100644 app/javascript/packages/components/icon-list-content.tsx
 delete mode 100644 app/javascript/packages/components/icon-list-icon.tsx
 delete mode 100644 app/javascript/packages/components/icon-list-item.tsx
 delete mode 100644 app/javascript/packages/components/icon-list-title.tsx
 delete mode 100644 app/javascript/packages/components/icon-list.tsx
 delete mode 100644 app/javascript/packages/components/process-list-heading.tsx
 delete mode 100644 app/javascript/packages/components/process-list-item.tsx
 delete mode 100644 app/javascript/packages/components/process-list.tsx

diff --git a/app/javascript/packages/components/icon-list-content.tsx b/app/javascript/packages/components/icon-list-content.tsx
deleted file mode 100644
index fb6e101fca5..00000000000
--- a/app/javascript/packages/components/icon-list-content.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { forwardRef } from 'react';
-import type { ReactNode } from 'react';
-
-interface IconListContentProps extends Record<string, any> {
-  children?: ReactNode;
-
-  className?: string;
-}
-
-function IconListContent({ children, className }: IconListContentProps, ref) {
-  const classes = ['usa-icon-list__content', className].filter(Boolean).join(' ');
-
-  return (
-    <div ref={ref} className={classes}>
-      {children}
-    </div>
-  );
-}
-
-export default forwardRef(IconListContent);
diff --git a/app/javascript/packages/components/icon-list-icon.tsx b/app/javascript/packages/components/icon-list-icon.tsx
deleted file mode 100644
index aae8bdd990f..00000000000
--- a/app/javascript/packages/components/icon-list-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { forwardRef } from 'react';
-import type { ReactNode } from 'react';
-
-interface IconListIconProps extends Record<string, any> {
-  children?: ReactNode;
-
-  className?: string;
-}
-
-function IconListIcon({ children, className }: IconListIconProps, ref) {
-  const classes = ['usa-icon-list__icon', className].filter(Boolean).join(' ');
-
-  return (
-    <div ref={ref} className={classes}>
-      {children}
-    </div>
-  );
-}
-
-export default forwardRef(IconListIcon);
diff --git a/app/javascript/packages/components/icon-list-item.tsx b/app/javascript/packages/components/icon-list-item.tsx
deleted file mode 100644
index 2f8b3e0b275..00000000000
--- a/app/javascript/packages/components/icon-list-item.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { forwardRef } from 'react';
-import type { ReactNode } from 'react';
-
-interface IconListItemProps extends Record<string, any> {
-  children?: ReactNode;
-
-  className?: string;
-}
-
-function IconListItem({ children, className }: IconListItemProps, ref) {
-  const classes = ['usa-icon-list__item', className].filter(Boolean).join(' ');
-
-  return (
-    <li ref={ref} className={classes}>
-      {children}
-    </li>
-  );
-}
-
-export default forwardRef(IconListItem);
diff --git a/app/javascript/packages/components/icon-list-title.tsx b/app/javascript/packages/components/icon-list-title.tsx
deleted file mode 100644
index aabd9200826..00000000000
--- a/app/javascript/packages/components/icon-list-title.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { forwardRef } from 'react';
-import type { ReactNode } from 'react';
-
-interface IconListTitleProps extends Record<string, any> {
-  children?: ReactNode;
-
-  className?: string;
-}
-
-function IconListTitle({ children, className }: IconListTitleProps, ref) {
-  const classes = ['usa-icon-list__title', className].filter(Boolean).join(' ');
-
-  return (
-    <h4 ref={ref} className={classes}>
-      {children}
-    </h4>
-  );
-}
-
-export default forwardRef(IconListTitle);
diff --git a/app/javascript/packages/components/icon-list.tsx b/app/javascript/packages/components/icon-list.tsx
deleted file mode 100644
index d4f7b7e4723..00000000000
--- a/app/javascript/packages/components/icon-list.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { forwardRef } from 'react';
-import type { ReactNode } from 'react';
-
-interface IconListProps extends Record<string, any> {
-  children?: ReactNode;
-
-  className?: string;
-}
-
-function IconList({ children, className }: IconListProps, ref) {
-  const classes = ['usa-icon-list', className].filter(Boolean).join(' ');
-
-  return (
-    <ul ref={ref} className={classes}>
-      {children}
-    </ul>
-  );
-}
-
-export default forwardRef(IconList);
diff --git a/app/javascript/packages/components/process-list-heading.tsx b/app/javascript/packages/components/process-list-heading.tsx
deleted file mode 100644
index 6494482a57e..00000000000
--- a/app/javascript/packages/components/process-list-heading.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { forwardRef } from 'react';
-import type { ReactNode } from 'react';
-
-interface ProcessListHeadingProps extends Record<string, any> {
-  children?: ReactNode;
-
-  className?: string;
-
-  // pass unstyled to render unstyled text
-  unstyled?: boolean;
-}
-
-function ProcessListHeading({ children, className, unstyled }: ProcessListHeadingProps, ref) {
-  const headingClass = unstyled === true ? undefined : 'usa-process-list__heading';
-  const noClasses = headingClass === undefined && className === undefined;
-  const classes = noClasses ? undefined : [headingClass, className].filter(Boolean).join(' ');
-
-  return (
-    <p ref={ref} className={classes}>
-      {children}
-    </p>
-  );
-}
-
-export default forwardRef(ProcessListHeading);
diff --git a/app/javascript/packages/components/process-list-item.tsx b/app/javascript/packages/components/process-list-item.tsx
deleted file mode 100644
index d190b1de382..00000000000
--- a/app/javascript/packages/components/process-list-item.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { forwardRef } from 'react';
-import type { ReactNode } from 'react';
-
-interface ProcessListItemProps extends Record<string, any> {
-  className?: string;
-
-  children?: ReactNode;
-}
-
-function ProcessListItem({ children, className }: ProcessListItemProps, ref) {
-  const classes = ['usa-process-list__item', className].filter(Boolean).join(' ');
-
-  return (
-    <li ref={ref} className={classes}>
-      {children}
-    </li>
-  );
-}
-
-export default forwardRef(ProcessListItem);
diff --git a/app/javascript/packages/components/process-list.tsx b/app/javascript/packages/components/process-list.tsx
deleted file mode 100644
index f9d8715e1f0..00000000000
--- a/app/javascript/packages/components/process-list.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { forwardRef } from 'react';
-import type { ReactNode } from 'react';
-
-interface ProcessListProps extends Record<string, any> {
-  className?: string;
-
-  children?: ReactNode;
-}
-
-function ProcessList({ children, className }: ProcessListProps, ref) {
-  const classes = ['usa-process-list', className].filter(Boolean).join(' ');
-
-  return (
-    <ol ref={ref} className={classes}>
-      {children}
-    </ol>
-  );
-}
-
-export default forwardRef(ProcessList);

From d5f8f64c8a4380511d1c4d59fc255f17b14b888c Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Tue, 21 Jun 2022 15:42:39 -0700
Subject: [PATCH 06/43] rename ipp/welcome to ipp/prepare

---
 .../components/document-capture.jsx           |  4 +-
 ...me-step.jsx => in-person-prepare-step.jsx} | 50 +++++++++----------
 app/services/idv/steps/ipp/prepare_step.rb    | 11 ++++
 app/views/idv/in_person/welcome.html.erb      | 15 ++++++
 config/locales/in_person_proofing/en.yml      |  2 +-
 .../idv/steps/ipp/prepare_step_spec.rb        | 28 +++++++++++
 6 files changed, 82 insertions(+), 28 deletions(-)
 rename app/javascript/packages/document-capture/components/{welcome-step.jsx => in-person-prepare-step.jsx} (60%)
 create mode 100644 app/services/idv/steps/ipp/prepare_step.rb
 create mode 100644 app/views/idv/in_person/welcome.html.erb
 create mode 100644 spec/services/idv/steps/ipp/prepare_step_spec.rb

diff --git a/app/javascript/packages/document-capture/components/document-capture.jsx b/app/javascript/packages/document-capture/components/document-capture.jsx
index 26bd61ab830..aaffc13cf10 100644
--- a/app/javascript/packages/document-capture/components/document-capture.jsx
+++ b/app/javascript/packages/document-capture/components/document-capture.jsx
@@ -126,8 +126,8 @@ function DocumentCapture({ isAsyncForm = false, onStepChange }) {
               : ReviewIssuesStep,
         },
         {
-          name: 'welcome',
-          form: WelcomeStep,
+          name: 'prepare',
+          form: InPersonPrepareStep,
         },
       ]
         .concat(inPersonSteps)
diff --git a/app/javascript/packages/document-capture/components/welcome-step.jsx b/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
similarity index 60%
rename from app/javascript/packages/document-capture/components/welcome-step.jsx
rename to app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
index 056e6a8d17e..93d4d69f0c8 100644
--- a/app/javascript/packages/document-capture/components/welcome-step.jsx
+++ b/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
@@ -19,48 +19,48 @@ import DeviceContext from '../context/device';
 import StartOverOrCancel from './start-over-or-cancel';
 
 /**
- * @typedef WelcomeStepValue
+ * @typedef InPersonPrepareStepValue
  *
- * @prop {Blob|string|null|undefined} welcome Welcome value.
+ * @prop {Blob|string|null|undefined} inPersonPrepare InPersonPrepare value.
  */
 
 /**
- * @param {import('@18f/identity-form-steps').FormStepComponentProps<WelcomeStepValue>} props Props object.
+ * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonPrepareValue>} props Props object.
  */
-function WelcomeStep({
+function InPersonPrepareStep({
   value = {},
   onChange = () => {},
   errors = [],
   registerField = () => undefined,
 }) {
   const { t } = useI18n();
-  const error = errors.find(({ field }) => field === 'welcome')?.error;
+  const error = errors.find(({ field }) => field === 'in-person-prepare')?.error;
 
   return (
     <>
       <Alert type="success" className="margin-bottom-4">
-        {t('in_person_proofing.body.welcome.alert_selected_post_office', { name: 'EASTCHESTER' })}
+        {t('in_person_proofing.body.prepare.alert_selected_post_office', { name: 'EASTCHESTER' })}
       </Alert>
-      <PageHeading>{t('in_person_proofing.headings.welcome')}</PageHeading>
+      <PageHeading>{t('in_person_proofing.headings.prepare')}</PageHeading>
 
-      <p>{t('in_person_proofing.body.welcome.verify_step_about')}</p>
+      <p>{t('in_person_proofing.body.prepare.verify_step_about')}</p>
 
       <ProcessList>
         <ProcessListItem>
           <ProcessListHeading unstyled>
-            {t('in_person_proofing.body.welcome.verify_step_enter_pii')}
+            {t('in_person_proofing.body.prepare.verify_step_enter_pii')}
           </ProcessListHeading>
         </ProcessListItem>
         <ProcessListItem>
           <ProcessListHeading unstyled>
-            {t('in_person_proofing.body.welcome.verify_step_enter_phone')}
+            {t('in_person_proofing.body.prepare.verify_step_enter_phone')}
           </ProcessListHeading>
         </ProcessListItem>
       </ProcessList>
 
       <hr />
 
-      <h2>{t('in_person_proofing.body.welcome.bring_title')}</h2>
+      <h2>{t('in_person_proofing.body.prepare.bring_title')}</h2>
 
       <IconList>
         <IconListItem>
@@ -69,9 +69,9 @@ function WelcomeStep({
           </IconListIcon>
           <IconListContent>
             <IconListTitle>
-              {t('in_person_proofing.body.welcome.bring_barcode_header')}
+              {t('in_person_proofing.body.prepare.bring_barcode_header')}
             </IconListTitle>
-            <p>{t('in_person_proofing.body.welcome.bring_barcode_info')}</p>
+            <p>{t('in_person_proofing.body.prepare.bring_barcode_info')}</p>
           </IconListContent>
         </IconListItem>
 
@@ -80,13 +80,13 @@ function WelcomeStep({
             <Icon icon="check_circle" />
           </IconListIcon>
           <IconListContent>
-            <IconListTitle>{t('in_person_proofing.body.welcome.bring_id_header')}</IconListTitle>
-            <p>{t('in_person_proofing.body.welcome.bring_id_info_acceptable')}</p>
+            <IconListTitle>{t('in_person_proofing.body.prepare.bring_id_header')}</IconListTitle>
+            <p>{t('in_person_proofing.body.prepare.bring_id_info_acceptable')}</p>
             <ul>
-              <li>{t('in_person_proofing.body.welcome.bring_id_info_dl')}</li>
-              <li>{t('in_person_proofing.body.welcome.bring_id_info_id_card')}</li>
+              <li>{t('in_person_proofing.body.prepare.bring_id_info_dl')}</li>
+              <li>{t('in_person_proofing.body.prepare.bring_id_info_id_card')}</li>
             </ul>
-            <p>{t('in_person_proofing.body.welcome.bring_id_info_no_other_forms')}</p>
+            <p>{t('in_person_proofing.body.prepare.bring_id_info_no_other_forms')}</p>
           </IconListContent>
         </IconListItem>
 
@@ -95,13 +95,13 @@ function WelcomeStep({
             <Icon icon="check_circle" />
           </IconListIcon>
           <IconListContent>
-            <IconListTitle>{t('in_person_proofing.body.welcome.bring_proof_header')}</IconListTitle>
-            <p>{t('in_person_proofing.body.welcome.bring_proof_info_acceptable')}</p>
+            <IconListTitle>{t('in_person_proofing.body.prepare.bring_proof_header')}</IconListTitle>
+            <p>{t('in_person_proofing.body.prepare.bring_proof_info_acceptable')}</p>
             <ul>
-              <li>{t('in_person_proofing.body.welcome.bring_proof_info_lease')}</li>
-              <li>{t('in_person_proofing.body.welcome.bring_proof_info_registration')}</li>
-              <li>{t('in_person_proofing.body.welcome.bring_proof_info_card')}</li>
-              <li>{t('in_person_proofing.body.welcome.bring_proof_info_policy')}</li>
+              <li>{t('in_person_proofing.body.prepare.bring_proof_info_lease')}</li>
+              <li>{t('in_person_proofing.body.prepare.bring_proof_info_registration')}</li>
+              <li>{t('in_person_proofing.body.prepare.bring_proof_info_card')}</li>
+              <li>{t('in_person_proofing.body.prepare.bring_proof_info_policy')}</li>
             </ul>
           </IconListContent>
         </IconListItem>
@@ -112,4 +112,4 @@ function WelcomeStep({
   );
 }
 
-export default WelcomeStep;
+export default InPersonPrepareStep;
diff --git a/app/services/idv/steps/ipp/prepare_step.rb b/app/services/idv/steps/ipp/prepare_step.rb
new file mode 100644
index 00000000000..28347c85f76
--- /dev/null
+++ b/app/services/idv/steps/ipp/prepare_step.rb
@@ -0,0 +1,11 @@
+module Idv
+  module Steps
+    module Ipp
+      class PrepareStep < DocAuthBaseStep
+        STEP_INDICATOR_STEP = :verify_info
+
+        def call; end
+      end
+    end
+  end
+end
diff --git a/app/views/idv/in_person/welcome.html.erb b/app/views/idv/in_person/welcome.html.erb
new file mode 100644
index 00000000000..7700fed47f4
--- /dev/null
+++ b/app/views/idv/in_person/welcome.html.erb
@@ -0,0 +1,15 @@
+<% title t('titles.doc_auth.verify') %>
+
+<h1 class="h3 margin-y-0">
+  <%= t('in_person_proofing.headings.prepare') %>
+</h1>
+
+<%= validated_form_for :doc_auth,
+                       url: url_for,
+                       method: 'put',
+                       html: { autocomplete: 'off', class: 'margin-y-5 js-consent-continue-form' } do |f| %>
+  <%= f.button :button,
+               t('doc_auth.buttons.continue'),
+               type: :submit,
+               class: 'usa-button--big usa-button--wide' %>
+<% end %>
diff --git a/config/locales/in_person_proofing/en.yml b/config/locales/in_person_proofing/en.yml
index 3efb00da7d6..547e16824bb 100644
--- a/config/locales/in_person_proofing/en.yml
+++ b/config/locales/in_person_proofing/en.yml
@@ -34,7 +34,7 @@ en:
         info_html: 'Enter information <strong>exactly as it appears on your state-issued
           ID.</strong> We will use this information to confirm it matches your
           ID in person.'
-      welcome:
+      prepare:
         alert_selected_post_office: 'You’ve selected the %{name} Post Office.'
         bring_barcode_header: A copy of your barcode
         bring_barcode_info: 'We will give you a unique code that expires within 30 days.'
diff --git a/spec/services/idv/steps/ipp/prepare_step_spec.rb b/spec/services/idv/steps/ipp/prepare_step_spec.rb
new file mode 100644
index 00000000000..5f42e864c56
--- /dev/null
+++ b/spec/services/idv/steps/ipp/prepare_step_spec.rb
@@ -0,0 +1,28 @@
+require 'rails_helper'
+
+describe Idv::Steps::Ipp::PrepareStep do
+  let(:user) { build(:user) }
+  let(:service_provider) { create(:service_provider) }
+  let(:controller) do
+    instance_double(
+      'controller',
+      session: { sp: { issuer: service_provider.issuer } },
+      current_user: user,
+    )
+  end
+
+  let(:flow) do
+    Idv::Flows::InPersonFlow.new(controller, {}, 'idv/in_person')
+  end
+
+  subject(:step) do
+    Idv::Steps::Ipp::PrepareStep.new(flow)
+  end
+
+  describe '#call' do
+    it 'works' do
+      result = step.call
+      expect(result).to be_nil
+    end
+  end
+end

From 3ca35549b80e344e4f877540025e4555793cf8e9 Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Tue, 21 Jun 2022 23:21:26 -0700
Subject: [PATCH 07/43] finish styling prepare component

- add trouble-shooting options
- change submit button to continue
- add spacing around <hr>
- correct bg color for icon list icons
- correct font weight & position on icon list titles
---
 .../components/in-person-prepare-step.jsx     | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx b/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
index 93d4d69f0c8..d8317c744f6 100644
--- a/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
+++ b/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
@@ -1,7 +1,3 @@
-import { useContext } from 'react';
-import { hasMediaAccess } from '@18f/identity-device';
-import { useI18n } from '@18f/identity-react-i18n';
-import { FormStepsButton } from '@18f/identity-form-steps';
 import {
   Alert,
   Icon,
@@ -15,8 +11,9 @@ import {
   ProcessListItem,
   ProcessListHeading,
 } from '@18f/identity-components';
-import DeviceContext from '../context/device';
-import StartOverOrCancel from './start-over-or-cancel';
+import { FormStepsButton } from '@18f/identity-form-steps';
+import { useI18n } from '@18f/identity-react-i18n';
+import InPersonTroubleshootingOptions from './in-person-troubleshooting-options';
 
 /**
  * @typedef InPersonPrepareStepValue
@@ -45,7 +42,7 @@ function InPersonPrepareStep({
 
       <p>{t('in_person_proofing.body.prepare.verify_step_about')}</p>
 
-      <ProcessList>
+      <ProcessList className="margin-bottom-4">
         <ProcessListItem>
           <ProcessListHeading unstyled>
             {t('in_person_proofing.body.prepare.verify_step_enter_pii')}
@@ -58,17 +55,17 @@ function InPersonPrepareStep({
         </ProcessListItem>
       </ProcessList>
 
-      <hr />
+      <hr className="margin-bottom-4" />
 
       <h2>{t('in_person_proofing.body.prepare.bring_title')}</h2>
 
       <IconList>
         <IconListItem>
-          <IconListIcon className="text-indigo">
+          <IconListIcon className="text-primary-dark">
             <Icon icon="check_circle" />
           </IconListIcon>
           <IconListContent>
-            <IconListTitle>
+            <IconListTitle className="font-sans-md padding-top-0">
               {t('in_person_proofing.body.prepare.bring_barcode_header')}
             </IconListTitle>
             <p>{t('in_person_proofing.body.prepare.bring_barcode_info')}</p>
@@ -76,11 +73,13 @@ function InPersonPrepareStep({
         </IconListItem>
 
         <IconListItem>
-          <IconListIcon className="text-indigo">
+          <IconListIcon className="text-primary-dark">
             <Icon icon="check_circle" />
           </IconListIcon>
           <IconListContent>
-            <IconListTitle>{t('in_person_proofing.body.prepare.bring_id_header')}</IconListTitle>
+            <IconListTitle className="font-sans-md padding-top-0">
+              {t('in_person_proofing.body.prepare.bring_id_header')}
+            </IconListTitle>
             <p>{t('in_person_proofing.body.prepare.bring_id_info_acceptable')}</p>
             <ul>
               <li>{t('in_person_proofing.body.prepare.bring_id_info_dl')}</li>
@@ -91,11 +90,13 @@ function InPersonPrepareStep({
         </IconListItem>
 
         <IconListItem>
-          <IconListIcon className="text-indigo">
+          <IconListIcon className="text-primary-dark">
             <Icon icon="check_circle" />
           </IconListIcon>
           <IconListContent>
-            <IconListTitle>{t('in_person_proofing.body.prepare.bring_proof_header')}</IconListTitle>
+            <IconListTitle className="font-sans-md padding-top-0">
+              {t('in_person_proofing.body.prepare.bring_proof_header')}
+            </IconListTitle>
             <p>{t('in_person_proofing.body.prepare.bring_proof_info_acceptable')}</p>
             <ul>
               <li>{t('in_person_proofing.body.prepare.bring_proof_info_lease')}</li>
@@ -106,8 +107,8 @@ function InPersonPrepareStep({
           </IconListContent>
         </IconListItem>
       </IconList>
-      <FormStepsButton.Submit />
-      <StartOverOrCancel />
+      <FormStepsButton.Continue />
+      <InPersonTroubleshootingOptions />
     </>
   );
 }

From 9dd3f1fb90f3bb73cf708cb4e31fe94795e56642 Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Wed, 22 Jun 2022 08:14:58 -0700
Subject: [PATCH 08/43] cleanup

---
 .../components/in-person-prepare-step.jsx           | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx b/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
index d8317c744f6..93b22963861 100644
--- a/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
+++ b/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
@@ -2,14 +2,14 @@ import {
   Alert,
   Icon,
   IconList,
-  IconListItem,
+  IconListContent,
   IconListIcon,
+  IconListItem,
   IconListTitle,
-  IconListContent,
   PageHeading,
   ProcessList,
-  ProcessListItem,
   ProcessListHeading,
+  ProcessListItem,
 } from '@18f/identity-components';
 import { FormStepsButton } from '@18f/identity-form-steps';
 import { useI18n } from '@18f/identity-react-i18n';
@@ -24,12 +24,7 @@ import InPersonTroubleshootingOptions from './in-person-troubleshooting-options'
 /**
  * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonPrepareValue>} props Props object.
  */
-function InPersonPrepareStep({
-  value = {},
-  onChange = () => {},
-  errors = [],
-  registerField = () => undefined,
-}) {
+function InPersonPrepareStep({ errors = [] }) {
   const { t } = useI18n();
   const error = errors.find(({ field }) => field === 'in-person-prepare')?.error;
 

From 1135cb184b0ed25d44c686cdb092b27df0e2731d Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Wed, 22 Jun 2022 09:42:04 -0700
Subject: [PATCH 09/43] add placement location page

---
 .../components/document-capture.jsx           |  4 +++
 .../components/in-person-location-step.jsx    | 26 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 app/javascript/packages/document-capture/components/in-person-location-step.jsx

diff --git a/app/javascript/packages/document-capture/components/document-capture.jsx b/app/javascript/packages/document-capture/components/document-capture.jsx
index aaffc13cf10..356d0d0a614 100644
--- a/app/javascript/packages/document-capture/components/document-capture.jsx
+++ b/app/javascript/packages/document-capture/components/document-capture.jsx
@@ -125,6 +125,10 @@ function DocumentCapture({ isAsyncForm = false, onStepChange }) {
                 })(ReviewIssuesStep)
               : ReviewIssuesStep,
         },
+        {
+          name: 'location',
+          form: InPersonLocationStep,
+        },
         {
           name: 'prepare',
           form: InPersonPrepareStep,
diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.jsx b/app/javascript/packages/document-capture/components/in-person-location-step.jsx
new file mode 100644
index 00000000000..f1c935f8047
--- /dev/null
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.jsx
@@ -0,0 +1,26 @@
+import { PageHeading } from '@18f/identity-components';
+import { FormStepsButton } from '@18f/identity-form-steps';
+import { useI18n } from '@18f/identity-react-i18n';
+
+/**
+ * @typedef InPersonLocationStepValue
+ *
+ * @prop {Blob|string|null|undefined} inPersonLocation InPersonLocation value.
+ */
+
+/**
+ * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonLocationValue>} props Props object.
+ */
+function InPersonLocationStep({ errors = [] }) {
+  const { t } = useI18n();
+  const error = errors.find(({ field }) => field === 'in-person-location')?.error;
+
+  return (
+    <>
+      <PageHeading>{t('in_person_proofing.headings.location')}</PageHeading>
+      <FormStepsButton.Continue />
+    </>
+  );
+}
+
+export default InPersonLocationStep;

From 98727b1cfc1a43044d5022d444676aa47e406359 Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Thu, 23 Jun 2022 10:27:24 -0700
Subject: [PATCH 10/43] new component for submit button in troubleshooting

---
 app/javascript/packages/components/troubleshooting-options.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/javascript/packages/components/troubleshooting-options.tsx b/app/javascript/packages/components/troubleshooting-options.tsx
index 80ad8c42141..3abb9ab73c7 100644
--- a/app/javascript/packages/components/troubleshooting-options.tsx
+++ b/app/javascript/packages/components/troubleshooting-options.tsx
@@ -8,6 +8,8 @@ export type TroubleshootingOption = Omit<BlockLinkProps, 'href'> & {
 
   text: ReactNode;
 
+  isContinue?: boolean;
+
   isExternal?: boolean;
 };
 

From b980674363d9257b88658fdc431d088267de91d8 Mon Sep 17 00:00:00 2001
From: Tim Bradley <timothy.bradley@gsa.gov>
Date: Fri, 24 Jun 2022 11:15:32 -0700
Subject: [PATCH 11/43] LG-6087: Update IPP flow button styles to match
 accompanying links

---
 .../stylesheets/components/_button-link.scss    | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 app/assets/stylesheets/components/_button-link.scss

diff --git a/app/assets/stylesheets/components/_button-link.scss b/app/assets/stylesheets/components/_button-link.scss
new file mode 100644
index 00000000000..13ea28d62af
--- /dev/null
+++ b/app/assets/stylesheets/components/_button-link.scss
@@ -0,0 +1,17 @@
+.button-link {
+    @extend .usa-button--unstyled;
+    @extend .block-link;
+    @extend .usa-link;
+
+    cursor: pointer;
+    display: block;
+    line-height: 1.5;
+
+    &:hover, &:active {
+        text-decoration: none;
+    }
+
+    &:focus {
+        outline: none;
+    }
+}
\ No newline at end of file

From 0ab9f74862051d020456db495697cb34ae549517 Mon Sep 17 00:00:00 2001
From: Tim Bradley <timothy.bradley@gsa.gov>
Date: Fri, 24 Jun 2022 11:46:39 -0700
Subject: [PATCH 12/43] LG-6087: Update IPP flow button styles to override
 other styles more effectively

---
 app/assets/stylesheets/components/_button-link.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/_button-link.scss b/app/assets/stylesheets/components/_button-link.scss
index 13ea28d62af..3747fc4e1b0 100644
--- a/app/assets/stylesheets/components/_button-link.scss
+++ b/app/assets/stylesheets/components/_button-link.scss
@@ -3,15 +3,17 @@
     @extend .block-link;
     @extend .usa-link;
 
-    cursor: pointer;
-    display: block;
-    line-height: 1.5;
+    &#{&} {
+        cursor: pointer;
+        display: block;
+        line-height: 1.5;
+    }
 
-    &:hover, &:active {
+    &#{&}:hover, &#{&}:active {
         text-decoration: none;
     }
 
-    &:focus {
+    &#{&}:focus {
         outline: none;
     }
 }
\ No newline at end of file

From 839b7540d312b45901a95aa10049f8e155a4d93a Mon Sep 17 00:00:00 2001
From: Tim Bradley <timothy.bradley@gsa.gov>
Date: Fri, 24 Jun 2022 11:58:16 -0700
Subject: [PATCH 13/43] LG-6087: Fix minor issues with IPP button styling
 changes

---
 app/assets/stylesheets/components/_button-link.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/_button-link.scss b/app/assets/stylesheets/components/_button-link.scss
index 3747fc4e1b0..2aafdbaa2ea 100644
--- a/app/assets/stylesheets/components/_button-link.scss
+++ b/app/assets/stylesheets/components/_button-link.scss
@@ -16,4 +16,4 @@
     &#{&}:focus {
         outline: none;
     }
-}
\ No newline at end of file
+}

From 72eb0d68ac78433eb49a63ef2afa25f21a9d7074 Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Sun, 26 Jun 2022 23:44:51 -0700
Subject: [PATCH 14/43] remove errors

---
 .../document-capture/components/in-person-prepare-step.jsx     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx b/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
index 93b22963861..05f1e168cfd 100644
--- a/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
+++ b/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
@@ -24,9 +24,8 @@ import InPersonTroubleshootingOptions from './in-person-troubleshooting-options'
 /**
  * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonPrepareValue>} props Props object.
  */
-function InPersonPrepareStep({ errors = [] }) {
+function InPersonPrepareStep() {
   const { t } = useI18n();
-  const error = errors.find(({ field }) => field === 'in-person-prepare')?.error;
 
   return (
     <>

From 98d643221a9781dbb463403b5053a49a2217989f Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Mon, 27 Jun 2022 00:04:53 -0700
Subject: [PATCH 15/43] collapse icon & process list components

make pages TypeScript
---
 .../components/in-person-location-step.jsx    |  26 -----
 .../components/in-person-location-step.tsx    |  15 +++
 .../components/in-person-prepare-step.jsx     | 110 ------------------
 .../components/in-person-prepare-step.tsx     |  25 ++++
 4 files changed, 40 insertions(+), 136 deletions(-)
 delete mode 100644 app/javascript/packages/document-capture/components/in-person-location-step.jsx
 delete mode 100644 app/javascript/packages/document-capture/components/in-person-prepare-step.jsx

diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.jsx b/app/javascript/packages/document-capture/components/in-person-location-step.jsx
deleted file mode 100644
index f1c935f8047..00000000000
--- a/app/javascript/packages/document-capture/components/in-person-location-step.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { PageHeading } from '@18f/identity-components';
-import { FormStepsButton } from '@18f/identity-form-steps';
-import { useI18n } from '@18f/identity-react-i18n';
-
-/**
- * @typedef InPersonLocationStepValue
- *
- * @prop {Blob|string|null|undefined} inPersonLocation InPersonLocation value.
- */
-
-/**
- * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonLocationValue>} props Props object.
- */
-function InPersonLocationStep({ errors = [] }) {
-  const { t } = useI18n();
-  const error = errors.find(({ field }) => field === 'in-person-location')?.error;
-
-  return (
-    <>
-      <PageHeading>{t('in_person_proofing.headings.location')}</PageHeading>
-      <FormStepsButton.Continue />
-    </>
-  );
-}
-
-export default InPersonLocationStep;
diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index 5e16eb8e4ed..73fd21f72b3 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -2,8 +2,23 @@ import { PageHeading } from '@18f/identity-components';
 import { FormStepsButton } from '@18f/identity-form-steps';
 import { useI18n } from '@18f/identity-react-i18n';
 
+<<<<<<< HEAD
 function InPersonLocationStep() {
   const { t } = useI18n();
+=======
+/**
+ * @typedef InPersonLocationStepValue
+ *
+ * @prop {Blob|string|null|undefined} inPersonLocation InPersonLocation value.
+ */
+
+/**
+ * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonLocationValue>} props Props object.
+ */
+function InPersonLocationStep({ errors = [] }) {
+  const { t } = useI18n();
+  const error = errors.find(({ field }) => field === 'in-person-location')?.error;
+>>>>>>> 027b25e3f (collapse icon & process list components)
 
   return (
     <>
diff --git a/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx b/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
deleted file mode 100644
index 05f1e168cfd..00000000000
--- a/app/javascript/packages/document-capture/components/in-person-prepare-step.jsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import {
-  Alert,
-  Icon,
-  IconList,
-  IconListContent,
-  IconListIcon,
-  IconListItem,
-  IconListTitle,
-  PageHeading,
-  ProcessList,
-  ProcessListHeading,
-  ProcessListItem,
-} from '@18f/identity-components';
-import { FormStepsButton } from '@18f/identity-form-steps';
-import { useI18n } from '@18f/identity-react-i18n';
-import InPersonTroubleshootingOptions from './in-person-troubleshooting-options';
-
-/**
- * @typedef InPersonPrepareStepValue
- *
- * @prop {Blob|string|null|undefined} inPersonPrepare InPersonPrepare value.
- */
-
-/**
- * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonPrepareValue>} props Props object.
- */
-function InPersonPrepareStep() {
-  const { t } = useI18n();
-
-  return (
-    <>
-      <Alert type="success" className="margin-bottom-4">
-        {t('in_person_proofing.body.prepare.alert_selected_post_office', { name: 'EASTCHESTER' })}
-      </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>
-          <ProcessListHeading unstyled>
-            {t('in_person_proofing.body.prepare.verify_step_enter_pii')}
-          </ProcessListHeading>
-        </ProcessListItem>
-        <ProcessListItem>
-          <ProcessListHeading unstyled>
-            {t('in_person_proofing.body.prepare.verify_step_enter_phone')}
-          </ProcessListHeading>
-        </ProcessListItem>
-      </ProcessList>
-
-      <hr className="margin-bottom-4" />
-
-      <h2>{t('in_person_proofing.body.prepare.bring_title')}</h2>
-
-      <IconList>
-        <IconListItem>
-          <IconListIcon className="text-primary-dark">
-            <Icon icon="check_circle" />
-          </IconListIcon>
-          <IconListContent>
-            <IconListTitle className="font-sans-md padding-top-0">
-              {t('in_person_proofing.body.prepare.bring_barcode_header')}
-            </IconListTitle>
-            <p>{t('in_person_proofing.body.prepare.bring_barcode_info')}</p>
-          </IconListContent>
-        </IconListItem>
-
-        <IconListItem>
-          <IconListIcon className="text-primary-dark">
-            <Icon icon="check_circle" />
-          </IconListIcon>
-          <IconListContent>
-            <IconListTitle className="font-sans-md padding-top-0">
-              {t('in_person_proofing.body.prepare.bring_id_header')}
-            </IconListTitle>
-            <p>{t('in_person_proofing.body.prepare.bring_id_info_acceptable')}</p>
-            <ul>
-              <li>{t('in_person_proofing.body.prepare.bring_id_info_dl')}</li>
-              <li>{t('in_person_proofing.body.prepare.bring_id_info_id_card')}</li>
-            </ul>
-            <p>{t('in_person_proofing.body.prepare.bring_id_info_no_other_forms')}</p>
-          </IconListContent>
-        </IconListItem>
-
-        <IconListItem>
-          <IconListIcon className="text-primary-dark">
-            <Icon icon="check_circle" />
-          </IconListIcon>
-          <IconListContent>
-            <IconListTitle className="font-sans-md padding-top-0">
-              {t('in_person_proofing.body.prepare.bring_proof_header')}
-            </IconListTitle>
-            <p>{t('in_person_proofing.body.prepare.bring_proof_info_acceptable')}</p>
-            <ul>
-              <li>{t('in_person_proofing.body.prepare.bring_proof_info_lease')}</li>
-              <li>{t('in_person_proofing.body.prepare.bring_proof_info_registration')}</li>
-              <li>{t('in_person_proofing.body.prepare.bring_proof_info_card')}</li>
-              <li>{t('in_person_proofing.body.prepare.bring_proof_info_policy')}</li>
-            </ul>
-          </IconListContent>
-        </IconListItem>
-      </IconList>
-      <FormStepsButton.Continue />
-      <InPersonTroubleshootingOptions />
-    </>
-  );
-}
-
-export default InPersonPrepareStep;
diff --git a/app/javascript/packages/document-capture/components/in-person-prepare-step.tsx b/app/javascript/packages/document-capture/components/in-person-prepare-step.tsx
index 514e3c6383f..fec3d14efe8 100644
--- a/app/javascript/packages/document-capture/components/in-person-prepare-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-prepare-step.tsx
@@ -1,12 +1,16 @@
 import {
   Alert,
+<<<<<<< HEAD
   Button,
+=======
+>>>>>>> 027b25e3f (collapse icon & process list components)
   IconList,
   IconListItem,
   PageHeading,
   ProcessList,
   ProcessListItem,
 } from '@18f/identity-components';
+<<<<<<< HEAD
 import { removeUnloadProtection } from '@18f/identity-url';
 import { useContext } from 'react';
 import { FlowContext } from '@18f/identity-verify-flow';
@@ -16,6 +20,23 @@ import InPersonTroubleshootingOptions from './in-person-troubleshooting-options'
 function InPersonPrepareStep() {
   const { t } = useI18n();
   const { inPersonURL } = useContext(FlowContext);
+=======
+import { FormStepsButton } from '@18f/identity-form-steps';
+import { useI18n } from '@18f/identity-react-i18n';
+import InPersonTroubleshootingOptions from './in-person-troubleshooting-options';
+
+/**
+ * @typedef InPersonPrepareStepValue
+ *
+ * @prop {Blob|string|null|undefined} inPersonPrepare InPersonPrepare value.
+ */
+
+/**
+ * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonPrepareValue>} props Props object.
+ */
+function InPersonPrepareStep() {
+  const { t } = useI18n();
+>>>>>>> 027b25e3f (collapse icon & process list components)
 
   return (
     <>
@@ -74,6 +95,7 @@ function InPersonPrepareStep() {
           </ul>
         </IconListItem>
       </IconList>
+<<<<<<< HEAD
       {inPersonURL && (
         <div className="margin-y-5">
           <Button href={inPersonURL} onClick={removeUnloadProtection} isBig isWide>
@@ -81,6 +103,9 @@ function InPersonPrepareStep() {
           </Button>
         </div>
       )}
+=======
+      <FormStepsButton.Continue />
+>>>>>>> 027b25e3f (collapse icon & process list components)
       <InPersonTroubleshootingOptions />
     </>
   );

From 49164a91c31253ce01173169aa3d427497f7095c Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Mon, 27 Jun 2022 14:46:38 -0700
Subject: [PATCH 16/43] remove location & prepare steps

they've moved to the React app
---
 .../components/in-person-location-step.tsx    | 15 ----------
 .../components/in-person-prepare-step.tsx     | 25 -----------------
 app/views/idv/in_person/welcome.html.erb      | 15 ----------
 .../idv/steps/ipp/prepare_step_spec.rb        | 28 -------------------
 4 files changed, 83 deletions(-)
 delete mode 100644 app/views/idv/in_person/welcome.html.erb
 delete mode 100644 spec/services/idv/steps/ipp/prepare_step_spec.rb

diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index 73fd21f72b3..5e16eb8e4ed 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -2,23 +2,8 @@ import { PageHeading } from '@18f/identity-components';
 import { FormStepsButton } from '@18f/identity-form-steps';
 import { useI18n } from '@18f/identity-react-i18n';
 
-<<<<<<< HEAD
 function InPersonLocationStep() {
   const { t } = useI18n();
-=======
-/**
- * @typedef InPersonLocationStepValue
- *
- * @prop {Blob|string|null|undefined} inPersonLocation InPersonLocation value.
- */
-
-/**
- * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonLocationValue>} props Props object.
- */
-function InPersonLocationStep({ errors = [] }) {
-  const { t } = useI18n();
-  const error = errors.find(({ field }) => field === 'in-person-location')?.error;
->>>>>>> 027b25e3f (collapse icon & process list components)
 
   return (
     <>
diff --git a/app/javascript/packages/document-capture/components/in-person-prepare-step.tsx b/app/javascript/packages/document-capture/components/in-person-prepare-step.tsx
index fec3d14efe8..514e3c6383f 100644
--- a/app/javascript/packages/document-capture/components/in-person-prepare-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-prepare-step.tsx
@@ -1,16 +1,12 @@
 import {
   Alert,
-<<<<<<< HEAD
   Button,
-=======
->>>>>>> 027b25e3f (collapse icon & process list components)
   IconList,
   IconListItem,
   PageHeading,
   ProcessList,
   ProcessListItem,
 } from '@18f/identity-components';
-<<<<<<< HEAD
 import { removeUnloadProtection } from '@18f/identity-url';
 import { useContext } from 'react';
 import { FlowContext } from '@18f/identity-verify-flow';
@@ -20,23 +16,6 @@ import InPersonTroubleshootingOptions from './in-person-troubleshooting-options'
 function InPersonPrepareStep() {
   const { t } = useI18n();
   const { inPersonURL } = useContext(FlowContext);
-=======
-import { FormStepsButton } from '@18f/identity-form-steps';
-import { useI18n } from '@18f/identity-react-i18n';
-import InPersonTroubleshootingOptions from './in-person-troubleshooting-options';
-
-/**
- * @typedef InPersonPrepareStepValue
- *
- * @prop {Blob|string|null|undefined} inPersonPrepare InPersonPrepare value.
- */
-
-/**
- * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonPrepareValue>} props Props object.
- */
-function InPersonPrepareStep() {
-  const { t } = useI18n();
->>>>>>> 027b25e3f (collapse icon & process list components)
 
   return (
     <>
@@ -95,7 +74,6 @@ function InPersonPrepareStep() {
           </ul>
         </IconListItem>
       </IconList>
-<<<<<<< HEAD
       {inPersonURL && (
         <div className="margin-y-5">
           <Button href={inPersonURL} onClick={removeUnloadProtection} isBig isWide>
@@ -103,9 +81,6 @@ function InPersonPrepareStep() {
           </Button>
         </div>
       )}
-=======
-      <FormStepsButton.Continue />
->>>>>>> 027b25e3f (collapse icon & process list components)
       <InPersonTroubleshootingOptions />
     </>
   );
diff --git a/app/views/idv/in_person/welcome.html.erb b/app/views/idv/in_person/welcome.html.erb
deleted file mode 100644
index 7700fed47f4..00000000000
--- a/app/views/idv/in_person/welcome.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<% title t('titles.doc_auth.verify') %>
-
-<h1 class="h3 margin-y-0">
-  <%= t('in_person_proofing.headings.prepare') %>
-</h1>
-
-<%= validated_form_for :doc_auth,
-                       url: url_for,
-                       method: 'put',
-                       html: { autocomplete: 'off', class: 'margin-y-5 js-consent-continue-form' } do |f| %>
-  <%= f.button :button,
-               t('doc_auth.buttons.continue'),
-               type: :submit,
-               class: 'usa-button--big usa-button--wide' %>
-<% end %>
diff --git a/spec/services/idv/steps/ipp/prepare_step_spec.rb b/spec/services/idv/steps/ipp/prepare_step_spec.rb
deleted file mode 100644
index 5f42e864c56..00000000000
--- a/spec/services/idv/steps/ipp/prepare_step_spec.rb
+++ /dev/null
@@ -1,28 +0,0 @@
-require 'rails_helper'
-
-describe Idv::Steps::Ipp::PrepareStep do
-  let(:user) { build(:user) }
-  let(:service_provider) { create(:service_provider) }
-  let(:controller) do
-    instance_double(
-      'controller',
-      session: { sp: { issuer: service_provider.issuer } },
-      current_user: user,
-    )
-  end
-
-  let(:flow) do
-    Idv::Flows::InPersonFlow.new(controller, {}, 'idv/in_person')
-  end
-
-  subject(:step) do
-    Idv::Steps::Ipp::PrepareStep.new(flow)
-  end
-
-  describe '#call' do
-    it 'works' do
-      result = step.call
-      expect(result).to be_nil
-    end
-  end
-end

From 96a5d204438bbd3c5d6287308ce5d439c4d6d24f Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Tue, 28 Jun 2022 08:01:19 -0700
Subject: [PATCH 17/43] gate inclusion of in person steps

---
 .../document-capture/components/document-capture.jsx      | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/app/javascript/packages/document-capture/components/document-capture.jsx b/app/javascript/packages/document-capture/components/document-capture.jsx
index 356d0d0a614..49760bc3238 100644
--- a/app/javascript/packages/document-capture/components/document-capture.jsx
+++ b/app/javascript/packages/document-capture/components/document-capture.jsx
@@ -125,14 +125,6 @@ function DocumentCapture({ isAsyncForm = false, onStepChange }) {
                 })(ReviewIssuesStep)
               : ReviewIssuesStep,
         },
-        {
-          name: 'location',
-          form: InPersonLocationStep,
-        },
-        {
-          name: 'prepare',
-          form: InPersonPrepareStep,
-        },
       ]
         .concat(inPersonSteps)
         .filter(Boolean)

From 799b6bed5aed050eb5d53e521c5f99bad30c44c9 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Fri, 1 Jul 2022 18:33:58 -0400
Subject: [PATCH 18/43] add location collection and item

---
 app/javascript/packages/components/index.ts   |  2 +
 .../components/location-collection-item.scss  | 16 ++++++
 .../components/location-collection-item.tsx   | 49 +++++++++++++++++++
 .../components/location-collection.tsx        | 16 ++++++
 .../components/in-person-location-step.tsx    |  8 ++-
 config/locales/forms/en.yml                   |  1 +
 config/locales/in_person_proofing/en.yml      |  5 ++
 7 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/packages/components/location-collection-item.scss
 create mode 100644 app/javascript/packages/components/location-collection-item.tsx
 create mode 100644 app/javascript/packages/components/location-collection.tsx

diff --git a/app/javascript/packages/components/index.ts b/app/javascript/packages/components/index.ts
index 5c6b215a486..426b984c260 100644
--- a/app/javascript/packages/components/index.ts
+++ b/app/javascript/packages/components/index.ts
@@ -12,6 +12,8 @@ export { default as IconListItem } from './icon-list/icon-list-item';
 export { default as IconListTitle } from './icon-list/icon-list-title';
 export { default as Link } from './link';
 export { default as PageFooter } from './page-footer';
+export { default as LocationCollection } from './location-collection';
+export { default as LocationCollectionItem } from './location-collection-item';
 export { default as PageHeading } from './page-heading';
 export { default as ProcessList } from './process-list/process-list';
 export { default as ProcessListHeading } from './process-list/process-list-heading';
diff --git a/app/javascript/packages/components/location-collection-item.scss b/app/javascript/packages/components/location-collection-item.scss
new file mode 100644
index 00000000000..970a7d5a55c
--- /dev/null
+++ b/app/javascript/packages/components/location-collection-item.scss
@@ -0,0 +1,16 @@
+// update border style to be correct color, thickness and bottom aligned
+.location-collection-item {
+    max-width: 64ex;
+    margin-bottom: 0;
+    margin-top: 0;
+    list-style-type: none;
+    padding-left: 0;
+    align-items: flex-start;
+    border-top-width: 1px;
+    border-top-style: solid;
+    display: flex;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    color: #063166;
+}
\ No newline at end of file
diff --git a/app/javascript/packages/components/location-collection-item.tsx b/app/javascript/packages/components/location-collection-item.tsx
new file mode 100644
index 00000000000..baa93d214bd
--- /dev/null
+++ b/app/javascript/packages/components/location-collection-item.tsx
@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import { Button } from '@18f/identity-components';
+import { useI18n } from '@18f/identity-react-i18n';
+// import fails
+import './location-collection-item.scss';
+
+// TODO: update props to be a locationItemObject
+// TODO: create locationItemObject based on data returned by API, should be separate file, need to look at api to determine fields
+interface LocationCollectionItemProps {
+  header: string;
+  addressLine1: string;
+  addressLine2: string;
+  hoursWD: string;
+  hoursSat: string;
+  hoursSun: string;
+  children: ReactNode;
+}
+
+// TODO: need a styles.scss that includes @import './components/location-collection-item'; but needs to be separate from
+// the one that already exists
+
+// TODO: create strings in i18n for days and import here
+// flex-row doesn't work; flex-column does but the 2 items are now in a col together and stacked on top of each other
+// this means the ui as is does not match the figma file
+function LocationCollectionItem({ header, children }: LocationCollectionItemProps) {
+  const { t } = useI18n();
+  return (
+    <li className="location-collection-item">
+      <div className="usa-collection__body">
+        <div className="display-flex flex-column">
+          <div className="flex-align-self-end">
+            <Button>{t('in_person_proofing.body.location.location_button')}</Button>
+          </div>
+          <div className="flex-align-self-start">
+            <h3 className="usa-collection__heading">{header}</h3>
+          </div>
+        </div>
+        <div>900 E FAYETTE ST RM 118</div>
+        <div>BALTIMORE, MD 21233-9715</div>
+        <h4>{t('in_person_proofing.body.location.retail_hours_heading')}</h4>
+        <div>Mon-Fri: 8:30 am-7:00 pm</div>
+        <div>Sat: 8:30 am-5:00 pm</div>
+        <div>Sun: Closed</div>
+      </div>
+    </li>
+  );
+}
+
+export default LocationCollectionItem;
diff --git a/app/javascript/packages/components/location-collection.tsx b/app/javascript/packages/components/location-collection.tsx
new file mode 100644
index 00000000000..4fad3f8a35c
--- /dev/null
+++ b/app/javascript/packages/components/location-collection.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+interface LocationCollectionProps {
+  className?: string;
+
+  children?: ReactNode;
+}
+
+function LocationCollection({ children, className }: LocationCollectionProps) {
+  // need to update this to use correct classname
+  const classes = ['usa-collection', className].filter(Boolean).join(' ');
+
+  return <ul className={classes}>{children}</ul>;
+}
+
+export default LocationCollection;
diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index 5e16eb8e4ed..1e810b38e1b 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -1,4 +1,4 @@
-import { PageHeading } from '@18f/identity-components';
+import { PageHeading, LocationCollectionItem, LocationCollection } from '@18f/identity-components';
 import { FormStepsButton } from '@18f/identity-form-steps';
 import { useI18n } from '@18f/identity-react-i18n';
 
@@ -8,6 +8,12 @@ function InPersonLocationStep() {
   return (
     <>
       <PageHeading>{t('in_person_proofing.headings.location')}</PageHeading>
+
+      <p>{t('in_person_proofing.body.location.location_step_about')}</p>
+      <LocationCollection>
+        <LocationCollectionItem header="BALTIMORE — Post Office &#8482;"> </LocationCollectionItem>
+        <LocationCollectionItem header="COURAGE — Post Office &#8482;"> </LocationCollectionItem>
+      </LocationCollection>
       <FormStepsButton.Continue />
     </>
   );
diff --git a/config/locales/forms/en.yml b/config/locales/forms/en.yml
index 77c0c3db60e..ab7f3694d74 100644
--- a/config/locales/forms/en.yml
+++ b/config/locales/forms/en.yml
@@ -38,6 +38,7 @@ en:
       manage: Manage
       resend_confirmation: Resend confirmation instructions
       send_security_code: Send code
+      select: Select
       submit:
         confirm_change: Confirm change
         default: Submit
diff --git a/config/locales/in_person_proofing/en.yml b/config/locales/in_person_proofing/en.yml
index 547e16824bb..43671350d47 100644
--- a/config/locales/in_person_proofing/en.yml
+++ b/config/locales/in_person_proofing/en.yml
@@ -58,6 +58,11 @@ en:
         verify_step_enter_phone: Enter a phone number with your name on the plan.
         verify_step_enter_pii: 'Enter your name, date of birth, state-issued ID number,
           address and Social Security number.'
+      location:
+        location_step_about: 'If you are having trouble adding your ID, you may be able to 
+          verify in person at a local United States Post Office in select locations.'
+        retail_hours_heading: 'Retail Hours'
+        location_button: 'Select'
     form:
       address:
         address1: Address

From 3ea860beb5e10336ddfcb7af71b50923e85f5f56 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Thu, 7 Jul 2022 17:17:58 -0400
Subject: [PATCH 19/43] copied and modified uswds collection item class to
 follow design

---
 .../components/_location-collection-item.scss}           | 9 ++++-----
 app/assets/stylesheets/components/all.scss               | 1 +
 .../packages/components/location-collection-item.tsx     | 2 --
 .../components/in-person-location-step.tsx               | 2 --
 4 files changed, 5 insertions(+), 9 deletions(-)
 rename app/{javascript/packages/components/location-collection-item.scss => assets/stylesheets/components/_location-collection-item.scss} (57%)

diff --git a/app/javascript/packages/components/location-collection-item.scss b/app/assets/stylesheets/components/_location-collection-item.scss
similarity index 57%
rename from app/javascript/packages/components/location-collection-item.scss
rename to app/assets/stylesheets/components/_location-collection-item.scss
index 970a7d5a55c..429b9cda259 100644
--- a/app/javascript/packages/components/location-collection-item.scss
+++ b/app/assets/stylesheets/components/_location-collection-item.scss
@@ -1,4 +1,3 @@
-// update border style to be correct color, thickness and bottom aligned
 .location-collection-item {
     max-width: 64ex;
     margin-bottom: 0;
@@ -6,11 +5,11 @@
     list-style-type: none;
     padding-left: 0;
     align-items: flex-start;
-    border-top-width: 1px;
-    border-top-style: solid;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
     display: flex;
     margin-bottom: 1rem;
     margin-top: 1rem;
-    padding-top: 1rem;
-    color: #063166;
+    padding-bottom: 1rem;
+    border-color: #CEDCED;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/all.scss b/app/assets/stylesheets/components/all.scss
index ee295a189d1..41e20125440 100644
--- a/app/assets/stylesheets/components/all.scss
+++ b/app/assets/stylesheets/components/all.scss
@@ -27,3 +27,4 @@
 @import 'troubleshooting-options';
 @import 'validated-checkbox';
 @import 'i18n-dropdown';
+@import 'location-collection-item';
diff --git a/app/javascript/packages/components/location-collection-item.tsx b/app/javascript/packages/components/location-collection-item.tsx
index baa93d214bd..89e31835a53 100644
--- a/app/javascript/packages/components/location-collection-item.tsx
+++ b/app/javascript/packages/components/location-collection-item.tsx
@@ -1,8 +1,6 @@
 import type { ReactNode } from 'react';
 import { Button } from '@18f/identity-components';
 import { useI18n } from '@18f/identity-react-i18n';
-// import fails
-import './location-collection-item.scss';
 
 // TODO: update props to be a locationItemObject
 // TODO: create locationItemObject based on data returned by API, should be separate file, need to look at api to determine fields
diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index 1e810b38e1b..b5688d4aa1e 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -1,5 +1,4 @@
 import { PageHeading, LocationCollectionItem, LocationCollection } from '@18f/identity-components';
-import { FormStepsButton } from '@18f/identity-form-steps';
 import { useI18n } from '@18f/identity-react-i18n';
 
 function InPersonLocationStep() {
@@ -14,7 +13,6 @@ function InPersonLocationStep() {
         <LocationCollectionItem header="BALTIMORE — Post Office &#8482;"> </LocationCollectionItem>
         <LocationCollectionItem header="COURAGE — Post Office &#8482;"> </LocationCollectionItem>
       </LocationCollection>
-      <FormStepsButton.Continue />
     </>
   );
 }

From 3b462c18cf850fb3980e1644e7e377c266294e41 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Thu, 7 Jul 2022 19:36:51 -0400
Subject: [PATCH 20/43] use mockdata and props for locationCollectionItem

---
 .../components/location-collection-item.tsx   | 23 ++++++----
 .../components/location-collection.tsx        |  2 -
 .../components/in-person-location-step.tsx    | 46 ++++++++++++++++++-
 3 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/app/javascript/packages/components/location-collection-item.tsx b/app/javascript/packages/components/location-collection-item.tsx
index 89e31835a53..42f0aba8093 100644
--- a/app/javascript/packages/components/location-collection-item.tsx
+++ b/app/javascript/packages/components/location-collection-item.tsx
@@ -11,16 +11,19 @@ interface LocationCollectionItemProps {
   hoursWD: string;
   hoursSat: string;
   hoursSun: string;
-  children: ReactNode;
 }
 
-// TODO: need a styles.scss that includes @import './components/location-collection-item'; but needs to be separate from
-// the one that already exists
-
 // TODO: create strings in i18n for days and import here
 // flex-row doesn't work; flex-column does but the 2 items are now in a col together and stacked on top of each other
 // this means the ui as is does not match the figma file
-function LocationCollectionItem({ header, children }: LocationCollectionItemProps) {
+function LocationCollectionItem({
+  header,
+  addressLine1,
+  addressLine2,
+  hoursWD,
+  hoursSat,
+  hoursSun,
+}: LocationCollectionItemProps) {
   const { t } = useI18n();
   return (
     <li className="location-collection-item">
@@ -33,12 +36,12 @@ function LocationCollectionItem({ header, children }: LocationCollectionItemProp
             <h3 className="usa-collection__heading">{header}</h3>
           </div>
         </div>
-        <div>900 E FAYETTE ST RM 118</div>
-        <div>BALTIMORE, MD 21233-9715</div>
+        <div>{addressLine1}</div>
+        <div>{addressLine2}</div>
         <h4>{t('in_person_proofing.body.location.retail_hours_heading')}</h4>
-        <div>Mon-Fri: 8:30 am-7:00 pm</div>
-        <div>Sat: 8:30 am-5:00 pm</div>
-        <div>Sun: Closed</div>
+        <div>{hoursWD}</div>
+        <div>{hoursSat}</div>
+        <div>{hoursSun}</div>
       </div>
     </li>
   );
diff --git a/app/javascript/packages/components/location-collection.tsx b/app/javascript/packages/components/location-collection.tsx
index 4fad3f8a35c..d5747c2963f 100644
--- a/app/javascript/packages/components/location-collection.tsx
+++ b/app/javascript/packages/components/location-collection.tsx
@@ -7,9 +7,7 @@ interface LocationCollectionProps {
 }
 
 function LocationCollection({ children, className }: LocationCollectionProps) {
-  // need to update this to use correct classname
   const classes = ['usa-collection', className].filter(Boolean).join(' ');
-
   return <ul className={classes}>{children}</ul>;
 }
 
diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index b5688d4aa1e..f7063831f87 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -4,14 +4,56 @@ import { useI18n } from '@18f/identity-react-i18n';
 function InPersonLocationStep() {
   const { t } = useI18n();
 
+  const mockData = [
+    {
+      header: 'BALTIMORE — Post Office \u2122',
+      addressLine1: '900 E FAYETTE ST RM 118',
+      addressLine2: 'BALTIMORE, MD 21233-9715',
+      hoursWD: 'Mon-Fri: 8:30 am-7:00 pm',
+      hoursSat: 'Sat: 8:30 am-5:00 pm',
+      hoursSun: 'Sun: Closed',
+    },
+    {
+      header: 'BETHSEDA — Post Office \u2122',
+      addressLine1: '6900 WISCONSIN AVE STE 100',
+      addressLine2: 'CHEVY CHASE, MD 20815-9996',
+      hoursWD: 'Mon-Fri: 9:00 am-5:00 pm',
+      hoursSat: 'Sat: 9:00 am-4:00 pm',
+      hoursSun: 'Sun: Closed',
+    },
+    {
+      header: 'FRIENDSHIP — Post Office \u2122',
+      addressLine1: '4005 WISCONSIN AVE NW',
+      addressLine2: 'WASHINGTON, DC 20016-9997',
+      hoursWD: 'Mon-Fri: 8:00 am-6:00 pm',
+      hoursSat: 'Sat: 8:00 am-4:00 pm',
+      hoursSun: 'Sun: 10:00 am-4:00 pm',
+    },
+    {
+      header: 'WASHINGTON — Post Office \u2122',
+      addressLine1: '900 BRENTWOOD RD NE',
+      addressLine2: 'WASHINGTON, DC 20018-9997',
+      hoursWD: 'Mon-Fri: 8:30 am-7:00 pm',
+      hoursSat: 'Sat: 8:30 am-5:00 pm',
+      hoursSun: 'Sun: Closed',
+    },
+  ];
   return (
     <>
       <PageHeading>{t('in_person_proofing.headings.location')}</PageHeading>
 
       <p>{t('in_person_proofing.body.location.location_step_about')}</p>
       <LocationCollection>
-        <LocationCollectionItem header="BALTIMORE — Post Office &#8482;"> </LocationCollectionItem>
-        <LocationCollectionItem header="COURAGE — Post Office &#8482;"> </LocationCollectionItem>
+        {mockData.map((item) => (
+          <LocationCollectionItem
+            header={item.header}
+            addressLine1={item.addressLine1}
+            addressLine2={item.addressLine2}
+            hoursWD={item.hoursWD}
+            hoursSat={item.hoursSat}
+            hoursSun={item.hoursSun}
+          />
+        ))}
       </LocationCollection>
     </>
   );

From 939655abcdf01388ef8b0eae273965de788ad0ba Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Thu, 7 Jul 2022 19:55:26 -0400
Subject: [PATCH 21/43] removed select from forms i18n

---
 config/locales/forms/en.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/config/locales/forms/en.yml b/config/locales/forms/en.yml
index ab7f3694d74..77c0c3db60e 100644
--- a/config/locales/forms/en.yml
+++ b/config/locales/forms/en.yml
@@ -38,7 +38,6 @@ en:
       manage: Manage
       resend_confirmation: Resend confirmation instructions
       send_security_code: Send code
-      select: Select
       submit:
         confirm_change: Confirm change
         default: Submit

From d0700df507828af0a1718b2a0ebeb3f8409fca55 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Thu, 7 Jul 2022 20:13:42 -0400
Subject: [PATCH 22/43] add hours to en yml

---
 .../components/location-collection-item.tsx   |  6 ++---
 .../components/in-person-location-step.tsx    | 24 +++++++++----------
 config/locales/in_person_proofing/en.yml      |  5 +++-
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/javascript/packages/components/location-collection-item.tsx b/app/javascript/packages/components/location-collection-item.tsx
index 42f0aba8093..4a75f26b195 100644
--- a/app/javascript/packages/components/location-collection-item.tsx
+++ b/app/javascript/packages/components/location-collection-item.tsx
@@ -39,9 +39,9 @@ function LocationCollectionItem({
         <div>{addressLine1}</div>
         <div>{addressLine2}</div>
         <h4>{t('in_person_proofing.body.location.retail_hours_heading')}</h4>
-        <div>{hoursWD}</div>
-        <div>{hoursSat}</div>
-        <div>{hoursSun}</div>
+        <div>{`${t('in_person_proofing.body.location.retail_hours_weekday')} ${hoursWD}`}</div>
+        <div>{`${t('in_person_proofing.body.location.retail_hours_sat')} ${hoursSat}`}</div>
+        <div>{`${t('in_person_proofing.body.location.retail_hours_sun')} ${hoursSun}`}</div>
       </div>
     </li>
   );
diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index f7063831f87..b804a1819a8 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -9,33 +9,33 @@ function InPersonLocationStep() {
       header: 'BALTIMORE — Post Office \u2122',
       addressLine1: '900 E FAYETTE ST RM 118',
       addressLine2: 'BALTIMORE, MD 21233-9715',
-      hoursWD: 'Mon-Fri: 8:30 am-7:00 pm',
-      hoursSat: 'Sat: 8:30 am-5:00 pm',
-      hoursSun: 'Sun: Closed',
+      hoursWD: '8:30 am-7:00 pm',
+      hoursSat: '8:30 am-5:00 pm',
+      hoursSun: 'Closed',
     },
     {
       header: 'BETHSEDA — Post Office \u2122',
       addressLine1: '6900 WISCONSIN AVE STE 100',
       addressLine2: 'CHEVY CHASE, MD 20815-9996',
-      hoursWD: 'Mon-Fri: 9:00 am-5:00 pm',
-      hoursSat: 'Sat: 9:00 am-4:00 pm',
-      hoursSun: 'Sun: Closed',
+      hoursWD: '9:00 am-5:00 pm',
+      hoursSat: '9:00 am-4:00 pm',
+      hoursSun: 'Closed',
     },
     {
       header: 'FRIENDSHIP — Post Office \u2122',
       addressLine1: '4005 WISCONSIN AVE NW',
       addressLine2: 'WASHINGTON, DC 20016-9997',
-      hoursWD: 'Mon-Fri: 8:00 am-6:00 pm',
-      hoursSat: 'Sat: 8:00 am-4:00 pm',
-      hoursSun: 'Sun: 10:00 am-4:00 pm',
+      hoursWD: '8:00 am-6:00 pm',
+      hoursSat: '8:00 am-4:00 pm',
+      hoursSun: '10:00 am-4:00 pm',
     },
     {
       header: 'WASHINGTON — Post Office \u2122',
       addressLine1: '900 BRENTWOOD RD NE',
       addressLine2: 'WASHINGTON, DC 20018-9997',
-      hoursWD: 'Mon-Fri: 8:30 am-7:00 pm',
-      hoursSat: 'Sat: 8:30 am-5:00 pm',
-      hoursSun: 'Sun: Closed',
+      hoursWD: '8:30 am-7:00 pm',
+      hoursSat: '8:30 am-5:00 pm',
+      hoursSun: 'Closed',
     },
   ];
   return (
diff --git a/config/locales/in_person_proofing/en.yml b/config/locales/in_person_proofing/en.yml
index 43671350d47..1c758299cec 100644
--- a/config/locales/in_person_proofing/en.yml
+++ b/config/locales/in_person_proofing/en.yml
@@ -59,10 +59,13 @@ en:
         verify_step_enter_pii: 'Enter your name, date of birth, state-issued ID number,
           address and Social Security number.'
       location:
+        location_button: 'Select'
         location_step_about: 'If you are having trouble adding your ID, you may be able to 
           verify in person at a local United States Post Office in select locations.'
         retail_hours_heading: 'Retail Hours'
-        location_button: 'Select'
+        retail_hours_sat: 'Sat: '
+        retail_hours_sun: 'Sun: '
+        retail_hours_weekday: 'Mon-Fri: '
     form:
       address:
         address1: Address

From bfe3264f7063abe7e343cd3fa9caaf513808a730 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Fri, 8 Jul 2022 11:44:21 -0400
Subject: [PATCH 23/43] align button on right side of container

---
 .../components/location-collection-item.tsx       | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/app/javascript/packages/components/location-collection-item.tsx b/app/javascript/packages/components/location-collection-item.tsx
index 4a75f26b195..cb502385ebd 100644
--- a/app/javascript/packages/components/location-collection-item.tsx
+++ b/app/javascript/packages/components/location-collection-item.tsx
@@ -1,8 +1,6 @@
-import type { ReactNode } from 'react';
 import { Button } from '@18f/identity-components';
 import { useI18n } from '@18f/identity-react-i18n';
 
-// TODO: update props to be a locationItemObject
 // TODO: create locationItemObject based on data returned by API, should be separate file, need to look at api to determine fields
 interface LocationCollectionItemProps {
   header: string;
@@ -13,9 +11,6 @@ interface LocationCollectionItemProps {
   hoursSun: string;
 }
 
-// TODO: create strings in i18n for days and import here
-// flex-row doesn't work; flex-column does but the 2 items are now in a col together and stacked on top of each other
-// this means the ui as is does not match the figma file
 function LocationCollectionItem({
   header,
   addressLine1,
@@ -28,13 +23,9 @@ function LocationCollectionItem({
   return (
     <li className="location-collection-item">
       <div className="usa-collection__body">
-        <div className="display-flex flex-column">
-          <div className="flex-align-self-end">
-            <Button>{t('in_person_proofing.body.location.location_button')}</Button>
-          </div>
-          <div className="flex-align-self-start">
-            <h3 className="usa-collection__heading">{header}</h3>
-          </div>
+        <div className="display-flex flex-justify">
+          <h3 className="usa-collection__heading">{header}</h3>
+          <Button>{t('in_person_proofing.body.location.location_button')}</Button>
         </div>
         <div>{addressLine1}</div>
         <div>{addressLine2}</div>

From 57a7f537e2aad180692734f7507bbf1b3a0577d5 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Mon, 11 Jul 2022 12:33:00 -0400
Subject: [PATCH 24/43] add route and controller for locations

---
 app/controllers/idv/usps_locations_controller.rb | 15 +++++++++++++++
 config/routes.rb                                 |  1 +
 2 files changed, 16 insertions(+)
 create mode 100644 app/controllers/idv/usps_locations_controller.rb

diff --git a/app/controllers/idv/usps_locations_controller.rb b/app/controllers/idv/usps_locations_controller.rb
new file mode 100644
index 00000000000..19ca93b3efa
--- /dev/null
+++ b/app/controllers/idv/usps_locations_controller.rb
@@ -0,0 +1,15 @@
+module Idv
+    # is there supposed to be an IPP module declared here?
+    class UspsLocationsController < ApplicationController
+      def index
+        # get response from UspsInPersonProofer
+        render body: "{message: 'hello'}", content_type: 'application/json'
+      end
+
+      private
+
+      def formatLocation
+        # transform the multiple pieces of loc. data to create 2nd addy line
+      end
+  end
+  
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index aaf5302755d..8a478af7f5d 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -331,6 +331,7 @@
           as: :in_person_ready_to_verify
       get '/in_person/:step' => 'in_person#show', as: :in_person_step
       put '/in_person/:step' => 'in_person#update'
+      get '/in_person/usps_locations' => 'in_person/usps_locations#index'
 
       # deprecated routes
       get '/confirmations' => 'personal_key#show'

From f0c1a700e106f21e3d8fbd974c35bced5255f7f2 Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Mon, 11 Jul 2022 09:45:00 -0700
Subject: [PATCH 25/43] fix controller location & route position

---
 .../idv/{ => in_person}/usps_locations_controller.rb         | 5 +++--
 config/routes.rb                                             | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)
 rename app/controllers/idv/{ => in_person}/usps_locations_controller.rb (85%)

diff --git a/app/controllers/idv/usps_locations_controller.rb b/app/controllers/idv/in_person/usps_locations_controller.rb
similarity index 85%
rename from app/controllers/idv/usps_locations_controller.rb
rename to app/controllers/idv/in_person/usps_locations_controller.rb
index 19ca93b3efa..36bc315fcf1 100644
--- a/app/controllers/idv/usps_locations_controller.rb
+++ b/app/controllers/idv/in_person/usps_locations_controller.rb
@@ -1,5 +1,5 @@
 module Idv
-    # is there supposed to be an IPP module declared here?
+  module InPerson
     class UspsLocationsController < ApplicationController
       def index
         # get response from UspsInPersonProofer
@@ -11,5 +11,6 @@ def index
       def formatLocation
         # transform the multiple pieces of loc. data to create 2nd addy line
       end
+    end
   end
-  
\ No newline at end of file
+end
diff --git a/config/routes.rb b/config/routes.rb
index 8a478af7f5d..475d8e57194 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -329,9 +329,9 @@
       get '/in_person' => 'in_person#index'
       get '/in_person/ready_to_verify' => 'in_person/ready_to_verify#show',
           as: :in_person_ready_to_verify
+      get '/in_person/usps_locations' => 'in_person/usps_locations#index'
       get '/in_person/:step' => 'in_person#show', as: :in_person_step
       put '/in_person/:step' => 'in_person#update'
-      get '/in_person/usps_locations' => 'in_person/usps_locations#index'
 
       # deprecated routes
       get '/confirmations' => 'personal_key#show'

From 62e8c42f0f9f39bb6601fc1f70ef19729e567d91 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Thu, 14 Jul 2022 11:51:15 -0400
Subject: [PATCH 26/43] add controller and consume data in js app

---
 .../in_person/usps_locations_controller.rb    | 36 ++++++-
 .../components/location-collection-item.tsx   | 31 +++---
 .../components/in-person-location-step.tsx    | 94 ++++++++++---------
 app/services/usps_in_person_proofer.rb        |  1 +
 config/locales/in_person_proofing/en.yml      |  1 +
 5 files changed, 99 insertions(+), 64 deletions(-)

diff --git a/app/controllers/idv/in_person/usps_locations_controller.rb b/app/controllers/idv/in_person/usps_locations_controller.rb
index 36bc315fcf1..d2bcd51e885 100644
--- a/app/controllers/idv/in_person/usps_locations_controller.rb
+++ b/app/controllers/idv/in_person/usps_locations_controller.rb
@@ -1,16 +1,44 @@
+require "json"
+
 module Idv
   module InPerson
     class UspsLocationsController < ApplicationController
+
+      TransformedLocation = Struct.new(:name, :streetAddress, :addressLine2, :weekdayHours, :saturdayHours, :sundayHours)
+
       def index
-        # get response from UspsInPersonProofer
-        render body: "{message: 'hello'}", content_type: 'application/json'
+        transformedData = transformJson(parseJsonResponse)
+        render body: transformedData, content_type: 'application/json'
+      end
+
+      private
+      def parseJsonResponse
+        # TODO: get response from UspsInPersonProofer#request_facilities
+        file = File.open "spec/fixtures/usps_ipp_responses/request_facilities_response.json"
+        data = JSON.load file
+        dataJson = data.to_json
+        parsedJson = JSON.parse(dataJson)
       end
 
+      # TODO: update data transformation as this file should get an array of structs rather than json  
       private
+      # rename 
+      def formatAddressline(location)
+        addyLine = "#{location["city"]}, #{location["state"]} #{location["zip4"]}-#{location["zip5"]}"
+      end
 
-      def formatLocation
-        # transform the multiple pieces of loc. data to create 2nd addy line
+      private
+      def transformJson(json)
+        transformedLocations = Array.new()
+        
+        for item in json["postOffices"] do
+          location = TransformedLocation.new(item["name"], item["streetAddress"], formatAddressline(item), item["hours"][0]["weekdayHours"], item["hours"][1]["saturdayHours"], item["hours"][2]["sundayHours"])
+          transformedLocations.push(location)
+        end
+
+       transformedLocations.to_json
       end
+
     end
   end
 end
diff --git a/app/javascript/packages/components/location-collection-item.tsx b/app/javascript/packages/components/location-collection-item.tsx
index cb502385ebd..8f53ab36be4 100644
--- a/app/javascript/packages/components/location-collection-item.tsx
+++ b/app/javascript/packages/components/location-collection-item.tsx
@@ -1,38 +1,37 @@
 import { Button } from '@18f/identity-components';
 import { useI18n } from '@18f/identity-react-i18n';
 
-// TODO: create locationItemObject based on data returned by API, should be separate file, need to look at api to determine fields
 interface LocationCollectionItemProps {
-  header: string;
-  addressLine1: string;
+  name: string;
+  streetAddress: string;
   addressLine2: string;
-  hoursWD: string;
-  hoursSat: string;
-  hoursSun: string;
+  weekdayHours: string;
+  saturdayHours: string;
+  sundayHours: string;
 }
 
 function LocationCollectionItem({
-  header,
-  addressLine1,
+  name,
+  streetAddress,
   addressLine2,
-  hoursWD,
-  hoursSat,
-  hoursSun,
+  weekdayHours,
+  saturdayHours,
+  sundayHours,
 }: LocationCollectionItemProps) {
   const { t } = useI18n();
   return (
     <li className="location-collection-item">
       <div className="usa-collection__body">
         <div className="display-flex flex-justify">
-          <h3 className="usa-collection__heading">{header}</h3>
+          <h3 className="usa-collection__heading">{name}</h3>
           <Button>{t('in_person_proofing.body.location.location_button')}</Button>
         </div>
-        <div>{addressLine1}</div>
+        <div>{streetAddress}</div>
         <div>{addressLine2}</div>
         <h4>{t('in_person_proofing.body.location.retail_hours_heading')}</h4>
-        <div>{`${t('in_person_proofing.body.location.retail_hours_weekday')} ${hoursWD}`}</div>
-        <div>{`${t('in_person_proofing.body.location.retail_hours_sat')} ${hoursSat}`}</div>
-        <div>{`${t('in_person_proofing.body.location.retail_hours_sun')} ${hoursSun}`}</div>
+        <div>{`${t('in_person_proofing.body.location.retail_hours_weekday')} ${weekdayHours}`}</div>
+        <div>{`${t('in_person_proofing.body.location.retail_hours_sat')} ${saturdayHours}`}</div>
+        <div>{`${t('in_person_proofing.body.location.retail_hours_sun')} ${sundayHours}`}</div>
       </div>
     </li>
   );
diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index b804a1819a8..a80861c2094 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -1,59 +1,65 @@
+import { useState, useEffect } from 'react';
 import { PageHeading, LocationCollectionItem, LocationCollection } from '@18f/identity-components';
 import { useI18n } from '@18f/identity-react-i18n';
 
+/**
+ * @typedef InPersonLocationStepValue
+ *
+ * @prop {Blob|string|null|undefined} inPersonLocation InPersonLocation value.
+ */
+
+/**
+ * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonLocationStepValue>} props Props object.
+ */
+
+const getResponse = async () => {
+  const response = await fetch('http://localhost:3000/verify/in_person/usps_locations').then(
+    // TODO: error handling
+    // eslint-disable-next-line no-console
+    (res) => res.json().catch((error) => console.log('error', error)),
+  );
+  return response;
+};
+
+// TODO: should move object definition - it is the same as the locationItemProps interface
 function InPersonLocationStep() {
+  const [locationData, setLocationData] = useState(
+    [] as {
+      name: string;
+      streetAddress: string;
+      addressLine2: string;
+      weekdayHours: string;
+      saturdayHours: string;
+      sundayHours: string;
+    }[],
+  );
+
   const { t } = useI18n();
 
-  const mockData = [
-    {
-      header: 'BALTIMORE — Post Office \u2122',
-      addressLine1: '900 E FAYETTE ST RM 118',
-      addressLine2: 'BALTIMORE, MD 21233-9715',
-      hoursWD: '8:30 am-7:00 pm',
-      hoursSat: '8:30 am-5:00 pm',
-      hoursSun: 'Closed',
-    },
-    {
-      header: 'BETHSEDA — Post Office \u2122',
-      addressLine1: '6900 WISCONSIN AVE STE 100',
-      addressLine2: 'CHEVY CHASE, MD 20815-9996',
-      hoursWD: '9:00 am-5:00 pm',
-      hoursSat: '9:00 am-4:00 pm',
-      hoursSun: 'Closed',
-    },
-    {
-      header: 'FRIENDSHIP — Post Office \u2122',
-      addressLine1: '4005 WISCONSIN AVE NW',
-      addressLine2: 'WASHINGTON, DC 20016-9997',
-      hoursWD: '8:00 am-6:00 pm',
-      hoursSat: '8:00 am-4:00 pm',
-      hoursSun: '10:00 am-4:00 pm',
-    },
-    {
-      header: 'WASHINGTON — Post Office \u2122',
-      addressLine1: '900 BRENTWOOD RD NE',
-      addressLine2: 'WASHINGTON, DC 20018-9997',
-      hoursWD: '8:30 am-7:00 pm',
-      hoursSat: '8:30 am-5:00 pm',
-      hoursSun: 'Closed',
-    },
-  ];
+  useEffect(() => {
+    (async () => {
+      const fetchedPosts = await getResponse();
+      setLocationData(fetchedPosts);
+    })();
+  }, []);
+
   return (
     <>
       <PageHeading>{t('in_person_proofing.headings.location')}</PageHeading>
 
       <p>{t('in_person_proofing.body.location.location_step_about')}</p>
       <LocationCollection>
-        {mockData.map((item) => (
-          <LocationCollectionItem
-            header={item.header}
-            addressLine1={item.addressLine1}
-            addressLine2={item.addressLine2}
-            hoursWD={item.hoursWD}
-            hoursSat={item.hoursSat}
-            hoursSun={item.hoursSun}
-          />
-        ))}
+        {locationData &&
+          locationData.map((item) => (
+            <LocationCollectionItem
+              name={`${item.name} ${t('in_person_proofing.body.location.post_office')}`}
+              streetAddress={item.streetAddress}
+              addressLine2={item.addressLine2}
+              weekdayHours={item.weekdayHours}
+              saturdayHours={item.saturdayHours}
+              sundayHours={item.sundayHours}
+            />
+          ))}
       </LocationCollection>
     </>
   );
diff --git a/app/services/usps_in_person_proofer.rb b/app/services/usps_in_person_proofer.rb
index b0716d4b2de..0602e00ca88 100644
--- a/app/services/usps_in_person_proofer.rb
+++ b/app/services/usps_in_person_proofer.rb
@@ -1,6 +1,7 @@
 class UspsInPersonProofer
   attr_reader :token, :token_expires_at
 
+  # TODO: update struct so it has needed properties
   PostOffice = Struct.new(
     :distance, :address, :city, :phone, :name, :zip_code, :state, keyword_init: true
   )
diff --git a/config/locales/in_person_proofing/en.yml b/config/locales/in_person_proofing/en.yml
index 1c758299cec..1bed4788ead 100644
--- a/config/locales/in_person_proofing/en.yml
+++ b/config/locales/in_person_proofing/en.yml
@@ -62,6 +62,7 @@ en:
         location_button: 'Select'
         location_step_about: 'If you are having trouble adding your ID, you may be able to 
           verify in person at a local United States Post Office in select locations.'
+        post_office: "Post Office \u2122"
         retail_hours_heading: 'Retail Hours'
         retail_hours_sat: 'Sat: '
         retail_hours_sun: 'Sun: '

From 6013b80320515c1df89299ad3d632a80e60a361a Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Fri, 15 Jul 2022 17:27:27 -0400
Subject: [PATCH 27/43] display data from request facilities json and transform
 data in js app

---
 .../in_person/usps_locations_controller.rb    | 40 +++++-------
 .../components/location-collection-item.tsx   |  2 +-
 .../components/in-person-location-step.tsx    | 61 ++++++++++---------
 app/services/usps_in_person_proofer.rb        |  8 +--
 config/locales/in_person_proofing/en.yml      | 43 +++----------
 5 files changed, 63 insertions(+), 91 deletions(-)

diff --git a/app/controllers/idv/in_person/usps_locations_controller.rb b/app/controllers/idv/in_person/usps_locations_controller.rb
index d2bcd51e885..2bd8d268334 100644
--- a/app/controllers/idv/in_person/usps_locations_controller.rb
+++ b/app/controllers/idv/in_person/usps_locations_controller.rb
@@ -4,39 +4,29 @@ module Idv
   module InPerson
     class UspsLocationsController < ApplicationController
 
-      TransformedLocation = Struct.new(:name, :streetAddress, :addressLine2, :weekdayHours, :saturdayHours, :sundayHours)
-
       def index
-        transformedData = transformJson(parseJsonResponse)
-        render body: transformedData, content_type: 'application/json'
+         #TODO: uncomment when we have credentials to use api
+      #   defaultAddress = Location.new(address: "1600 Pennsylvania Avenue NW",
+      #   city: "Washington",
+      #   state: "DC",
+      #   zip_code: "")
+
+        # begin 
+        #   uspsResponse = UspsInPersonProofer.new.request_facilities(defaultAddress)
+        # rescue Faraday::ConnectionFailed => error
+        #   print error
+        # end
+      
+        render body: parseJsonResponse, content_type: 'application/json'
       end
 
+
       private
       def parseJsonResponse
-        # TODO: get response from UspsInPersonProofer#request_facilities
+        # TODO: remove when we have credentials for api
         file = File.open "spec/fixtures/usps_ipp_responses/request_facilities_response.json"
         data = JSON.load file
         dataJson = data.to_json
-        parsedJson = JSON.parse(dataJson)
-      end
-
-      # TODO: update data transformation as this file should get an array of structs rather than json  
-      private
-      # rename 
-      def formatAddressline(location)
-        addyLine = "#{location["city"]}, #{location["state"]} #{location["zip4"]}-#{location["zip5"]}"
-      end
-
-      private
-      def transformJson(json)
-        transformedLocations = Array.new()
-        
-        for item in json["postOffices"] do
-          location = TransformedLocation.new(item["name"], item["streetAddress"], formatAddressline(item), item["hours"][0]["weekdayHours"], item["hours"][1]["saturdayHours"], item["hours"][2]["sundayHours"])
-          transformedLocations.push(location)
-        end
-
-       transformedLocations.to_json
       end
 
     end
diff --git a/app/javascript/packages/components/location-collection-item.tsx b/app/javascript/packages/components/location-collection-item.tsx
index 8f53ab36be4..82d5527719b 100644
--- a/app/javascript/packages/components/location-collection-item.tsx
+++ b/app/javascript/packages/components/location-collection-item.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@18f/identity-components';
 import { useI18n } from '@18f/identity-react-i18n';
 
-interface LocationCollectionItemProps {
+export interface LocationCollectionItemProps {
   name: string;
   streetAddress: string;
   addressLine2: string;
diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index a80861c2094..9469540a5ed 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -1,45 +1,50 @@
 import { useState, useEffect } from 'react';
-import { PageHeading, LocationCollectionItem, LocationCollection } from '@18f/identity-components';
 import { useI18n } from '@18f/identity-react-i18n';
-
-/**
- * @typedef InPersonLocationStepValue
- *
- * @prop {Blob|string|null|undefined} inPersonLocation InPersonLocation value.
- */
-
-/**
- * @param {import('@18f/identity-form-steps').FormStepComponentProps<InPersonLocationStepValue>} props Props object.
- */
+import {
+  PageHeading,
+  LocationCollectionItem,
+  LocationCollection,
+  LocationCollectionItemProps,
+} from '@18f/identity-components';
 
 const getResponse = async () => {
   const response = await fetch('http://localhost:3000/verify/in_person/usps_locations').then(
-    // TODO: error handling
-    // eslint-disable-next-line no-console
-    (res) => res.json().catch((error) => console.log('error', error)),
+    (res) =>
+      res.json().catch((error) => {
+        throw error;
+      }),
   );
   return response;
 };
 
-// TODO: should move object definition - it is the same as the locationItemProps interface
-function InPersonLocationStep() {
-  const [locationData, setLocationData] = useState(
-    [] as {
-      name: string;
-      streetAddress: string;
-      addressLine2: string;
-      weekdayHours: string;
-      saturdayHours: string;
-      sundayHours: string;
-    }[],
-  );
+const formatAddressline = (postOffice: { city: any; state: any; zip5: any; zip4: any }) =>
+  `${postOffice.city}, ${postOffice.state}, ${postOffice.zip5}-${postOffice.zip4}`;
 
+const formatLocation = (postOffices: { postOffices: LocationCollectionItemProps[] }) => {
+  const formattedLocations = [] as LocationCollectionItemProps[];
+  postOffices.postOffices.forEach((po) => {
+    const location = {
+      name: po.name,
+      streetAddress: po.streetAddress,
+      addressLine2: formatAddressline(po),
+      weekdayHours: po.hours[0].weekdayHours,
+      saturdayHours: po.hours[1].saturdayHours,
+      sundayHours: po.hours[2].sundayHours,
+    } as LocationCollectionItemProps;
+    formattedLocations.push(location);
+  });
+  return formattedLocations;
+};
+
+function InPersonLocationStep() {
   const { t } = useI18n();
+  const [locationData, setLocationData] = useState([] as LocationCollectionItemProps[]);
 
   useEffect(() => {
     (async () => {
       const fetchedPosts = await getResponse();
-      setLocationData(fetchedPosts);
+      const formattedLocations = formatLocation(fetchedPosts);
+      setLocationData(formattedLocations);
     })();
   }, []);
 
@@ -52,7 +57,7 @@ function InPersonLocationStep() {
         {locationData &&
           locationData.map((item) => (
             <LocationCollectionItem
-              name={`${item.name} ${t('in_person_proofing.body.location.post_office')}`}
+              name={`${item.name} — ${t('in_person_proofing.body.location.post_office')}`}
               streetAddress={item.streetAddress}
               addressLine2={item.addressLine2}
               weekdayHours={item.weekdayHours}
diff --git a/app/services/usps_in_person_proofer.rb b/app/services/usps_in_person_proofer.rb
index 0602e00ca88..98c9e7d0c68 100644
--- a/app/services/usps_in_person_proofer.rb
+++ b/app/services/usps_in_person_proofer.rb
@@ -1,9 +1,8 @@
 class UspsInPersonProofer
   attr_reader :token, :token_expires_at
 
-  # TODO: update struct so it has needed properties
   PostOffice = Struct.new(
-    :distance, :address, :city, :phone, :name, :zip_code, :state, keyword_init: true
+    :distance, :address, :city, :phone, :name, :zip_code_4, :zip_code_5, :state, :hours keyword_init: true
   )
 
   # Makes a request to retrieve a new OAuth token
@@ -65,7 +64,6 @@ def request_facilities(location)
     )
 
     resp = faraday.post(url, body, headers)
-
     if resp.success?
       JSON.parse(resp.body)['postOffices'].map do |post_office|
         PostOffice.new(
@@ -74,8 +72,10 @@ def request_facilities(location)
           city: post_office['city'],
           phone: post_office['phone'],
           name: post_office['name'],
-          zip_code: post_office['zip5'],
+          zip_code_4: post_office['zip4'],
+          zip_code_5: post_office['zip5'],
           state: post_office['state'],
+          hours: post_office['hours']
         )
       end
     else
diff --git a/config/locales/in_person_proofing/en.yml b/config/locales/in_person_proofing/en.yml
index 1bed4788ead..41cac19d4d1 100644
--- a/config/locales/in_person_proofing/en.yml
+++ b/config/locales/in_person_proofing/en.yml
@@ -6,6 +6,16 @@ en:
         info: 'If your current address does not match the address on your ID, you will
           need to bring proof of your current address to the Post Office.'
         learn_more: Learn more
+      location:
+        location_button: 'Select'
+        location_step_about: 'If you are having trouble adding your ID, you may be able
+          to verify in person at a local United States Post Office in select
+          locations.'
+        post_office: 'Post Office ™'
+        retail_hours_heading: 'Retail Hours'
+        retail_hours_sat: 'Sat: '
+        retail_hours_sun: 'Sun: '
+        retail_hours_weekday: 'Mon-Fri: '
       prepare:
         alert_selected_post_office: 'You’ve selected the %{name} Post Office.'
         bring_barcode_header: A copy of your barcode
@@ -34,39 +44,6 @@ en:
         info_html: 'Enter information <strong>exactly as it appears on your state-issued
           ID.</strong> We will use this information to confirm it matches your
           ID in person.'
-      prepare:
-        alert_selected_post_office: 'You’ve selected the %{name} Post Office.'
-        bring_barcode_header: A copy of your barcode
-        bring_barcode_info: 'We will give you a unique code that expires within 30 days.'
-        bring_id_header: 'Your state-issued ID'
-        bring_id_info_acceptable: 'Your ID must not be expired. Acceptable forms of ID are:'
-        bring_id_info_dl: State Driver’s License
-        bring_id_info_id_card: 'State Non-Driver’s Identification Card'
-        bring_id_info_no_other_forms: We do not currently accept any other forms of
-          Identification, such as passports and military IDs
-        bring_proof_header: Proof of your current address
-        bring_proof_info_acceptable: 'You need a proof of address if your current
-          address is different than the address on your ID. Acceptable forms of
-          proof of address are:'
-        bring_proof_info_card: Vehicle Registration Card
-        bring_proof_info_lease: Lease, Mortgage, or Deed of Trust
-        bring_proof_info_policy: Home or Vehicle Insurance Policy
-        bring_proof_info_registration: Voter Registration
-        bring_title: 'When you go to the Post Office, please bring:'
-        verify_step_about: 'Complete the steps below to generate the barcode you’ll take
-          with you to the Post Office:'
-        verify_step_enter_phone: Enter a phone number with your name on the plan.
-        verify_step_enter_pii: 'Enter your name, date of birth, state-issued ID number,
-          address and Social Security number.'
-      location:
-        location_button: 'Select'
-        location_step_about: 'If you are having trouble adding your ID, you may be able to 
-          verify in person at a local United States Post Office in select locations.'
-        post_office: "Post Office \u2122"
-        retail_hours_heading: 'Retail Hours'
-        retail_hours_sat: 'Sat: '
-        retail_hours_sun: 'Sun: '
-        retail_hours_weekday: 'Mon-Fri: '
     form:
       address:
         address1: Address

From 9d4b50ae6d32d401b7a98c7c3ca4101d769c4106 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Fri, 15 Jul 2022 19:53:13 -0400
Subject: [PATCH 28/43] error catching if response fails

---
 .../document-capture/components/in-person-location-step.tsx  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index 9469540a5ed..41868a448e6 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -42,7 +42,9 @@ function InPersonLocationStep() {
 
   useEffect(() => {
     (async () => {
-      const fetchedPosts = await getResponse();
+      const fetchedPosts = await getResponse().catch((error) => {
+        throw error;
+      });
       const formattedLocations = formatLocation(fetchedPosts);
       setLocationData(formattedLocations);
     })();
@@ -65,6 +67,7 @@ function InPersonLocationStep() {
               sundayHours={item.sundayHours}
             />
           ))}
+        {locationData.length < 1 && <h4>No locations found.</h4>}
       </LocationCollection>
     </>
   );

From cbae4a28ad108dee0545ba8759994773189058fb Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Fri, 15 Jul 2022 20:04:50 -0400
Subject: [PATCH 29/43] fixed import error

---
 .../components/in-person-location-step.tsx             | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index 41868a448e6..82829a4930b 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -1,11 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useI18n } from '@18f/identity-react-i18n';
-import {
-  PageHeading,
-  LocationCollectionItem,
-  LocationCollection,
-  LocationCollectionItemProps,
-} from '@18f/identity-components';
+import { PageHeading, LocationCollectionItem, LocationCollection } from '@18f/identity-components';
+import { LocationCollectionItemProps } from '@18f/identity-components/location-collection-item';
 
 const getResponse = async () => {
   const response = await fetch('http://localhost:3000/verify/in_person/usps_locations').then(
@@ -20,7 +16,7 @@ const getResponse = async () => {
 const formatAddressline = (postOffice: { city: any; state: any; zip5: any; zip4: any }) =>
   `${postOffice.city}, ${postOffice.state}, ${postOffice.zip5}-${postOffice.zip4}`;
 
-const formatLocation = (postOffices: { postOffices: LocationCollectionItemProps[] }) => {
+const formatLocation = (postOffices) => {
   const formattedLocations = [] as LocationCollectionItemProps[];
   postOffices.postOffices.forEach((po) => {
     const location = {

From 5a3516657dc0a8b9f1ce77e8efb98bfd78867c1b Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Fri, 15 Jul 2022 20:08:16 -0400
Subject: [PATCH 30/43] fix locationcollectionitem key error

---
 .../document-capture/components/in-person-location-step.tsx      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index 82829a4930b..b52c20d64c8 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -55,6 +55,7 @@ function InPersonLocationStep() {
         {locationData &&
           locationData.map((item) => (
             <LocationCollectionItem
+              key={item.name}
               name={`${item.name} — ${t('in_person_proofing.body.location.post_office')}`}
               streetAddress={item.streetAddress}
               addressLine2={item.addressLine2}

From b01d0b5b7f104cff96d2d3cad1f7cfcb0049a606 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Fri, 15 Jul 2022 20:27:27 -0400
Subject: [PATCH 31/43] add interface for postoffice and update formatlocation
 input type

---
 .../components/in-person-location-step.tsx    | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index b52c20d64c8..f3e87bb5e91 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -3,6 +3,20 @@ import { useI18n } from '@18f/identity-react-i18n';
 import { PageHeading, LocationCollectionItem, LocationCollection } from '@18f/identity-components';
 import { LocationCollectionItemProps } from '@18f/identity-components/location-collection-item';
 
+interface PostOffice {
+  name: string;
+  streetAddress: string;
+  city: string;
+  state: string;
+  zip5: string;
+  zip4: string;
+  hours: {
+    weekdayHours: string;
+    saturdayHours: string;
+    sundayHours: string;
+  };
+}
+
 const getResponse = async () => {
   const response = await fetch('http://localhost:3000/verify/in_person/usps_locations').then(
     (res) =>
@@ -13,16 +27,13 @@ const getResponse = async () => {
   return response;
 };
 
-const formatAddressline = (postOffice: { city: any; state: any; zip5: any; zip4: any }) =>
-  `${postOffice.city}, ${postOffice.state}, ${postOffice.zip5}-${postOffice.zip4}`;
-
-const formatLocation = (postOffices) => {
+const formatLocation = (postOffices: { postOffices: PostOffice[] }) => {
   const formattedLocations = [] as LocationCollectionItemProps[];
   postOffices.postOffices.forEach((po) => {
     const location = {
       name: po.name,
       streetAddress: po.streetAddress,
-      addressLine2: formatAddressline(po),
+      addressLine2: `${po.city}, ${po.state}, ${po.zip5}-${po.zip4}`,
       weekdayHours: po.hours[0].weekdayHours,
       saturdayHours: po.hours[1].saturdayHours,
       sundayHours: po.hours[2].sundayHours,

From 51bd0f764975499aed9a2c5b7ca81e69ba5ba29f Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Sun, 17 Jul 2022 20:12:13 -0700
Subject: [PATCH 32/43] fix leftovers from rebase

---
 .../stylesheets/components/_button-link.scss  | 19 -------------------
 .../components/troubleshooting-options.tsx    |  2 --
 app/services/idv/steps/ipp/prepare_step.rb    | 11 -----------
 3 files changed, 32 deletions(-)
 delete mode 100644 app/assets/stylesheets/components/_button-link.scss
 delete mode 100644 app/services/idv/steps/ipp/prepare_step.rb

diff --git a/app/assets/stylesheets/components/_button-link.scss b/app/assets/stylesheets/components/_button-link.scss
deleted file mode 100644
index 2aafdbaa2ea..00000000000
--- a/app/assets/stylesheets/components/_button-link.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.button-link {
-    @extend .usa-button--unstyled;
-    @extend .block-link;
-    @extend .usa-link;
-
-    &#{&} {
-        cursor: pointer;
-        display: block;
-        line-height: 1.5;
-    }
-
-    &#{&}:hover, &#{&}:active {
-        text-decoration: none;
-    }
-
-    &#{&}:focus {
-        outline: none;
-    }
-}
diff --git a/app/javascript/packages/components/troubleshooting-options.tsx b/app/javascript/packages/components/troubleshooting-options.tsx
index 3abb9ab73c7..80ad8c42141 100644
--- a/app/javascript/packages/components/troubleshooting-options.tsx
+++ b/app/javascript/packages/components/troubleshooting-options.tsx
@@ -8,8 +8,6 @@ export type TroubleshootingOption = Omit<BlockLinkProps, 'href'> & {
 
   text: ReactNode;
 
-  isContinue?: boolean;
-
   isExternal?: boolean;
 };
 
diff --git a/app/services/idv/steps/ipp/prepare_step.rb b/app/services/idv/steps/ipp/prepare_step.rb
deleted file mode 100644
index 28347c85f76..00000000000
--- a/app/services/idv/steps/ipp/prepare_step.rb
+++ /dev/null
@@ -1,11 +0,0 @@
-module Idv
-  module Steps
-    module Ipp
-      class PrepareStep < DocAuthBaseStep
-        STEP_INDICATOR_STEP = :verify_info
-
-        def call; end
-      end
-    end
-  end
-end

From fdb1ca1a51fb76b51e6cded68ea33654e99e3eea Mon Sep 17 00:00:00 2001
From: Tomas Apodaca <thomas.apodaca@gsa.gov>
Date: Sun, 17 Jul 2022 22:38:22 -0700
Subject: [PATCH 33/43] move pilot facilities to proofer & refactor

---
 .../in_person/usps_locations_controller.rb    | 28 ++-------
 .../components/in-person-location-step.tsx    | 32 +++++-----
 app/services/usps_in_person_proofer.rb        | 60 ++++++++++++++-----
 3 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/app/controllers/idv/in_person/usps_locations_controller.rb b/app/controllers/idv/in_person/usps_locations_controller.rb
index 2bd8d268334..246f466c8a3 100644
--- a/app/controllers/idv/in_person/usps_locations_controller.rb
+++ b/app/controllers/idv/in_person/usps_locations_controller.rb
@@ -5,30 +5,14 @@ module InPerson
     class UspsLocationsController < ApplicationController
 
       def index
-         #TODO: uncomment when we have credentials to use api
-      #   defaultAddress = Location.new(address: "1600 Pennsylvania Avenue NW",
-      #   city: "Washington",
-      #   state: "DC",
-      #   zip_code: "")
+        begin 
+          uspsResponse = UspsInPersonProofer.new.request_pilot_facilities()
+        rescue Faraday::ConnectionFailed => error
+          print error
+        end
 
-        # begin 
-        #   uspsResponse = UspsInPersonProofer.new.request_facilities(defaultAddress)
-        # rescue Faraday::ConnectionFailed => error
-        #   print error
-        # end
-      
-        render body: parseJsonResponse, content_type: 'application/json'
+        render body: uspsResponse.to_json, content_type: 'application/json'
       end
-
-
-      private
-      def parseJsonResponse
-        # TODO: remove when we have credentials for api
-        file = File.open "spec/fixtures/usps_ipp_responses/request_facilities_response.json"
-        data = JSON.load file
-        dataJson = data.to_json
-      end
-
     end
   end
 end
diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index f3e87bb5e91..892eb08947e 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -4,17 +4,15 @@ import { PageHeading, LocationCollectionItem, LocationCollection } from '@18f/id
 import { LocationCollectionItemProps } from '@18f/identity-components/location-collection-item';
 
 interface PostOffice {
-  name: string;
-  streetAddress: string;
+  address: string;
   city: string;
+  name: string;
+  saturday_hours: string;
   state: string;
-  zip5: string;
-  zip4: string;
-  hours: {
-    weekdayHours: string;
-    saturdayHours: string;
-    sundayHours: string;
-  };
+  sunday_hours: string;
+  weekday_hours: string;
+  zip_code_4: string;
+  zip_code_5: string;
 }
 
 const getResponse = async () => {
@@ -29,14 +27,14 @@ const getResponse = async () => {
 
 const formatLocation = (postOffices: { postOffices: PostOffice[] }) => {
   const formattedLocations = [] as LocationCollectionItemProps[];
-  postOffices.postOffices.forEach((po) => {
+  postOffices.forEach((po) => {
     const location = {
       name: po.name,
-      streetAddress: po.streetAddress,
-      addressLine2: `${po.city}, ${po.state}, ${po.zip5}-${po.zip4}`,
-      weekdayHours: po.hours[0].weekdayHours,
-      saturdayHours: po.hours[1].saturdayHours,
-      sundayHours: po.hours[2].sundayHours,
+      streetAddress: po.address,
+      addressLine2: `${po.city}, ${po.state}, ${po.zip_code_5}-${po.zip_code_4}`,
+      weekdayHours: po.weekday_hours,
+      saturdayHours: po.saturday_hours,
+      sundayHours: po.sunday_hours,
     } as LocationCollectionItemProps;
     formattedLocations.push(location);
   });
@@ -49,10 +47,10 @@ function InPersonLocationStep() {
 
   useEffect(() => {
     (async () => {
-      const fetchedPosts = await getResponse().catch((error) => {
+      const fetchedLocations = await getResponse().catch((error) => {
         throw error;
       });
-      const formattedLocations = formatLocation(fetchedPosts);
+      const formattedLocations = formatLocation(fetchedLocations);
       setLocationData(formattedLocations);
     })();
   }, []);
diff --git a/app/services/usps_in_person_proofer.rb b/app/services/usps_in_person_proofer.rb
index 98c9e7d0c68..26555f73836 100644
--- a/app/services/usps_in_person_proofer.rb
+++ b/app/services/usps_in_person_proofer.rb
@@ -2,7 +2,18 @@ class UspsInPersonProofer
   attr_reader :token, :token_expires_at
 
   PostOffice = Struct.new(
-    :distance, :address, :city, :phone, :name, :zip_code_4, :zip_code_5, :state, :hours keyword_init: true
+    :address,
+    :city,
+    :distance,
+    :name,
+    :phone,
+    :saturday_hours,
+    :state,
+    :sunday_hours,
+    :weekday_hours,
+    :zip_code_4,
+    :zip_code_5,
+    keyword_init: true,
   )
 
   # Makes a request to retrieve a new OAuth token
@@ -65,24 +76,18 @@ def request_facilities(location)
 
     resp = faraday.post(url, body, headers)
     if resp.success?
-      JSON.parse(resp.body)['postOffices'].map do |post_office|
-        PostOffice.new(
-          distance: post_office['distance'],
-          address: post_office['streetAddress'],
-          city: post_office['city'],
-          phone: post_office['phone'],
-          name: post_office['name'],
-          zip_code_4: post_office['zip4'],
-          zip_code_5: post_office['zip5'],
-          state: post_office['state'],
-          hours: post_office['hours']
-        )
-      end
+      parse_facilities(resp.body)
     else
       { error: 'failed to get facilities', response: resp }
     end
   end
 
+  # Temporary function to return a static set of facilities
+  def request_pilot_facilities
+    resp = File.read('spec/fixtures/usps_ipp_responses/request_facilities_response.json')
+    parse_facilities(resp)
+  end
+
   # Makes HTTP request to enroll an applicant in in-person proofing.
   # Requires first name, last name, address, city, state, zip code, email address and a generated
   # unique ID. The unique ID must be no longer than 18 characters.
@@ -210,4 +215,31 @@ def faraday
   def request_headers
     { 'Content-Type' => 'application/json; charset=utf-8' }
   end
+
+  private
+
+  def parse_facilities(facilities)
+    JSON.parse(facilities)['postOffices'].map do |post_office|
+      hours = {}
+      post_office['hours'].each do |hour_details|
+        hour_details.keys.each do |key|
+          hours[key] = hour_details[key]
+        end
+      end
+
+      PostOffice.new(
+        address: post_office['streetAddress'],
+        city: post_office['city'],
+        distance: post_office['distance'],
+        name: post_office['name'],
+        phone: post_office['phone'],
+        saturday_hours: hours['saturdayHours'],
+        state: post_office['state'],
+        sunday_hours: hours['sundayHours'],
+        weekday_hours: hours['weekdayHours'],
+        zip_code_4: post_office['zip4'],
+        zip_code_5: post_office['zip5'],
+      )
+    end
+  end
 end

From 28267247d790f36bb0b3a3c4b3f351d81eb447a2 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Mon, 18 Jul 2022 10:33:32 -0400
Subject: [PATCH 34/43] update type in formatlocation

---
 .../document-capture/components/in-person-location-step.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index 892eb08947e..459bd9f2546 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -27,7 +27,7 @@ const getResponse = async () => {
 
 const formatLocation = (postOffices: { postOffices: PostOffice[] }) => {
   const formattedLocations = [] as LocationCollectionItemProps[];
-  postOffices.forEach((po) => {
+  postOffices.forEach((po: PostOffice) => {
     const location = {
       name: po.name,
       streetAddress: po.address,

From 8ec532ede495fe54f6a4af7a65621144ea55505d Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Mon, 18 Jul 2022 10:36:30 -0400
Subject: [PATCH 35/43] fix foreach error

---
 .../document-capture/components/in-person-location-step.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
index 459bd9f2546..05e8abc5a0a 100644
--- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx
+++ b/app/javascript/packages/document-capture/components/in-person-location-step.tsx
@@ -25,7 +25,7 @@ const getResponse = async () => {
   return response;
 };
 
-const formatLocation = (postOffices: { postOffices: PostOffice[] }) => {
+const formatLocation = (postOffices: PostOffice[]) => {
   const formattedLocations = [] as LocationCollectionItemProps[];
   postOffices.forEach((po: PostOffice) => {
     const location = {

From ffd049610a7982c49529975e471e47486f31f929 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Mon, 18 Jul 2022 15:58:30 -0400
Subject: [PATCH 36/43] location collection test added

---
 .../components/location-collection.spec.tsx   | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 app/javascript/packages/components/location-collection.spec.tsx

diff --git a/app/javascript/packages/components/location-collection.spec.tsx b/app/javascript/packages/components/location-collection.spec.tsx
new file mode 100644
index 00000000000..9f3a86d17a2
--- /dev/null
+++ b/app/javascript/packages/components/location-collection.spec.tsx
@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import LocationCollection from './location-collection';
+
+describe('LocationCollection', () => {
+  it('renders the component with expected class and children', () => {
+    const { getByText } = render(
+      <LocationCollection>
+        <div>LCI</div>
+      </LocationCollection>,
+    );
+
+    const child = getByText('LCI');
+    const item = child.parentElement!;
+
+    expect(item.classList.contains('usa-collection')).to.be.true();
+    expect(item.textContent).to.equal('LCI');
+  });
+
+  it('renders the component with custom class', () => {
+    const { getByText } = render(
+      <LocationCollection className="custom-class">
+        <div>LCI</div>
+      </LocationCollection>,
+    );
+
+    const child = getByText('LCI');
+    const item = child.parentElement!;
+
+    expect(item.classList.contains('custom-class')).to.be.true();
+  });
+});

From 65b67c43ea947125f4fd4d6be75ea818ee735893 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Mon, 18 Jul 2022 17:48:48 -0400
Subject: [PATCH 37/43] location collection item test

---
 .../location-collection-item.spec.tsx         | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 app/javascript/packages/components/location-collection-item.spec.tsx

diff --git a/app/javascript/packages/components/location-collection-item.spec.tsx b/app/javascript/packages/components/location-collection-item.spec.tsx
new file mode 100644
index 00000000000..bd42d7f2ffe
--- /dev/null
+++ b/app/javascript/packages/components/location-collection-item.spec.tsx
@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import LocationCollectionItem from './location-collection-item';
+
+describe('LocationCollectionItem', () => {
+  it('renders the component with expected class and children', () => {
+    const { container } = render(
+      <LocationCollectionItem
+        name={''}
+        streetAddress={''}
+        addressLine2={''}
+        weekdayHours={''}
+        saturdayHours={''}
+        sundayHours=""
+      />,
+    );
+
+    const wrapper = container.firstElementChild!;
+    expect(wrapper.classList.contains('location-collection-item')).to.be.true();
+    const locationCollectionItem = wrapper.firstElementChild!;
+    expect(locationCollectionItem.classList.contains('usa-collection__body')).to.be.true();
+  });
+
+  // test btn has expected text
+  // test heading is correct
+  // test hours strings is correct
+});

From 739c9ef04c4cb93f235b35a8cedc2647089fd204 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Tue, 19 Jul 2022 12:27:03 -0400
Subject: [PATCH 38/43] updated locationCollectionItem tests

---
 .../location-collection-item.spec.tsx         | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/app/javascript/packages/components/location-collection-item.spec.tsx b/app/javascript/packages/components/location-collection-item.spec.tsx
index bd42d7f2ffe..fa851432694 100644
--- a/app/javascript/packages/components/location-collection-item.spec.tsx
+++ b/app/javascript/packages/components/location-collection-item.spec.tsx
@@ -5,11 +5,11 @@ describe('LocationCollectionItem', () => {
   it('renders the component with expected class and children', () => {
     const { container } = render(
       <LocationCollectionItem
-        name={''}
-        streetAddress={''}
-        addressLine2={''}
-        weekdayHours={''}
-        saturdayHours={''}
+        name=""
+        streetAddress=""
+        addressLine2=""
+        weekdayHours=""
+        saturdayHours=""
         sundayHours=""
       />,
     );
@@ -18,9 +18,40 @@ describe('LocationCollectionItem', () => {
     expect(wrapper.classList.contains('location-collection-item')).to.be.true();
     const locationCollectionItem = wrapper.firstElementChild!;
     expect(locationCollectionItem.classList.contains('usa-collection__body')).to.be.true();
+    const display = locationCollectionItem.firstElementChild!;
+    expect(display.classList.contains('display-flex')).to.be.true();
+    expect(display.classList.contains('flex-justify')).to.be.true();
+    const heading = display.firstElementChild!;
+    expect(heading.classList.contains('usa-collection__heading')).to.be.true();
   });
 
-  // test btn has expected text
-  // test heading is correct
-  // test hours strings is correct
+  it('renders the component with expected data', () => {
+    const { getByText } = render(
+      <LocationCollectionItem
+        name="test name"
+        streetAddress="123 Test Address"
+        addressLine2="City, State 12345-1234"
+        weekdayHours="9 AM - 5 PM"
+        saturdayHours="9 AM - 6 PM"
+        sundayHours="Closed"
+      />,
+    );
+
+    const name = getByText('123 Test Address').parentElement!;
+    expect(name.textContent).to.contain('test name');
+    const streetAddress = getByText('123 Test Address').parentElement!;
+    expect(streetAddress.textContent).to.contain('123 Test Address');
+    const addressLine2 = getByText('123 Test Address').parentElement!;
+    expect(addressLine2.textContent).to.contain('City, State 12345-1234');
+    const wkDayHours = getByText(
+      'in_person_proofing.body.location.retail_hours_weekday 9 AM - 5 PM',
+    ).parentElement!;
+    expect(wkDayHours.textContent).to.contain('9 AM - 5 PM');
+    const satHours = getByText('in_person_proofing.body.location.retail_hours_sat 9 AM - 6 PM')
+      .parentElement!;
+    expect(satHours.textContent).to.contain('9 AM - 6 PM');
+    const sunHours = getByText('in_person_proofing.body.location.retail_hours_sun Closed')
+      .parentElement!;
+    expect(sunHours.textContent).to.contain('Closed');
+  });
 });

From bdd2a09d3d6b5cabb2fb556aff6e8dbb15cbfd34 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Tue, 19 Jul 2022 18:27:28 -0400
Subject: [PATCH 39/43] btn submit

---
 app/javascript/packages/components/location-collection-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/packages/components/location-collection-item.tsx b/app/javascript/packages/components/location-collection-item.tsx
index 82d5527719b..80ee1058e7f 100644
--- a/app/javascript/packages/components/location-collection-item.tsx
+++ b/app/javascript/packages/components/location-collection-item.tsx
@@ -24,7 +24,7 @@ function LocationCollectionItem({
       <div className="usa-collection__body">
         <div className="display-flex flex-justify">
           <h3 className="usa-collection__heading">{name}</h3>
-          <Button>{t('in_person_proofing.body.location.location_button')}</Button>
+          <Button type="submit">{t('in_person_proofing.body.location.location_button')}</Button>
         </div>
         <div>{streetAddress}</div>
         <div>{addressLine2}</div>

From cea0af0a4577e930a27b32ead0a5feebf471c895 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Wed, 20 Jul 2022 18:11:33 -0400
Subject: [PATCH 40/43] update button for mobile design

---
 .../components/_location-collection-item.scss | 25 +++++++++++++++++++
 .../components/location-collection-item.tsx   |  9 +++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/_location-collection-item.scss b/app/assets/stylesheets/components/_location-collection-item.scss
index 429b9cda259..f9785837de0 100644
--- a/app/assets/stylesheets/components/_location-collection-item.scss
+++ b/app/assets/stylesheets/components/_location-collection-item.scss
@@ -12,4 +12,29 @@
     margin-top: 1rem;
     padding-bottom: 1rem;
     border-color: #CEDCED;
+}
+
+@media screen {
+    .wrap-name{
+        overflow-wrap: break-word;
+    }
+}
+
+@media  screen and (min-width: 320px){
+    .usa-button-mobile {
+        width: -webkit-fill-available;
+        margin-top: 8px;
+    }
+}
+
+@media  screen and (max-width: 480px){
+    .usa-button-mobile-hidden {
+        display: none;
+    }
+}
+
+@media  screen and (min-width: 481px){
+    .usa-button-desktop-hidden {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/app/javascript/packages/components/location-collection-item.tsx b/app/javascript/packages/components/location-collection-item.tsx
index 80ee1058e7f..a6f8583089e 100644
--- a/app/javascript/packages/components/location-collection-item.tsx
+++ b/app/javascript/packages/components/location-collection-item.tsx
@@ -23,8 +23,10 @@ function LocationCollectionItem({
     <li className="location-collection-item">
       <div className="usa-collection__body">
         <div className="display-flex flex-justify">
-          <h3 className="usa-collection__heading">{name}</h3>
-          <Button type="submit">{t('in_person_proofing.body.location.location_button')}</Button>
+          <h3 className="usa-collection__heading wrap-name">{name}</h3>
+          <Button className="usa-button-mobile-hidden" type="submit">
+            {t('in_person_proofing.body.location.location_button')}
+          </Button>
         </div>
         <div>{streetAddress}</div>
         <div>{addressLine2}</div>
@@ -32,6 +34,9 @@ function LocationCollectionItem({
         <div>{`${t('in_person_proofing.body.location.retail_hours_weekday')} ${weekdayHours}`}</div>
         <div>{`${t('in_person_proofing.body.location.retail_hours_sat')} ${saturdayHours}`}</div>
         <div>{`${t('in_person_proofing.body.location.retail_hours_sun')} ${sundayHours}`}</div>
+        <Button className="usa-button-mobile usa-button-desktop-hidden" type="submit">
+          {t('in_person_proofing.body.location.location_button')}
+        </Button>
       </div>
     </li>
   );

From be4c59067f01332d698cfe737fcfe699d00f2d41 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Wed, 20 Jul 2022 18:12:28 -0400
Subject: [PATCH 41/43] update strings to remove spc and lengthen text

---
 config/locales/in_person_proofing/en.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/config/locales/in_person_proofing/en.yml b/config/locales/in_person_proofing/en.yml
index 41cac19d4d1..1d2d270e4b2 100644
--- a/config/locales/in_person_proofing/en.yml
+++ b/config/locales/in_person_proofing/en.yml
@@ -13,9 +13,9 @@ en:
           locations.'
         post_office: 'Post Office ™'
         retail_hours_heading: 'Retail Hours'
-        retail_hours_sat: 'Sat: '
-        retail_hours_sun: 'Sun: '
-        retail_hours_weekday: 'Mon-Fri: '
+        retail_hours_sat: 'Sat:'
+        retail_hours_sun: 'Sun:'
+        retail_hours_weekday: 'Monday to Friday:'
       prepare:
         alert_selected_post_office: 'You’ve selected the %{name} Post Office.'
         bring_barcode_header: A copy of your barcode

From 1bc1d2d5a281f139b800ad921a3aeed992995b17 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Wed, 20 Jul 2022 18:27:29 -0400
Subject: [PATCH 42/43] fix en merge issue

---
 config/locales/in_person_proofing/en.yml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/config/locales/in_person_proofing/en.yml b/config/locales/in_person_proofing/en.yml
index 1d2d270e4b2..3d0d6c66074 100644
--- a/config/locales/in_person_proofing/en.yml
+++ b/config/locales/in_person_proofing/en.yml
@@ -6,6 +6,21 @@ en:
         info: 'If your current address does not match the address on your ID, you will
           need to bring proof of your current address to the Post Office.'
         learn_more: Learn more
+      barcode:
+        deadline: Your deadline to verify your identity in person is %{deadline}.
+        deadline_restart: If you go after the deadline, your information will not be
+          saved and you will need to restart the process.
+        emailed_info: We have emailed this information to the email you used to log in.
+        items_to_bring: 'Bring these items with you to the Post Office:'
+        items_to_bring_questions: Questions about what to bring?
+        learn_more: Learn more
+        location_details: Location details
+        no_appointment_required: No appointment is required.
+        retail_hours: Retail hours
+        retail_hours_closed: Closed
+        retail_phone_label: Phone number
+        speak_to_associate: You can speak with any retail associate at this Post Office
+          to verify your identity.
       location:
         location_button: 'Select'
         location_step_about: 'If you are having trouble adding your ID, you may be able

From 96442136a051505b5ccbd63f49d72cc416d243a5 Mon Sep 17 00:00:00 2001
From: Shannon Alexander <shannonalexander@Shannons-MBP.fios-router.home>
Date: Thu, 21 Jul 2022 16:40:32 -0400
Subject: [PATCH 43/43] replace continue with select in in person spec

---
 spec/support/features/idv_helper.rb         | 4 ++++
 spec/support/features/in_person_helper.rb   | 2 +-
 spec/support/features/interaction_helper.rb | 5 +++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/spec/support/features/idv_helper.rb b/spec/support/features/idv_helper.rb
index 08550106ffa..bb96c61a89b 100644
--- a/spec/support/features/idv_helper.rb
+++ b/spec/support/features/idv_helper.rb
@@ -30,6 +30,10 @@ def click_idv_continue
     click_spinner_button_and_wait t('forms.buttons.continue')
   end
 
+  def click_idv_select
+    click_select_button_and_wait t('in_person_proofing.body.location.location_button')
+  end
+  
   def choose_idv_otp_delivery_method_sms
     page.find(
       'label',
diff --git a/spec/support/features/in_person_helper.rb b/spec/support/features/in_person_helper.rb
index e2490ae8c92..a2ce239b60b 100644
--- a/spec/support/features/in_person_helper.rb
+++ b/spec/support/features/in_person_helper.rb
@@ -44,7 +44,7 @@ def begin_in_person_proofing(user = user_with_2fa)
   end
 
   def complete_location_step(_user = user_with_2fa)
-    click_idv_continue
+    click_idv_select
   end
 
   def complete_prepare_step(_user = user_with_2fa)
diff --git a/spec/support/features/interaction_helper.rb b/spec/support/features/interaction_helper.rb
index c6d57ade971..4a83a982396 100644
--- a/spec/support/features/interaction_helper.rb
+++ b/spec/support/features/interaction_helper.rb
@@ -3,4 +3,9 @@ def click_spinner_button_and_wait(...)
     click_button(...)
     expect(page).to have_no_css('lg-spinner-button.spinner-button--spinner-active', wait: 10)
   end
+
+  def click_select_button_and_wait(...)
+    click_button(...)
+    expect(page).to have_no_css('button.usa-button', wait: 10)
+  end
 end