feat: item payment transactions.

src/common/itemPaymentTranactionsOption.js

@@ -0,0 +1,8 @@
+import intl from 'react-intl-universal';
+
+export default [
+  { name: 'invoices', label: intl.get('invoices') },
+  { name: 'estimates', label: intl.get('estimates') },
+  { name: 'receipts', label: intl.get('receipts') },
+  { name: 'bills', label: intl.get('bills') },
+];

src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js

@@ -1,10 +1,7 @@
 import React from 'react';
 
+import ItemDetailTab from './ItemDetailTab';
 import ItemDetailActionsBar from './ItemDetailActionsBar';
-import ItemDetailHeader from './ItemDetailHeader';
-import { ItemPaymentTransactions } from './ItemPaymentTransactions';
-
-import { Card } from 'components';
 
 /**
  * Item detail.
@@ -13,10 +10,7 @@ export default function ItemDetail() {
   return (
     <div className="item-drawer">
       <ItemDetailActionsBar />
-      <ItemPaymentTransactions /> 
+      <ItemDetailTab />
-      <Card>
-        <ItemDetailHeader />
-      </Card>
     </div>
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js

@@ -8,6 +8,9 @@ const ItemDetailDrawerContext = React.createContext();
  * Item detail provider
  */
 function ItemDetailDrawerProvider({ itemId, ...props }) {
+  // transaction type payload.
+  const [value, setValue] = React.useState('invoices');
+
   // Fetches the given item detail.
   const { isLoading: isItemLoading, data: item } = useItem(itemId, {
     enabled: !!itemId,
@@ -18,6 +21,8 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
     item,
     itemId,
     isItemLoading,
+    value,
+    setValue,
   };
 
   return (

src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import classNames from 'classnames';
 
-import { If, DetailsMenu, DetailItem } from 'components';
+import { If, DetailsMenu, DetailItem, Card } from 'components';
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
 
 /**
@@ -13,6 +13,7 @@ export default function ItemDetailHeader() {
   const { item } = useItemDetailDrawerContext();
 
   return (
+    <Card>
       <div class="item-drawer__content">
         <DetailsMenu direction={'vertical'}>
           <DetailItem
@@ -78,5 +79,6 @@ export default function ItemDetailHeader() {
           />
         </DetailsMenu>
       </div>
+    </Card>
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import { DrawerMainTabs, FormattedMessage as T } from 'components';
+import { ItemPaymentTransactions } from './ItemPaymentTransactions';
+import ItemDetailHeader from './ItemDetailHeader';
+
+
+export default function ItemDetailTab() {
+  return (
+    <DrawerMainTabs renderActiveTabPanelOnly={true}>
+      <Tab
+        id={'overview'}
+        title={<T id={'overview'} />}
+        panel={<ItemDetailHeader />}
+      />
+      <Tab
+        id={'transactions'}
+        title={<T id={'transactions'} />}
+        panel={<ItemPaymentTransactions />}
+      />
+    </DrawerMainTabs>
+  );
+}

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,8 +22,6 @@ export default function BillPaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
     <DataTable
       columns={columns}
       data={paymentTransactions}
@@ -31,7 +29,5 @@ export default function BillPaymentTransactions() {
       headerLoading={isBillTransactionsLoading}
       progressBarLoading={isBillTransactionFetching}
     />
-      </Card>
-    </div>
   );
 }

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,8 +22,6 @@ export default function EstimatePaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
     <DataTable
       columns={columns}
       data={paymentTransactions}
@@ -31,7 +29,5 @@ export default function EstimatePaymentTransactions() {
       headerLoading={isEstimateTransactionsLoading}
       progressBarLoading={isEstimateTransactionFetching}
     />
-      </Card>
-    </div>
   );
 }

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,8 +22,6 @@ export default function InvoicePaymentTransactionsTable() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
     <DataTable
       columns={columns}
       data={paymentTransactions}
@@ -31,7 +29,5 @@ export default function InvoicePaymentTransactionsTable() {
       headerLoading={isInvoiceTransactionsLoading}
       progressBarLoading={isInvoiceTransactionFetching}
     />
-      </Card>
-    </div>
   );
 }

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,8 +22,6 @@ export default function ReceiptPaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
     <DataTable
       columns={columns}
       data={paymentTransactions}
@@ -31,7 +29,5 @@ export default function ReceiptPaymentTransactions() {
       headerLoading={isReceiptTransactionsLoading}
       progressBarLoading={isReceiptTransactionFetching}
     />
-      </Card>
-    </div>
   );
 }

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

@@ -1,34 +1,30 @@
 import React from 'react';
-import { Tab } from '@blueprintjs/core';
+import styled from 'styled-components';
-import { DrawerMainTabs, FormattedMessage as T } from 'components';
+import { Card, FormattedMessage as T } from 'components';
-import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
+import { ItemManuTransaction } from './utils';
-import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
+import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
-import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
 
 export const ItemPaymentTransactions = () => {
+  const { value } = useItemDetailDrawerContext();
+
   return (
-    <DrawerMainTabs renderActiveTabPanelOnly={true}>
+    <Card>
-      <Tab
+      <ItemManuTransactions>
-        id={'invoice'}
+        <T id={'item.drawer_transactions_by'} />
-        title={<T id={'invoice'} />}
+        <ItemManuTransaction />
-        panel={<InvoicePaymentTransactionsTable />}
+      </ItemManuTransactions>
-      />
+      <ItemPaymentTransactionContent tansactionType={value} />
-      <Tab
+    </Card>
-        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>
   );
 };
+
+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>
+  );
+};

src/style/components/Drawers/ItemDrawer.scss

@@ -38,12 +38,9 @@
       }
     }
   }
-  &__table {
-    .card {
-      padding: 12px 15px !important;
-    }
 
   .table {
+    margin-top: 8px;
     .tbody,
     .thead {
       .tr .th {
@@ -62,5 +59,4 @@
       }
     }
   }
-  }
 }