refactoring(payment receive): payment receive.

client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js

@@ -6,7 +6,7 @@ import { Drawer, DrawerSuspense } from 'components';
 import { compose } from 'utils';
 
 const PaymentReceiveDrawerContent = lazy(() =>
-  import('containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate'),
+  import('./PaymentReceiveDrawerContent'),
 );
 
 /**
@@ -16,7 +16,7 @@ function PaymentReceiveDrawer({
   name,
   //#withDrawer
   isOpen,
-  payload,
+  payload: { paymentReceiveId },
 
   closeDrawer,
 }) {
@@ -28,7 +28,7 @@ function PaymentReceiveDrawer({
   return (
     <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
       <DrawerSuspense>
-        <PaymentReceiveDrawerContent />
+        <PaymentReceiveDrawerContent paymentReceiveId={paymentReceiveId} />
       </DrawerSuspense>
     </Drawer>
   );

client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerContent.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PaymentReceiveDrawerProvider } from './PaymentReceiveDrawerProvider';
+import PaymentReceivePaper from './PaymentReceivePaper';
+/**
+ *  payment receive drawer content.
+ */
+export default function PaymentReceiveDrawerContent({
+  // #ownProp
+  paymentReceiveId,
+}) {
+  
+  return (
+    <PaymentReceiveDrawerProvider paymentReceiveId={paymentReceiveId}>
+      <PaymentReceivePaper />
+    </PaymentReceiveDrawerProvider>
+  );
+}

client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js

@@ -0,0 +1,30 @@
+import React, { createContext, useContext } from 'react';
+import { usePaymentReceive } from 'hooks/query';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+const PaymentReceiveDrawerContext = createContext();
+
+function PaymentReceiveDrawerProvider({ paymentReceiveId, ...props }) {
+  const {
+    data: paymentReceive,
+    isFetching: isPaymentReceiveLoading,
+  } = usePaymentReceive(paymentReceiveId, {
+    enabled: !!paymentReceiveId,
+  });
+
+  // Provider payload.
+  const provider = {
+    paymentReceiveId,
+    paymentReceive,
+  };
+
+  return (
+    <DashboardInsider loading={isPaymentReceiveLoading}>
+      <PaymentReceiveDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+const usePaymentReceiveDrawerContext = () =>
+  useContext(PaymentReceiveDrawerContext);
+
+export { PaymentReceiveDrawerProvider, usePaymentReceiveDrawerContext };

client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceivePaper.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate';
+import { usePaymentReceiveDrawerContext } from './PaymentReceiveDrawerProvider';
+
+export default function PaymentReceivePaper() {
+  const { paymentReceive } = usePaymentReceiveDrawerContext();
+
+  return <PaymentPaperTemplate paperData={paymentReceive.paymentReceive} />;
+}

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js

@@ -58,8 +58,8 @@ function PaymentReceivesDataTable({
   };
 
   // Handle drawer payment receive.
-  const handleDrawerPaymentReceive = () => {
-    openDrawer('payment-receive-drawer', {});
+  const handleDrawerPaymentReceive = ({ id }) => {
+    openDrawer('payment-receive-drawer', { paymentReceiveId: id });
   };
 
   // Handle datatable fetch once the table's state changing.

client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js

@@ -37,7 +37,7 @@ export function ActionsMenu({
       <MenuItem
         icon={<Icon icon={'receipt-24'} iconSize={16} />}
         text={formatMessage({ id: 'payment_receive_paper' })}
-        onClick={() => onDrawer()}
+        onClick={safeCallback(onDrawer, paymentReceive)}
       />
       <MenuItem
         text={formatMessage({ id: 'delete_payment_receive' })}