From 6573f19ff8f822033235d89c2002ea7a4936a5eb Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Wed, 8 Dec 2021 18:53:14 +0200
Subject: [PATCH] fix: notes.

---
 .../ReconcileCreditNoteFormFloatingActions.js |  6 +--
 .../ReconcileVendorCreditFloatingActions.js   |  7 +--
 .../CreditNoteDetail.js                       |  2 +-
 .../CreditNoteDetailHeader.js                 |  8 ++-
 .../VendorCreditDetail.js                     |  8 ++-
 .../VendorCreditDetailDrawerProvider.js       | 22 +++++++-
 .../VendorCreditDetailHeader.js               |  8 ++-
 .../VendorCreditNoteFormHeader.js             |  6 +--
 .../CreditNotesLanding/components.js          | 27 +++++++---
 .../CreditNotes/VendorCreditNotesAlerts.js    |  8 +++
 .../CreditNoteForm/CreditNoteFormHeader.js    |  2 +-
 .../CreditNotesLanding/components.js          | 29 +++++++----
 src/lang/en/index.json                        | 52 ++++++++++++-------
 .../ReconcileCreditNoteForm.scss              |  4 +-
 .../ReconcileVendorCreditForm.scss            |  4 +-
 15 files changed, 138 insertions(+), 55 deletions(-)

diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFloatingActions.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFloatingActions.js
index 9fb415500..4d3c4f203 100644
--- a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFloatingActions.js
+++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFloatingActions.js
@@ -27,9 +27,6 @@ function ReconcileCreditNoteFormFloatingActions({
   return (
     <div className={Classes.DIALOG_FOOTER}>
       <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
-          <T id={'cancel'} />
-        </Button>
         <Button
           intent={Intent.PRIMARY}
           style={{ minWidth: '95px' }}
@@ -38,6 +35,9 @@ function ReconcileCreditNoteFormFloatingActions({
         >
           {<T id={'save'} />}
         </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
       </div>
     </div>
   );
diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFloatingActions.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFloatingActions.js
index 95dc83c65..82289491c 100644
--- a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFloatingActions.js
+++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFloatingActions.js
@@ -20,12 +20,10 @@ function ReconcileVendorCreditFloatingActions({
   const handleCancelBtnClick = (event) => {
     closeDialog(dialogName);
   };
+
   return (
     <div className={Classes.DIALOG_FOOTER}>
       <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
-          <T id={'cancel'} />
-        </Button>
         <Button
           intent={Intent.PRIMARY}
           style={{ minWidth: '95px' }}
@@ -34,6 +32,9 @@ function ReconcileVendorCreditFloatingActions({
         >
           {<T id={'save'} />}
         </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
       </div>
     </div>
   );
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
index 2ca7747de..af4ad93aa 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
@@ -28,7 +28,7 @@ export default function CreditNoteDetail() {
           panel={<RefundCreditNoteTransactionsTable />}
         />
         <Tab
-          title={intl.get('credit_note.drawer.label_reconcile_transactions')}
+          title={intl.get('credit_note.drawer.label_invoices_reconciled')}
           id={'reconcile_transactions'}
           panel={<ReconcileCreditNoteTransactionsTable />}
         />
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
index 0ec121f61..f70c80411 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
@@ -13,7 +13,7 @@ import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDet
  */
 export default function CreditNoteDetailHeader() {
   const { creditNote } = useCreditNoteDetailDrawerContext();
-
+  
   return (
     <div className={clsx(CreditNoteDetailCls.detail_panel_header)}>
       <DetailsMenu>
@@ -37,13 +37,17 @@ export default function CreditNoteDetailHeader() {
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <DetailItem
+          label={intl.get('credit_note.drawer.label_credits_remaining')}
+          children={creditNote.formatted_credits_remaining}
+        />
         <DetailItem
           label={intl.get('note')}
           children={defaultTo(creditNote.note, '-')}
         />
 
         <DetailItem
-          label={<T id={'credit_note.drawer.label_create_at'} />}
+          label={<T id={'credit_note.drawer.label_created_at'} />}
           children={<FormatDate value={creditNote.created_at} />}
         />
       </DetailsMenu>
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
index cbc825676..eb0eafb42 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
@@ -5,6 +5,7 @@ import { DrawerMainTabs } from 'components';
 
 import VendorCreditDetailPanel from './VendorCreditDetailPanel';
 import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
+import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
 import clsx from 'classnames';
 
 import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
@@ -22,10 +23,15 @@ export default function VendorCreditDetail() {
           panel={<VendorCreditDetailPanel />}
         />
         <Tab
-          title={intl.get('credit_note.drawer.label_refund_transactions')}
+          title={intl.get('vendor_credit.drawer.label_refund_transactions')}
           id={'refund_transactions'}
           panel={<RefundVendorCreditTransactionsTable />}
         />
+        <Tab
+          title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
+          id={'reconcile_transactions'}
+          panel={<ReconcileVendorCreditTransactionsTable />}
+        />
       </DrawerMainTabs>
     </div>
   );
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
index eb15c6d20..cea6ac07b 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
@@ -1,6 +1,10 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { useVendorCredit, useRefundVendorCredit } from 'hooks/query';
+import {
+  useVendorCredit,
+  useRefundVendorCredit,
+  useReconcileVendorCredits,
+} from 'hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
 
 const VendorCreditDetailDrawerContext = React.createContext();
@@ -24,9 +28,19 @@ function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
     enabled: !!vendorCreditId,
   });
 
+  // Handle fetch refund credit note.
+  const {
+    data: reconcileVendorCredits,
+    isFetching: isReconcileVendorCreditFetching,
+    isLoading: isReconcileVendorCreditLoading,
+  } = useReconcileVendorCredits(vendorCreditId, {
+    enabled: !!vendorCreditId,
+  });
+
   const provider = {
     vendorCredit,
     refundVendorCredit,
+    reconcileVendorCredits,
     isRefundVendorCreditLoading,
     isRefundVendorCreditFetching,
     vendorCreditId,
@@ -34,7 +48,11 @@ function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
 
   return (
     <DrawerLoading
-      loading={isVendorCreditLoading || isRefundVendorCreditLoading}
+      loading={
+        isVendorCreditLoading ||
+        isRefundVendorCreditLoading ||
+        isReconcileVendorCreditLoading
+      }
     >
       <DrawerHeaderContent
         name="vendor-credit-detail-drawer"
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
index 3ecfd6afb..0ccbc1a88 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
@@ -36,13 +36,19 @@ export default function VendorCreditDetailHeader() {
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <DetailItem
+          label={intl.get('vendor_credit.drawer.label_credits_remaining')}
+          children={vendorCredit.credits_remaining}
+          // children={vendorCredit.formatted_credits_remaining}
+        />
+
         <DetailItem
           label={intl.get('note')}
           children={defaultTo(vendorCredit.note, '-')}
         />
 
         <DetailItem
-          label={<T id={'vendor_credit.drawer.label_create_at'} />}
+          label={<T id={'vendor_credit.drawer.label_created_at'} />}
           children={<FormatDate value={vendorCredit.created_at} />}
         />
       </DetailsMenu>
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.js
index e8a552268..921100831 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.js
+++ b/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);
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
index 196287682..88a1c1f40 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
+++ b/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'),
diff --git a/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js b/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
index 9b4ecceba..05bfbfef6 100644
--- a/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
+++ b/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,
+  },
 ];
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.js
index 8407cb027..6c6690662 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.js
@@ -31,7 +31,7 @@ function CreditNoteFormHeader({
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <CreditNoteFormHeaderFields />
       <PageFormBigNumber
-        label={intl.get('due_amount')}
+        label={intl.get('credit_note.label_amount_to_credit')}
         amount={totalAmount}
         currencyCode={base_currency}
       />
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
index 81adb4906..7d2860803 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
@@ -30,7 +30,7 @@ export function ActionsMenu({
         text={intl.get('credit_note.action.edit_credit_note')}
         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('credit_note.action.refund_credit_note')}
@@ -40,16 +40,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('credit_note.action.make_as_open')}
           onClick={safeCallback(onOpen, original)}
         />
       </If>
-      <MenuItem
-        text={'Reconcile Credit Note With Invoice'}
-        // 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
+          text={intl.get('credit_note.action.reconcile_with_invoices')}
+          // icon={<Icon icon="quick-payment-16" />}
+          onClick={safeCallback(onReconcile, original)}
+        />
+      </If>
       <MenuItem
         text={intl.get('credit_note.action.delete_credit_note')}
         intent={Intent.DANGER}
@@ -133,6 +134,16 @@ export function useCreditNoteTableColumns() {
         textOverview: true,
         className: clsx(CLASSES.FONT_BOLD),
       },
+      {
+        id: 'balance',
+        Header: intl.get('balance'),
+        accessor: 'formatted_credits_remaining',
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
       {
         id: 'status',
         Header: intl.get('status'),
@@ -144,7 +155,7 @@ export function useCreditNoteTableColumns() {
       {
         id: 'reference_no',
         Header: intl.get('reference_no'),
-        accessor: 'reference_no',
+        accessor: 'reference_no', // or note
         width: 90,
         className: 'reference_no',
         clickable: true,
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index f556c159e..31ac4a1ce 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -714,7 +714,7 @@
   "mark_as_delivered": "Mark as delivered",
   "deliver": "Deliver",
   "mark_as_closed": "Mark as closed",
-  "mark_as_opened": "Mark as opened",
+  "mark_as_open": "Mark as open",
   "save_close": "Save & Close",
   "save_open": "Save & Open",
   "close_and_new": "Close and new",
@@ -1489,17 +1489,21 @@
   "roles.error.the_submit_role_has_invalid_permissions": "The submit role has invalid permissions.",
   "roles.error.you_cannot_delete_role_that_associated_to_users": "You cannot delete role that associated to users",
   "sidebar_credit_note": "Credit Notes",
-  "credit_note.label_create_note_list": "Credit Note List",
+  "credit_note.label_create_note_list": "Credit Notes List",
   "credit_note.label.new_credit_note": "New Credit Note",
   "credit_note.label.edit_credit_note": "Edit Credit Note",
-  "credit_note.action.edit_credit_note": "Edit Credit note",
+  "credit_note.action.edit_credit_note": "Edit Credit Note",
   "credit_note.action.refund_credit_note": "Refund Credit note",
-  "credit_note.action.delete_credit_note": "Delete Credit note",
+  "credit_note.action.reconcile_with_invoices": "Reconcile with Invoices",
+  "credit_note.action.make_as_open": "Mark as Open",
+  "credit_note.action.delete_credit_note": "Delete Credit Note",
   "credit_note.column.credit_note_no": "Credit Note #",
   "credit_note.column.credit_date": "Credit Date",
   "credit_note.empty_status_description": "Record sales transactions from customers who make no or partial payment and help you keep track of accounts receivable with a customer.",
   "credit_note.label_credit_note_date": "Credit Note date",
   "credit_note.label_credit_note": "Credit Note #",
+  "credit_note.label_amount_to_credit": "Amount to credit",
+
   "credit_note.label_credit_note_details": "Credit Note details",
   "credit_note.label_customer_note": "Customer notes",
   "credit_note.once_delete_this_credit_note": "Once you delete this credit note, you won't be able to restore it later. Are you sure you want to delete this credit note?",
@@ -1510,11 +1514,14 @@
   "vendor_credits.lable_vendor_credit_list": "Vendor Credits List",
   "vendor_credits.label.new_vendor_credit": "New Vendor Credit",
   "vendor_credits.label.edit_vendor_credit": "Edit Vendor Credit",
+  "vendor_credits.label.amount_to_credit": "Amount to credit",
   "vendor_credits.column.vendor_credit_no": "Vendor Credit #",
   "vendor_credits.action.new_vendor_credit": "New Vendor Credit",
-  "vendor_credits.action.edit_vendor_credit": "Edit Vendot Credit",
-  "vendor_credits.action.refund_vendor_credit": "Refund Vendot Credit",
-  "vendor_credits.action.delete_vendor_credit": "Delete Vendot Credit",
+  "vendor_credits.action.edit_vendor_credit": "Edit Vendor Credit",
+  "vendor_credits.action.refund_vendor_credit": "Refund Vendor Credit",
+  "vendor_credits.action.delete_vendor_credit": "Delete Vendor Credit",
+  "vendor_credits.action.mark_as_open": "Make as Open",
+  "vendor_credits.action.reconcile_with_bills": "Reconcile with Bills",
   "vendor_credits.success_message": "The vendor credit has been created successfully",
   "vendor_credits.edit_success_message": "The vendor credit has been edited successfully.",
   "vendor_credits.alert.success_message": "The given vendor credit has been deleted successfully.",
@@ -1530,17 +1537,21 @@
   "credit_note.drawer_credit_note_detail": "Credit Note details",
   "credit_note.drawer.label_credit_note_no": "Credit Note #",
   "credit_note.drawer.label_credit_note_date": "Credit Date",
-  "credit_note.drawer.label_create_at": "Create at",
+  "credit_note.drawer.label_credits_remaining": "Credits Remaining",
+  "credit_note.drawer.label_created_at": "Created at",
   "credit_note.drawer.label_total": "TOTAL",
   "credit_note.drawer.label_subtotal": "Subtotal",
-  "credit_note.drawer.label_refund_transactions": "Refund transactions",
-  "credit_note.drawer.label_reconcile_transactions": "Reconcile transactions",
+  "credit_note.drawer.label_refund_transactions": "Refund Transactions",
+  "credit_note.drawer.label_invoices_reconciled": "Invoices Reconciled",
   "vendor_credit.drawer_vendor_credit_detail": "Vendor Credit details",
   "vendor_credit.drawer.label_vendor_credit_no": "Vendor Credit #",
   "vendor_credit.drawer.label_vendor_credit_date": "Vendor Credit Date",
-  "vendor_credit.drawer.label_create_at": "Create at",
+  "vendor_credit.drawer.label_credits_remaining": "Credits Remaining",
+  "vendor_credit.drawer.label_created_at": "Created at",
   "vendor_credit.drawer.label_total": "TOTAL",
   "vendor_credit.drawer.label_subtotal": "Subtotal",
+  "vendor_credit.drawer.label_refund_transactions":"Refund Transactions",
+  "vendor_credit.drawer.label_bills_reconciled":"Bills Reconciled",
   "landed_cost.dialog.label_select_transaction": "Select transaction",
   "landed_cost.dialog.label_select_transaction_entry": "Select transaction entry",
   "refund_credit_note.dialog.label": "Refund Credit Note",
@@ -1568,7 +1579,7 @@
   "credit_note_opened.are_sure_to_open_this_credit": "Are you sure you want to open this credit note?",
   "vendor_credit_opened.alert.success_message": "The  vendor credit has been opened successfully",
   "vendor_credit_opened.are_sure_to_open_this_credit": "Are you sure you want to open this vendor credit?",
-  "reconcile_credit_note.label": "Reconcile Credit Note With Invoices",
+  "reconcile_credit_note.label": "Reconcile credit note with invoices.",
   "reconcile_credit_note.dialog.total_amount_to_credit": "Total amount to credit",
   "reconcile_credit_note.dialog.remaining_credits": "Remaining credits",
   "reconcile_credit_note.column.remaining_amount": "Remaining amount",
@@ -1582,10 +1593,15 @@
   "invoices.error.you_couldn_t_delete_sale_invoice_that_has_reconciled": "You couldn't delete sale invoice that has reconciled with credit note transaction.",
   "reconcile_vendor_credit.dialog.label": "Reconcile Credit Note with Bills",
   "reconcile_vendor_credit.dialog.success_message": "The vendor credit has been applied to the given bills successfully",
-  "reconcile_vendor_credit.alert.there_is_no_open_bills":"There is no open bills associated to credit note vendor.",
-  "reconcile_vendor_credit.dialog.total_amount_to_credit":"Total amount to credit",
-  "reconcile_vendor_credit.dialog.remaining_credits":"Remaining amount",
-  "reconcile_vendor_credit.column.bill_number":"Bill #",
-  "reconcile_vendor_credit.column.remaining_amount":"Remaining amount",
-  "reconcile_vendor_credit.column.amount_to_credit":"Amount to credit"
+  "reconcile_vendor_credit.alert.there_is_no_open_bills": "There is no open bills associated to credit note vendor.",
+  "reconcile_vendor_credit.dialog.total_amount_to_credit": "Total amount to credit",
+  "reconcile_vendor_credit.dialog.remaining_credits": "Remaining amount",
+  "reconcile_vendor_credit.column.bill_number": "Bill #",
+  "reconcile_vendor_credit.column.remaining_amount": "Remaining amount",
+  "reconcile_vendor_credit.column.amount_to_credit": "Amount to credit",
+  "vendor_credit.error.you_couldn_t_delete_vendor_credit_has_reconciled": "You couldn't delete vendor credit has reconciled with bills transactions.",
+  "vendor_credit.error.you_couldn_t_delete_vendor_credit_that_has_associated_refund": "You couldn't delete vendor credit that has associated refund transactions.",
+  "bills.error.you_couldn_t_delete_bill_has_reconciled_with_vendor_credit": "You couldn't delete bill has reconciled with vendor credit transaction.",
+  "reconcile_vendor_credit.alert.success_message": "The applied vendor credit to bill has been deleted successfully",
+  "reconcile_vendor_credit.alert.once_you_delete_this_reconcile_vendor_credit": "Once you delete this reconcile vendor credit note, you won't be able to restore it later. Are you sure you want to delete this reconcile vendor credit note?"
 }
\ No newline at end of file
diff --git a/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
index a87f6fa0b..3a0e5c363 100644
--- a/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
+++ b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
@@ -1,5 +1,5 @@
 .dialog--reconcile-credit-form {
-  width: 800px;
+  width: 850px;
 
   .bp3-dialog-body {
     .footer {
@@ -66,6 +66,8 @@
     font-size: 14px;
   }
   .bp3-dialog-footer {
+    display: flex;
+    justify-content: flex-start;
     padding-top: 10px;
   }
 }
diff --git a/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss b/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss
index c04f7bc27..a5c09945f 100644
--- a/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss
+++ b/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss
@@ -1,5 +1,5 @@
 .dialog--reconcile-vendor-credit-form {
-  width: 800px;
+  width: 850px;
 
   .bp3-dialog-body {
     .footer {
@@ -67,6 +67,8 @@
     font-size: 14px;
   }
   .bp3-dialog-footer {
+    display: flex;
+    justify-content: flex-start;
     padding-top: 10px;
   }
 }