CNFT1-3305: Personal details fix deceased date validation and current…

… age (#2127)

* Minor styling and text issues

* Fix top margin when nesting entry components

* Revert changes since this is moving to new form

* Fix padding around current age

* Other information section for basic form

* Rename to personal details fields

* Hide age when date of birth invalid

* Fix rendering of age when other fields are invalid

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

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 (
         <section>
@@ -48,7 +48,7 @@ export const BasicPersonalDetailsFields = ({ orientation = 'horizontal' }: Basic
                     />
                 )}
             />
-            <ValueView title="Current age" value={bornOnValid ? age : null} />
+            <ValueView title="Current age" value={!bornOnInvalid ? age : null} />
             <Controller
                 control={control}
                 name="personalDetails.currentSex"
@@ -103,14 +103,15 @@ export const BasicPersonalDetailsFields = ({ orientation = 'horizontal' }: Basic
                     name="personalDetails.deceasedOn"
                     shouldUnregister
                     rules={validDateRule(DECEASED_ON_LABEL)}
-                    render={({ field: { onChange, onBlur, value, name } }) => (
+                    render={({ field: { onChange, onBlur, value, name }, fieldState: { error } }) => (
                         <DatePickerInput
                             id={name}
                             label={DECEASED_ON_LABEL}
                             orientation={orientation}
                             value={value}
                             onChange={onChange}
                             onBlur={onBlur}
+                            error={error?.message}
                         />
                     )}
                 />
@@ -135,14 +136,15 @@ export const BasicPersonalDetailsFields = ({ orientation = 'horizontal' }: Basic
                 <Controller
                     control={control}
                     name="personalDetails.stateHIVCase"
-                    rules={maxLengthRule(20, STATE_HIV_CASE_LABEL)}
+                    rules={maxLengthRule(16, STATE_HIV_CASE_LABEL)}
                     render={({ field: { onChange, onBlur, value, name }, fieldState: { error } }) => (
                         <Input
                             label={STATE_HIV_CASE_LABEL}
                             orientation={orientation}
                             placeholder={ENTRY_FIELD_PLACEHOLDER}
                             onBlur={onBlur}
                             onChange={onChange}
+                            maxLength={16}
                             type="text"
                             defaultValue={value}
                             htmlFor={name}