@openmrs/esm-billing-app 1.0.1-pre.100

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

@@ -0,0 +1,189 @@
+import React, { 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, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { type LineItem, type MappedBill } from '../types';
+import styles from './invoice-table.scss';
+import { convertToCurrency } from '../helpers';
+
+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?.lineItems ?? [];
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const pendingLineItems = lineItems?.filter((item) => item.paymentStatus === 'PENDING') ?? [];
+  const [selectedLineItems, setSelectedLineItems] = useState(pendingLineItems ?? []);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+  const { defaultCurrency } = useConfig();
+
+  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: Array<typeof DataTableHeader> = [
+    { 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 tableRows: Array<typeof DataTableRow> = useMemo(
+    () =>
+      filteredLineItems?.map((item, index) => {
+        return {
+          no: `${index + 1}`,
+          id: `${item.uuid}`,
+          billItem: item.billableService ? item.billableService : item?.item,
+          billCode: bill?.receiptNumber,
+          status: item?.paymentStatus,
+          quantity: item.quantity,
+          price: convertToCurrency(item.price, defaultCurrency),
+          total: convertToCurrency(item.price * item.quantity, defaultCurrency),
+        };
+      }) ?? [],
+    [bill?.receiptNumber, filteredLineItems],
+  );
+
+  if (isLoadingBill) {
+    return (
+      <div className={styles.loaderContainer}>
+        <DataTableSkeleton
+          columnCount={tableHeaders.length}
+          showHeader={false}
+          showToolbar={false}
+          size={responsiveSize}
+          zebra
+        />
+      </div>
+    );
+  }
+
+  const handleRowSelection = (row: typeof DataTableRow, 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) => (
+                  <TableRow
+                    key={row.id}
+                    {...getRowProps({
+                      row,
+                    })}>
+                    {rows.length > 1 && isSelectable && (
+                      <TableSelectRow
+                        aria-label="Select row"
+                        {...getSelectionProps({ row })}
+                        onChange={(checked: boolean) => handleRowSelection(row, checked)}
+                        checked={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';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.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-09 layout.$spacing-05 0;
+  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,144 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, InlineLoading } from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { useParams } from 'react-router-dom';
+import { useReactToPrint } from 'react-to-print';
+import { useTranslation } from 'react-i18next';
+import { ExtensionSlot, useConfig, usePatient } from '@openmrs/esm-framework';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { convertToCurrency } from '../helpers';
+import { type LineItem } from '../types';
+import { useBill } from '../billing.resource';
+import InvoiceTable from './invoice-table.component';
+import Payments from './payments/payments.component';
+import PrintReceipt from './printable-invoice/print-receipt.component';
+import PrintableInvoice from './printable-invoice/printable-invoice.component';
+import styles from './invoice.scss';
+
+interface InvoiceDetailsProps {
+  label: string;
+  value: string | number;
+}
+
+const Invoice: React.FC = () => {
+  const { t } = useTranslation();
+  const { billUuid, patientUuid } = useParams();
+  const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
+  const { bill, isLoading: isLoadingBill, error } = useBill(billUuid);
+  const [isPrinting, setIsPrinting] = useState(false);
+  const [selectedLineItems, setSelectedLineItems] = useState([]);
+  const componentRef = useRef<HTMLDivElement>(null);
+  const onBeforeGetContentResolve = useRef<(() => void) | null>(null);
+  const handleSelectItem = (lineItems: Array<LineItem>) => {
+    setSelectedLineItems(lineItems);
+  };
+  const { defaultCurrency } = useConfig();
+
+  const handleAfterPrint = useCallback(() => {
+    onBeforeGetContentResolve.current = null;
+    setIsPrinting(false);
+  }, []);
+
+  const reactToPrintContent = useCallback(() => componentRef.current, []);
+
+  const handleOnBeforeGetContent = useCallback(() => {
+    return new Promise<void>((resolve) => {
+      if (patient && bill) {
+        setIsPrinting(true);
+        onBeforeGetContentResolve.current = resolve;
+      }
+    });
+  }, [bill, patient]);
+
+  const handlePrint = useReactToPrint({
+    content: reactToPrintContent,
+    documentTitle: `Invoice ${bill?.receiptNumber} - ${patient?.name?.[0]?.given?.join(' ')} ${
+      patient?.name?.[0].family
+    }`,
+    onBeforeGetContent: handleOnBeforeGetContent,
+    onAfterPrint: handleAfterPrint,
+    removeAfterPrint: true,
+  });
+
+  useEffect(() => {
+    if (isPrinting && onBeforeGetContentResolve.current) {
+      onBeforeGetContentResolve.current();
+    }
+  }, [isPrinting]);
+
+  useEffect(() => {
+    const unPaidLineItems = bill?.lineItems?.filter((item) => item.paymentStatus === 'PENDING') ?? [];
+    setSelectedLineItems(unPaidLineItems);
+  }, [bill?.lineItems]);
+
+  const invoiceDetails = {
+    'Total Amount': convertToCurrency(bill?.totalAmount, defaultCurrency),
+    'Amount Tendered': convertToCurrency(bill?.tenderedAmount, defaultCurrency),
+    'Invoice Number': bill?.receiptNumber,
+    'Date And Time': bill?.dateCreated,
+    'Invoice Status': bill?.status,
+  };
+
+  if (isLoadingPatient && isLoadingBill) {
+    return (
+      <div className={styles.invoiceContainer}>
+        <InlineLoading
+          className={styles.loader}
+          status="active"
+          iconDescription="Loading"
+          description="Loading patient header..."
+        />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorContainer}>
+        <ErrorState headerTitle={t('invoiceError', 'Invoice error')} error={error} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.invoiceContainer}>
+      {patient && patientUuid && <ExtensionSlot name="patient-header-slot" state={{ patient, patientUuid }} />}
+      <div className={styles.detailsContainer}>
+        <section className={styles.details}>
+          {Object.entries(invoiceDetails).map(([key, val]) => (
+            <InvoiceDetails key={key} label={key} value={val} />
+          ))}
+        </section>
+        <div>
+          <Button
+            disabled={isPrinting}
+            onClick={handlePrint}
+            renderIcon={(props) => <Printer size={24} {...props} />}
+            iconDescription="Print bill"
+            size="md">
+            {t('printBill', 'Print bill')}
+          </Button>
+          {bill?.status === 'PAID' ? <PrintReceipt billId={bill?.id} /> : null}
+        </div>
+      </div>
+
+      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
+      <Payments bill={bill} selectedLineItems={selectedLineItems} />
+
+      <div className={styles.printContainer} ref={componentRef}>
+        {isPrinting && <PrintableInvoice bill={bill} patient={patient} isLoading={isLoadingPatient} />}
+      </div>
+    </div>
+  );
+};
+
+function InvoiceDetails({ label, value }: InvoiceDetailsProps) {
+  return (
+    <div>
+      <h1 className={styles.label}>{label}</h1>
+      <span className={styles.value}>{value}</span>
+    </div>
+  );
+}
+
+export default Invoice;

package/src/invoice/invoice.scss

@@ -0,0 +1,93 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.invoiceContainer {
+  background-color: colors.$gray-10;
+  height: calc(100vh - 3rem);
+}
+
+.errorContainer {
+  margin: layout.$spacing-05;
+}
+
+.loader {
+  display: flex;
+  min-height: layout.$spacing-09;
+  justify-content: center;
+}
+
+.detailsContainer {
+  display: flex;
+}
+
+.details {
+  display: flex;
+  flex: 3;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: layout.$spacing-05;
+  row-gap: 1.5rem;
+}
+
+.label {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  margin: layout.$spacing-01;
+}
+
+.value {
+  @include type.type-style('heading-03');
+  display: inline-block;
+  margin-top: layout.$spacing-04;
+}
+
+.backButton {
+  margin: layout.$spacing-04;
+
+  button {
+    display: flex;
+    padding-left: 0 !important;
+
+    svg {
+      order: 1;
+      margin-right: layout.$spacing-03;
+      margin-left: 0 !important;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}
+
+.invoicePaymentsContainer {
+  display: flex;
+  flex-direction: column;
+  margin: layout.$spacing-05;
+}
+
+.paymentSection {
+  display: flex;
+  flex-direction: row;
+}
+
+.billDetail {
+  font-weight: bold;
+  color: colors.$cool-gray-90;
+}
+
+@media screen {
+  .printContainer {
+    background-color: colors.$white;
+    display: none;
+  }
+}
+
+@media print {
+  html,
+  body {
+    background-color: colors.$white !important;
+  }
+}