diff --git a/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.spec.tsx b/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.spec.tsx index 6f9528e25b..ce787964ed 100644 --- a/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.spec.tsx +++ b/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.spec.tsx @@ -95,6 +95,22 @@ describe('when entering patient sex and birth demographics', () => { expect(container.querySelector('span.value')?.innerHTML).toBe(''); }); + it('should render age only when date of birth is valid', async () => { + const { container, getByText, getByLabelText } = render(); + const dateOfBirth = getByLabelText('Date of birth'); + + expect(getByText('Current age')).toBeInTheDocument(); + expect(container.querySelector('span.value')?.innerHTML).toBe(''); + + act(() => { + userEvent.clear(dateOfBirth); + userEvent.type(dateOfBirth, '12012012'); + userEvent.tab(); + }); + + expect(container.querySelector('span.value')?.innerHTML).toContain('years'); + }); + it('should enable Date of death when deceased is true', async () => { const { getByLabelText, queryByLabelText } = render(); diff --git a/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.tsx b/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.tsx index 0763c26e28..16bb6c80d0 100644 --- a/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.tsx +++ b/apps/modernization-ui/src/apps/patient/add/basic/personalDetails/BasicPersonalDetailsFields.tsx @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { Controller, useFormContext, useFormState, useWatch } from 'react-hook-form'; +import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { usePatientSexBirthCodedValues } from 'apps/patient/profile/sexBirth/usePatientSexBirthCodedValues'; import { DatePickerInput, validDateRule } from 'design-system/date'; import { SingleSelect } from 'design-system/select'; @@ -21,14 +21,14 @@ const ENTRY_FIELD_PLACEHOLDER = ''; type BasicPersonalDetailsProps = EntryFieldsProps; export const BasicPersonalDetailsFields = ({ orientation = 'horizontal' }: BasicPersonalDetailsProps) => { - const { control } = useFormContext<{ personalDetails: BasicPersonalDetailsEntry }>(); + const { control, formState, getFieldState } = useFormContext<{ personalDetails: BasicPersonalDetailsEntry }>(); const currentBirthday = useWatch({ control, name: 'personalDetails.bornOn' }); const selectedDeceased = useWatch({ control, name: 'personalDetails.deceased' }); const age = useMemo(() => displayAgeAsOfToday(currentBirthday), [currentBirthday]); const sexBirthValues = usePatientSexBirthCodedValues(); const generalValues = usePatientGeneralCodedValues(); const { hivAccess } = usePatientProfilePermissions(); - const { isValid: bornOnValid } = useFormState({ control, name: 'personalDetails.bornOn' }); + const { invalid: bornOnInvalid } = getFieldState('personalDetails.bornOn', formState); return (
@@ -48,7 +48,7 @@ export const BasicPersonalDetailsFields = ({ orientation = 'horizontal' }: Basic /> )} /> - + ( + render={({ field: { onChange, onBlur, value, name }, fieldState: { error } }) => ( )} /> @@ -135,7 +136,7 @@ export const BasicPersonalDetailsFields = ({ orientation = 'horizontal' }: Basic (