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

package/src/registry/payment-details/payment-options/payment-options.scss

@@ -0,0 +1,13 @@
+.paymentOptionLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 200px;
+    row-gap: 15px;
+    .formRow{
+        display: flex;
+        flex-direction: column;
+        row-gap: 10px;
+        width: 100%;
+    }
+}

package/src/registry/payment-details/payment-options/payment-options.tsx

@@ -1,19 +1,66 @@
-import { RadioButton, RadioButtonGroup } from '@carbon/react';
-import React from 'react';
-const PaymentOptionsComponent: React.FC = () => {
-  const handleSelectedPatientOption = (p: string) => {};
+import React, { useEffect, useMemo, useState } from 'react';
+import styles from './payment-options.scss';
+import { Button, ComboBox } from '@carbon/react';
+import { fetchPaymentModes } from '../../../shared/services/billing.resource';
+import { type PaymentMode } from '../../../shared/types';
+import { showSnackbar } from '@openmrs/esm-framework';
+interface PaymentOptionsComponentProps {
+  onSelectPaymentMethod: (paymentMode: PaymentMode) => void;
+}
+const PaymentOptionsComponent: React.FC<PaymentOptionsComponentProps> = ({ onSelectPaymentMethod }) => {
+  const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
+  const paymentOptions = useMemo(() => generatePaymentTypeOptions(), [paymentModes]);
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<PaymentMode>();
+  useEffect(() => {
+    getPaymentMethods();
+  }, []);
+  async function getPaymentMethods() {
+    const methods = await fetchPaymentModes();
+    setPaymentModes(methods);
+  }
+  function generatePaymentTypeOptions() {
+    return paymentModes.map((p: PaymentMode) => {
+      return {
+        id: p.uuid,
+        text: p.name,
+      };
+    });
+  }
+  const handleSelectedPatientOption = (selectedPaymentOption: { selectedItem: { id: string; text: string } }) => {
+    const selectedMethod = paymentModes.find((p) => {
+      return p.uuid === selectedPaymentOption.selectedItem.id;
+    });
+    if (selectedMethod) {
+      setSelectedPaymentMethod(selectedMethod);
+    } else {
+      showSnackbar({
+        kind: 'error',
+        title: 'Missing Payment method',
+        subtitle: 'Please select a payment method',
+      });
+    }
+  };
+  const handleSavePaymentMethod = () => {
+    onSelectPaymentMethod(selectedPaymentMethod);
+  };
   return (
     <>
-      <RadioButtonGroup
-        defaultSelected="sha"
-        legendText="Patient"
-        onChange={(v) => handleSelectedPatientOption(v as string)}
-        name="payment-options-radio-group"
-      >
-        <RadioButton id="sha" labelText="Social Health Authority" value="sha" />
-        <RadioButton id="insurance" labelText="Other Insurance" value="other" />
-        <RadioButton id="cash" labelText="Cash" value="cash" />
-      </RadioButtonGroup>
+      <div className={styles.paymentOptionLayout}>
+        <div className={styles.formRow}>
+          <ComboBox
+            onChange={handleSelectedPatientOption}
+            id="payment-method-combobox"
+            items={paymentOptions}
+            itemToString={(item) => (item ? item.text : '')}
+            titleText="Select a Payment Method"
+          />
+        </div>
+        <div className={styles.formRow}>
+          <Button kind="primary" onClick={handleSavePaymentMethod}>
+            Save
+          </Button>
+        </div>
+      </div>
     </>
   );
 };

package/src/registry/registry.component.scss

@@ -35,7 +35,7 @@
     margin-top: 15px;
     display: flex;
     flex-direction: column;
-    width: 50%;
+    width: 80%;
     row-gap: 10px;
 }
 .btnContainer{
@@ -69,4 +69,21 @@
 }
 .registrySearchBtn{
     height: 30px;
+}
+.principalDependantSection{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    margin-top: 15px;
+}
+.dependantCard{
+    display: flex;
+    flex-direction: row;
+    width: 30%;
+}
+.dependantDetails{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  row-gap: 10px;
 }

package/src/registry/registry.component.tsx

@@ -4,7 +4,6 @@ import {
   InlineLoading,
   RadioButton,
   RadioButtonGroup,
-  SideNav,
   Table,
   TableBody,
   TableCell,
@@ -23,15 +22,20 @@ import { maskExceptFirstAndLast, maskValue } from './utils/mask-data';
 import ClientDetailsModal from './modal/client-details-modal/client-details-modal';
 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';
+import EligibilityTags from './eligibility/eliigibility-tags/eligibility-tags';
+import { IdentifierTypesUuids } from '../resources/identifier-types';
 
 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);
