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

package/src/bills-table/bills-table.scss

@@ -0,0 +1,181 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  margin: 2rem 0;
+}
+
+.emptyStateContainer,
+.loaderContainer {
+  @extend .container;
+}
+
+.billListContainer {
+  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;
+  }
+}
+
+.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;
+}

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

@@ -0,0 +1,154 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useBills } from '../billing.resource';
+import BillsTable from './bills-table.component';
+
+const mockbills = useBills as jest.Mock;
+
+const mockBillsData = [
+  { uuid: '1', patientName: 'John Doe', identifier: '12345678', visitType: 'Checkup', patientUuid: 'uuid1' },
+  { uuid: '2', patientName: 'Mary Smith', identifier: '98765432', visitType: 'Wake up', patientUuid: 'uuid2' },
+];
+
+jest.mock('../billing.resource', () => ({
+  ...jest.requireActual('../billing.resource'),
+  useBills: jest.fn(() => ({
+    bills: mockBillsData,
+    isLoading: false,
+    isValidating: false,
+    error: null,
+  })),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  ErrorState: jest.fn(() => (
+    <div>
+      Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site
+      administrator and quote the error code above.
+    </div>
+  )),
+  useConfig: jest.fn(() => ({ bills: { pageSizes: [10, 20, 30, 40, 50], pageSize: 10 } })),
+  usePagination: jest.fn().mockImplementation((data) => ({
+    currentPage: 1,
+    goTo: () => {},
+    results: data,
+    paginated: false,
+  })),
+}));
+
+describe('BillsTable', () => {
+  let user;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  xit('renders data table with pending bills', () => {
+    render(<BillsTable />);
+
+    expect(screen.getByText('Visit time')).toBeInTheDocument();
+    expect(screen.getByText('Identifier')).toBeInTheDocument();
+    const expectedColumnHeaders = [/Visit time/, /Identifier/, /Name/, /Billing service/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    const patientNameLink = screen.getByText('John Doe');
+    expect(patientNameLink).toBeInTheDocument();
+    expect(patientNameLink.tagName).toBe('A');
+  });
+
+  it('displays empty state when there are no bills', () => {
+    mockbills.mockImplementationOnce(() => ({
+      bills: [],
+      isLoading: false,
+      isValidating: false,
+      error: null,
+    }));
+
+    render(<BillsTable />);
+
+    expect(screen.getByText(/there are no bills to display/i)).toBeInTheDocument();
+  });
+
+  it('should not display the table when the data is loading', () => {
+    mockbills.mockImplementationOnce(() => ({
+      bills: undefined,
+      isLoading: true,
+      isValidating: false,
+      error: null,
+    }));
+
+    render(<BillsTable />);
+
+    const expectedColumnHeaders = [/Visit time/, /Identifier/, /Name/, /Billing service/, /Department/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.queryByRole('columnheader', { name: new RegExp(header, 'i') })).not.toBeInTheDocument();
+    });
+  });
+
+  it('should display the error state when there is error', () => {
+    mockbills.mockImplementationOnce(() => ({
+      activeVisits: undefined,
+      isLoading: false,
+      isValidating: false,
+      error: 'Error in fetching data',
+    }));
+
+    render(<BillsTable />);
+
+    expect(screen.getByText(/sorry, there was a problem displaying this information/i)).toBeInTheDocument();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+
+  test('should filter bills by search term and bill payment status', async () => {
+    render(<BillsTable />);
+
+    const searchInput = screen.getByRole('searchbox');
+    await user.type(searchInput, 'John Doe');
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.queryByText('Mary Smith')).not.toBeInTheDocument();
+
+    await user.clear(searchInput);
+    await user.type(searchInput, 'Mary Smith');
+
+    expect(screen.getByText('Mary Smith')).toBeInTheDocument();
+    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+
+    // Should filter the table when bill payment status combobox is changed
+    const billCategorySelect = screen.getByRole('combobox');
+    expect(billCategorySelect).toBeInTheDocument();
+    await user.click(billCategorySelect, { name: 'All bills' });
+    expect(mockbills).toHaveBeenCalledWith('', '');
+
+    await user.click(screen.getByText('Pending bills'));
+    expect(screen.getByText('Pending bills')).toBeInTheDocument();
+    expect(mockbills).toHaveBeenCalledWith('', 'PENDING');
+  });
+
+  test('should show the loading spinner while retrieving data', () => {
+    mockbills.mockImplementationOnce(() => ({
+      bills: undefined,
+      isLoading: true,
+      isValidating: false,
+      error: null,
+    }));
+
+    render(<BillsTable />);
+
+    const dataTableSkeleton = screen.getByRole('table');
+    expect(dataTableSkeleton).toBeInTheDocument();
+    expect(dataTableSkeleton).toHaveClass('cds--skeleton cds--data-table cds--data-table--zebra');
+  });
+
+  test('should render patient name as a link', async () => {
+    render(<BillsTable />);
+
+    const patientNameLink = screen.getByRole('link', { name: 'John Doe' });
+    expect(patientNameLink).toBeInTheDocument();
+    expect(patientNameLink).toHaveAttribute('href', '/openmrs/spa/home/billing/patient/uuid1/1');
+  });
+});

