Add appointment to Claim Status summary

components/Appointment.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from 'next-i18next'
+
+import { TextLine } from './TextLine'
+import { AppointmentContent } from '../types/common'
+import { formatAppointmentDate } from '../utils/formatDate'
+import { capitalizeFirstLetter } from '../utils/strings'
+import { identifyI18nPeriod, samePeriod } from '../utils/timeSlot'
+
+export interface AppointmentProps extends AppointmentContent {
+  loading: boolean
+}
+
+export const Appointment: React.FC<AppointmentProps> = ({ loading = false, date, timeSlot }) => {
+  const { t, i18n } = useTranslation('common')
+
+  let formattedAppointment = ''
+
+  // Format the date portion.
+  formattedAppointment = capitalizeFirstLetter(formatAppointmentDate(date, i18n.language))
+
+  // Format the time portion.
+  if (timeSlot) {
+    const start = timeSlot.rangeStart
+    const end = timeSlot.rangeEnd
+
+    // Appointment time slots are formatted using i18n's interpolation feature.
+    // See https://www.i18next.com/translation-function/interpolation
+
+    // If the times are both am or both pm, the string should look something like:
+    // ", between 1–3 p.m. Pacific time"
+    if (samePeriod(start, end)) {
+      formattedAppointment += t('time.between-range', { range: `${start}–${end}`, ampm: t(identifyI18nPeriod(end)) })
+    }
+    // If one time is am and one time is pm, the string should look something like:
+    // ", between 10 a.m. and 12 p.m. Pacific time"
+    else {
+      formattedAppointment += t('time.between-start-end', {
+        start: { time: start, ampm: t(identifyI18nPeriod(start)) },
+        end: { time: end, ampm: t(identifyI18nPeriod(end)) },
+      })
+    }
+  }
+
+  return (
+    <div key="appointment" className="appointment">
+      <TextLine loading={loading} text={formattedAppointment} />
+    </div>
+  )
+}

components/ClaimStatus.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'next-i18next'
 
+import { ClaimSummary } from './ClaimSummary'
 import { NextSteps } from './NextSteps'
 import { TextLine } from './TextLine'
