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

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

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { ExtensionSlot, UserHasAccess } from '@openmrs/esm-framework';
+import PatientBills from './patient-bills.component';
+import { useBills } from '../../billing.resource';
+import styles from './bill-waiver.scss';
+
+type BillWaiverProps = {};
+
+const BillWaiver: React.FC<BillWaiverProps> = () => {
+  const [patientUuid, setPatientUuid] = useState<string>('');
+  const { bills } = useBills(patientUuid);
+  const filterBills = bills.filter((bill) => bill?.status !== 'PAID' && patientUuid === bill.patientUuid) ?? [];
+  return (
+    <UserHasAccess privilege="coreapps.systemAdministration">
+      <div className={styles.billWaiverContainer}>
+        <ExtensionSlot
+          name="patient-search-bar-slot"
+          state={{
+            selectPatientAction: (patientUuid) => setPatientUuid(patientUuid),
+            buttonProps: {
+              kind: 'primary',
+            },
+          }}
+        />
+
+        <PatientBills patientUuid={patientUuid} bills={filterBills} setPatientUuid={setPatientUuid} />
+      </div>
+    </UserHasAccess>
+  );
+};
+
+export default BillWaiver;

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

@@ -0,0 +1,10 @@
+@use '@carbon/layout';
+
+.billWaiverContainer {
+  margin: layout.$layout-01;
+  row-gap: layout.$layout-01;
+}
+
+.billListContainer {
+  background-color: white;
+}

package/src/billable-services/bill-waiver/patient-bills.component.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+  DataTable,
+  Layer,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import { type MappedBill } from '../../types';
+import { convertToCurrency } from '../../helpers';
+import PatientBillsSelections from './bill-selection.component';
+import styles from '../../bills-table/bills-table.scss';
+import { useConfig } from '@openmrs/esm-framework';
+
+type PatientBillsProps = {
+  patientUuid: string;
+  bills: Array<MappedBill>;
+  setPatientUuid: (patientUuid: string) => void;
+};
+
+const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPatientUuid }) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig();
+
+  if (!patientUuid) {
+    return;
+  }
+
+  const tableHeaders = [
+    { header: 'Date', key: 'date' },
+    { header: 'Billable Service', key: 'billableService' },
+    { header: 'Total Amount', key: 'totalAmount' },
+  ];
+
+  const tableRows = bills.map((bill) => ({
+    id: `${bill.uuid}`,
+    date: bill.dateCreated,
+    billableService: bill.billingService,
+    totalAmount: convertToCurrency(bill?.totalAmount, defaultCurrency),
+  }));
+
+  if (bills.length === 0 && patientUuid !== '') {
+    return (
+      <>
+        <div style={{ marginTop: '0.625rem' }}>
+          <Layer className={styles.emptyStateContainer}>
+            <Tile className={styles.tile}>
+              <div className={styles.illo}>
+                <EmptyDataIllustration />
+              </div>
+              <p className={styles.content}>{t('noBilltoDisplay', 'There are no bills to display for this patient')}</p>
+            </Tile>
+          </Layer>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div style={{ marginTop: '1rem' }}>
+      <DataTable
+        rows={tableRows}
+        headers={tableHeaders}
+        size="sm"
+        useZebraStyles
+        render={({
+          rows,
+          headers,
+          getHeaderProps,
+          getExpandHeaderProps,
+          getRowProps,
+          getExpandedRowProps,
+          getTableProps,
+          getTableContainerProps,
+        }) => (
+          <TableContainer
+            title={t('patientBills', 'Patient bill')}
+            description={t('patientBillsDescription', 'List of patient bills')}
+            {...getTableContainerProps()}>
+            <Table {...getTableProps()} aria-label="sample table">
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader enableToggle={true} {...getExpandHeaderProps()} />
+                  {headers.map((header, i) => (
+                    <TableHeader
+                      key={i}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => (
+                  <React.Fragment key={row.id}>
+                    <TableExpandRow
+                      {...getRowProps({
+                        row,
+                      })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableExpandRow>
+                    <TableExpandedRow
+                      colSpan={headers.length + 1}
+                      className="demo-expanded-td"
+                      {...getExpandedRowProps({
+                        row,
+                      })}>
+                      <div>
+                        <PatientBillsSelections bills={bills[index]} setPatientUuid={setPatientUuid} />
+                      </div>
+                    </TableExpandedRow>
+                  </React.Fragment>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      />
+    </div>
+  );
+};
+
+export default PatientBills;

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,72 @@
+import useSWR from 'swr';
+import { type OpenmrsResource, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type ServiceConcept } from '../types';
+import { apiBasePath } from '../constants';
+
+type ResponseObject = {
+  results: Array<OpenmrsResource>;
+};
+
+export const useBillableServices = () => {
+  const url = `${apiBasePath}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 = `${restBaseUrl}/concept/21b8cf43-9f9f-4d02-9f4a-d710ece54261?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 = `${apiBasePath}paymentMode`;
+
+  const { data, error, isLoading } = useSWR<{ data: ResponseObject }>(url, openmrsFetch);
+
+  return {
+    paymentModes: data?.data.results ?? [],
+    error,
+    isLoading,
+  };
+};
+
+export const createBillableSerice = (payload: any) => {
+  const url = `${apiBasePath}api/billable-service`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: payload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export function useConceptsSearch(conceptToLookup: string) {
+  const conditionsSearchUrl = `${restBaseUrl}/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;