@@ -39,7 +43,6 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
   const [requestCustomOtpDto, setRequestCustomOtpDto] = useState<RequestCustomOtpDto>();
   const session = useSession();
   const locationUuid = session.sessionLocation.uuid;
-  const navigate = useNavigate();
 
   const handleSearchPatient = async () => {
     setLoading(true);
@@ -57,18 +60,23 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
       const result = await fetchClientRegistryData(payload);
       const patients = Array.isArray(result) ? result : [];
 
-      if (patients.length === 0) throw new Error('No matching patient found in Client Registry.');
+      if (patients.length === 0) {
+        handleCancel();
+        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';
+      handleCancel();
       showAlert('error', 'Fetch Failed', errorMessage);
     } finally {
       setLoading(false);
     }
   };
+
   const isValidCustomSmsPayload = (payload: RequestCustomOtpDto): boolean => {
     if (!payload.identificationNumber) {
       showAlert('error', 'Please enter a valid identification number', '');
@@ -99,7 +107,6 @@ const RegistryComponent: React.FC<RegistryComponentProps> = () => {
   };
   const handleModelClose = () => {
     setDisplayOtpModal(false);
-    setDisplayClientDetailsModal(true);
   };
   const onClientDetailsModalClose = () => {
     setDisplayClientDetailsModal(false);
@@ -110,21 +117,104 @@ 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}`,
+        '',
+      );
+      const validPatients = validateAmrsPatient(crId, resp.results ?? []);
+      setAmrsPatients(validPatients);
+      setDisplaytriageModal(true);
+    } else {
+      showAlert('error', 'Patient not found in the system', '');
+      setAmrsPatients([]);
       setDisplaytriageModal(true);
     }
   };
+  const validateAmrsPatient = (crNo: string, patients: Patient[]) => {
+    return patients.filter((p) => {
+      return p.identifiers.some((id) => {
+        return id.identifier === crNo && id.identifierType.uuid === IdentifierTypesUuids.CLIENT_REGISTRY_NO_UUID;
+      });
+    });
+  };
   const onSendToTriageModalClose = (modalCloseResp?: { success: boolean }) => {
     setDisplaytriageModal(false);
     if (modalCloseResp && modalCloseResp.success) {
-      navigate('/triage');
+      window.location.href = `${window.spaBase}/home/triage`;
     }
   };
   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 () => {
+    const patient = getPatient();
+    if (!patient) {
+      showAlert('error', 'Principal or dependant not selected', '');
+      return;
+    }
+    try {
+      const resp = await registerHieClientInAmrs(patient, 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);
+    setSelectedPatient('principal');
+  };
+  const handleOtpSuccessfullVerification = () => {
+    setDisplayOtpModal(false);
+    setDisplayClientDetailsModal(true);
+  };
+  const registerOnAfyaYangu = () => {
+    window.open('https://afyayangu.go.ke/', '_blank');
+  };
   return (
     <>
       <div className={styles.registryLayout}>
@@ -167,18 +257,20 @@ 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>
+                  {!principal ? (
+                    <Button className={styles.registrySearchBtn} kind="tertiary" onClick={registerOnAfyaYangu}>
+                      Register on Afya Yangu
+                    </Button>
+                  ) : (
+                    <></>
+                  )}
                 </div>
               </div>
             </div>
-            {client ? (
+            {principal ? (
               <div className={styles.formRow}>
                 <div className={styles.hieData}>
                   <div className={styles.selectionHeader}>
@@ -204,108 +296,147 @@ 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) => {
-                            const dependant = d.result[0];
-                            const relationship = d.relationship;
-                            return (
+                  <div className={styles.principalDependantSection}>
+                    {selectedPatient === 'principal' ? (
+                      <>
+                        <Table>
+                          <TableHead>
+                            <TableRow>
+                              <TableHeader>Name</TableHeader>
+                              <TableHeader>CR</TableHeader>
+                              <TableHeader>Phone No</TableHeader>
+                              <TableHeader>ID No</TableHeader>
+                              <TableHeader>Eligibility Status</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>
+                              <TableCell>
+                                <EligibilityTags crId={principal.id} locationUuid={locationUuid} />
+                              </TableCell>
+                            </TableRow>
+                          </TableBody>
+                        </Table>
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                    {selectedPatient === 'dependants' ? (
+                      <>
+                        <div className={styles.dependantDetails}>
+                          <div>
+                            <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 (
+                                  <RadioButton
+                                    id={dependant.id}
+                                    labelText={formatDependantDisplayData(dependant, relationship)}
+                                    value={dependant.id}
+                                  />
+                                );
+                              })}
+                            </RadioButtonGroup>
+                          </div>
+                          <div>
+                            {selectedDependant ? (
                               <>
-                                <TableRow>
-                                  <TableCell>
-                                    {dependant.first_name} {maskExceptFirstAndLast(dependant.middle_name)}{' '}
-                                    {maskExceptFirstAndLast(dependant.last_name)}
-                                  </TableCell>
-                                  <TableCell>{maskValue(dependant.id)}</TableCell>
-                                  <TableCell>{relationship}</TableCell>
-                                </TableRow>
+                                <Table>
+                                  <TableHead>
+                                    <TableRow>
+                                      <TableHeader>Name</TableHeader>
+                                      <TableHeader>CR</TableHeader>
+                                      <TableHeader>Eligibility Status</TableHeader>
+                                    </TableRow>
+                                  </TableHead>
+                                  <TableBody>
+                                    <TableRow>
+                                      <TableCell>
+                                        {selectedDependant.first_name}{' '}
+                                        {maskExceptFirstAndLast(selectedDependant.middle_name)}{' '}
+                                        {maskExceptFirstAndLast(selectedDependant.last_name)}
+                                      </TableCell>
+                                      <TableCell>{maskValue(selectedDependant.id)}</TableCell>
+                                      <TableCell>
+                                        <EligibilityTags crId={selectedDependant.id} locationUuid={locationUuid} />
+                                      </TableCell>
+                                    </TableRow>
+                                  </TableBody>
+                                </Table>
                               </>
-                            );
-                          })}
-                        </TableBody>
-                      </Table>
-                    </>
-                  ) : (
-                    <></>
-                  )}
+                            ) : (
+                              <></>
+                            )}
+                          </div>
+                        </div>
+                      </>
+                    ) : (
+                      <></>
+                    )}
 
-                  {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/registry.resource.ts

@@ -1,4 +1,4 @@
-import { HIE_BASE_URL } from '../shared/constants';
+import { getHieBaseUrl } from '../shared/utils/get-base-url';
 import {
   type ClientRegistrySearchRequest,
   type RequestCustomOtpDto,
@@ -9,7 +9,7 @@ import {
 
 export type ClientRegistrySearchResponse = any[];
 
-async function postJson<T>(url: string, payload: unknown): Promise<T> {
+export async function postJson<T>(url: string, payload: unknown): Promise<T> {
   const response = await fetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -25,7 +25,8 @@ async function postJson<T>(url: string, payload: unknown): Promise<T> {
 }
 
 export async function requestCustomOtp(payload: RequestCustomOtpDto): Promise<RequestCustomOtpResponse> {
-  const url = `${HIE_BASE_URL}/client/send-custom-otp`;
+  const hieBaseUrl = await getHieBaseUrl();
+  const url = `${hieBaseUrl}/client/send-custom-otp`;
   const formattedPayload = {
     identificationNumber: payload.identificationNumber,
     identificationType: payload.identificationType,
@@ -35,7 +36,8 @@ export async function requestCustomOtp(payload: RequestCustomOtpDto): Promise<Re
 }
 
 export async function validateCustomOtp(payload: ValidateHieCustomOtpDto): Promise<ValidateCustomOtpResponse> {
-  const url = `${HIE_BASE_URL}/client/validate-custom-otp`;
+  const hieBaseUrl = await getHieBaseUrl();
+  const url = `${hieBaseUrl}/client/validate-custom-otp`;
   const formattedPayload = {
     sessionId: payload.sessionId,
     otp: payload.otp,
@@ -47,7 +49,8 @@ export async function validateCustomOtp(payload: ValidateHieCustomOtpDto): Promi
 export async function fetchClientRegistryData(
   payload: ClientRegistrySearchRequest,
 ): Promise<ClientRegistrySearchResponse> {
-  const url = `${HIE_BASE_URL}/client/search`;
+  const hieBaseUrl = await getHieBaseUrl();
+  const url = `${hieBaseUrl}/client/search`;
   const formattedPayload = {
     identificationNumber: payload.identificationNumber,
     identificationType: payload.identificationType,