feat: add status & opened alert in credit & vendor.

src/containers/Sales/CreditNotes/CreditNotesLanding/components.js

@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  Intent,
-  Tag,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  ProgressBar,
-} from '@blueprintjs/core';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
 
@@ -14,15 +7,14 @@ import { CLASSES } from '../../../../common/classes';
 import {
   FormatDateCell,
   FormattedMessage as T,
-  AppToaster,
   Choose,
   If,
   Icon,
 } from 'components';
-import { formattedAmount, safeCallback, calculateStatus } from 'utils';
+import { safeCallback } from 'utils';
 
 export function ActionsMenu({
-  payload: { onEdit, onDelete, onRefund, onViewDetails },
+  payload: { onEdit, onDelete, onRefund, onOpen, onViewDetails },
   row: { original },
 }) {
   return (
@@ -38,11 +30,21 @@ export function ActionsMenu({
         text={intl.get('credit_note.action.edit_credit_note')}
         onClick={safeCallback(onEdit, original)}
       />
-      <MenuItem
-        icon={<Icon icon="quick-payment-16" />}
-        text={intl.get('credit_note.action.refund_credit_note')}
-        onClick={safeCallback(onRefund, original)}
-      />
+      <If condition={!original.is_closed && !original.is_draft}>
+        <MenuItem
+          icon={<Icon icon="quick-payment-16" />}
+          text={intl.get('credit_note.action.refund_credit_note')}
+          onClick={safeCallback(onRefund, original)}
+        />
+      </If>
+      <If condition={original.is_draft}>
+        <MenuItem
+          icon={<Icon icon={'check'} iconSize={18} />}
+          text={intl.get('mark_as_opened')}
+          onClick={safeCallback(onOpen, original)}
+        />
+      </If>
+
       <MenuItem
         text={intl.get('credit_note.action.delete_credit_note')}
         intent={Intent.DANGER}
@@ -53,6 +55,35 @@ export function ActionsMenu({
   );
 }
 
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(creditNote) {
+  return (
+    <div>
+      <Choose>
+        <Choose.When condition={creditNote.is_open}>
+          <Tag minimal={true} intent={Intent.WARNING}>
+            <T id={'open'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_closed}>
+          <Tag minimal={true} intent={Intent.SUCCESS}>
+            <T id={'closed'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_draft}>
+          <Tag minimal={true}>
+            <T id={'draft'} />
+          </Tag>
+        </Choose.When>
+      </Choose>
+    </div>
+  );
+}
+
 /**
  * Retrieve credit note table columns.
  */
@@ -100,8 +131,8 @@ export function useCreditNoteTableColumns() {
       {
         id: 'status',
         Header: intl.get('status'),
-        // accessor:
-        width: 120, // 160
+        accessor: StatusAccessor,
+        width: 160, // 160
         className: 'status',
         clickable: true,
       },