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

package/src/billing/extensions/visit-billing/visit-billing.extension.tsx

@@ -0,0 +1,409 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import styles from './visit-billing.extension.scss';
+import { Select, SelectItem, TextInput } from '@carbon/react';
+import {
+  createBill,
+  fetchBillableServices,
+  fetchCashPoints,
+  fetchPaymentModes,
+} from '../../../shared/services/billing.resource';
+import {
+  type ServicePrice,
+  type PaymentMode,
+  type PayableBillableService,
+  type CashPoint,
+  type BillableService,
+  type CreateBillDto,
+} from '../../../shared/types';
+import { PaymentDetail, type QueueEntryDto, type ServiceQueue } from '../../../registry/types';
+import { PatientCategories } from '../../../shared/constants/patient-category';
+import { QUEUE_PRIORITIES_UUIDS, QUEUE_STATUS_UUIDS } from '../../../shared/constants/concepts';
+import { showSnackbar, useConfig, useSession, useVisit, type Visit } from '@openmrs/esm-framework';
+
+interface VisitBillingFormProps {
+  patientUuid: string;
+  setExtraVisitInfo: (state) => void;
+}
+const VisitBillingForm: React.FC<VisitBillingFormProps> = ({ patientUuid, setExtraVisitInfo }) => {
+  const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
+  const [selectedPaymentDetail, setSelectedPaymentDetail] = useState<string>();
+  const [selectedBillableService, setSelectedBillableService] = useState<ServicePrice>(null);
+  const [filteredBillableServices, setFilteredBillableServices] = useState<ServicePrice[]>(null);
+  const [selectedPaymentMode, setSelectedPaymentMode] = useState<PaymentMode>(null);
+  const [selectedInsuranceScheme, setSelectedInsuranceScheme] = useState<string>('');
+  const [selectedInsurancePolicy, setSelectedInsurancePolicy] = useState<string>('');
+  const [servicePrices, setServicePrices] = useState<ServicePrice[]>([]);
+  const [selectedCashPoint, setSelectedCashPoint] = useState<CashPoint>(null);
+  const [selectedPriority, setSelectedPriority] = useState<string>('');
+  const [selectedPatientCategory, setSelectedPatientCategory] = useState<string>('');
+  const [selectedServiceQueue, setSelectedServiceQueue] = useState<string>();
+  const [serviceQueues, setServiceQueues] = useState<ServiceQueue[]>();
+  const [cashPoints, setCashPoints] = useState<CashPoint[]>([]);
+  const [billableServices, setBillableServices] = useState<BillableService[]>([]);
+  const { currentVisit } = useVisit(patientUuid);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const facilityCashPoints = useMemo(() => getfacilityCashpoints(), [cashPoints, locationUuid]);
+  const { registrationBillableServices } = useConfig();
+
+  useEffect(() => {
+    getPaymentMethods();
+    getBillableServices();
+    getCashPoints();
+  }, []);
+
+  useEffect(() => {
+    if (selectedBillableService && selectedCashPoint) {
+      setExtraVisitInfo({
+        handleCreateExtraVisitInfo: createPatientBill,
+        attributes: [],
+      });
+    }
+  }, [selectedBillableService, selectedCashPoint]);
+
+  async function getCashPoints() {
+    const cp = await fetchCashPoints();
+    setCashPoints(cp);
+  }
+
+  async function getBillableServices() {
+    const billableServices = await fetchBillableServices();
+    setBillableServices(billableServices);
+    generateServiceTypesList(billableServices);
+  }
+
+  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);
+  }
+
+  async function getPaymentMethods() {
+    const methods = await fetchPaymentModes();
+    setPaymentModes(methods);
+  }
+  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 paymentDetailsHandler = (paymentDetailSelected: string) => {
+    setSelectedPaymentDetail(paymentDetailSelected);
+  };
+  const paymentDetails = Object.values(PaymentDetail).map((value) => {
+    return {
+      id: value,
+      label: value,
+    };
+  });
+
+  const billableServicesHandler = (selectedBillableServiceUuid: string) => {
+    const selectedBillableService = servicePrices.find((sp) => {
+      return sp.uuid === selectedBillableServiceUuid;
+    });
+    setSelectedBillableService(selectedBillableService);
+  };
+
+  function hasSelectedPaymentMode(paymentMode: string): boolean {
+    if (!selectedPaymentMode) {
+      return false;
+    }
+    return selectedPaymentMode.name.trim().toLowerCase().includes(paymentMode.trim().toLowerCase());
+  }
+  const insuranceSchemeHandler = (selectedInsuranceScheme: string) => {
+    setSelectedInsuranceScheme(selectedInsuranceScheme);
+  };
+
+  const insurancePolicyHandler = (selectedInsurancePolicy: string) => {
+    setSelectedInsurancePolicy(selectedInsurancePolicy);
+  };
+
+  const cashPointsHandler = (selectedCashPointUuid: string) => {
+    const selectedCashPoint = cashPoints.find((cp) => {
+      return cp.uuid === selectedCashPointUuid;
+    });
+    setSelectedCashPoint(selectedCashPoint);
+  };
+
+  function getfacilityCashpoints() {
+    return cashPoints.filter((cp) => {
+      return cp && cp.location?.uuid === locationUuid;
+    });
+  }
+
+  const patientCategoryHandler = (categoryUuid: string) => {
+    setSelectedPatientCategory(categoryUuid);
+  };
+
+  function validateVisitQueueBill(): boolean {
+    if (!selectedPaymentDetail) {
+      showAlert('error', 'Please select a paying or non paying option', '');
+      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;
+      }
+    }
+    return true;
+  }
+
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+
+  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;
+  }
+
+  async function createPatientBill() {
+    if (!validateVisitQueueBill()) return;
+    try {
+      // add bill if it was a paying client
+      let createBillResp = null;
+      if (selectedPaymentDetail === PaymentDetail.Paying) {
+        const createBillDto = generateCreateBillDto();
+        if (isValidCreateBillDto(createBillDto)) {
+          createBillResp = await createBill(createBillDto);
+          if (createBillResp) {
+            showAlert('success', 'Bill succesfully created', '');
+          }
+        } else {
+          return false;
+        }
+      }
+    } catch (error) {
+      console.log({ error });
+    }
+  }
+
+  const generateAddToTriageDto = (newVisit: Visit): QueueEntryDto => {
+    const payload: QueueEntryDto = {
+      visit: {
+        uuid: newVisit.uuid,
+      },
+      queueEntry: {
+        status: {
+          uuid: QUEUE_STATUS_UUIDS.WAITING_UUID,
+        },
+        priority: {
+          uuid: selectedPriority ?? QUEUE_PRIORITIES_UUIDS.NORMAL_PRIORITY_UUID,
+        },
+        queue: {
+          uuid: selectedServiceQueue,
+        },
+        patient: {
+          uuid: patientUuid,
+        },
+        startedAt: newVisit.startDatetime,
+        sortWeight: 0,
+      },
+    };
+    return payload;
+  };
+
+  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: patientUuid,
+      status: 'PENDING',
+      payments: [],
+    };
+    return payload;
+  }
+
+  return (
+    <>
+      <div className={styles.visitLayout}>
+        <div className={styles.formSection}>
+          <div className={styles.formRow}>
+            <div className={styles.formControl}>
+              <Select
+                id="payment-details"
+                labelText="Payment Details"
+                onChange={($event) => paymentDetailsHandler($event.target.value)}
+              >
+                <SelectItem value="" text="Select" />;
+                {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>
+    </>
+  );
+};
+export default VisitBillingForm;

