feat: bill Drawer.

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import BillTransactionDeleteAlert from 'containers/Alerts/Bills/BillTransactionDeleteAlert';
+
+/**
+ * Bill drawer alert.
+ */
+export default function BillDrawerAlerts() {
+  return (
+    <div class="bills-alerts">
+      <BillTransactionDeleteAlert name="transaction-delete" />
+    </div>
+  );
+}

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

@@ -1,16 +1,19 @@
 import React from 'react';
 import { BillDrawerProvider } from './BillDrawerProvider';
 import BillDrawerDetails from './BillDrawerDetails';
+import BillDrawerAlerts from './BillDrawerAlerts';
+
 /**
  * Bill drawer content.
  */
 export default function BillDrawerContent({
   // #ownProp
-  billId,
+  bill,
 }) {
   return (
-    <BillDrawerProvider billId={billId}>
+    <BillDrawerProvider billId={bill}>
       <BillDrawerDetails />
+      <BillDrawerAlerts />
     </BillDrawerProvider>
   );
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { useBillLocatedLandedCost } from 'hooks/query';
 
 const BillDrawerContext = React.createContext();
 
@@ -8,10 +9,18 @@ const BillDrawerContext = React.createContext();
  * Bill drawer provider.
  */
 function BillDrawerProvider({ billId, ...props }) {
+  // Handle fetch bill located landed cost transaction.
+  const { isLoading: isLandedCostLoading, data: transactions } =
+    useBillLocatedLandedCost(billId, {
+      enabled: !!billId,
+    });
+
   //provider.
-  const provider = {};
+  const provider = {
+    transactions,
+  };
   return (
-    <DashboardInsider>
+    <DashboardInsider loading={isLandedCostLoading}>
       <DrawerHeaderContent
         name="bill-drawer"
         title={intl.get('bill_details')}