@kenyaemr/esm-billing-app 5.3.8-pre.1596 → 5.3.8-pre.1608

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"}},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","slot":"patient-chart-dashboard-slot","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"require-billing-modal","component":"requirePaymentModal"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","component":"labOrder","slot":"top-of-lab-order-form-slot"},{"name":"procedure-order-billable-item","component":"procedureOrder","slot":"top-of-procedure-order-form-slot"},{"name":"imaging-order-billable-item","component":"imagingOrder","slot":"top-of-imaging-order-form-slot"},{"name":"price-info-order","component":"priceInfoOrder"},{"name":"drug-order-billable-item","component":"drugOrder","slot":"medication-info-slot"},{"name":"billing-test-order-action","component":"testOrderAction","slot":"tests-ordered-actions-slot","order":0},{"component":"billingOverviewLink","name":"billing-overview-link","slot":"billing-dashboard-link-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-link-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-link-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-link-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-link-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-link-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-link-slot"},{"component":"claimsManagementSideNavGroup","name":"claims-management-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"claims-management","title":"Claims management Overview","slot":"case-management-slot"},"featureFlag":"healthInformationExchange"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slot":"claims-management-dashboard-link-slot"},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slot":"claims-management-dashboard-link-slot"},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"}],"workspaces":[{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"addCommodityForm","title":"Create Charge Item Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-in-modal","component":"clockIn"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"retry-claim-request-modal","component":"retryClaimRequestModal"},{"name":"paid-bill-receipt-print-preview-modal","component":"paidBillReceiptPrintPreviewModal"}],"version":"5.3.8-pre.1596"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"}},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","slot":"patient-chart-dashboard-slot","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"require-billing-modal","component":"requirePaymentModal"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","component":"labOrder","slot":"top-of-lab-order-form-slot"},{"name":"procedure-order-billable-item","component":"procedureOrder","slot":"top-of-procedure-order-form-slot"},{"name":"imaging-order-billable-item","component":"imagingOrder","slot":"top-of-imaging-order-form-slot"},{"name":"price-info-order","component":"priceInfoOrder"},{"name":"drug-order-billable-item","component":"drugOrder","slot":"medication-info-slot"},{"name":"billing-test-order-action","component":"testOrderAction","slot":"tests-ordered-actions-slot","order":0},{"component":"billingOverviewLink","name":"billing-overview-link","slot":"billing-dashboard-link-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-link-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-link-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-link-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-link-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-link-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-link-slot"},{"component":"claimsManagementSideNavGroup","name":"claims-management-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"claims-management","title":"Claims management Overview","slot":"case-management-slot"},"featureFlag":"healthInformationExchange"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slot":"claims-management-dashboard-link-slot"},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slot":"claims-management-dashboard-link-slot"},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"}],"workspaces":[{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"addCommodityForm","title":"Create Charge Item Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-in-modal","component":"clockIn"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"retry-claim-request-modal","component":"retryClaimRequestModal"},{"name":"paid-bill-receipt-print-preview-modal","component":"paidBillReceiptPrintPreviewModal"}],"version":"5.3.8-pre.1608"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-billing-app",
-  "version": "5.3.8-pre.1596",
+  "version": "5.3.8-pre.1608",
   "description": "Billing app for KenyaEMR",
   "browser": "dist/kenyaemr-esm-billing-app.js",
   "main": "src/index.ts",

