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

package/src/billable-services/bill-waiver/utils.ts

@@ -0,0 +1,41 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import type { LineItem, MappedBill } from '../../types';
+
+const WAIVER_UUID = 'eb6173cb-9678-4614-bbe1-0ccf7ed9d1d4';
+
+export const createBillWaiverPayload = (
+  bill: MappedBill,
+  amountWaived: number,
+  totalAmount: number,
+  lineItems: Array<LineItem>,
+  billableLineItems: Array<OpenmrsResource>,
+) => {
+  const { cashier } = bill;
+
+  const billPayment = {
+    amount: parseFloat(totalAmount.toFixed(2)),
+    amountTendered: parseFloat(Number(amountWaived).toFixed(2)),
+    attributes: [],
+    instanceType: WAIVER_UUID,
+  };
+
+  const processedLineItems = lineItems.map((lineItem) => ({
+    ...lineItem,
+    billableService: findBillableServiceUuid(billableLineItems, lineItem),
+    paymentStatus: 'PAID',
+  }));
+
+  const processedPayment = {
+    cashPoint: bill.cashPointUuid,
+    cashier: cashier.uuid,
+    lineItems: processedLineItems,
+    payments: [...bill.payments, billPayment],
+    patient: bill.patientUuid,
+  };
+
+  return processedPayment;
+};
+
+const findBillableServiceUuid = (billableService: Array<OpenmrsResource>, lineItems: LineItem) => {
+  return billableService.find((service) => service.name === lineItems.billableService)?.uuid ?? null;
+};

package/src/billable-services/billable-service.resource.ts

@@ -0,0 +1,71 @@
+import useSWR from 'swr';
+import { type OpenmrsResource, openmrsFetch } from '@openmrs/esm-framework';
+import { type ServiceConcept } from '../types';
+
+type ResponseObject = {
+  results: Array<OpenmrsResource>;
+};
+
+export const useBillableServices = () => {
+  const url = `/ws/rest/v1/cashier/billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(display),servicePrices:(uuid,name,price))`;
+
+  const { data, isLoading, isValidating, error, mutate } = useSWR<{ data: ResponseObject }>(url, openmrsFetch);
+
+  return {
+    billableServices: data?.data.results ?? [],
+    isLoading,
+    isValidating,
+    error,
+    mutate,
+  };
+};
+
+export function useServiceTypes() {
+  const url = `/ws/rest/v1/concept/d7bd4cc0-90b1-4f22-90f2-ab7fde936727?v=custom:(setMembers:(uuid,display))`;
+
+  const { data, error, isLoading } = useSWR<{ data }>(url, openmrsFetch);
+
+  return {
+    serviceTypes: data?.data.setMembers ?? [],
+    error,
+    isLoading,
+  };
+}
+
+export const usePaymentModes = () => {
+  const url = `/ws/rest/v1/cashier/paymentMode`;
+
+  const { data, error, isLoading } = useSWR<{ data: ResponseObject }>(url, openmrsFetch);
+
+  return {
+    paymentModes: data?.data.results ?? [],
+    error,
+    isLoading,
+  };
+};
+
+export const createBillableSerice = (payload: any) => {
+  const url = `/ws/rest/v1/cashier/api/billable-service`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: payload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export function useConceptsSearch(conceptToLookup: string) {
+  const conditionsSearchUrl = `/ws/rest/v1/conceptsearch?q=${conceptToLookup}`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<ServiceConcept> } }, Error>(
+    conceptToLookup ? conditionsSearchUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    searchResults: data?.data?.results ?? [],
+    error: error,
+    isSearching: isLoading,
+  };
+}

