CDCgov · mpeels · Sep 20, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 20, 2024
@@ -1,26 +1,29 @@
 import {
     AddressEntry,
     AdministrativeEntry,
-    IdentificationEntry,
-    PhoneEmailEntry,
     RaceEntry,
-    NameEntry
+    PhoneEmailEntry,
+    NameEntry,
+    EthnicityEntry,
+    IdentificationEntry
 } from 'apps/patient/data/entry';
 import { internalizeDate } from 'date';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { AddressMultiEntry } from './inputs/address/AddressMultiEntry';
 import { Administrative } from './inputs/administrative/Administrative';
 import { IdentificationMultiEntry } from './inputs/identification/IdentificationMultiEntry';
-import { NameMultiEntry } from './inputs/name/NameMultiEntry';
 import { PhoneAndEmailMultiEntry } from './inputs/phone/PhoneAndEmailMultiEntry';
 import { RaceMultiEntry } from './inputs/race/RaceMultiEntry';
 import { AddPatientExtendedNav } from './nav/AddPatientExtendedNav';
 import styles from './add-patient-extended-form.module.scss';
+import { EthnicityEntryCard } from './inputs/ethnicity/EthnicityEntryCard';
+import { NameMultiEntry } from './inputs/name/NameMultiEntry';
 
 // Once all sections have been updated with proper types this will be removed
 type ExtendedPatientCreationForm = {
     administrative: AdministrativeEntry;
+    ethnicity: EthnicityEntry;
     address: AddressEntry[];
     phone: PhoneEmailEntry[];
     race: RaceEntry[];
@@ -37,12 +40,16 @@ type DirtyState = {
     race: boolean;
 };
 export const AddPatientExtendedForm = () => {
+    const today = internalizeDate(new Date());
     const form = useForm<ExtendedPatientCreationForm>({
         defaultValues: {
             phone: [],
             administrative: {
-                asOf: internalizeDate(new Date()),
+                asOf: today,
                 comment: ''
+            },
+            ethnicity: {
+                asOf: today
             }
         },
         mode: 'onBlur'
@@ -91,6 +98,7 @@ export const AddPatientExtendedForm = () => {
                                 form.setValue('race', raceData);
                             }}
                         />
+                        <EthnicityEntryCard />
                     </div>
                 </FormProvider>
             </div>

@@ -14,6 +14,4 @@
         align-items: center;
         @extend %thin-bottom;
     }
-
-
 }
@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react';
+import { PatientEthnicityCodedValue } from 'apps/patient/profile/ethnicity';
+import { FormProvider, useForm } from 'react-hook-form';
+import { EthnicityEntryCard } from './EthnicityEntryCard';
+
+const mockEthnicityValues: PatientEthnicityCodedValue = {
+    ethnicGroups: [{ name: 'Hispanic or Latino', value: '2135-2' }],
+    ethnicityUnknownReasons: [{ name: 'Not asked', value: '6' }],
+    detailedEthnicities: [{ name: 'Central American', value: '2155-0' }]
+};
+
+jest.mock('apps/patient/profile/ethnicity/usePatientEthnicityCodedValues', () => ({
+    usePatientEthnicityCodedValues: () => mockEthnicityValues
+}));
+
+const Fixture = () => {
+    const form = useForm();
+    return (
+        <FormProvider {...form}>
+            <EthnicityEntryCard />
+        </FormProvider>
+    );
+};
+
+describe('EthnicityEntryCard', () => {
+    it('should display Ethnicity header on card', () => {
+        const { getAllByText } = render(<Fixture />);
+        expect(getAllByText('Ethnicity')).toHaveLength(2);
+    });
+});
@@ -0,0 +1,10 @@
+import { EthnicityEntryFields } from 'apps/patient/data/ethnicity/EthnicityEntryFields';
+import { Card } from '../../card/Card';
+
+export const EthnicityEntryCard = () => {
+    return (
+        <Card id="ethnicity" title="Ethnicity">
+            <EthnicityEntryFields />
+        </Card>
+    );
+};
@@ -12,7 +12,7 @@ export const AddPatientExtendedNav = () => {
                     <a href="#section-PhoneAndEmail">Phone & email</a>
                     <a href="#identification">Identification</a>
                     <a href="#section-Race">Race</a>
-                    <a href="#section-Ethnicity">Ethnicity</a>
+                    <a href="#ethnicity">Ethnicity</a>
                     <a href="#section-SexAndBirth">Sex & birth</a>
                     <a href="#section-Mortality">Mortality</a>
                     <a href="#section-General">General patient information</a>

@@ -60,6 +60,7 @@ type Race = EffectiveDated & {
 type Ethnicity = EffectiveDated & {
     ethnicity: string;
     detailed: string[];
+    reasonUnknown?: string;
 };
 
 type Sex = {

@@ -61,6 +61,7 @@ type RaceEntry = EffectiveDated & {
 type EthnicityEntry = EffectiveDated & {
     ethnicity: Selectable;
     detailed: Selectable[];
+    reasonUnknown?: Selectable;
 };
 
 type SexEntry = EffectiveDated & {

@@ -0,0 +1,80 @@
+import { FormProvider, useForm } from 'react-hook-form';
+import { EthnicityEntryFields } from './EthnicityEntryFields';
+import { PatientEthnicityCodedValue } from 'apps/patient/profile/ethnicity';
+import { EthnicityEntry } from '../entry';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
+
+const mockEthnicityValues: PatientEthnicityCodedValue = {
+    ethnicGroups: [
+        { name: 'Hispanic or Latino', value: '2135-2' },
+        { name: 'Unknown', value: 'UNK' }
+    ],
+    ethnicityUnknownReasons: [{ name: 'Not asked', value: '6' }],
+    detailedEthnicities: [{ name: 'Central American', value: '2155-0' }]
+};
+
+jest.mock('apps/patient/profile/ethnicity/usePatientEthnicityCodedValues', () => ({
+    usePatientEthnicityCodedValues: () => mockEthnicityValues
+}));
+const Fixture = () => {
+    const form = useForm<EthnicityEntry>({ mode: 'onBlur' });
+    return (
+        <FormProvider {...form}>
+            <EthnicityEntryFields />
+        </FormProvider>
+    );
+};
+
+describe('EthnicityEntryFields', () => {
+    it('should render the proper labels', () => {
+        const { getByLabelText, queryByLabelText, getByText } = render(<Fixture />);
+
+        expect(getByLabelText('Ethnicity information as of')).toBeInTheDocument();
+        expect(getByText('Ethnicity information as of')).toHaveClass('required');
+        expect(getByLabelText('Ethnicity')).toBeInTheDocument();
+        expect(getByText('Ethnicity')).not.toHaveClass('required');
+        expect(queryByLabelText('Spanish origin')).not.toBeInTheDocument();
+        expect(queryByLabelText('Reason unknown')).not.toBeInTheDocument();
+    });
+
+    it('should require as of date', async () => {
+        const { getByLabelText, getByText } = render(<Fixture />);
+        const asOf = getByLabelText('Ethnicity information as of');
+        act(() => {
+            userEvent.click(asOf);
+            userEvent.tab();
+        });
+
+        await waitFor(() => {
+            expect(getByText('As of date is required.')).toBeInTheDocument();
+        });
+    });
+
+    it('should display spanish origin when hispanic or latino selected', async () => {
+        const { getByLabelText, queryByLabelText } = render(<Fixture />);
+
+        act(() => {
+            userEvent.selectOptions(getByLabelText('Ethnicity'), '2135-2');
+        });
+
+        await waitFor(() => {
+            expect(getByLabelText('Spanish origin')).toBeInTheDocument();
+        });
+        expect(queryByLabelText('Reason unknown')).not.toBeInTheDocument();
+    });
+
+    it('should display unknown reason when unknown selected', async () => {
+        const { getByLabelText, queryByLabelText } = render(<Fixture />);
+
+        act(() => {
+            userEvent.selectOptions(getByLabelText('Ethnicity'), 'UNK');
+        });
+
+        await waitFor(() => {
+            expect(getByLabelText('Reason unknown')).toBeInTheDocument();
+        });
+        expect(queryByLabelText('Spanish origin')).not.toBeInTheDocument();
+    });
+});
@@ -0,0 +1,98 @@
+import { usePatientEthnicityCodedValues } from 'apps/patient/profile/ethnicity';
+import { DatePickerInput } from 'components/FormInputs/DatePickerInput';
+import { MultiSelect, SingleSelect } from 'design-system/select';
+import { useEffect } from 'react';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { EthnicityEntry } from '../entry';
+
+const UNKNOWN = 'UNK';
+const HISPANIC = '2135-2';
+
+export const EthnicityEntryFields = () => {
+    const { control, setValue } = useFormContext<{ ethnicity: EthnicityEntry }>();
+    const coded = usePatientEthnicityCodedValues();
+    const selectedEthinicity = useWatch({ control, name: 'ethnicity.ethnicity' });
+
+    useEffect(() => {
+        setValue('ethnicity.reasonUnknown', undefined);
+        setValue('ethnicity.detailed', []);
+    }, [selectedEthinicity]);
+
+    return (
+        <section>
+            <Controller
+                control={control}
+                name="ethnicity.asOf"
+                rules={{ required: { value: true, message: 'As of date is required.' } }}
+                render={({ field: { onBlur, onChange, value, name }, fieldState: { error } }) => (
+                    <DatePickerInput
+                        label="Ethnicity information as of"
+                        orientation="horizontal"
+                        defaultValue={value}
+                        onBlur={onBlur}
+                        onChange={onChange}
+                        name={name}
+                        disableFutureDates
+                        errorMessage={error?.message}
+                        required
+                    />
+                )}
+            />
+            <Controller
+                control={control}
+                name="ethnicity.ethnicity"
+                render={({ field: { onChange, onBlur, value, name } }) => (
+                    <SingleSelect
+                        label="Ethnicity"
+                        orientation="horizontal"
+                        onChange={onChange}
+                        onBlur={onBlur}
+                        id={name}
+                        name={name}
+                        value={value}
+                        options={coded.ethnicGroups}
+                    />
+                )}
+            />
+
+            {selectedEthinicity?.value === HISPANIC && (
+                <Controller
+                    control={control}
+                    name="ethnicity.detailed"
+                    shouldUnregister
+                    render={({ field: { onChange, onBlur, value, name } }) => (
+                        <MultiSelect
+                            label="Spanish origin"
+                            orientation="horizontal"
+                            onChange={onChange}
+                            onBlur={onBlur}
+                            id={name}
+                            name={name}
+                            value={value}
+                            options={coded.detailedEthnicities}
+                        />
+                    )}
+                />
+            )}
+            {selectedEthinicity?.value === UNKNOWN && (
+                <Controller
+                    control={control}
+                    name="ethnicity.reasonUnknown"
+                    shouldUnregister
+                    render={({ field: { onChange, onBlur, value, name } }) => (
+                        <SingleSelect
+                            label="Reason unknown"
+                            orientation="horizontal"
+                            value={value}
+                            onChange={onChange}
+                            onBlur={onBlur}
+                            id={name}
+                            name={name}
+                            options={coded.ethnicityUnknownReasons}
+                        />
+                    )}
+                />
+            )}
+        </section>
+    );
+};
@@ -1,13 +1,14 @@
 import { asValue, asValues } from 'options';
-import { EthnicityEntry } from './entry';
-import { Ethnicity } from './api';
+import { EthnicityEntry } from '../entry';
+import { Ethnicity } from '../api';
 
 const asEthnicity = (entry: EthnicityEntry): Ethnicity => {
-    const { ethnicity, detailed, ...remaining } = entry;
+    const { ethnicity, detailed, reasonUnknown, ...remaining } = entry;
 
     return {
         ethnicity: asValue(ethnicity),
         detailed: asValues(detailed),
+        reasonUnknown: asValue(reasonUnknown),
         ...remaining
     };
 };

@@ -4,7 +4,7 @@ export { asAddress } from './address/asAddress';
 export { asPhoneEmail } from './phoneEmail/asPhoneEmail';
 export { asIdentification } from './identification/asIdentification';
 export { asRace } from './race/asRace';
-export { asEthnicity } from './asEthnicity';
+export { asEthnicity } from './ethnicity/asEthnicity';
 export { asSex } from './asSex';
 export { asBirth } from './asBirth';
 export { asMortality } from './asMortality';

@@ -40,14 +40,14 @@ const initialCoded = {
     detailedEthnicities: []
 };
 
-type PatietnEthnicityCodedValue = {
+type PatientEthnicityCodedValue = {
     ethnicGroups: CodedValue[];
     ethnicityUnknownReasons: CodedValue[];
     detailedEthnicities: CodedValue[];
 };
 
 const usePatientEthnicityCodedValues = () => {
-    const [coded, setCoded] = useState<PatietnEthnicityCodedValue>(initialCoded);
+    const [coded, setCoded] = useState<PatientEthnicityCodedValue>(initialCoded);
 
     const handleComplete = (data: Result) => {
         setCoded({
@@ -65,4 +65,4 @@ const usePatientEthnicityCodedValues = () => {
 };
 
 export { usePatientEthnicityCodedValues };
-export type { PatietnEthnicityCodedValue };
+export type { PatientEthnicityCodedValue };
@@ -68,7 +68,7 @@ export const MultiSelect = ({
                 theme={theme}
                 styles={styles}
                 isMulti
-                id={id}
+                inputId={id}
                 name={name}
                 options={options}
                 value={value}