@ampath/esm-patient-registration-app 6.0.1-pre.98 → 9.2.0-next.12

package/src/patient-registration/validation/{patient-registration-validation.test.tsx → patient-registration-validation.test.ts}

@@ -1,21 +1,48 @@
-import { defineConfigSchema, getConfig } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import { getConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../config-schema';
 import { getValidationSchema } from './patient-registration-validation';
-import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../config-schema';
-describe('Patient Registration Validation', () => {
-  beforeAll(() => {
-    defineConfigSchema('@openmrs/esm-patient-registration-app', esmPatientRegistrationSchema);
+
+const mockGetConfig = jest.mocked(getConfig);
+
+describe('Patient registration validation', () => {
+  beforeEach(() => {
+    mockGetConfig.mockResolvedValue({
+      fieldConfigurations: {
+        gender: [
+          {
+            label: 'M',
+            value: 'male',
+          },
+          {
+            label: 'F',
+            value: 'female',
+          },
+          {
+            label: 'O',
+            value: 'other',
+          },
+          {
+            label: 'U',
+            value: 'unknown',
+          },
+        ],
+      },
+    });
   });
 
   const validFormValues = {
-    givenName: 'John',
-    familyName: 'Doe',
-    additionalGivenName: '',
     additionalFamilyName: '',
-    gender: 'male',
+    additionalGivenName: '',
     birthdate: new Date('1990-01-01'),
     birthdateEstimated: false,
+    isDead: false,
+    causeOfDeath: null,
     deathDate: null,
     email: 'john.doe@example.com',
+    familyName: 'Doe',
+    gender: 'male',
+    givenName: 'John',
     identifiers: {
       nationalId: {
         required: true,
@@ -29,8 +56,10 @@ describe('Patient Registration Validation', () => {
   };
 
   const validateFormValues = async (formValues) => {
-    const config = (await getConfig('@openmrs/esm-patient-registration-app')) as any as RegistrationConfig;
-    const validationSchema = getValidationSchema(config);
+    const config = (await getConfig('@openmrs/esm-patient-registration-app')) as unknown as RegistrationConfig;
+    const mockT = (key: string, defaultValue: string) => defaultValue;
+
+    const validationSchema = getValidationSchema(config, mockT);
     try {
       await validationSchema.validate(formValues, { abortEarly: false });
     } catch (err) {
@@ -49,7 +78,7 @@ describe('Patient Registration Validation', () => {
       givenName: '',
     };
     const validationError = await validateFormValues(invalidFormValues);
-    expect(validationError.errors).toContain('givenNameRequired');
+    expect(validationError.errors).toContain('Given name is required');
   });
 
   it('should require familyName', async () => {
@@ -58,7 +87,7 @@ describe('Patient Registration Validation', () => {
       familyName: '',
     };
     const validationError = await validateFormValues(invalidFormValues);
-    expect(validationError.errors).toContain('familyNameRequired');
+    expect(validationError.errors).toContain('Family name is required');
   });
 
   it('should require additionalGivenName when addNameInLocalLanguage is true', async () => {
@@ -68,7 +97,7 @@ describe('Patient Registration Validation', () => {
       additionalGivenName: '',
     };
     const validationError = await validateFormValues(invalidFormValues);
-    expect(validationError.errors).toContain('givenNameRequired');
+    expect(validationError.errors).toContain('Given name is required');
   });
 
   it('should require additionalFamilyName when addNameInLocalLanguage is true', async () => {
@@ -78,7 +107,7 @@ describe('Patient Registration Validation', () => {
       additionalFamilyName: '',
     };
     const validationError = await validateFormValues(invalidFormValues);
-    expect(validationError.errors).toContain('familyNameRequired');
+    expect(validationError.errors).toContain('Family name is required');
   });
 
   it('should require gender', async () => {
@@ -87,7 +116,7 @@ describe('Patient Registration Validation', () => {
       gender: '',
     };
     const validationError = await validateFormValues(invalidFormValues);
-    expect(validationError.errors).toContain('genderUnspecified');
+    expect(validationError.errors).toContain('Gender unspecified');
   });
 
   it('should allow female as a valid gender', async () => {
@@ -117,13 +146,22 @@ describe('Patient Registration Validation', () => {
     expect(validationError).toBeFalsy();
   });
 
-  it('should throw error when date of birth is a future date', async () => {
+  it('should throw an error when date of birth is a future date', async () => {
     const invalidFormValues = {
       ...validFormValues,
       birthdate: new Date('2100-01-01'),
     };
     const validationError = await validateFormValues(invalidFormValues);
-    expect(validationError.errors).toContain('birthdayNotInTheFuture');
+    expect(validationError.errors).toContain('Birthday cannot be in future');
+  });
+
+  it('should throw an error when date of birth is more than 140 years ago', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      birthdate: dayjs().subtract(141, 'years').toDate(),
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('Birthday cannot be more than 140 years ago');
   });
 
   it('should require yearsEstimated when birthdateEstimated is true', async () => {
@@ -132,10 +170,10 @@ describe('Patient Registration Validation', () => {
       birthdateEstimated: true,
     };
     const validationError = await validateFormValues(invalidFormValues);
-    expect(validationError.errors).toContain('yearsEstimateRequired');
+    expect(validationError.errors).toContain('Estimated years required');
   });
 
-  it('should throw error when monthEstimated is negative', async () => {
+  it('should throw an error when monthEstimated is negative', async () => {
     const invalidFormValues = {
       ...validFormValues,
       birthdateEstimated: true,
@@ -143,15 +181,25 @@ describe('Patient Registration Validation', () => {
       monthsEstimated: -1,
     };
     const validationError = await validateFormValues(invalidFormValues);
-    expect(validationError.errors).toContain('negativeMonths');
+    expect(validationError.errors).toContain('Estimated months cannot be negative');
+  });
+
+  it('should throw an error when yearsEstimated is more than 140', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      birthdateEstimated: true,
+      yearsEstimated: 141,
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('Estimated years cannot be more than 140');
   });
 
-  it('should throw error when deathDate is in future', async () => {
+  it('should throw an error when deathDate is in future', async () => {
     const invalidFormValues = {
       ...validFormValues,
       deathDate: new Date('2100-01-01'),
     };
     const validationError = await validateFormValues(invalidFormValues);
-    expect(validationError.errors).toContain('deathdayNotInTheFuture');
+    expect(validationError.errors).toContain('Death date cannot be in future');
   });
 });

package/src/patient-registration/validation/patient-registration-validation.ts

@@ -0,0 +1,123 @@
+import dayjs from 'dayjs';
+import * as Yup from 'yup';
+import mapValues from 'lodash/mapValues';
+import { type RegistrationConfig } from '../../config-schema';
+import { type FormValues } from '../patient-registration.types';
+import { getDatetime } from '../patient-registration.resource';
+
+export function getValidationSchema(config: RegistrationConfig, t: (key: string, defaultValue: string) => string) {
+  return Yup.object({
+    givenName: Yup.string().required(t('givenNameRequired', 'Given name is required')),
+    familyName: Yup.string().required(t('familyNameRequired', 'Family name is required')),
+    additionalGivenName: Yup.string().when('addNameInLocalLanguage', {
+      is: true,
+      then: Yup.string().required(t('givenNameRequired', 'Given name is required')),
+      otherwise: Yup.string().notRequired(),
+    }),
+    additionalFamilyName: Yup.string().when('addNameInLocalLanguage', {
+      is: true,
+      then: Yup.string().required(t('familyNameRequired', 'Family name is required')),
+      otherwise: Yup.string().notRequired(),
+    }),
+    gender: Yup.string()
+      .oneOf(
+        config.fieldConfigurations.gender.map((g) => g.value),
+        t('genderUnspecified', 'Gender unspecified'),
+      )
+      .required(t('genderRequired', 'Gender is required')),
+    birthdate: Yup.date().when('birthdateEstimated', {
+      is: false,
+      then: Yup.date()
+        .required(t('birthdayRequired', 'Birthday is required'))
+        .max(Date(), t('birthdayNotInTheFuture', 'Birthday cannot be in future'))
+        .min(
+          dayjs().subtract(140, 'years').toDate(),
+          t('birthdayNotOver140YearsAgo', 'Birthday cannot be more than 140 years ago'),
+        )
+        .nullable(),
+      otherwise: Yup.date().nullable(),
+    }),
+    yearsEstimated: Yup.number().when('birthdateEstimated', {
+      is: true,
+      then: Yup.number()
+        .required(t('yearsEstimateRequired', 'Estimated years required'))
+        .min(0, t('negativeYears', 'Estimated years cannot be negative'))
+        .max(140, t('nonsensicalYears', 'Estimated years cannot be more than 140')),
+      otherwise: Yup.number().nullable(),
+    }),
+    monthsEstimated: Yup.number().min(0, t('negativeMonths', 'Estimated months cannot be negative')),
+    isDead: Yup.boolean(),
+    deathDate: Yup.date()
+      .when('isDead', {
+        is: true,
+        then: Yup.date().required(t('deathDateRequired', 'Death date is required')),
+        otherwise: Yup.date().nullable(),
+      })
+      .max(new Date(), t('deathDateInFuture', 'Death date cannot be in future'))
+      .test(
+        'deathDate-after-birthdate',
+        t('deathdayInvalidDate', 'Death date and time cannot be before the birthday'),
+        function (value) {
+          const { birthdate } = this.parent;
+          if (birthdate && value) {
+            return dayjs(value).isAfter(birthdate);
+          }
+          return true;
+        },
+      )
+      .test('deathDate-before-today', t('deathDateInFuture', 'Death date cannot be in future'), function (value) {
+        const { deathTime, deathTimeFormat } = this.parent;
+        if (value && deathTime && deathTimeFormat && /^(1[0-2]|0?[1-9]):([0-5]?[0-9])$/.test(deathTime)) {
+          return dayjs(getDatetime(value, deathTime, deathTimeFormat)).isBefore(dayjs());
+        }
+        return true;
+      }),
+    deathTime: Yup.string()
+      .when('isDead', {
+        is: true,
+        then: Yup.string().required(t('deathTimeRequired', 'Death time is required')),
+        otherwise: Yup.string().nullable(),
+      })
+      .matches(/^(1[0-2]|0?[1-9]):([0-5]?[0-9])$/, t('deathTimeInvalid', "Time doesn't match the format 'hh:mm'")),
+
+    deathTimeFormat: Yup.string()
+      .when('isDead', {
+        is: true,
+        then: Yup.string().required(t('deathTimeFormatRequired', 'Time format is required')),
+        otherwise: Yup.string().nullable(),
+      })
+      .oneOf(['AM', 'PM'], t('deathTimeFormatInvalid', 'Time format is invalid')),
+
+    deathCause: Yup.string().when('isDead', {
+      is: true,
+      then: Yup.string().required(t('deathCauseRequired', 'Cause of death is required')),
+      otherwise: Yup.string().nullable(),
+    }),
+    nonCodedCauseOfDeath: Yup.string().when(['isDead', 'deathCause'], {
+      is: (isDead, deathCause) => isDead && deathCause === config.freeTextFieldConceptUuid,
+      then: Yup.string().required(t('nonCodedCauseOfDeathRequired', 'Cause of death is required')),
+      otherwise: Yup.string().nullable(),
+    }),
+    email: Yup.string().optional().email(t('invalidEmail', 'Invalid email')),
+    identifiers: Yup.lazy((obj: FormValues['identifiers']) =>
+      Yup.object(
+        mapValues(obj, () =>
+          Yup.object({
+            required: Yup.bool(),
+            identifierValue: Yup.string().when('required', {
+              is: true,
+              then: Yup.string().required(t('identifierValueRequired', 'Identifier value is required')),
+              otherwise: Yup.string().notRequired(),
+            }),
+          }),
+        ),
+      ),
+    ),
+    relationships: Yup.array().of(
+      Yup.object().shape({
+        relatedPersonUuid: Yup.string().required(),
+        relationshipType: Yup.string().required(),
+      }),
+    ),
+  });
+}

package/src/resources-context.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import { type Resources } from './offline.resources';
+
+export const ResourcesContext = createContext<Resources>(null);
+
+export const ResourcesContextProvider = ResourcesContext.Provider;
+
+export const useResourcesContext = () => {
+  const context = useContext(ResourcesContext);
+  if (!context) {
+    throw new Error('useResourcesContext must be used within a ResourcesContextProvider');
+  }
+  return context;
+};

package/src/root.component.tsx

@@ -5,11 +5,11 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Grid, Row } from '@carbon/react';
 import { ExtensionSlot, useConnectivity, useSession } from '@openmrs/esm-framework';
 import {
-  ResourcesContext,
   fetchAddressTemplate,
   fetchAllRelationshipTypes,
   fetchPatientIdentifierTypesWithSources,
 } from './offline.resources';
+import { ResourcesContextProvider } from './resources-context';
 import { FormManager } from './patient-registration/form-manager';
 import { PatientRegistration } from './patient-registration/patient-registration.component';
 import styles from './root.scss';
@@ -37,7 +37,7 @@ export default function Root() {
         <Row>
           <ExtensionSlot name="breadcrumbs-slot" />
         </Row>
-        <ResourcesContext.Provider
+        <ResourcesContextProvider
           value={{
             addressTemplate,
             relationshipTypes,
@@ -56,7 +56,7 @@ export default function Root() {
               />
             </Routes>
           </BrowserRouter>
-        </ResourcesContext.Provider>
+        </ResourcesContextProvider>
       </Grid>
     </main>
   );

package/src/routes.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
-    "webservices.rest": "^2.24.0"
+    "webservices.rest": ">=2.2.0"
   },
   "pages": [
     {
@@ -23,13 +23,8 @@
       "name": "add-patient-action",
       "slot": "top-nav-actions-slot",
       "online": true,
-      "offline": true
-    },
-    {
-      "component": "cancelPatientEditModal",
-      "name": "cancel-patient-edit-modal",
-      "online": true,
-      "offline": true
+      "offline": true,
+      "order": 30
     },
     {
       "component": "patientPhotoExtension",
@@ -51,25 +46,16 @@
       "slot": "patient-search-actions-slot",
       "online": true,
       "offline": true
-    },
-    {
-      "component": "deleteIdentifierConfirmationModal",
-      "name": "delete-identifier-confirmation-modal",
-      "online": true,
-      "offline": true
-    },
+    }
+  ],
+  "modals": [
     {
-      "component": "emptyClientRegistryModal",
-      "name": "empty-client-registry-modal",
-      "online": true,
-      "offline": true
+      "name": "cancel-patient-edit-modal",
+      "component": "cancelPatientEditModal"
     },
     {
-      "component": "confirmClientRegistryModal",
-      "name": "confirm-client-registry-modal",
-      "online": true,
-      "offline": true
+      "name": "delete-identifier-confirmation-modal",
+      "component": "deleteIdentifierConfirmationModal"
     }
   ]
 }
-    

package/src/widgets/cancel-patient-edit.modal.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+
+interface CancelPatientEditPropsModal {
+  close(): void;
+  onConfirm(): void;
+}
+
+const CancelPatientEditModal: React.FC<CancelPatientEditPropsModal> = ({ close, onConfirm }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <ModalHeader
+        closeModal={close}
+        title={t('confirmDiscardChangesTitle', 'Are you sure you want to discard these changes?')}
+      />
+      <ModalBody>
+        <p>{t('confirmDiscardChangesBody', 'Your unsaved changes will be lost if you proceed to discard the form')}.</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={onConfirm}>
+          {t('discard', 'Discard')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default CancelPatientEditModal;

package/src/widgets/cancel-patient-edit.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
+import CancelPatientEdit from './cancel-patient-edit.modal';
+
+describe('CancelPatientEdit modal', () => {
+  const mockClose = jest.fn();
+  const mockOnConfirm = jest.fn();
+
+  it('renders the modal and triggers close and onConfirm functions', async () => {
+    const user = userEvent.setup();
+    render(<CancelPatientEdit close={mockClose} onConfirm={mockOnConfirm} />);
+
+    const cancelButton = screen.getByRole('button', { name: /Cancel/i });
+    await user.click(cancelButton);
+    expect(mockClose).toHaveBeenCalledTimes(1);
+
+    const discardButton = screen.getByRole('button', { name: /discard/i });
+    await user.click(discardButton);
+    expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+  });
+});

package/src/widgets/delete-identifier-confirmation.modal.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalHeader, ModalFooter } from '@carbon/react';
+
+interface DeleteIdentifierConfirmationModalProps {
+  closeModal: () => void;
+  deleteIdentifier: (x: boolean) => void;
+  identifierName: string;
+  identifierValue: string;
+}
+
+const DeleteIdentifierConfirmationModal: React.FC<DeleteIdentifierConfirmationModalProps> = ({
+  closeModal,
+  deleteIdentifier,
+  identifierName,
+  identifierValue,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <ModalHeader
+        closeModal={closeModal}
+        title={t('deleteIdentifierModalHeading', 'Delete identifier?')}></ModalHeader>
+      <ModalBody>
+        <p>
+          {identifierName && identifierValue && (
+            <span>
+              <strong>{identifierName}</strong>
+              {t('deleteIdentifierModalText', ' has a value of ')} <strong>{identifierValue}</strong>.{' '}
+            </span>
+          )}
+          {t('confirmIdentifierDeletionText', 'Are you sure you want to delete this identifier?')}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" size="lg" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" size="lg" onClick={() => deleteIdentifier(true)}>
+          {t('removeIdentifierButton', 'Remove identifier')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeleteIdentifierConfirmationModal;

package/src/widgets/{delete-identifier-confirmation-modal.testt.tsx → delete-identifier-confirmation.test.tsx}

@@ -1,22 +1,20 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import DeleteIdentifierConfirmationModal from './delete-identifier-confirmation-modal';
+import DeleteIdentifierConfirmationModal from './delete-identifier-confirmation.modal';
 
-describe('DeleteIdentifierConfirmationModal component', () => {
+describe('DeleteIdentifierConfirmationModal', () => {
   const mockDeleteIdentifier = jest.fn();
+  const closeModal = jest.fn();
   const mockIdentifierName = 'Identifier Name';
   const mockIdentifierValue = 'Identifier Value';
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('renders the modal and triggers deleteIdentifier function', async () => {
     const user = userEvent.setup();
 
     render(
       <DeleteIdentifierConfirmationModal
+        closeModal={closeModal}
         deleteIdentifier={mockDeleteIdentifier}
         identifierName={mockIdentifierName}
         identifierValue={mockIdentifierValue}
@@ -25,7 +23,7 @@ describe('DeleteIdentifierConfirmationModal component', () => {
 
     const cancelButton = screen.getByRole('button', { name: /cancel/i });
     await user.click(cancelButton);
-    expect(mockDeleteIdentifier).toHaveBeenCalledWith(false);
+    expect(closeModal).toHaveBeenCalledTimes(1);
 
     const removeButton = screen.getByRole('button', { name: /remove identifier/i });
     await user.click(removeButton);

package/src/widgets/edit-patient-details-button.component.tsx

@@ -20,7 +20,6 @@ const EditPatientDetailsButton: React.FC<EditPatientDetailsButtonProps> = ({ pat
       <button
         className="cds--overflow-menu-options__btn"
         role="menuitem"
-        title={t('editPatientDetails', 'Edit patient details')}
         data-floating-menu-primary-focus
         onClick={handleClick}>
         <span className="cds--overflow-menu-options__option-content">

package/src/widgets/edit-patient-details-button.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { navigate } from '@openmrs/esm-framework';
+import { mockPatient } from '__mocks__';
+import EditPatientDetailsButton from './edit-patient-details-button.component';
+
+const mockNavigate = jest.mocked(navigate);
+
+describe('EditPatientDetailsButton', () => {
+  const patientUuid = mockPatient.uuid;
+
+  it('should navigate to the edit page when clicked', async () => {
+    const user = userEvent.setup();
+
+    render(<EditPatientDetailsButton patientUuid={patientUuid} />);
+
+    const button = screen.getByRole('menuitem');
+    await user.click(button);
+
+    expect(mockNavigate).toHaveBeenCalledWith({ to: expect.stringContaining(`/patient/${patientUuid}/edit`) });
+  });
+
+  it('should call the onTransition function when provided', async () => {
+    const user = userEvent.setup();
+
+    const onTransitionMock = jest.fn();
+    render(<EditPatientDetailsButton patientUuid={patientUuid} onTransition={onTransitionMock} />);
+
+    const button = screen.getByRole('menuitem');
+    await user.click(button);
+
+    expect(onTransitionMock).toHaveBeenCalled();
+  });
+});