feat: add quick create & sortable.

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js

@@ -10,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { VendorCreditMenuItem } from './utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -51,6 +52,10 @@ function VendorCreditDetailActionsBar({
     openDialog('refund-vendor-credit', { vendorCreditId });
   };
 
+  const handleReconcileVendorCredit = () => {
+    openDialog('reconcile-vendor-credit', { vendorCreditId });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -77,6 +82,20 @@ function VendorCreditDetailActionsBar({
           intent={Intent.DANGER}
           onClick={handleDeleteVendorCredit}
         />
+        <If
+          condition={
+            !vendorCredit.is_closed &&
+            !vendorCredit.is_draft
+            // vendorCredit.is_published
+          }
+        >
+          <NavbarDivider />
+          <VendorCreditMenuItem
+            payload={{
+              onReconcile: handleReconcileVendorCredit,
+            }}
+          />
+        </If>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/VendorCreditDetailDrawer/utils.js

@@ -1,7 +1,18 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
-import { FormatNumberCell } from '../../../components';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+} from '@blueprintjs/core';
+import {
+  FormatNumberCell,
+  Icon,
+  FormattedMessage as T,
+} from '../../../components';
 
 /**
  * Retrieve vendor credit readonly details entries table columns.
@@ -49,3 +60,26 @@ export const useVendorCreditReadonlyEntriesTableColumns = () =>
     ],
     [],
   );
+
+export const VendorCreditMenuItem = ({ payload: { onReconcile } }) => {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onReconcile}
+            text={intl.get('vendor_credits.action.reconcile_with_bills')}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+};