Shannon/lg 6089 select location page -Draft pr

app/assets/stylesheets/components/_location-collection-item.scss

@@ -0,0 +1,40 @@
+.location-collection-item {
+    max-width: 64ex;
+    margin-bottom: 0;
+    margin-top: 0;
+    list-style-type: none;
+    padding-left: 0;
+    align-items: flex-start;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    display: flex;
+    margin-bottom: 1rem;
+    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;
+    }
+}

app/assets/stylesheets/components/all.scss

@@ -27,3 +27,4 @@
 @import 'troubleshooting-options';
 @import 'validated-checkbox';
 @import 'i18n-dropdown';
+@import 'location-collection-item';

app/controllers/idv/in_person/usps_locations_controller.rb

@@ -0,0 +1,18 @@
+require "json"
+
+module Idv
+  module InPerson
+    class UspsLocationsController < ApplicationController
+
+      def index
+        begin 
+          uspsResponse = UspsInPersonProofer.new.request_pilot_facilities()
+        rescue Faraday::ConnectionFailed => error
+          print error
+        end
+
+        render body: uspsResponse.to_json, content_type: 'application/json'
+      end
+    end
+  end
+end

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';

app/javascript/packages/components/location-collection-item.spec.tsx

@@ -0,0 +1,57 @@
+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();
+    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();
+  });
+
+  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');
+  });
+});

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

@@ -0,0 +1,45 @@
+import { Button } from '@18f/identity-components';
+import { useI18n } from '@18f/identity-react-i18n';
+
+export interface LocationCollectionItemProps {
+  name: string;
+  streetAddress: string;
+  addressLine2: string;
+  weekdayHours: string;
+  saturdayHours: string;
+  sundayHours: string;
+}
+
+function LocationCollectionItem({
+  name,
+  streetAddress,
+  addressLine2,
+  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 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>
+        <h4>{t('in_person_proofing.body.location.retail_hours_heading')}</h4>
+        <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>
+  );
+}
+
+export default LocationCollectionItem;

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();
+  });
+});

app/javascript/packages/components/location-collection.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+interface LocationCollectionProps {
+  className?: string;
+
+  children?: ReactNode;
+}
+
+function LocationCollection({ children, className }: LocationCollectionProps) {
+  const classes = ['usa-collection', className].filter(Boolean).join(' ');
+  return <ul className={classes}>{children}</ul>;
+}
+
+export default LocationCollection;

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

@@ -1,14 +1,80 @@
-import { PageHeading } from '@18f/identity-components';
-import { FormStepsButton } from '@18f/identity-form-steps';
+import { useState, useEffect } from 'react';
 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 {
+  address: string;
+  city: string;
+  name: string;
+  saturday_hours: string;
+  state: string;
+  sunday_hours: string;
+  weekday_hours: string;
+  zip_code_4: string;
+  zip_code_5: string;
+}
+
+const getResponse = async () => {
+  const response = await fetch('http://localhost:3000/verify/in_person/usps_locations').then(
+    (res) =>
+      res.json().catch((error) => {
+        throw error;
+      }),
+  );
+  return response;
+};
+
+const formatLocation = (postOffices: PostOffice[]) => {
+  const formattedLocations = [] as LocationCollectionItemProps[];
+  postOffices.forEach((po: PostOffice) => {
+    const location = {
+      name: po.name,
+      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);
+  });
+  return formattedLocations;
+};
 
 function InPersonLocationStep() {
   const { t } = useI18n();
+  const [locationData, setLocationData] = useState([] as LocationCollectionItemProps[]);
+
+  useEffect(() => {
+    (async () => {
+      const fetchedLocations = await getResponse().catch((error) => {
+        throw error;
+      });
+      const formattedLocations = formatLocation(fetchedLocations);
+      setLocationData(formattedLocations);
+    })();
+  }, []);
 
   return (
     <>
       <PageHeading>{t('in_person_proofing.headings.location')}</PageHeading>
-      <FormStepsButton.Continue />
+
+      <p>{t('in_person_proofing.body.location.location_step_about')}</p>
+      <LocationCollection>
+        {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}
+              weekdayHours={item.weekdayHours}
+              saturdayHours={item.saturdayHours}
+              sundayHours={item.sundayHours}
+            />
+          ))}
+        {locationData.length < 1 && <h4>No locations found.</h4>}
+      </LocationCollection>
     </>
   );
 }