@kenyaemr/esm-patient-registration-app 4.5.4 → 4.5.5

package/src/patient-registration/{patient-registration-types.tsx → patient-registration.types.tsx}

@@ -265,6 +265,51 @@ export interface ConceptAnswers {
   display: string;
   uuid: string;
 }
+
+export type AddressProperties =
+  | 'cityVillage'
+  | 'stateProvince'
+  | 'countyDistrict'
+  | 'postalCode'
+  | 'country'
+  | 'address1'
+  | 'address2'
+  | 'address3'
+  | 'address4'
+  | 'address5'
+  | 'address6'
+  | 'address7'
+  | 'address8'
+  | 'address9'
+  | 'address10'
+  | 'address11'
+  | 'address12'
+  | 'address13'
+  | 'address14'
+  | 'address15';
+
+export type ExtensibleAddressProperties = { [p in AddressProperties]?: string } | null;
+
+export interface AddressTemplate {
+  displayName: string | null;
+  codeName: string | null;
+  country: string | null;
+  lines: Array<
+    Array<{
+      isToken: 'IS_NOT_ADDR_TOKEN' | 'IS_ADDR_TOKEN';
+      displayText: string;
+      codeName?: AddressProperties;
+      displaySize?: string;
+    }>
+  > | null;
+  lineByLineFormat: Array<string> | null;
+  nameMappings: ExtensibleAddressProperties;
+  sizeMappings: ExtensibleAddressProperties;
+  elementDefaults: ExtensibleAddressProperties;
+  elementRegex: ExtensibleAddressProperties;
+  elementRegexFormats: ExtensibleAddressProperties;
+  requiredElements: Array<AddressProperties> | null;
+}
 export interface ObsResponse {
   results: Array<{ obs: Array<{ uuid: string; display: string; value: OpenmrsResource; concept: OpenmrsResource }> }>;
 }

package/src/patient-registration/section/patient-relationships/relationships-section.component.tsx

@@ -15,7 +15,7 @@ import { Autosuggest } from '../../input/custom-input/autosuggest/autosuggest.co
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { ResourcesContext } from '../../../offline.resources';
 import { fetchPerson } from '../../patient-registration.resource';
-import { RelationshipValue } from '../../patient-registration-types';
+import { RelationshipValue } from '../../patient-registration.types';
 import sectionStyles from '../section.scss';
 import styles from './relationships.scss';
 
@@ -25,82 +25,6 @@ interface RelationshipType {
   direction: string;
 }
 
