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

package/src/billing/invoice/line-items/line-items.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { type LineItem } from '../../../shared/types';
+import DeleteBillLineItemModal from '../modal/delete-bill-item/delete-bill-item.modal';
+import EditBillItemModal from '../modal/edit-bill-item/edit-bill-item.modal';
+import { type Bill } from '../../types';
+interface LineItemsProps {
+  lineItems: LineItem[];
+  refresh: () => void;
+  bill?: Bill;
+}
+const LineItems: React.FC<LineItemsProps> = ({ lineItems, refresh, bill }) => {
+  const [selectedLineItem, setSelectedLineItem] = useState<LineItem>();
+  const [showDeleteModal, setShowDeleteModal] = useState<boolean>();
+  const [showEditModal, setShowEditModal] = useState<boolean>();
+  if (!lineItems || lineItems.length === 0) {
+    return <>No Data to Display</>;
+  }
+  const handleEditLineItem = (selectedLineItem: LineItem) => {
+    setSelectedLineItem(selectedLineItem);
+    setShowEditModal(true);
+  };
+  const handleDeleteLineItem = (selectedLineItem: LineItem) => {
+    setSelectedLineItem(selectedLineItem);
+    setShowDeleteModal(true);
+  };
+  const hideDeleteModal = () => {
+    setShowDeleteModal(false);
+    refresh();
+  };
+  const hideEditModal = () => {
+    setShowEditModal(false);
+    refresh();
+  };
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>Bill Item</TableHeader>
+            <TableHeader>Status</TableHeader>
+            <TableHeader>Quantity</TableHeader>
+            <TableHeader>Price</TableHeader>
+            <TableHeader>Total</TableHeader>
+            <TableHeader>Action</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {lineItems.map((item, index) => {
+            return (
+              <>
+                <TableRow id={item.uuid}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>
+                    {item.billableService}({item.priceName})
+                  </TableCell>
+                  <TableCell>{item.paymentStatus}</TableCell>
+                  <TableCell>{item.quantity}</TableCell>
+                  <TableCell>KES {item.price}</TableCell>
+                  <TableCell>KES {item.price * item.quantity}</TableCell>
+                  <TableCell>
+                    <>
+                      {bill.status === 'PENDING' ? (
+                        <>
+                          <OverflowMenu aria-label="overflow-menu">
+                            <OverflowMenuItem itemText="Edit" onClick={() => handleEditLineItem(item)} />
+                            <OverflowMenuItem itemText="Delete" onClick={() => handleDeleteLineItem(item)} />
+                          </OverflowMenu>
+                        </>
+                      ) : (
+                        <></>
+                      )}
+                    </>
+                  </TableCell>
+                </TableRow>
+              </>
+            );
+          })}
+        </TableBody>
+      </Table>
+      {showDeleteModal ? (
+        <>
+          <DeleteBillLineItemModal
+            lineItem={selectedLineItem}
+            onModalClose={hideDeleteModal}
+            onSuccessfullDeletion={hideDeleteModal}
+            open={showDeleteModal}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+
+      {showEditModal ? (
+        <>
+          <EditBillItemModal
+            lineItem={selectedLineItem}
+            onModalClose={hideEditModal}
+            onSuccessfullEdit={hideEditModal}
+            open={showEditModal}
+            bill={bill}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+export default LineItems;

package/src/billing/invoice/modal/delete-bill-item/delete-bill-item.modal.scss

@@ -0,0 +1,23 @@
+.deleteLineItemLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+    margin: 15px 15px;
+    .contentSection{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: 10px;
+        .details{
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+        }
+        .form{
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+        }
+    }
+}

package/src/billing/invoice/modal/delete-bill-item/delete-bill-item.modal.tsx

@@ -0,0 +1,114 @@
+import React, { useRef } from 'react';
+import {
+  Modal,
+  ModalBody,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TextArea,
+} from '@carbon/react';
+import { type LineItem } from '../../../../shared/types';
+import styles from './delete-bill-item.modal.scss';
+import LineItems from '../../line-items/line-items';
+import { deleteBillLineItem } from '../../bill.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+interface DeleteBillLineItemProps {
+  open: boolean;
+  lineItem: LineItem;
+  onModalClose: () => void;
+  onSuccessfullDeletion: () => void;
+}
+const DeleteBillLineItemModal: React.FC<DeleteBillLineItemProps> = ({
+  open,
+  lineItem,
+  onModalClose,
+  onSuccessfullDeletion,
+}) => {
+  const reasonRef = useRef<string>();
+
+  if (!lineItem) {
+    return <>No Line Item Selected</>;
+  }
+  const handleReasonText = (reason: string) => {
+    reasonRef.current = reason;
+  };
+  const handleBillItemDeletion = async () => {
+    try {
+      await deleteBillLineItem(lineItem.uuid, reasonRef.current);
+      showSnackbar({
+        kind: 'success',
+        title: 'Bill Item deleted successfully',
+        subtitle: 'Bill line item has been succesfully deleted',
+      });
+      onSuccessfullDeletion();
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error Deleting Bill Line Item',
+        subtitle:
+          error.message ?? 'An error occurred while deleting the bill line item. Kindly retry of contact support',
+      });
+    }
+  };
+  return (
+    <>
+      <Modal
+        modalHeading="Delete Bill Line item"
+        open={open}
+        size="md"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={handleBillItemDeletion}
+        primaryButtonText="Delete"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.deleteLineItemLayout}>
+            <div className={styles.contentSection}>
+              <div className={styles.details}>
+                <Table>
+                  <TableHead>
+                    <TableRow>
+                      <TableHeader>Bill Item</TableHeader>
+                      <TableHeader>Status</TableHeader>
+                      <TableHeader>Quantity</TableHeader>
+                      <TableHeader>Price</TableHeader>
+                      <TableHeader>Total</TableHeader>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    <TableRow id={lineItem.uuid}>
+                      <TableCell>{lineItem.billableService}</TableCell>
+                      <TableCell>{lineItem.paymentStatus}</TableCell>
+                      <TableCell>{lineItem.quantity}</TableCell>
+                      <TableCell>KES {lineItem.price}</TableCell>
+                      <TableCell>KES {lineItem.price * lineItem.quantity}</TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </div>
+              <div className={styles.form}>
+                <div className={styles.formRow}>
+                  <TextArea
+                    enableCounter
+                    helperText=""
+                    id="delete-reason"
+                    labelText="Delete Reason"
+                    maxCount={500}
+                    placeholder=""
+                    rows={4}
+                    onChange={(e) => handleReasonText(e.target.value)}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+export default DeleteBillLineItemModal;

package/src/billing/invoice/modal/edit-bill-item/edit-bill-item.modal.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import styles from './edit-bill-item.modal.scss';
+import { type LineItem } from '../../../../shared/types';
+import { type EditBillLineItemDto, type Bill } from '../../../types';
+import { Modal, ModalBody, TextInput } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { editBillLineItem } from '../../bill.resource';
+interface EditBillItemModalProps {
+  open: boolean;
+  lineItem: LineItem;
+  bill: Bill;
+  onModalClose: () => void;
+  onSuccessfullEdit: () => void;
+}
+const EditBillItemModal: React.FC<EditBillItemModalProps> = ({
+  open,
+  lineItem,
+  bill,
+  onModalClose,
+  onSuccessfullEdit,
+}) => {
+  const [newQuantity, setNewQuantity] = useState<number>();
+  if (!lineItem || !bill) {
+    return <>No Line item selected</>;
+  }
+  const isValidatePayload = (): boolean => {
+    if (!newQuantity || newQuantity < 1) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Invalid set Quantity',
+        subtitle: 'Please enter a valid quantity',
+      });
+      return false;
+    }
+    return true;
+  };
+  const handleSaveBillLineItem = async () => {
+    if (isValidatePayload()) {
+      const editBillLineItemDto = generateEditPayload();
+      try {
+        const resp = await editBillLineItem(bill.uuid, editBillLineItemDto);
+        if (resp) {
+          showSnackbar({
+            kind: 'success',
+            title: 'Edit Successfull',
+            subtitle: 'Bill Quantity has been edited successfully',
+          });
+        }
+        onSuccessfullEdit();
+      } catch (error) {
+        showSnackbar({
+          kind: 'error',
+          title: 'Invalid set Quantity',
+          subtitle: 'Please enter a valid quantity',
+        });
+      }
+    }
+  };
+  const newQuantityHandler = (newQty: number) => {
+    setNewQuantity(newQty);
+  };
+  const generateEditPayload = (): EditBillLineItemDto => {
+    const payload = {
+      cashPoint: bill.cashPoint.uuid,
+      cashier: bill.cashier.uuid,
+      lineItems: [
+        {
+          ...lineItem,
+          quantity: newQuantity,
+        },
+      ],
+      patient: bill.patient.uuid,
+      status: bill.status,
+      uuid: bill.uuid,
+    } as EditBillLineItemDto;
+    return payload;
+  };
+  return (
+    <>
+      <Modal
+        modalHeading="Edit Bill Line item"
+        open={open}
+        size="md"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={handleSaveBillLineItem}
+        primaryButtonText="Save"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.editLineItemLayout}>
+            <div className={styles.contentSection}>
+              <div className={styles.form}>
+                <div className={styles.formRow}>
+                  <TextInput
+                    id="name"
+                    labelText="Name"
+                    value={`${lineItem.billableService} (${lineItem.priceName}) ${lineItem.price}`}
+                    readOnly
+                  />
+                </div>
+                <div className={styles.formRow}>
+                  <TextInput id="Old Quantity" labelText="Current Quantity" value={`${lineItem.quantity}`} readOnly />
+                </div>
+                <div className={styles.formRow}>
+                  <TextInput
+                    id="quantity"
+                    labelText="Quantity"
+                    min={1}
+                    type="number"
+                    onChange={(e) => newQuantityHandler(parseInt(e.target.value))}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+export default EditBillItemModal;

