BIG-19 fix: scrollable area on details drawer.

client/src/common/drawers.js

@@ -7,5 +7,6 @@ export const DRAWERS = {
   ACCOUNT_DRAWER: 'account-drawer',
   JOURNAL_DRAWER: 'journal-drawer',
   EXPENSE_DRAWER: 'expense-drawer',
+  BILL_DRAWER: 'bill-drawer',
   INVENTORY_ADJUSTMENT_DRAWER: 'inventory-adjustment-drawer',
 };

client/src/components/Drawer/DrawerSuspense.js

@@ -1,12 +1,11 @@
 import React, { Suspense } from 'react';
-import { Spinner, Classes } from '@blueprintjs/core';
+import { DrawerLoading } from 'components';
 
+/**
+ * Loading content.
+ */
 function LoadingContent() {
-  return (
-    <div className={Classes.DRAWER_BODY}>
-      <Spinner size={30} />
-    </div>
-  );
+  return <DrawerLoading loading={true} />;
 }
 
 export default function DrawerSuspense({ children }) {

client/src/components/Drawer/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Classes } from '@blueprintjs/core';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+export function DrawerLoading({ loading, mount = false, children }) {
+  return (
+    <LoadingIndicator loading={loading} mount={mount}>
+      {children}
+    </LoadingIndicator>
+  );
+}
+
+export function DrawerBody({ children }) {
+  return <div className={Classes.DRAWER_BODY}>{children}</div>;
+}

client/src/components/DrawersContainer.js

@@ -25,7 +25,7 @@ export default function DrawersContainer() {
       <AccountDrawer name={DRAWERS.ACCOUNT_DRAWER} />
       <ManualJournalDrawer name={DRAWERS.JOURNAL_DRAWER} />
       <ExpenseDrawer name={DRAWERS.EXPENSE_DRAWER} />
-      <BillDrawer name={'bill-drawer'} />
+      <BillDrawer name={DRAWERS.BILL_DRAWER} />
       <InvoiceDetailDrawer name={'invoice-detail-drawer'} />
       <EstimateDetailDrawer name={'estimate-detail-drawer'} />
       <ReceiptDetailDrawer name={'receipt-detail-drawer'} />

client/src/components/index.js

@@ -75,6 +75,7 @@ export * from './TotalLines/index'
 export * from './Alert';
 export * from './Subscriptions';
 export * from './Dashboard';
+export * from './Drawer';
 
 const Hint = FieldHint;
 

client/src/containers/Drawers/AccountDrawer/AccountDrawerContent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import 'style/components/Drawers/AccountDrawer.scss';
 
@@ -11,11 +12,13 @@ import AccountDrawerDetails from './AccountDrawerDetails';
 export default function AccountDrawerContent({
   // #ownProp
   accountId,
-  name
+  name,
 }) {
   return (
     <AccountDrawerProvider name={name} accountId={accountId}>
-      <AccountDrawerDetails />
+      <DrawerBody>
+        <AccountDrawerDetails />
+      </DrawerBody>
     </AccountDrawerProvider>
   );
-}
+}

client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js

@@ -11,11 +11,13 @@ import AccountDrawerTable from './AccountDrawerTable';
  */
 export default function AccountDrawerDetails() {
   return (
-  <div className={'account-drawer'}>
+    <div className={'account-drawer'}>
       <AccountDrawerActionBar />
+
       <Card className={'card-header'}>
         <AccountDrawerHeader />
       </Card>
+
       <AccountDrawerTable />
     </div>
   );

client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAccount, useAccountTransactions } from 'hooks/query';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 
 const AccountDrawerContext = React.createContext();
 
