@palladium-ethiopia/esm-billing-app 5.4.2-pre.30

package/src/invoice/invoice-actions.component.tsx

@@ -0,0 +1,240 @@
+import { Button, Popover, PopoverContent } from '@carbon/react';
+import { Close, Printer, Wallet, FolderOpen, BaggageClaim } from '@carbon/react/icons';
+import {
+  launchWorkspace,
+  restBaseUrl,
+  showModal,
+  UserHasAccess,
+  useFeatureFlag,
+  useVisit,
+  useVisitContextStore,
+  defaultVisitCustomRepresentation,
+  navigate,
+  showSnackbar,
+  showToast,
+  updateVisit,
+} from '@openmrs/esm-framework';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { mutate } from 'swr';
+import { MappedBill, LineItem } from '../types';
+import { spaBasePath } from '../constants';
+import { useCheckShareGnum } from './invoice.resource';
+import styles from './invoice.scss';
+import startCase from 'lodash-es/startCase';
+import { useCurrencyFormatting } from '../helpers/currency';
+
+interface InvoiceActionsProps {
+  readonly bill: MappedBill;
+  readonly selectedLineItems?: LineItem[];
+  readonly activeVisit?: any;
+}
+
+export function InvoiceActions({ bill, selectedLineItems = [], activeVisit }: InvoiceActionsProps) {
+  const { t } = useTranslation();
+  const { format: formatCurrency } = useCurrencyFormatting();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { billUuid, patientUuid } = useParams();
+  const { checkSHARegNum } = useCheckShareGnum();
+  const { patientUuid: visitStorePatientUuid, manuallySetVisitUuid } = useVisitContextStore();
+  const isProcessClaimsFormEnabled = useFeatureFlag('healthInformationExchange');
+
+  const isInsurancePayment = (payments) => {
+    return payments?.some((payment) => payment.instanceType.name === 'Insurance');
+  };
+
+  const isShaFacilityStatusValid =
+    checkSHARegNum?.registrationNumber && checkSHARegNum.registrationNumber.trim() !== '';
+
+  const launchBillCloseOrReopenModal = (action: 'close' | 'reopen') => {
+    const dispose = showModal('bill-action-modal', {
+      closeModal: () => dispose(),
+      bill: bill,
+      action,
+    });
+  };
+
+  const shouldCloseBill = bill.balance === 0 && !bill.closed;
+
+  const handlePrint = (documentType: string, documentTitle: string) => {
+    const dispose = showModal('print-preview-modal', {
+      onClose: () => dispose(),
+      title: documentTitle,
+      documentUrl: `/openmrs${restBaseUrl}/cashier/print?documentType=${documentType}&billId=${bill?.id}`,
+    });
+  };
+
+  const mutateClaimForm = async () => {
+    const activeVisitUrlSuffix = `?patient=${patientUuid}&v=${defaultVisitCustomRepresentation}&includeInactive=false`;
+    const retrospectiveVisitUuid = patientUuid && visitStorePatientUuid == patientUuid ? manuallySetVisitUuid : null;
+    const retrospectiveVisitUrlSuffix = `/${retrospectiveVisitUuid}?v=${defaultVisitCustomRepresentation}`;
+    const activeVisitUrl = `${restBaseUrl}/visit${activeVisitUrlSuffix}`;
+    const retroVisitUrl = `${restBaseUrl}/visit${retrospectiveVisitUrlSuffix}`;
+    await mutate((key) => typeof key === 'string' && (key.startsWith(activeVisitUrl) || key.startsWith(retroVisitUrl)));
+  };
+
+  const handleEndVisit = async () => {
+    if (activeVisit) {
+      const endVisitPayload = {
+        stopDatetime: new Date(),
+      };
+
+      const abortController = new AbortController();
+      try {
+        await updateVisit(activeVisit.uuid, endVisitPayload, abortController);
+        await mutateClaimForm();
+        showSnackbar({
+          isLowContrast: true,
+          kind: 'success',
+          subtitle: t('visitEndSuccessssfully', 'visit ended successfully'),
+          title: t('visitEnded', 'Visit ended'),
+        });
+      } catch (error) {
+        showSnackbar({
+          title: t('errorEndingVisit', 'Error ending visit'),
+          kind: 'error',
+          isLowContrast: false,
+          subtitle: error?.message,
+        });
+      }
+    }
+  };
+
+  const handleViewClaims = async () => {
+    if (!isShaFacilityStatusValid) {
+      showToast({
+        critical: true,
+        kind: 'warning',
+        title: t('shaFacilityLicenseNumberRequired', 'Facility license number Required'),
+        description: t(
+          'shaFacilityLicenseNumbernRequiredDescription',
+          'Facility license number is required to process claims. Please update facility license number details.',
+        ),
+      });
+      return;
+    }
+
+    if (activeVisit) {
+      await handleEndVisit();
+      navigate({ to: `${spaBasePath}/accounting/patient/${patientUuid}/${billUuid}/claims` });
+    } else {
+      navigate({ to: `${spaBasePath}/accounting/patient/${patientUuid}/${billUuid}/claims` });
+    }
+  };
+
+  return (
+    <div className="invoiceSummaryActions">
+      <Popover isTabTip align="bottom-right" onKeyDown={() => {}} onRequestClose={() => setIsOpen(false)} open={isOpen}>
+        <button
+          className={styles.printButton}
+          aria-expanded
+          aria-label="Settings"
+          onClick={() => setIsOpen(!isOpen)}
+          type="button">
+          <span className={styles.printButtonContent}>
+            <span className={styles.printButtonText}>{t('print', 'Print')}</span>
+            <Printer />
+          </span>
+        </button>
+        <PopoverContent>
+          <div className={styles.popoverContent}>
+            <Button
+              kind="ghost"
+              size="sm"
+              onClick={() =>
+                handlePrint(
+                  'invoice',
+                  `${t('invoice', 'Invoice')} ${bill?.receiptNumber} - ${startCase(bill?.patientName)}`,
+                )
+              }
+              renderIcon={Printer}>
+              {t('printInvoice', 'Print Invoice')}
+            </Button>
+            <Button
+              kind="ghost"
+              size="sm"
+              onClick={() => {
+                const dispose = showModal('print-preview-modal', {
+                  onClose: () => dispose(),
+                  title: `${t('receipt', 'Receipt')} ${bill?.receiptNumber} - ${startCase(bill?.patientName)}`,
+                  documentUrl: `/openmrs${restBaseUrl}/cashier/receipt?billId=${bill.id}`,
+                });
+              }}
+              renderIcon={Printer}>
+              {t('printReceipt', 'Print Receipt')}
+            </Button>
+            <Button
+              kind="ghost"
+              size="sm"
+              onClick={() =>
+                handlePrint(
+                  'billstatement',
+                  `${t('billStatement', 'Bill Statement')} ${bill?.receiptNumber} - ${startCase(bill?.patientName)}`,
+                )
+              }
+              renderIcon={Printer}>
+              {t('printBillStatement', 'Print Bill Statement')}
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+      {shouldCloseBill && (
+        <UserHasAccess privilege="Close Cashier Bills">
+          <Button
+            kind="danger--ghost"
+            size="sm"
+            renderIcon={Close}
+            iconDescription="Add"
+            tooltipPosition="right"
+            onClick={() => launchBillCloseOrReopenModal('close')}>
+            {t('closeBill', 'Close Bill')}
+          </Button>
+        </UserHasAccess>
+      )}
+      {bill?.closed && (
+        <UserHasAccess privilege="Reopen Cashier Bills">
+          <Button
+            kind="ghost"
+            size="sm"
+            renderIcon={FolderOpen}
+            iconDescription="Add"
+            tooltipPosition="right"
+            onClick={() => launchBillCloseOrReopenModal('reopen')}>
+            {t('reopen', 'Reopen')}
+          </Button>
+        </UserHasAccess>
+      )}
+      <Button
+        kind="ghost"
+        size="sm"
+        renderIcon={Wallet}
+        iconDescription="Add"
+        tooltipPosition="right"
+        onClick={() =>
+          launchWorkspace('payment-workspace', {
+            bill,
+            workspaceTitle: t('additionalPayment', 'Additional Payment (Balance {{billBalance}})', {
+              billBalance: formatCurrency(bill.balance),
+            }),
+          })
+        }>
+        {t('additionalPayment', 'Additional Payment')}
+      </Button>
+
+      {isProcessClaimsFormEnabled && isInsurancePayment(bill?.payments) && (
+        <Button
+          onClick={handleViewClaims}
+          disabled={bill?.status !== 'PAID'}
+          kind="danger"
+          size="sm"
+          renderIcon={BaggageClaim}
+          iconDescription="Add"
+          tooltipPosition="bottom">
+          {activeVisit ? t('endVisitAndClaim', 'End visit and Process claims') : t('claim', 'Process claims')}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/invoice/invoice-table.component.tsx

@@ -0,0 +1,202 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import fuzzy from 'fuzzy';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  TableSelectRow,
+  Tile,
+  type DataTableHeader,
+  type DataTableRow,
+} from '@carbon/react';
+import { isDesktop, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { LineItem, MappedBill, PaymentStatus } from '../types';
+import styles from './invoice-table.scss';
+
+type InvoiceTableProps = {
+  bill: MappedBill;
+  isSelectable?: boolean;
+  isLoadingBill?: boolean;
+  onSelectItem?: (selectedLineItems: LineItem[]) => void;
+};
+
+const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true, isLoadingBill, onSelectItem }) => {
+  const { t } = useTranslation();
+  const { lineItems } = bill;
+  const paidLineItems = lineItems?.filter((item) => item.paymentStatus === 'PAID') ?? [];
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const [selectedLineItems, setSelectedLineItems] = useState(lineItems ?? []);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+
+  // Notify parent component when all items are selected initially or when lineItems change
+  useEffect(() => {
+    if (lineItems && lineItems.length > 0) {
+      setSelectedLineItems(lineItems);
+      if (onSelectItem) {
+        onSelectItem(lineItems);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lineItems?.length]);
+  const filteredLineItems = useMemo(() => {
+    if (!debouncedSearchTerm) {
+      return lineItems;
+    }
+
+    return debouncedSearchTerm
+      ? fuzzy
+          .filter(debouncedSearchTerm, lineItems, {
+            extract: (lineItem: LineItem) => `${lineItem.item}`,
+          })
+          .sort((r1, r2) => r1.score - r2.score)
+          .map((result) => result.original)
+      : lineItems;
+  }, [debouncedSearchTerm, lineItems]);
+
+  const tableHeaders = [
+    { header: 'No', key: 'no' },
+    { header: 'Bill item', key: 'billItem' },
+    { header: 'Bill code', key: 'billCode' },
+    { header: 'Status', key: 'status' },
+    { header: 'Quantity', key: 'quantity' },
+    { header: 'Price', key: 'price' },
+    { header: 'Total', key: 'total' },
+  ];
+  const processBillItem = (item) => (item?.item || item?.billableService)?.split(':')[1];
+
+  const tableRows = useMemo(
+    () =>
+      filteredLineItems?.map((item, index) => {
+        return {
+          no: `${index + 1}`,
+          id: `${item.uuid}`,
+          billItem: processBillItem(item),
+          billCode: bill.receiptNumber,
+          status: item.paymentStatus,
+          quantity: item.quantity,
+          price: item.price,
+          total: item.price * item.quantity,
+        };
+      }) ?? [],
+    [bill.receiptNumber, filteredLineItems],
+  );
+
+  if (isLoadingBill) {
+    return (
+      <div className={styles.loaderContainer}>
+        <DataTableSkeleton columnCount={tableHeaders.length} showHeader={false} showToolbar={false} zebra />
+      </div>
+    );
+  }
+
+  const handleRowSelection = (row, checked: boolean) => {
+    const matchingRow = filteredLineItems.find((item) => item.uuid === row.id);
+    let newSelectedLineItems;
+
+    if (checked) {
+      newSelectedLineItems = [...selectedLineItems, matchingRow];
+    } else {
+      newSelectedLineItems = selectedLineItems.filter((item) => item.uuid !== row.id);
+    }
+    setSelectedLineItems(newSelectedLineItems);
+    onSelectItem(newSelectedLineItems);
+  };
+
+  return (
+    <div className={styles.invoiceContainer}>
+      <DataTable headers={tableHeaders} isSortable rows={tableRows} size={responsiveSize} useZebraStyles>
+        {({ rows, headers, getRowProps, getSelectionProps, getTableProps, getToolbarProps }) => (
+          <TableContainer
+            description={
+              <span className={styles.tableDescription}>
+                <span>{t('itemsToBeBilled', 'Items to be billed')}</span>
+              </span>
+            }
+            title={t('lineItems', 'Line items')}>
+            <div className={styles.toolbarWrapper}>
+              <TableToolbar {...getToolbarProps()} className={styles.tableToolbar} size={responsiveSize}>
+                <TableToolbarContent className={styles.headerContainer}>
+                  <TableToolbarSearch
+                    className={styles.searchbox}
+                    expanded
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+                    placeholder={t('searchThisTable', 'Search this table')}
+                    size={responsiveSize}
+                  />
+                </TableToolbarContent>
+              </TableToolbar>
+            </div>
+            <Table {...getTableProps()} aria-label="Invoice line items" className={styles.table}>
+              <TableHead>
+                <TableRow>
+                  {rows.length > 1 && isSelectable ? <TableHeader /> : null}
+                  {headers.map((header) => (
+                    <TableHeader key={header.key}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => {
+                  return (
+                    <TableRow
+                      key={row.id}
+                      {...getRowProps({
+                        row,
+                      })}>
+                      {rows.length > 1 && isSelectable && (
+                        <TableSelectRow
+                          aria-label="Select row"
+                          {...getSelectionProps({ row })}
+                          disabled={
+                            tableRows[index].status === PaymentStatus.PAID ||
+                            tableRows[index].status === PaymentStatus.EXEMPTED
+                          }
+                          onChange={(checked: boolean) => handleRowSelection(row, checked)}
+                          checked={
+                            tableRows[index].status === PaymentStatus.PAID ||
+                            tableRows[index].status === PaymentStatus.EXEMPTED ||
+                            Boolean(selectedLineItems?.find((item) => item?.uuid === row?.id))
+                          }
+                        />
+                      )}
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {filteredLineItems?.length === 0 && (
+        <div className={styles.filterEmptyState}>
+          <Layer>
+            <Tile className={styles.filterEmptyStateTile}>
+              <p className={styles.filterEmptyStateContent}>
+                {t('noMatchingItemsToDisplay', 'No matching items to display')}
+              </p>
+              <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+            </Tile>
+          </Layer>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InvoiceTable;

package/src/invoice/invoice-table.scss

@@ -0,0 +1,91 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.filterEmptyState {
+  align-items: center;
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  padding: layout.$spacing-09 !important;
+  text-align: center;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.headerContainer {
+  background-color: colors.$gray-10;
+}
+
+.invoiceContainer {
+  margin: layout.$spacing-05;
+  border: 1px solid $ui-03;
+}
+
+.searchbox {
+  input:focus {
+    outline: 2px solid colors.$orange-40 !important;
+  }
+}
+
+.table {
+  td {
+    border-bottom: none !important;
+  }
+}
+
+.tableDescription {
+  display: flex;
+  align-items: flex-start;
+  margin-top: layout.$spacing-02;
+  column-gap: layout.$spacing-01;
+
+  ::after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+
+  & > span {
+    @include type.type-style('body-01');
+  }
+}
+
+.tableToolbar {
+  width: 20%;
+  min-width: 12.5rem;
+}
+
+.toolbarWrapper {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .toolbarWrapper {
+    height: layout.$spacing-09;
+  }
+}
+
+:global(.omrs-breakpoint-gt-tablet) {
+  .toolbarWrapper {
+    height: layout.$spacing-07;
+  }
+}

package/src/invoice/invoice.component.tsx

@@ -0,0 +1,132 @@
+import { InlineLoading } from '@carbon/react';
+import { ExtensionSlot, formatDatetime, parseDate, usePatient, useVisit } from '@openmrs/esm-framework';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { useBill } from '../billing.resource';
+import { usePaymentsReconciler } from '../hooks/use-payments-reconciler';
+import { LineItem, MappedBill } from '../types';
+import InvoiceTable from './invoice-table.component';
+import styles from './invoice.scss';
+import Payments from './payments/payments.component';
+import capitalize from 'lodash-es/capitalize';
+import { InvoiceActions } from './invoice-actions.component';
+import { useCurrencyFormatting } from '../helpers/currency';
+
+const Invoice: React.FC = () => {
+  const { t } = useTranslation();
+  const { billUuid, patientUuid } = useParams();
+  const { patient, isLoading: isLoadingPatient, error: patientError } = usePatient(patientUuid);
+  const { bill, isLoading: isLoadingBill, error: billingError } = useBill(billUuid);
+  usePaymentsReconciler(billUuid);
+  const { activeVisit, isLoading: isVisitLoading, error: visitError } = useVisit(patientUuid);
+  const [selectedLineItems, setSelectedLineItems] = useState([]);
+
+  const handleSelectItem = (lineItems: Array<LineItem>) => {
+    const paidLineItems = bill?.lineItems?.filter((item) => item.paymentStatus === 'PAID') ?? [];
+    const uniqueLineItems = [...new Set([...lineItems, ...paidLineItems])];
+    setSelectedLineItems(uniqueLineItems);
+  };
+
+  useEffect(() => {
+    // Select all line items by default
+    setSelectedLineItems(bill?.lineItems ?? []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bill?.lineItems?.length]);
+
+  if (isLoadingPatient || isLoadingBill || isVisitLoading) {
+    return (
+      <div className={styles.invoiceContainer}>
+        <InlineLoading
+          className={styles.loader}
+          status="active"
+          iconDescription="Loading"
+          description="Loading patient header..."
+        />
+      </div>
+    );
+  }
+
+  if (billingError || patientError || visitError) {
+    return (
+      <div className={styles.errorContainer}>
+        <ErrorState
+          headerTitle={t('invoiceError', 'Invoice error')}
+          error={billingError ?? patientError ?? visitError}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.invoiceContainer}>
+      {patient && patientUuid && <ExtensionSlot name="patient-header-slot" state={{ patient, patientUuid }} />}
+      <InvoiceSummary bill={bill} selectedLineItems={selectedLineItems} activeVisit={activeVisit} />
+      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
+      <Payments bill={bill} selectedLineItems={selectedLineItems} />
+    </div>
+  );
+};
+
+export function InvoiceSummary({
+  bill,
+  selectedLineItems,
+  activeVisit,
+}: {
+  readonly bill: MappedBill;
+  readonly selectedLineItems?: LineItem[];
+  readonly activeVisit?: any;
+}) {
+  const { t } = useTranslation();
+  const { format: formatCurrency } = useCurrencyFormatting();
+
+  return (
+    <>
+      <div className={styles.invoiceSummary}>
+        <span className={styles.invoiceSummaryTitle}>{t('invoiceSummary', 'Invoice Summary')}</span>
+        <InvoiceActions bill={bill} selectedLineItems={selectedLineItems} activeVisit={activeVisit} />
+      </div>
+      <div className={styles.invoiceSummaryContainer}>
+        <div className={styles.invoiceCard}>
+          <InvoiceSummaryItem label={t('invoiceNumber', 'Invoice Number')} value={bill.receiptNumber} />
+          <InvoiceSummaryItem
+            label={t('dateAndTime', 'Date And Time')}
+            value={formatDatetime(parseDate(bill.dateCreated), { mode: 'standard', noToday: true })}
+          />
+          <InvoiceSummaryItem label={t('invoiceStatus', 'Invoice Status')} value={bill?.status} />
+          <InvoiceSummaryItem label={t('cashPoint', 'Cash Point')} value={bill?.cashPointName} />
+          <InvoiceSummaryItem label={t('cashier', 'Cashier')} value={capitalize(bill?.cashier?.display)} />
+        </div>
+        <div className={styles.divider} />
+        <div className={styles.invoiceCard}>
+          <InvoiceSummaryItem label={t('totalAmount', 'Total Amount')} value={formatCurrency(bill?.totalAmount)} />
+          <InvoiceSummaryItem
+            label={t('totalExempted', 'Total Exempted')}
+            value={formatCurrency(bill?.totalExempted)}
+          />
+          <InvoiceSummaryItem
+            label={t('totalPayments', 'Total Payments')}
+            value={formatCurrency(bill?.totalPayments)}
+          />
+          <InvoiceSummaryItem
+            label={t('totalDeposits', 'Total Deposits')}
+            value={formatCurrency(bill?.totalDeposits)}
+          />
+          <InvoiceSummaryItem label={t('balance', 'Balance')} value={formatCurrency(bill?.balance)} />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function InvoiceSummaryItem({ label, value }: { readonly label: string; readonly value: string | number }) {
+  return (
+    <div className={styles.invoiceSummaryItem}>
+      <span className={styles.label}>{label}</span>
+      <span className={styles.value}>{value}</span>
+    </div>
+  );
+}
+
+export default Invoice;