feat: item payment transactions.

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useItemAssociatedBillTransactions } from 'hooks/query';
 import { useBillTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function BillPaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isBillTransactionsLoading}
-          headerLoading={isBillTransactionsLoading}
-          progressBarLoading={isBillTransactionFetching}
-        />
-      </Card>
-    </div>
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isBillTransactionsLoading}
+      headerLoading={isBillTransactionsLoading}
+      progressBarLoading={isBillTransactionFetching}
+    />
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useItemAssociatedEstimateTransactions } from 'hooks/query';
 import { useEstimateTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function EstimatePaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isEstimateTransactionsLoading}
-          headerLoading={isEstimateTransactionsLoading}
-          progressBarLoading={isEstimateTransactionFetching}
-        />
-      </Card>
-    </div>
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isEstimateTransactionsLoading}
+      headerLoading={isEstimateTransactionsLoading}
+      progressBarLoading={isEstimateTransactionFetching}
+    />
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useInvoicePaymentTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function InvoicePaymentTransactionsTable() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isInvoiceTransactionsLoading}
-          headerLoading={isInvoiceTransactionsLoading}
-          progressBarLoading={isInvoiceTransactionFetching}
-        />
-      </Card>
-    </div>
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isInvoiceTransactionsLoading}
+      headerLoading={isInvoiceTransactionsLoading}
+      progressBarLoading={isInvoiceTransactionFetching}
+    />
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
+import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
+import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
+import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
+
+export default function ItemPaymentTransactionsContent({ tansactionType }) {
+  const handleType = () => {
+    switch (tansactionType) {
+      case 'invoices':
+        return <InvoicePaymentTransactionsTable />;
+      case 'estimates':
+        return <EstimatePaymentTransactionsTable />;
+      case 'receipts':
+        return <ReceiptPaymentTransactionsTable />;
+      case 'bills':
+        return <BillPaymentTransactionsTable />;
+    }
+  };
+  return handleType();
+}

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useItemAssociatedReceiptTransactions } from 'hooks/query';
 import { useReceiptTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function ReceiptPaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isReceiptTransactionsLoading}
-          headerLoading={isReceiptTransactionsLoading}
-          progressBarLoading={isReceiptTransactionFetching}
-        />
-      </Card>
-    </div>
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isReceiptTransactionsLoading}
+      headerLoading={isReceiptTransactionsLoading}
+      progressBarLoading={isReceiptTransactionFetching}
+    />
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js

@@ -1,34 +1,30 @@
 import React from 'react';
-import { Tab } from '@blueprintjs/core';
-import { DrawerMainTabs, FormattedMessage as T } from 'components';
-import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
-import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
-import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
-import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
+import styled from 'styled-components';
+import { Card, FormattedMessage as T } from 'components';
+import { ItemManuTransaction } from './utils';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
 
 export const ItemPaymentTransactions = () => {
+  const { value } = useItemDetailDrawerContext();
+
   return (
-    <DrawerMainTabs renderActiveTabPanelOnly={true}>
-      <Tab
-        id={'invoice'}
-        title={<T id={'invoice'} />}
-        panel={<InvoicePaymentTransactionsTable />}
-      />
-      <Tab
-        id={'estiamte'}
-        title={<T id={'estimate_'} />}
-        panel={<EstimatePaymentTransactionsTable />}
-      />
-      <Tab
-        id={'receipt'}
-        title={<T id={'receipt_'} />}
-        panel={<ReceiptPaymentTransactionsTable />}
-      />
-      <Tab
-        id={'bill'}
-        title={'Bill'}
-        panel={<BillPaymentTransactionsTable />}
-      />
-    </DrawerMainTabs>
+    <Card>
+      <ItemManuTransactions>
+        <T id={'item.drawer_transactions_by'} />
+        <ItemManuTransaction />
+      </ItemManuTransactions>
+      <ItemPaymentTransactionContent tansactionType={value} />
+    </Card>
   );
 };
+
+const ItemManuTransactions = styled.div`
+  display: flex;
+  align-items: center;
+  color: #727983;
+  .bp3-button {
+    padding-left: 6px;
+    font-weight: 700;
+  }
+`;

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  Button,
+  MenuItem,
+  Menu,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import transactions from '../../../../common/itemPaymentTranactionsOption';
+
+export const ItemManuTransaction = () => {
+  const { value, setValue } = useItemDetailDrawerContext();
+
+  // const handleClickItem = (item) => {
+  //   onChange && onChange(item);
+  // };
+
+  const content = transactions.map(({ name, label }) => (
+    <MenuItem onClick={() => setValue(name)} text={label} />
+  ));
+
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={<Menu>{content}</Menu>}
+    >
+      <Button minimal={true} text={<T id={value} />} rightIcon={'caret-down'} />
+    </Popover>
+  );
+};