@ampath/esm-patient-registration-app 6.0.1-pre.6

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

@@ -0,0 +1,157 @@
+import { defineConfigSchema, getConfig } from '@openmrs/esm-framework';
+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 validFormValues = {
+    givenName: 'John',
+    familyName: 'Doe',
+    additionalGivenName: '',
+    additionalFamilyName: '',
+    gender: 'male',
+    birthdate: new Date('1990-01-01'),
+    birthdateEstimated: false,
+    deathDate: null,
+    email: 'john.doe@example.com',
+    identifiers: {
+      nationalId: {
+        required: true,
+        identifierValue: '123456789',
+      },
+      passportId: {
+        required: false,
+        identifierValue: '',
+      },
+    },
+  };
+
+  const validateFormValues = async (formValues) => {
+    const config = (await getConfig('@openmrs/esm-patient-registration-app')) as any as RegistrationConfig;
+    const validationSchema = getValidationSchema(config);
+    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('givenNameRequired');
+  });
+
+  it('should require familyName', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      familyName: '',
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('familyNameRequired');
+  });
+
+  it('should require additionalGivenName when addNameInLocalLanguage is true', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      addNameInLocalLanguage: true,
+      additionalGivenName: '',
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('givenNameRequired');
+  });
+
+  it('should require additionalFamilyName when addNameInLocalLanguage is true', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      addNameInLocalLanguage: true,
+      additionalFamilyName: '',
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('familyNameRequired');
+  });
+
+  it('should require gender', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      gender: '',
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('genderUnspecified');
+  });
+
+  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 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');
+  });
+
+  it('should require yearsEstimated when birthdateEstimated is true', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      birthdateEstimated: true,
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('yearsEstimateRequired');
+  });
+
+  it('should throw error when monthEstimated is negative', async () => {
+    const invalidFormValues = {
+      ...validFormValues,
+      birthdateEstimated: true,
+      yearsEstimated: 0,
+      monthsEstimated: -1,
+    };
+    const validationError = await validateFormValues(invalidFormValues);
+    expect(validationError.errors).toContain('negativeMonths');
+  });
+
+  it('should throw 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');
+  });
+});

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

@@ -0,0 +1,60 @@
+import * as Yup from 'yup';
+import mapValues from 'lodash/mapValues';
+import { type FormValues } from '../patient-registration.types';
+import { type RegistrationConfig } from '../../config-schema';
+
+export function getValidationSchema(config: RegistrationConfig) {
+  return Yup.object({
+    givenName: Yup.string().required('givenNameRequired'),
+    familyName: Yup.string().required('familyNameRequired'),
+    additionalGivenName: Yup.string().when('addNameInLocalLanguage', {
+      is: true,
+      then: Yup.string().required('givenNameRequired'),
+      otherwise: Yup.string().notRequired(),
+    }),
+    additionalFamilyName: Yup.string().when('addNameInLocalLanguage', {
+      is: true,
+      then: Yup.string().required('familyNameRequired'),
+      otherwise: Yup.string().notRequired(),
+    }),
+    gender: Yup.string()
+      .oneOf(
+        config.fieldConfigurations.gender.map((g) => g.value),
+        'genderUnspecified',
+      )
+      .required('genderRequired'),
+    birthdate: Yup.date().when('birthdateEstimated', {
+      is: false,
+      then: Yup.date().required('birthdayRequired').max(Date(), 'birthdayNotInTheFuture').nullable(),
+      otherwise: Yup.date().nullable(),
+    }),
+    yearsEstimated: Yup.number().when('birthdateEstimated', {
+      is: true,
+      then: Yup.number().required('yearsEstimateRequired').min(0, 'negativeYears'),
+      otherwise: Yup.number().nullable(),
+    }),
+    monthsEstimated: Yup.number().min(0, 'negativeMonths'),
+    deathDate: Yup.date().max(Date(), 'deathdayNotInTheFuture').nullable(),
+    email: Yup.string().optional().email('invalidEmail'),
+    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('identifierValueRequired'),
+              otherwise: Yup.string().notRequired(),
+            }),
+          }),
+        ),
+      ),
+    ),
+    relationships: Yup.array().of(
+      Yup.object().shape({
+        relatedPersonUuid: Yup.string().required(),
+        relationshipType: Yup.string().required(),
+      }),
+    ),
+  });
+}

package/src/patient-verification/client-registry-constants.ts

