@openmrs/esm-billing-app 1.0.2-pre.78 → 1.0.2-pre.790

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,11 +65,14 @@ 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 Number')
+   * t('dateAndTime', 'Date And Time')
+   * t('invoiceStatus', 'Invoice Status')
+   */
   const invoiceDetails = {
     'Total Amount': convertToCurrency(bill?.totalAmount, defaultCurrency),
     'Amount Tendered': convertToCurrency(bill?.tenderedAmount, defaultCurrency),
@@ -77,14 +81,14 @@ const Invoice: React.FC = () => {
     '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,7 +113,7 @@ const Invoice: React.FC = () => {
         </section>
         <div>
           <Button
-            disabled={isPrinting}
+            disabled={isPrinting || isLoadingPatient || isLoadingBill}
             onClick={handlePrint}
             renderIcon={(props) => <Printer size={24} {...props} />}
             iconDescription="Print bill"
@@ -120,20 +124,23 @@ const Invoice: React.FC = () => {
         </div>
       </div>
 
-      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
-      <Payments bill={bill} mutate={mutate} selectedLineItems={selectedLineItems} />
+      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} />
+      <Payments bill={bill} mutate={mutate} />
 
-      <div className={styles.printContainer} ref={componentRef}>
-        {isPrinting && <PrintableInvoice bill={bill} patient={patient} isLoading={isLoadingPatient} />}
-      </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

@@ -78,16 +78,19 @@
   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;
   }
 }