From 4f1d307634fcdad98668c804c7011049bea9143c Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Thu, 4 Feb 2021 20:25:14 +0200
Subject: [PATCH] feat: receipt drawer.

---
 client/src/components/DrawersContainer.js     |  2 +
 .../containers/Sales/Invoice/InvoiceDrawer.js |  2 +-
 .../containers/Sales/Receipt/ReceiptDrawer.js | 43 +++++++++++++++++++
 .../Sales/Receipt/ReceiptsDataTable.js        |  6 +++
 .../containers/Sales/Receipt/ReceiptsList.js  | 10 +++++
 client/src/lang/en/index.js                   |  5 ++-
 6 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 client/src/containers/Sales/Receipt/ReceiptDrawer.js

diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js
index 00cdaac4c..de75a65b3 100644
--- a/client/src/components/DrawersContainer.js
+++ b/client/src/components/DrawersContainer.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import EstimateDrawer from 'containers/Sales/Estimate/EstimateDrawer';
 import InvoiceDrawer from 'containers/Sales/Invoice/InvoiceDrawer';
+import ReceiptDrawer from 'containers/Sales/Receipt/ReceiptDrawer';
 
 export default function DrawersContainer() {
   return (
     <div>
       <EstimateDrawer name={'estimate-drawer'} />
       <InvoiceDrawer name={'invoice-drawer'} />
+      <ReceiptDrawer name={'receipt-drawer'} />
     </div>
   );
 }
diff --git a/client/src/containers/Sales/Invoice/InvoiceDrawer.js b/client/src/containers/Sales/Invoice/InvoiceDrawer.js
index 54aee6d71..58de80ad8 100644
--- a/client/src/containers/Sales/Invoice/InvoiceDrawer.js
+++ b/client/src/containers/Sales/Invoice/InvoiceDrawer.js
@@ -33,7 +33,7 @@ function InvoiceDrawer({
 
   return (
     <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
-      <PaperTemplate propLabels={propLabels} />
+      <PaperTemplate labels={propLabels.labels} />
     </DrawerTemplate>
   );
 }
diff --git a/client/src/containers/Sales/Receipt/ReceiptDrawer.js b/client/src/containers/Sales/Receipt/ReceiptDrawer.js
new file mode 100644
index 000000000..9434e4a38
--- /dev/null
+++ b/client/src/containers/Sales/Receipt/ReceiptDrawer.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
+import PaperTemplate from 'containers/Drawers/PaperTemplate';
+import withDrawers from 'containers/Drawer/withDrawers';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+const ReceiptDrawer = ({
+  name,
+  //#withDrawer
+  isOpen,
+  payload,
+
+  closeDrawer,
+}) => {
+  // handle close Drawer
+  const handleDrawerClose = () => {
+    closeDrawer(name);
+  };
+
+  const propLabels = {
+    labels: {
+      name: 'Receipt',
+      billedTo: 'Billed to',
+      date: 'Receipt date',
+      refNo: 'Receipt No.',
+      billedFrom: 'Billed from',
+      amount: 'Receipt amount',
+      dueDate: 'Due date',
+    },
+  };
+
+  return (
+    <div>
+      <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
+        <PaperTemplate labels={propLabels.labels} />
+      </DrawerTemplate>
+    </div>
+  );
+};
+
+export default compose(withDrawers(), withDrawerActions)(ReceiptDrawer);
diff --git a/client/src/containers/Sales/Receipt/ReceiptsDataTable.js b/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
index 4baa3f38a..b163226f6 100644
--- a/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
+++ b/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
@@ -55,6 +55,7 @@ function ReceiptsDataTable({
   onEditReceipt,
   onDeleteReceipt,
   onCloseReceipt,
+  onDrawerReceipt,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -93,6 +94,11 @@ function ReceiptsDataTable({
             onClick={() => onCloseReceipt(receipt)}
           />
         </If>
+
+        <MenuItem
+          text={formatMessage({ id: 'receipt_paper' })}
+          onClick={() => onDrawerReceipt()}
+        />
         <MenuItem
           text={formatMessage({ id: 'delete_receipt' })}
           intent={Intent.DANGER}
diff --git a/client/src/containers/Sales/Receipt/ReceiptsList.js b/client/src/containers/Sales/Receipt/ReceiptsList.js
index 0d0aae47f..c8f3de6fc 100644
--- a/client/src/containers/Sales/Receipt/ReceiptsList.js
+++ b/client/src/containers/Sales/Receipt/ReceiptsList.js
@@ -17,6 +17,7 @@ import withReceipts from './withReceipts';
 import withReceiptActions from './withReceiptActions';
 import withViewsActions from 'containers/Views/withViewsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -33,6 +34,9 @@ function ReceiptsList({
   // #withAlertsActions,
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   //#withReceiptActions
   requestFetchReceiptsTable,
   addReceiptsTableQueries,
@@ -78,6 +82,10 @@ function ReceiptsList({
     [history],
   );
 
+  const handleReceiptDrawer = useCallback(() => {
+    openDrawer('receipt-drawer', {});
+  }, [openDrawer]);
+
   const handleSelectedRowsChange = useCallback(
     (estimate) => {
       setSelectedRows(estimate);
@@ -105,6 +113,7 @@ function ReceiptsList({
               onDeleteReceipt={handleDeleteReceipt}
               onEditReceipt={handleEditReceipt}
               onCloseReceipt={handleCloseReceipt}
+              onDrawerReceipt={handleReceiptDrawer}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -124,4 +133,5 @@ export default compose(
     receiptTableQuery,
   })),
   withAlertsActions,
+  withDrawerActions,
 )(ReceiptsList);
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index df7d2e12d..320bf3701 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -969,6 +969,7 @@ export default {
   voucher_number: 'Voucher number',
   voucher: 'Voucher',
   view_paper: 'View Paper',
-  estimate_paper:'Estimate Paper',
-  invoice_paper:'Invoice Paper',
+  estimate_paper: 'Estimate Paper',
+  invoice_paper: 'Invoice Paper',
+  receipt_paper: 'Receipt Paper',
 };