-export const RelationshipsSection = () => {
-  const { relationshipTypes } = useContext(ResourcesContext);
-  const [displayRelationshipTypes, setDisplayRelationshipTypes] = useState<RelationshipType[]>([]);
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    if (relationshipTypes) {
-      const tmp: RelationshipType[] = [];
-      relationshipTypes.results.forEach((type) => {
-        const aIsToB = {
-          display: type.aIsToB,
-          uuid: type.uuid,
-          direction: 'aIsToB',
-        };
-        const bIsToA = {
-          display: type.bIsToA,
-          uuid: type.uuid,
-          direction: 'bIsToA',
-        };
-        aIsToB.display === bIsToA.display ? tmp.push(aIsToB) : tmp.push(aIsToB, bIsToA);
-      });
-      setDisplayRelationshipTypes(tmp);
-    }
-  }, [relationshipTypes]);
-
-  if (!relationshipTypes) {
-    return (
-      <section aria-label="Relationships Section">
-        <SkeletonText />
-      </section>
-    );
-  }
-
-  return (
-    <section aria-label="Relationships Section">
-      <FieldArray name="relationships">
-        {({
-          push,
-          remove,
-          form: {
-            values: { relationships },
-          },
-        }) => (
-          <div>
-            {relationships && relationships.length > 0
-              ? relationships.map((relationship: RelationshipValue, index) => (
-                  <div key={index} className={sectionStyles.formSection}>
-                    <RelationshipView
-                      relationship={relationship}
-                      index={index}
-                      displayRelationshipTypes={displayRelationshipTypes}
-                      key={index}
-                      remove={remove}
-                    />
-                  </div>
-                ))
-              : null}
-            <div className={styles.actions}>
-              <Button
-                kind="ghost"
-                onClick={() =>
-                  push({
-                    relatedPersonUuid: '',
-                    action: 'ADD',
-                  })
-                }>
-                {t('addRelationshipButtonText', 'Add Relationship')}
-              </Button>
-            </div>
-          </div>
-        )}
-      </FieldArray>
-    </section>
-  );
-};
-
 interface RelationshipViewProps {
   relationship: RelationshipValue;
   index: number;
@@ -205,8 +129,12 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
               value="placeholder-item"
               text={t('relationshipToPatient', 'Relationship to patient')}
             />
-            {displayRelationshipTypes.map((type) => (
-              <SelectItem text={type.display} value={`${type.uuid}/${type.direction}`} key={type.display} />
+            {displayRelationshipTypes.map((relationshipType, index) => (
+              <SelectItem
+                text={relationshipType.display}
+                value={`${relationshipType.uuid}/${relationshipType.direction}`}
+                key={`relationship-${relationshipType.uuid}-${index}`}
+              />
             ))}
           </Select>
         </Layer>
@@ -224,3 +152,79 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
     />
   );
 };
+
+export const RelationshipsSection = () => {
+  const { relationshipTypes } = useContext(ResourcesContext);
+  const [displayRelationshipTypes, setDisplayRelationshipTypes] = useState<RelationshipType[]>([]);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (relationshipTypes) {
+      const tmp: RelationshipType[] = [];
+      relationshipTypes.results.forEach((type) => {
+        const aIsToB = {
+          display: type.aIsToB,
+          uuid: type.uuid,
+          direction: 'aIsToB',
+        };
+        const bIsToA = {
+          display: type.bIsToA,
+          uuid: type.uuid,
+          direction: 'bIsToA',
+        };
+        aIsToB.display === bIsToA.display ? tmp.push(aIsToB) : tmp.push(aIsToB, bIsToA);
+      });
+      setDisplayRelationshipTypes(tmp);
+    }
+  }, [relationshipTypes]);
+
+  if (!relationshipTypes) {
+    return (
+      <section aria-label="Loading relationships section">
+        <SkeletonText role="progressbar" />
+      </section>
+    );
+  }
+
+  return (
+    <section aria-label="Relationships section">
+      <FieldArray name="relationships">
+        {({
+          push,
+          remove,
+          form: {
+            values: { relationships },
+          },
+        }) => (
+          <div>
+            {relationships && relationships.length > 0
+              ? relationships.map((relationship: RelationshipValue, index) => (
+                  <div key={index} className={sectionStyles.formSection}>
+                    <RelationshipView
+                      relationship={relationship}
+                      index={index}
+                      displayRelationshipTypes={displayRelationshipTypes}
+                      key={index}
+                      remove={remove}
+                    />
+                  </div>
+                ))
+              : null}
+            <div className={styles.actions}>
+              <Button
+                kind="ghost"
+                onClick={() =>
+                  push({
+                    relatedPersonUuid: '',
+                    action: 'ADD',
+                  })
+                }>
+                {t('addRelationshipButtonText', 'Add Relationship')}
+              </Button>
+            </div>
+          </div>
+        )}
+      </FieldArray>
+    </section>
+  );
+};

