From fe5fc80ecb433492e9f713beda0d96fa1074f59e Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Sat, 6 Mar 2021 20:26:32 +0200
Subject: [PATCH] refactoring(estimate drawer): estimate drawer.

---
 .../EstimateDetails/EstimateDrawer.js         | 13 ++++----
 .../EstimateDetails/EstimateDrawerContent.js  | 17 ++++++++++
 .../EstimateDetails/EstimateDrawerProvider.js | 33 +++++++++++++++++++
 .../EstimateDetails/EstimatePaper.js          | 11 +++++++
 .../EstimatesLanding/EstimatesDataTable.js    |  4 +--
 .../Estimates/EstimatesLanding/components.js  | 12 +++++--
 6 files changed, 80 insertions(+), 10 deletions(-)
 create mode 100644 client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerContent.js
 create mode 100644 client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js
 create mode 100644 client/src/containers/Sales/Estimates/EstimateDetails/EstimatePaper.js

diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
index 413e36d44..85831e844 100644
--- a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
+++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
@@ -1,19 +1,20 @@
 import React, { lazy } from 'react';
+import { Drawer, DrawerSuspense } from 'components';
 import withDrawers from 'containers/Drawer/withDrawers';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Drawer, DrawerSuspense } from 'components';
 import { compose } from 'utils';
 
-const EstimateDrawerContent = lazy(() =>
-  import('containers/Drawers/PaperTemplate/PaperTemplate'),
-);
+const EstimateDrawerContent = lazy(() => import('./EstimateDrawerContent'));
 
+/**
+ *  Estimate drawer.
+ */
 function EstimateDrawer({
   name,
   //#withDrawer
   isOpen,
-  payload,
+  payload: { estimateId },
 
   closeDrawer,
 }) {
@@ -24,7 +25,7 @@ function EstimateDrawer({
   return (
     <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
       <DrawerSuspense>
-        <EstimateDrawerContent />
+        <EstimateDrawerContent estimateId={estimateId} />
       </DrawerSuspense>
     </Drawer>
   );
diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerContent.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerContent.js
new file mode 100644
index 000000000..0c8cb3230
--- /dev/null
+++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { EstimateDrawerProvider } from './EstimateDrawerProvider';
+import EstimatePaper from './EstimatePaper';
+
+/**
+ *  Estimate drawer content.
+ */
+export default function EstimateDrawerContent({
+  // #ownProp
+  estimateId,
+}) {
+  return (
+    <EstimateDrawerProvider estimateId={estimateId}>
+      <EstimatePaper />
+    </EstimateDrawerProvider>
+  );
+}
diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js
new file mode 100644
index 000000000..d5bc59e07
--- /dev/null
+++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js
@@ -0,0 +1,33 @@
+import React, { createContext } from 'react';
+import { useEstimate } from 'hooks/query';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+const EstimateDrawerContext = createContext();
+
+/**
+ * Estimate drawer provider.
+ */
+
+function EstimateDrawerProvider({ estimateId, ...props }) {
+  const {
+    data: { entries, ...estimate },
+    isLoading: isEstimateLoading,
+  } = useEstimate(estimateId, { enabled: !!estimateId });
+
+  // Provider payload.
+  const provider = {
+    estimateId,
+    estimate,
+    entries,
+    isEstimateLoading,
+  };
+
+  return (
+    <DashboardInsider loading={isEstimateLoading}>
+      <EstimateDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+const useEstimateDrawerContext = () => React.useContext(EstimateDrawerContext);
+
+export { EstimateDrawerProvider, useEstimateDrawerContext };
diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimatePaper.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimatePaper.js
new file mode 100644
index 000000000..391117be7
--- /dev/null
+++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimatePaper.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { useEstimateDrawerContext } from './EstimateDrawerProvider';
+import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
+
+/**
+ *  Estimate paper.
+ */
+export default function EstimatePaper() {
+  const { estimate, entries } = useEstimateDrawerContext();
+  return <PaperTemplate paperData={estimate} entries={entries} />;
+}
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
index 0913d4050..ecfd1e5c5 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
@@ -68,8 +68,8 @@ function EstimatesDataTable({
   };
 
   // Handle drawer estimate.
-  const handleDrawerEstimate = () => {
-    openDrawer('estimate-drawer', {});
+  const handleDrawerEstimate = ({ id }) => {
+    openDrawer('estimate-drawer', { estimateId: id });
   };
 
   // Handle convent to invoice.
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
index c11f16b50..21e770c51 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -49,7 +49,15 @@ export const statusAccessor = (row) => (
  */
 export function ActionsMenu({
   row: { original },
-  payload: { onEdit, onDeliver, onReject, onApprove, onDelete, onDrawer ,onConvert },
+  payload: {
+    onEdit,
+    onDeliver,
+    onReject,
+    onApprove,
+    onDelete,
+    onDrawer,
+    onConvert,
+  },
 }) {
   const { formatMessage } = useIntl();
 
@@ -108,7 +116,7 @@ export function ActionsMenu({
       <MenuItem
         icon={<Icon icon={'receipt-24'} iconSize={16} />}
         text={formatMessage({ id: 'estimate_paper' })}
-        onClick={() => onDrawer()}
+        onClick={safeCallback(onDrawer, original)}
       />
       <MenuItem
         text={formatMessage({ id: 'delete_estimate' })}