-import { TransLine } from './TransLine'
 import { ClaimStatusContent } from '../types/common'
 
 export interface ClaimStatusProps extends ClaimStatusContent {
@@ -26,18 +26,12 @@ export const ClaimStatus: React.FC<ClaimStatusProps> = ({
       <div className="pending-status claim-subsection">
         <TextLine loading={loading} header text={t(heading)} />
       </div>
-      <div className="summary">
-        {summary.map((paragraph, index) => (
-          <div key={index} className="">
-            <TransLine
-              loading={loading}
-              userArrivedFromUioMobile={userArrivedFromUioMobile}
-              i18nKey={paragraph.i18nKey}
-              links={paragraph.links}
-            />
-          </div>
-        ))}
-      </div>
+      <ClaimSummary
+        loading={loading}
+        userArrivedFromUioMobile={userArrivedFromUioMobile}
+        paragraphs={summary.paragraphs}
+        appointment={summary.appointment}
+      />
       <NextSteps
         loading={loading}
         userArrivedFromUioMobile={userArrivedFromUioMobile}

components/ClaimSummary.tsx

@@ -0,0 +1,41 @@
+import { Appointment } from './Appointment'
+import { TransLine } from './TransLine'
+import { ClaimSummaryContent } from '../types/common'
+
+export interface ClaimSummaryProps extends ClaimSummaryContent {
+  loading: boolean
+  userArrivedFromUioMobile: boolean
+}
+
+export const ClaimSummary: React.FC<ClaimSummaryProps> = ({
+  loading = false,
+  userArrivedFromUioMobile = false,
+  paragraphs,
+  appointment,
+}) => {
+  let elements: JSX.Element[] = []
+
+  // Build generic paragraphs.
+  elements = paragraphs.map((paragraph, index) => (
+    <div key={index} className="">
+      <TransLine
+        loading={loading}
+        userArrivedFromUioMobile={userArrivedFromUioMobile}
+        i18nKey={paragraph.i18nKey}
+        links={paragraph.links}
+      />
+    </div>
+  ))
+
+  // Insert appointment as second element.
+  // Currently only needed for Scenario 2.
+  if (appointment) {
+    const formattedAppointment = (
+      <Appointment loading={loading} date={appointment.date} timeSlot={appointment.timeSlot} />
+    )
+    // Splice it in as the second element.
+    elements.splice(1, 0, formattedAppointment)
+  }
+
+  return <div className="summary">{elements}</div>
+}

public/locales/en/common.json

@@ -40,6 +40,12 @@
     "warning_plural": "To protect your information, you will be logged out in {{count}} minutes if you do not continue.",
     "button": "Return to UI Home"
   },
+  "time": {
+    "between-range": ", between {{range}} {{ampm}} Pacific time",
+    "between-start-end": ", between {{start.time}} {{start.ampm}} and {{end.time}} {{end.ampm}} Pacific time",
+    "am": "a.m.",
+    "pm": "p.m."
+  },
   "urls": {
     "edd": {
       "ui-certify": "https://edd.ca.gov/Unemployment/certify.htm",

public/locales/es/common.json

@@ -40,6 +40,12 @@
     "warning_plural": "Para proteger su información, se cerrará la sesión en {{count}} minutos si no continúa.",
     "button": "Volver a UI Casa"
   },
+  "time": {
+    "between-range": ", entre {{range}} {{ampm}} hora del Pacífico",
+    "between-start-end": ", entre {{start.time}} {{start.ampm}} y {{end.time}} {{end.ampm}} hora del Pacífico",
+    "am": "a.m.",
+    "pm": "p.m."
+  },
   "urls": {
     "edd": {
       "ui-certify": "https://edd.ca.gov/Unemployment/certify-espanol.htm",

stories/Appointment.stories.tsx

@@ -0,0 +1,68 @@
+import { Story, Meta } from '@storybook/react'
+
+import { Appointment as AppointmentComponent, AppointmentProps } from '../components/Appointment'
+
+export default {
+  title: 'Component/Atoms/Appointment',
+  component: AppointmentComponent,
+  argTypes: {
+    date: {
+      description: 'Please ignore the time picker',
+      control: {
+        type: 'date',
+      },
+    },
+    start: {
+      name: 'start time',
+      table: {
+        type: {
+          summary: 'number',
+        },
+      },
+      control: {
+        type: 'number',
+        min: 1,
+        max: 12,
+      },
+    },
+    end: {
+      name: 'end time',
+      table: {
+        type: {
+          summary: 'number',
+        },
+      },
+      control: {
+        type: 'number',
+        min: 1,
+        max: 12,
+      },
+    },
+    timeSlot: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} as Meta
+
+interface StoryAppointmentProps extends AppointmentProps {
+  date: Date
+  start?: number
+  end?: number
+}
+
+const Template: Story<StoryAppointmentProps> = ({ ...args }) => {
+  if (args.start && args.end) {
+    args.timeSlot = {
+      rangeStart: args.start,
+      rangeEnd: args.end,
+    }
+  }
+  return <AppointmentComponent {...args} />
+}
+
+export const Appointment = Template.bind({})
+Appointment.args = {
+  date: new Date(),
+}

stories/ClaimStatus.stories.tsx

@@ -12,7 +12,10 @@ const Template: Story<ClaimStatusProps> = (args) => <ClaimStatusComponent {...ar
 export const ClaimStatus = Template.bind({})
 ClaimStatus.args = {
   heading: 'claim-status:scenarios.scenario4.heading',
-  summary: [{ i18nKey: 'claim-status:scenarios.scenario4.summary.text' }],
+  summary: {
+    paragraphs: [{ i18nKey: 'claim-status:scenarios.scenario4.summary.0.text' }],
+    appointment: null,
+  },
   yourNextSteps: [{ i18nKey: 'claim-status:scenarios.scenario4.your-next-steps.0.text' }],
   eddNextSteps: [{ i18nKey: 'claim-status:scenarios.scenario4.edd-next-steps.0.text' }],
 }

stories/ClaimSummary.stories.tsx

@@ -0,0 +1,25 @@
+import { Story, Meta } from '@storybook/react'
+
+import { ClaimSummary as ClaimSummaryComponent, ClaimSummaryProps } from '../components/ClaimSummary'
+
+export default {
+  title: 'Component/Atoms/Claim Summary',
+  component: ClaimSummaryComponent,
+} as Meta
+
+const Template: Story<ClaimSummaryProps> = (args) => <ClaimSummaryComponent {...args} />
+
+export const ClaimSummary = Template.bind({})
+ClaimSummary.args = {
+  paragraphs: [
+    {
+      i18nKey: 'claim-status:scenarios.scenario2.summary.0.text',
+    },
+    {
+      i18nKey: 'claim-status:scenarios.scenario2.summary.1.text',
+    },
+  ],
+  appointment: {
+    date: new Date(),
+  },
+}

tests/components/Appointment.test.tsx

@@ -0,0 +1,78 @@
+import MockDate from 'mockdate'
+import renderer, { act } from 'react-test-renderer'
+
+import i18n from '../jest-i18n'
+import { Appointment } from '../../components/Appointment'
+import { TimeSlot } from '../../types/common'
+import { getDateWithOffset } from '../../utils/formatDate'
+
+/**
+ * Helper functions.
+ */
+
+function renderAppointmentComponent(timeSlot: TimeSlot | undefined): string {
+  const date = getDateWithOffset(0)
+  return renderer.create(<Appointment loading={false} date={date} timeSlot={timeSlot} />).toJSON()
+}
+
+/**
+ * Appointment snapshot tests.
+ */
+
+beforeAll(() => {
+  MockDate.set('2021-05-05')
+})
+
+// Each test case should be:
+// [test description, timeSlot.rangeStart, timeSlot.rangeEnd]
+const testCases = [
+  ['with no time slot, then match the snapshot', null, null],
+  ['with a morning time slot, then match the snapshot', 8, 10],
+  ['with an afternoon time slot, then match the snapshot', 1, 3],
+  ['with a time slot that starts in the morning and ends in the afternoon, then match the snapshot', 8, 3],
+  ['with a time slot that has a nonsense time range, then match the snapshot', 3, 9],
+]
+
+// Use describe.each() to DRY up the tests.
+// See https://jestjs.io/docs/api#describeeachtablename-fn-timeout
+describe.each(testCases)('If given an appointment', (description: string, start: number | null, end: number | null) => {
+  // Construct the timeslot argument.
+  let timeSlot: TimeSlot | undefined
+  if (start && end) {
+    timeSlot = {
+      rangeStart: start,
+      rangeEnd: end,
+    }
+  }
+
+  // Run through the test cases first in English.
+  it(`${description}`, () => {
+    expect(renderAppointmentComponent(timeSlot)).toMatchSnapshot()
+  })
+
+  // Run through the test cases again in Spanish.
+  it(`${description}, in Spanish`, () => {
+    // Change the language to Spanish.
+
+    //  The call to changeLanguage() must be wrapped in act(), otherwise Jest/react
+    // complains.
+    // See https://reactjs.org/link/wrap-tests-with-act
+
+    // Disable floating promises lint check. eslint really wants us to handle the Promise
+    // returned by changeLanguage(), but it doesn't appear necessary to this test.
+    // This can be revisited and refactored in the future if necessary.
+    /* eslint-disable @typescript-eslint/no-floating-promises */
+    act(() => {
+      i18n.changeLanguage('es')
+    })
+
+    // Run the actual test.
+    expect(renderAppointmentComponent(timeSlot)).toMatchSnapshot()
+
+    // Change the language back to Spanish so the first it() renders correctly in English.
+    act(() => {
+      i18n.changeLanguage('en')
+    })
+    /* eslint-enable @typescript-eslint/no-floating-promises */
+  })
+})