@openmrs/esm-billing-app 1.0.2-pre.90 → 1.0.2-pre.905

package/src/config-schema.ts

@@ -1,8 +1,25 @@
-import { Type } from '@openmrs/esm-framework';
-
-export interface BillingConfig {}
+import { Type, validators } from '@openmrs/esm-framework';
 
 export const configSchema = {
+  logo: {
+    src: {
+      _type: Type.String,
+      _default: '',
+      _description: 'The path or URL to the logo image. If set to an empty string, the alt text will be used.',
+      _validators: [validators.isUrl],
+    },
+    alt: {
+      _type: Type.String,
+      _default: '',
+      _description:
+        'The alternative text for the logo image, displayed when the image cannot be loaded or on hover. If not provided and src is empty, the default OpenMRS SVG sprite will be used.',
+    },
+  },
+  country: {
+    _type: Type.String,
+    _description: 'The text that gets printed on the top right of the invoice, typically the name of the country',
+    _default: 'Kenya',
+  },
   patientCatergory: {
     _type: Type.Object,
     _description: 'Patient Category Custom UUIDs',
@@ -15,7 +32,6 @@ export const configSchema = {
       formPayloadPending: '919b51c9-8e2e-468f-8354-181bf3e55786',
     },
   },
-
   catergoryConcepts: {
     _type: Type.Object,
     _description: 'Patient Category Concept UUIDs',
@@ -25,7 +41,6 @@ export const configSchema = {
       insuranceDetails: 'beac329b-f1dc-4a33-9e7c-d95821a137a6',
     },
   },
-
   nonPayingPatientCategories: {
     _type: Type.Object,
     _description: 'Concept UUIDs for non-paying patient categories',
@@ -34,7 +49,6 @@ export const configSchema = {
       student: '159465AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
   },
-
   postBilledItems: {
     _type: Type.Object,
     _description: 'Post Bill Items such as cashPoints, cashier, priceUUid when submitting a bill',
@@ -44,7 +58,6 @@ export const configSchema = {
       priceUuid: '7b9171ac-d3c1-49b4-beff-c9902aee5245',
     },
   },
-
   serviceTypes: {
     _type: Type.Object,
     _description: 'Post Bill Items such as cashPoints, cashier, priceUUid when submitting a bill',
@@ -52,34 +65,49 @@ export const configSchema = {
       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).',
     _default: 'KES',
   },
-
   pageSize: {
     _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 {
-  patientCatergory: Object;
+export interface BillingConfig {
+  logo: {
+    src: string;
+    alt: string;
+  };
+  country: string;
+  patientCatergory: {
+    paymentDetails: string;
+    paymentMethods: string;
+    policyNumber: string;
+    insuranceScheme: string;
+    patientCategory: string;
+    formPayloadPending: string;
+  };
+  catergoryConcepts: {
+    payingDetails: string;
+    nonPayingDetails: string;
+    insuranceDetails: string;
+  };
+  nonPayingPatientCategories: {
+    childUnder5: string;
+    student: string;
+  };
+  postBilledItems: {
+    cashPoint: string;
+    cashier: string;
+    priceUuid: string;
+  };
+  serviceTypes: {
+    billableService: string;
+  };
   defaultCurrency: string;
-  catergoryConcepts: Object;
-  pageSize;
-  object;
-  showEditBillButton: boolean;
-  postBilledItems: Object;
-  serviceTypes: Object;
-  nonPayingPatientCategories: Object;
+  pageSize: number;
 }

package/src/dashboard.meta.ts

@@ -1,8 +1,10 @@
-export const dashboardMeta = {
+import { type DashboardLinkConfig } from '@openmrs/esm-patient-common-lib';
+
+export const dashboardMeta: DashboardLinkConfig & { slot: string; columns: number; hideDashboardTitle: boolean } = {
   slot: 'patient-chart-billing-dashboard-slot',
   columns: 1,
   title: 'Billing history',
   hideDashboardTitle: true,
-  icon: '',
+  icon: 'omrs-icon-money',
   path: 'Billing history',
 };

package/src/helpers/functions.ts

@@ -1,3 +1,4 @@
+import { getCoreTranslation } from '@openmrs/esm-framework';
 import { type Payment, type LineItem } from '../types';
 
 // amount already paid
@@ -51,13 +52,13 @@ export const convertToCurrency = (amountToConvert: number, currencyType?: string
 export const getGender = (gender: string, t) => {
   switch (gender) {
     case 'male':
-      return t('male', 'Male');
+      return getCoreTranslation('male');
     case 'female':
-      return t('female', 'Female');
+      return getCoreTranslation('female');
     case 'other':
-      return t('other', 'Other');
+      return getCoreTranslation('other');
     case 'unknown':
-      return t('unknown', 'Unknown');
+      return getCoreTranslation('unknown');
     default:
       return gender;
   }

package/src/index.ts

@@ -3,14 +3,20 @@ import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { createLeftPanelLink } from './left-panel-link.component';
 import { dashboardMeta } from './dashboard.meta';
 import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { Wallet, Money, Settings } from '@carbon/react/icons';
+import { createBillableServicesLeftPanelLink } from './billable-services/billable-services-left-panel-link.component';
+import { createBillableServicesLeftPanelMenu } from './billable-services/billable-services-left-panel-menu.component';
+import AddCashPointModal from './billable-services/cash-point/add-cash-point.modal';
+import AddPaymentModeModal from './billable-services/payment-modes/add-payment-mode.modal';
 import appMenu from './billable-services/billable-services-menu-item/item.component';
 import BillableServiceHome from './billable-services/billable-services-home.component';
 import BillableServicesCardLink from './billable-services-admin-card-link.component';
 import BillHistory from './bill-history/bill-history.component';
 import BillingCheckInForm from './billing-form/billing-checkin-form.component';
-import RequirePaymentModal from './modal/require-payment-modal.component';
+import DeletePaymentModeModal from './billable-services/payment-modes/delete-payment-mode.modal';
+import EditBillLineItemModal from './bill-item-actions/edit-bill-item.modal';
+import RequirePaymentModal from './modal/require-payment.modal';
 import RootComponent from './root.component';
-import ServiceMetrics from './billable-services/dashboard/service-metrics.component';
 import VisitAttributeTags from './invoice/payments/visit-tags/visit-attribute.component';
 
 const moduleName = '@openmrs/esm-billing-app';
@@ -35,11 +41,13 @@ export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
+// t('billingHistory', 'Billing History')
 export const billingSummaryDashboardLink = getSyncLifecycle(
   createDashboardLink({ ...dashboardMeta, moduleName }),
   options,
 );
 
+// t('billableServices', 'Billable services')
 export const billableServicesAppMenuItem = getSyncLifecycle(appMenu, options);
 
 export const billableServicesCardLink = getSyncLifecycle(BillableServicesCardLink, options);
@@ -52,16 +60,70 @@ export const billingPatientSummary = getSyncLifecycle(BillHistory, options);
 
 export const requirePaymentModal = getSyncLifecycle(RequirePaymentModal, options);
 
-export const root = getSyncLifecycle(RootComponent, options);
+export const addPaymentModeModal = getSyncLifecycle(AddPaymentModeModal, options);
 
-export const serviceMetrics = getSyncLifecycle(ServiceMetrics, options);
+export const deletePaymentModeModal = getSyncLifecycle(DeletePaymentModeModal, options);
 
-export const visitAttributeTags = getSyncLifecycle(VisitAttributeTags, options);
+export const addCashPointModal = getSyncLifecycle(AddCashPointModal, options);
 
-export const editBillLineItemDialog = getAsyncLifecycle(() => import('./bill-item-actions/edit-bill-item.component'), {
-  featureName: 'edit bill line item',
-  moduleName,
-});
+export const editBillLineItemModal = getSyncLifecycle(EditBillLineItemModal, options);
+
+export const root = getSyncLifecycle(RootComponent, options);
+
+export const visitAttributeTags = getSyncLifecycle(VisitAttributeTags, options);
 
 // t('billingForm', 'Billing form')
 export const billingFormWorkspace = getAsyncLifecycle(() => import('./billing-form/billing-form.component'), options);
+
+// t('billableServiceForm', 'Billable service form')
+export const billableServiceFormWorkspace = getAsyncLifecycle(
+  () => import('./billable-services/billable-service-form/billable-service-form.workspace'),
+  options,
+);
+
+// t('billableServices', 'Billable services')
+export const billableServicesLeftPanelLink = getSyncLifecycle(
+  createBillableServicesLeftPanelLink({
+    name: 'billable-services',
+    title: 'Billable Services',
+    path: '',
+    icon: Wallet,
+  }),
+  options,
+);
+
+// t('billWaiver', 'Bill waiver')
+export const billWaiverLeftPanelLink = getSyncLifecycle(
+  createBillableServicesLeftPanelLink({
+    name: 'bill-waiver',
+    title: 'Bill waiver',
+    path: 'waive-bill',
+    icon: Money,
+    privilege: 'coreapps.systemAdministration',
+  }),
+  options,
+);
+
+// t('billingSettings', 'Billing settings')
+// t('cashPointConfig', 'Cash point configuration')
+// t('paymentModesConfig', 'Payment modes configuration')
+export const billingSettingsLeftPanelMenu = getSyncLifecycle(
+  createBillableServicesLeftPanelMenu({
+    title: 'Billing settings',
+    icon: Settings,
+    privilege: 'coreapps.systemAdministration',
+    items: [
+      {
+        name: 'cash-point-config',
+        title: 'Cash point configuration',
+        path: 'cash-point-config',
+      },
+      {
+        name: 'payment-modes-config',
+        title: 'Payment modes configuration',
+        path: 'payment-modes-config',
+      },
+    ],
+  }),
+  options,
+);

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import fuzzy from 'fuzzy';
 import {
@@ -13,42 +13,38 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  TableSelectRow,
   TableToolbarSearch,
   Tile,
   type DataTableRow,
 } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
-import { isDesktop, showModal, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import {
+  isDesktop,
+  showModal,
+  useConfig,
+  useDebounce,
+  useLayoutType,
+  getCoreTranslation,
+} from '@openmrs/esm-framework';
 import { type LineItem, type MappedBill } from '../types';
 import { convertToCurrency } from '../helpers';
+import type { BillingConfig } from '../config-schema';
 import styles from './invoice-table.scss';
 
 type InvoiceTableProps = {
   bill: MappedBill;
-  isSelectable?: boolean;
   isLoadingBill?: boolean;
-  onSelectItem?: (selectedLineItems: LineItem[]) => void;
 };
 
-const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true, isLoadingBill, onSelectItem }) => {
+const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isLoadingBill }) => {
   const { t } = useTranslation();
-  const { defaultCurrency, showEditBillButton } = useConfig();
+  const { defaultCurrency } = useConfig<BillingConfig>();
   const layout = useLayoutType();
   const lineItems = useMemo(() => bill?.lineItems ?? [], [bill?.lineItems]);
-  const paidLineItems = useMemo(() => lineItems?.filter((item) => item.paymentStatus === 'PAID') ?? [], [lineItems]);
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
-
-  const [selectedLineItems, setSelectedLineItems] = useState(paidLineItems ?? []);
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
 
-  useEffect(() => {
-    if (onSelectItem) {
-      onSelectItem(selectedLineItems);
-    }
-  }, [selectedLineItems, onSelectItem]);
-
   const filteredLineItems = useMemo(() => {
     if (!debouncedSearchTerm) {
       return lineItems;
@@ -65,19 +61,19 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
   }, [debouncedSearchTerm, lineItems]);
 
   const tableHeaders = [
-    { header: 'No', key: 'no', width: 7 }, // Width as a percentage
-    { header: 'Bill item', key: 'billItem', width: 25 },
-    { header: 'Bill code', key: 'billCode', width: 20 },
-    { header: 'Status', key: 'status', width: 25 },
-    { header: 'Quantity', key: 'quantity', width: 15 },
-    { header: 'Price', key: 'price', width: 24 },
-    { header: 'Total', key: 'total', width: 15 },
-    { header: t('actions', 'Actions'), key: 'actionButton' },
+    { header: t('number', 'Number'), key: 'no', width: 7 }, // Width as a percentage
+    { header: t('billItem', 'Bill item'), key: 'billItem', width: 25 },
+    { header: t('billCode', 'Bill code'), key: 'billCode', width: 20 },
+    { header: t('status', 'Status'), key: 'status', width: 25 },
+    { header: t('quantity', 'Quantity'), key: 'quantity', width: 15 },
+    { header: t('price', 'Price'), key: 'price', width: 24 },
+    { header: t('total', 'Total'), key: 'total', width: 15 },
+    { header: getCoreTranslation('actions'), key: 'actionButton' },
   ];
 
   const handleSelectBillItem = useCallback(
     (row: LineItem) => {
-      const dispose = showModal('edit-bill-line-item-dialog', {
+      const dispose = showModal('edit-bill-line-item-modal', {
         bill,
         item: row,
         closeModal: () => dispose(),
@@ -97,27 +93,23 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
           status: item.paymentStatus,
           quantity: item.quantity,
           price: convertToCurrency(item.price, defaultCurrency),
-          total: item.price * item.quantity,
+          total: convertToCurrency(item.price * item.quantity, defaultCurrency),
           actionButton: (
             <span>
-              {showEditBillButton ? (
-                <Button
-                  data-testid={`edit-button-${item.uuid}`}
-                  renderIcon={Edit}
-                  hasIconOnly
-                  kind="ghost"
-                  iconDescription={t('editThisBillItem', 'Edit this bill item')}
-                  tooltipPosition="left"
-                  onClick={() => handleSelectBillItem(item)}
-                />
-              ) : (
-                '--'
-              )}
+              <Button
+                data-testid={`edit-button-${item.uuid}`}
+                renderIcon={Edit}
+                hasIconOnly
+                kind="ghost"
+                iconDescription={t('editThisBillItem', 'Edit this bill item')}
+                tooltipPosition="left"
+                onClick={() => handleSelectBillItem(item)}
+              />
             </span>
           ),
         };
       }) ?? [],
-    [filteredLineItems, bill?.receiptNumber, defaultCurrency, showEditBillButton, t, handleSelectBillItem],
+    [filteredLineItems, bill?.receiptNumber, defaultCurrency, t, handleSelectBillItem],
   );
 
   if (isLoadingBill) {
@@ -135,23 +127,10 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
     );
   }
 
-  const handleRowSelection = (row: typeof DataTableRow, checked: boolean) => {
-    const matchingRow = filteredLineItems.find((item) => item.uuid === row.id);
-    let newSelectedLineItems;
-
-    if (checked) {
-      newSelectedLineItems = [...selectedLineItems, matchingRow];
-    } else {
-      newSelectedLineItems = selectedLineItems.filter((item) => item.uuid !== row.id);
-    }
-    setSelectedLineItems(newSelectedLineItems);
-    onSelectItem(newSelectedLineItems);
-  };
-
   return (
-    <div className={styles.invoiceContainer}>
-      <DataTable headers={tableHeaders} isSortable rows={tableRows} size={responsiveSize} useZebraStyles>
-        {({ rows, headers, getRowProps, getSelectionProps, getTableProps, getToolbarProps }) => (
+    <div className={styles.lineItemsWrapper}>
+      <DataTable headers={tableHeaders} rows={tableRows} size={responsiveSize} useZebraStyles>
+        {({ rows, headers, getRowProps, getTableProps }) => (
           <TableContainer
             description={
               <span className={styles.tableDescription}>
@@ -168,11 +147,10 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
             />
             <Table
               {...getTableProps()}
-              aria-label="Invoice line items"
+              aria-label={t('invoiceLineItems', 'Invoice line items')}
               className={`${styles.invoiceTable} billingTable`}>
               <TableHead>
                 <TableRow>
-                  {rows.length > 1 && isSelectable ? <TableHeader /> : null}
                   {headers.map((header) => (
                     <TableHeader key={header.key}>{header.header}</TableHeader>
                   ))}
@@ -186,18 +164,6 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
                       {...getRowProps({
                         row,
                       })}>
-                      {rows.length > 1 && isSelectable && (
-                        <TableSelectRow
-                          aria-label="Select row"
-                          {...getSelectionProps({ row })}
-                          disabled={tableRows[index].status === 'PAID'}
-                          onChange={(checked: boolean) => handleRowSelection(row, checked)}
-                          checked={
-                            tableRows[index].status === 'PAID' ||
-                            Boolean(selectedLineItems?.find((item) => item?.uuid === row?.id))
-                          }
-                        />
-                      )}
                       {row.cells.map((cell) => (
                         <TableCell key={cell.id}>{cell.value}</TableCell>
                       ))}

package/src/invoice/invoice-table.scss

@@ -3,6 +3,13 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
+.lineItemsWrapper {
+  border: 1px solid colors.$gray-20;
+  border-radius: 4px;
+  background-color: colors.$white;
+  margin-bottom: layout.$spacing-05;
+}
+
 .filterEmptyState {
   align-items: center;
   background-color: white;
@@ -29,11 +36,7 @@
 
 .headerContainer {
   background-color: colors.$gray-10;
-}
-
-.invoiceContainer {
-  border: 1px solid $ui-03;
-}
+}c
 
 .searchbox {
   input:focus {