@kenyaemr/esm-patient-registration-app 4.4.1 → 4.4.2

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

@@ -0,0 +1,173 @@
+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';
+
+export function handleClientRegistryResponse(
+  clientResponse: ClientRegistryPatient,
+  props: FormikProps<FormValues>,
+  searchTerm: string,
+) {
+  if (clientResponse?.clientExists === false) {
+    const nupiIdentifiers = {
+      ['nationalId']: {
+        initialValue: searchTerm,
+        identifierUuid: undefined,
+        selectedSource: { uuid: '', name: '' },
+        preferred: false,
+        required: false,
+        identifierTypeUuid: '49af6cdc-7968-4abb-bf46-de10d7f4859f',
+        identifierName: 'National ID',
+        identifierValue: searchTerm,
+      },
+    };
+    const dispose = showModal('empty-client-registry-modal', {
+      onConfirm: () => {
+        props.setValues({ ...props.values, identifiers: { ...props.values.identifiers, ...nupiIdentifiers } });
+        dispose();
+      },
+      close: () => dispose(),
+    });
+  }
+
+  if (clientResponse?.clientExists) {
+    const {
+      client: {
+        middleName,
+        lastName,
+        firstName,
+        contact,
+        country,
+        countyOfBirth,
+        residence,
+        identifications,
+        gender,
+        dateOfBirth,
+        isAlive,
+        clientNumber,
+        educationLevel,
+        occupation,
+        maritalStatus,
+      },
+    } = clientResponse;
+
+    const nupiIdentifiers = {
+      ['nationalId']: {
+        initialValue: identifications !== undefined && identifications[0]?.identificationNumber,
+        identifierUuid: undefined,
+        selectedSource: { uuid: '', name: '' },
+        preferred: false,
+        required: false,
+        identifierTypeUuid: '49af6cdc-7968-4abb-bf46-de10d7f4859f',
+        identifierName: 'National ID',
+        identifierValue: identifications !== undefined && identifications[0]?.identificationNumber,
+      },
+
+      ['nationalUniquePatientIdentifier']: {
+        identifierTypeUuid: 'f85081e2-b4be-4e48-b3a4-7994b69bb101',
+        identifierName: 'National Unique patient identifier',
+        identifierValue: clientNumber,
+        initialValue: clientNumber,
+        identifierUuid: undefined,
+        selectedSource: { uuid: '', name: '' },
+        preferred: false,
+        required: false,
+      },
+    };
+
+    const dispose = showModal('confirm-client-registry-modal', {
+      onConfirm: () => {
+        props.setValues({
+          ...props.values,
+          familyName: lastName,
+          middleName: middleName,
+          givenName: firstName,
+          gender: gender === 'male' ? 'Male' : 'Female',
+          birthdate: new Date(dateOfBirth),
+          isDead: !isAlive,
+          attributes: {
+            'b2c38640-2603-4629-aebd-3b54f33f1e3a': contact?.primaryPhone,
+            '94614350-84c8-41e0-ac29-86bc107069be': contact?.secondaryPhone,
+            'b8d0b331-1d2d-4a9a-b741-1816f498bdb6': contact?.emailAddress ?? '',
+          },
+          address: {
+            address1: residence?.address,
+            address2: '',
+            address4: residence?.ward,
+            cityVillage: residence?.village,
+            stateProvince: residence?.subCounty,
+            countyDistrict: counties.find((county) => county.code === parseInt(residence?.county))?.name,
+            country: 'Kenya',
+            postalCode: residence?.address,
+          },
+          identifiers: { ...props.values.identifiers, ...nupiIdentifiers },
+          obs: {
+            '1054AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA':
+              props.values.concepts.find((concept) => concept.display?.toLowerCase() === maritalStatus?.toLowerCase())
+                ?.uuid ?? '',
+            '1712AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA':
+              props.values.concepts.find((concept) => concept.display?.toLowerCase() === educationLevel?.toLowerCase())
+                ?.uuid ?? '',
+            '1542AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA':
+              props.values.concepts.find((concept) => concept.display?.toLowerCase() === occupation?.toLowerCase())
+                ?.uuid ?? '',
+          },
+        });
+        dispose();
+      },
+      close: () => dispose(),
+      patient: clientResponse.client,
+    });
+  }
+}
+
+export function generateNUPIPayload(formValues: FormValues): RegistryPatient {
+  const educationLevel = formValues.concepts.find(
+    (concept) => concept.uuid === formValues.obs['1712AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'],
+  );
+  const occupation = formValues.concepts.find(
+    (concept) => concept.uuid === formValues.obs['1542AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'],
+  );
+  const maritalStatus = formValues.concepts.find(
+    (concept) => concept.uuid === formValues.obs['1054AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'],
+  );
+
+  let createRegistryPatient: RegistryPatient = {
+    firstName: formValues?.givenName,
+    middleName: formValues?.middleName,
+    lastName: formValues?.familyName,
+    gender: formValues?.gender === 'Male' ? 'male' : 'female',
+    dateOfBirth: new Date(formValues.birthdate).toISOString(),
+    isAlive: !formValues.isDead,
+    residence: {
+      county: `0${counties.find((county) => county.name.includes(formValues.address['countyDistrict']))?.code}`,
+      subCounty: formValues.address['stateProvince']?.toLocaleLowerCase(),
+      ward: formValues.address['address4']?.toLocaleLowerCase(),
+      village: formValues.address['cityVillage'],
+      landmark: formValues.address['address2'],
+      address: formValues.address['postalCode'],
+    },
+    nextOfKins: [],
+    contact: {
+      primaryPhone: formValues.attributes['b2c38640-2603-4629-aebd-3b54f33f1e3a'],
+      secondaryPhone: formValues.attributes['94614350-84c8-41e0-ac29-86bc107069be'],
+      emailAddress: formValues.attributes['b8d0b331-1d2d-4a9a-b741-1816f498bdb6'],
+    },
+    country: 'KE',
+    countyOfBirth: `0${counties.find((county) => county.name.includes(formValues.address['countyDistrict']))?.code}`,
+    educationLevel: educationLevel?.display?.toLowerCase() ?? '',
+    religion: '',
+    occupation: occupation?.display?.toLowerCase() ?? '',
+    maritalStatus: maritalStatus?.display?.toLowerCase() ?? '',
+    originFacilityKmflCode: '',
+    nascopCCCNumber: '',
+    identifications: [
+      {
+        identificationType: 'national-id',
+        identificationNumber: formValues.identifiers['nationalId']?.identifierValue,
+      },
+    ],
+  };
+  return createRegistryPatient;
+}

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

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tile, ComboBox, Layer, Button, Search, InlineLoading } 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 { handleClientRegistryResponse } from './patient-verification-utils';
+import { FormValues } from '../patient-registration/patient-registration-types';
+import { FormikProps } from 'formik';
+
+interface PatientVerificationProps {
+  props: FormikProps<FormValues>;
+}
+
+const PatientVerification: React.FC<PatientVerificationProps> = ({ props }) => {
+  const { t } = useTranslation();
+  const { data, isLoading, error } = useGlobalProperties();
+  const [verificationCriteria, setVerificationCriteria] = useState({
+    searchTerm: '',
+    identifierType: '',
+  });
+  const [isLoadingSearch, setIsLoadingSearch] = useState(false);
+
+  const handleSearch = async () => {
+    setIsLoadingSearch(true);
+    try {
+      const clientRegistryResponse = await searchClientRegistry(
+        verificationCriteria.identifierType,
+        verificationCriteria.searchTerm,
+        props.values.token,
+      );
+      setIsLoadingSearch(false);
+      handleClientRegistryResponse(clientRegistryResponse, props, verificationCriteria.searchTerm);
+    } catch (error) {
+      showToast({
+        title: 'Client registry error',
+        description: `Please reload the registration page and re-try again, if the issue persist contact system administrator`,
+        millis: 10000,
+        kind: 'error',
+        critical: true,
+      });
+      setIsLoadingSearch(false);
+    }
+  };
+
+  if (error) {
+    return (
+      <Tile className={styles.errorWrapper}>
+        <p>Error occurred while reaching the client registry, please proceed with registration and try again later</p>
+      </Tile>
+    );
+  }
+  return (
+    <div id={'patientVerification'}>
+      <h3 className={styles.productiveHeading02} style={{ color: '#161616' }}>
+        {t('clientVerificationWithClientRegistry', 'Client verification with client registry')}
+      </h3>
+      <div style={{ margin: '1rem 0 1rem' }}>
+        <Layer>
+          {isLoading && <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />}
+        </Layer>
+        <Tile className={styles.verificationWrapper}>
+          <Layer>
+            <ComboBox
+              ariaLabel={t('selectCountry', 'Select country')}
+              id="selectCountry"
+              items={countries}
+              itemToString={(item) => item?.name ?? ''}
+              label="Combo box menu options"
+              titleText={t('selectCountry', 'Select country')}
+              initialSelectedItem={countries[0]}
+            />
+          </Layer>
+          <Layer>
+            <ComboBox
+              ariaLabel={t('selectIdentifierType', 'Select identifier type')}
+              id="selectIdentifierType"
+              items={verificationIdentifierTypes}
+              itemToString={(item) => item?.name ?? ''}
+              label="Combo box menu options"
+              titleText={t('selectIdentifierType', 'Select identifier type')}
+              onChange={({ selectedItem }) =>
+                setVerificationCriteria({ ...verificationCriteria, identifierType: selectedItem.value })
+              }
+            />
+          </Layer>
+          <Layer>
+            <Search
+              id="search-1"
+              autoFocus
+              placeHolderText="Search"
+              disabled={!verificationCriteria.identifierType}
+              onChange={(event) => setVerificationCriteria({ ...verificationCriteria, searchTerm: event.target.value })}
+            />
+          </Layer>
+          {!isLoadingSearch ? (
+            <Button disabled={!verificationCriteria.identifierType && !isLoading} size="md" onClick={handleSearch}>
+              {t('validate', 'Validate')}
+            </Button>
+          ) : (
+            <InlineLoading status="active" iconDescription="Loading" description="Searching client registry" />
+          )}
+        </Tile>
+      </div>
+    </div>
+  );
+};
+
+export default PatientVerification;

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