package/src/config-schema.ts

@@ -0,0 +1,50 @@
+import { Type } from '@openmrs/esm-framework';
+
+export interface BillingConfig {}
+
+export const configSchema = {
+  patientCatergory: {
+    _type: Type.Object,
+    _description: 'Patient Category Custom UUIDs',
+    _default: {
+      paymentDetails: 'fbc0702d-b4c9-4968-be63-af8ad3ad6239',
+      paymentMethods: '8553afa0-bdb9-4d3c-8a98-05fa9350aa85',
+      policyNumber: '3a988e33-a6c0-4b76-b924-01abb998944b',
+      insuranceScheme: 'aac48226-d143-4274-80e0-264db4e368ee',
+      patientCategory: '3b9dfac8-9e4d-11ee-8c90-0242ac120002',
+      formPayloadPending: '919b51c9-8e2e-468f-8354-181bf3e55786',
+    },
+  },
+
+  catergoryConcepts: {
+    _type: Type.Object,
+    _description: 'Patient Category Concept UUIDs',
+    _default: {
+      payingDetails: '44b34972-6630-4e5a-a9f6-a6eb0f109650',
+      nonPayingDetails: 'f3fb2d88-cccd-422c-8766-be101ba7bd2e',
+      insuranceDetails: 'beac329b-f1dc-4a33-9e7c-d95821a137a6',
+      childUnder5: '1528AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      student: '159465AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+  },
+
+  defaultCurrency: {
+    _type: Type.String,
+    _description: 'The default currency for the application. Specify the currency code (e.g., KES, UGX, GBP).',
+    _default: 'KES',
+  },
+
+  pageSize: {
+    _type: Type.String,
+    _description: 'The default page size',
+    _default: 10,
+  },
+};
+
+export interface ConfigObject {
+  patientCatergory: Object;
+  defaultCurrency: string;
+  catergoryConcepts: Object;
+  pageSize;
+  object;
+}

package/src/constants.ts

@@ -0,0 +1,3 @@
+import { restBaseUrl } from '@openmrs/esm-framework';
+
+export const apiBasePath = `${restBaseUrl}/billing/`;

package/src/dashboard.meta.ts

@@ -0,0 +1,7 @@
+export const dashboardMeta = {
+  slot: 'patient-chart-billing-dashboard-slot',
+  columns: 1,
+  title: 'Billing history',
+  path: 'Billing history',
+  hideDashboardTitle: true,
+};

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css';
+declare module '*.scss';
+declare module '@carbon/react';
+declare type SideNavProps = object;

package/src/helpers/functions.ts

@@ -0,0 +1,66 @@
+import { type Payment, type LineItem } from '../types';
+import { type ConfigObject } from '../config-schema';
+import { useConfig } from '@openmrs/esm-framework';
+
+// amount already paid
+export function calculateTotalAmountTendered(payments: Array<Payment>) {
+  return Array.isArray(payments)
+    ? payments.reduce((totalAmount, item) => {
+        // Ensure that "amount" property is present and numeric
+        if (typeof item.amount === 'number' && item.voided !== true) {
+          return totalAmount + item.amount;
+        }
+        return totalAmount;
+      }, 0)
+    : 0;
+}
+
+// balance
+export function calculateTotalBalance(lineItems: Array<LineItem>, payments: Array<Payment>) {
+  return Math.min(this.calculateTotalAmount(lineItems) - this.calculateTotalAmountTendered(payments));
+}
+
+// total bill
+export function calculateTotalAmount(lineItems: Array<LineItem>) {
+  return Array.isArray(lineItems)
+    ? lineItems.reduce((totalAmount, item) => {
+        // Ensure that "price" and "quantity" properties are present and numeric
+        if (typeof item.price === 'number' && typeof item.quantity === 'number' && item.voided !== true) {
+          return totalAmount + item.price * item.quantity;
+        }
+        return totalAmount;
+      }, 0)
+    : 0;
+}
+
+export const convertToCurrency = (amountToConvert: number, currencyType?: string) => {
+  const locale = window.i18next?.language?.substring(0, 2) ?? '';
+  const formatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currencyType,
+    minimumFractionDigits: 2,
+  });
+
+  let formattedAmount = formatter.format(Math.abs(amountToConvert));
+
+  if (amountToConvert < 0) {
+    formattedAmount = `(${formattedAmount})`;
+  }
+
+  return formattedAmount;
+};
+
+export const getGender = (gender: string, t) => {
+  switch (gender) {
+    case 'male':
+      return t('male', 'Male');
+    case 'female':
+      return t('female', 'Female');
+    case 'other':
+      return t('other', 'Other');
+    case 'unknown':
+      return t('unknown', 'Unknown');
+    default:
+      return gender;
+  }
+};

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './functions';