package/src/patient-registration/section/patient-relationships/relationships-section.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { render, screen } from '@testing-library/react';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { Resources, ResourcesContext } from '../../../offline.resources';
+import { RelationshipsSection } from './relationships-section.component';
+
+jest.mock('../../patient-registration.resource', () => ({
+  fetchPerson: jest.fn().mockResolvedValue({
+    data: {
+      results: [
+        { uuid: '42ae5ce0-d64b-11ea-9064-5adc43bbdd24', display: 'Person 1' },
+        { uuid: '691eed12-c0f1-11e2-94be-8c13b969e334', display: 'Person 2' },
+      ],
+    },
+  }),
+}));
+
+let mockResourcesContextValue = {
+  addressTemplate: [],
+  currentSession: {
+    authenticated: true,
+    sessionId: 'JSESSION',
+    currentProvider: { uuid: '45ce6c2e-dd5a-11e6-9d9c-0242ac150002', identifier: 'PRO-123' },
+  },
+  identifierTypes: [],
+  relationshipTypes: null,
+} as Resources;
+
+describe('RelationshipsSection', () => {
+  it('renders a loader when relationshipTypes are not available', () => {
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={null}>
+          <Form>
+            <RelationshipsSection />
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+
+    expect(screen.getByLabelText(/loading relationships section/i)).toBeInTheDocument();
+    expect(screen.getByRole(/progressbar/i)).toBeInTheDocument();
+    expect(screen.queryByText(/add relationship/i)).not.toBeInTheDocument();
+  });
+
+  it('renders relationships when relationshipTypes are available', () => {
+    const relationshipTypes = {
+      results: [
+        { aIsToB: 'Mother', bIsToA: 'Child', uuid: '42ae5ce0-d64b-11ea-9064-5adc43bbdd34' },
+        { aIsToB: 'Father', bIsToA: 'Child', uuid: '52ae5ce0-d64b-11ea-9064-5adc43bbdd24' },
+      ],
+    };
+    mockResourcesContextValue = {
+      ...mockResourcesContextValue,
+      relationshipTypes: relationshipTypes,
+    };
+
+    render(
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik
+          initialValues={{
+            relationships: [{ action: 'ADD', relatedPersonUuid: '11524ae7-3ef6-4ab6-aff6-804ffc58704a' }],
+          }}
+          onSubmit={null}>
+          <Form>
+            <PatientRegistrationContext.Provider
+              value={{
+                setFieldValue: jest.fn(),
+                setInitialFormValues: jest.fn(),
+              }}>
+              <RelationshipsSection />
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>,
+    );
+
+    expect(screen.getByLabelText(/relationships section/i)).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /relationship/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add relationship/i })).toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: /full name/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /mother/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /father/i })).toBeInTheDocument();
+    expect(screen.getAllByRole('option', { name: /child/i }).length).toEqual(2);
+  });
+});

package/src/patient-registration/section/patient-relationships/relationships.resource.tsx

@@ -1,5 +1,5 @@
 import { FetchResponse, openmrsFetch, showToast } from '@openmrs/esm-framework';
