openmrs · CynthiaKamau · Mar 6, 2024 · Mar 5, 2024
diff --git a/src/bill-history/bill-history.component.tsx b/src/bill-history/bill-history.component.tsx
@@ -42,7 +42,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
   const layout = useLayoutType();
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
   const { paginated, goTo, results, currentPage } = usePagination(bills);
-  const { pageSize } = useConfig();
+  const { pageSize, defaultCurrency } = useConfig();
 
   const headerData = [
     {
@@ -64,12 +64,12 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
   ];
 
   const setBilledItems = (bill) =>
-    bill?.lineItems.reduce((acc, item) => acc + (acc ? ' & ' : '') + (item.billableService || item.item || ''), '');
+    bill?.lineItems.reduce((acc, item) => acc + (acc ? ' & ' : '') + (item?.billableService || item?.item || ''), '');
 
   const rowData = results?.map((bill) => ({
     id: bill.uuid,
     uuid: bill.uuid,
-    billTotal: convertToCurrency(bill?.totalAmount),
+    billTotal: convertToCurrency(bill?.totalAmount, defaultCurrency),
     visitTime: bill.dateCreated,
     identifier: bill.identifier,
     billedItems: setBilledItems(bill),

diff --git a/src/billable-services/bill-waiver/bill-selection.component.tsx b/src/billable-services/bill-waiver/bill-selection.component.tsx
@@ -13,16 +13,18 @@ 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,
   setPatientUuid,
 }) => {
   const { t } = useTranslation();
   const [selectedBills, setSelectedBills] = React.useState<Array<LineItem>>([]);
+  const { defaultCurrency } = useConfig();
 
   const checkBoxLabel = (lineItem) => {
-    return `${lineItem.item === '' ? lineItem.billableService : lineItem.item} ${convertToCurrency(lineItem.price)}`;
+    return `${lineItem.item === '' ? lineItem.billableService : lineItem.item} ${convertToCurrency(lineItem.price, defaultCurrency)}`;
   };
 
   const handleOnCheckBoxChange = (event, { checked, id }) => {
@@ -50,8 +52,10 @@ const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (pat
             <StructuredListRow>
               <StructuredListCell>{lineItem.item === '' ? lineItem.billableService : lineItem.item}</StructuredListCell>
               <StructuredListCell>{lineItem.quantity}</StructuredListCell>
-              <StructuredListCell>{convertToCurrency(lineItem.price)}</StructuredListCell>
-              <StructuredListCell>{convertToCurrency(lineItem.price * lineItem.quantity)}</StructuredListCell>
+              <StructuredListCell>{convertToCurrency(lineItem.price, defaultCurrency)}</StructuredListCell>
+              <StructuredListCell>
+                {convertToCurrency(lineItem.price * lineItem.quantity, defaultCurrency)}
+              </StructuredListCell>
               <StructuredListCell>
                 <Checkbox
                   hideLabel

diff --git a/src/billable-services/bill-waiver/bill-waiver-form.component.tsx b/src/billable-services/bill-waiver/bill-waiver-form.component.tsx
@@ -3,7 +3,7 @@ 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 { showSnackbar } from '@openmrs/esm-framework';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
 import { createBillWaiverPayload } from './utils';
 import { convertToCurrency } from '../../helpers';
 import { processBillPayment } from '../../billing.resource';
@@ -22,6 +22,7 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
   const [waiverAmount, setWaiverAmount] = React.useState(0);
   const { lineItems: billableLineItems, isLoading: isLoadingLineItems, error: lineError } = useBillableItems();
   const totalAmount = lineItems.reduce((acc, curr) => acc + curr.price * curr.quantity, 0);
+  const { defaultCurrency } = useConfig();
 
   if (lineItems?.length === 0) {
     return null;
@@ -77,7 +78,7 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
           </section>
           <section className={styles.billWaiverDescription}>
             <label className={styles.label}>{t('billTotal', 'Bill total')}</label>
-            <p className={styles.value}>{convertToCurrency(totalAmount)}</p>
+            <p className={styles.value}>{convertToCurrency(totalAmount, defaultCurrency)}</p>
           </section>
 
           <Layer className={styles.formControlLayer}>

diff --git a/src/billable-services/bill-waiver/patient-bills.component.tsx b/src/billable-services/bill-waiver/patient-bills.component.tsx
@@ -20,6 +20,7 @@ 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;
@@ -29,6 +30,7 @@ type PatientBillsProps = {
 
 const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPatientUuid }) => {
   const { t } = useTranslation();
+  const { defaultCurrency } = useConfig();
 
   if (!patientUuid) {
     return;
@@ -44,7 +46,7 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
     id: `${bill.uuid}`,
     date: bill.dateCreated,
     billableService: bill.billingService,
-    totalAmount: convertToCurrency(bill?.totalAmount),
+    totalAmount: convertToCurrency(bill?.totalAmount, defaultCurrency),
   }));
 
   if (bills.length === 0 && patientUuid !== '') {

diff --git a/src/billing-form/billing-form.component.tsx b/src/billing-form/billing-form.component.tsx
@@ -27,6 +27,7 @@ type BillingFormProps = {
 
 const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }) => {
   const { t } = useTranslation();
+  const { defaultCurrency } = useConfig();
 
   const [grandTotal, setGrandTotal] = useState(0);
   const [searchOptions, setSearchOptions] = useState([]);
@@ -260,7 +261,7 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
             <TableCell></TableCell>
             <TableCell></TableCell>
             <TableCell style={{ fontWeight: 'bold' }}>Grand Total:</TableCell>
-            <TableCell id="GrandTotalSum">{convertToCurrency(grandTotal)}</TableCell>
+            <TableCell id="GrandTotalSum">{convertToCurrency(grandTotal, defaultCurrency)}</TableCell>
           </TableRow>
         </TableBody>
       </Table>

diff --git a/src/helpers/functions.ts b/src/helpers/functions.ts
@@ -33,13 +33,11 @@ export function calculateTotalAmount(lineItems: Array<LineItem>) {
     : 0;
 }
 
-export const convertToCurrency = (amountToConvert: number) => {
+export const convertToCurrency = (amountToConvert: number, currencyType?: string) => {
   const locale = window.i18next?.language?.substring(0, 2) ?? '';
-  const { defaultCurrency } = useConfig<ConfigObject>();
-  const currencyCode = defaultCurrency || 'KES';
   const formatter = new Intl.NumberFormat(locale, {
     style: 'currency',
-    currency: currencyCode,
+    currency: currencyType,
     minimumFractionDigits: 2,
   });
 

diff --git a/src/invoice/invoice-table.component.tsx b/src/invoice/invoice-table.component.tsx
@@ -20,9 +20,10 @@ import {
   type DataTableHeader,
   type DataTableRow,
 } from '@carbon/react';
-import { isDesktop, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { isDesktop, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
 import { type LineItem, type MappedBill } from '../types';
 import styles from './invoice-table.scss';
+import { convertToCurrency } from '../helpers';
 
 type InvoiceTableProps = {
   bill: MappedBill;
@@ -39,6 +40,7 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
   const [selectedLineItems, setSelectedLineItems] = useState([]);
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
+  const { defaultCurrency } = useConfig();
 
   const filteredLineItems = useMemo(() => {
     if (!debouncedSearchTerm) {
@@ -75,8 +77,8 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
           billCode: bill?.receiptNumber,
           status: bill?.status,
           quantity: item.quantity,
-          price: item.price,
-          total: item.price * item.quantity,
+          price: convertToCurrency(item.price, defaultCurrency),
+          total: convertToCurrency(item.price * item.quantity, defaultCurrency),
         };
       }) ?? [],
     [bill?.receiptNumber, bill?.status, filteredLineItems],

diff --git a/src/invoice/invoice.component.tsx b/src/invoice/invoice.component.tsx
@@ -4,7 +4,7 @@ import { Printer } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { useReactToPrint } from 'react-to-print';
 import { useTranslation } from 'react-i18next';
-import { ExtensionSlot, usePatient } from '@openmrs/esm-framework';
+import { ExtensionSlot, useConfig, usePatient } from '@openmrs/esm-framework';
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
 import { convertToCurrency } from '../helpers';
 import { type LineItem } from '../types';
@@ -32,6 +32,7 @@ const Invoice: React.FC = () => {
   const handleSelectItem = (lineItems: Array<LineItem>) => {
     setSelectedLineItems(lineItems);
   };
+  const { defaultCurrency } = useConfig();
 
   const handleAfterPrint = useCallback(() => {
     onBeforeGetContentResolve.current = null;
@@ -66,8 +67,8 @@ const Invoice: React.FC = () => {
   }, [isPrinting]);
 
   const invoiceDetails = {
-    'Total Amount': convertToCurrency(bill?.totalAmount),
-    'Amount Tendered': convertToCurrency(bill?.tenderedAmount),
+    'Total Amount': convertToCurrency(bill?.totalAmount, defaultCurrency),
+    'Amount Tendered': convertToCurrency(bill?.tenderedAmount, defaultCurrency),
     'Invoice Number': bill?.receiptNumber,
     'Date And Time': bill?.dateCreated,
     'Invoice Status': bill?.status,

diff --git a/src/invoice/payments/payment-history/payment-history.component.tsx b/src/invoice/payments/payment-history/payment-history.component.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { DataTable, Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from '@carbon/react';
 import { type MappedBill } from '../../../types';
-import { formatDate } from '@openmrs/esm-framework';
+import { formatDate, useConfig } from '@openmrs/esm-framework';
 import { convertToCurrency } from '../../../helpers';
 
 type PaymentHistoryProps = {
   bill: MappedBill;
 };
 
 const PaymentHistory: React.FC<PaymentHistoryProps> = ({ bill }) => {
+  const { defaultCurrency } = useConfig();
   const headers = [
     {
       key: 'dateCreated',
@@ -30,8 +31,8 @@ const PaymentHistory: React.FC<PaymentHistoryProps> = ({ bill }) => {
   const rows = bill?.payments?.map((payment) => ({
     id: `${payment.uuid}`,
     dateCreated: formatDate(new Date(payment.dateCreated)),
-    amountTendered: convertToCurrency(payment.amountTendered),
-    amount: convertToCurrency(payment.amount),
+    amountTendered: convertToCurrency(payment.amountTendered, defaultCurrency),
+    amount: convertToCurrency(payment.amount, defaultCurrency),
     paymentMethod: payment.instanceType.name,
   }));
 

diff --git a/src/invoice/payments/payments.component.tsx b/src/invoice/payments/payments.component.tsx
@@ -3,7 +3,7 @@ import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { navigate, showSnackbar, useVisit } from '@openmrs/esm-framework';
+import { navigate, showSnackbar, useConfig, useVisit } from '@openmrs/esm-framework';
 import { Button } from '@carbon/react';
 import { CardHeader } from '@openmrs/esm-patient-common-lib';
 import { type LineItem, type MappedBill } from '../../types';
@@ -29,6 +29,7 @@ export type PaymentFormValue = {
 
 const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
   const { t } = useTranslation();
+  const { defaultCurrency } = useConfig();
   const paymentSchema = z.object({
     method: z.string().refine((value) => !!value, 'Payment method is required'),
     amount: z
@@ -97,16 +98,19 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
         </div>
         <div className={styles.divider} />
         <div className={styles.paymentTotals}>
-          <InvoiceBreakDown label={t('totalAmount', 'Total Amount')} value={convertToCurrency(computedTotal)} />
+          <InvoiceBreakDown
+            label={t('totalAmount', 'Total Amount')}
+            value={convertToCurrency(computedTotal, defaultCurrency)}
+          />
           <InvoiceBreakDown
             label={t('totalTendered', 'Total Tendered')}
-            value={convertToCurrency(bill?.tenderedAmount + totalAmountTendered ?? 0)}
+            value={convertToCurrency(bill?.tenderedAmount + totalAmountTendered ?? 0, defaultCurrency)}
           />
           <InvoiceBreakDown label={t('discount', 'Discount')} value={'--'} />
           <InvoiceBreakDown
             hasBalance={amountDue < 0 ?? false}
             label={amountDueDisplay(amountDue)}
-            value={convertToCurrency(amountDue ?? 0)}
+            value={convertToCurrency(amountDue ?? 0, defaultCurrency)}
           />
           <div className={styles.processPayments}>
             <Button onClick={handleNavigateToBillingDashboard} kind="secondary">

diff --git a/src/metrics-cards/card.component.tsx b/src/metrics-cards/card.component.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import styles from './card.scss';
+import { useConfig } from '@openmrs/esm-framework';
+import { convertToCurrency } from '../helpers';
 
 export default function Card({ count, title }) {
+  const { defaultCurrency } = useConfig();
   return (
     <div className={styles.container}>
       <h1 className={styles.title}>{title}</h1>
-      <span className={styles.count}>{count}</span>
+      <span className={styles.count}>{convertToCurrency(count, defaultCurrency)}</span>
     </div>
   );
 }
diff --git a/src/metrics-cards/metrics-cards.test.tsx b/src/metrics-cards/metrics-cards.test.tsx
@@ -3,8 +3,10 @@ import { render, screen } from '@testing-library/react';
 import { billsSummary } from '../../__mocks__/bills.mock';
 import { useBills } from '../billing.resource';
 import MetricsCards from './metrics-cards.component';
+import { useConfig } from '@openmrs/esm-framework';
 
 const mockUseBills = useBills as jest.Mock;
+const mockUseConfig = useConfig as jest.Mock;
 
 jest.mock('../billing.resource', () => ({
   useBills: jest.fn(),
@@ -29,6 +31,7 @@ describe('MetricsCards', () => {
 
   test('renders metrics cards', () => {
     mockUseBills.mockReturnValue({ isLoading: false, bills: billsSummary, error: null });
+    mockUseConfig.mockImplementation(() => ({ defaultCurrency: 'USD' }));
     renderMetricsCards();
     expect(screen.getByRole('heading', { name: /cumulative bills/i })).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: /pending bills/i })).toBeInTheDocument();

diff --git a/src/metrics-cards/metrics.resource.ts b/src/metrics-cards/metrics.resource.ts
@@ -19,9 +19,9 @@ import { type MappedBill } from '../types';
 export const useBillMetrics = (bills: Array<MappedBill>) => {
   const { paidTotal, pendingTotal, cumulativeTotal } = calculateBillTotals(bills);
   return {
-    cumulativeBills: convertToCurrency(cumulativeTotal),
-    pendingBills: convertToCurrency(pendingTotal),
-    paidBills: convertToCurrency(paidTotal),
+    cumulativeBills: cumulativeTotal,
+    pendingBills: pendingTotal,
+    paidBills: paidTotal,
   };
 };
 

diff --git a/src/modal/require-payment-modal.component.tsx b/src/modal/require-payment-modal.component.tsx
@@ -15,6 +15,7 @@ import {
 import { useBills } from '../billing.resource';
 import { convertToCurrency } from '../helpers';
 import styles from './require-payment.scss';
+import { useConfig } from '@openmrs/esm-framework';
 
 type RequirePaymentModalProps = {
   closeModal: () => void;
@@ -23,6 +24,7 @@ type RequirePaymentModalProps = {
 
 const RequirePaymentModal: React.FC<RequirePaymentModalProps> = ({ closeModal, patientUuid }) => {
   const { t } = useTranslation();
+  const { defaultCurrency } = useConfig();
   const { bills, isLoading, error } = useBills(patientUuid);
   const lineItems = bills.filter((bill) => bill?.status !== 'PAID').flatMap((bill) => bill?.lineItems);
 
@@ -58,8 +60,10 @@ const RequirePaymentModal: React.FC<RequirePaymentModalProps> = ({ closeModal, p
                 <StructuredListRow>
                   <StructuredListCell>{lineItem.billableService || lineItem.item}</StructuredListCell>
                   <StructuredListCell>{lineItem.quantity}</StructuredListCell>
-                  <StructuredListCell>{convertToCurrency(lineItem.price)}</StructuredListCell>
-                  <StructuredListCell>{convertToCurrency(lineItem.quantity * lineItem.price)}</StructuredListCell>
+                  <StructuredListCell>{convertToCurrency(lineItem.price, defaultCurrency)}</StructuredListCell>
+                  <StructuredListCell>
+                    {convertToCurrency(lineItem.quantity * lineItem.price, defaultCurrency)}
+                  </StructuredListCell>
                 </StructuredListRow>
               );
             })}