feat: receipt drawer.

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

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

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}

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