feat: add quick create & sortable.

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js

@@ -10,18 +10,13 @@ import {
 } from '@blueprintjs/core';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+import { CreditNoteMenuItem } from './utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import {
-  Icon,
-  FormattedMessage as T,
-  If,
-  MoreMenuItems,
-  Can,
-} from 'components';
+import { Icon, FormattedMessage as T, If, Can } from 'components';
 
 import { compose } from 'utils';
 
@@ -52,6 +47,10 @@ function CreditNoteDetailActionsBar({
     openDialog('refund-credit-note', { creditNoteId });
   };
 
+  const handleReconcileCreditNote = () => {
+    openDialog('reconcile-credit-note', { creditNoteId });
+  };
+
   // Handle delete credit note.
   const handleDeleteCreditNote = () => {
     openAlert('credit-note-delete', { creditNoteId });
@@ -83,6 +82,20 @@ function CreditNoteDetailActionsBar({
           intent={Intent.DANGER}
           onClick={handleDeleteCreditNote}
         />
+        <If
+          condition={
+            !creditNote.is_draft &&
+            !creditNote.is_closed
+            // creditNote.is_published
+          }
+        >
+          <NavbarDivider />
+          <CreditNoteMenuItem
+            payload={{
+              onReconcile: handleReconcileCreditNote,
+            }}
+          />
+        </If>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/CreditNoteDetailDrawer/utils.js

@@ -1,6 +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 {
+  Icon,
+  FormattedMessage as T,
+  FormatNumberCell,
+} from '../../../components';
 
 export const useCreditNoteReadOnlyEntriesColumns = () =>
   React.useMemo(
@@ -45,3 +57,26 @@ export const useCreditNoteReadOnlyEntriesColumns = () =>
     ],
     [],
   );
+
+export const CreditNoteMenuItem = ({ payload: { onReconcile } }) => {
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onReconcile}
+            text={<T id={'credit_note.action.reconcile_with_invoices'} />}
+          />
+        </Menu>
+      }
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+};