@openmrs/esm-billing-app 1.0.2-pre.92 → 1.0.2-pre.933

package/src/billable-services/payment-modes/payment-mode-form.modal.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useSWRConfig } from 'swr';
+import { Button, Form, ModalBody, ModalFooter, ModalHeader, Stack, TextInput } from '@carbon/react';
+import { showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
+import { type PaymentModePayload } from '../../types';
+import { apiBasePath } from '../../constants';
+import { createPaymentMode, updatePaymentMode } from '../billable-service.resource';
+
+type PaymentModeFormValues = {
+  uuid?: string;
+  name: string;
+  description: string;
+};
+
+interface PaymentModeFormModalProps {
+  closeModal: () => void;
+  editPaymentMode?: PaymentModeFormValues;
+}
+
+const PaymentModeFormModal: React.FC<PaymentModeFormModalProps> = ({ closeModal, editPaymentMode }) => {
+  const { t } = useTranslation();
+  const { mutate } = useSWRConfig();
+
+  const paymentModeSchema = z.object({
+    name: z.string().min(1, t('paymentModeNameRequired', 'Payment mode name is required')),
+    description: z.string().optional(),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<PaymentModeFormValues>({
+    resolver: zodResolver(paymentModeSchema),
+    defaultValues: {
+      name: editPaymentMode?.name ?? '',
+      description: editPaymentMode?.description ?? '',
+    },
+  });
+
+  const onSubmit = async (data: PaymentModeFormValues) => {
+    const url = `${apiBasePath}paymentMode`;
+    try {
+      const payload: PaymentModePayload = {
+        name: data.name,
+        description: data.description,
+      };
+      if (editPaymentMode?.uuid) {
+        await updatePaymentMode(editPaymentMode.uuid, payload);
+      } else {
+        await createPaymentMode(payload);
+      }
+
+      mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        subtitle: t('paymentModeSaved', 'Payment mode was successfully saved.'),
+        kind: 'success',
+      });
+
+      closeModal();
+      reset({ name: '', description: '' });
+    } catch (err) {
+      showSnackbar({
+        title: getCoreTranslation('error'),
+        subtitle: err?.message || t('errorSavingPaymentMode', 'An error occurred while saving the payment mode.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader
+        closeModal={closeModal}
+        title={editPaymentMode ? t('editPaymentMode', 'Edit payment mode') : t('addPaymentMode', 'Add payment mode')}
+      />
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <ModalBody>
+          <Stack gap={5}>
+            <Controller
+              name="name"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  id="payment-mode-name"
+                  labelText={t('paymentModeNameLabel', 'Payment mode name')}
+                  placeholder={t('paymentModeNamePlaceholder', 'For example, Cash, Credit Card')}
+                  invalid={!!errors.name}
+                  invalidText={errors.name?.message}
+                  {...field}
+                />
+              )}
+            />
+            <Controller
+              name="description"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  id="payment-mode-description"
+                  labelText={t('description', 'Description')}
+                  placeholder={t('descriptionPlaceholder', 'For example, Used for all cash transactions')}
+                  invalid={!!errors.description}
+                  invalidText={errors.description?.message}
+                  {...field}
+                />
+              )}
+            />
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {getCoreTranslation('cancel')}
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? t('saving', 'Saving') + '...' : getCoreTranslation('save')}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </>
+  );
+};
+
+export default PaymentModeFormModal;

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

@@ -0,0 +1,139 @@
+import React from 'react';
+import {
+  Button,
+  DataTable,
+  InlineLoading,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { showModal, getCoreTranslation, ErrorState } from '@openmrs/esm-framework';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import { usePaymentModes, type PaymentMode } from '../billable-service.resource';
+import styles from './payment-modes-config.scss';
+
+const PaymentModesConfig: React.FC = () => {
+  const { t } = useTranslation();
+  const { paymentModes, error, isLoadingPaymentModes } = usePaymentModes();
+
+  const handleAddPaymentMode = () => {
+    const dispose = showModal('payment-mode-form-modal', {
+      closeModal: () => dispose(),
+    });
+  };
+
+  const handleDeletePaymentMode = (paymentMode: PaymentMode) => {
+    const dispose = showModal('delete-payment-mode-modal', {
+      paymentModeUuid: paymentMode.uuid,
+      paymentModeName: paymentMode.name,
+      closeModal: () => dispose(),
+    });
+  };
+
+  const handleEditPaymentMode = (paymentMode: PaymentMode) => {
+    const dispose = showModal('payment-mode-form-modal', {
+      editPaymentMode: paymentMode,
+      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') },
+  ];
+
+  if (isLoadingPaymentModes) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={getCoreTranslation('loading')}
+        description={t('loading', 'Loading data') + '...'}
+      />
+    );
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={t('paymentMode', 'Payment mode')} error={error} />;
+  }
+  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('edit')}
+                                onClick={() => {
+                                  const selected = paymentModes.find((p) => p.uuid === row.id);
+                                  if (selected) {
+                                    handleEditPaymentMode(selected);
+                                  }
+                                }}
+                              />
+                              <OverflowMenuItem
+                                className={styles.menuItem}
+                                itemText={getCoreTranslation('delete')}
+                                onClick={() => {
+                                  const selected = paymentModes.find((p) => p.uuid === row.id);
+                                  if (selected) {
+                                    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/billable-services-admin-card-link.component.test.tsx

@@ -8,10 +8,10 @@ describe('BillableServicesCardLink', () => {
     const manageBillableServicesText = screen.getByText('Manage billable services');
     expect(manageBillableServicesText).toHaveClass('heading');
 
-    const billiableText = screen.getByText('Billable Services');
+    const billiableText = screen.getByText('Billable services', { exact: true });
     expect(billiableText).toHaveClass('content');
 
-    const billiableServiceLink = screen.getByRole('link', { name: /Billable Services/i });
+    const billiableServiceLink = screen.getByRole('link', { name: /Manage billable services/i });
     expect(billiableServiceLink).toHaveAttribute('href', '/spa/billable-services');
   });
 });

package/src/billable-services-admin-card-link.component.tsx

@@ -12,7 +12,7 @@ const BillableServicesCardLink: React.FC = () => {
       <ClickableTile href={`${window.spaBase}/billable-services`} target="_blank" rel="noopener noreferrer">
         <div>
           <div className="heading">{header}</div>
-          <div className="content">{t('billableServices', 'Billable Services')}</div>
+          <div className="content">{t('billableServices', 'Billable services')}</div>
         </div>
         <div className="iconWrapper">
           <ArrowRight size={16} />

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,
-        },
-      ],
+        }),
+      ]),
     });
   });
 });