feat: print action when click on print button

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx

@@ -20,6 +20,8 @@ import {
 } from '@/components';
 
 import { useCreditNoteListContext } from './CreditNotesListProvider';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
+
 import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
 import withCreditNotes from './withCreditNotes';
 import withCreditNotesActions from './withCreditNotesActions';
@@ -27,8 +29,8 @@ import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
-import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import { compose } from '@/utils';
 
 /**
  * Credit note table actions bar.
@@ -54,6 +56,10 @@ function CreditNotesActionsBar({
   // credit note list context.
   const { CreditNotesView, fields, refresh } = useCreditNoteListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle view tab change.
   const handleTabChange = (view) => {
     setCreditNotesTableState({ viewSlug: view ? view.slug : null });
@@ -68,21 +74,22 @@ function CreditNotesActionsBar({
   const handleRefreshBtnClick = () => {
     refresh();
   };
-
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('creditNote', 'tableSize', size);
   };
-
   // Handle import button click.
   const handleImportBtnClick = () => {
     history.push('/credit-notes/import');
   };
-
   // Handle the export button click.
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'credit_note' });
   };
+  // Handle print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'CreditNote' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -121,6 +128,7 @@ function CreditNotesActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
         />
         <Button
           className={Classes.MINIMAL}
@@ -133,6 +141,7 @@ function CreditNotesActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
           onClick={handleExportBtnClick}
+          disabled={isExportPdfLoading}
         />
         <NavbarDivider />
         <DashboardRowsHeightButton

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx

@@ -26,12 +26,14 @@ import withEstimates from './withEstimates';
 import withEstimatesActions from './withEstimatesActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useRefreshEstimates } from '@/hooks/query/estimates';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
+
 import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
 import { compose } from '@/utils';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 
 /**
@@ -58,6 +60,10 @@ function EstimateActionsBar({
   // Estimates list context.
   const { estimatesViews, fields } = useEstimatesListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle click a new sale estimate.
   const onClickNewEstimate = () => {
     history.push('/estimates/new');
@@ -71,17 +77,14 @@ function EstimateActionsBar({
       viewSlug: view ? view.slug : null,
     });
   };
-
   // Handle click a refresh sale estimates
   const handleRefreshBtnClick = () => {
     refresh();
   };
-
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('salesEstimates', 'tableSize', size);
   };
-
   // Handle the import button click.
   const handleImportBtnClick = () => {
     history.push('/estimates/import');
@@ -90,6 +93,10 @@ function EstimateActionsBar({
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'sale_estimate' });
   };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'SaleEstimate' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -138,8 +145,9 @@ function EstimateActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-import-16'} />}
@@ -180,5 +188,5 @@ export default compose(
   withSettings(({ estimatesSettings }) => ({
     estimatesTableSize: estimatesSettings?.tableSize,
   })),
-  withDialogActions
+  withDialogActions,
 )(EstimateActionsBar);

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx

@@ -23,6 +23,7 @@ import { SaleInvoiceAction, AbilitySubject } from '@/constants/abilityOption';
 
 import { useRefreshInvoices } from '@/hooks/query/invoices';
 import { useInvoicesListContext } from './InvoicesListProvider';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 
 import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
@@ -49,13 +50,17 @@ function InvoiceActionsBar({
   addSetting,
 
   // #withDialogsActions
-  openDialog
+  openDialog,
 }) {
   const history = useHistory();
 
   // Sale invoices list context.
   const { invoicesViews, invoicesFields } = useInvoicesListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle new invoice button click.
   const handleClickNewInvoice = () => {
     history.push('/invoices/new');
@@ -88,6 +93,10 @@ function InvoiceActionsBar({
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'sale_invoice' });
   };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'SaleInvoice' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -134,6 +143,8 @@ function InvoiceActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
         <Button
           className={Classes.MINIMAL}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.tsx

@@ -35,6 +35,7 @@ import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 import { useRefreshPaymentReceive } from '@/hooks/query/paymentReceives';
 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 
 /**
  * Payment receives actions bar.
@@ -61,6 +62,10 @@ function PaymentReceiveActionsBar({
   // Payment receives list context.
   const { paymentReceivesViews, fields } = usePaymentReceivesListContext();
 
+  // Exports the given resource into pdf.
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle new payment button click.
   const handleClickNewPaymentReceive = () => {
     history.push('/payment-receives/new');
@@ -91,6 +96,10 @@ function PaymentReceiveActionsBar({
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'payment_receive' });
   };
+  // Handles the print button click.
+  const handlePrintBtnClick = () => {
+    exportPdf({ resource: 'PaymentReceive' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -137,6 +146,8 @@ function PaymentReceiveActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintBtnClick}
+          disabled={isExportPdfLoading}
         />
         <Button
           className={Classes.MINIMAL}

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx

@@ -29,14 +29,15 @@ import withReceipts from './withReceipts';
 import withReceiptsActions from './withReceiptsActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useRefreshReceipts } from '@/hooks/query/receipts';
+import { useResourceExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
 import { SaleReceiptAction, AbilitySubject } from '@/constants/abilityOption';
 
-import { compose } from '@/utils';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
+import { compose } from '@/utils';
 
 /**
  * Receipts actions bar.
@@ -62,6 +63,9 @@ function ReceiptActionsBar({
   // Sale receipts list context.
   const { receiptsViews, fields } = useReceiptsListContext();
 
+  const { mutateAsync: exportPdf, isLoading: isExportPdfLoading } =
+    useResourceExportPdf();
+
   // Handle new receipt button click.
   const onClickNewReceipt = () => {
     history.push('/receipts/new');
@@ -95,6 +99,10 @@ function ReceiptActionsBar({
   const handleExportBtnClick = () => {
     openDialog(DialogsName.Export, { resource: 'sale_receipt' });
   };
+  // Handle print button click.
+  const handlePrintButtonClick = () => {
+    exportPdf({ resource: 'SaleReceipt' });
+  };
 
   return (
     <DashboardActionsBar>
@@ -143,8 +151,9 @@ function ReceiptActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
           text={<T id={'print'} />}
+          onClick={handlePrintButtonClick}
+          disabled={isExportPdfLoading}
         />
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'file-import-16'} />}