package/src/billable-services/bill-manager/bill-actions/cancel-line-item.component.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { launchWorkspace } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { OverflowMenuItem } from '@carbon/react';
-import { LineItem, MappedBill } from '../../../types';
+import { LineItem, MappedBill, PaymentStatus } from '../../../types';
+import Payments from '../../../invoice/payments/payments.component';
 
 type CancelLineItemProps = {
   lineItem: LineItem;
@@ -11,6 +12,10 @@ type CancelLineItemProps = {
 
 const CancelLineItem: React.FC<CancelLineItemProps> = ({ lineItem, bill }) => {
   const { t } = useTranslation();
+
+  if (lineItem.paymentStatus == PaymentStatus.PAID) {
+    return null;
+  }
   const handleCancelLineItemWorkspace = () => {
     launchWorkspace('cancel-bill-workspace', {
       workspaceTitle: t('cancelBillForm', 'Cancel Bill Form'),

package/src/billable-services/bill-manager/bill-actions/delete-bill-action-button.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from '@carbon/react';
 import { TrashCan } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { MappedBill } from '../../../types';
+import { MappedBill, PaymentStatus } from '../../../types';
 import { showModal } from '@openmrs/esm-framework';
 
 type DeleteBillActionButtonProps = {
@@ -11,6 +11,10 @@ type DeleteBillActionButtonProps = {
 
 const DeleteBillActionButton: React.FC<DeleteBillActionButtonProps> = ({ bill }) => {
   const { t } = useTranslation();
+
+  if (bill.status == PaymentStatus.PAID) {
+    return null;
+  }
   const handleOpenDeleteBillModal = (bill: MappedBill) => {
     const dispose = showModal('delete-bill-modal', {
       bill,

package/src/billable-services/bill-manager/bill-actions/edit-line-item.component.tsx

@@ -1,6 +1,6 @@
 import { launchWorkspace } from '@openmrs/esm-framework';
 import React from 'react';
-import { LineItem, MappedBill } from '../../../types';
+import { LineItem, MappedBill, PaymentStatus } from '../../../types';
 import { useTranslation } from 'react-i18next';
 import { OverflowMenuItem } from '@carbon/react';
 
@@ -11,6 +11,11 @@ type EditLineItemProps = {
 
 const EditLineItem: React.FC<EditLineItemProps> = ({ lineItem, bill }) => {
   const { t } = useTranslation();
+
+  if (lineItem.paymentStatus == PaymentStatus.PAID) {
+    return null;
+  }
+
   const handleOpenEditLineItemWorkspace = (lineItem: LineItem) => {
     launchWorkspace('edit-bill-form', {
       workspaceTitle: t('editBillForm', 'Edit Bill Form'),

package/src/billable-services/bill-manager/bill-actions/refund-line-item.component.tsx

@@ -1,6 +1,6 @@
 import { OverflowMenuItem } from '@carbon/react';
 import React from 'react';
-import { LineItem, MappedBill } from '../../../types';
+import { LineItem, MappedBill, PaymentStatus } from '../../../types';
 import { showModal } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 
@@ -24,6 +24,10 @@ const RefundLineItem: React.FC<RefundLineItemProps> = ({ lineItem, bill, isRefun
     return null;
   }
 
+  if (lineItem.paymentStatus !== PaymentStatus.PAID) {
+    return null;
+  }
+
   return <OverflowMenuItem itemText={t('refundItem', 'Refund item')} onClick={() => handleOpenRefundLineItemModal()} />;
 };
 

package/src/billable-services/bill-manager/bill-actions/waive-bill-action-button.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { Scalpel } from '@carbon/react/icons';
-import { MappedBill } from '../../../types';
+import { MappedBill, PaymentStatus } from '../../../types';
 import { launchWorkspace } from '@openmrs/esm-framework';
 
 type WaiveBillActionButtonProps = {
@@ -12,6 +12,9 @@ type WaiveBillActionButtonProps = {
 const WaiveBillActionButton: React.FC<WaiveBillActionButtonProps> = ({ bill }) => {
   const { t } = useTranslation();
 
+  if (bill.status == PaymentStatus.PAID) {
+    return null;
+  }
   const handleOpenWaiveBillWorkspace = (bill: MappedBill) => {
     launchWorkspace('waive-bill-form', {
       workspaceTitle: 'Waive Bill Form',

package/src/billable-services/bill-manager/bill-line-items.component.tsx

@@ -10,7 +10,7 @@ import {
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { convertToCurrency, extractString } from '../../helpers';
-import { LineItem, MappedBill } from '../../types';
+import { LineItem, MappedBill, PaymentStatus } from '../../types';
 import styles from './bill-manager.scss';
 import { ExtensionSlot } from '@openmrs/esm-framework';
 
@@ -26,6 +26,7 @@ const BillLineItems: React.FC<{ bill: MappedBill }> = ({ bill }) => {
             <StructuredListCell head>{t('quantity', 'Quantity')}</StructuredListCell>
             <StructuredListCell head>{t('unitPrice', 'Unit Price')}</StructuredListCell>
             <StructuredListCell head>{t('total', 'Total')}</StructuredListCell>
+            <StructuredListCell head>{t('status', 'Status')}</StructuredListCell>
             <StructuredListCell head>{t('actions', 'Actions')}</StructuredListCell>
           </StructuredListRow>
         </StructuredListHead>
@@ -52,18 +53,22 @@ const LineItemRow = ({ lineItem, bill }: { lineItem: LineItem; bill: MappedBill
     lineItem.billableService.split(':').at(0),
   );
 
+  const extensionHeight = lineItem.paymentStatus === PaymentStatus.PAID ? '3em' : '5em';
+
   return (
     <StructuredListRow className={isRefundedLineItem && styles.refundedItem}>
       <StructuredListCell>
-        {lineItem.item === '' ? extractString(lineItem.billableService) : extractString(lineItem.item)}
+        {lineItem.item === '' ? lineItem.billableService.split(':')[1] : extractString(lineItem.item)}
       </StructuredListCell>
       <StructuredListCell>{lineItem.quantity}</StructuredListCell>
       <StructuredListCell>{convertToCurrency(lineItem.price)}</StructuredListCell>
       <StructuredListCell>{convertToCurrency(lineItem.price * lineItem.quantity)}</StructuredListCell>
+      <StructuredListCell>{lineItem.paymentStatus}</StructuredListCell>
+
       <StructuredListCell>
         <OverflowMenu aria-label="overflow-menu">
           <ExtensionSlot
-            style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', height: '7.5rem' }}
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', height: extensionHeight }}
             className="cds--overflow-menu-options__option"
             name="bill-actions-overflow-menu-slot"
             state={{ lineItem, bill, isRefundedBillableService }}

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

@@ -21,9 +21,7 @@ const BillManager: React.FC<BillManagerProps> = () => {
   const [patientUuid, setPatientUuid] = React.useState<string>(undefined);
   const { t } = useTranslation();
   const { patientBills: bills, isLoading } = usePatientBills(patientUuid);
-  const filteredBills =
-    bills.filter((bill) => !Boolean(bill.totalAmount === bill.tenderedAmount) && patientUuid === bill.patientUuid) ??
-    [];
+  const filteredBills = bills.filter((bill) => patientUuid === bill.patientUuid) ?? [];
 
   return (
     <>

package/src/billable-services/bill-manager/modals/refund-bill.modal.tsx

@@ -32,11 +32,18 @@ export const RefundBillModal: React.FC<RefundBillModalProps> = ({ onClose, bill,
       ...(billableServiceUuid && { billableService: billableServiceUuid }),
     };
 
+    const billPayments = bill.payments.map((payment) => ({
+      instanceType: payment.instanceType.uuid,
+      attributes: [],
+      amount: payment.amount,
+      amountTendered: payment.amountTendered,
+    }));
+
     const billWithRefund = {
       cashPoint: bill.cashPointUuid,
       cashier: bill.cashier.uuid,
       lineItems: [lineItemToBeRefunded],
-      payments: bill.payments,
+      payments: billPayments,
       patient: bill.patientUuid,
       status: bill.status,
     };
@@ -72,22 +79,26 @@ export const RefundBillModal: React.FC<RefundBillModalProps> = ({ onClose, bill,
         {t('refundBill', 'Refund Bill')}
       </ModalHeader>
       <ModalBody className={styles.modalHeaderHeading}>
-        {t('refundBillDescription', 'Are you sure you want to refund this bill? Proceed cautiously.')}
+        {lineItem.paymentStatus === PaymentStatus.PAID
+          ? t('refundBillDescription', 'Are you sure you want to refund this bill? Proceed cautiously.')
+          : t('refundBillDescription', 'Refund is only allowed for paid bills')}
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={onClose}>
           {t('cancel', 'Cancel')}
         </Button>
-        <Button kind="danger" onClick={refundBillItems} disabled={isLoading}>
-          {isLoading ? (
-            <div className={styles.loading_wrapper}>
-              <Loading className={styles.button_spinner} withOverlay={false} small />
-              {t('processingPayment', 'Processing Payment')}
-            </div>
-          ) : (
-            t('refund', 'Refund')
-          )}
-        </Button>
+        {lineItem.paymentStatus === PaymentStatus.PAID && (
+          <Button kind="danger" onClick={refundBillItems} disabled={isLoading}>
+            {isLoading ? (
+              <div className={styles.loading_wrapper}>
+                <Loading className={styles.button_spinner} withOverlay={false} small />
+                {t('processingPayment', 'Processing Payment')}
+              </div>
+            ) : (
+              t('refund', 'Refund')
+            )}
+          </Button>
+        )}
       </ModalFooter>
     </>
   );

package/src/billable-services/payment-history/payment-history-table.component.tsx

@@ -59,6 +59,7 @@ export const PaymentHistoryTable = ({
     return {
       ...row,
       totalAmount: convertToCurrency(row.payments.reduce((acc, payment) => acc + payment.amountTendered, 0)),
+      referenceCodes: row.payments.map(({ attributes }) => attributes.map(({ value }) => value).join(' ')).join(', '),
     };
   });
 
@@ -71,18 +72,18 @@ export const PaymentHistoryTable = ({
     });
     const data = dataForExport.map((row: (typeof transformedRows)[0]) => {
       return {
+        'Receipt Number': row.receiptNumber,
         'Patient ID': row.identifier,
         'Patient Name': row.patientName,
-        'Receipt Number': row.receiptNumber,
-        'Total Amount': row.lineItems.reduce((acc, item) => acc + item.price, 0),
-        'Payment Mode': row.payments.map((payment: (typeof row.payments)[0]) => payment.instanceType.name).join(', '),
-        'Payment Date': dayjs(row.payments[0].dateCreated).format('DD-MM-YYYY'),
-        'Payment Amount': row.payments.reduce((acc, payment) => acc + payment.amountTendered, 0),
+        'Mode of Payment': row.payments
+          .map((payment: (typeof row.payments)[0]) => payment.instanceType.name)
+          .join(', '),
+        'Total Amount Due': row.lineItems.reduce((acc, item) => acc + item.price, 0),
+        'Date of Payment': dayjs(row.payments[0].dateCreated).format('DD-MM-YYYY'),
+        'Total Amount Paid': row.payments.reduce((acc, payment) => acc + payment.amountTendered, 0),
         'Reason/Reference': row.payments
-          .map((payment: (typeof row.payments)[0]) =>
-            payment.attributes.map((attribute: (typeof payment.attributes)[0]) => attribute.attributeType.name),
-          )
-          .join(' '),
+          .map(({ attributes }) => attributes.map(({ value }) => value).join(' '))
+          .join(', '),
       };
     });
 

package/src/config-schema.ts

@@ -28,6 +28,10 @@ export interface BillingConfig {
     emergencyPriorityConceptUuid: string;
   };
   paymentMethodsUuidsThatShouldNotShowPrompt: Array<string>;
+  promptDuration: {
+    enable: boolean;
+    duration: number;
+  };
 }
 
 export const configSchema: ConfigSchema = {
@@ -182,4 +186,13 @@ export const configSchema: ConfigSchema = {
     },
     _default: ['beac329b-f1dc-4a33-9e7c-d95821a137a6'],
   },
+  promptDuration: {
+    _type: Type.Object,
+    _description:
+      'The duration in hours for the prompt to be shown, if the duration is less than this, the prompt will be shown',
+    _default: {
+      enable: true,
+      duration: 24,
+    },
+  },
 };

package/src/helpers/functions.ts

@@ -65,24 +65,19 @@ export const getGender = (gender: string, t) => {
 
 /**
  * Extracts and returns the substring after the first colon (:) in the input string.
- * The input string is expected to be in the format "uuid:string".
+ * If there's no colon or the input is invalid, returns the original string.
+ * The input string is typically in the format "uuid:string".
  *
  * @param {string} input - The input string from which the substring is to be extracted.
- * @returns {string} The substring found after the first colon in the input string.
+ * @returns {string} The substring found after the first colon, or the original string if no colon is present.
  */
 export function extractString(input: string): string {
-  const parts = input
-    .split(' ')
-    .map((s) => s.split(':')[1])
-    .filter((s) => Boolean(s));
-
-  const firstTwoBillableServices = parts.slice(0, 2);
-
-  if (parts.length <= 2) {
-    return firstTwoBillableServices.join(', ');
+  if (!input || typeof input !== 'string') {
+    return '';
   }
 
-  return `${firstTwoBillableServices.join(', ')} & ${parts.length - 2} other services`;
+  const parts = input.split(':');
+  return parts.length > 1 ? parts[1] : input;
 }
 
 // cleans the provider display name

package/src/past-patient-bills/patient-bills.component.tsx

@@ -63,7 +63,7 @@ export const PatientBills: React.FC<PatientBillsProps> = ({ bills, onCancel, pat
         style={{ textDecoration: 'none', maxWidth: '50%' }}
         to={billingUrl}
         templateParams={{ patientUuid: bill.patientUuid, uuid: bill.uuid }}>
-        {bill.lineItems.map((item) => extractString(item.billableService)).join(', ')}
+        {bill.lineItems.map((item) => item.billableService.split(':')[1]).join(', ')}
       </ConfigurableLink>
     ),
     totalAmount: convertToCurrency(bill.totalAmount),

package/src/prompt-payment/prompt-payment-modal.component.tsx

@@ -77,7 +77,7 @@ const PromptPaymentModal: React.FC<PromptPaymentModalProps> = () => {
             <StructuredListBody>
               {lineItems.map((lineItem) => {
                 return (
-                  <StructuredListRow>
+                  <StructuredListRow key={lineItem.uuid}>
                     <StructuredListCell>{extractString(lineItem.billableService || lineItem.item)}</StructuredListCell>
                     <StructuredListCell>{lineItem.quantity}</StructuredListCell>
                     <StructuredListCell>{convertToCurrency(lineItem.price)}</StructuredListCell>

package/src/prompt-payment/prompt-payment.modal.test.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PromptPaymentModal from './prompt-payment-modal.component';
+import { useBillingPrompt } from './prompt-payment.resource';
+import { navigate, useConfig } from '@openmrs/esm-framework';
+import { PaymentStatus } from '../types';
+import userEvent from '@testing-library/user-event';
+
+const mockNavigate = navigate as jest.MockedFunction<typeof navigate>;
+
+const mockMappedBill = [
+  {
+    uuid: '123e4567-e89b-12d3-a456-426614174000',
+    id: 1,
+    patientUuid: 'patient-uuid-123',
+    patientName: 'John Doe',
+    cashPointUuid: 'cashpoint-uuid-123',
+    cashPointName: 'Main Reception',
+    cashPointLocation: 'Hospital Wing A',
+    cashier: {
+      uuid: 'cashier-uuid-123',
+      display: 'Dr. Jane Smith',
+      links: [
+        {
+          rel: 'self',
+          uri: 'http://example.com/provider/cashier-uuid-123',
+          resourceAlias: 'provider',
+        },
+      ],
+    },
+    receiptNumber: 'REC-2023-001',
+    status: PaymentStatus.PENDING,
+    identifier: 'BILL-001',
+    dateCreated: '2023-08-15T10:30:00.000Z',
+    dateCreatedUnformatted: '2023-08-15',
+    lineItems: [
+      {
+        uuid: 'lineitem-uuid-123',
+        display: 'Consultation Fee',
+        voided: false,
+        voidReason: null,
+        item: 'Consultation',
+        billableService: 'some-uuid:General Consultation',
+        quantity: 1,
+        price: 50.0,
+        priceName: 'Standard Price',
+        priceUuid: 'price-uuid-123',
+        lineItemOrder: 1,
+        resourceVersion: '1.0',
+        paymentStatus: 'PENDING',
+        itemOrServiceConceptUuid: 'concept-uuid-123',
+        serviceTypeUuid: 'service-type-uuid-123',
+        order: {
+          uuid: 'order-uuid-123',
+        },
+      },
+    ],
+    billingService: 'Outpatient Services',
+    payments: [
+      {
+        uuid: 'payment-uuid-123',
+        instanceType: {
+          uuid: 'instance-type-uuid-123',
+          name: 'Cash Payment',
+          description: 'Standard cash payment',
+          retired: false,
+        },
+        attributes: [],
+        amount: 50.0,
+        amountTendered: 50.0,
+        dateCreated: 1692093000000, // Unix timestamp for 2023-08-15T10:30:00.000Z
+        voided: false,
+        resourceVersion: '1.0',
+      },
+    ],
+    totalAmount: 50.0,
+    tenderedAmount: 50.0,
+    display: 'Bill #BILL-001',
+    referenceCodes: 'REF-001',
+    adjustmentReason: undefined,
+  },
+];
+
+const mockUseBillingPrompt = useBillingPrompt as jest.MockedFunction<typeof useBillingPrompt>;
+const mockUseConfig = useConfig as jest.MockedFunction<typeof useConfig>;
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  getPatientUuidFromStore: jest.fn(() => 'patient-uuid'),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useConfig: jest.fn(),
+  navigate: jest.fn(),
+}));
+
+jest.mock('./prompt-payment.resource', () => ({
+  useBillingPrompt: jest.fn(),
+}));
+
+describe('<PromptPaymentModal />', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('should show the prompt payment modal, when `shouldShowBillingPrompt` is true and `enforceBillPayment` is true', async () => {
+    const user = userEvent.setup();
+    mockUseBillingPrompt.mockReturnValue({
+      shouldShowBillingPrompt: true,
+      isLoading: false,
+      bills: mockMappedBill,
+      currentVisit: null,
+      error: null,
+    });
+    mockUseConfig.mockReturnValue({
+      enforceBillPayment: true,
+    });
+    render(<PromptPaymentModal />);
+    expect(screen.getByText('Patient Billing Alert')).toBeInTheDocument();
+    expect(
+      screen.getByText('The current patient has pending bill. Advice patient to settle bill.'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Navigate back')).toBeInTheDocument();
+    // check if the structured list is rendered
+    const structuredListHeaders = ['Item', 'Quantity', 'Unit price', 'Total'];
+    structuredListHeaders.forEach((header) => {
+      expect(screen.getByText(header)).toBeInTheDocument();
+    });
+
+    // clicking cancel button should close the modal
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+    expect(mockNavigate).toHaveBeenCalledWith({ to: `\${openmrsSpaBase}/home` });
+    // clicking proceed to care button should close the modal
+    const navigateBackButton = screen.getByText('Navigate back');
+    await user.click(navigateBackButton);
+    expect(mockNavigate).toHaveBeenCalledWith({ to: `\${openmrsSpaBase}/home` });
+  });
+
+  test('should show the prompt payment modal, when `shouldShowBillingPrompt` is true and `enforceBillPayment` is false and not navigate back', async () => {
+    const user = userEvent.setup();
+    mockUseBillingPrompt.mockReturnValue({
+      shouldShowBillingPrompt: true,
+      isLoading: false,
+      bills: mockMappedBill,
+      currentVisit: null,
+      error: null,
+    });
+    mockUseConfig.mockReturnValue({
+      enforceBillPayment: false,
+    });
+
+    render(<PromptPaymentModal />);
+    expect(screen.getByText('Patient Billing Alert')).toBeInTheDocument();
+    expect(
+      screen.getByText('The current patient has pending bill. Advice patient to settle bill.'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Proceed to care')).toBeInTheDocument();
+
+    // clicking proceed to care button should close the modal
+    const proceedToCareButton = screen.getByText('Proceed to care');
+    await user.click(proceedToCareButton);
+    expect(mockNavigate).not.toHaveBeenCalled();
+
+    // clicking cancel button should close the modal
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+    expect(mockNavigate).toHaveBeenCalledWith({ to: `\${openmrsSpaBase}/home` });
+  });
+
+  test('should show the loading state when `isLoading` is true', () => {
+    mockUseBillingPrompt.mockReturnValue({
+      shouldShowBillingPrompt: true,
+      isLoading: true,
+      bills: mockMappedBill,
+      currentVisit: null,
+      error: null,
+    });
+    mockUseConfig.mockReturnValue({
+      enforceBillPayment: true,
+    });
+    render(<PromptPaymentModal />);
+    expect(screen.getByText('Billing status')).toBeInTheDocument();
+    expect(screen.getByText('Verifying patient bills')).toBeInTheDocument();
+  });
+
+  test('should not render the modal when `shouldShowBillingPrompt` is false', () => {
+    mockUseBillingPrompt.mockReturnValue({
+      shouldShowBillingPrompt: false,
+      isLoading: false,
+      bills: mockMappedBill,
+      currentVisit: null,
+      error: null,
+    });
+    mockUseConfig.mockReturnValue({
+      enforceBillPayment: true,
+    });
+    render(<PromptPaymentModal />);
+    expect(screen.queryByText('Patient Billing Alert')).not.toBeInTheDocument();
+  });
+});