refactoring(estimate drawer): estimate drawer.

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(() =>
+const EstimateDrawerContent = lazy(() => import('./EstimateDrawerContent'));
-  import('containers/Drawers/PaperTemplate/PaperTemplate'),
-);
 
+/**
+ *  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>
   );

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

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

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} />;
+}

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js

@@ -68,8 +68,8 @@ function EstimatesDataTable({
   };
 
   // Handle drawer estimate.
-  const handleDrawerEstimate = () => {
+  const handleDrawerEstimate = ({ id }) => {
-    openDrawer('estimate-drawer', {});
+    openDrawer('estimate-drawer', { estimateId: id });
   };
 
   // Handle convent to invoice.

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