@@ -22,7 +22,7 @@ function AccountDrawerProvider({ accountId, name, ...props }) {
   // Drawer title.
   const drawerTitle = `${account.name} ${account.code}`;
 
-  // provider.
+  // Provider.
   const provider = {
     accountId,
     account,
@@ -31,10 +31,10 @@ function AccountDrawerProvider({ accountId, name, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isAccountLoading || isAccountsLoading}>
+    <DrawerLoading loading={isAccountLoading || isAccountsLoading}>
       <DrawerHeaderContent name={'account-drawer'} title={drawerTitle} />
       <AccountDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 

client/src/containers/Drawers/AccountDrawer/index.js

@@ -19,10 +19,7 @@ function AccountDrawer({
     <Drawer
       isOpen={isOpen}
       name={name}
-      style={{
-        minWidth: '700px',
-        maxWidth: '900px',
-      }}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
       size={'65%'}
     >
       <DrawerSuspense>

client/src/containers/Drawers/BillDrawer/BillDrawerContent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
 
@@ -15,8 +16,9 @@ export default function BillDrawerContent({
 }) {
   return (
     <BillDrawerProvider billId={billId}>
-      <BillDrawerDetails />
-      {/* <BillDrawerAlerts /> */}
+      <DrawerBody>
+        <BillDrawerDetails />
+      </DrawerBody>
     </BillDrawerProvider>
   );
 }

client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import {
   useBill,
   useTransactionsByReference,
@@ -41,16 +41,16 @@ function BillDrawerProvider({ billId, ...props }) {
     bill,
   };
 
+  const loading = isLandedCostLoading || isTransactionLoading || isBillLoading;
+
   return (
-    <DashboardInsider
-      loading={isLandedCostLoading || isTransactionLoading || isBillLoading}
-    >
+    <DrawerLoading loading={loading}>
       <DrawerHeaderContent
         name="bill-drawer"
         title={intl.get('bill_details')}
       />
       <BillDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 

client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerContent.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { DrawerBody } from 'components';
 import CustomerDetails from './CustomerDetails';
 import { CustomerDetailsDrawerProvider } from './CustomerDetailsDrawerProvider';
 
@@ -12,7 +13,9 @@ export default function CustomerDetailsDrawerContent({
 }) {
   return (
     <CustomerDetailsDrawerProvider customerId={customerId}>
-      <CustomerDetails />
+      <DrawerBody>
+        <CustomerDetails />
+      </DrawerBody>
     </CustomerDetailsDrawerProvider>
   );
 }

client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerProvider.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useCustomer } from 'hooks/query';
 
 const ContactDetailDrawerContext = React.createContext();
@@ -23,13 +23,13 @@ function CustomerDetailsDrawerProvider({ customerId, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isCustomerLoading}>
+    <DrawerLoading loading={isCustomerLoading}>
       <DrawerHeaderContent
         name="customer-details-drawer"
         title={customer?.display_name}
       />
       <ContactDetailDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 

client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerContent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import EstimateDetail from './EstimateDetail';
 import { EstimateDetailDrawerProvider } from './EstimateDetailDrawerProvider';
@@ -12,7 +13,9 @@ export default function EstimateDetailDrawerContent({
 }) {
   return (
     <EstimateDetailDrawerProvider estimateId={estimateId}>
-      <EstimateDetail />
+      <DrawerBody>
+        <EstimateDetail />
+      </DrawerBody>
     </EstimateDetailDrawerProvider>
   );
 }

client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { useEstimate } from 'hooks/query';
-import { DrawerHeaderContent, DrawerInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 
 const EstimateDetailDrawerContext = React.createContext();
 
@@ -21,13 +21,13 @@ function EstimateDetailDrawerProvider({ estimateId, ...props }) {
   };
 
   return (
-    <DrawerInsider loading={isEstimateLoading}>
+    <DrawerLoading loading={isEstimateLoading}>
       <DrawerHeaderContent
         name="estimate-detail-drawer"
         title={intl.get('estimate_details')}
       />
       <EstimateDetailDrawerContext.Provider value={provider} {...props} />
-    </DrawerInsider>
+    </DrawerLoading>
   );
 }
 

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { DrawerBody } from 'components';
+
 import 'style/components/Drawers/ExpenseDrawer.scss';
 
 import { ExpenseDrawerProvider } from './ExpenseDrawerProvider';
@@ -14,7 +16,9 @@ export default function ExpenseDrawerContent({
 }) {
   return (
     <ExpenseDrawerProvider expenseId={expenseId}>
-      <ExpenseDrawerDetails />
+      <DrawerBody>
+        <ExpenseDrawerDetails />
+      </DrawerBody>
     </ExpenseDrawerProvider>
   );
 }

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useExpense } from 'hooks/query';
-import { DashboardInsider } from 'components';
+import { DrawerLoading } from 'components';
 
 const ExpenseDrawerDrawerContext = React.createContext();
 
@@ -25,10 +25,11 @@ function ExpenseDrawerProvider({ expenseId, ...props }) {
     isExpenseFetching,
     isExpenseLoading,
   };
+
   return (
-    <DashboardInsider loading={isExpenseLoading}>
+    <DrawerLoading loading={isExpenseLoading}>
       <ExpenseDrawerDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 const useExpenseDrawerContext = () =>

client/src/containers/Drawers/ExpenseDrawer/index.js

@@ -1,7 +1,8 @@
 import React, { lazy } from 'react';
+import intl from 'react-intl-universal';
+
 import { Drawer, DrawerSuspense } from 'components';
 import withDrawers from 'containers/Drawer/withDrawers';
-import intl from 'react-intl-universal';
 
 import { compose } from 'utils';
 
@@ -13,7 +14,7 @@ const ExpenseDrawerContent = lazy(() => import('./ExpenseDrawerContent'));
 function ExpenseDrawer({
   name,
 
-  //#withDrawer
+  // #withDrawer
   isOpen,
   payload: { expenseId },
 }) {
@@ -23,10 +24,7 @@ function ExpenseDrawer({
       name={name}
       title={intl.get('expense')}
       size={'65%'}
-      style={{
-        minWidth: '700px',
-        maxWidth: '900px',
-      }}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
     >
       <DrawerSuspense>
         <ExpenseDrawerContent expenseId={expenseId} />

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js

@@ -16,6 +16,7 @@ export default function InventoryAdjustmentDetail() {
   return (
     <div className={clsx(InventoryAdjustmentDrawerCls.detail_panel)}>
       <InventoryAdjustmentDetailActionsBar />
+
       <Card>
         <InventoryAdjustmentDetailHeader />
         <InventoryAdjustmentDetailTable />

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js

@@ -26,9 +26,7 @@ function InventoryAdjustmentDetailActionsBar({
 
   // Handle delete inventory adjustment.
   const handleDeleteInventoryAdjustment = () => {
-    openAlert('inventory-adjustment-delete', {
-      inventoryId,
-    });
+    openAlert('inventory-adjustment-delete', { inventoryId });
     closeDrawer('inventory-adjustment-drawer');
   };
 

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerContent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import InventoryAdjustmentDetail from './InventoryAdjustmentDetail';
 import { InventoryAdjustmentDrawerProvider } from './InventoryAdjustmentDrawerProvider';
@@ -9,7 +10,9 @@ import { InventoryAdjustmentDrawerProvider } from './InventoryAdjustmentDrawerPr
 export default function InventoryAdjustmentDrawerContent({ inventoryId }) {
   return (
     <InventoryAdjustmentDrawerProvider inventoryId={inventoryId}>
-      <InventoryAdjustmentDetail />
+      <DrawerBody>
+        <InventoryAdjustmentDetail />
+      </DrawerBody>
     </InventoryAdjustmentDrawerProvider>
   );
 }

client/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useInventoryAdjustment } from 'hooks/query';
 
 const InventoryAdjustmentDrawerContext = React.createContext();
@@ -22,14 +22,13 @@ function InventoryAdjustmentDrawerProvider({ inventoryId, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isAdjustmentsLoading}>
+    <DrawerLoading loading={isAdjustmentsLoading}>
       <DrawerHeaderContent
         name="inventory-adjustment-drawer"
         title={intl.get('inventory_adjustment.details_drawer.title')}
       />
-
       <InventoryAdjustmentDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 

client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
 
@@ -14,7 +15,9 @@ export default function InvoiceDetailDrawerContent({
 }) {
   return (
     <InvoiceDetailDrawerProvider invoiceId={invoiceId}>
-      <InvoiceDetail />
+      <DrawerBody>
+        <InvoiceDetail />
+      </DrawerBody>
     </InvoiceDetailDrawerProvider>
   );
 }

client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useTransactionsByReference, useInvoice } from 'hooks/query';
 
 const InvoiceDetailDrawerContext = React.createContext();
@@ -32,13 +32,13 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
     invoice,
   };
   return (
-    <DashboardInsider loading={isTransactionLoading || isInvoiceLoading}>
+    <DrawerLoading loading={isTransactionLoading || isInvoiceLoading}>
       <DrawerHeaderContent
         name="invoice-detail-drawer"
         title={intl.get('invoice_details')}
       />
       <InvoiceDetailDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 

client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import 'style/components/Drawers/ItemDrawer.scss';
 
+import { DrawerBody } from 'components';
 import ItemContentDetails from './ItemContentDetails';
 import { ItemDetailDrawerProvider } from './ItemDetailDrawerProvider';
 
@@ -14,7 +15,9 @@ export default function ItemDetailDrawerContent({
 }) {
   return (
     <ItemDetailDrawerProvider itemId={itemId}>
-      <ItemContentDetails />
+      <DrawerBody>
+        <ItemContentDetails />
+      </DrawerBody>
     </ItemDetailDrawerProvider>
   );
 }

client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useItem } from 'hooks/query';
 
 const ItemDetailDrawerContext = React.createContext();
@@ -21,10 +21,10 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isItemLoading}>
+    <DrawerLoading loading={isItemLoading}>
       <DrawerHeaderContent name="item-detail-drawer" title={item?.name} />
       <ItemDetailDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 const useItemDetailDrawerContext = () =>

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { DrawerBody } from 'components';
+
 import 'style/components/Drawers/ViewDetails.scss';
 
 import { ManualJournalDrawerProvider } from './ManualJournalDrawerProvider';
@@ -14,7 +16,9 @@ export default function ManualJournalDrawerContent({
 }) {
   return (
     <ManualJournalDrawerProvider manualJournalId={manualJournalId}>
-      <ManualJournalDrawerDetails />
+      <DrawerBody>
+        <ManualJournalDrawerDetails />
+      </DrawerBody>
     </ManualJournalDrawerProvider>
   );
 }

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { useJournal } from 'hooks/query';
-import { DashboardInsider, DrawerHeaderContent } from 'components';
+import { DrawerLoading, DrawerHeaderContent } from 'components';
 
 const ManualJournalDrawerContext = React.createContext();
 
@@ -28,7 +28,7 @@ function ManualJournalDrawerProvider({ manualJournalId, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isJournalLoading}>
+    <DrawerLoading loading={isJournalLoading}>
       <DrawerHeaderContent
         name={'journal-drawer'}
         title={intl.get('manual_journal_number', {
@@ -36,7 +36,7 @@ function ManualJournalDrawerProvider({ manualJournalId, ...props }) {
         })}
       />
       <ManualJournalDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 

client/src/containers/Drawers/ManualJournalDrawer/index.js

@@ -14,7 +14,7 @@ const ManualJournalDrawerContent = lazy(() =>
 function ManualJournalDrawer({
   name,
 
-  //#withDrawer
+  // #withDrawer
   isOpen,
   payload: { manualJournalId },
 }) {
@@ -23,10 +23,7 @@ function ManualJournalDrawer({
       isOpen={isOpen}
       name={name}
       size={'65%'}
-      style={{
-        minWidth: '700px',
-        maxWidth: '900px',
-      }}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
     >
       <DrawerSuspense>
         <ManualJournalDrawerContent manualJournalId={manualJournalId} />

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
 
@@ -14,7 +15,9 @@ export default function PaymentMadeDetailContent({
 }) {
   return (
     <PaymentMadeDetailProvider paymentMadeId={paymentMadeId}>
-      <PaymentMadeDetails />
+      <DrawerBody>
+        <PaymentMadeDetails />
+      </DrawerBody>
     </PaymentMadeDetailProvider>
   );
 }

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import {
   useTransactionsByReference,
   usePaymentMade,
@@ -46,16 +46,18 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
     paymentMade,
     paymentEntries,
   };
+
+  const loading =
+    isTransactionLoading || isPaymentMadeLoading || isPaymentLoading;
+
   return (
-    <DashboardInsider
-      loading={isTransactionLoading || isPaymentMadeLoading || isPaymentLoading}
-    >
+    <DrawerLoading loading={loading}>
       <DrawerHeaderContent
         name="payment-made-detail-drawer"
         title={intl.get('payment_made_details')}
       />
       <PaymentMadeDetailContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js

@@ -20,6 +20,9 @@ import { Icon, FormattedMessage as T } from 'components';
 
 import { compose } from 'utils';
 
+/**
+ * Payment receive actions bar.
+ */
 function PaymentReceiveActionsBar({
   // #withAlertsActions
   openAlert,

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { DrawerBody } from 'components';
 import PaymentReceiveDetail from './PaymentReceiveDetail';
 import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
 
@@ -12,7 +13,9 @@ export default function PaymentReceiveDetailContent({
 }) {
   return (
     <PaymentReceiveDetailProvider paymentReceiveId={paymentReceiveId}>
-      <PaymentReceiveDetail />
+      <DrawerBody>
+        <PaymentReceiveDetail />
+      </DrawerBody>
     </PaymentReceiveDetailProvider>
   );
 }

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useTransactionsByReference, usePaymentReceive } from 'hooks/query';
 
 const PaymentReceiveDetailContext = React.createContext();
@@ -30,16 +30,21 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
   );
 
   // Provider.
-  const provider = { transactions, paymentReceive, paymentReceiveId };
+  const provider = {
+    isPaymentFetching,
+    transactions,
+    paymentReceive,
+    paymentReceiveId,
+  };
 
   return (
-    <DashboardInsider loading={isTransactionLoading || isPaymentLoading}>
+    <DrawerLoading loading={isTransactionLoading || isPaymentLoading}>
       <DrawerHeaderContent
         name="payment-receive-detail-drawer"
         title={intl.get('payment_receive_details')}
       />
       <PaymentReceiveDetailContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 

client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DrawerBody } from 'components';
 
 import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
 
@@ -14,7 +15,9 @@ export default function ReceiptDetailDrawerContent({
 }) {
   return (
     <ReceiptDetailDrawerProvider receiptId={receiptId}>
-      <ReceiptDetail />
+      <DrawerBody>
+        <ReceiptDetail />
+      </DrawerBody>
     </ReceiptDetailDrawerProvider>
   );
 }

client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useTransactionsByReference, useReceipt } from 'hooks/query';
 
 // useTransactionsByReference
@@ -30,21 +30,23 @@ function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
     { enabled: !!receiptId },
   );
 
-  //provider.
+  // Provider.
   const provider = {
     transactions,
     receiptId,
     receipt,
   };
 
+  const loading = isTransactionLoading || isReceiptLoading;
+
   return (
-    <DashboardInsider loading={isTransactionLoading || isReceiptLoading}>
+    <DrawerLoading loading={loading}>
       <DrawerHeaderContent
         name="receipt-detail-drawer"
         title={intl.get('receipt_details')}
       />
       <ReceiptDetailDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }
 const useReceiptDetailDrawerContext = () =>

client/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerContent.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { DrawerBody } from 'components';
 import VendorDetails from './VendorDetails';
 import { VendorDetailsDrawerProvider } from './VendorDetailsDrawerProvider';
 
@@ -12,7 +13,9 @@ export default function VendorDetailsDrawerContent({
 }) {
   return (
     <VendorDetailsDrawerProvider vendorId={vendorId}>
-      <VendorDetails />
+      <DrawerBody>
+        <VendorDetails />
+      </DrawerBody>
     </VendorDetailsDrawerProvider>
   );
 }

client/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerProvider.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useVendor } from 'hooks/query';
 
 const VendorDetailDrawerContext = React.createContext();
@@ -9,12 +9,9 @@ const VendorDetailDrawerContext = React.createContext();
  */
 function VendorDetailsDrawerProvider({ vendorId, ...props }) {
   // Handle fetch vendor details.
-  const { data: vendor, isLoading: isVendorLoading } = useVendor(
-    vendorId,
-    {
-      enabled: !!vendorId,
-    },
-  );
+  const { data: vendor, isLoading: isVendorLoading } = useVendor(vendorId, {
+    enabled: !!vendorId,
+  });
   // Provider.
   const provider = {
     vendor,
@@ -23,13 +20,13 @@ function VendorDetailsDrawerProvider({ vendorId, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isVendorLoading}>
+    <DrawerLoading loading={isVendorLoading}>
       <DrawerHeaderContent
         name="vendor-details-drawer"
         title={vendor?.display_name}
       />
       <VendorDetailDrawerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </DrawerLoading>
   );
 }