@olaboot/esm-patient-registration-app 9.2.0

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

@@ -0,0 +1,205 @@
+import dayjs from 'dayjs';
+import { getConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../config-schema';
+import { getValidationSchema } from './patient-registration-validation';
+
+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 = {
+    additionalFamilyName: '',
+    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,
+        identifierValue: '123456789',
+      },
+      passportId: {
+        required: false,
+        identifierValue: '',
+      },
+    },
+  };
+
+  const validateFormValues = async (formValues) => {
+    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) {
+      return err;
+    }
+  };
+
+  it('should allow valid form values', async () => {
+    const validationError = await validateFormValues(validFormValues);
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should require givenName', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      givenName: '',
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('Given name is required');
+  });
+
+  it('should require familyName', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      familyName: '',
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('Family name is required');
+  });
+
+  it('should require additionalGivenName when addNameInLocalLanguage is true', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      addNameInLocalLanguage: true,
+      additionalGivenName: '',
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('Given name is required');
+  });
+
+  it('should require additionalFamilyName when addNameInLocalLanguage is true', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      addNameInLocalLanguage: true,
+      additionalFamilyName: '',
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('Family name is required');
+  });
+
+  it('should require gender', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      gender: '',
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('Gender unspecified');
+  });
+
+  it('should allow female as a valid gender', async () => {
+    const validFormValuesWithOtherGender = {
+      ...validFormValues,
+      gender: 'female',
+    };
+    const validationError = await validateFormValues(validFormValuesWithOtherGender);
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should allow other as a valid gender', async () => {
+    const validFormValuesWithOtherGender = {
+      ...validFormValues,
+      gender: 'other',
+    };
+    const validationError = await validateFormValues(validFormValuesWithOtherGender);
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should allow unknown as a valid gender', async () => {
+    const validFormValuesWithOtherGender = {
+      ...validFormValues,
+      gender: 'unknown',
+    };
+    const validationError = await validateFormValues(validFormValuesWithOtherGender);
+    expect(validationError).toBeFalsy();
+  });
+
+  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('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 () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      birthdateEstimated: true,
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('Estimated years required');
+  });
+
+  it('should throw an error when monthEstimated is negative', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      birthdateEstimated: true,
+      yearsEstimated: 0,
+      monthsEstimated: -1,
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    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 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('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/resource.ts

@@ -0,0 +1,12 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+const AddressHierarchyBaseURL = '/module/addresshierarchy/ajax/getPossibleAddressHierarchyEntriesWithParents.form';
+
+export function performAdressHierarchyWithParentSearch(addressField, parentid, query) {
+  return openmrsFetch(
+    `${AddressHierarchyBaseURL}?addressField=${addressField}&limit=20&searchString=${query}&parentUuid=${parentid}`,
+    {
+      method: 'GET',
+    },
+  );
+}

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

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import useSWRImmutable from 'swr/immutable';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Grid, Row } from '@carbon/react';
+import { ExtensionSlot, useConnectivity, useSession } from '@openmrs/esm-framework';
+import {
+  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';
+
+export default function Root() {
+  const isOnline = useConnectivity();
+  const currentSession = useSession();
+  const { data: addressTemplate } = useSWRImmutable('patientRegistrationAddressTemplate', fetchAddressTemplate);
+  const { data: relationshipTypes } = useSWRImmutable(
+    'patientRegistrationRelationshipTypes',
+    fetchAllRelationshipTypes,
+  );
+  const { data: identifierTypes } = useSWRImmutable(
+    'patientRegistrationPatientIdentifiers',
+    fetchPatientIdentifierTypesWithSources,
+  );
+  const savePatientForm = useMemo(
+    () => (isOnline ? FormManager.savePatientFormOnline : FormManager.savePatientFormOffline),
+    [isOnline],
+  );
+
+  return (
+    <main className={classNames('omrs-main-content', styles.root)}>
+      <Grid className={styles.grid}>
+        <Row>
+          <ExtensionSlot name="breadcrumbs-slot" />
+        </Row>
+        <ResourcesContextProvider
+          value={{
+            addressTemplate,
+            relationshipTypes,
+            identifierTypes,
+            currentSession,
+          }}>
+          <BrowserRouter basename={window.getOpenmrsSpaBase()}>
+            <Routes>
+              <Route
+                path="patient-registration"
+                element={<PatientRegistration savePatientForm={savePatientForm} isOffline={!isOnline} />}
+              />
+              <Route
+                path="patient/:patientUuid/edit"
+                element={<PatientRegistration savePatientForm={savePatientForm} isOffline={!isOnline} />}
+              />
+            </Routes>
+          </BrowserRouter>
+        </ResourcesContextProvider>
+      </Grid>
+    </main>
+  );
+}

package/src/root.scss

@@ -0,0 +1,7 @@
+.root {
+  background-color: white;
+}
+
+.grid {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}

package/src/routes.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": ">=2.2.0"
+  },
+  "pages": [
+    {
+      "component": "root",
+      "route": "patient-registration",
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "editPatient",
+      "routeRegex": "patient\\/([a-zA-Z0-9\\-]+)\\/edit",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "extensions": [
+    {
+      "component": "addPatientLink",
+      "name": "add-patient-action",
+      "slot": "top-nav-actions-slot",
+      "online": true,
+      "offline": true,
+      "order": 30
+    },
+    {
+      "component": "patientPhotoExtension",
+      "name": "patient-photo-widget",
+      "slot": "patient-photo-slot",
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "editPatientDetailsButton",
+      "name": "edit-patient-details-button",
+      "slot": "patient-actions-slot",
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "editPatientDetailsButton",
+      "name": "edit-patient-details-button",
+      "slot": "patient-search-actions-slot",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "modals": [
+    {
+      "name": "cancel-patient-edit-modal",
+      "component": "cancelPatientEditModal"
+    },
+    {
+      "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.test.tsx

@@ -0,0 +1,32 @@
+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';
+
+describe('DeleteIdentifierConfirmationModal', () => {
+  const mockDeleteIdentifier = jest.fn();
+  const closeModal = jest.fn();
+  const mockIdentifierName = 'Identifier Name';
+  const mockIdentifierValue = 'Identifier Value';
+
+  it('renders the modal and triggers deleteIdentifier function', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <DeleteIdentifierConfirmationModal
+        closeModal={closeModal}
+        deleteIdentifier={mockDeleteIdentifier}
+        identifierName={mockIdentifierName}
+        identifierValue={mockIdentifierValue}
+      />,
+    );
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await user.click(cancelButton);
+    expect(closeModal).toHaveBeenCalledTimes(1);
+
+    const removeButton = screen.getByRole('button', { name: /remove identifier/i });
+    await user.click(removeButton);
+    expect(mockDeleteIdentifier).toHaveBeenCalledWith(true);
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { navigate } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './edit-patient-details-button.scss';
+
+interface EditPatientDetailsButtonProps {
+  onTransition?: () => void;
+  patientUuid: string;
+}
+
+const EditPatientDetailsButton: React.FC<EditPatientDetailsButtonProps> = ({ patientUuid, onTransition }) => {
+  const { t } = useTranslation();
+  const handleClick = React.useCallback(() => {
+    navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/edit` });
+    onTransition?.();
+  }, [onTransition, patientUuid]);
+
+  return (
+    <li className="cds--overflow-menu-options__option">
+      <button
+        className="cds--overflow-menu-options__btn"
+        role="menuitem"
+        data-floating-menu-primary-focus
+        onClick={handleClick}>
+        <span className="cds--overflow-menu-options__option-content">
+          {t('editPatientDetails', 'Edit patient details')}
+        </span>
+      </button>
+    </li>
+  );
+};
+
+export default EditPatientDetailsButton;

package/src/widgets/edit-patient-details-button.scss

@@ -0,0 +1,3 @@
+.link {
+  text-decoration: none;
+}