@@ -0,0 +1,30 @@
+@use '@carbon/colors';
+@import '../patient-registration/patient-registration.scss';
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .verificationWrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    column-gap: 0.325rem;
+    align-items: flex-end;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .verificationWrapper {
+    row-gap: 0.5rem;
+    display: flex;
+    flex-direction: column;
+
+  }
+}
+
+.errorWrapper {
+  color: colors.$red-50;
+  margin: 0 0 1rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { age, ExtensionSlot, formatDate } from '@openmrs/esm-framework';
+import capitalize from 'lodash-es/capitalize';
+
+const PatientInfo: React.FC<{ label: string; value: string }> = ({ label, value }) => {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '0.25fr 0.75fr', margin: '0.25rem' }}>
+      <span style={{ minWidth: '5rem', fontWeight: 'bold' }}>{label}</span>
+      <span>{value}</span>
+    </div>
+  );
+};
+
+interface ConfirmPromptProps {
+  onConfirm: void;
+  close: void;
+  patient: any;
+}
+
+const ConfirmPrompt: React.FC<ConfirmPromptProps> = ({ close, onConfirm, patient }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">
+          {t('clientRegistryEmpty', `Patient ${patient?.firstName} ${patient?.lastName} found`)}
+        </h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>
+          {t(
+            'patientDetailsFound',
+            'Patient information found in the registry, do you want to use the information to continue with registration?',
+          )}
+        </p>
+        <div style={{ display: 'flex', margin: '1rem' }}>
+          <ExtensionSlot
+            style={{ display: 'flex', alignItems: 'center' }}
+            extensionSlotName="patient-photo-slot"
+            state={{ patientName: `${patient?.firstName} ${patient?.lastName}` }}
+          />
+          <div style={{ width: '100%', marginLeft: '0.625rem' }}>
+            <PatientInfo
+              label={t('patientName', 'Patient name')}
+              value={`${patient?.firstName} ${patient?.lastName}`}
+            />
+            <PatientInfo
+              label={t('nationalId', 'National ID')}
+              value={patient?.identifications[0]?.identificationNumber}
+            />
+            <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)} />
+          </div>
+        </div>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button onClick={onConfirm}>{t('useValues', 'Use values')}</Button>
+      </div>
+    </>
+  );
+};
+
+export default ConfirmPrompt;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+
+interface EmptyPromptProps {
+  onConfirm: void;
+  close: void;
+}
+
+const EmptyPrompt: React.FC<EmptyPromptProps> = ({ close, onConfirm }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className="cds--modal-header">
+        <h3 className="cds--modal-header__heading">{t('clientRegistryEmpty', 'Create & Post Patient')}</h3>
+      </div>
+      <div className="cds--modal-content">
+        <p>
+          {t(
+            'patientNotFound',
+            'The patient records could not be found in Client registry, do you want to continue to create and post patient to registry',
+          )}
+        </p>
+      </div>
+      <div className="cds--modal-footer">
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button onClick={onConfirm}>{t('continue', 'Continue to registration')}</Button>
+      </div>
+    </>
+  );
+};
+
+export default EmptyPrompt;

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

