feat: payment receive paper.

client/src/containers/Drawers/PaymentPaperTemplate.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Icon } from 'components';
+import 'style/components/Drawer/DrawerTemplate.scss';
+
+export default function PaymentPaperTemplate({ labels: propLabels }) {
+  const labels = {
+    title: 'Payment receive',
+    billedTo: 'Billed to',
+    paymentDate: 'Payment date',
+    paymentNo: 'Payment No.',
+    billedFrom: 'Billed from',
+    referenceNo: 'Reference No',
+    amountReceived: 'Amount received',
+    ...propLabels,
+  };
+
+  return (
+    <div id={'page-size'}>
+      <div className={'template'}>
+        <div className={'template__header'}>
+          <div className={'template__header--title'}>
+            <h1>{labels.title}</h1>
+            <p>info@bigcapital.ly </p>
+          </div>
+          <Icon icon="bigcapital" height={30} width={200} />
+        </div>
+
+        <div className="template__content">
+          <div className="template__content__info">
+            <span> {labels.billedTo} </span>
+            <p className={'info-paragraph'}>Step Currency</p>
+          </div>
+          <div className="template__content__info">
+            <span> {labels.paymentDate} </span>
+            <p className={'info-paragraph'}>1/1/2022</p>
+          </div>
+          <div className="template__content__info">
+            <span> {labels.paymentNo} </span>
+            <p className={'info-paragraph'}>IN-2022</p>
+          </div>
+          <div className="template__content__info">
+            <span> {labels.amountReceived} </span>
+            <p className={'info-paragraph-amount'}>60,000 USD</p>
+          </div>
+          <div className="template__content__info">
+            <span> {labels.billedFrom} </span>
+            <p className={'info-paragraph'}> Klay Thompson</p>
+          </div>
+          <div className="template__content__info">
+            <span> {labels.referenceNo} </span>
+            <p className={'info-paragraph'}></p>
+          </div>
+        </div>
+        <div className="template__table">
+          <div className="template__table__rows">
+            <span className="template__table__rows--cell-payment-receive ">
+              Invoice number
+            </span>
+            <span className="template__table__rows--cell-payment-receive ">
+              Invoice date
+            </span>
+            <span className="template__table__rows--cell-payment-receive ">
+              Invoice amount
+            </span>
+            <span className="template__table__rows--cell-payment-receive ">
+              Payment amount
+            </span>
+          </div>
+
+          <div className="template__table__rows">
+            <span className="template__table__rows--cell-payment-receive">
+              INV-1
+            </span>
+            <span className="template__table__rows--cell-payment-receive">
+              12 Jan 2021
+            </span>
+            <span className="template__table__rows--cell-payment-receive">
+              50,000 USD
+            </span>
+            <span className="template__table__rows--cell-payment-receive">
+              1000 USD
+            </span>
+          </div>
+          <div className="template__table__rows">
+            <span className="template__table__rows--cell-payment-receive">
+              INV-2{' '}
+            </span>
+            <span className="template__table__rows--cell-payment-receive">
+              12 Jan 2021
+            </span>
+            <span className="template__table__rows--cell-payment-receive">
+              50,000 USD
+            </span>
+            <span className="template__table__rows--cell-payment-receive">
+              1000 USD
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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);