@openmrs/esm-billing-app 1.0.2-pre.86 → 1.0.2-pre.863

package/src/billable-services/payment-modes/payment-modes-config.component.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Button,
+  DataTable,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar, openmrsFetch, restBaseUrl, showModal, getCoreTranslation } from '@openmrs/esm-framework';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import styles from './payment-modes-config.scss';
+
+const PaymentModesConfig: React.FC = () => {
+  const { t } = useTranslation();
+  const [paymentModes, setPaymentModes] = useState([]);
+
+  const fetchPaymentModes = useCallback(async () => {
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/billing/paymentMode?v=full`);
+      setPaymentModes(response.data.results || []);
+    } catch (err) {
+      showSnackbar({
+        title: getCoreTranslation('error'),
+        subtitle: t('errorFetchingPaymentModes', 'An error occurred while fetching payment modes.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  }, [t]);
+
+  useEffect(() => {
+    fetchPaymentModes();
+  }, [fetchPaymentModes]);
+
+  const handleAddPaymentMode = () => {
+    const dispose = showModal('add-payment-mode-modal', {
+      onPaymentModeAdded: fetchPaymentModes,
+      closeModal: () => dispose(),
+    });
+  };
+
+  const handleDeletePaymentMode = (paymentMode) => {
+    const dispose = showModal('delete-payment-mode-modal', {
+      paymentModeUuid: paymentMode.uuid,
+      paymentModeName: paymentMode.name,
+      onPaymentModeDeleted: fetchPaymentModes,
+      closeModal: () => dispose(),
+    });
+  };
+
+  const rowData = paymentModes.map((mode) => ({
+    id: mode.uuid,
+    name: mode.name,
+    description: mode.description || '--',
+  }));
+
+  const headerData = [
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'description', header: t('description', 'Description') },
+    { key: 'actions', header: getCoreTranslation('actions') },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <CardHeader title={t('paymentModeHistory', 'Payment mode history')}>
+          <Button renderIcon={Add} onClick={handleAddPaymentMode} kind="ghost">
+            {t('addNewPaymentMode', 'Add new payment mode')}
+          </Button>
+        </CardHeader>
+        <DataTable rows={rowData} headers={headerData} isSortable size="lg">
+          {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+            <TableContainer>
+              <Table className={styles.table} {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id} {...getRowProps({ row })}>
+                      {row.cells.map((cell) =>
+                        cell.info.header !== 'actions' ? (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ) : (
+                          <TableCell key={cell.id}>
+                            <OverflowMenu>
+                              <OverflowMenuItem
+                                className={styles.menuItem}
+                                itemText={getCoreTranslation('delete')}
+                                onClick={() => {
+                                  const selected = paymentModes.find((p) => p.uuid === row.id);
+                                  handleDeletePaymentMode(selected);
+                                }}
+                              />
+                            </OverflowMenu>
+                          </TableCell>
+                        ),
+                      )}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentModesConfig;

package/src/billable-services/{payyment-modes → payment-modes}/payment-modes-config.scss

@@ -13,11 +13,12 @@
   padding: layout.$spacing-05;
 }
 
-.historyContainer {
-  margin-top: layout.$spacing-05;
-}
 
 .table {
   width: 100%;
   table-layout: auto;
-}
+}
+
+.menuItem {
+  max-width: none;
+}

package/src/billing-dashboard/billing-dashboard.scss

@@ -7,7 +7,7 @@
 }
 
 .billsTableContainer {
-  margin: layout.$spacing-07 layout.$spacing-05;
+  margin: layout.$spacing-05;
 }
 
 .illo {

package/src/billing-form/billing-checkin-form.component.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback, useState } from 'react';
 import { Dropdown, InlineLoading, InlineNotification } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
 import { useCashPoint, useBillableItems, createPatientBill } from './billing-form.resource';
 import VisitAttributesForm from './visit-attributes/visit-attributes-form.component';
 import styles from './billing-checkin-form.scss';
 
-const DEFAULT_PRICE = 500.00001;
 const PENDING_PAYMENT_STATUS = 'PENDING';
 
 type BillingCheckInFormProps = {
@@ -22,20 +21,25 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
   const [paymentMethod, setPaymentMethod] = useState<any>();
   let lineList = [];
 
-  const handleCreateExtraVisitInfo = useCallback((createBillPayload) => {
-    createPatientBill(createBillPayload).then(
-      (res) => {
-        showSnackbar({ title: 'Patient Bill', subtitle: 'Patient has been billed successfully', kind: 'success' });
-      },
-      (error) => {
+  const handleCreateExtraVisitInfo = useCallback(
+    async (createBillPayload) => {
+      try {
+        await createPatientBill(createBillPayload);
         showSnackbar({
-          title: 'Patient Bill Error',
-          subtitle: 'An error has occurred while creating patient bill',
+          title: t('patientBill', 'Patient bill'),
+          subtitle: t('billCreatedSuccessfully', 'Bill created successfully'),
+          kind: 'success',
+        });
+      } catch (error) {
+        showSnackbar({
+          title: t('billCreationError', 'Bill creation error'),
+          subtitle: t('errorCreatingBill', 'An error occurred while creating the bill'),
           kind: 'error',
         });
-      },
-    );
-  }, []);
+      }
+    },
+    [t],
+  );
 
   const handleBillingService = ({ selectedItem }) => {
     const cashPointUuid = cashPoints?.[0]?.uuid ?? '';
@@ -74,8 +78,8 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
     return (
       <InlineLoading
         status="active"
-        iconDescription={t('loading', 'Loading')}
-        description={t('loadingBillingServices', 'Loading billing services...')}
+        iconDescription={getCoreTranslation('loading')}
+        description={`${t('loadingBillingServices', 'Loading billing services')}...`}
       />
     );
   }
@@ -97,7 +101,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
       <InlineNotification
         kind="error"
         lowContrast
-        title={t('billErrorService', 'Bill service error')}
+        title={t('billErrorService', 'Billing service error')}
         subtitle={t('errorLoadingBillServices', 'Error loading bill services')}
       />
     );
@@ -111,7 +115,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
           <div className={styles.sectionTitle}>{t('billing', 'Billing')}</div>
           <div className={styles.sectionField}></div>
           <Dropdown
-            label={t('selectBillableService', 'Select a billable service...')}
+            label={t('selectBillableService', 'Select a billable service')}
             onChange={handleBillingService}
             id="billable-items"
             items={lineList}

package/src/billing-form/billing-checkin-form.test.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
-import { useBillableItems, useCashPoint, createPatientBill, usePaymentMethods } from './billing-form.resource';
+import { useConfig } from '@openmrs/esm-framework';
+import { type BillingConfig } from '../config-schema';
+import { useBillableItems, useCashPoint, usePaymentMethods } from './billing-form.resource';
 import BillingCheckInForm from './billing-checkin-form.component';
 
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockUseCashPoint = jest.mocked(useCashPoint);
+const mockUseBillableItems = jest.mocked(useBillableItems);
+const mockUsePaymentMethods = jest.mocked(usePaymentMethods);
+
 const mockCashPoints = [
   {
     uuid: '54065383-b4d4-42d2-af4d-d250a1fd2590',
@@ -16,6 +23,7 @@ const mockCashPoints = [
 const mockBillableItems = [
   {
     uuid: 'b37dddd6-4490-4bf7-b694-43bf19d04059',
+    name: 'Consultation',
     conceptUuid: '1926AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     conceptName: 'Consultation billable item',
     hasExpiration: false,
@@ -25,9 +33,21 @@ const mockBillableItems = [
     categoryName: 'Non Drug',
     commonName: 'Consultation',
     acronym: 'CONSULT',
+    servicePrices: [
+      {
+        uuid: 'price-1',
+        name: 'Default',
+        price: '100.00',
+        paymentMode: {
+          uuid: '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
+          name: 'Insurance',
+        },
+      },
+    ],
   },
   {
     uuid: 'b47dddd6-4490-4bf7-b694-43bf19d04059',
+    name: 'Lab Testing',
     conceptUuid: '1926AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     conceptName: 'Lab Testing billable item',
     hasExpiration: false,
@@ -37,25 +57,65 @@ const mockBillableItems = [
     categoryName: 'Non Drug',
     commonName: 'Lab Testing',
     acronym: 'CONSULT',
+    servicePrices: [
+      {
+        uuid: 'price-2',
+        name: 'Default',
+        price: '500.00001',
+        paymentMode: {
+          uuid: '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
+          name: 'Insurance',
+        },
+      },
+    ],
   },
 ];
 
-const mockUseCashPoint = useCashPoint as jest.MockedFunction<typeof useCashPoint>;
-const mockUseBillableItems = useBillableItems as jest.MockedFunction<typeof useBillableItems>;
-const mockCreatePatientBill = createPatientBill as jest.MockedFunction<typeof createPatientBill>;
-const mockusePaymentMethods = usePaymentMethods as jest.MockedFunction<typeof usePaymentMethods>;
+const mockPaymentMethods = [
+  {
+    uuid: '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
+    name: 'Insurance',
+    description: 'Insurance payment',
+  },
+  {
+    uuid: '2c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
+    name: 'Cash',
+    description: 'Cash payment',
+  },
+];
 
 jest.mock('./billing-form.resource', () => ({
   useBillableItems: jest.fn(),
   useCashPoint: jest.fn(),
   createPatientBill: jest.fn(),
+  usePaymentMethods: jest.fn(),
 }));
 
 const testProps = { patientUuid: 'some-patient-uuid', setExtraVisitInfo: jest.fn() };
 
-xdescribe('BillingCheckInForm', () => {
+describe('BillingCheckInForm', () => {
   beforeEach(() => {
     jest.resetAllMocks();
+    mockUseConfig.mockReturnValue({
+      patientCatergory: {
+        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: {
+        payingDetails: '44b34972-6630-4e5a-a9f6-a6eb0f109650',
+        nonPayingDetails: 'f3fb2d88-cccd-422c-8766-be101ba7bd2e',
+        insuranceDetails: 'beac329b-f1dc-4a33-9e7c-d95821a137a6',
+      },
+      nonPayingPatientCategories: {
+        childUnder5: '1528AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        student: '159465AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      },
+    } as BillingConfig);
+    mockUsePaymentMethods.mockReturnValue({ paymentModes: mockPaymentMethods, isLoading: false, error: null });
   });
 
   test('should show the loading spinner while retrieving data', () => {
@@ -72,59 +132,72 @@ xdescribe('BillingCheckInForm', () => {
     mockUseCashPoint.mockReturnValueOnce({ cashPoints: [], isLoading: false, error });
     renderBillingCheckinForm();
 
-    expect(screen.getByText('Bill service error')).toBeInTheDocument();
-    expect(screen.getByText('Error loading bill services')).toBeInTheDocument();
+    expect(screen.getByText(/billing service error/i)).toBeInTheDocument();
+    expect(screen.getByText(/error loading bill services/i)).toBeInTheDocument();
   });
 
   test('should render the form correctly and generate the required payload', async () => {
     const user = userEvent.setup();
-    mockUseCashPoint.mockReturnValue({ cashPoints: [], isLoading: false, error: null });
+    mockUseCashPoint.mockReturnValue({ cashPoints: mockCashPoints, isLoading: false, error: null });
     mockUseBillableItems.mockReturnValue({ lineItems: mockBillableItems, isLoading: false, error: null });
     renderBillingCheckinForm();
 
     const paymentTypeSelect = screen.getByRole('group', { name: 'Payment Details' });
     expect(paymentTypeSelect).toBeInTheDocument();
 
+    // Select "Paying" radio button
     const paymentTypeRadio = screen.getByRole('radio', { name: 'Paying' });
     expect(paymentTypeRadio).toBeInTheDocument();
     await user.click(paymentTypeRadio);
 
-    const billiableSelect = screen.getByRole('combobox', { name: 'Billable service' });
-    expect(billiableSelect).toBeInTheDocument();
-    await user.click(screen.getByRole('combobox', { name: 'Billable service' }));
+    // Wait for payment methods dropdown to appear and select a payment method
+    const paymentMethodsDropdown = await screen.findByRole('combobox', { name: /Payment methods/i });
+    expect(paymentMethodsDropdown).toBeInTheDocument();
+    await user.click(paymentMethodsDropdown);
 
-    await user.click(screen.getByText('Lab Testing'));
+    // Select "Insurance" payment method
+    const insuranceOption = await screen.findByText('Insurance');
+    await user.click(insuranceOption);
+
+    // Now select billable service
+    const billableSelect = screen.getByRole('combobox', { name: 'Billable service' });
+    expect(billableSelect).toBeInTheDocument();
+    await user.click(billableSelect);
+
+    // Click on Lab Testing option
+    const labTestingOption = await screen.findByText(/Lab Testing \(Default:500\.00001\)/);
+    await user.click(labTestingOption);
 
     expect(testProps.setExtraVisitInfo).toHaveBeenCalled();
     expect(testProps.setExtraVisitInfo).toHaveBeenCalledWith({
       createBillPayload: {
         lineItems: [
           {
-            item: 'b47dddd6-4490-4bf7-b694-43bf19d04059',
+            billableService: 'b47dddd6-4490-4bf7-b694-43bf19d04059',
             quantity: 1,
-            price: 500.00001,
+            price: '500.00001',
             priceName: 'Default',
-            priceUuid: '',
+            priceUuid: 'price-2',
             lineItemOrder: 0,
             paymentStatus: 'PENDING',
           },
         ],
-        cashPoint: '',
+        cashPoint: '54065383-b4d4-42d2-af4d-d250a1fd2590',
         patient: 'some-patient-uuid',
         status: 'PENDING',
         payments: [],
       },
       handleCreateExtraVisitInfo: expect.anything(),
-      attributes: [
-        {
-          attributeType: 'caf2124f-00a9-4620-a250-efd8535afd6d',
+      attributes: expect.arrayContaining([
+        expect.objectContaining({
+          attributeType: 'fbc0702d-b4c9-4968-be63-af8ad3ad6239',
+          value: '44b34972-6630-4e5a-a9f6-a6eb0f109650',
+        }),
+        expect.objectContaining({
+          attributeType: '8553afa0-bdb9-4d3c-8a98-05fa9350aa85',
           value: '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
-        },
-        {
-          attributeType: '919b51c9-8e2e-468f-8354-181bf3e55786',
-          value: true,
-        },
-      ],
+        }),
+      ]),
     });
   });
 });