diff --git a/src/components/DialogsContainer.js b/src/components/DialogsContainer.js
index d9d3609c5..cd8eb745e 100644
--- a/src/components/DialogsContainer.js
+++ b/src/components/DialogsContainer.js
@@ -32,6 +32,8 @@ import ReconcileVendorCreditDialog from '../containers/Dialogs/ReconcileVendorCr
import LockingTransactionsDialog from '../containers/Dialogs/LockingTransactionsDialog';
import UnlockingTransactionsDialog from '../containers/Dialogs/UnlockingTransactionsDialog';
import UnlockingPartialTransactionsDialog from '../containers/Dialogs/UnlockingPartialTransactionsDialog';
+import CreditNotePdfPreviewDialog from '../containers/Dialogs/CreditNotePdfPreviewDialog';
+import PaymentReceivePdfPreviewDialog from '../containers/Dialogs/PaymentReceivePdfPreviewDialog';
/**
* Dialogs container.
@@ -74,6 +76,8 @@ export default function DialogsContainer() {
+
+
);
}
diff --git a/src/containers/Dialogs/PaymentReceivePdfPreviewDialog/PaymentReceivePdfPreviewContent.js b/src/containers/Dialogs/PaymentReceivePdfPreviewDialog/PaymentReceivePdfPreviewContent.js
new file mode 100644
index 000000000..c03dc9488
--- /dev/null
+++ b/src/containers/Dialogs/PaymentReceivePdfPreviewDialog/PaymentReceivePdfPreviewContent.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { AnchorButton } from '@blueprintjs/core';
+
+import { DialogContent, PdfDocumentPreview, T } from 'components';
+import { usePdfPaymentReceive } from 'hooks/query';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function PaymentReceivePdfPreviewDialogContent({
+ subscriptionForm: { paymentReceiveId },
+}) {
+ const { isLoading, pdfUrl } = usePdfPaymentReceive(paymentReceiveId);
+
+ return (
+
+
+
+
+
+ );
+}
+
+export default compose(withDialogActions)(
+ PaymentReceivePdfPreviewDialogContent,
+);
diff --git a/src/containers/Dialogs/PaymentReceivePdfPreviewDialog/index.js b/src/containers/Dialogs/PaymentReceivePdfPreviewDialog/index.js
new file mode 100644
index 000000000..f96b22147
--- /dev/null
+++ b/src/containers/Dialogs/PaymentReceivePdfPreviewDialog/index.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { T, Dialog, DialogSuspense } from 'components';
+
+import withDialogRedux from 'components/DialogReduxConnect';
+
+import { CLASSES } from 'common/classes';
+import { compose } from 'utils';
+
+// Lazy loading the content.
+const PdfPreviewDialogContent = React.lazy(() =>
+ import('./PaymentReceivePdfPreviewContent'),
+);
+
+/**
+ * Payment receive PDF preview dialog.
+ */
+function PaymentReceivePdfPreviewDialog({
+ dialogName,
+ payload = { paymentReceiveId: null },
+ isOpen,
+}) {
+ return (
+ }
+ className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+ autoFocus={true}
+ canEscapeKeyClose={true}
+ isOpen={isOpen}
+ style={{ width: '1000px' }}
+ >
+
+
+
+
+ );
+}
+
+export default compose(withDialogRedux())(PaymentReceivePdfPreviewDialog);
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
index 5f2cad543..14f305f80 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
@@ -62,6 +62,11 @@ function PaymentReceiveActionsBar({
openDialog('notify-payment-via-sms', { paymentReceiveId });
};
+ // Handle print payment receive.
+ const handlePrintPaymentReceive = () => {
+ openDialog('payment-pdf-preview', { paymentReceiveId });
+ };
+
return (
@@ -74,6 +79,14 @@ function PaymentReceiveActionsBar({
/>
+
+ }
+ text={}
+ onClick={handlePrintPaymentReceive}
+ />
+