@kenyaemr/esm-billing-app 5.4.2-pre.2262 → 5.4.2-pre.2269

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":"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":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"billingOverviewLink","name":"billing-overview-link","order":0,"slot":"billing-dashboard-group-nav-slot"},{"component":"billDepositDashboardLink","name":"bill-deposit-dashboard-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-group-nav-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-group-nav-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-group-nav-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-group-nav-slot"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","order":0,"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":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"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"},{"name":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"},{"name":"print-preview-modal","component":"printPreviewModal"}],"version":"5.4.2-pre.2262"}
+{"$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":"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":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"billingOverviewLink","name":"billing-overview-link","order":0,"slot":"billing-dashboard-group-nav-slot"},{"component":"billDepositDashboardLink","name":"bill-deposit-dashboard-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-group-nav-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-group-nav-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-group-nav-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-group-nav-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-group-nav-slot"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","order":0,"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":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"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"},{"name":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"},{"name":"print-preview-modal","component":"printPreviewModal"},{"name":"bill-action-modal","component":"billActionModal"}],"version":"5.4.2-pre.2269"}

package/package.json

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

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

@@ -12,8 +12,6 @@ import {
   TableExpandRow,
   TableCell,
   TableExpandedRow,
-  Tile,
-  Button,
 } from '@carbon/react';
 import { convertToCurrency } from '../../helpers';
 import { useTranslation } from 'react-i18next';
@@ -21,8 +19,7 @@ import { EmptyState } from '@openmrs/esm-patient-common-lib';
 import { MappedBill, PaymentStatus } from '../../types';
 import styles from '../../bills-table/bills-table.scss';
 import BillLineItems from './bill-line-items.component';
