fix: notes.

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.js

@@ -31,7 +31,7 @@ function VendorCreditNoteFormHeader({
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <VendorCreditNoteFormHeaderFields />
       <PageFormBigNumber
-        label={intl.get('due_amount')}
+        label={intl.get('vendor_credits.label.amount_to_credit')}
         amount={totalAmount}
         currencyCode={base_currency}
       />
@@ -39,6 +39,4 @@ function VendorCreditNoteFormHeader({
   );
 }
 
-export default compose(withCurrentOrganization())(
-  VendorCreditNoteFormHeader,
-);
+export default compose(withCurrentOrganization())(VendorCreditNoteFormHeader);

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

@@ -33,7 +33,7 @@ export function ActionsMenu({
         text={intl.get('vendor_credits.action.edit_vendor_credit')}
         onClick={safeCallback(onEdit, original)}
       />
-      <If condition={!original.is_closed && !original.is_draft}>
+      <If condition={!original.is_closed && original.is_published}>
         <MenuItem
           icon={<Icon icon="quick-payment-16" />}
           text={intl.get('vendor_credits.action.refund_vendor_credit')}
@@ -43,16 +43,17 @@ export function ActionsMenu({
       <If condition={original.is_draft}>
         <MenuItem
           icon={<Icon icon={'check'} iconSize={18} />}
-          text={intl.get('mark_as_opened')}
+          text={intl.get('vendor_credits.action.mark_as_open')}
           onClick={safeCallback(onOpen, original)}
         />
       </If>
-      <MenuItem
-        text={'Reconcile Credit Note With bills'}
-        // icon={<Icon icon="quick-payment-16" />}
-        // text={intl.get('credit_note.action.refund_credit_note')}
-        onClick={safeCallback(onReconcile, original)}
-      />
+      <If condition={!original.is_draft && original.is_published}>
+        <MenuItem
+          // icon={<Icon icon="quick-payment-16" />}
+          text={intl.get('vendor_credits.action.reconcile_with_bills')}
+          onClick={safeCallback(onReconcile, original)}
+        />
+      </If>
       <MenuItem
         text={intl.get('vendor_credits.action.delete_vendor_credit')}
         intent={Intent.DANGER}
@@ -136,6 +137,16 @@ export function useVendorsCreditNoteTableColumns() {
         textOverview: true,
         className: clsx(CLASSES.FONT_BOLD),
       },
+      {
+        id: 'balance',
+        Header: intl.get('balance'),
+        accessor: 'credits_remaining',
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
       {
         id: 'status',
         Header: intl.get('status'),

src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js

@@ -12,6 +12,10 @@ const OpenVendorCreditAlert = React.lazy(() =>
   import('../../Alerts/VendorCeditNotes/VendorCreditOpenedAlert'),
 );
 
+const ReconcileVendorCreditDeleteAlert = React.lazy(() =>
+  import('../../Alerts/VendorCeditNotes/ReconcileVendorCreditDeleteAlert'),
+);
+
 /**
  * Vendor Credit notes alerts.
  */
@@ -28,4 +32,8 @@ export default [
     name: 'refund-vendor-delete',
     component: RefundVendorCreditDeleteAlert,
   },
+  {
+    name: 'reconcile-vendor-delete',
+    component: ReconcileVendorCreditDeleteAlert,
+  },
 ];