@@ -0,0 +1,13 @@
+export const countries = [
+  { text: 'Kenya', id: 'KE' },
+  { text: 'Uganda', id: 'UG' },
+  { text: 'Tanzania', id: 'TZ' },
+];
+
+export const identifierTypes = [
+  { text: 'National ID number', id: '58a47054-1359-11df-a1f1-0026b9348838' },
+  { text: 'Passport number', id: 'ced014a1-068a-4a13-b6b3-17412f754af2' },
+  { text: 'Birth Certificate Entry Number', id: '7924e13b-131a-4da8-8efa-e294184a1b0d' },
+];
+
+export const defaultSelectedCountry = 'KE';

package/src/patient-verification/client-registry.component.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { type FormValues } from '../patient-registration/patient-registration.types';
+import {} from '@carbon/react';
+import { Dropdown, TextInput, Button, InlineLoading } from '@carbon/react';
+import styles from './client-registry.scss';
+import { useTranslation } from 'react-i18next';
+import { useClientRegistryForm } from './utils';
+import { countries, identifierTypes } from './client-registry-constants';
+
+type ClientRegistryProps = {
+  setInitialFormValues: (initialValues) => void;
+  initialFormValues: FormValues;
+};
+
+export const ClientRegistry: React.FC<ClientRegistryProps> = ({ setInitialFormValues, initialFormValues }) => {
+  const { t } = useTranslation();
+  const { handleClientRegistryDataSubmit, handleOnChange, clientRegistryData } = useClientRegistryForm(
+    setInitialFormValues,
+    initialFormValues,
+  );
+  return (
+    <div className={styles.patientVerification}>
+      <h3 className={styles.productiveHeading02} style={{ color: '#161616' }}>
+        {t('patientVerification', 'Patient Verification')}
+      </h3>
+      <Dropdown
+        id="default"
+        titleText="Country"
+        label="Select country"
+        items={countries}
+        onChange={({ selectedItem }) => handleOnChange(selectedItem?.id, 'country')}
+        initialSelectedItem={countries[0]}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+      <Dropdown
+        id="default"
+        titleText="Verification ID Type"
+        label="Select verification ID Type"
+        items={identifierTypes}
+        onChange={({ selectedItem }) => handleOnChange(selectedItem?.id, 'identifierType')}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+      <TextInput
+        disabled={clientRegistryData.identifierType === ''}
+        onChange={(e) => handleOnChange(e.target.value, 'patientIdentifier')}
+        id="patientIdentifier"
+        type="text"
+        labelText="Patient identifier"
+        placeholder="Enter patient identifier"
+      />
+      {clientRegistryData.isSubmitting ? (
+        <InlineLoading
+          description={`${t('searchRegistry', 'Searching registry')} ...`}
+          iconDescription="searching registry ..."
+          status="active"
+        />
+      ) : (
+        <Button
+          disabled={clientRegistryData.isSubmitting || clientRegistryData.patientIdentifier === ''}
+          onClick={() => handleClientRegistryDataSubmit()}>
+          {t('searchRegistry', 'Search Registry')}
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/patient-verification/client-registry.scss

@@ -0,0 +1 @@
+@import '../patient-registration/patient-registration.scss';

package/src/patient-verification/utils.tsx

@@ -0,0 +1,56 @@
+import { showModal } from '@openmrs/esm-framework';
+import { useState } from 'react';
+import { fetchPatientRecordFromClientRegistry } from '../patient-registration/patient-registration.resource';
+import { defaultSelectedCountry } from './client-registry-constants';
+
+export const handleSetFormValueFromClientRegistry = (clientData, setInitialFormValues, initialFormValues) => {
+  setInitialFormValues({
+    ...initialFormValues,
+    familyName: clientData.lastName,
+    givenName: clientData.firstName,
+    middleName: clientData.middleName,
+    gender: clientData.gender,
+    birthdate: clientData.dateOfBirth,
+    address: {
+      address2: clientData.subCounty,
+    },
+  });
+};
+
+export const useClientRegistryForm = (setInitialFormValues, initialFormValues) => {
+  const [clientRegistryData, setClientRegistryData] = useState<{
+    country: string;
+    identifierType: string;
+    patientIdentifier: string;
+    isSubmitting: boolean;
+  }>({ country: defaultSelectedCountry, identifierType: '', patientIdentifier: '', isSubmitting: false });
+
+  const handleOnChange = (data, key: 'country' | 'identifierType' | 'patientIdentifier') => {
+    setClientRegistryData({ ...clientRegistryData, [key]: data });
+  };
+
+  const handleClientRegistryDataSubmit = () => {
+    setClientRegistryData({ ...clientRegistryData, isSubmitting: true });
+    fetchPatientRecordFromClientRegistry(
+      clientRegistryData.patientIdentifier,
+      clientRegistryData.identifierType,
+      clientRegistryData.country,
+    ).then((res) => {
+      setClientRegistryData({ ...clientRegistryData, isSubmitting: false });
+      if (res.clientExists) {
+        const clientData = res.client;
+        const closeModal = showModal('client-registry-modal', {
+          clientData,
+          closeModal: () => {
+            closeModal();
+            handleSetFormValueFromClientRegistry(clientData, setInitialFormValues, initialFormValues);
+          },
+        });
+      } else {
+        const clientData = res.client;
+      }
+    });
+  };
+
+  return { handleClientRegistryDataSubmit, handleOnChange, clientRegistryData };
+};

package/src/patient-verification/verification-modal.scss

@@ -0,0 +1,20 @@
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.cardContainer {
+  display: grid;
+  grid-template-columns: 0.5fr 1fr;
+  column-gap: 0.25rem;
+  margin: 0.5rem 0;
+}
+
+.label {
+  @include type.type-style('body-compact-02');
+  color: colors.$cool-gray-100;
+  font-weight: bold;
+}
+
+.value {
+  @include type.type-style('legal-01');
+  color: colors.$cool-gray-80;
+}

package/src/patient-verification/verification.component.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './verification-modal.scss';
+
+type VerificationModalProps = { clientData; closeModal };
+
+const VerificationModal: React.FC<VerificationModalProps> = ({ clientData, closeModal }) => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={t('clientRegistry', 'Client registry')} />
+      <ModalBody>
+        <p>{t('clientRegistry', 'Client registry')}</p>
+        <Card label="Name" value={`${clientData.firstName} ${clientData.middleName} ${clientData.lastName}`} />
+        <Card
+          label="Identification Type"
+          value={clientData.identifications.map((id) => id.identificationType).join(' ')}
+        />
+        <Card
+          label="Identication Number"
+          value={clientData.identifications.map((id) => id.identificationNumber).join(' ')}
+        />
+        <Card label="Date of Birth" value={clientData.dateOfBirth} />
+        <Card label={t('gender', 'Gender')} value={clientData.gender} />
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={() => {}}>
+          {t('contactSupport', 'Contact supportt')}
+        </Button>
+        <Button kind="danger" onClick={closeModal}>
+          {t('continue', 'Continue')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default VerificationModal;
+
+export const Card: React.FC<{ label: string; value: string }> = ({ label, value }) => {
+  return (
+    <div className={styles.cardContainer}>
+      <span>{label}</span>
+      <span>{value}</span>
+    </div>
+  );
+};

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/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 {
+  ResourcesContext,
+  fetchAddressTemplate,
+  fetchAllRelationshipTypes,
+  fetchPatientIdentifierTypesWithSources,
+} from './offline.resources';
+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>
+        <ResourcesContext.Provider
+          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>
+        </ResourcesContext.Provider>
+      </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/root.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Root from './root.component';
+
+window['getOpenmrsSpaBase'] = jest.fn().mockImplementation(() => '/');
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    validator: jest.fn(),
+  };
+});
+
+describe('root component', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    const root = createRoot(div);
+
+    root.render(
+      <Root
+        savePatientForm={jest.fn()}
+        addressTemplate={{ results: [] }}
+        currentSession={{} as any}
+        relationshipTypes={{ results: [] }}
+        identifierTypes={[]}
+        isOffline={false}
+      />,
+    );
+  });
+});

package/src/routes.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.24.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
+    },
+    {
+      "component": "cancelPatientEditModal",
+      "name": "cancel-patient-edit-modal",
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "patientPhoto",
+      "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
+    },
+    {
+      "component": "deleteIdentifierConfirmationModal",
+      "name": "delete-identifier-confirmation-modal",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "client-registry-modal",
+      "component": "clientRegistryModal"
+    }
+  ]
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+interface CancelPatientEditProps {
+  close(): void;
+  onConfirm(): void;
+}
+
+const CancelPatientEdit: React.FC<CancelPatientEditProps> = ({ close, onConfirm }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{t('discardModalHeader', 'Confirm Discard Changes')}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>
+          {t(
+            'discardModalBody',
+            "The changes you made to this patient's details have not been saved. Discard changes?",
+          )}
+        </p>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={onConfirm}>
+          {t('discard', 'Discard')}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default CancelPatientEdit;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
+import CancelPatientEdit from './cancel-patient-edit.component';
+
+describe('CancelPatientEdit component', () => {
+  const mockClose = jest.fn();
+  const mockOnConfirm = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  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);
+  });
+});