@ampath/esm-dha-workflow-app 4.0.0-next.13 → 4.0.0-next.15

package/src/registry/registry.component.tsx

@@ -4,7 +4,6 @@ import {
   InlineLoading,
   RadioButton,
   RadioButtonGroup,
-  SideNav,
   Table,
   TableBody,
   TableCell,
@@ -24,14 +23,18 @@ import ClientDetailsModal from './modal/client-details-modal/client-details-moda
 import { searchPatientByCrNumber } from '../resources/patient-search.resource';
 import SendToTriageModal from './modal/send-to-triage/send-to-triage.modal';
 import { useNavigate } from 'react-router-dom';
+import { formatDependantDisplayData } from './utils/format-dependant-display-data';
+import { registerHieClientInAmrs } from '../resources/hie-amrs-automatic-registration.service';
+import { getErrorMessages } from './utils/error-handler';
 
 interface RegistryComponentProps {}
 const RegistryComponent: React.FC<RegistryComponentProps> = () => {
   const [identifierType, setIdentifierType] = useState<IdentifierType>('National ID');
   const [identifierValue, setIdentifierValue] = useState('');
   const [loading, setLoading] = useState<boolean>(false);
-  const [client, setClient] = useState<HieClient>();
-  const [amrsPatients, setAmrsPatient] = useState<Patient[]>();
+  const [principal, setPrincipal] = useState<HieClient>();
+  const [selectedDependant, setSelectedDependant] = useState<HieClient>();
+  const [amrsPatients, setAmrsPatients] = useState<Patient[]>([]);
   const [selectedPatient, setSelectedPatient] = useState<string>('principal');
   const [displayOtpModal, setDisplayOtpModal] = useState<boolean>(false);
   const [displayClientDetailsModal, setDisplayClientDetailsModal] = useState<boolean>(false);
@@ -60,7 +63,7 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
       if (patients.length === 0) throw new Error('No matching patient found in Client Registry.');
 
       const patient = patients[0];
-      setClient(patient);
+      setPrincipal(patient);
       showAlert('success', 'Client Data Loaded', 'Patient fetched successfully');
     } catch (err: any) {
       const errorMessage = err.message || 'Failed to fetch client data';
@@ -99,7 +102,6 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
   };
   const handleModelClose = () => {
     setDisplayOtpModal(false);
-    setDisplayClientDetailsModal(true);
   };
   const onClientDetailsModalClose = () => {
     setDisplayClientDetailsModal(false);
@@ -110,11 +112,24 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
   const handleEmergencyRegistration = () => {
     window.location.href = `${window.spaBase}/patient-registration`;
   };
+  const handleManualRegistration = () => {
+    setDisplaytriageModal(false);
+    handleEmergencyRegistration();
+  };
   const handleSendClientToTriage = async (crId: string) => {
     onClientDetailsModalClose();
     const resp = await searchPatientByCrNumber(crId);
     if (resp.totalCount > 0) {
-      setAmrsPatient(resp.results);
+      showAlert(
+        'success',
+        `${resp.totalCount} ${resp.totalCount > 0 ? 'Patients' : 'Patient'} found in the system with ${crId}`,
+        '',
+      );
+      setAmrsPatients(resp.results);
+      setDisplaytriageModal(true);
+    } else {
+      showAlert('error', 'Patient not found in the system', '');
+      setAmrsPatients([]);
       setDisplaytriageModal(true);
     }
   };
@@ -125,6 +140,59 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
     }
   };
   const handleSendToTriageModalSubmit = () => {};