package/src/billing/invoice/bill.resource.ts

@@ -0,0 +1,47 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type EditBillLineItemDto, type Bill, type PayBillDto, type Payment } from '../types';
+
+export async function fetchBill(billUuid: string): Promise<Bill> {
+  const billUrl = `${restBaseUrl}/billing/bill/${billUuid}`;
+  const resp = await openmrsFetch<Bill>(billUrl);
+  const result = await resp.json();
+  return result;
+}
+
+export async function payBill(billUuid: string, payBillDto: PayBillDto): Promise<Payment> {
+  const billUrl = `${restBaseUrl}/billing/bill/${billUuid}/payment`;
+  const resp = await openmrsFetch<Bill>(billUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payBillDto),
+  });
+  const result = await resp.json();
+  return result;
+}
+
+export async function deleteBillLineItem(billLineItemUuid: string, deleteReason: string) {
+  const deleteBillLineItemUrl = `${restBaseUrl}/billing/billLineItem/${billLineItemUuid}?reason=${deleteReason}`;
+  const resp = await openmrsFetch<Bill>(deleteBillLineItemUrl, {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+  });
+  return resp;
+}
+
+export async function editBillLineItem(billUuid: string, editBillLineItemDto: EditBillLineItemDto): Promise<Payment> {
+  const billUrl = `${restBaseUrl}/billing/bill/${billUuid}`;
+  const resp = await openmrsFetch<Bill>(billUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(editBillLineItemDto),
+  });
+  const result = await resp.json();
+  return result;
+}
+
+export async function fetchPatientBills(patientUuid: string): Promise<Bill[]> {
+  const billUrl = `${restBaseUrl}/billing/bill?v=full&patientUuid=${patientUuid}`;
+  const resp = await openmrsFetch<Bill>(billUrl);
+  const result = await resp.json();
+  return result.results ?? [];
+}