package/src/billable-services/billable-services-home.component.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { SideNav, SideNavItems, SideNavLink } from '@carbon/react';
+import { Wallet, Money } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { UserHasAccess, navigate } from '@openmrs/esm-framework';
+import AddBillableService from './create-edit/add-billable-service.component';
+import BillWaiver from './bill-waiver/bill-waiver.component';
+import BillableServicesDashboard from './dashboard/dashboard.component';
+import BillingHeader from '../billing-header/billing-header.component';
+import styles from './billable-services.scss';
+
+const BillableServiceHome: React.FC = () => {
+  const { t } = useTranslation();
+  const basePath = `${window.spaBase}/billable-services`;
+
+  const handleNavigation = (path: string) => {
+    navigate({ to: `${basePath}/${path}` });
+  };
+
+  return (
+    <BrowserRouter basename={`${window.spaBase}/billable-services`}>
+      <main className={styles.mainSection}>
+        <section>
+          <SideNav>
+            <SideNavItems>
+              <SideNavLink onClick={() => handleNavigation('')} renderIcon={Wallet} isActive>
+                {t('billableServices', 'Billable Services')}
+              </SideNavLink>
+              <UserHasAccess privilege="coreapps.systemAdministration">
+                <SideNavLink onClick={() => handleNavigation('waive-bill')} renderIcon={Money}>
+                  {t('billWaiver', 'Bill waiver')}
+                </SideNavLink>
+              </UserHasAccess>
+            </SideNavItems>
+          </SideNav>
+        </section>
+        <section>
+          <BillingHeader title={t('billServicesManagement', 'Bill services management')} />
+          <Routes>
+            <Route path="/" element={<BillableServicesDashboard />} />
+            <Route path="/add-service" element={<AddBillableService />} />
+            <Route path="/waive-bill" element={<BillWaiver />} />
+          </Routes>
+        </section>
+      </main>
+    </BrowserRouter>
+  );
+};
+
+export default BillableServiceHome;

package/src/billable-services/billable-services.component.tsx

@@ -0,0 +1,255 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import {
+  Button,
+  DataTable,
+  InlineLoading,
+  Layer,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+import { useLayoutType, isDesktop, useConfig, usePagination, ErrorState, navigate } from '@openmrs/esm-framework';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import { useBillableServices } from './billable-service.resource';
+import styles from './billable-services.scss';
+
+const BillableServices = () => {
+  const { t } = useTranslation();
+  const { billableServices, isLoading, isValidating, error, mutate } = useBillableServices();
+  const layout = useLayoutType();
+  const config = useConfig();
+  const [searchString, setSearchString] = useState('');
+  const responsiveSize = isDesktop(layout) ? 'lg' : 'sm';
+  const pageSizes = config?.billableServices?.pageSizes ?? [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState(config?.billableServices?.pageSize ?? 10);
+
+  //creating service state
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [overlayHeader, setOverlayTitle] = useState('');
+
+  const headerData = [
+    {
+      header: t('serviceName', 'Service Name'),
+      key: 'serviceName',
+    },
+    {
+      header: t('shortName', 'Short Name'),
+      key: 'shortName',
+    },
+    {
+      header: t('serviceType', 'Service Type'),
+      key: 'serviceType',
+    },
+    {
+      header: t('status', 'Service Status'),
+      key: 'status',
+    },
+    {
+      header: t('prices', 'Prices'),
+      key: 'prices',
+    },
+    {
+      header: t('actions', 'Actions'),
+      key: 'actions',
+    },
+  ];
+
+  const launchBillableServiceForm = useCallback(() => {
+    navigate({ to: window.getOpenmrsSpaBase() + 'billable-services/add-service' });
+  }, []);
+
+  const searchResults = useMemo(() => {
+    if (billableServices !== undefined && billableServices.length > 0) {
+      if (searchString && searchString.trim() !== '') {
+        const search = searchString.toLowerCase();
+        return billableServices?.filter((service) =>
+          Object.entries(service).some(([header, value]) => {
+            return header === 'uuid' ? false : `${value}`.toLowerCase().includes(search);
+          }),
+        );
+      }
+    }
+    return billableServices;
+  }, [searchString, billableServices]);
+
+  const { paginated, goTo, results, currentPage } = usePagination(searchResults, pageSize);
+
+  let rowData = [];
+  if (results) {
+    results.forEach((service, index) => {
+      const s = {
+        id: `${index}`,
+        uuid: service.uuid,
+        serviceName: service.name,
+        shortName: service.shortName,
+        serviceType: service?.serviceType?.display,
+        status: service.serviceStatus,
+        prices: '--',
+        actions: '--',
+      };
+      let cost = '';
+      service.servicePrices.forEach((price) => {
+        cost += `${price.name} (${price.price}) `;
+      });
+      s.prices = cost;
+      rowData.push(s);
+    });
+  }
+
+  const handleSearch = useCallback(
+    (e) => {
+      goTo(1);
+      setSearchString(e.target.value);
+    },
+    [goTo, setSearchString],
+  );
+
+  if (isLoading) {
+    <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />;
+  }
+  if (error) {
+    <ErrorState headerTitle={t('billableService', 'Billable Service')} error={error} />;
+  }
+  if (billableServices.length === 0) {
+    <EmptyState
+      displayText={t('billableService', 'Billable Service')}
+      headerTitle={t('billableService', 'Billable Service')}
+      launchForm={launchBillableServiceForm}
+    />;
+  }
+
+  return (
+    <>
+      {billableServices?.length > 0 ? (
+        <div className={styles.serviceContainer}>
+          <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="service 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('noMatchingServicesToDisplay', 'No matching services 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>
+      ) : (
+        <EmptyState
+          launchForm={launchBillableServiceForm}
+          displayText={t('noServicesToDisplay', 'There are no services to display')}
+          headerTitle={t('billableService', 'Billable service')}
+        />
+      )}
+    </>
+  );
+};
+
+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('servicesList', 'Services list')}</h4>
+        </div>
+        <div className={styles.backgroundDataFetchingIndicator}>
+          <span>{isValidating ? <InlineLoading /> : null}</span>
+        </div>
+      </div>
+      <div className={styles.actionsContainer}>
+        <Search
+          labelText=""
+          placeholder={t('filterTable', 'Filter table')}
+          onChange={handleSearch}
+          size={responsiveSize}
+        />
+        <Button
+          size={responsiveSize}
+          kind="primary"
+          renderIcon={(props) => <ArrowRight size={16} {...props} />}
+          onClick={() => {
+            navigate({ to: window.getOpenmrsSpaBase() + 'billable-services/add-service' });
+          }}
+          iconDescription={t('addNewBillableService', 'Add new billable service')}>
+          {t('addNewService', 'Add new service')}
+        </Button>
+      </div>
+    </>
+  );
+}
+export default BillableServices;

