@openmrs/esm-billing-app 1.0.2-pre.112 → 1.0.2-pre.1124

package/src/invoice/invoice.component.tsx

@@ -4,15 +4,15 @@ import { Printer } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { useReactToPrint } from 'react-to-print';
 import { useTranslation } from 'react-i18next';
-import { ExtensionSlot, useConfig, usePatient } from '@openmrs/esm-framework';
-import { ErrorState } from '@openmrs/esm-patient-common-lib';
-import { convertToCurrency } from '../helpers';
-import { type LineItem } from '../types';
-import { useBill } from '../billing.resource';
+import { ExtensionSlot, showSnackbar, useConfig, usePatient } from '@openmrs/esm-framework';
 import InvoiceTable from './invoice-table.component';
 import Payments from './payments/payments.component';
 import PrintReceipt from './printable-invoice/print-receipt.component';
 import PrintableInvoice from './printable-invoice/printable-invoice.component';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { convertToCurrency } from '../helpers';
+import { useBill, useDefaultFacility } from '../billing.resource';
+import type { BillingConfig } from '../config-schema';
 import styles from './invoice.scss';
 
 interface InvoiceDetailsProps {
@@ -22,25 +22,20 @@ interface InvoiceDetailsProps {
 
 const Invoice: React.FC = () => {
   const { t } = useTranslation();
+  const { data } = useDefaultFacility();
   const { billUuid, patientUuid } = useParams();
   const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
   const { bill, isLoading: isLoadingBill, error, mutate } = useBill(billUuid);
   const [isPrinting, setIsPrinting] = useState(false);
-  const [selectedLineItems, setSelectedLineItems] = useState<LineItem[]>([]);
   const componentRef = useRef<HTMLDivElement>(null);
   const onBeforeGetContentResolve = useRef<(() => void) | null>(null);
-  const { defaultCurrency } = useConfig();
-  const handleSelectItem = (lineItems: LineItem[]) => {
-    setSelectedLineItems(lineItems);
-  };
+  const { defaultCurrency } = useConfig<BillingConfig>();
 
   const handleAfterPrint = useCallback(() => {
     onBeforeGetContentResolve.current = null;
     setIsPrinting(false);
   }, []);
 
-  const reactToPrintContent = useCallback(() => componentRef.current, []);
-
   const handleOnBeforeGetContent = useCallback(() => {
     return new Promise<void>((resolve) => {
       if (patient && bill) {
@@ -51,11 +46,17 @@ const Invoice: React.FC = () => {
   }, [bill, patient]);
 
   const handlePrint = useReactToPrint({
-    content: reactToPrintContent,
+    contentRef: componentRef,
     documentTitle: `Invoice ${bill?.receiptNumber} - ${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`,
-    onBeforeGetContent: handleOnBeforeGetContent,
+    onBeforePrint: handleOnBeforeGetContent,
     onAfterPrint: handleAfterPrint,
-    removeAfterPrint: true,
+    preserveAfterPrint: false,
+    onPrintError: (_, error) =>
+      showSnackbar({
+        title: t('errorPrintingInvoice', 'Error printing invoice'),
+        kind: 'error',
+        subtitle: error.message,
+      }),
   });
 
   useEffect(() => {
@@ -64,27 +65,28 @@ const Invoice: React.FC = () => {
     }
   }, [isPrinting]);
 
-  useEffect(() => {
-    const unPaidLineItems = bill?.lineItems?.filter((item) => item.paymentStatus === 'PENDING') ?? [];
-    setSelectedLineItems(unPaidLineItems);
-  }, [bill?.lineItems]);
-
+  // Do not remove this comment. Adds the translation keys for the invoice details
+  /**
+   * t('totalAmount', 'Total amount')
+   * t('amountTendered', 'Amount tendered')
+   * t('invoiceNumber', 'Invoice #')
+   * t('dateAndTime', 'Date and time')
+   * t('invoiceStatus', 'Invoice status')
+   */
   const invoiceDetails = {
-    'Total Amount': convertToCurrency(bill?.totalAmount, defaultCurrency),
-    'Amount Tendered': convertToCurrency(bill?.tenderedAmount, defaultCurrency),
-    'Invoice Number': bill?.receiptNumber,
-    'Date And Time': bill?.dateCreated,
-    'Invoice Status': bill?.status,
+    [t('totalAmount', 'Total amount')]: convertToCurrency(bill?.totalAmount, defaultCurrency),
+    [t('amountTendered', 'Amount tendered')]: convertToCurrency(bill?.tenderedAmount, defaultCurrency),
+    [t('invoiceNumber', 'Invoice number')]: bill?.receiptNumber,
+    [t('dateAndTime', 'Date and time')]: bill?.dateCreated,
+    [t('invoiceStatus', 'Invoice status')]: bill?.status,
   };
 
-  if (isLoadingPatient && isLoadingBill) {
+  if (isLoadingPatient || isLoadingBill) {
     return (
       <div className={styles.invoiceContainer}>
         <InlineLoading
           className={styles.loader}
-          status="active"
-          iconDescription="Loading"
-          description="Loading patient header..."
+          description={`${t('loadingBillInfo', 'Loading bill information')}...`}
         />
       </div>
     );
@@ -109,31 +111,35 @@ const Invoice: React.FC = () => {
         </section>
         <div>
           <Button
-            disabled={isPrinting}
+            disabled={isPrinting || isLoadingPatient || isLoadingBill}
             onClick={handlePrint}
             renderIcon={(props) => <Printer size={24} {...props} />}
-            iconDescription="Print bill"
-            size="md">
+            iconDescription={t('printBill', 'Print bill')}>
             {t('printBill', 'Print bill')}
           </Button>
           {(bill?.status === 'PAID' || bill?.tenderedAmount > 0) && <PrintReceipt billId={bill?.id} />}
         </div>
       </div>
 
-      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
-      <Payments bill={bill} mutate={mutate} selectedLineItems={selectedLineItems} />
-
-      <div className={styles.printContainer} ref={componentRef}>
-        {isPrinting && <PrintableInvoice bill={bill} patient={patient} isLoading={isLoadingPatient} />}
+      <div className={styles.invoiceContent}>
+        <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} />
+        <Payments bill={bill} mutate={mutate} />
       </div>
+
+      {bill && patient && (
+        <div className={styles.printContainer}>
+          <PrintableInvoice bill={bill} patient={patient} defaultFacility={data} componentRef={componentRef} />
+        </div>
+      )}
     </div>
   );
 };
 
 function InvoiceDetails({ label, value }: InvoiceDetailsProps) {
+  const { t } = useTranslation();
   return (
     <div>
-      <h1 className={styles.label}>{label}</h1>
+      <h1 className={styles.label}>{t(label)}</h1>
       <span className={styles.value}>{value}</span>
     </div>
   );

package/src/invoice/invoice.scss

@@ -73,21 +73,28 @@
   flex-direction: row;
 }
 
+.invoiceContent {
+  margin: layout.$spacing-05;
+}
+
 .billDetail {
   font-weight: bold;
   color: colors.$cool-gray-90;
 }
 
-@media screen {
-  .printContainer {
-    background-color: colors.$white;
-    display: none;
+.printContainer {
+  background-color: colors.$white;
+  display: none;
+
+  @media print {
+    display: block !important;
   }
 }
 
 @media print {
   html,
   body {
+    display: block !important;
     background-color: colors.$white !important;
   }
 }