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

package/src/bill-item-actions/edit-bill-item.component.tsx

@@ -0,0 +1,221 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Button,
+  Column,
+  Form,
+  InlineLoading,
+  InlineNotification,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  NumberInput,
+  TextInput,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { Controller, type FieldErrors, useForm } from 'react-hook-form';
+import { mutate } from 'swr';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { apiBasePath } from '../constants';
+import { getBillableServiceUuid } from '../invoice/payments/utils';
+import { type LineItem, type MappedBill } from '../types';
+import { updateBillItems } from '../billing.resource';
+import { useBillableServices } from '../billable-services/billable-service.resource';
+import styles from './bill-item-actions.scss';
+
+interface BillLineItemProps {
+  bill: MappedBill;
+  item: LineItem;
+  closeModal: () => void;
+}
+
+const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) => {
+  const { t } = useTranslation();
+  const { billableServices } = useBillableServices();
+  const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const [total, setTotal] = useState(0);
+
+  const schema = useMemo(
+    () =>
+      z.object({
+        quantity: z.string({ required_error: t('quantityRequired', 'Quantity is required') }),
+        price: z.string({ required_error: t('priceIsRequired', 'Price is required') }),
+      }),
+    [t],
+  );
+
+  type BillLineItemForm = z.infer<typeof schema>;
+
+  const onError = (errors: FieldErrors<LineItem>) => {
+    if (errors) {
+      setShowErrorNotification(true);
+    }
+  };
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting, errors, isDirty },
+    watch,
+  } = useForm<BillLineItemForm>({
+    defaultValues: {
+      quantity: item.quantity.toString(),
+      price: item.price.toString(),
+    },
+    resolver: zodResolver(schema),
+  });
+
+  const quantity = watch('quantity');
+  const price = watch('price');
+
+  useEffect(() => {
+    const newTotal = parseInt(quantity) * parseInt(price);
+    setTotal(newTotal);
+  }, [quantity, price]);
+
+  const onSubmit = (data: BillLineItemForm) => {
+    const url = `${apiBasePath}bill`;
+
+    const newItem = {
+      ...item,
+      quantity: parseInt(data.quantity),
+      price: parseInt(data?.price),
+      billableService: getBillableServiceUuid(billableServices, item.billableService),
+      item: item?.item,
+    };
+
+    const previousLineitems = bill?.lineItems
+      .filter((currItem) => currItem.uuid !== item?.uuid)
+      .map((currItem) => ({
+        ...currItem,
+        billableService: getBillableServiceUuid(billableServices, item.billableService),
+      }));
+    const updatedLineItems = previousLineitems.concat(newItem);
+
+    const payload = {
+      cashPoint: bill.cashPointUuid,
+      cashier: bill.cashier.uuid,
+      lineItems: updatedLineItems,
+      patient: bill.patientUuid,
+      status: bill.status,
+      uuid: bill.uuid,
+    };
+    updateBillItems(payload).then(
+      (res) => {
+        mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+        showSnackbar({
+          title: t('billItems', 'Save Bill'),
+          subtitle: 'Bill processing has been successful',
+          kind: 'success',
+          timeoutInMs: 3000,
+        });
+        closeModal();
+      },
+      (error) => {
+        showSnackbar({ title: 'Bill processing error', kind: 'error', subtitle: error?.message });
+      },
+    );
+  };
+
+  if (Object.keys(bill)?.length === 0) {
+    return <ModalHeader closeModal={closeModal} title={t('billLineItemEmpty', 'This bill has no line items')} />;
+  }
+
+  if (Object.keys(bill)?.length > 0) {
+    return (
+      <div>
+        <Form onSubmit={handleSubmit(onSubmit, onError)}>
+          <ModalHeader closeModal={closeModal} title={t('editBillLineItem', 'Edit bill line item?')} />
+          <ModalBody>
+            <div className={styles.modalBody}>
+              <h5>
+                {bill?.patientName} &nbsp; · &nbsp;{bill?.cashPointName} &nbsp; · &nbsp;{bill?.receiptNumber}&nbsp;
+              </h5>
+            </div>
+            <section className={styles.section}>
+              <p className={styles.label}>
+                {t('item', 'Item')} : {item?.billableService ? item?.billableService : item?.item}
+              </p>
+              <p className={styles.label}>
+                {t('currentPrice', 'Current price')} : {item?.price}
+              </p>
+              <p className={styles.label}>
+                {t('status', 'status')} : {item?.paymentStatus}
+              </p>
+              <Controller
+                name="quantity"
+                control={control}
+                render={({ field: { onChange, onBlur, value } }) => (
+                  <NumberInput
+                    label={t('quantity', 'Quantity')}
+                    id="quantityInput"
+                    min={0}
+                    max={100}
+                    value={value}
+                    onChange={onChange}
+                    className={styles.controlField}
+                    invalid={errors.quantity?.message}
+                    invalidText={errors.quantity?.message}
+                  />
+                )}
+              />
+
+              <Controller
+                name="price"
+                control={control}
+                render={({ field: { value } }) => (
+                  <TextInput
+                    id="priceInput"
+                    labelText={t('price', 'Unit Price')}
+                    value={value}
+                    readOnly={true}
+                    className={styles.controlField}
+                    helperText="This is the unit Price for this item."
+                  />
+                )}
+              />
+
+              <p className={styles.label}>
+                {t('total', 'Total')} : {total}{' '}
+              </p>
+
+              {showErrorNotification && (
+                <Column className={styles.errorContainer}>
+                  <InlineNotification
+                    lowContrast
+                    title={t('error', 'Error')}
+                    subtitle={t('pleaseRequiredFields', 'Please fill all required fields') + '.'}
+                    onClose={() => setShowErrorNotification(false)}
+                  />
+                </Column>
+              )}
+            </section>
+          </ModalBody>
+          <ModalFooter>
+            <Button kind="secondary" onClick={closeModal}>
+              {t('cancel', 'Cancel')}
+            </Button>
+            <Button disabled={isSubmitting} type="submit">
+              <>
+                {isSubmitting ? (
+                  <div className={styles.inline}>
+                    <InlineLoading
+                      status="active"
+                      iconDescription={t('submitting', 'Submitting')}
+                      description={t('submitting', 'Submitting...')}
+                    />
+                  </div>
+                ) : (
+                  t('save', 'Save')
+                )}
+              </>
+            </Button>
+          </ModalFooter>
+        </Form>
+      </div>
+    );
+  }
+};
+
+export default ChangeStatus;