package/src/billable-services/billable-services.scss

@@ -0,0 +1,218 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  margin: 2rem 0;
+}
+
+.emptyStateContainer,
+.loaderContainer {
+  @extend .container;
+}
+
+.serviceContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+
+  :has(.filterEmptyState) {
+    border-bottom: none;
+  }
+}
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  align-items: center;
+}
+
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+
+  :global(.cds--list-box__menu) {
+    min-width: max-content;
+  }
+
+  :global(.cds--list-box) {
+    margin-left: layout.$spacing-03;
+  }
+}
+
+.menu {
+  margin-left: layout.$spacing-03;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  &:global(.cds--inline-loading) {
+    max-height: 1rem;
+  }
+}
+
+.tableContainer section {
+  position: relative;
+}
+
+.tableContainer a {
+  text-decoration: none;
+}
+
+.pagination {
+  overflow: hidden;
+
+  &:global(.cds--pagination) {
+    border-top: none;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.emptyRow {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.visitSummaryContainer {
+  width: 100%;
+  max-width: 768px;
+  margin: 1rem auto;
+}
+
+.expandedActiveVisitRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedActiveVisitRow td {
+  padding: 0 2rem;
+}
+
+.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 1rem;
+}
+
+.action {
+  margin-bottom: layout.$spacing-03;
+}
+
+.illo {
+  margin-top: layout.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  flex: 1;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+.menuitem {
+  max-width: none;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-09;
+  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;
+}
+
+.metricsContainer {
+  display: flex;
+  justify-content: space-between;
+  background-color: $ui-02;
+  height: layout.$spacing-10;
+  align-items: center;
+  padding: 0 layout.$spacing-05;
+}
+
+.metricsTitle {
+  @include type.type-style('heading-03');
+  color: $ui-05;
+}
+
+.actionsContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $ui-02;
+}
+.actionBtn {
+  display: flex;
+  column-gap: 0.5rem;
+}
+
+.mainSection {
+  display: grid;
+  grid-template-columns: 16rem 1fr;
+}

package/src/billable-services/billable-services.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import BillableServices from './billable-services.component';
+
+describe('BillableService', () => {
+  test('renders an empty state when there are no billable services', () => {
+    renderBillableServices();
+
+    expect(screen.getByText(/Empty data illustration/i)).toBeInTheDocument();
+    expect(screen.getByText(/There are no services to display to display for this patient/i)).toBeInTheDocument();
+  });
+});
+
+function renderBillableServices() {
+  render(<BillableServices />);
+}