@openmrs/esm-billing-app 1.0.1-pre.98 → 1.0.2-pre.56

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

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import dayjs from 'dayjs';
+import { DatePickerInput, DatePicker } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { Calendar, Location, UserFollow } from '@carbon/react/icons';
-import { formatDate, useSession } from '@openmrs/esm-framework';
+import { Location, UserFollow } from '@carbon/react/icons';
+import { useSession } from '@openmrs/esm-framework';
+import { omrsDateFormat } from '../constants';
 import BillingIllustration from './billing-illustration.component';
+import SelectedDateContext from '../hooks/selectedDateContext';
 import styles from './billing-header.scss';
 
 interface BillingHeaderProps {
@@ -13,6 +17,7 @@ const BillingHeader: React.FC<BillingHeaderProps> = ({ title }) => {
   const { t } = useTranslation();
   const session = useSession();
   const location = session?.sessionLocation?.display;
+  const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
 
   return (
     <div className={styles.header} data-testid="billing-header">
@@ -32,8 +37,19 @@ const BillingHeader: React.FC<BillingHeaderProps> = ({ title }) => {
           <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>
+          <DatePicker
+            onChange={([date]) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
+            value={dayjs(selectedDate).format('DD MMM YYYY')}
+            dateFormat="d-M-Y"
+            datePickerType="single">
+            <DatePickerInput
+              style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
+              id="appointment-date-picker"
+              placeholder="DD-MMM-YYYY"
+              labelText=""
+              type="text"
+            />
+          </DatePicker>
         </div>
       </div>
     </div>

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

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
   @include type.type-style('body-compact-02');

package/src/billing.resource.ts

@@ -1,12 +1,18 @@
+import { useContext } from 'react';
+import dayjs from 'dayjs';
+import isEmpty from 'lodash-es/isEmpty';
+import sortBy from 'lodash-es/sortBy';
 import useSWR from 'swr';
 import { formatDate, parseDate, openmrsFetch, useSession, useVisit, restBaseUrl } from '@openmrs/esm-framework';
+import { apiBasePath, omrsDateFormat } from './constants';
 import type { FacilityDetail, MappedBill, PatientInvoice } from './types';
-import isEmpty from 'lodash-es/isEmpty';
-import sortBy from 'lodash-es/sortBy';
-import { apiBasePath } from './constants';
+import SelectedDateContext from './hooks/selectedDateContext';
 
 export const useBills = (patientUuid: string = '', billStatus: string = '') => {
-  const url = `${apiBasePath}bill?v=full`;
+  const { selectedDate } = useContext(SelectedDateContext);
+  const endDate = dayjs().endOf('day').format(omrsDateFormat);
+  const url = `${apiBasePath}bill?q=&v=full`;
+
   const patientUrl = `${apiBasePath}bill?patientUuid=${patientUuid}&v=full`;
 
   const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<PatientInvoice> } }>(
@@ -146,3 +152,14 @@ export const processBillItems = (payload) => {
     },
   });
 };
+
+export const updateBillItems = (payload) => {
+  const url = `${apiBasePath}bill/${payload.uuid}`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: payload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};

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

@@ -36,10 +36,10 @@ const BillsTable = () => {
   const config = useConfig();
   const layout = useLayoutType();
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
-  const [billPaymentStatus, setBillPaymentStatus] = useState('');
+  const [billPaymentStatus, setBillPaymentStatus] = useState('PENDING');
   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 { bills, isLoading, isValidating, error } = useBills('', '');
   const [searchString, setSearchString] = useState('');
 
   const headerData = [
@@ -62,22 +62,28 @@ const BillsTable = () => {
   ];
 
   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);
-          }),
-        );
-      }
-    }
+    if (!bills?.length) return bills;
 
-    return bills;
-  }, [searchString, bills]);
+    return bills
+      .map((bill) => {
+        if (bill.payments?.length > 0) {
+          const totalPaid = bill.payments.reduce((sum, payment) => sum + payment.amountTendered, 0);
+          if (totalPaid >= bill.totalAmount) {
+            bill.status = 'PAID';
+          }
+        }
+        return bill;
+      })
+      .filter((bill) => {
+        const statusMatch = billPaymentStatus === '' ? true : bill.status === billPaymentStatus;
+        const searchMatch = !searchString
+          ? true
+          : bill.patientName.toLowerCase().includes(searchString.toLowerCase()) ||
+            bill.identifier.toLowerCase().includes(searchString.toLowerCase());
+
+        return statusMatch && searchMatch;
+      });
+  }, [bills, searchString, billPaymentStatus]);
 
   const { paginated, goTo, results, currentPage } = usePagination(searchResults, pageSize);
 
