@ampath/esm-patient-registration-app 6.0.1-pre.225 → 6.0.1-pre.229

package/src/patient-verification-HIE/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-HIE/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-HIE/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-HIE/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-HIE/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;
+  }>;
+}