@kenyaemr/esm-billing-app 5.4.2-pre.2354 → 5.4.2-pre.2358

package/src/invoice/invoice.component.tsx

@@ -1,29 +1,10 @@
-import { Button, InlineLoading, Popover, PopoverContent } from '@carbon/react';
-import { BaggageClaim, Close, Printer, Wallet, FolderOpen } from '@carbon/react/icons';
-import {
-  defaultVisitCustomRepresentation,
-  ExtensionSlot,
-  formatDatetime,
-  launchWorkspace,
-  navigate,
-  parseDate,
-  restBaseUrl,
-  showModal,
-  showSnackbar,
-  showToast,
-  updateVisit,
-  useFeatureFlag,
-  usePatient,
-  UserHasAccess,
-  useVisit,
-  useVisitContextStore,
-} from '@openmrs/esm-framework';
+import { InlineLoading } from '@carbon/react';
+import { ExtensionSlot, formatDatetime, parseDate, usePatient, useVisit } from '@openmrs/esm-framework';
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { useBill } from '../billing.resource';
-import { spaBasePath } from '../constants';
 import { convertToCurrency } from '../helpers';
 import { usePaymentsReconciler } from '../hooks/use-payments-reconciler';
 import { LineItem, MappedBill } from '../types';
@@ -31,27 +12,16 @@ import InvoiceTable from './invoice-table.component';
 import styles from './invoice.scss';
 import Payments from './payments/payments.component';
 import capitalize from 'lodash-es/capitalize';