package/src/index.ts

@@ -0,0 +1,72 @@
+import { configSchema } from './config-schema';
+import { createDashboardLink, registerWorkspace } from '@openmrs/esm-patient-common-lib';
+import { createLeftPanelLink } from './left-panel-link.component';
+import { dashboardMeta } from './dashboard.meta';
+import {
+  defineConfigSchema,
+  getAsyncLifecycle,
+  getSyncLifecycle,
+  registerFeatureFlag,
+  translateFrom,
+} from '@openmrs/esm-framework';
+import BillableServiceHome from './billable-services/billable-services-home.component';
+import BillableServicesCardLink from './billable-services-admin-card-link.component';
+import BillHistory from './bill-history/bill-history.component';
+import BillingCheckInForm from './billing-form/billing-checkin-form.component';
+import RequirePaymentModal from './modal/require-payment-modal.component';
+import RootComponent from './root.component';
+import VisitAttributeTags from './invoice/payments/visit-tags/visit-attribute.component';
+import BillableServicesDashboard from './billable-services/dashboard/dashboard.component';
+import ServiceMetrics from './billable-services/dashboard/service-metrics.component';
+
+const moduleName = '@openmrs/esm-billing-app';
+
+const options = {
+  featureName: 'billing',
+  moduleName,
+};
+
+registerFeatureFlag(
+  'billing',
+  'Billing module',
+  'This feature introduces navigation links on the patient chart and home page to allow accessing the billing module features',
+);
+
+// t('billing', 'Billing')
+export const billingDashboardLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: 'billing',
+    title: 'Billing',
+  }),
+  options,
+);
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+
+  // t('billingForm', 'Billing form')
+  registerWorkspace({
+    name: 'billing-form-workspace',
+    title: translateFrom(moduleName, 'billingForm', 'Billing form'),
+    load: getAsyncLifecycle(() => import('./billing-form/billing-form.component'), options),
+    type: 'billing',
+    canHide: false,
+    width: 'wider',
+  });
+}
+
+export const billingSummaryDashboardLink = getSyncLifecycle(
+  createDashboardLink({ ...dashboardMeta, moduleName }),
+  options,
+);
+
+export const billableServicesCardLink = getSyncLifecycle(BillableServicesCardLink, options);
+export const billableServicesHome = getSyncLifecycle(BillableServiceHome, options);
+export const billingCheckInForm = getSyncLifecycle(BillingCheckInForm, options);
+export const serviceMetrics = getSyncLifecycle(ServiceMetrics, options);
+export const billingPatientSummary = getSyncLifecycle(BillHistory, options);
+export const requirePaymentModal = getSyncLifecycle(RequirePaymentModal, options);
+export const root = getSyncLifecycle(RootComponent, options);
+export const visitAttributeTags = getSyncLifecycle(VisitAttributeTags, options);