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

package/src/registry/modal/send-to-triage/send-to-triage.modal.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   Button,
   Checkbox,
-  InlineLoading,
+  ComboBox,
   Modal,
   ModalBody,
   Select,
@@ -13,13 +13,45 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  TextInput,
 } from '@carbon/react';
 import styles from './send-to-triage.modal.scss';
-import { type Patient, useVisitTypes, useSession, showSnackbar } from '@openmrs/esm-framework';
-import { type HieClient, type CreateVisitDto, type QueueEntryDto, type ServiceQueue } from '../../types';
-import { createQueueEntry, fetchServiceQueuesByLocationUuid } from '../../../resources/queue.resource';
+import { type Patient, useSession, showSnackbar, type Visit, useConfig } from '@openmrs/esm-framework';
+import {
+  type HieClient,
+  type CreateVisitDto,
+  type QueueEntryDto,
+  type ServiceQueue,
+  PaymentDetail,
+  type VisitAttribute,
+} from '../../types';
+import { createQueueEntry, getFacilityServiceQueues } from '../../../resources/queue.resource';
 import { QUEUE_PRIORITIES_UUIDS, QUEUE_STATUS_UUIDS } from '../../../shared/constants/concepts';
 import { createVisit } from '../../../resources/visit.resource';
+import {
+  createBill,
+  fetchBillableServices,
+  fetchCashPoints,
+  fetchPaymentModes,
+} from '../../../shared/services/billing.resource';
+import {
+  type PayableBillableService,
+  type ServicePrice,
+  type BillableService,
+  type PaymentMode,
+  type CreateBillDto,
+  type CashPoint,
+  type CreateOrderEncounterDto,
+} from '../../../shared/types';
+import { PatientCategories } from '../../../shared/constants/patient-category';
+import { VisitTypeUuids } from '../../../shared/constants/visit-types';
+import { type Bill } from '../../../billing/types';
+import { fetchPatientBills } from '../../../billing/invoice/bill.resource';
+import { type QueueEntry } from '../../../types/types';
+import { getActiveQueueEntryByPatientUuid } from '../../../service-queues/service-queues.resource';
+import { createOrderEncounter } from '../../../shared/services/encounters.resource';
+import { type ConfigObject } from '../../../config-schema';
+import { PatientTypes } from '../../../shared/constants/patient-type';
 
 interface SendToTriageModalProps {
   patients: Patient[];
@@ -42,51 +74,243 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
 }) => {
   const [selectedPatient, setSelectedPatient] = useState<Patient>();
   const [selectedVisitType, setSelectedVisitType] = useState<string>();
+  const [selectedPatientType, setSelectedPatientType] = useState<string>();
   const [serviceQueues, setServiceQueues] = useState<ServiceQueue[]>();
   const [selectedServiceQueue, setSelectedServiceQueue] = useState<string>();
+  const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
+  const [cashPoints, setCashPoints] = useState<CashPoint[]>([]);
+  const [selectedCashPoint, setSelectedCashPoint] = useState<CashPoint>(null);
+  const [selectedPaymentMode, setSelectedPaymentMode] = useState<PaymentMode>(null);
   const [selectedPriority, setSelectedPriority] = useState<string>('');
+  const [selectedPaymentDetail, setSelectedPaymentDetail] = useState<string>();
+  const [billableServices, setBillableServices] = useState<BillableService[]>([]);
+  const [servicePrices, setServicePrices] = useState<ServicePrice[]>([]);
+  const [filteredBillableServices, setFilteredBillableServices] = useState<ServicePrice[]>(null);
+  const [selectedBillableService, setSelectedBillableService] = useState<ServicePrice | null>(null);
+  const [selectedInsuranceScheme, setSelectedInsuranceScheme] = useState<string>('');
+  const [selectedInsurancePolicy, setSelectedInsurancePolicy] = useState<string>('');
+  const [selectedPatientCategory, setSelectedPatientCategory] = useState<string>('');
+  const [currentQueueEntry, setCurrentQueueEntry] = useState<QueueEntry>();
+  const [patientBills, setPatientBills] = useState<Bill[]>([]);
+  const [billCreated, setBillCreated] = useState<boolean>(false);
+  const [disableSubmission, setDisableSubmission] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
-  const visitTypes = useVisitTypes();
   const session = useSession();
   const locationUuid = session.sessionLocation.uuid;
+  const {
+    registrationBillableServices,
+    cashConsulationConceptUuid,
+    shaConsulationConceptUuid,
+    outPatientCareSettingUuid,
+    orderEncounterTypeUuid,
+    registrationServicequeues
+  } = useConfig<ConfigObject>();
+
+  const facilityCashPoints = useMemo(() => getfacilityCashpoints(), [cashPoints, locationUuid]);
+
+  const visitTypeOptions = useMemo(
+    () => [
+      {
+        text: 'OPD',
+        id: VisitTypeUuids.OPD_VISIT_TYPE_UUID,
+      },
+      {
+        text: 'Inpatient',
+        id: VisitTypeUuids.INPATIENT_VISIT_TYPE_UUID,
+      },
+    ],
+    [client],
+  );
+
+  const patientTypeOptions = useMemo(
+    () => [
+      {
+        text: 'Walk-In',
+        id: PatientTypes.WALK_IN_UUID,
+      },
+      {
+        text: 'Self-Referral',
+        id: PatientTypes.SELF_RERERRAL_UUID,
+      },
+     {
+        text: 'Referral from another Facility',
+        id: PatientTypes.REFERRAL_FROM_ANOTHER_FACILITY_UUID,
+      },
+      {
+        text: 'Referral from Community',
+        id: PatientTypes.REFERRED_BY_COMMUNITY_HEALTH_WORKER_UUID,
+      },
+    ],
+    [client],
+  );
+
+  const paymentDetails = Object.values(PaymentDetail).map((value) => {
+    return {
+      id: value,
+      label: value,
+    };
+  });
   useEffect(() => {
     getServiceQueues();
+    getPaymentMethods();
+    getBillableServices();
+    getCashPoints();
+    getPatientBills();
+    getPatientActiveQueue();
   }, [patients]);
   if (!patients) {
     return <>No Client data</>;
   }
-  const registerOnAfyaYangu = () => {
-    window.open('https://afyayangu.go.ke/', '_blank');
-  };
+
+  async function getPatientActiveQueue() {
+    if (patients && patients.length > 0) {
+      const activePatient = patients[0];
+      try {
+        const resp = await getActiveQueueEntryByPatientUuid(activePatient.uuid);
+        setCurrentQueueEntry(resp.length > 0 ? resp[0] : null);
+      } catch (error) {
+        showAlert('error', 'Error getting patient active queue', '');
+      }
+    }
+  }
+
+  async function getPatientBills() {
+    if (patients) {
+      let bills: Bill[] = [];
+      setPatientBills([]);
+      for (let i = 0; i < patients.length; i++) {
+        const resp = await fetchPatientBills(patients[i].uuid);
+        const todaysBills = getTodaysBills(resp);
+        setPatientBills(todaysBills);
+      }
+    }
+  }
+  function getTodaysBills(bills: Bill[]) {
+    const today = new Date();
+    return bills.filter((b) => {
+      const billDate = new Date(b.dateCreated);
+      return (
+        billDate.getFullYear() === today.getFullYear() &&
+        billDate.getMonth() === today.getMonth() &&
+        billDate.getDate() === today.getDate()
+      );
+    });
+  }
   const sendToTriage = async () => {
+    if (disableSubmission) {
+      showAlert(
+        'error',
+        'Form already Submitted',
+        'Form has already been submitted, please wait for the visit,queue and bill to be created',
+      );
+      return;
+    }
+    setDisableSubmission(true);
+    if (!validateVisitQueueBill()) {
+      setDisableSubmission(false);
+      return;
+    }
     setLoading(true);
     try {
-      const newVisit = await createPatientVisit();
+      const newVisit: Visit = await createPatientVisit();
       if (newVisit) {
-        const addToTriageQueueDto: QueueEntryDto = generateAddToTriageDto(newVisit.uuid);
+        const addToTriageQueueDto: QueueEntryDto = generateAddToTriageDto(newVisit);
         const queueEntryResp = await createQueueEntry(addToTriageQueueDto);
+
         if (queueEntryResp) {
           showAlert('success', 'Patient has succesfully been moved to the Triage queue', '');
+        }
+
+        // add bill if it was a paying client
+        let createBillResp = null;
+        if (selectedPaymentDetail === PaymentDetail.Paying) {
+          const createBillDto = generateCreateBillDto();
+          if (isValidCreateBillDto(createBillDto) && !billCreated) {
+            createBillResp = await createBill(createBillDto);
+            if (createBillResp) {
+              setBillCreated(true);
+              showAlert('success', 'Bill succesfully created', '');
+            }
+            // create consulation order
+            await createOrder(selectedPatient.uuid, newVisit.uuid);
+          } else {
+            return false;
+          }
+        }
+
+        if (
+          (queueEntryResp && PaymentDetail.Paying && (createBillResp || billCreated)) ||
+          (queueEntryResp && PaymentDetail.NonPaying)
+        ) {
           onModalClose({ success: true });
         }
       }
     } catch (error) {
-      showAlert('error', 'Error creating visit', '');
+      setDisableSubmission(false);
+      showAlert('error', error.message ?? 'Error creating visit', '');
     } finally {
       setLoading(false);
     }
   };
-  const generateAddToTriageDto = (newVisitUuid: string): QueueEntryDto => {
+  function validateVisitQueueBill(): boolean {
+    if (!selectedPatient) {
+      showAlert('error', 'Please select a patient', '');
+      return false;
+    }
+    if (!selectedPaymentDetail) {
+      showAlert('error', 'Please select a paying or non paying option', '');
+      return false;
+    }
+
+    if (!isValidServiceQueueSelected()) {
+      return false;
+    }
+
+    if (selectedPaymentDetail === PaymentDetail.Paying) {
+      if (!selectedPaymentMode) {
+        showAlert('error', 'Please select a payment method', '');
+        return false;
+      }
+      if (!selectedBillableService) {
+        showAlert('error', 'Please select a billable service', '');
+        return false;
+      }
+      if (!selectedCashPoint) {
+        showAlert('error', 'Please select a cashpoint', '');
+        return false;
+      }
+    }
+    if (selectedPaymentDetail === PaymentDetail.NonPaying) {
+      if (!selectedPatientCategory) {
+        showAlert('error', 'Please select a patient category', '');
+        return false;
+      }
+    }
+    if (!selectedVisitType) {
+      showAlert('error', 'Please select a visit type', '');
+      return false;
+    }
+    if (!selectedServiceQueue) {
+      showAlert('error', 'Please select a service queue', '');
+      return false;
+    }
+    if (!selectedPriority) {
+      showAlert('error', 'Please select a service queue priority', '');
+      return false;
+    }
+    return true;
+  }
+  const generateAddToTriageDto = (newVisit: Visit): QueueEntryDto => {
     const payload: QueueEntryDto = {
       visit: {
-        uuid: newVisitUuid,
+        uuid: newVisit.uuid,
       },
       queueEntry: {
         status: {
           uuid: QUEUE_STATUS_UUIDS.WAITING_UUID,
         },
         priority: {
-          uuid: selectedPriority,
+          uuid: selectedPriority ?? QUEUE_PRIORITIES_UUIDS.NORMAL_PRIORITY_UUID,
         },
         queue: {
           uuid: selectedServiceQueue,
@@ -94,7 +318,7 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
         patient: {
           uuid: selectedPatient.uuid,
         },
-        startedAt: new Date().toISOString(),
+        startedAt: newVisit.startDatetime,
         sortWeight: 0,
       },
     };
@@ -103,23 +327,104 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
   const onPatientSelect = (patient: Patient) => {
     setSelectedPatient(patient);
   };
-  const getServiceQueues = async () => {
-    const resp = await fetchServiceQueuesByLocationUuid(locationUuid);
-    if (resp && resp.results) {
-      setServiceQueues(resp.results);
-    }
-  };
-  const visitTypeChangeHandler = ($event: any) => {
-    const vt = $event.target.value as unknown as string;
+  const visitTypeChangeHandler = (selectedVisitType: { selectedItem: { id: string; text: string } }) => {
+    const vt = selectedVisitType.selectedItem.id;
     setSelectedVisitType(vt);
   };
+  const isValidServiceQueueSelected = () => {
+    if (!currentQueueEntry) {
+      return true;
+    }
+    if (currentQueueEntry.queue.uuid) {
+      showAlert(
+        'error',
+        'Patient already in queue',
+        `Patient is already in the ${currentQueueEntry.queue.display} queue, remove them first or contact support`,
+      );
+      return false;
+    }
+    return true;
+  };
   const serviceChangeHandler = ($event: any) => {
-    const sq = $event.target.value as unknown as string;
-    setSelectedServiceQueue(sq);
+    if (isValidServiceQueueSelected()) {
+      const sq = $event.target.value as unknown as string;
+      setSelectedServiceQueue(sq);
+    }
   };
   const priorityChangeHandler = (priorityUuid: string) => {
     setSelectedPriority(priorityUuid);
   };
+  const paymentDetailsHandler = (paymentDetailSelected: string) => {
+    setSelectedPaymentDetail(paymentDetailSelected);
+  };
+  const paymentMethodHandler = (selectedPaymentModeUuid: string) => {
+    const selectedPaymentMode = paymentModes.find((pm) => {
+      return pm.uuid === selectedPaymentModeUuid;
+    });
+    setSelectedPaymentMode(selectedPaymentMode);
+    const paymentModeBillableServices = getBillableServiceByPaymentMode(selectedPaymentMode);
+    setFilteredBillableServices(paymentModeBillableServices);
+    setSelectedInsuranceScheme('');
+    setSelectedInsurancePolicy('');
+    setSelectedPriority('');
+  };
+  const getBillableServiceByPaymentMode = (paymentMode: PaymentMode): PayableBillableService[] => {
+    const paymentBillableServices: ServicePrice[] = [];
+    servicePrices.forEach((sp) => {
+      if (sp.paymentMode) {
+        if (
+          sp.paymentMode.uuid === paymentMode.uuid &&
+          registrationBillableServices.includes(sp.billableService.uuid)
+        ) {
+          paymentBillableServices.push(sp);
+        }
+      }
+    });
+    return paymentBillableServices;
+  };
+  const billableServicesHandler = (selectedBillableServiceUuid: string) => {
+    const selectedBillableService = servicePrices.find((sp) => {
+      return sp.uuid === selectedBillableServiceUuid;
+    });
+    if (isValidBillableService(selectedBillableService)) {
+      setSelectedBillableService(selectedBillableService);
+    } else {
+      setSelectedBillableService(null);
+      showAlert('error', 'Existing bill', 'Patient has a similar bill');
+    }
+  };
+  const isValidBillableService = (selectedService: ServicePrice) => {
+    // check if patient has been billed for similar service
+    let isValid = true;
+    patientBills.forEach((b) => {
+      const lineItems = b.lineItems;
+      lineItems.forEach((l) => {
+        if (l.billableService === selectedService.billableService.display) {
+          isValid = false;
+        }
+      });
+    });
+    return isValid;
+  };
+  const cashPointsHandler = (selectedCashPointUuid: string) => {
+    const selectedCashPoint = cashPoints.find((cp) => {
+      return cp.uuid === selectedCashPointUuid;
+    });
+    setSelectedCashPoint(selectedCashPoint);
+  };
+  const patientTypeHandler = (selectedPatientType: { selectedItem: { id: string; text: string } }) => {
+    const pt = selectedPatientType.selectedItem.id;
+    setSelectedPatientType(pt);
+  };
+  const insuranceSchemeHandler = (selectedInsuranceScheme: string) => {
+    setSelectedInsuranceScheme(selectedInsuranceScheme);
+  };
+  const insurancePolicyHandler = (selectedInsurancePolicy: string) => {
+    setSelectedInsurancePolicy(selectedInsurancePolicy);
+  };
+  const patientCategoryHandler = (categoryUuid: string) => {
+    setSelectedPatientCategory(categoryUuid);
+  };
   const createPatientVisit = async () => {
     const visitDto = getCreateVisitDto();
     if (!isValidCreateVisitDto(visitDto)) {
@@ -149,16 +454,25 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
       showAlert('error', 'Please select a visit', '');
       return false;
     }
+    if(!selectedPatientType){
+      showAlert('error', 'Please select a patient type', '');
+      return false;
+    }
     return true;
   };
   const getCreateVisitDto = (): CreateVisitDto => {
-    return {
+    const visitAttributes = getVisitAttributes();
+    const visitDto: CreateVisitDto = {
       visitType: selectedVisitType,
       location: locationUuid,
       startDatetime: null,
       stopDatetime: null,
-      patient: selectedPatient?.uuid ?? '',
+      patient: selectedPatient?.uuid,
     };
+    if (visitAttributes.length > 0) {
+      visitDto['attributes'] = visitAttributes;
+    }
+    return visitDto;
   };
   const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
     showSnackbar({
@@ -168,6 +482,192 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
     });
   };
 
+  function getVisitAttributes(): VisitAttribute[] {
+    const attributes: VisitAttribute[] = [];
+    if (selectedInsuranceScheme) {
+      attributes.push({
+        attributeType: '3a988e33-a6c0-4b76-b924-01abb998944b',
+        value: selectedInsuranceScheme,
+      });
+    }
+    if (selectedInsurancePolicy) {
+      attributes.push({
+        attributeType: 'aac48226-d143-4274-80e0-264db4e368ee',
+        value: selectedInsurancePolicy,
+      });
+    }
+    if (selectedPaymentMode) {
+      attributes.push({
+        attributeType: '8553afa0-bdb9-4d3c-8a98-05fa9350aa85',
+        value: selectedPaymentMode.uuid,
+      });
+    }
+    if(selectedPatientType) {
+        attributes.push({
+          attributeType: 'fbc0702d-b4c9-4968-be63-af8ad3ad6239',
+          value: selectedPatientType,
+        });
+    }
+    if(selectedPaymentDetail === PaymentDetail.NonPaying){
+        attributes.push({
+            attributeType: 'df0362f9-782e-4d92-8bb2-3112e9e9eb3c',
+            value: 'true',
+        });
+    }
+    return attributes;
+  }
+  async function getServiceQueues() {
+    try {
+      const sqs = await getFacilityServiceQueues(locationUuid);
+      if (sqs && sqs.length > 0) {
+        const triageServiceQueues = getTriageServiceQueues(sqs);
+        setServiceQueues(triageServiceQueues);
+      }
+    } catch (e) {
+      showSnackbar({
+        kind: 'error',
+        title: 'An error occurred while fetching service queues',
+        subtitle: e.message ?? 'An error occurred while fetching service queues, please try agin',
+      });
+    }
+  }
+  function getTriageServiceQueues(serviceQueues: ServiceQueue[]){
+      return serviceQueues.filter((sq)=>{
+          return registrationServicequeues.includes(sq.uuid ?? '')
+      });
+  }
+
+  async function getPaymentMethods() {
+    const methods = await fetchPaymentModes();
+    setPaymentModes(methods);
+  }
+
+  async function getBillableServices() {
+    const billableServices = await fetchBillableServices();
+    setBillableServices(billableServices);
+    generateServiceTypesList(billableServices);
+  }
+
+  async function getCashPoints() {
+    const cp = await fetchCashPoints();
+    setCashPoints(cp);
+  }
+
+  function getfacilityCashpoints() {
+    return cashPoints.filter((cp) => {
+      return cp && cp.location?.uuid === locationUuid;
+    });
+  }
+
+  function generateServiceTypesList(billableServices: BillableService[]) {
+    const sp: ServicePrice[] = [];
+    for (let bs of billableServices) {
+      if (bs.servicePrices) {
+        const servicePrices = bs.servicePrices;
+        for (let servicePrice of servicePrices) {
+          sp.push(servicePrice);
+        }
+      }
+    }
+    setServicePrices(sp);
+  }
+
+  function generateCreateBillDto(): CreateBillDto {
+    const payload: CreateBillDto = {
+      lineItems: [
+        {
+          billableService: selectedBillableService.billableService.uuid,
+          quantity: 1,
+          price: selectedBillableService.price,
+          priceName: selectedBillableService.name,
+          priceUuid: selectedBillableService.uuid,
+          lineItemOrder: 0,
+          paymentStatus: 'PENDING',
+        },
+      ],
+      cashPoint: selectedCashPoint.uuid,
+      patient: selectedPatient.uuid,
+      status: 'PENDING',
+      payments: [],
+    };
+    return payload;
+  }
+  function isValidCreateBillDto(createBillDto: CreateBillDto): boolean {
+    if (!createBillDto.patient) {
+      showAlert('error', 'Please select a patient', '');
+      return false;
+    }
+    if (!createBillDto.status) {
+      showAlert('error', 'Bill does not have a status', '');
+      return false;
+    }
+    if (!createBillDto.cashPoint) {
+      showAlert('error', 'Please select a valid cashpoint', '');
+      return false;
+    }
+    if (!createBillDto.lineItems || createBillDto.lineItems.length === 0) {
+      showAlert('error', 'Please select a valid billable service', '');
+      return false;
+    }
+    return true;
+  }
+
+  function hasSelectedPaymentMode(paymentMode: string): boolean {
+    if (!selectedPaymentMode) {
+      return false;
+    }
+    return selectedPaymentMode.name.trim().toLowerCase().includes(paymentMode.trim().toLowerCase());
+  }
+
+  function generateOrderEncounterPayload(patientUuid: string, visitUuid: string): CreateOrderEncounterDto {
+    return {
+      patient: patientUuid,
+      location: locationUuid,
+      encounterType: orderEncounterTypeUuid,
+      visit: visitUuid,
+      obs: [],
+      orders: [
+        {
+          action: 'NEW',
+          type: 'order',
+          patient: patientUuid,
+          careSetting: outPatientCareSettingUuid,
+          orderer: session.currentProvider.uuid ?? 'pd25871c-1359-11df-a1f1-0026b9348838',
+          encounter: null,
+          concept: getOrderConcept(selectedPaymentMode),
+          accessionNumber: null,
+          urgency: 'ROUTINE',
+          scheduledDate: null,
+        },
+      ],
+    };
+  }
+  function getOrderConcept(paymentMode: PaymentMode) {
+    const paymentModeName = paymentMode.name.toLowerCase().trim();
+    if (paymentModeName.includes('cash')) {
+      return cashConsulationConceptUuid;
+    } else if (paymentModeName.includes('sha')) {
+      return shaConsulationConceptUuid;
+    } else {
+      return '';
+    }
+  }
+  async function createOrder(patientUuid: string, visitUuid: string) {
+    const createOrderPayload = generateOrderEncounterPayload(patientUuid, visitUuid);
+    try {
+      const resp = await createOrderEncounter(createOrderPayload);
+      if (resp) {
+        showAlert('success', 'Consultation order created', 'Consultation order has been succesfully created');
+      }
+    } catch (error) {
+      showAlert(
+        'error',
+        'Error creating consulation order',
+        'An error occurred while generating the consultation order. Please contact support',
+      );
+    }
+  }
+
   return (
     <>
       <Modal
@@ -175,8 +675,8 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
         size="md"
         onSecondarySubmit={() => onModalClose({ success: false })}
         onRequestClose={() => onModalClose({ success: false })}
-        onRequestSubmit={registerOnAfyaYangu}
-        primaryButtonText="Register on Afya Yangu"
+        onRequestSubmit={sendToTriage}
+        primaryButtonText={loading ? 'Sending...please wait' : 'Send to Triage'}
         secondaryButtonText="Cancel"
       >
         <ModalBody>
@@ -212,21 +712,144 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
                 </div>
                 <div className={styles.formSection}>
                   <div className={styles.formRow}>
+                     <div className={styles.formControl}>
+                          <ComboBox
+                            onChange={patientTypeHandler}
+                            id="patient-type-combobox"
+                            items={patientTypeOptions}
+                            itemToString={(item) => (item ? item.text : '')}
+                            titleText="Patient Type"
+                          />
+                    </div>
                     <div className={styles.formControl}>
-                      <Select id="visit-type" labelText="Select a Visit Type" onChange={visitTypeChangeHandler}>
+                      <Select
+                        id="payment-details"
+                        labelText="Payment Details"
+                        onChange={($event) => paymentDetailsHandler($event.target.value)}
+                      >
                         <SelectItem value="" text="Select" />;
-                        {visitTypes &&
-                          visitTypes.map((vt) => {
-                            return <SelectItem value={vt.uuid} text={vt.display} />;
-                          })}
+                        {paymentDetails.map((pd) => {
+                          return <SelectItem value={pd.id} text={pd.label} />;
+                        })}
                       </Select>
                     </div>
+                  </div>
+                </div>
+                <div className={styles.formSection}>
+                  {selectedPaymentDetail === PaymentDetail.Paying ? (
+                    <>
+                      <div className={styles.formRow}>
+                        <div className={styles.formControl}>
+                          <Select
+                            id="payment-method"
+                            labelText="Payment Method"
+                            onChange={($event) => paymentMethodHandler($event.target.value)}
+                          >
+                            <SelectItem value="" text="Select" />;
+                            {paymentModes &&
+                              paymentModes.map((pm) => {
+                                return <SelectItem value={pm.uuid} text={pm.name} />;
+                              })}
+                          </Select>
+                        </div>
+                        <div className={styles.formControl}>
+                          <Select
+                            id="billable-service"
+                            labelText="Billable Services"
+                            onChange={($event) => billableServicesHandler($event.target.value)}
+                          >
+                            <SelectItem value="" text="Select" />;
+                            {filteredBillableServices &&
+                              filteredBillableServices.map((sp) => {
+                                return (
+                                  <SelectItem
+                                    value={sp.uuid}
+                                    text={`${sp.billableService.display}(${sp.name}:${sp.price})`}
+                                  />
+                                );
+                              })}
+                          </Select>
+                        </div>
+                      </div>
+                      {hasSelectedPaymentMode('insurance') ? (
+                        <>
+                          <div className={styles.formRow}>
+                            <div className={styles.formControl}>
+                              <TextInput
+                                id="insurance-scheme"
+                                labelText="Insurance scheme"
+                                onChange={(e) => insuranceSchemeHandler(e.target.value)}
+                              />
+                            </div>
+                            <div className={styles.formControl}>
+                              <TextInput
+                                id="policy-number"
+                                labelText="Policy number"
+                                onChange={(e) => insurancePolicyHandler(e.target.value)}
+                              />
+                            </div>
+                          </div>
+                        </>
+                      ) : (
+                        <></>
+                      )}
+                      <div className={styles.formRow}>
+                        <div className={styles.formControl}>
+                          <Select
+                            id="cash-point"
+                            labelText="Cash Point"
+                            onChange={($event) => cashPointsHandler($event.target.value)}
+                          >
+                            <SelectItem value="" text="Select" />;
+                            {facilityCashPoints &&
+                              facilityCashPoints.map((cp) => {
+                                return <SelectItem value={cp.uuid} text={cp.name} />;
+                              })}
+                          </Select>
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <></>
+                  )}
+
+                  {selectedPaymentDetail === PaymentDetail.NonPaying ? (
+                    <>
+                      <div className={styles.formRow}>
+                        <div className={styles.formControl}>
+                          <Select
+                            id="patient-category"
+                            labelText="Patient Category"
+                            onChange={($event) => patientCategoryHandler($event.target.value)}
+                          >
+                            <SelectItem value="" text="Select" />;
+                            <SelectItem value={PatientCategories.CCC_PATIENT_UUID} text="CCC" />;
+                            <SelectItem value={PatientCategories.MCH_PATIENT_UUID} text="MCH" />;
+                          </Select>
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <></>
+                  )}
+                </div>
+                <div className={styles.formSection}>
+                  <div className={styles.formRow}>
+                    <div className={styles.formControl}>
+                      <ComboBox
+                        onChange={visitTypeChangeHandler}
+                        id="visit-type-combobox"
+                        items={visitTypeOptions}
+                        itemToString={(item) => (item ? item.text : '')}
+                        titleText="Visit Type"
+                      />
+                    </div>
                     <div className={styles.formControl}>
-                      <Select id="service" labelText="Select a Service" onChange={serviceChangeHandler}>
+                      <Select id="service" labelText="Select a Queue Service" onChange={serviceChangeHandler}>
                         <SelectItem value="" text="Select" />;
                         {serviceQueues &&
                           serviceQueues.map((sq) => {
-                            return <SelectItem value={sq.uuid} text={sq.display} />;
+                            return <SelectItem value={sq.uuid} text={`${sq.display}`} />;
                           })}
                       </Select>
                     </div>
@@ -239,7 +862,8 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
                         onChange={($event) => priorityChangeHandler($event.target.value)}
                       >
                         <SelectItem value="" text="Select" />;
-                        <SelectItem value={QUEUE_PRIORITIES_UUIDS.NORMAL_PRIORITY_UUID} text="NORMAL" />;
+                        <SelectItem value={QUEUE_PRIORITIES_UUIDS.NORMAL_PRIORITY_UUID} text="PRIORITY" />;
+                        <SelectItem value={QUEUE_PRIORITIES_UUIDS.NOT_URGENT_PRIORITY_UUID} text="NON URGENT" />;
                         <SelectItem value={QUEUE_PRIORITIES_UUIDS.EMERGENCY_PRIORITY_UUID} text="EMERGENCY" />;
                       </Select>
                     </div>
@@ -250,13 +874,7 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
               <></>
             )}
             <div className={styles.actionSection}>
-              {patients.length > 0 ? (
-                <div className={styles.btnContainer}>
-                  <Button kind="primary" onClick={sendToTriage}>
-                    {loading ? <InlineLoading description="Sending To Triage..." /> : 'Send To Triage'}
-                  </Button>
-                </div>
-              ) : (
+              {patients.length === 0 ? (
                 <>
                   <div className={styles.patientAction}>
                     <div className={styles.btnContainer}>
@@ -271,6 +889,8 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
                     </div>
                   </div>
                 </>
+              ) : (
+                <></>
               )}
             </div>
           </div>