-import { mutate } from 'swr';
-import startCase from 'lodash-es/startCase';
-import { useCheckShareGnum } from './invoice.resource';
+import { InvoiceActions } from './invoice-actions.component';
 
 const Invoice: React.FC = () => {
   const { t } = useTranslation();
-  const { checkSHARegNum } = useCheckShareGnum();
   const { billUuid, patientUuid } = useParams();
   const { patient, isLoading: isLoadingPatient, error: patientError } = usePatient(patientUuid);
   const { bill, isLoading: isLoadingBill, error: billingError } = useBill(billUuid);
-  const isInsurancePayment = (payments) => {
-    return payments?.some((payment) => payment.instanceType.name === 'Insurance');
-  };
   usePaymentsReconciler(billUuid);
   const { activeVisit, isLoading: isVisitLoading, error: visitError } = useVisit(patientUuid);
-  const { patientUuid: visitStorePatientUuid, manuallySetVisitUuid } = useVisitContextStore();
   const [selectedLineItems, setSelectedLineItems] = useState([]);
-  const isProcessClaimsFormEnabled = useFeatureFlag('healthInformationExchange');
-
-  const isShaFacilityStatusValid =
-    checkSHARegNum?.registrationNumber && checkSHARegNum.registrationNumber.trim() !== '';
 
   const handleSelectItem = (lineItems: Array<LineItem>) => {
     const paidLineItems = bill?.lineItems?.filter((item) => item.paymentStatus === 'PAID') ?? [];
@@ -59,31 +29,6 @@ const Invoice: React.FC = () => {
     setSelectedLineItems(uniqueLineItems);
   };
 
-  const handlePrint = () => {
-    const dispose = showModal('print-preview-modal', {
-      onClose: () => dispose(),
-      title: `${t('invoice', 'Invoice')} ${bill?.receiptNumber} - ${startCase(bill?.patientName)}`,
-      documentUrl: `/openmrs${restBaseUrl}/cashier/print?documentType=invoice&billId=${bill?.id}`,
-    });
-  };
-
-  const handleBillPayment = () => {
-    const dispose = showModal('initiate-payment-modal', {
-      closeModal: () => dispose(),
-      bill: bill,
-      selectedLineItems,
-    });
-  };
-
-  const mutateClaimForm = async () => {
-    const activeVisitUrlSuffix = `?patient=${patientUuid}&v=${defaultVisitCustomRepresentation}&includeInactive=false`;
-    const retrospectiveVisitUuid = patientUuid && visitStorePatientUuid == patientUuid ? manuallySetVisitUuid : null;
-    const retrospectiveVisitUrlSuffix = `/${retrospectiveVisitUuid}?v=${defaultVisitCustomRepresentation}`;
-    const activeVisitUrl = `${restBaseUrl}/visit${activeVisitUrlSuffix}`;
-    const retroVisitUrl = `${restBaseUrl}/visit${retrospectiveVisitUrlSuffix}`;
-    await mutate((key) => typeof key === 'string' && (key.startsWith(activeVisitUrl) || key.startsWith(retroVisitUrl)));
-  };
-
   useEffect(() => {
     const paidLineItems = bill?.lineItems?.filter((item) => item.paymentStatus === 'PAID') ?? [];
     setSelectedLineItems(paidLineItems);
@@ -114,220 +59,32 @@ const Invoice: React.FC = () => {
     );
   }
 
-  const handleEndVisit = async () => {
-    if (activeVisit) {
-      const endVisitPayload = {
-        stopDatetime: new Date(),
-      };
-
-      const abortController = new AbortController();
-      try {
-        await updateVisit(activeVisit.uuid, endVisitPayload, abortController);
-        await mutateClaimForm();
-        showSnackbar({
-          isLowContrast: true,
-          kind: 'success',
-          subtitle: t('visitEndSuccessssfully', 'visit ended successfully'),
-          title: t('visitEnded', 'Visit ended'),
-        });
-      } catch (error) {
-        showSnackbar({
-          title: t('errorEndingVisit', 'Error ending visit'),
-          kind: 'error',
-          isLowContrast: false,
-          subtitle: error?.message,
-        });
-      }
-    }
-  };
-
-  const handleViewClaims = async () => {
-    if (!isShaFacilityStatusValid) {
-      showToast({
-        critical: true,
-        kind: 'warning',
-        title: t('shaFacilityLicenseNumberRequired', 'Facility license number Required'),
-        description: t(
-          'shaFacilityLicenseNumbernRequiredDescription',
-          'Facility license number is required to process claims. Please update facility license number details.',
-        ),
-      });
-      return;
-    }
-
-    if (activeVisit) {
-      await handleEndVisit();
-      navigate({ to: `${spaBasePath}/billing/patient/${patientUuid}/${billUuid}/claims` });
-    } else {
-      navigate({ to: `${spaBasePath}/billing/patient/${patientUuid}/${billUuid}/claims` });
-    }
-  };
-
   return (
     <div className={styles.invoiceContainer}>
       {patient && patientUuid && <ExtensionSlot name="patient-header-slot" state={{ patient, patientUuid }} />}
-      <InvoiceSummary bill={bill} />
-      <div className={styles.actionArea}>
-        <Button
-          onClick={handleBillPayment}
-          disabled={bill?.balance === 0}
-          size="sm"
-          renderIcon={Wallet}
-          iconDescription="Add"
-          tooltipPosition="left">
-          {t('mpesaPayment', 'MPESA Payment')}
-        </Button>
-
-        {isProcessClaimsFormEnabled && isInsurancePayment(bill?.payments) && (
-          <Button
-            onClick={handleViewClaims}
-            disabled={bill?.status !== 'PAID'}
-            kind="danger"
-            size="sm"
-            renderIcon={BaggageClaim}
-            iconDescription="Add"
-            tooltipPosition="bottom">
-            {activeVisit ? t('endVisitAndClaim', 'End visit and Process claims') : t('claim', 'Process claims')}
-          </Button>
-        )}
-      </div>
-
+      <InvoiceSummary bill={bill} selectedLineItems={selectedLineItems} activeVisit={activeVisit} />
       <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
       <Payments bill={bill} selectedLineItems={selectedLineItems} />
     </div>
   );
 };
 
-export function InvoiceSummary({ bill }: { readonly bill: MappedBill }) {
+export function InvoiceSummary({
+  bill,
+  selectedLineItems,
+  activeVisit,
+}: {
+  readonly bill: MappedBill;
+  readonly selectedLineItems?: LineItem[];
+  readonly activeVisit?: any;
+}) {
   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;
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handlePrint = (documentType: string, documentTitle: string) => {
-    const dispose = showModal('print-preview-modal', {
-      onClose: () => dispose(),
-      title: documentTitle,
-      documentUrl: `/openmrs${restBaseUrl}/cashier/print?documentType=${documentType}&billId=${bill?.id}`,
-    });
-  };
 
   return (
     <>
       <div className={styles.invoiceSummary}>
         <span className={styles.invoiceSummaryTitle}>{t('invoiceSummary', 'Invoice Summary')}</span>
-        <div className="invoiceSummaryActions">
-          <Popover
-            isTabTip
-            align="bottom-right"
-            onKeyDown={() => {}}
-            onRequestClose={() => setIsOpen(false)}
-            open={isOpen}>
-            <button
-              className={styles.printButton}
-              aria-expanded
-              aria-label="Settings"
-              onClick={() => setIsOpen(!isOpen)}
-              type="button">
-              <span className={styles.printButtonContent}>
-                <span className={styles.printButtonText}>{t('print', 'Print')}</span>
-                <Printer />
-              </span>
-            </button>
-            <PopoverContent>
-              <div className={styles.popoverContent}>
-                <Button
-                  kind="ghost"
-                  size="sm"
-                  onClick={() =>
-                    handlePrint(
-                      'invoice',
-                      `${t('invoice', 'Invoice')} ${bill?.receiptNumber} - ${startCase(bill?.patientName)}`,
-                    )
-                  }
-                  renderIcon={Printer}>
-                  {t('printInvoice', 'Print Invoice')}
-                </Button>
-                <Button
-                  kind="ghost"
-                  size="sm"
-                  onClick={() => {
-                    const dispose = showModal('print-preview-modal', {
-                      onClose: () => dispose(),
-                      title: `${t('receipt', 'Receipt')} ${bill?.receiptNumber} - ${startCase(bill?.patientName)}`,
-                      documentUrl: `/openmrs${restBaseUrl}/cashier/receipt?billId=${bill.id}`,
-                    });
-                  }}
-                  renderIcon={Printer}>
-                  {t('printReceipt', 'Print Receipt')}
-                </Button>
-                <Button
-                  kind="ghost"
-                  size="sm"
-                  onClick={() =>
-                    handlePrint(
-                      'billstatement',
-                      `${t('billStatement', 'Bill Statement')} ${bill?.receiptNumber} - ${startCase(
-                        bill?.patientName,
-                      )}`,
-                    )
-                  }
-                  renderIcon={Printer}>
-                  {t('printBillStatement', 'Print Bill Statement')}
-                </Button>
-              </div>
-            </PopoverContent>
-          </Popover>
-          {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>
-          )}
-          <Button
-            kind="ghost"
-            size="sm"
-            renderIcon={Wallet}
-            iconDescription="Add"
-            tooltipPosition="right"
-            onClick={() =>
-              launchWorkspace('payment-workspace', {
-                bill,
-                workspaceTitle: t('additionalPayment', 'Additional Payment (Balance {{billBalance}})', {
-                  billBalance: convertToCurrency(bill.balance),
-                }),
-              })
-            }>
-            {t('additionalPayment', 'Additional Payment')}
-          </Button>
-        </div>
+        <InvoiceActions bill={bill} selectedLineItems={selectedLineItems} activeVisit={activeVisit} />
       </div>
       <div className={styles.invoiceSummaryContainer}>
         <div className={styles.invoiceCard}>