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

package/src/billing-form/visit-attributes/visit-attributes-form.scss

@@ -0,0 +1,22 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.sectionContainer {
+  margin: 0 layout.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+}
+.visitAttributesContainer {
+  row-gap: layout.$spacing-03;
+  display: flex;
+  flex-direction: column;
+}
+
+.sectionField {
+  margin-top: layout.$spacing-03;
+}

package/src/billing-header/billing-header.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location, UserFollow } from '@carbon/react/icons';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+import BillingIllustration from './billing-illustration.component';
+import styles from './billing-header.scss';
+
+interface BillingHeaderProps {
+  title: string;
+}
+
+const BillingHeader: React.FC<BillingHeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header} data-testid="billing-header">
+      <div className={styles['left-justified-items']}>
+        <BillingIllustration />
+        <div className={styles['page-labels']}>
+          <p>{t('billing', 'Billing')}</p>
+          <p className={styles['page-name']}>{title}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles.userContainer}>
+          <p>{session?.user?.person?.display}</p>
+          <UserFollow size={16} className={styles.userIcon} />
+        </div>
+        <div className={styles['date-and-location']}>
+          <Location size={16} />
+          <span className={styles.value}>{location}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BillingHeader;

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

@@ -0,0 +1,83 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: layout.$spacing-12;
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
+  display: flex;
+  justify-content: space-between;
+  padding: layout.$spacing-05;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  align-items: center;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin: layout.$spacing-05;
+
+  p:first-of-type {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.userContainer {
+  display: flex;
+  justify-content: flex-end;
+  gap: layout.$spacing-05;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .date-and-location {
+    & > svg {
+      order: -1;
+    }
+    & > span:nth-child(2) {
+      order: -2;
+    }
+  }
+}
+
+.userIcon {
+  fill: $ui-05;
+  margin: layout.$spacing-01;
+}

package/src/billing-header/billing-illustration.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const BillingIllustration: React.FC = () => {
+  return (
+    <svg width="64" height="64" viewBox="10 10 60 60.02">
+      <title>Billing module illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          opacity="0.5"
+          d="M58.75 68.639C60.8886 66.8242 64.1114 66.8242 66.25 68.639C67.703 69.8719 70 68.8873 70 67.0314V12.9686C70 11.1128 67.703 10.1281 66.25 11.3611C64.1114 13.1758 60.8886 13.1758 58.75 11.3611C56.6114 9.54632 53.3886 9.54632 51.25 11.3611C49.1114 13.1758 45.8886 13.1758 43.75 11.3611C41.6114 9.54632 38.3886 9.54632 36.25 11.3611C34.1114 13.1758 30.8886 13.1758 28.75 11.3611C26.6114 9.54632 23.3886 9.54632 21.25 11.3611C19.1114 13.1758 15.8886 13.1758 13.75 11.3611C12.297 10.1281 10 11.1128 10 12.9686V67.0314C10 68.8873 12.297 69.8719 13.75 68.639C15.8886 66.8242 19.1114 66.8242 21.25 68.639C23.3886 70.4537 26.6114 70.4537 28.75 68.639C30.8886 66.8242 34.1114 66.8242 36.25 68.639C38.3886 70.4537 41.6114 70.4537 43.75 68.639C45.8886 66.8242 49.1114 66.8242 51.25 68.639C53.3886 70.4537 56.6114 70.4537 58.75 68.639Z"
+          fill="#CEE6E5"
+        />
+        <path
+          d="M22.5 51.6666C22.5 50.2859 23.6193 49.1666 25 49.1666H55C56.3807 49.1666 57.5 50.2859 57.5 51.6666C57.5 53.0474 56.3807 54.1666 55 54.1666H25C23.6193 54.1666 22.5 53.0474 22.5 51.6666Z"
+          fill="#7BBCB9"
+        />
+        <path
+          d="M22.5 40C22.5 38.6193 23.6193 37.5 25 37.5H55C56.3807 37.5 57.5 38.6193 57.5 40C57.5 41.3807 56.3807 42.5 55 42.5H25C23.6193 42.5 22.5 41.3807 22.5 40Z"
+          fill="#7BBCB9"
+        />
+        <path
+          d="M22.5 28.3333C22.5 26.9526 23.6193 25.8333 25 25.8333H55C56.3807 25.8333 57.5 26.9526 57.5 28.3333C57.5 29.714 56.3807 30.8333 55 30.8333H25C23.6193 30.8333 22.5 29.714 22.5 28.3333Z"
+          fill="#7BBCB9"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default BillingIllustration;

package/src/billing.resource.ts

@@ -0,0 +1,120 @@
+import useSWR from 'swr';
+import { formatDate, parseDate, openmrsFetch, useSession, useVisit } from '@openmrs/esm-framework';
+import type { FacilityDetail, MappedBill, PatientInvoice } from './types';
+import isEmpty from 'lodash-es/isEmpty';
+import sortBy from 'lodash-es/sortBy';
+
+export const useBills = (patientUuid: string = '', billStatus: string = '') => {
+  const url = `/ws/rest/v1/cashier/bill?v=full`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<PatientInvoice> } }>(
+    url,
+    openmrsFetch,
+  );
+
+  const mapBillProperties = (bill: PatientInvoice): MappedBill => ({
+    id: bill?.id,
+    uuid: bill?.uuid,
+    patientName: bill?.patient?.display.split('-')?.[1],
+    identifier: bill?.patient?.display.split('-')?.[0],
+    patientUuid: bill?.patient?.uuid,
+    status: bill?.status,
+    receiptNumber: bill?.receiptNumber,
+    cashier: bill?.cashier,
+    cashPointUuid: bill?.cashPoint?.uuid,
+    cashPointName: bill?.cashPoint?.name,
+    cashPointLocation: bill?.cashPoint?.location?.display,
+    dateCreated: bill?.dateCreated ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' }) : '--',
+    lineItems: bill.lineItems,
+    billingService: bill.lineItems.map((bill) => bill.item || bill.billableService || '--').join('  '),
+    payments: bill.payments,
+    display: bill.display,
+    totalAmount: bill?.lineItems?.map((item) => item.price * item.quantity).reduce((prev, curr) => prev + curr, 0),
+  });
+
+  const sortedBills = sortBy(data?.data?.results ?? [], ['dateCreated']).reverse();
+  const filteredBills = billStatus === '' ? sortedBills : sortedBills?.filter((bill) => bill.status === billStatus);
+  const mappedResults = filteredBills?.map((bill) => mapBillProperties(bill));
+  const filteredResults = mappedResults?.filter((res) => res.patientUuid === patientUuid);
+  const formattedBills = isEmpty(patientUuid) ? mappedResults : filteredResults || [];
+
+  return {
+    bills: formattedBills,
+    error,
+    isLoading,
+    isValidating,
+    mutate,
+  };
+};
+
+export const useBill = (billUuid: string) => {
+  const url = `/ws/rest/v1/cashier/bill/${billUuid}`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: PatientInvoice }>(
+    billUuid ? url : null,
+    openmrsFetch,
+  );
+
+  const mapBillProperties = (bill: PatientInvoice): MappedBill => ({
+    id: bill?.id,
+    uuid: bill?.uuid,
+    patientName: bill?.patient?.display.split('-')?.[1],
+    identifier: bill?.patient?.display.split('-')?.[0],
+    patientUuid: bill?.patient?.uuid,
+    status: bill?.status,
+    receiptNumber: bill?.receiptNumber,
+    cashier: bill?.cashier,
+    cashPointUuid: bill?.cashPoint?.uuid,
+    cashPointName: bill?.cashPoint?.name,
+    cashPointLocation: bill?.cashPoint?.location?.display,
+    dateCreated: bill?.dateCreated ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' }) : '--',
+    lineItems: bill.lineItems,
+    billingService: bill.lineItems.map((bill) => bill.item).join(' '),
+    payments: bill.payments,
+    totalAmount: bill?.lineItems?.map((item) => item.price * item.quantity).reduce((prev, curr) => prev + curr, 0),
+    tenderedAmount: bill?.payments?.map((item) => item.amountTendered).reduce((prev, curr) => prev + curr, 0),
+  });
+
+  const formattedBill = data?.data ? mapBillProperties(data?.data) : null;
+
+  return {
+    bill: formattedBill,
+    error,
+    isLoading,
+    isValidating,
+    mutate,
+  };
+};
+
+export const processBillPayment = (payload, billUuid: string) => {
+  const url = `/ws/rest/v1/cashier/bill/${billUuid}`;
+
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: payload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export function useDefaultFacility() {
+  const url = '/ws/rest/v1/kenyaemr/default-facility';
+  const { authenticated } = useSession();
+
+  const { data, isLoading } = useSWR<{ data: FacilityDetail }>(authenticated ? url : null, openmrsFetch);
+
+  return { data: data?.data, isLoading: isLoading };
+}
+
+export const usePatientPaymentInfo = (patientUuid: string) => {
+  const { currentVisit } = useVisit(patientUuid);
+  const attributes = currentVisit?.attributes ?? [];
+  const paymentInformation = attributes
+    .map((attribute) => ({
+      name: attribute.attributeType.name,
+      value: attribute.value,
+    }))
+    .filter(({ name }) => name === 'Insurance scheme' || name === 'Policy Number');
+
+  return paymentInformation;
+};

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

@@ -0,0 +1,280 @@
+import React, { useCallback, useId, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  InlineLoading,
+  Layer,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  usePagination,
+  ErrorState,
+  ConfigurableLink,
+} from '@openmrs/esm-framework';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import { useBills } from '../billing.resource';
+import styles from './bills-table.scss';
+
+const BillsTable = () => {
+  const { t } = useTranslation();
+  const id = useId();
+  const config = useConfig();
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const [billPaymentStatus, setBillPaymentStatus] = useState('');
+  const pageSizes = config?.bills?.pageSizes ?? [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState(config?.bills?.pageSize ?? 10);
+  const { bills, isLoading, isValidating, error } = useBills('', billPaymentStatus);
+  const [searchString, setSearchString] = useState('');
+
+  const headerData = [
+    {
+      header: t('visitTime', 'Visit time'),
+      key: 'visitTime',
+    },
+    {
+      header: t('identifier', 'Identifier'),
+      key: 'identifier',
+    },
+    {
+      header: t('name', 'Name'),
+      key: 'patientName',
+    },
+    {
+      header: t('billedItems', 'Billed Items'),
+      key: 'billedItems',
+    },
+  ];
+
+  const searchResults = useMemo(() => {
+    if (bills !== undefined && bills.length > 0) {
+      if (searchString && searchString.trim() !== '') {
+        const search = searchString.toLowerCase();
+        return bills?.filter((activeBillRow) =>
+          Object.entries(activeBillRow).some(([header, value]) => {
+            if (header === 'patientUuid') {
+              return false;
+            }
+            return `${value}`.toLowerCase().includes(search);
+          }),
+        );
+      }
+    }
+
+    return bills;
+  }, [searchString, bills]);
+
+  const { paginated, goTo, results, currentPage } = usePagination(searchResults, pageSize);
+
+  const setBilledItems = (bill) =>
+    bill?.lineItems?.reduce((acc, item) => acc + (acc ? ' & ' : '') + (item.billableService || item.item || ''), '');
+
+  const billingUrl = '${openmrsSpaBase}/home/billing/patient/${patientUuid}/${uuid}';
+
+  const rowData = results?.map((bill, index) => ({
+    id: `${index}`,
+    uuid: bill.uuid,
+    patientName: (
+      <ConfigurableLink
+        style={{ textDecoration: 'none', maxWidth: '50%' }}
+        to={billingUrl}
+        templateParams={{ patientUuid: bill.patientUuid, uuid: bill.uuid }}>
+        {bill.patientName}
+      </ConfigurableLink>
+    ),
+    visitTime: bill.dateCreated,
+    identifier: bill.identifier,
+    department: '--',
+    billedItems: setBilledItems(bill),
+    billingPrice: '--',
+  }));
+
+  const handleSearch = useCallback(
+    (e) => {
+      goTo(1);
+      setSearchString(e.target.value);
+    },
+    [goTo, setSearchString],
+  );
+
+  const filterItems = [
+    { id: '', text: 'All bills' },
+    { id: 'PENDING', text: 'Pending bills' },
+    { id: 'PAID', text: 'Paid bills' },
+  ];
+
+  const handleFilterChange = ({ selectedItem }) => setBillPaymentStatus(selectedItem.id);
+
+  if (isLoading) {
+    return (
+      <div className={styles.loaderContainer}>
+        <DataTableSkeleton
+          rowCount={pageSize}
+          showHeader={false}
+          showToolbar={false}
+          zebra
+          columnCount={headerData?.length}
+          size={responsiveSize}
+        />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorContainer}>
+        <Layer>
+          <ErrorState error={error} headerTitle={t('billsList', 'Bill list')} />
+        </Layer>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        <Dropdown
+          className={styles.filterDropdown}
+          direction="bottom"
+          id={`filter-${id}`}
+          initialSelectedItem={filterItems[0]}
+          items={filterItems}
+          itemToString={(item) => (item ? item.text : '')}
+          label=""
+          onChange={handleFilterChange}
+          size={responsiveSize}
+          titleText={t('filterBy', 'Filter by') + ':'}
+          type="inline"
+        />
+      </div>
+
+      {bills?.length > 0 ? (
+        <div className={styles.billListContainer}>
+          <FilterableTableHeader
+            handleSearch={handleSearch}
+            isValidating={isValidating}
+            layout={layout}
+            responsiveSize={responsiveSize}
+            t={t}
+          />
+          <DataTable
+            isSortable
+            rows={rowData}
+            headers={headerData}
+            size={responsiveSize}
+            useZebraStyles={rowData?.length > 1 ? true : false}>
+            {({ rows, headers, getRowProps, getTableProps }) => (
+              <TableContainer>
+                <Table {...getTableProps()} aria-label="bill list">
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key}>{header.header}</TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        {...getRowProps({
+                          row,
+                        })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+          {searchResults?.length === 0 && (
+            <div className={styles.filterEmptyState}>
+              <Layer level={0}>
+                <Tile className={styles.filterEmptyStateTile}>
+                  <p className={styles.filterEmptyStateContent}>
+                    {t('noMatchingBillsToDisplay', 'No matching bills to display')}
+                  </p>
+                  <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+                </Tile>
+              </Layer>
+            </div>
+          )}
+          {paginated && (
+            <Pagination
+              forwardText="Next page"
+              backwardText="Previous page"
+              page={currentPage}
+              pageSize={pageSize}
+              pageSizes={pageSizes}
+              totalItems={searchResults?.length}
+              className={styles.pagination}
+              size={responsiveSize}
+              onChange={({ pageSize: newPageSize, page: newPage }) => {
+                if (newPageSize !== pageSize) {
+                  setPageSize(newPageSize);
+                }
+                if (newPage !== currentPage) {
+                  goTo(newPage);
+                }
+              }}
+            />
+          )}
+        </div>
+      ) : (
+        <Layer className={styles.emptyStateContainer}>
+          <Tile className={styles.tile}>
+            <div className={styles.illo}>
+              <EmptyDataIllustration />
+            </div>
+            <p className={styles.content}>There are no bills to display.</p>
+          </Tile>
+        </Layer>
+      )}
+    </>
+  );
+};
+
+function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveSize, t }) {
+  return (
+    <>
+      <div className={styles.headerContainer}>
+        <div
+          className={classNames({
+            [styles.tabletHeading]: !isDesktop(layout),
+            [styles.desktopHeading]: isDesktop(layout),
+          })}>
+          <h4>{t('billList', 'Bill list')}</h4>
+        </div>
+        <div className={styles.backgroundDataFetchingIndicator}>
+          <span>{isValidating ? <InlineLoading /> : null}</span>
+        </div>
+      </div>
+      <Search
+        labelText=""
+        placeholder={t('filterTable', 'Filter table')}
+        onChange={handleSearch}
+        size={responsiveSize}
+      />
+    </>
+  );
+}
+
+export default BillsTable;