@@ -86,23 +92,25 @@ const BillsTable = () => {
 
   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 rowData = results?.map((bill, index) => {
+    return {
+      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) => {
@@ -118,7 +126,9 @@ const BillsTable = () => {
     { id: 'PAID', text: 'Paid bills' },
   ];
 
-  const handleFilterChange = ({ selectedItem }) => setBillPaymentStatus(selectedItem.id);
+  const handleFilterChange = ({ selectedItem }) => {
+    setBillPaymentStatus(selectedItem.id);
+  };
 
   if (isLoading) {
     return (
@@ -152,7 +162,7 @@ const BillsTable = () => {
           className={styles.filterDropdown}
           direction="bottom"
           id={`filter-${id}`}
-          initialSelectedItem={filterItems[0]}
+          initialSelectedItem={filterItems[1]}
           items={filterItems}
           itemToString={(item) => (item ? item.text : '')}
           label=""

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

@@ -1,9 +1,9 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
-  margin: 2rem 0;
+  margin: layout.$spacing-07 0;
 }
 
 .emptyStateContainer,
@@ -63,7 +63,7 @@
   justify-content: space-between;
 
   &:global(.cds--inline-loading) {
-    max-height: 1rem;
+    max-height: layout.$spacing-05;
   }
 }
 
@@ -104,11 +104,11 @@
 }
 
 .expandedActiveVisitRow td {
-  padding: 0 2rem;
+  padding: 0 layout.$spacing-05;
 }
 
 .expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
-  padding: 0 1rem;
+  padding: 0 layout.$spacing-05;
 }
 
 .action {
@@ -172,7 +172,7 @@
 .filterEmptyStateContent {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: 0.5rem;
+  margin-bottom: layout.$spacing-03;
 }
 
 .filterEmptyStateHelper {

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

@@ -1,18 +1,39 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { useBills } from '../billing.resource';
 import BillsTable from './bills-table.component';
 
-const mockbills = useBills as jest.Mock;
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
 
 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' },
+  {
+    uuid: '1',
+    patientName: 'John Doe',
+    identifier: '12345678',
+    visitType: 'Checkup',
+    patientUuid: 'uuid1',
+    dateCreated: '2024-01-01',
+    lineItems: [{ billableService: 'Service 1' }],
+    status: 'PENDING',
+  },
+  {
+    uuid: '2',
+    patientName: 'Mary Smith',
+    identifier: '98765432',
+    visitType: 'Wake up',
+    patientUuid: 'uuid2',
+    dateCreated: '2024-01-02',
+    lineItems: [{ billableService: 'Service 2' }],
+    status: 'PENDING',
+  },
 ];
 
 jest.mock('../billing.resource', () => ({
-  ...jest.requireActual('../billing.resource'),
   useBills: jest.fn(() => ({
     bills: mockBillsData,
     isLoading: false,
@@ -21,47 +42,59 @@ jest.mock('../billing.resource', () => ({
   })),
 }));
 
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  EmptyDataIllustration: jest.fn(() => <div>Empty state illustration</div>),
+}));
+
 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 } })),
+  useLayoutType: jest.fn(() => 'desktop'),
+  isDesktop: jest.fn(() => true),
+  ErrorState: jest.fn(({ error }) => <div data-testid="error-state">{error?.message || error}</div>),
+  useConfig: jest.fn(() => ({
+    bills: {
+      pageSizes: [10, 20, 30, 40, 50],
+      pageSize: 10,
+    },
+  })),
   usePagination: jest.fn().mockImplementation((data) => ({
     currentPage: 1,
-    goTo: () => {},
+    goTo: jest.fn(),
     results: data,
-    paginated: false,
+    paginated: true,
   })),