-import { RelationshipValue } from '../../patient-registration-types';
+import { RelationshipValue } from '../../patient-registration.types';
 import useSWR from 'swr';
 import { useMemo } from 'react';
 import { personRelationshipRepresentation } from '../../../constants';

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

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import mapValues from 'lodash/mapValues';
-import { FormValues } from '../patient-registration-types';
+import { FormValues } from '../patient-registration.types';
 
 export const validationSchema = Yup.object({
   givenName: Yup.string().required('givenNameRequired'),

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

@@ -1,8 +1,8 @@
 import { FetchResponse, openmrsFetch, showNotification, showToast } from '@openmrs/esm-framework';
-import { ConceptAnswers, ConceptResponse, FormValues } from '../patient-registration/patient-registration-types';
 import { generateNUPIPayload, handleClientRegistryResponse } from './patient-verification-utils';
 import useSWR from 'swr';
 import useSWRImmutable from 'swr/immutable';
+import { ConceptAnswers, ConceptResponse, FormValues } from '../patient-registration/patient-registration.types';
 
 export function searchClientRegistry(identifierType: string, searchTerm: string, token: string) {
   const url = `https://afyakenyaapi.health.go.ke/partners/registry/search/KE/${identifierType}/${searchTerm}`;
@@ -154,3 +154,14 @@ async function postToRegistry(
     showNotification({ kind: 'error', title: 'NUPI Post failed', description: JSON.stringify(error) });
   }
 }
+
+export const useFacilityName = (facilityCode) => {
+  const apiUrl = `/ws/rest/v1/kenyaemr/facilityName?facilityCode=${facilityCode}`;
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  return {
+    facilityName: data ? data?.data : null,
+    isLoading: isLoading,
+    isError: error,
+  };
+};

package/src/patient-verification/patient-verification-utils.ts

@@ -1,8 +1,8 @@
 import { showModal } from '@openmrs/esm-framework';
 import { FormikProps } from 'formik';
-import { FormValues } from '../patient-registration/patient-registration-types';
 import { ClientRegistryPatient, RegistryPatient } from './verification-types';
 import counties from './assets/counties.json';
+import { FormValues } from '../patient-registration/patient-registration.types';
 
 export function handleClientRegistryResponse(
   clientResponse: ClientRegistryPatient,

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

@@ -6,8 +6,8 @@ import { countries, verificationIdentifierTypes } from './assets/verification-as
 import { searchClientRegistry, useGlobalProperties } from './patient-verification-hook';
 import { showToast } from '@openmrs/esm-framework';
 import { handleClientRegistryResponse } from './patient-verification-utils';
-import { FormValues } from '../patient-registration/patient-registration-types';
 import { FormikProps } from 'formik';
+import { FormValues } from '../patient-registration/patient-registration.types';
 
 interface PatientVerificationProps {
   props: FormikProps<FormValues>;

package/src/patient-verification/verification-modal/confirm-prompt.component.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
 import { age, ExtensionSlot, formatDate } from '@openmrs/esm-framework';
 import capitalize from 'lodash-es/capitalize';
+import { useFacilityName } from '../patient-verification-hook';
 
 const PatientInfo: React.FC<{ label: string; value: string }> = ({ label, value }) => {
   return (
@@ -21,6 +22,8 @@ interface ConfirmPromptProps {
 
 const ConfirmPrompt: React.FC<ConfirmPromptProps> = ({ close, onConfirm, patient }) => {
   const { t } = useTranslation();
+  const { facilityName, isLoading } = useFacilityName(patient?.originFacilityKmflCode);
+
   return (
     <>
       <div className="cds--modal-header">
@@ -54,6 +57,14 @@ const ConfirmPrompt: React.FC<ConfirmPromptProps> = ({ close, onConfirm, patient
             <PatientInfo label={t('dateOfBirth', 'Date of birth')} value={formatDate(new Date(patient?.dateOfBirth))} />
             <PatientInfo label={t('gender', 'Gender')} value={capitalize(patient?.gender)} />
             <PatientInfo label={t('nascopNumber', 'Nascop facility no')} value={capitalize(patient?.nascopCCCNumber)} />
+            <PatientInfo
+              label={t('originFacilityCode', 'Origin facility code')}
+              value={patient?.originFacilityKmflCode}
+            />
+            <PatientInfo
+              label={t('originFacilityName', 'Origin facility name')}
+              value={isLoading ? '--' : facilityName?.name}
+            />
           </div>
         </div>
       </div>

package/src/root.component.tsx

@@ -9,7 +9,7 @@ import {
   fetchPatientIdentifierTypesWithSources,
 } from './offline.resources';
 import { FormManager } from './patient-registration/form-manager';
-import { PatientRegistration, PatientRegistrationProps } from './patient-registration/patient-registration.component';
+import { PatientRegistration } from './patient-registration/patient-registration.component';
 import useSWRImmutable from 'swr/immutable';
 import styles from './root.scss';
 

package/src/routes.json

@@ -3,54 +3,65 @@
   "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": "deleteIdentifierConfirmationModal",
-    "name": "delete-identifier-confirmation-modal",
-    "online": true,
-    "offline": true
-  }, {
-    "component": "emptyVerificationModal",
-    "name":"empty-client-registry-modal",
-    "online": true,
-    "offline": false
-  },{
-    "component": "confirmationVerificationModal",
-    "name": "confirm-client-registry-modal",
-    "online": true,
-    "offline": false
-  }]
-}
+  "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": "deleteIdentifierConfirmationModal",
+      "name": "delete-identifier-confirmation-modal",
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "emptyClientRegistryModal",
+      "name": "empty-client-registry-modal",
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "confirmClientRegistryModal",
+      "name": "confirm-client-registry-modal",
+      "online": true,
+      "offline": true
+    }
+  ]
+}

package/src/widgets/display-photo.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import DisplayPatientPhoto from './display-photo.component';
+import { mockPatient } from '../../../../__mocks__/appointments.mock';
+
+jest.mock('../patient-registration/patient-registration.resource', () => ({
+  usePatientPhoto: jest.fn().mockReturnValue({ data: { imageSrc: 'test-image-src' } }),
+}));
+
+jest.mock('geopattern', () => ({
+  generate: jest.fn().mockReturnValue({
+    toDataUri: jest.fn().mockReturnValue('https://example.com'),
+  }),
+}));
+
+const patientUuid = mockPatient.uuid;
+const patientName = mockPatient.name;
+
+describe('DisplayPatientPhoto Component', () => {
+  it('should render the component with the patient photo and size should not be small', () => {
+    render(<DisplayPatientPhoto patientUuid={patientUuid} patientName={patientName} />);
+
+    const avatarImage = screen.getByTitle(`${patientName}`);
+
+    expect(avatarImage).toBeInTheDocument();
+    expect(avatarImage).toHaveAttribute('style', expect.stringContaining('width: 80px; height: 80px'));
+  });
+
+  it('should render the component with the patient photo and size should be small i.e. 48px', () => {
+    render(<DisplayPatientPhoto patientUuid={patientUuid} patientName={patientName} size="small" />);
+
+    const avatarImage = screen.getByTitle(`${patientName}`);
+
+    expect(avatarImage).toBeInTheDocument();
+    expect(avatarImage).toHaveAttribute('style', expect.stringContaining('width: 48px; height: 48px'));
+  });
+});

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import EditPatientDetailsButton from './edit-patient-details-button.component';
+import { navigate } from '@openmrs/esm-framework';
+import { mockPatient } from '../../../../__mocks__/appointments.mock';
+
+describe('EditPatientDetailsButton', () => {
+  const patientUuid = mockPatient.uuid;
+  it('should navigate to the edit page when clicked', () => {
+    const mockNavigate = navigate as jest.Mock;
+
+    jest.mock('@openmrs/esm-framework', () => {
+      const originalModule = jest.requireActual('@openmrs/esm-framework');
+      return {
+        ...originalModule,
+      };
+    });
+
+    render(<EditPatientDetailsButton patientUuid={patientUuid} />);
+
+    const button = screen.getByRole('menuitem');
+    fireEvent.click(button);
+
+    expect(mockNavigate).toHaveBeenCalledWith({ to: expect.stringContaining(`/patient/${patientUuid}/edit`) });
+  });
+
+  it('should call the onTransition function when provided', () => {
+    const onTransitionMock = jest.fn();
+    render(<EditPatientDetailsButton patientUuid={patientUuid} onTransition={onTransitionMock} />);
+
+    const button = screen.getByRole('menuitem');
+    fireEvent.click(button);
+
+    expect(onTransitionMock).toHaveBeenCalled();
+  });
+});

package/translations/am.json

@@ -1,7 +1,5 @@
 {
   "addRelationshipButtonText": "Add Relationship",
-  "address1": "Address line 1",
-  "address2": "Address line 2",
   "addressHeader": "Address",
   "allFieldsRequiredText": "All fields are required unless marked optional",
   "autoGeneratedPlaceholderText": "Auto-generated",
@@ -10,11 +8,8 @@
   "birthFieldLabelText": "Birth",
   "cancel": "Cancel",
   "causeOfDeathInputLabel": "Cause of Death",
-  "cityVillage": "city",
   "configure": "Configure",
   "contactSection": "Contact Details",
-  "country": "Country",
-  "countyDistrict": "District",
   "createNew": "Create New",
   "dateOfBirthLabelText": "Date of Birth",
   "deathDateInputLabel": "Date of Death",
@@ -63,7 +58,6 @@
   "other": "Other",
   "patient": "Patient",
   "patientNameKnown": "Patient's Name is Known?",
-  "postalCode": "Postal code",
   "registerPatient": "Register Patient",
   "registrationSuccessToastDescription": "The patient can now be found by searching for them using their name or ID number",
   "registrationSuccessToastTitle": "New Patient Created",
@@ -79,7 +73,6 @@
   "searchAddress": "Search address",
   "selectAnOption": "Select an option",
   "sexFieldLabelText": "Sex",
-  "stateProvince": "State",
   "stroke": "Stroke",
   "unableToFetch": "Unable to fetch person attribute type - {personattributetype}",
   "unknown": "Unknown",