-import { Scalpel, ShoppingCartMinus, TrashCan } from '@carbon/react/icons';
-import { ExtensionSlot, launchWorkspace, showModal } from '@openmrs/esm-framework';
+import { ExtensionSlot } from '@openmrs/esm-framework';
 
 type PatientBillsProps = {
   bills: Array<MappedBill>;

package/src/billing.resource.ts

@@ -63,6 +63,7 @@ export const mapBillProperties = (bill: PatientInvoice): MappedBill => {
     totalPayments: bill?.totalPayments,
     totalDeposits: bill?.totalDeposits,
     totalExempted: bill?.totalExempted,
+    closed: bill?.closed,
   };
 
   return mappedBill;
@@ -142,6 +143,7 @@ export const useBill = (billUuid: string) => {
       totalDeposits: bill?.totalDeposits,
       totalExempted: bill?.totalExempted,
       balance: bill?.balance,
+      closed: bill?.closed,
     };
 
     return mappedBill;

package/src/index.ts

@@ -33,6 +33,7 @@ import RefundLineItem from './billable-services/bill-manager/bill-actions/refund
 import WaiveBillActionButton from './billable-services/bill-manager/bill-actions/waive-bill-action-button.component';
 import { DeleteBillModal } from './billable-services/bill-manager/modals/delete-bill.modal';
 import { RefundBillModal } from './billable-services/bill-manager/modals/refund-bill.modal';
+import BillActionModal from './modal/bill-action.modal';
 import DeleteBillableServiceModal from './billable-services/bill-manager/modals/delete-billable-service.modal';
 import CancelBillWorkspace from './billable-services/bill-manager/workspaces/cancel-bill/cancel-bill.workspace';
 import { EditBillForm } from './billable-services/bill-manager/workspaces/edit-bill/edit-bill-form.workspace';
@@ -188,6 +189,7 @@ export const deleteBillModal = getSyncLifecycle(DeleteBillModal, options);
 export const waiveBillForm = getSyncLifecycle(WaiveBillForm, options);
 export const editBillForm = getSyncLifecycle(EditBillForm, options);
 export const refundBillModal = getSyncLifecycle(RefundBillModal, options);
+export const billActionModal = getSyncLifecycle(BillActionModal, options);
 export const cancelBillWorkspace = getSyncLifecycle(CancelBillWorkspace, options);
 export const waiveBillActionButton = getSyncLifecycle(WaiveBillActionButton, options);
 export const deleteBillActionButton = getSyncLifecycle(DeleteBillActionButton, options);

package/src/invoice/invoice.component.tsx

@@ -1,5 +1,5 @@
 import { Button, InlineLoading } from '@carbon/react';
-import { BaggageClaim, Printer, Wallet } from '@carbon/react/icons';
+import { BaggageClaim, Close, Printer, Wallet, FolderOpen } from '@carbon/react/icons';
 import {
   defaultVisitCustomRepresentation,
   ExtensionSlot,
@@ -13,6 +13,7 @@ import {
   updateVisit,
   useFeatureFlag,
   usePatient,
+  UserHasAccess,
   useVisit,
   useVisitContextStore,
 } from '@openmrs/esm-framework';
@@ -212,10 +213,48 @@ const Invoice: React.FC = () => {
 
 export function InvoiceSummary({ bill }: { readonly bill: MappedBill }) {
   const { t } = useTranslation();
+  const launchBillCloseOrReopenModal = (action: 'close' | 'reopen') => {
+    const dispose = showModal('bill-action-modal', {
+      closeModal: () => dispose(),
+      bill: bill,
+      action,
+    });
+  };
+
+  const shouldCloseBill = bill.balance === 0 && !bill.closed;
+
   return (
     <>
       <div className={styles.invoiceSummary}>
         <span className={styles.invoiceSummaryTitle}>{t('invoiceSummary', 'Invoice Summary')}</span>
+        <div className="invoiceSummaryActions">
+          {shouldCloseBill && (
+            <UserHasAccess privilege="Close Cashier Bills">
+              <Button
+                kind="danger--ghost"
+                size="sm"
+                renderIcon={Close}
+                iconDescription="Add"
+                tooltipPosition="right"
+                onClick={() => launchBillCloseOrReopenModal('close')}>
+                {t('closeBill', 'Close Bill')}
+              </Button>
+            </UserHasAccess>
+          )}
+          {bill?.closed && (
+            <UserHasAccess privilege="Reopen Cashier Bills">
+              <Button
+                kind="ghost"
+                size="sm"
+                renderIcon={FolderOpen}
+                iconDescription="Add"
+                tooltipPosition="right"
+                onClick={() => launchBillCloseOrReopenModal('reopen')}>
+                {t('reopen', 'Reopen')}
+              </Button>
+            </UserHasAccess>
+          )}
+        </div>
       </div>
       <div className={styles.invoiceSummaryContainer}>
         <div className={styles.invoiceCard}>

package/src/invoice/invoice.resource.ts

@@ -109,3 +109,44 @@ export const useShaFacilityStatus = () => {
     mutate,
   };
 };
+
+/**
+ * Reopens or closes a bill by making an API call to the billing service.
+ *
+ * This function allows authorized users to either reopen a closed bill or close an open bill.
+ * The action requires a reason to be provided for audit trail purposes.
+ *
+ * @param {string} billUuid - The unique identifier of the bill to be modified
+ * @param {'reopen' | 'close'} action - The action to perform on the bill
+ *   - 'reopen': Reopens a previously closed bill
+ *   - 'close': Closes an open bill
+ * @param {Object} payload - The payload containing the reason for the action
+ * @param {string} payload.reason - A descriptive reason explaining why the bill is being reopened or closed
+ *
+ * @returns {Promise<FetchResponse>} A promise that resolves to the API response
+ *
+ * @example
+ * // Reopen a closed bill
+ * const result = await reOpenOrCloseBill('bill-uuid-123', 'reopen', {
+ *   reason: 'Patient returned for additional services'
+ * });
+ *
+ * @example
+ * // Close an open bill
+ * const result = await reOpenOrCloseBill('bill-uuid-456', 'close', {
+ *   reason: 'Services completed and payment received'
+ * });
+ *
+ * @throws {Error} When the API call fails or returns an error response
+ */
+export function reOpenOrCloseBill(billUuid: string, action: 'reopen' | 'close', payload: { reason: string }) {
+  return openmrsFetch(`${restBaseUrl}/kenyaemr-cashier/bill/${billUuid}/${action}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: {
+      reason: payload.reason,
+    },
+  });
+}

package/src/invoice/invoice.scss

@@ -130,12 +130,21 @@
   }
 }
 
-.invoiceSummaryTitle {
-  @include type.type-style('heading-01');
-  color: colors.$gray-70;
+.invoiceSummary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin: layout.$spacing-05 layout.$spacing-05 0 layout.$spacing-05;
   background-color: colors.$white;
-  display: block;
   border-bottom: 1px solid colors.$gray-20;
-  padding: layout.$spacing-04;
+  padding: layout.$spacing-01 layout.$spacing-04;
+
+  .invoiceSummaryActions {
+    display: flex;
+    gap: layout.$spacing-04;
+  }
+  .invoiceSummaryTitle {
+    @include type.type-style('heading-01');
+    color: colors.$gray-70;
+  }
 }

package/src/invoice/print-bill-receipt/receipt-print-button.component.tsx

@@ -42,8 +42,8 @@ const ReceiptPrintButton: React.FC<ReceiptPrintButtonProps> = ({ bill }) => {
  * @returns true if printing should be disabled, false otherwise
  */
 function shouldDisablePrinting(bill: MappedBill): boolean {
-  const hasPayments = bill.payments.length > 0;
-  const hasExemptedItems = bill.lineItems.some((item) => item.paymentStatus === PaymentStatus.EXEMPTED);
+  const hasPayments = bill?.payments?.length > 0;
+  const hasExemptedItems = bill?.lineItems?.some((item) => item.paymentStatus === PaymentStatus.EXEMPTED);
 
   // If there are exempted items, we need special handling
   if (hasExemptedItems) {

package/src/modal/bill-action.modal.scss

@@ -0,0 +1,7 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.modalExplanation {
+  @include type.type-style('body-long-01');
+  margin-bottom: layout.$spacing-05;
+}

package/src/modal/bill-action.modal.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { ModalBody, ModalFooter, ModalHeader, Button, TextArea } from '@carbon/react';
+import { type MappedBill } from '../types';
+import { useTranslation } from 'react-i18next';
+import { convertToCurrency } from '../helpers';
+import { reOpenOrCloseBill } from '../invoice/invoice.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { mutate } from 'swr';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import styles from './bill-action.modal.scss';
+
+type BillActionModalProps = {
+  closeModal: () => void;
+  bill: MappedBill;
+  action: 'close' | 'reopen';
+};
+
+const formSchema = z.object({
+  reason: z.string().min(1, { message: 'Reason is required' }),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+const BillActionModal: React.FC<BillActionModalProps> = (props) => {
+  const { closeModal, bill, action } = props;
+  const { t } = useTranslation();
+  const formMethod = useForm({
+    defaultValues: {
+      reason: '',
+    },
+    resolver: zodResolver(formSchema),
+  });
+
+  const modalExplanation =
+    action === 'close'
+      ? t('closeBillExplanation', 'Closing this bill will prevent any new items from being added to this bill')
+      : t('reopenBillExplanation', 'Reopening this bill will allow new items to be added to this bill');
+
+  const handleCloseBill = async (data: FormData) => {
+    try {
+      const response = await reOpenOrCloseBill(bill?.uuid, action, {
+        reason: data.reason,
+      });
+      if (response?.ok) {
+        showSnackbar({
+          title: t('billClosedSuccessfully', 'Bill {{action}} successfully', { action: action }),
+          subtitle: t('billClosedSuccessfullySubtitle', 'The bill has been {{action}} successfully', {
+            action: action,
+          }),
+          kind: 'success',
+          timeoutInMs: 3000,
+          isLowContrast: true,
+        });
+      } else {
+        throw new Error('Failed to close bill');
+      }
+    } catch (error) {
+      const errorResponseBody = error?.responseBody?.error || t('errorResponseBodyMessage', 'An error occurred');
+
+      showSnackbar({
+        title: t('billClosedFailed', 'Bill closing failed'),
+        subtitle: errorResponseBody,
+        kind: 'error',
+        timeoutInMs: 3000,
+        isLowContrast: true,
+      });
+    } finally {
+      const url = `/ws/rest/v1/cashier/bill/${bill.uuid}`;
+      mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+      closeModal();
+    }
+  };
+  return (
+    <form onSubmit={formMethod.handleSubmit(handleCloseBill, (error) => console.error('error', error))}>
+      <ModalHeader
+        closeModal={closeModal}
+        label={t('billActionWithDetails', '{{action}} Bill - {{receiptNumber}} ({{status}}, {{amount}})', {
+          action: action === 'close' ? t('close', 'Close') : t('reopen', 'Reopen'),
+          receiptNumber: bill?.receiptNumber,
+          status: bill?.status,
+          amount: bill?.totalAmount ? `${convertToCurrency(bill?.totalAmount)}` : 'N/A',
+        })}
+        title={t('billAction', '{{action}} Bill', {
+          action: action === 'close' ? t('close', 'Close') : t('reopen', 'Reopen'),
+        })}
+      />
+      <ModalBody>
+        <div>
+          <p className={styles.modalExplanation}>{modalExplanation}</p>
+        </div>
+        <Controller
+          control={formMethod.control}
+          name="reason"
+          render={({ field }) => (
+            <TextArea
+              id="reason"
+              labelText={t('reason', 'Reason for {{action}} bill', { action: action })}
+              placeholder={t('reason', 'Reason for {{action}} bill', { action: action })}
+              rows={4}
+              onChange={field.onChange}
+              value={field.value}
+              invalid={!!formMethod.formState.errors.reason}
+              invalidText={formMethod.formState.errors.reason?.message}
+            />
+          )}
+        />
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={!formMethod.formState.isValid} type="submit" kind="danger">
+          {action === 'close' ? t('close', 'Close') : t('reopen', 'Reopen')}
+        </Button>
+      </ModalFooter>
+    </form>
+  );
+};
+
+export default BillActionModal;

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

@@ -36,7 +36,6 @@ export const patientBillsHeaders = [
 export const PatientBills: React.FC<PatientBillsProps> = ({ bills, onCancel, patientUuid }) => {
   const { t } = useTranslation();
   const { patient, isLoading, error } = usePatient(patientUuid);
-
   if (isLoading) {
     return <InlineLoading status="active" description={t('loading', 'Loading...')} />;
   }
@@ -63,7 +62,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) => item.billableService.split(':')[1]).join(', ')}
+        {bill.lineItems.map((item) => item?.billableService?.split(':')[1]).join(', ')}
       </ConfigurableLink>
     ),
     totalAmount: convertToCurrency(bill.totalAmount),

package/src/payment-modes/payment-mode-dashboard.compont.tsx

@@ -22,7 +22,7 @@ import {
 } from '@carbon/react';
 
 import styles from './payment-mode-dashboard.scss';
-import { formatDate, launchWorkspace, showModal, useDebounce } from '@openmrs/esm-framework';
+import { formatDate, launchWorkspace, showModal, useDebounce, useLayoutType } from '@openmrs/esm-framework';
 import { PaymentMode } from '../types';
 import startCase from 'lodash/startCase';
 
@@ -30,7 +30,7 @@ type PaymentModeDashboardProps = {};
 
 const PaymentModeDashboard: React.FC<PaymentModeDashboardProps> = () => {
   const { t } = useTranslation();
-  const size = 'md';
+  const size = useLayoutType() === 'tablet' ? 'md' : 'sm';
   const { paymentModes = [], isLoading } = usePaymentModes(false);
   const [searchTerm, setSearchTerm] = useState('');
 

package/src/payment-modes/payment-mode.workspace.test.tsx

@@ -99,7 +99,7 @@ describe('PaymentModeWorkspace', () => {
     // Key in attribute type name, description, required and format
     const attributeTypeNameInput = screen.getByRole('textbox', { name: /Attribute name/i });
     const attributeTypeDescriptionInput = screen.getByRole('textbox', { name: /Attribute description/i });
-    const attributeRegExpInput = screen.getByRole('textbox', { name: /Enter regular expression/i });
+    const attributeRegExpInput = screen.getByRole('textbox', { name: /Regular expression/i });
     const attributeRetiredToggle = screen.getByRole('switch', { name: /Attribute retired/i });
     const attributeRequiredToggle = screen.getByRole('switch', { name: /Attribute required/i });
 
@@ -148,4 +148,60 @@ describe('PaymentModeWorkspace', () => {
       '',
     );
   });
+
+  test('should submit payload with attributeTypes and uuid when in edit mode', async () => {
+    const initialPaymentMode = {
+      uuid: '123',
+      name: 'Test Name',
+      description: 'Test Description',
+      retired: false,
+      attributeTypes: [
+        {
+          name: 'Test Attribute Name',
+          uuid: '456',
+          format: 'java.lang.String',
+          regExp: null,
+          attributeOrder: 0,
+          foreignKey: null,
+          description: 'Test Attribute Description',
+          retired: false,
+          required: false,
+        },
+      ],
+    };
+
+    const user = userEvent.setup();
+    render(<PaymentModeWorkspace {...testProps} initialPaymentMode={initialPaymentMode} />);
+
+    // make the attribute type required
+    const attributeRequiredToggle = screen.getByRole('switch', { name: /Attribute required/i });
+    await user.click(attributeRequiredToggle);
+
+    // click save and close
+    const saveAndCloseButton = screen.getByRole('button', { name: /Save & Close/i });
+    await user.click(saveAndCloseButton);
+
+    // should call createPaymentMode with attributeTypes and uuid
+    expect(mockCreatePaymentMode).toHaveBeenCalledWith(
+      {
+        description: 'Test Description',
+        name: 'Test Name',
+        attributeTypes: [
+          {
+            name: 'Test Attribute Name',
+            uuid: '456',
+            description: 'Test Attribute Description',
+            retired: false,
+            required: true,
+            format: 'java.lang.String',
+            regExp: null,
+            attributeOrder: 0,
+            foreignKey: null,
+          },
+        ],
+        retired: false,
+      },
+      '123',
+    );
+  });
 });

package/src/payment-modes/payment-mode.workspace.tsx

@@ -54,16 +54,22 @@ const PaymentModeWorkspace: React.FC<PaymentModeWorkspaceProps> = ({
   });
 
   const mappedAttributeTypes = (attributes) => {
-    return {
+    const uuid = initialPaymentMode?.uuid
+      ? initialPaymentMode.attributeTypes.find((a) => a.name === attributes.name)?.uuid
+      : null;
+
+    const attributeType = {
       name: attributes.name,
       description: attributes.description,
       retired: attributes.retired,
       attributeOrder: attributes?.attributeOrder ?? 0,
       format: attributes?.format ?? '',
       foreignKey: attributes?.foreignKey ?? null,
-      regExp: attributes?.regExp ?? '',
+      regExp: attributes?.regExp ?? null,
       required: attributes.required,
     };
+
+    return uuid ? { ...attributeType, uuid } : attributeType;
   };
 
   const onSubmit = async (data: PaymentModeFormSchema) => {
@@ -192,7 +198,7 @@ const PaymentModeWorkspace: React.FC<PaymentModeWorkspaceProps> = ({
           </Stack>
         </div>
         <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
-          <Button style={{ maxWidth: '50%' }} kind="secondary" onClick={() => closeWorkspace}>
+          <Button style={{ maxWidth: '50%' }} kind="secondary" onClick={() => closeWorkspace()}>
             {t('cancel', 'Cancel')}
           </Button>
           <Button

package/src/payment-modes/usePaymentModeFormSchema.tsx

@@ -8,7 +8,7 @@ const usePaymentModeFormSchema = () => {
       retired: z.boolean().default(false),
       retiredReason: z.string().optional(),
       format: z.string().optional(),
-      regExp: z.string().optional(),
+      regExp: z.union([z.string(), z.null()]).optional(),
       required: z.boolean().default(false),
     })
     .refine(

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

@@ -28,7 +28,6 @@ const PromptPaymentModal: React.FC<PromptPaymentModalProps> = () => {
   const { shouldShowBillingPrompt, isLoading, bills } = useBillingPrompt(patientUuid, 'patient-chart');
   const [showModal, setShowModal] = useState({ loadingModal: true, billingModal: true });
   const { enforceBillPayment } = useConfig<BillingConfig>();
-
   const closeButtonText = enforceBillPayment
     ? t('navigateBack', 'Navigate back')
     : t('proceedToCare', 'Proceed to care');
@@ -42,7 +41,9 @@ const PromptPaymentModal: React.FC<PromptPaymentModalProps> = () => {
   const lineItems = bills
     .filter((bill) => bill.status !== 'PAID')
     .flatMap((bill) => bill.lineItems)
-    .filter((lineItem) => lineItem.paymentStatus !== 'EXEMPTED' && !lineItem.voided);
+    .filter(
+      (lineItem) => lineItem?.paymentStatus !== 'EXEMPTED' && lineItem?.paymentStatus !== 'PAID' && !lineItem?.voided,
+    );
 
   if (!shouldShowBillingPrompt) {
     return null;
@@ -71,6 +72,7 @@ const PromptPaymentModal: React.FC<PromptPaymentModalProps> = () => {
                 <StructuredListCell head>{t('item', 'Item')}</StructuredListCell>
                 <StructuredListCell head>{t('quantity', 'Quantity')}</StructuredListCell>
                 <StructuredListCell head>{t('unitPrice', 'Unit price')}</StructuredListCell>
+                <StructuredListCell head>{t('status', 'Status')}</StructuredListCell>
                 <StructuredListCell head>{t('total', 'Total')}</StructuredListCell>
               </StructuredListRow>
             </StructuredListHead>
@@ -81,6 +83,7 @@ const PromptPaymentModal: React.FC<PromptPaymentModalProps> = () => {
                     <StructuredListCell>{extractString(lineItem.billableService || lineItem.item)}</StructuredListCell>
                     <StructuredListCell>{lineItem.quantity}</StructuredListCell>
                     <StructuredListCell>{convertToCurrency(lineItem.price)}</StructuredListCell>
+                    <StructuredListCell>{lineItem.paymentStatus}</StructuredListCell>
                     <StructuredListCell>{convertToCurrency(lineItem.quantity * lineItem.price)}</StructuredListCell>
                   </StructuredListRow>
                 );

package/src/prompt-payment/prompt-payment.resource.tsx

@@ -71,7 +71,7 @@ const shouldShowPrompt = (
 const hasOnlyOrderBills = (bills: Array<MappedBill>): boolean => {
   const flattenedBills = bills.flatMap((bill) => bill.lineItems);
   // check if all line items are orders, line item with order has order not set to null
-  return flattenedBills.every((item) => item.order);
+  return flattenedBills.every((item) => item?.order);
 };
 
 /**

package/src/routes.json

@@ -321,6 +321,10 @@
     {
       "name": "print-preview-modal",
       "component": "printPreviewModal"
+    },
+    {
+      "name": "bill-action-modal",
+      "component": "billActionModal"
     }
   ]
 }

package/src/types/index.ts

@@ -26,6 +26,7 @@ export interface MappedBill {
   totalDeposits?: number;
   totalExempted?: number;
   balance?: number;
+  closed?: boolean;
 }
 
 interface LocationLink {
@@ -145,6 +146,7 @@ export interface PatientInvoice {
   totalDeposits?: number;
   totalExempted?: number;
   balance?: number;
+  closed?: boolean;
 }
 
 export interface PatientDetails {

package/src/utils.ts

@@ -162,6 +162,10 @@ export function waitForASecond(): Promise<string> {
 }
 
 export const computeWaivedAmount = (bill: MappedBill) => {
+  if (!bill.payments) {
+    return 0;
+  }
+
   return bill.payments
     .filter((payment) => payment.instanceType.name.toLowerCase() === 'waiver')
     .reduce((curr: number, prev) => curr + Number(prev.amountTendered), 0);

package/translations/en.json

@@ -77,6 +77,7 @@
   "clearSearch": "Clear search input",
   "clockInTime": "Clocked in on {{clockInDate}}",
   "close": "Close",
+  "closeBill": "Close Bill",
   "create": "Create",
   "createClaimError": "Create Claim error",
   "created": "Created",
@@ -248,6 +249,7 @@
   "regExp": "Regular expression",
   "rejected": "Rejected",
   "remove": "Remove",
+  "reopen": "Reopen",
   "retryRequest": "Retry request",
   "reverse": "Reverse",
   "saveAndClose": "Save & Close",