+  ConfigurableLink: jest.fn(({ children, to, templateParams }) => {
+    const resolvedTo = '/home/billing/patient/' + templateParams.patientUuid + '/' + templateParams.uuid;
+    return <a href={resolvedTo}>{children}</a>;
+  }),
+  openmrsSpaBase: '',
 }));
 
 describe('BillsTable', () => {
+  const mockBills = useBills as jest.Mock;
   let user;
 
   beforeEach(() => {
     user = userEvent.setup();
+    mockBills.mockImplementation(() => ({
+      bills: mockBillsData,
+      isLoading: false,
+      isValidating: false,
+      error: null,
+    }));
   });
 
-  xit('renders data table with pending bills', () => {
+  test('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();
-    });
+    expect(screen.getByText('visitTime')).toBeInTheDocument();
+    expect(screen.getByText('identifier')).toBeInTheDocument();
 
-    const patientNameLink = screen.getByText('John Doe');
-    expect(patientNameLink).toBeInTheDocument();
-    expect(patientNameLink.tagName).toBe('A');
+    expect(screen.getByText(/John Doe/)).toBeInTheDocument();
+    expect(screen.getByText('12345678')).toBeInTheDocument();
   });
 
-  it('displays empty state when there are no bills', () => {
-    mockbills.mockImplementationOnce(() => ({
+  test('displays empty state when there are no bills', () => {
+    mockBills.mockImplementationOnce(() => ({
       bills: [],
       isLoading: false,
       isValidating: false,
@@ -69,12 +102,11 @@ describe('BillsTable', () => {
     }));
 
     render(<BillsTable />);
-
-    expect(screen.getByText(/there are no bills to display/i)).toBeInTheDocument();
+    expect(screen.getByText('There are no bills to display.')).toBeInTheDocument();
   });
 
-  it('should not display the table when the data is loading', () => {
-    mockbills.mockImplementationOnce(() => ({
+  test('should show the loading spinner while retrieving data', () => {
+    mockBills.mockImplementationOnce(() => ({
       bills: undefined,
       isLoading: true,
       isValidating: false,
@@ -82,73 +114,81 @@ describe('BillsTable', () => {
     }));
 
     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();
-    });
+    const dataTableSkeleton = screen.getByRole('table');
+    expect(dataTableSkeleton).toBeInTheDocument();
+    expect(dataTableSkeleton).toHaveClass('cds--skeleton cds--data-table cds--data-table--zebra');
   });
 
-  it('should display the error state when there is error', () => {
-    mockbills.mockImplementationOnce(() => ({
-      activeVisits: undefined,
+  test('should display the error state when there is error', () => {
+    mockBills.mockImplementationOnce(() => ({
+      bills: undefined,
       isLoading: false,
       isValidating: false,
-      error: 'Error in fetching data',
+      error: new Error('Error in fetching data'),
     }));
 
     render(<BillsTable />);
-
-    expect(screen.getByText(/sorry, there was a problem displaying this information/i)).toBeInTheDocument();
+    expect(screen.getByTestId('error-state')).toBeInTheDocument();
     expect(screen.queryByRole('table')).not.toBeInTheDocument();
   });
 
-  test('should filter bills by search term and bill payment status', async () => {
+  test('should filter bills by search term', async () => {
     render(<BillsTable />);
 
     const searchInput = screen.getByRole('searchbox');
-    await user.type(searchInput, 'John Doe');
+    expect(searchInput).toBeInTheDocument();
 
     expect(screen.getByText('John Doe')).toBeInTheDocument();
-    expect(screen.queryByText('Mary Smith')).not.toBeInTheDocument();
+    expect(screen.getByText('Mary Smith')).toBeInTheDocument();
 
-    await user.clear(searchInput);
-    await user.type(searchInput, 'Mary Smith');
+    await user.type(searchInput, 'John Doe');
 
-    expect(screen.getByText('Mary Smith')).toBeInTheDocument();
-    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.queryByText('Mary Smith')).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+  });
+
+  test('should render patient name as a link', () => {
+    render(<BillsTable />);
 
-    // 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('', '');
+    const patientNameLink = screen.getByRole('link', { name: 'John Doe' });
+    expect(patientNameLink).toBeInTheDocument();
 
-    await user.click(screen.getByText('Pending bills'));
-    expect(screen.getByText('Pending bills')).toBeInTheDocument();
-    expect(mockbills).toHaveBeenCalledWith('', 'PENDING');
+    expect(patientNameLink.getAttribute('href')).toEqual('/home/billing/patient/uuid1/1');
   });
 
-  test('should show the loading spinner while retrieving data', () => {
-    mockbills.mockImplementationOnce(() => ({
-      bills: undefined,
-      isLoading: true,
+  test('should filter bills by payment status', async () => {
+    mockBills.mockImplementationOnce(() => ({
+      bills: mockBillsData.map((bill) => ({ ...bill, status: 'PENDING' })),
+      isLoading: false,
       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');
+    const filterDropdown = screen.getByText('Pending bills');
+    await user.click(filterDropdown);
+
+    const paidBillsOption = screen.getAllByText('Paid bills')[0];
+    await user.click(paidBillsOption);
+
+    expect(screen.getByText('noMatchingBillsToDisplay')).toBeInTheDocument();
   });
 
-  test('should render patient name as a link', async () => {
+  test('should show loading state during background updates', () => {
+    mockBills.mockImplementationOnce(() => ({
+      bills: mockBillsData,
+      isLoading: false,
+      isValidating: true,
+      error: null,
+    }));
+
     render(<BillsTable />);
 
-    const patientNameLink = screen.getByRole('link', { name: 'John Doe' });
-    expect(patientNameLink).toBeInTheDocument();
-    expect(patientNameLink).toHaveAttribute('href', '/openmrs/spa/home/billing/patient/uuid1/1');
+    const loadingIndicator = screen.getByTitle('loading');
+    expect(loadingIndicator).toBeInTheDocument();
   });
 });

package/src/config-schema.ts

@@ -23,11 +23,36 @@ export const configSchema = {
       payingDetails: '44b34972-6630-4e5a-a9f6-a6eb0f109650',
       nonPayingDetails: 'f3fb2d88-cccd-422c-8766-be101ba7bd2e',
       insuranceDetails: 'beac329b-f1dc-4a33-9e7c-d95821a137a6',
+    },
+  },
+
+  nonPayingPatientCategories: {
+    _type: Type.Object,
+    _description: 'Concept UUIDs for non-paying patient categories',
+    _default: {
       childUnder5: '1528AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
       student: '159465AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
   },
 
+  postBilledItems: {
+    _type: Type.Object,
+    _description: 'Post Bill Items such as cashPoints, cashier, priceUUid when submitting a bill',
+    _default: {
+      cashPoint: '54065383-b4d4-42d2-af4d-d250a1fd2590',
+      cashier: 'f9badd80-ab76-11e2-9e96-0800200c9a66',
+      priceUuid: '7b9171ac-d3c1-49b4-beff-c9902aee5245',
+    },
+  },
+
+  serviceTypes: {
+    _type: Type.Object,
+    _description: 'Post Bill Items such as cashPoints, cashier, priceUUid when submitting a bill',
+    _default: {
+      billableService: '21b8cf43-9f9f-4d02-9f4a-d710ece54261',
+    },
+  },
+
   defaultCurrency: {
     _type: Type.String,
     _description: 'The default currency for the application. Specify the currency code (e.g., KES, UGX, GBP).',
@@ -35,10 +60,16 @@ export const configSchema = {
   },
 
   pageSize: {
-    _type: Type.String,
+    _type: Type.Number,
     _description: 'The default page size',
     _default: 10,
   },
+
+  showEditBillButton: {
+    _type: Type.Boolean,
+    _description: 'Whether to show the edit bill button or not.',
+    _default: false,
+  },
 };
 
 export interface ConfigObject {
@@ -47,4 +78,8 @@ export interface ConfigObject {
   catergoryConcepts: Object;
   pageSize;
   object;
+  showEditBillButton: boolean;
+  postBilledItems: Object;
+  serviceTypes: Object;
+  nonPayingPatientCategories: Object;
 }

package/src/constants.ts

@@ -1,3 +1,5 @@
 import { restBaseUrl } from '@openmrs/esm-framework';
 
 export const apiBasePath = `${restBaseUrl}/billing/`;
+
+export const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';

package/src/dashboard.meta.ts

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

package/src/helpers/functions.ts

@@ -1,6 +1,4 @@
 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>) {

package/src/hooks/selectedDateContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import dayjs from 'dayjs';
+import { omrsDateFormat } from '../constants';
+
+const SelectedDateContext = createContext({
+  selectedDate: dayjs().startOf('day').format(omrsDateFormat),
+  setSelectedDate: (date: string) => {},
+});
+
+export default SelectedDateContext;