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({ /> + +