feat: payment receive paper.

client/src/containers/Sales/PaymentReceive/PaymentReceiveDrawer.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
+import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate';
+import withDrawers from 'containers/Drawer/withDrawers';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+function PaymentReceiveDrawer({
+  name,
+  //#withDrawer
+  isOpen,
+  payload,
+
+  closeDrawer,
+}) {
+  // handle close Drawer
+  const handleDrawerClose = () => {
+    closeDrawer(name);
+  };
+
+  return (
+    <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
+      <PaymentPaperTemplate />
+    </DrawerTemplate>
+  );
+}
+
+export default compose(withDrawers(), withDrawerActions)(PaymentReceiveDrawer);

client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js

@@ -43,10 +43,11 @@ function PaymentReceivesDataTable({
 
   // #withSettings
   baseCurrency,
-  
+
   // #OwnProps
   onEditPaymentReceive,
   onDeletePaymentReceive,
+  onDrawerPaymentReceive,
   onSelectedRowsChange,
 }) {
   const isLoaded = useIsValuePassed(paymentReceivesLoading, false);
@@ -105,6 +106,10 @@ function PaymentReceivesDataTable({
           text={formatMessage({ id: 'edit_payment_receive' })}
           onClick={handleEditPaymentReceive(paymentReceive)}
         />
+        <MenuItem
+          text={formatMessage({ id: 'payment_receive_paper' })}
+          onClick={() => onDrawerPaymentReceive()}
+        />
         <MenuItem
           text={formatMessage({ id: 'delete_payment_receive' })}
           intent={Intent.DANGER}

client/src/containers/Sales/PaymentReceive/PaymentReceivesList.js

@@ -15,6 +15,7 @@ import withResourceActions from 'containers/Resources/withResourcesActions';
 import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -28,6 +29,9 @@ function PaymentReceiveList({
   // #withAlertsActions.
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   //#withPaymentReceivesActions
   requestFetchPaymentReceiveTable,
 }) {
@@ -56,6 +60,10 @@ function PaymentReceiveList({
     history.push(`/payment-receives/${payment.id}/edit`);
   });
 
+  const handlePaymentReceiveDrawer = useCallback(() => {
+    openDrawer('payment-receive-drawer', {});
+  }, [openDrawer]);
+
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, [fetchPaymentReceives]);
 
@@ -86,6 +94,7 @@ function PaymentReceiveList({
             <PaymentReceivesDataTable
               onDeletePaymentReceive={handleDeletePaymentReceive}
               onEditPaymentReceive={handleEditPaymentReceive}
+              onDrawerPaymentReceive={handlePaymentReceiveDrawer}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -104,4 +113,5 @@ export default compose(
     paymentReceivesTableQuery,
   })),
   withAlertsActions,
+  withDrawerActions,
 )(PaymentReceiveList);