@@ -0,0 +1,50 @@
+export interface ClientIdentification {
+  identificationType: string;
+  identificationNumber: string;
+}
+
+interface ClientContact {
+  primaryPhone: string;
+  secondaryPhone?: string;
+  emailAddress?: string;
+}
+
+export interface ClientRegistryPatient {
+  clientExists: boolean;
+  client?: RegistryPatient;
+}
+
+export interface RegistryPatient {
+  clientNumber?: string;
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  dateOfBirth: string;
+  maritalStatus?: string;
+  gender: string;
+  occupation?: string;
+  religion?: string;
+  educationLevel?: string;
+  country: string;
+  countyOfBirth?: string;
+  isAlive: boolean;
+  originFacilityKmflCode?: string;
+  isOnART?: string;
+  nascopCCCNumber?: string;
+  residence: {
+    county: string;
+    subCounty: string;
+    ward: string;
+    village: string;
+    landmark: string;
+    address: string;
+  };
+  identifications: Array<ClientIdentification>;
+  contact: ClientContact;
+  nextOfKins: Array<{
+    name: string;
+    relationship: string;
+    residence: string;
+    contact: ClientContact;
+  }>;
+}

package/translations/en.json

@@ -3,6 +3,7 @@
   "address1": "Address line 1",
   "address2": "Address line 2",
   "addressHeader": "Address",
