@kenyaemr/esm-patient-registration-app 6.0.1-pre.1.0.0 → 6.0.1-pre.1.0.2

package/dist/routes.json

@@ -1 +1 @@
-{"$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},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"6.0.1-pre.1.0.0"}
+{"$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":"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},{"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}],"version":"6.0.1-pre.1.0.2"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "6.0.1-pre.1.0.0",
+  "version": "6.0.1-pre.1.0.2",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -38,11 +38,8 @@
   },
   "dependencies": {
     "@carbon/react": "~1.37.0",
-    "core-js-pure": "^3.34.0",
     "formik": "^2.1.5",
-    "geopattern": "^1.2.3",
     "lodash-es": "^4.17.15",
-    "react-avatar": "^5.0.3",
     "uuid": "^8.3.2",
     "yup": "^0.29.1"
   },
@@ -56,6 +53,5 @@
   },
   "devDependencies": {
     "webpack": "^5.74.0"
-  },
-  "stableVersion": "6.0.0"
+  }
 }

package/src/config-schema.ts

@@ -60,14 +60,15 @@ export interface RegistrationConfig {
     };
     phone: {
       personAttributeUuid: string;
+      validation?: {
+        required: boolean;
+        matches?: string;
+      };
     };
   };
   links: {
     submitButton: string;
   };
-  concepts: {
-    patientPhotoUuid: string;
-  };
   defaultPatientIdentifierTypes: Array<string>;
   registrationObs: {
     encounterTypeUuid: string | null;
@@ -312,6 +313,14 @@ export const esmPatientRegistrationSchema = {
         _default: '14d4f066-15f5-102d-96e4-000c29c2a5d7',
         _description: 'The UUID of the phone number person attribute type',
       },
+      validation: {
+        required: { _type: Type.Boolean, _default: false },
+        matches: {
+          _type: Type.String,
+          _default: null,
+          _description: 'Optional RegEx for testing the validity of the input.',
+        },
+      },
     },
   },
   links: {
@@ -321,12 +330,6 @@ export const esmPatientRegistrationSchema = {
       _validators: [validators.isUrlWithTemplateParameters(['patientUuid'])],
     },
   },