package/src/bill-item-actions/edit-bill-item.test.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { type MappedBill } from '../types';
+import { updateBillItems } from '../billing.resource';
+import ChangeStatus from './edit-bill-item.component';
+
+// Mock external dependencies
+jest.mock('../billing.resource', () => ({
+  updateBillItems: jest.fn(() => Promise.resolve({})),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  showSnackbar: jest.fn(),
+}));
+
+jest.mock('../billable-services/billable-service.resource', () => ({
+  useBillableServices: jest.fn(() => ({
+    billableServices: [],
+  })),
+}));
+
+const mockBill: MappedBill = {
+  id: 1,
+  uuid: 'bill-uuid',
+  patientUuid: 'patient-uuid',
+  cashier: {
+    uuid: 'cashier-uuid',
+    display: 'John Doe',
+    links: [],
+  },
+  cashPointUuid: 'cashpoint-uuid',
+  cashPointLocation: 'Main Location',
+  status: 'PENDING',
+  lineItems: [
+    {
+      uuid: 'item-uuid',
+      quantity: 2,
+      price: 100,
+      display: 'Test Item',
+      voided: false,
+      voidReason: null,
+      priceName: 'Service Price',
+      billableService: 'service-uuid',
+      priceUuid: 'price-uuid',
+      lineItemOrder: 1,
+      resourceVersion: '1.0',
+      item: 'Test Item',
+      paymentStatus: 'PENDING',
+    },
+  ],
+  dateCreated: new Date().toISOString(),
+  billingService: 'billing-service-uuid',
+  payments: [],
+  patientName: 'John Doe',
+  cashPointName: 'Main Cashpoint',
+  receiptNumber: '123456',
+  identifier: 'receipt-identifier',
+};
+
+const mockItem = {
+  uuid: 'item-uuid',
+  quantity: 2,
+  price: 100,
+  billableService: 'service-uuid',
+  paymentStatus: 'UNPAID',
+  item: 'Test Service',
+  display: 'Test Service',
+  voided: false,
+  voidReason: null,
+  priceName: 'Service Price',
+  priceUuid: 'price-uuid',
+  lineItemOrder: 1,
+  resourceVersion: '1.0',
+};
+
+describe('ChangeStatus component', () => {
+  const closeModalMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders the form with correct fields and default values', () => {
+    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+
+    expect(screen.getByText('Edit bill line item?')).toBeInTheDocument();
+    expect(screen.getByText('John Doe · Main Cashpoint · 123456')).toBeInTheDocument();
+    expect(screen.getByRole('spinbutton', { name: /Quantity/ })).toHaveValue(2);
+    expect(screen.getByLabelText(/Unit Price/)).toHaveValue('100');
+    expect(screen.getByText(/Total/)).toHaveTextContent('200');
+  });
+
+  test('updates total when quantity is changed', () => {
+    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    fireEvent.change(quantityInput, { target: { value: 3 } });
+
+    expect(screen.getByText(/Total/)).toHaveTextContent('300');
+  });
+
+  test('submits the form and shows a success notification', async () => {
+    (updateBillItems as jest.Mock).mockResolvedValueOnce({});
+
+    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+
+    fireEvent.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(updateBillItems).toHaveBeenCalled();
+      expect(showSnackbar).toHaveBeenCalledWith({
+        title: 'Save Bill',
+        subtitle: 'Bill processing has been successful',
+        kind: 'success',
+        timeoutInMs: 3000,
+      });
+      expect(closeModalMock).toHaveBeenCalled();
+    });
+  });
+
+  test('shows error notification when submission fails', async () => {
+    (updateBillItems as jest.Mock).mockRejectedValueOnce({ message: 'Error occurred' });
+
+    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+
+    fireEvent.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(showSnackbar).toHaveBeenCalledWith({
+        title: 'Bill processing error',
+        kind: 'error',
+        subtitle: 'Error occurred',
+      });
+    });
+  });
+});

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

