@ampath/esm-patient-registration-app 6.0.1-pre.24 → 6.0.1-pre.245

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

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+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 { showSnackbar, showToast } from '@openmrs/esm-framework';
+import { handleClientRegistryResponse } from './patient-verification-utils';
+import { type FormikProps } from 'formik';
+import { type FormValues } from '../patient-registration/patient-registration.types';
+
+interface PatientVerificationProps {
+  props: FormikProps<FormValues>;
+  setInitialFormValues: React.Dispatch<FormValues>;
+}
+
+const PatientVerification: React.FC<PatientVerificationProps> = ({ props }) => {
+  const { t } = useTranslation();
+  const { data, isLoading, error } = useGlobalProperties();
+  const [verificationCriteria, setVerificationCriteria] = useState({
+    searchTerm: '',
+    identifierType: '',
+    countryCode: 'KE',
+  });
+  const [isLoadingSearch, setIsLoadingSearch] = useState(false);
+
+  const handleSearch = async () => {
+    setIsLoadingSearch(true);
+    try {
+      const clientRegistryResponse = await searchClientRegistry(
+        verificationCriteria.identifierType,
+        verificationCriteria.searchTerm,
+        props.values.token,
+        verificationCriteria.countryCode,
+      );
+      setIsLoadingSearch(false);
+
+      handleClientRegistryResponse(clientRegistryResponse, props, verificationCriteria.searchTerm);
+    } catch (error) {
+      showSnackbar({
+        title: 'Client registry error',
+        subtitle: `Please reload the registration page and re-try again, if the issue persist contact system administrator`,
+        timeoutInMs: 10000,
+        kind: 'error',
+        isLowContrast: true,
+      });
+      setIsLoadingSearch(false);
+    }
+  };
+
+  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>
+        {error && (
+          <InlineNotification
+            className={styles.errorWrapper}
+            aria-label="closes notification"
+            kind="error"
+            lowContrast
+            statusIconDescription="notification"
+            subtitle={t(
+              'clientRegistryErrorSubtitle',
+              'Please proceed with registration contact system admin and  try again later',
+            )}
+            title={t('clientRegistryError', 'Error occurred while reaching the client registry')}
+          />
+        )}
+        <Tile className={styles.verificationWrapper}>
+          <Layer>
+            <ComboBox
+              ariaLabel={t('selectCountry', 'Select country')}
+              id="selectCountry"
+              items={countries}
+              itemToString={(item) => item?.name ?? ''}
+              label="Select country"
+              titleText={t('selectCountry', 'Select country')}
+              initialSelectedItem={countries[0]}
+              onChange={({ selectedItem }) =>
+                setVerificationCriteria({ ...verificationCriteria, countryCode: selectedItem?.initials })
+              }
+            />
+          </Layer>
+          <Layer>
+            <ComboBox
+              ariaLabel={t('selectIdentifierType', 'Select identifier type')}
+              id="selectIdentifierType"
+              items={verificationIdentifierTypes}
+              itemToString={(item) => item?.name ?? ''}
+              label="Select identifier type"
+              titleText={t('selectIdentifierType', 'Select identifier type')}
+              onChange={({ selectedItem }) =>
+                setVerificationCriteria({ ...verificationCriteria, identifierType: selectedItem?.value })
+              }
+            />
+          </Layer>
+          <Layer>
+            <Search
+              id="clientRegistrySearch"
+              autoFocus
+              placeHolderText={t('searchClientRegistry', 'Search client registry')}
+              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,25 @@
+@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 {
+  margin: 0 0 1rem 0;
+}

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

@@ -0,0 +1,72 @@
+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';
+import { useFacilityName } from '../patient-verification-hook';
+
+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' }}
+            name="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)} />
+            <PatientInfo label={t('nupi', 'NUPI')} value={patient?.clientNumber} />
+            <PatientInfo label={t('shaNumber', 'SHA Number')} value={'--'} />
+          </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/src/patient-verification-HIE/assets/counties.json

@@ -0,0 +1,236 @@
+[
+    {
+        "name": "Mombasa",
+        "code": 1,
+        "capital": "Mombasa City"
+    },
+    {
+        "name": "Kwale",
+        "code": 2,
+        "capital": "Kwale"
+    },
+    {
+        "name": "Kilifi",
+        "code": 3,
+        "capital": "Kilifi"
+    },
+    {
+        "name": "Tana River",
+        "code": 4,
+        "capital": "Hola"
+    },
+    {
+        "name": "Lamu",
+        "code": 5,
+        "capital": "Lamu"
+    },
+    {
+        "name": "Taita taveta",
+        "code": 6,
+        "capital": "Voi"
+    },
+    {
+        "name": "Garissa",
+        "code": 7,
+        "capital": "Garissa"
+    },
+    {
+        "name": "Wajir",
+        "code": 8,
+        "capital": "Wajir"
+    },
+    {
+        "name": "Mandera",
+        "code": 9,
+        "capital": "Mandera"
+    },
+    {
+        "name": "Marsabit",
+        "code": 10,
+        "capital": "Marsabit"
+    },
+    {
+        "name": "Isiolo",
+        "code": 11,
+        "capital": "Isiolo"
+    },
+    {
+        "name": "Meru",
+        "code": 12,
+        "capital": "Meru"
+    },
+    {
+        "name": "Tharaka nithi",
+        "code": 13,
+        "capital": "Chuka"
+    },
+    {
+        "name": "Embu",
+        "code": 14,
+        "capital": "Embu"
+    },
+    {
+        "name": "Kitui",
+        "code": 15,
+        "capital": "Kitui"
+    },
+    {
+        "name": "Machakos",
+        "code": 16,
+        "capital": "Machakos"
+    },
+    {
+        "name": "Makueni",
+        "code": 17,
+        "capital": "Wote"
+    },
+    {
+        "name": "Nyandarua",
+        "code": 18,
+        "capital": "Ol Kalou"
+    },
+    {
+        "name": "Nyeri",
+        "code": 19,
+        "capital": "Nyeri"
+    },
+    {
+        "name": "Kirinyaga",
+        "code": 20,
+        "capital": "Kerugoya/Kutus"
+    },
+    {
+        "name": "Murang'a",
+        "code": 21,
+        "capital": "Murang'a"
+    },
+    {
+        "name": "Kiambu",
+        "code": 22,
+        "capital": "Kiambu"
+    },
+    {
+        "name": "Turkana",
+        "code": 23,
+        "capital": "Lodwar"
+    },
+    {
+        "name": "West pokot",
+        "code": 24,
+        "capital": "Kapenguria"
+    },
+    {
+        "name": "Samburu",
+        "code": 25,
+        "capital": "Maralal"
+    },
+    {
+        "name": "Trans nzoia",
+        "code": 26,
+        "capital": "Kitale"
+    },
+    {
+        "name": "Uasin gishu",
+        "code": 27,
+        "capital": "Eldoret"
+    },
+    {
+        "name": "Elgeyo marakwet",
+        "code": 28,
+        "capital": "Iten"
+    },
+    {
+        "name": "Nandi",
+        "code": 29,
+        "capital": "Kapsabet"
+    },
+    {
+        "name": "Baringo",
+        "code": 30,
+        "capital": "Kabarnet"
+    },
+    {
+        "name": "Laikipia",
+        "code": 31,
+        "capital": "Rumuruti"
+    },
+    {
+        "name": "Nakuru",
+        "code": 32,
+        "capital": "Nakuru"
+    },
+    {
+        "name": "Narok",
+        "code": 33,
+        "capital": "Narok"
+    },
+    {
+        "name": "Kajiado",
+        "code": 34
+    },
+    {
+        "name": "Kericho",
+        "code": 35,
+        "capital": "Kericho"
+    },
+    {
+        "name": "Bomet",
+        "code": 36,
+        "capital": "Bomet"
+    },
+    {
+        "name": "Kakamega",
+        "code": 37,
+        "capital": "Kakamega"
+    },
+    {
+        "name": "Vihiga",
+        "code": 38,
+        "capital": "Vihiga"
+    },
+    {
+        "name": "Bungoma",
+        "code": 39,
+        "capital": "Bungoma"
+    },
+    {
+        "name": "Busia",
+        "code": 40,
+        "capital": "Busia"
+    },
+    {
+        "name": "Siaya",
+        "code": 41,
+        "capital": "Siaya"
+    },
+    {
+        "name": "Kisumu",
+        "code": 42,
+        "capital": "Kisumu"
+    },
+    {
+        "name": "Homa bay",
+        "code": 43,
+        "capital": "Homa Bay"
+    },
+    {
+        "name": "Migori",
+        "code": 44,
+        "capital": "Migori"
+    },
+    {
+        "name": "Kisii",
+        "code": 45,
+        "capital": "Kisii"
+    },
+    {
+        "name": "Nyamira",
+        "code": 46,
+        "capital": "Nyamira"
+    },
+    {
+        "name": "Nairobi",
+        "code": 47,
+        "capital": "Nairobi City"
+    }
+]

package/src/patient-verification-HIE/assets/verification-assets.ts

@@ -0,0 +1,11 @@
+export const countries = [
+  { name: 'Kenya', initials: 'KE' },
+  { name: 'Uganda', initials: 'UG' },
+  { name: 'Tanzania', initials: 'TZ' },
+];
+
+export const verificationIdentifierTypes = [
+  { name: 'National ID', value: 'national-id' },
+  { name: 'Passport', value: 'passport' },
+  { name: 'Birth certificate number', value: 'birth-certificate' },
+];