-  concepts: {
-    patientPhotoUuid: {
-      _type: Type.ConceptUuid,
-      _default: '736e8771-e501-4615-bfa7-570c03f4bef5',
-    },
-  },
   defaultPatientIdentifierTypes: {
     _type: Type.Array,
     _elements: {

package/src/index.ts

@@ -4,8 +4,8 @@ import { moduleName, patientRegistration } from './constants';
 import { setupOffline } from './offline';
 import rootComponent from './root.component';
 import addPatientLinkComponent from './add-patient-link';
-import patientPhotoComponent from './widgets/display-photo.component';
 import editPatientDetailsButtonComponent from './widgets/edit-patient-details-button.component';
+import { PatientPhotoExtension } from './patient-photo.extension';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -55,7 +55,7 @@ export const cancelPatientEditModal = getAsyncLifecycle(
   options,
 );
 
-export const patientPhoto = getSyncLifecycle(patientPhotoComponent, options);
+export const patientPhotoExtension = getSyncLifecycle(PatientPhotoExtension, options);
 
 export const editPatientDetailsButton = getSyncLifecycle(editPatientDetailsButtonComponent, {
   featureName: 'edit-patient-details',

package/src/patient-photo.extension.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PatientPhoto, type PatientPhotoProps } from '@openmrs/esm-framework';
+
+export function PatientPhotoExtension(props: PatientPhotoProps) {
+  console.warn(
+    'Using the patient-photo extension (or patient-photo-slot slot) is deprecated. Please use the PatientPhoto component from @openmrs/esm-framework.',
+  );
+  return <PatientPhoto {...props} />;
+}

package/src/patient-registration/field/address/custom-address-field.component.tsx

@@ -21,6 +21,7 @@ export const AddressField: React.FC<AddressFieldProps> = ({ fieldDefinition }) =
             <Input
               id={fieldDefinition.id}
               labelText={t(`${fieldDefinition.label}`, `${fieldDefinition.label}`)}
+              required={fieldDefinition?.validation?.required ?? false}
               {...field}
             />
           );

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx

@@ -14,6 +14,7 @@ export interface CodedPersonAttributeFieldProps {
   answerConceptSetUuid: string;
   label?: string;
   customConceptAnswers: Array<{ uuid: string; label?: string }>;
+  required: boolean;
 }
 
 export function CodedPersonAttributeField({
@@ -22,6 +23,7 @@ export function CodedPersonAttributeField({
   answerConceptSetUuid,
   label,
   customConceptAnswers,
+  required,
 }: CodedPersonAttributeFieldProps) {
   const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
     customConceptAnswers.length ? '' : answerConceptSetUuid,
@@ -100,6 +102,7 @@ export function CodedPersonAttributeField({
                     name={`person-attribute-${personAttributeType.uuid}`}
                     labelText={label ?? personAttributeType?.display}
                     invalid={errors[fieldName] && touched[fieldName]}
+                    required={required}
                     {...field}>
                     <SelectItem value={''} text={t('selectAnOption', 'Select an option')} />
                     {answers.map((answer) => (

package/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx

@@ -38,6 +38,7 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
             label={fieldDefinition.label}
             id={fieldDefinition?.id}
             customConceptAnswers={fieldDefinition.customConceptAnswers ?? []}
+            required={fieldDefinition.validation?.required ?? false}
           />
         );
       default:

package/src/patient-registration/field/phone/phone-field.component.tsx

@@ -10,6 +10,7 @@ export function PhoneField() {
     id: 'phone',
     type: 'person attribute',
     uuid: config.fieldConfigurations.phone.personAttributeUuid,
+    validation: config.fieldConfigurations.phone.validation,
     showHeading: false,
   };
   return <PersonAttributeField fieldDefinition={fieldDefinition} />;

package/src/patient-registration/form-manager.ts

@@ -4,6 +4,7 @@ import {
   queueSynchronizationItem,
   type Session,
   restBaseUrl,
+  getConfig,
 } from '@openmrs/esm-framework';
 import { patientRegistration } from '../constants';
 import {
@@ -130,13 +131,14 @@ export class FormManager {
 
       await this.saveObservations(values.obs, savePatientResponse, currentLocation, currentUser, config);
 
-      if (config.concepts.patientPhotoUuid && capturePhotoProps?.imageData) {
+      const { patientPhotoUuid } = await getConfig('@openmrs/esm-styleguide');
+      if (patientPhotoUuid && capturePhotoProps?.imageData) {
         await savePatientPhoto(
           savePatientResponse.data.uuid,
           capturePhotoProps.imageData,
           `${restBaseUrl}/obs`,
           capturePhotoProps.dateTime || new Date().toISOString(),
-          config.concepts.patientPhotoUuid,
+          patientPhotoUuid,
         );
       }
     }

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

@@ -5,12 +5,18 @@ import { XAxis, ShareKnowledge } from '@carbon/react/icons';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Formik, Form, type FormikHelpers } from 'formik';
-import { createErrorHandler, showSnackbar, useConfig, interpolateUrl, usePatient } from '@openmrs/esm-framework';
+import {
+  createErrorHandler,
+  showSnackbar,
+  useConfig,
+  interpolateUrl,
+  usePatient,
+  usePatientPhoto,
+} from '@openmrs/esm-framework';
 import { getValidationSchema } from './validation/patient-registration-validation';
 import { type FormValues, type CapturePhotoProps } from './patient-registration.types';
 import { PatientRegistrationContext } from './patient-registration-context';
 import { type SavePatientForm, SavePatientTransactionManager } from './form-manager';
-import { usePatientPhoto } from './patient-registration.resource';
 import { DummyDataInput } from './input/dummy-data/dummy-data-input.component';
 import {
   cancelRegistration,

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

@@ -1,5 +1,4 @@
-import useSWR from 'swr';
-import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { type Patient, type Relationship, type PatientIdentifier, type Encounter } from './patient-registration.types';
 
 export const uuidIdentifier = '05a29f94-c0ed-11e2-94be-8c13b969e334';
@@ -134,51 +133,6 @@ export async function savePatientPhoto(
   });
 }
 
-interface ObsFetchResponse {
-  results: Array<PhotoObs>;
-}
-
-interface PhotoObs {
-  display: string;
-  obsDatetime: string;
-  uuid: string;
-  value: {
-    display: string;
-    links: {
-      rel: string;
-      uri: string;
-    };
-  };
-}
-
-interface UsePatientPhotoResult {
-  data: { dateTime: string; imageSrc: string } | null;
-  isError: Error;
-  isLoading: boolean;
-}
-
-export function usePatientPhoto(patientUuid: string): UsePatientPhotoResult {
-  const {
-    concepts: { patientPhotoUuid },
-  } = useConfig();
-  const url = `${restBaseUrl}/obs?patient=${patientUuid}&concept=${patientPhotoUuid}&v=full`;
-
-  const { data, error, isLoading } = useSWR<{ data: ObsFetchResponse }, Error>(patientUuid ? url : null, openmrsFetch);
-
-  const item = data?.data?.results[0];
-
-  return {
-    data: item
-      ? {
-          dateTime: item?.obsDatetime,
-          imageSrc: item?.value?.links?.uri,
-        }
-      : null,
-    isError: error,
-    isLoading,
-  };
-}
-
 export async function fetchPerson(query: string, abortController: AbortController) {
   const [patientsRes, personsRes] = await Promise.all([
     openmrsFetch(`${restBaseUrl}/patient?q=${query}`, {

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

@@ -75,15 +75,6 @@ jest.mock('./field/field.resource', () => ({
   }),
 }));
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    validator: jest.fn(),
-  };
-});
-
 jest.mock('react-router-dom', () => ({
   ...(jest.requireActual('react-router-dom') as any),
   useLocation: () => ({

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

@@ -1,4 +1,4 @@
-import { type FetchResponse, openmrsFetch, showNotification, showToast } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, showNotification, showToast, showSnackbar } from '@openmrs/esm-framework';
 import { generateNUPIPayload, handleClientRegistryResponse } from './patient-verification-utils';
 import useSWR from 'swr';
 import useSWRImmutable from 'swr/immutable';
@@ -47,12 +47,12 @@ export async function handleSavePatientToClientRegistry(
           postToRegistry(formValues, setValues);
         }
       } catch (error) {
-        showToast({
+        showSnackbar({
           title: 'Client registry error',
-          description: `${error}`,
-          millis: 10000,
+          subtitle: `${error}`,
+          timeoutInMs: 10000,
           kind: 'error',
-          critical: true,
+          isLowContrast: true,
         });
       }
       return;

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

@@ -62,7 +62,7 @@ export function handleClientRegistryResponse(
         required: false,
         identifierTypeUuid: '49af6cdc-7968-4abb-bf46-de10d7f4859f',
         identifierName: 'National ID',
-        identifierValue: identifications !== undefined && identifications[0]?.identificationNumber,
+        identifierValue: identifications !== undefined && identifications[0]?.identificationNumber?.trim(),
       },
 
       ['nationalUniquePatientIdentifier']: {
@@ -81,9 +81,9 @@ export function handleClientRegistryResponse(
       onConfirm: () => {
         props.setValues({
           ...props.values,
-          familyName: lastName,
-          middleName: middleName,
-          givenName: firstName,
+          familyName: lastName?.trim() ?? '',
+          middleName: middleName?.trim() ?? '',
+          givenName: firstName.trim() ?? '',
           gender: clientResponse.client.gender,
           birthdate: new Date(dateOfBirth),
           isDead: !isAlive,

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

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tile, ComboBox, Layer, Button, Search, InlineLoading } from '@carbon/react';
+import { Tile, ComboBox, Layer, Button, Search, InlineLoading, InlineNotification } from '@carbon/react';
 import styles from './patient-verification.scss';
 import { countries, verificationIdentifierTypes } from './assets/verification-assets';
 import { searchClientRegistry, useGlobalProperties } from './patient-verification-hook';
-import { showToast } from '@openmrs/esm-framework';
+import { showSnackbar } from '@openmrs/esm-framework';
 import { handleClientRegistryResponse } from './patient-verification-utils';
 import { type FormikProps } from 'formik';
 import { type FormValues } from '../patient-registration/patient-registration.types';
@@ -37,21 +37,28 @@ const PatientVerification: React.FC<PatientVerificationProps> = ({ props }) => {
 
       handleClientRegistryResponse(clientRegistryResponse, props, verificationCriteria.searchTerm);
     } catch (error) {
-      showToast({
+      showSnackbar({
         title: 'Client registry error',
-        description: `Please reload the registration page and re-try again, if the issue persist contact system administrator`,
-        millis: 10000,
+        subtitle: `Please reload the registration page and re-try again, if the issue persist contact system administrator`,
+        timeoutInMs: 10000,
         kind: 'error',
-        critical: true,
+        isLowContrast: true,
       });
       setIsLoadingSearch(false);
     }
   };
 
-  if (error) {
+  if (!error) {
     return (
       <Tile className={styles.errorWrapper}>
-        <p>Error occurred while reaching the client registry, please proceed with registration and try again later</p>
+        <InlineNotification
+          aria-label="closes notification"
+          kind="error"
+          statusIconDescription="notification"
+          subtitle="Access to national client registry may be blocked by a proxy server. Please proceed with registration and try again later. Contact your system administrator if the issue persists."
+          title="Error: Failed to reach client registry."
+          lowContrast={true}
+        />
       </Tile>
     );
   }

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

@@ -39,7 +39,7 @@ const ConfirmPrompt: React.FC<ConfirmPromptProps> = ({ close, onConfirm, patient
         <div style={{ display: 'flex', margin: '1rem' }}>
           <ExtensionSlot
             style={{ display: 'flex', alignItems: 'center' }}
-            name="patient-photo-slot"
+            extensionSlotName="patient-photo-slot"
             state={{ patientName: `${patient?.firstName} ${patient?.lastName}` }}
           />
           <div style={{ width: '100%', marginLeft: '0.625rem' }}>
@@ -54,8 +54,8 @@ const ConfirmPrompt: React.FC<ConfirmPromptProps> = ({ close, onConfirm, patient
             <PatientInfo label={t('age', 'Age')} value={age(patient?.dateOfBirth)} />
             <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('nupiIdentification', 'NUPI')} value={patient?.clientNumber} />
-            <PatientInfo label={t('shaNumber', 'SHA Number')} value={'--'} />
+            <PatientInfo label={t('NUPI')} value={patient?.clientNumber} />
+            <PatientInfo label={t('SHA Number')} value={'--'} />
           </div>
         </div>
       </div>

package/src/routes.json

@@ -32,7 +32,7 @@
       "offline": true
     },
     {
-      "component": "patientPhoto",
+      "component": "patientPhotoExtension",
       "name": "patient-photo-widget",
       "slot": "patient-photo-slot",
       "online": true,