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

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,12 +3,17 @@ 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 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 EditBillableServiceModal from './billable-services/create-edit/edit-billable-service.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';
@@ -35,6 +40,7 @@ export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
+// t('billingHistory', 'Billing History')
 export const billingSummaryDashboardLink = getSyncLifecycle(
   createDashboardLink({ ...dashboardMeta, moduleName }),
   options,
@@ -52,16 +58,21 @@ export const billingPatientSummary = getSyncLifecycle(BillHistory, options);
 
 export const requirePaymentModal = getSyncLifecycle(RequirePaymentModal, options);
 
+export const addPaymentModeModal = getSyncLifecycle(AddPaymentModeModal, options);
+
+export const deletePaymentModeModal = getSyncLifecycle(DeletePaymentModeModal, options);
+
+export const addCashPointModal = getSyncLifecycle(AddCashPointModal, options);
+
+export const editBillableServiceModal = getSyncLifecycle(EditBillableServiceModal, options);
+
+export const editBillLineItemModal = getSyncLifecycle(EditBillLineItemModal, options);
+
 export const root = getSyncLifecycle(RootComponent, options);
 
 export const serviceMetrics = getSyncLifecycle(ServiceMetrics, options);
 
 export const visitAttributeTags = getSyncLifecycle(VisitAttributeTags, options);
 
-export const editBillLineItemDialog = getAsyncLifecycle(() => import('./bill-item-actions/edit-bill-item.component'), {
-  featureName: 'edit bill line item',
-  moduleName,
-});
-
 // t('billingForm', 'Billing form')
 export const billingFormWorkspace = getAsyncLifecycle(() => import('./billing-form/billing-form.component'), 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 {