package/src/billing/invoice/payment-details/payment-details.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type Payment } from '../../types';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+interface PaymentDetailsProps {
+  payments: Payment[];
+}
+const PaymentDetails: React.FC<PaymentDetailsProps> = ({ payments }) => {
+  if (!payments || payments.length === 0) {
+    return <>No Data to Display</>;
+  }
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>Payment Method</TableHeader>
+            <TableHeader>Amount Tendered</TableHeader>
+            <TableHeader>Date</TableHeader>
+            <TableHeader>Voided</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {payments.map((item, index) => {
+            return (
+              <>
+                <TableRow id={item.uuid}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>{item.instanceType.name}</TableCell>
+                  <TableCell>KES {item.amountTendered}</TableCell>
+                  <TableCell>{formatDate(parseDate(new Date(item.dateCreated).toISOString()))}</TableCell>
+                  <TableCell>{item.voided ? 'YES' : 'NO'}</TableCell>
+                </TableRow>
+              </>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+export default PaymentDetails;

package/src/billing/invoice/print-invoice/print-receipt.component.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Button } from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { getCoreTranslation, restBaseUrl } from '@openmrs/esm-framework';
+import styles from './print-receipt.scss';
+
+interface PrintReceiptProps {
+  billUuid: string;
+}
+
+const PrintReceipt: React.FC<PrintReceiptProps> = ({ billUuid }) => {
+  const { t } = useTranslation();
+  const [isRedirecting, setIsRedirecting] = useState(false);
+  const baseUrl = new URL(window.location.href);
+
+  const handlePrintReceiptClick = () => {
+    setIsRedirecting(true);
+    setTimeout(() => {
+      const pdfUrl = `${baseUrl.origin}/openmrs${restBaseUrl}/billing/receipt?billUuid=${billUuid}`;
+      const link = document.createElement('a');
+      link.href = pdfUrl;
+      link.download = `receipt_${billUuid}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      setIsRedirecting(false);
+    }, 1000);
+  };
+
+  return (
+    <Button
+      kind="secondary"
+      className={styles.button}
+      renderIcon={(props) => <Printer size={24} {...props} />}
+      onClick={handlePrintReceiptClick}
+      disabled={isRedirecting}
+    >
+      {isRedirecting ? getCoreTranslation('loading') : t('printReceipt', 'Print receipt')}
+    </Button>
+  );
+};
+
+export default PrintReceipt;

package/src/billing/invoice/print-invoice/print-receipt.scss

@@ -0,0 +1,14 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.configurableLink {
+  color: colors.$white;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+}
+
+.button {
+  margin-left: layout.$spacing-04;
+}

package/src/billing/types/index.ts

@@ -0,0 +1,84 @@
+import { type CashPoint, type BillableService, type LineItem } from '../../shared/types';
+
+export interface ApiLink {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Cashier {
+  uuid: string;
+  display: string;
+  links: ApiLink[];
+}
+
+export interface Patient {
+  uuid: string;
+  display: string;
+  voided: boolean;
+  links: ApiLink[];
+}
+
+export type PaymentStatus = 'PENDING' | 'PAID' | 'CANCELLED' | string;
+export type BillStatus = 'PENDING' | 'PAID' | 'CANCELLED' | string;
+
+export type Payment = {
+  uuid: string;
+  instanceType: {
+    uuid: string;
+    name: string;
+    description: string | null;
+    retired: boolean;
+  };
+  attributes: any[];
+  amount: number;
+  amountTendered: number;
+  dateCreated: number;
+  voided: boolean;
+  resourceVersion: string;
+};
+
+export interface Bill {
+  uuid: string;
+  receiptNumber: string;
+  status: BillStatus;
+  adjustmentReason: string | null;
+  adjustedBy: any[];
+  billAdjusted: string | null;
+  cashPoint: CashPoint;
+  cashier: Cashier;
+  dateCreated: string;
+  lineItems: LineItem[];
+  patient: Patient;
+  payments: Payment[];
+  resourceVersion: string;
+}
+
+export type PayBillDto = {
+  instanceType: string;
+  amountTendered: number;
+  amount: number;
+};
+export type EditLineItem = {
+  uuid: string;
+  display: string;
+  voided: boolean;
+  voidReason: string | null;
+  item: '';
+  billableService: string;
+  quantity: number;
+  price: number;
+  priceName: string;
+  priceUuid: string;
+  lineItemOrder: 0;
+  paymentStatus: PaymentStatus;
+  resourceVersion: string;
+};
+export type EditBillLineItemDto = {
+  cashPoint: string;
+  cashier: string;
+  lineItems: EditLineItem[];
+  patient: string;
+  status: BillStatus;
+  uuid: string;
+};

package/src/billing/utils/index.ts

@@ -0,0 +1,17 @@
+import { OpenmrsResource } from "@openmrs/esm-framework";
+
+export function generateUpdateBillLineItems(pendingBill, billableItems: Array<OpenmrsResource>) {
+    const lineItems = pendingBill.lineItems;
+    const updateLineItems = lineItems.map((l) => {
+        const billableService = billableItems.find(b => b?.name?.toUpperCase() === l?.billableService?.toUpperCase());
+        const servicePrice = billableService?.servicePrices?.find(s => s?.name?.toUpperCase() === l.priceName.toUpperCase())
+        return {
+            ...l,
+            billableService: billableService ? billableService.uuid : l.billableService,
+            price: billableService ? servicePrice?.price : l.price,
+            priceName: billableService ? servicePrice?.paymentMode?.name : l.priceName,
+            priceUuid: billableService ? servicePrice?.paymentMode?.uuid : l.priceUuid,
+        };
+    });
+    return updateLineItems;
+}