+  "age": "Age",
   "allFieldsRequiredText": "All fields are required unless marked optional",
   "autoGeneratedPlaceholderText": "Auto-generated",
   "birthdayNotInTheFuture": "Birthday cannot be in the future",
@@ -11,11 +12,15 @@
   "cancel": "Cancel",
   "causeOfDeathInputLabel": "Cause of Death",
   "cityVillage": "City",
+  "clientRegistryEmpty": "Create & Post Patient",
+  "clientVerificationWithClientRegistry": "Client verification with client registry",
   "configure": "Configure",
   "contactSection": "Contact Details",
+  "continue": "Continue",
   "country": "Country",
   "countyDistrict": "District",
   "createNew": "Create New",
+  "dateOfBirth": "Date of birth",
   "dateOfBirthLabelText": "Date of Birth",
   "deathDateInputLabel": "Date of Death",
   "deathdayNotInTheFuture": "Death day cannot be in the future",
@@ -38,6 +43,7 @@
   "female": "Female",
   "fieldErrorTitleMessage": "The following fields have errors:",
   "fullNameLabelText": "Full Name",
+  "gender": "Gender",
   "genderLabelText": "Sex",
   "genderRequired": "Gender is required",
   "genderUnspecified": "Gender is not specified",
@@ -54,6 +60,7 @@
   "male": "Male",
   "middleNameLabelText": "Middle Name",
   "months": "Months",
+  "nationalId": "National ID",
   "negativeMonths": "Negative months",
   "negativeYears": "Negative years",
   "no": "No",
@@ -62,8 +69,14 @@
   "optional": "optional",
   "other": "Other",
   "patient": "Patient",
+  "patientDetailsFound": "Patient information found in the registry, do you want to use the information to continue with registration?",
+  "patientName": "Patient name",
   "patientNameKnown": "Patient's Name is Known?",
+  "patientNotFound": "The patient records could not be found in Client registry, do you want to continue to create and post patient to registry",
+  "phoneEmailLabelText": "Phone, Email, etc.",
+  "phoneNumberInputLabelText": "Phone number",
   "postalCode": "Postcode",
+  "postToRegistry": "Post to registry",
   "registerPatient": "Register Patient",
   "registrationSuccessToastDescription": "The patient can now be found by searching for them using their name or ID number",
   "registrationSuccessToastTitle": "New Patient Created",
@@ -77,7 +90,8 @@
   "resetIdentifierTooltip": "Reset",
   "restoreRelationshipActionButton": "Undo",
   "searchAddress": "Search address",
-  "selectAnOption": "Select an option",
+  "selectCountry": "Select country",
+  "selectIdentifierType": "Select identifier type",
   "sexFieldLabelText": "Sex",
   "stateProvince": "State",
   "stroke": "Stroke",
@@ -87,6 +101,8 @@
   "updatePatient": "Update Patient",
   "updationSuccessToastDescription": "The patient's information has been successfully updated",
   "updationSuccessToastTitle": "Patient Details Updated",
+  "useValues": "Use values",
+  "validate": "Validate",
   "years": "Years",
   "yearsEstimateRequired": "Years estimate required",
   "yes": "Yes"