package/src/billing/invoice/invoice-header/header-card/header-card.scss

@@ -0,0 +1,17 @@
+.headerCardLayout{
+    display: flex;
+    flex-direction: column;
+    width: 20%;
+    .headerTitle{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: 5px;
+    }
+    .headerDetails{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: 5px;
+    }
+}

package/src/billing/invoice/invoice-header/header-card/header-card.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './header-card.scss';
+interface HeaderCardProps {
+  title: string;
+  subTitle: string;
+}
+const HeaderCard: React.FC<HeaderCardProps> = ({ title, subTitle }) => {
+  return (
+    <>
+      <div className={styles.headerCardLayout}>
+        <div className={styles.headerTitle}>
+          <h5>{title}</h5>
+        </div>
+        <div className={styles.headerDetails}>
+          <p>{subTitle}</p>
+        </div>
+      </div>
+    </>
+  );
+};
+export default HeaderCard;

package/src/billing/invoice/invoice.scss

@@ -0,0 +1,113 @@
+.invoiceLayout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 15px;
+    padding: 2% 2%;
+
+    .invoiceHeader {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: 5px;
+        width: 100%;
+
+        .invoiceTitle {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+        }
+
+        .invoiceHeaderDetails {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            row-gap: 5px;
+        }
+    }
+
+    .contentSection {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: 5px;
+        width: 100%;
+
+        .lineItemsSection {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            row-gap: 15px;
+            width: 100%;
+
+            .lineItemsHeader {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+            }
+
+            .lineItemsData {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+            }
+        }
+
+        .paymentSection {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            row-gap: 10px;
+            margin-top: 15px;
+
+            .paymentSectionHeader {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+            }
+            .paymentDetails{
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                row-gap: 10px;
+            }
+
+            .paymentSectionContent {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+                column-gap: 10px;
+                margin-top: 15px;
+
+                .paymentMethodSection {
+                    display: flex;
+                    flex-direction: row;
+                    width: 70%;
+                    column-gap: 5px;
+                }
+
+                .processPaymentSection {
+                    display: flex;
+                    flex-direction: column;
+                    width: 30%;
+                    row-gap: 15px;
+                    .actionRow{
+                        display: flex;
+                        flex-direction: row;
+                        column-gap: 5px;
+                        width: 100%;
+                    }
+                }
+
+            }
+
+        }
+    }
+}
+
+.formRow{
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+    column-gap: 5px;
+}