+  const getPatient = (): HieClient => {
+    if (selectedPatient === 'principal') {
+      return principal;
+    } else if (selectedPatient === 'dependants') {
+      return selectedDependant;
+    } else {
+      return principal;
+    }
+  };
+  const handleSelectedDependant = (dependantId: string) => {
+    const dependants = principal.dependants;
+    if (dependants.length > 0) {
+      const dependant = dependants.find((d) => {
+        return d.result[0].id === dependantId;
+      });
+      if (dependant) {
+        setSelectedDependant(dependant.result[0] as unknown as HieClient);
+      }
+    }
+  };
+  const createAmrsPatient = async (client: HieClient) => {
+    try {
+      const resp = await registerHieClientInAmrs(selectedDependant, locationUuid);
+      if (resp) {
+        showAlert('success', 'Patient created succesfully', '');
+        setAmrsPatients([resp]);
+      }
+    } catch (e) {
+      const errorResp = e['responseBody'] ?? e.message;
+      showAlert('error', 'Error Creating Patient', '');
+      const errors = getErrorMessages(errorResp);
+      if (errors && errors.length > 0) {
+        for (let error of errors) {
+          showAlert('error', error, '');
+        }
+      }
+    }
+  };
+  const handleCancel = () => {
+    setPrincipal(null);
+    setSelectedDependant(null);
+    setAmrsPatients([]);
+    setSelectedPatient(null);
+    setIdentifierValue('');
+    setIdentifierType('National ID');
+    setDisplayClientDetailsModal(false);
+    setDisplayOtpModal(false);
+    setDisplaytriageModal(false);
+  };
+  const handleOtpSuccessfullVerification = () => {
+    setDisplayOtpModal(false);
+    setDisplayClientDetailsModal(true);
+  };
   return (
     <>
       <div className={styles.registryLayout}>
@@ -167,18 +235,13 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
                   >
                     {loading ? <InlineLoading description="Searching..." /> : 'Search'}
                   </Button>
-                  <Button
-                    className={styles.registrySearchBtn}
-                    kind="secondary"
-                    onClick={handleEmergencyRegistration}
-                    disabled={loading}
-                  >
+                  <Button className={styles.registrySearchBtn} kind="secondary" onClick={handleEmergencyRegistration}>
                     Emergency Registration
                   </Button>
                 </div>
               </div>
             </div>
-            {client ? (
+            {principal ? (
               <div className={styles.formRow}>
                 <div className={styles.hieData}>
                   <div className={styles.selectionHeader}>
@@ -204,108 +267,109 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
                         </Button>
                       </div>
                       <div className={styles.btnContainer}>
-                        <Button kind="secondary">Cancel</Button>
+                        <Button kind="secondary" onClick={handleCancel}>
+                          Cancel
+                        </Button>
                       </div>
                     </div>
                   </div>
-                  {selectedPatient === 'principal' ? (
-                    <>
-                      <Table>
-                        <TableHead>
-                          <TableRow>
-                            <TableHeader>Name</TableHeader>
-                            <TableHeader>CR</TableHeader>
-                            <TableHeader>Phone No</TableHeader>
-                            <TableHeader>ID No</TableHeader>
-                          </TableRow>
-                        </TableHead>
-                        <TableBody>
-                          <TableRow>
-                            <TableCell>
-                              {client.first_name} {maskExceptFirstAndLast(client.middle_name)}{' '}
-                              {maskExceptFirstAndLast(client.last_name)}
-                            </TableCell>
-                            <TableCell>{maskValue(client.id)}</TableCell>
-                            <TableCell>{maskValue(client.phone)}</TableCell>
-                            <TableCell>{maskValue(client.identification_number)}</TableCell>
-                          </TableRow>
-                        </TableBody>
-                      </Table>
-                    </>
-                  ) : (
-                    <></>
-                  )}
-                  {selectedPatient === 'dependants' ? (
-                    <>
-                      <Table>
-                        <TableHead>
-                          <TableRow>
-                            <TableHeader>Name</TableHeader>
-                            <TableHeader>CR</TableHeader>
-                            <TableHeader>Relationship</TableHeader>
-                          </TableRow>
-                        </TableHead>
-                        <TableBody>
-                          {client.dependants.map((d) => {
+                  <div className={styles.principalDependantSection}>
+                    {selectedPatient === 'principal' ? (
+                      <>
+                        <Table>
+                          <TableHead>
+                            <TableRow>
+                              <TableHeader>Name</TableHeader>
+                              <TableHeader>CR</TableHeader>
+                              <TableHeader>Phone No</TableHeader>
+                              <TableHeader>ID No</TableHeader>
+                            </TableRow>
+                          </TableHead>
+                          <TableBody>
+                            <TableRow>
+                              <TableCell>
+                                {principal.first_name} {maskExceptFirstAndLast(principal.middle_name)}{' '}
+                                {maskExceptFirstAndLast(principal.last_name)}
+                              </TableCell>
+                              <TableCell>{maskValue(principal.id)}</TableCell>
+                              <TableCell>{maskValue(principal.phone)}</TableCell>
+                              <TableCell>{maskValue(principal.identification_number)}</TableCell>
+                            </TableRow>
+                          </TableBody>
+                        </Table>
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                    {selectedPatient === 'dependants' ? (
+                      <>
+                        <RadioButtonGroup
+                          defaultSelected=""
+                          helperText=""
+                          invalidText=""
+                          legendText=""
+                          name="dependant-group"
+                          onChange={(dependantId) => handleSelectedDependant(dependantId as string)}
+                        >
+                          {principal.dependants.map((d) => {
                             const dependant = d.result[0];
                             const relationship = d.relationship;
                             return (
-                              <>
-                                <TableRow>
-                                  <TableCell>
-                                    {dependant.first_name} {maskExceptFirstAndLast(dependant.middle_name)}{' '}
-                                    {maskExceptFirstAndLast(dependant.last_name)}
-                                  </TableCell>
-                                  <TableCell>{maskValue(dependant.id)}</TableCell>
-                                  <TableCell>{relationship}</TableCell>
-                                </TableRow>
-                              </>
+                              <RadioButton
+                                id={dependant.id}
+                                labelText={formatDependantDisplayData(dependant, relationship)}
+                                value={dependant.id}
+                              />
                             );
                           })}
-                        </TableBody>
-                      </Table>
-                    </>
-                  ) : (
-                    <></>
-                  )}
+                        </RadioButtonGroup>
+                      </>
+                    ) : (
+                      <></>
+                    )}
 
-                  {displayOtpModal ? (
-                    <OtpVerificationModal
-                      requestCustomOtpDto={requestCustomOtpDto}
-                      phoneNumber={client.phone}
-                      open={displayOtpModal}
-                      onModalClose={handleModelClose}
-                    />
-                  ) : (
-                    <></>
-                  )}
+                    {displayOtpModal ? (
+                      <OtpVerificationModal
+                        requestCustomOtpDto={requestCustomOtpDto}
+                        phoneNumber={principal.phone}
+                        open={displayOtpModal}
+                        onModalClose={handleModelClose}
+                        onOtpSuccessfullVerification={handleOtpSuccessfullVerification}
+                      />
+                    ) : (
+                      <></>
+                    )}
 
-                  {client && displayClientDetailsModal ? (
-                    <>
-                      <ClientDetailsModal
-                        client={client}
-                        open={displayClientDetailsModal}
-                        onModalClose={onClientDetailsModalClose}
-                        onSubmit={handleClientDetailsSubmit}
-                        onSendClientToTriage={handleSendClientToTriage}
-                      />{' '}
-                    </>
-                  ) : (
-                    <></>
-                  )}
+                    {principal && displayClientDetailsModal ? (
+                      <>
+                        <ClientDetailsModal
+                          client={getPatient()}
+                          open={displayClientDetailsModal}
+                          onModalClose={onClientDetailsModalClose}
+                          onSubmit={handleClientDetailsSubmit}
+                          onSendClientToTriage={handleSendClientToTriage}
+                        />{' '}
+                      </>
+                    ) : (
+                      <></>
+                    )}
 
-                  {client && displaytriageModal ? (
-                    <>
-                      <SendToTriageModal
-                        patients={amrsPatients}
-                        open={displaytriageModal}
-                        onModalClose={onSendToTriageModalClose}
-                        onSubmit={handleSendToTriageModalSubmit}
-                      />
-                    </>
-                  ) : (
-                    <></>
-                  )}
+                    {principal && displaytriageModal ? (
+                      <>
+                        <SendToTriageModal
+                          client={getPatient()}
+                          patients={amrsPatients}
+                          open={displaytriageModal}
+                          onModalClose={onSendToTriageModalClose}
+                          onSubmit={handleSendToTriageModalSubmit}
+                          onCreateAmrsPatient={createAmrsPatient}
+                          onManualRegistration={handleManualRegistration}
+                        />
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                  </div>
                 </div>
               </div>
             ) : (

package/src/registry/types/index.ts

@@ -1,4 +1,4 @@
-import { Location, type Patient } from '@openmrs/esm-framework';
+import { type Location, type Patient } from '@openmrs/esm-framework';
 
 export type IdentifierType = 'National ID' | 'Alien ID' | 'Passport' | 'Mandate Number' | 'Refugee ID';
 
@@ -10,6 +10,12 @@ export const IDENTIFIER_TYPES: IdentifierType[] = [
   'Refugee ID',
 ];
 
+export enum OtpStatus {
+  Draft = 'DRAFT',
+  Sent = 'SENT',
+  Verified = 'VERIFIED',
+}
+
 export interface ValidateCustomOtpResponse {
   message: string;
   isValid?: boolean;
@@ -65,6 +71,7 @@ export enum HieIdentificationType {
   MandateNumber = 'Mandate Number',
   Cr = 'id',
   TemporaryDependantID = 'Temporary Dependant ID',
+  BirthCertificate = 'Birth Certificate',
 }
 
 export interface HieIdentifications {
@@ -221,3 +228,54 @@ export type CreateVisitDto = {
   stopDatetime: null | string;
   patient: string;
 };
+
+export interface GlobalError {
+  code: string;
+  message: string;
+}
+
+export interface AmrsErrorResponse {
+  message: string;
+  error: {
+    error: {
+      message: string;
+      code: string;
+      globalErrors?: GlobalError[];
+      fieldErrors?: any;
+    };
+  };
+}
+
+export interface CreatePersonDto {
+  gender?: string;
+  birthdate?: string;
+  dead?: boolean;
+  deathDate?: string;
+  names?: {
+    givenName?: string;
+    middleName?: string;
+    familyName?: string;
+  }[];
+  addresses?: {
+    country?: string;
+    address1?: string;
+    address2?: string;
+    address4?: string;
+    address7?: string;
+    address10?: string;
+    countyDistrict?: string;
+    stateProvince?: string;
+    cityVillage?: string;
+    longitude?: string;
+    latitude?: string;
+  }[];
+  attributes?: {
+    value: string | number;
+    attributeType: string;
+  }[];
+}
+
+export type CreatePatientDto = {
+  person: CreatePersonDto;
+  identifiers?: any;
+};

package/src/registry/utils/error-handler.ts

@@ -1,4 +1,37 @@
+import { type AmrsErrorResponse } from '../types';
+
 export function generateErrorMessage(error: any): string[] {
   const errors: string[] = [];
   return errors;
 }
+
+export function getErrorMessages(error: AmrsErrorResponse) {
+  const errors = [];
+  if (error && error.error) {
+    if (error.error.error) {
+      const globalErrors = error.error.error.globalErrors || null;
+      if (globalErrors) {
+        for (const err of globalErrors) {
+          errors.push(err.message);
+        }
+      }
+    } else if (error.error) {
+      if (error.error['globalErrors']) {
+        const globalErrors = error.error['globalErrors'] || null;
+        if (globalErrors) {
+          for (const err of globalErrors) {
+            errors.push(err.message);
+          }
+        }
+      } else if (error.error['message']) {
+        errors.push(error.error['message']);
+      }
+    } else {
+      errors.push(
+        error.error.error.message ||
+          'An error occurred while creating the patient. Please try again or contact support',
+      );
+    }
+  }
+  return errors;
+}

package/src/registry/utils/format-dependant-display-data.ts

@@ -0,0 +1,8 @@
+import { type HieClient } from '../types';
+import { maskExceptFirstAndLast } from './mask-data';
+
+export function formatDependantDisplayData(dependant: HieClient, relationship: string): string {
+  const stringData = `${dependant.first_name} ${maskExceptFirstAndLast(dependant.middle_name)} (${dependant.gender}) (DOB: ${dependant.date_of_birth}) (${relationship}) (CR: ${dependant.id})`;
+
+  return stringData;
+}