@@ -9,11 +9,11 @@ import {
   StructuredListWrapper,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
 import { convertToCurrency } from '../../helpers';
 import { type MappedBill, type LineItem } from '../../types';
 import BillWaiverForm from './bill-waiver-form.component';
 import styles from './bill-waiver.scss';
-import { useConfig } from '@openmrs/esm-framework';
 
 const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (patientUuid) => void }> = ({
   bills,

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

@@ -3,14 +3,14 @@ import { Form, Stack, FormGroup, Layer, Button, NumberInput } from '@carbon/reac
 import { TaskAdd } from '@carbon/react/icons';
 import { mutate } from 'swr';
 import { useTranslation } from 'react-i18next';
-import { restBaseUrl, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
 import { createBillWaiverPayload } from './utils';
 import { convertToCurrency } from '../../helpers';
 import { processBillPayment } from '../../billing.resource';
 import { useBillableItems } from '../../billing-form/billing-form.resource';
 import type { LineItem, MappedBill } from '../../types';
-import styles from './bill-waiver-form.scss';
 import { apiBasePath } from '../../constants';
+import styles from './bill-waiver-form.scss';
 
 type BillWaiverFormProps = {
   bill: MappedBill;

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

@@ -18,11 +18,11 @@
 
 .billWaiverDescription {
   display: grid;
-  grid-template-columns: 5rem 1fr;
-  column-gap: 1rem;
+  grid-template-columns: layout.$spacing-11 1fr;
+  column-gap: layout.$spacing-05;
   align-items: center;
-  margin-top: 0.125rem;
-  margin-bottom: 0.5rem;
+  margin-top: layout.$spacing-01;
+  margin-bottom: layout.$spacing-03;
 }
 
 .label {

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

@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
 import { ExtensionSlot, UserHasAccess } from '@openmrs/esm-framework';
-import PatientBills from './patient-bills.component';
 import { useBills } from '../../billing.resource';
+import PatientBills from './patient-bills.component';
 import styles from './bill-waiver.scss';
 
-type BillWaiverProps = {};
-
-const BillWaiver: React.FC<BillWaiverProps> = () => {
+const BillWaiver: React.FC = () => {
   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}>

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

@@ -15,12 +15,12 @@ import {
   Tile,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
 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;

package/src/billable-services/billable-service.resource.ts

@@ -1,19 +1,19 @@
 import useSWR from 'swr';
-import { type OpenmrsResource, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type OpenmrsResource, openmrsFetch, restBaseUrl, useOpenmrsFetchAll, useConfig } from '@openmrs/esm-framework';
 import { type ServiceConcept } from '../types';
 import { apiBasePath } from '../constants';
+import { type BillableService } from '../types/index';
 
 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);
+  const url = `${apiBasePath}billableService?v=custom:(uuid,name,shortName,serviceStatus,concept:(uuid,display,name:(name)),serviceType:(display),servicePrices:(uuid,name,price,paymentMode:(uuid,name)))`;
+  const { data, isLoading, isValidating, error, mutate } = useOpenmrsFetchAll<BillableService[]>(url);
 
   return {
-    billableServices: data?.data.results ?? [],
+    billableServices: data ?? [],
     isLoading,
     isValidating,
     error,
@@ -22,7 +22,9 @@ export const useBillableServices = () => {
 };
 
 export function useServiceTypes() {
-  const url = `${restBaseUrl}/concept/21b8cf43-9f9f-4d02-9f4a-d710ece54261?v=custom:(setMembers:(uuid,display))`;
+  const config = useConfig();
+  const serviceConceptUuid = config.serviceTypes.billableService;
+  const url = `${restBaseUrl}/concept/${serviceConceptUuid}?v=custom:(setMembers:(uuid,display))`;
 
   const { data, error, isLoading } = useSWR<{ data }>(url, openmrsFetch);
 
@@ -70,3 +72,14 @@ export function useConceptsSearch(conceptToLookup: string) {
     isSearching: isLoading,
   };
 }
+
+export const updateBillableService = (uuid: string, payload: any) => {
+  const url = `${apiBasePath}/billableService/${uuid}`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};

package/src/billable-services/billable-services-home.component.tsx

@@ -1,13 +1,15 @@
 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 { SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem } from '@carbon/react';
+import { Wallet, Money, Settings } 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 CashPointConfiguration from './cash-point/cash-point-configuration.component';
+import PaymentModesConfig from './payyment-modes/payment-modes-config.component';
 import styles from './billable-services.scss';
 
 const BillableServiceHome: React.FC = () => {
@@ -18,6 +20,10 @@ const BillableServiceHome: React.FC = () => {
     navigate({ to: `${basePath}/${path}` });
   };
 
+  const handleCloseAddService = () => {
+    navigate({ to: `${basePath}` });
+  };
+
   return (
     <BrowserRouter basename={`${window.spaBase}/billable-services`}>
       <main className={styles.mainSection}>
@@ -31,6 +37,14 @@ const BillableServiceHome: React.FC = () => {
                 <SideNavLink onClick={() => handleNavigation('waive-bill')} renderIcon={Money}>
                   {t('billWaiver', 'Bill waiver')}
                 </SideNavLink>
+                <SideNavMenu title={t('billingSettings', 'Billing Settings')} renderIcon={Settings}>
+                  <SideNavMenuItem onClick={() => handleNavigation('cash-point-config')}>
+                    {t('cashPointConfig', 'Cash Point Config')}
+                  </SideNavMenuItem>
+                  <SideNavMenuItem onClick={() => handleNavigation('payment-modes-config')}>
+                    {t('paymentModesConfig', 'Payment Modes Config')}
+                  </SideNavMenuItem>
+                </SideNavMenu>
               </UserHasAccess>
             </SideNavItems>
           </SideNav>
@@ -39,8 +53,10 @@ const BillableServiceHome: React.FC = () => {
           <BillingHeader title={t('billServicesManagement', 'Bill services management')} />
           <Routes>
             <Route path="/" element={<BillableServicesDashboard />} />
-            <Route path="/add-service" element={<AddBillableService />} />
+            <Route path="/add-service" element={<AddBillableService onClose={handleCloseAddService} />} />
             <Route path="/waive-bill" element={<BillWaiver />} />
+            <Route path="/cash-point-config" element={<CashPointConfiguration />} />
+            <Route path="/payment-modes-config" element={<PaymentModesConfig />} />
           </Routes>
         </section>
       </main>

package/src/billable-services/billable-services-menu-item/item.component.tsx

@@ -0,0 +1,17 @@
+import { ClickableTile } from '@carbon/react';
+import React from 'react';
+import styles from './item.scss';
+import { Receipt } from '@carbon/react/icons';
+
+const Item = () => {
+  // items
+  const openmrsSpaBase = window['getOpenmrsSpaBase']();
+
+  return (
+    <ClickableTile className={styles.customTile} id="menu-item" href={`${openmrsSpaBase}billable-services`}>
+      <div className="customTileTitle">{<Receipt size={24} />}</div>
+      <div>Billable Services</div>
+    </ClickableTile>
+  );
+};
+export default Item;

package/src/billable-services/billable-services-menu-item/item.scss

@@ -0,0 +1,14 @@
+.customTile {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    padding: 20px;
+    width: 50px;
+    height: 100px;
+    text-align: center;
+    margin: 2px;
+}
+
+.customTileTitle {
+    font-size: 14px;
+    color: #333;
+}