fix: fix notes.

src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { FastField, useFormikContext } from 'formik';
 import { Classes } from '@blueprintjs/core';
 import { T, TotalLines, TotalLine } from 'components';
-import { getEntriesTotal } from 'containers/Entries/utils';
+import { sumBy, subtract } from 'lodash';
 import ReconcileCreditNoteEntriesTable from './ReconcileCreditNoteEntriesTable';
 import { useReconcileCreditNoteContext } from './ReconcileCreditNoteFormProvider';
 import { formattedAmount } from 'utils';
@@ -12,19 +12,32 @@ import { formattedAmount } from 'utils';
  */
 export default function ReconcileCreditNoteFormFields() {
   const {
-    creditNote: { formatted_credits_remaining, currency_code },
+    creditNote: {
+      formatted_credits_remaining,
+      credits_remaining,
+      currency_code,
+    },
   } = useReconcileCreditNoteContext();
 
   const { values } = useFormikContext();
 
   // Calculate the total amount.
-  const totalAmount = React.useMemo(
+  const totalAmount = React.useMemo(() => {
-    () => getEntriesTotal(values.entries),
+    const total = sumBy(values.entries, 'amount');
-    [values.entries],
+    return subtract(credits_remaining, total);
-  );
+  }, [values.entries]);
 
   return (
     <div className={Classes.DIALOG_BODY}>
+      <div className="credit-remaining">
+        <div className="credit-remaining__label">
+          <T id={'reconcile_credit_note.dialog.credits_balance'} />
+        </div>
+        <div className="credit-remaining__balance">
+          {formatted_credits_remaining}
+        </div>
+      </div>
+
       {/*------------ Reconcile credit entries table -----------*/}
       <FastField name={'entries'}>
         {({
@@ -50,7 +63,7 @@ export default function ReconcileCreditNoteFormFields() {
             value={formattedAmount(totalAmount, currency_code)}
           />
           <TotalLine
-            title={<T id={'reconcile_credit_note.dialog.remaining_credits'}/>}
+            title={<T id={'reconcile_credit_note.dialog.remaining_credits'} />}
             value={formatted_credits_remaining}
           />
         </TotalLines>

src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormFields.js

@@ -1,25 +1,40 @@
 import React from 'react';
 import { FastField, useFormikContext } from 'formik';
 import { Classes } from '@blueprintjs/core';
+import { sumBy, subtract } from 'lodash';
 import { T, TotalLines, TotalLine } from 'components';
-import { getEntriesTotal } from 'containers/Entries/utils';
 import ReconcileVendorCreditEntriesTable from './ReconcileVendorCreditEntriesTable';
 import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider';
 import { formattedAmount } from 'utils';
 
 export default function ReconcileVendorCreditFormFields() {
-  const { vendorCredit } = useReconcileVendorCreditContext();
+  const {
+    vendorCredit: {
+      currency_code,
+      credits_remaining,
+      formatted_credits_remaining,
+    },
+  } = useReconcileVendorCreditContext();
 
   const { values } = useFormikContext();
 
   // Calculate the total amount.
-  const totalAmount = React.useMemo(
+  const totalAmount = React.useMemo(() => {
-    () => getEntriesTotal(values.entries),
+    const total = sumBy(values.entries, 'amount');
-    [values.entries],
+    return subtract(credits_remaining, total);
-  );
+  }, [values.entries]);
 
   return (
     <div className={Classes.DIALOG_BODY}>
+      <div className="credit-remaining">
+        <div className="credit-remaining__label">
+          <T id={'reconcile_vendor_note.dialog.credits_balance'} />
+        </div>
+        <div className="credit-remaining__balance">
+          {formatted_credits_remaining}
+        </div>
+      </div>
+
       <FastField name={'entries'}>
         {({
           form: { setFieldValue, values },
@@ -41,13 +56,13 @@ export default function ReconcileVendorCreditFormFields() {
             title={
               <T id={'reconcile_vendor_credit.dialog.total_amount_to_credit'} />
             }
-            value={formattedAmount(totalAmount, vendorCredit.currency_code)}
+            value={formattedAmount(totalAmount, currency_code)}
           />
           <TotalLine
             title={
               <T id={'reconcile_vendor_credit.dialog.remaining_credits'} />
             }
-            value={vendorCredit.formatted_credits_remaining}
+            value={formatted_credits_remaining}
           />
         </TotalLines>
       </div>

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js

@@ -3,6 +3,7 @@ import intl from 'react-intl-universal';
 import {
   useCreditNote,
   useRefundCreditNote,
+  useReconcileCreditNote,
   useReconcileCreditNotes,
 } from 'hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
@@ -33,15 +34,21 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
   // Handle fetch refund credit note.
   const {
     data: reconcileCreditNotes,
-    isFetching: isReconcileCreditNoteFetching,
     isLoading: isReconcileCreditNoteLoading,
   } = useReconcileCreditNotes(creditNoteId, {
     enabled: !!creditNoteId,
   });
 
+  // Handle fetch reconcile credit note details.
+  const { isLoading: isReconcileCreditLoading, data: reconcileCreditNote } =
+    useReconcileCreditNote(creditNoteId, {
+      enabled: !!creditNoteId,
+    });
+
   const provider = {
     creditNote,
     refundCreditNote,
+    reconcileCreditNote,
     reconcileCreditNotes,
 
     isRefundCreditNoteLoading,
@@ -54,7 +61,8 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
       loading={
         isCreditNoteLoading ||
         isRefundCreditNoteLoading ||
-        isReconcileCreditNoteLoading
+        isReconcileCreditNoteLoading ||
+        isReconcileCreditLoading
       }
     >
       <DrawerHeaderContent

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js

@@ -34,12 +34,16 @@ export default function CreditNoteDetailHeader() {
             <FormatDate value={creditNote.formatted_credit_note_date} />
           }
         />
+        <DetailItem
+          label={intl.get('credit_note.drawer.label_credits_remaining')}
+          children={creditNote.formatted_credits_remaining}
+        />
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
         <DetailItem
-          label={intl.get('credit_note.drawer.label_credits_remaining')}
+          label={intl.get('reference')}
-          children={creditNote.formatted_credits_remaining}
+          children={creditNote.reference_no}
         />
         <DetailItem
           label={intl.get('note')}

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js

@@ -33,13 +33,16 @@ export default function VendorCreditDetailHeader() {
             <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
           }
         />
+        <DetailItem
+          label={intl.get('vendor_credit.drawer.label_credits_remaining')}
+          children={vendorCredit.formatted_credits_remaining}
+        />
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
         <DetailItem
-          label={intl.get('vendor_credit.drawer.label_credits_remaining')}
+          label={intl.get('reference')}
-          children={vendorCredit.credits_remaining}
+          children={vendorCredit.reference_no}
-          // children={vendorCredit.formatted_credits_remaining}
         />
 
         <DetailItem

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

@@ -67,7 +67,7 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
   return (
     <DashboardInsider
       loading={isItemsLoading || isVendorsLoading || isVendorCreditLoading}
-      name={'vendor-credits-form'}
+      name={'vendor-credit-form'}
     >
       <VendorCreditNoteFormContext.Provider value={provider} {...props} />
     </DashboardInsider>

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

@@ -35,7 +35,7 @@ export const defaultVendorsCreditNote = {
   vendor_credit_no_manually: false,
   open: '',
   vendor_credit_date: moment(new Date()).format('YYYY-MM-DD'),
-  // reference_no: '',
+  reference_no: '',
   note: '',
   entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
 };

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

@@ -140,7 +140,7 @@ export function useVendorsCreditNoteTableColumns() {
       {
         id: 'balance',
         Header: intl.get('balance'),
-        accessor: 'credits_remaining',
+        accessor: 'formatted_credits_remaining',
         width: 120,
         align: 'right',
         clickable: true,

src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js

@@ -73,7 +73,7 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
   return (
     <DashboardInsider
       loading={isItemsLoading || isCustomersLoading || isCreditNoteLoading}
-      name={'credit-notes-form'}
+      name={'credit-note-form'}
     >
       <CreditNoteFormContext.Provider value={provider} {...props} />
     </DashboardInsider>

src/containers/Sales/CreditNotes/CreditNoteForm/utils.js

@@ -36,7 +36,7 @@ export const defaultCreditNote = {
   credit_note_number: '',
   credit_note_no_manually: false,
   open: '',
-  // reference_no: '',
+  reference_no: '',
   note: '',
   terms_conditions: '',
   entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],

src/lang/en/index.json

@@ -1581,6 +1581,7 @@
   "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.dialog.total_amount_to_credit": "Total amount to credit",
+  "reconcile_credit_note.dialog.credits_balance": "Credits balance:",
   "reconcile_credit_note.dialog.remaining_credits": "Remaining credits",
   "reconcile_credit_note.column.remaining_amount": "Remaining amount",
   "reconcile_credit_note.column.amount_to_credit": "Amount to credit",
@@ -1595,6 +1596,7 @@
   "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_note.dialog.credits_balance": "Credits balance:",
   "reconcile_vendor_credit.dialog.remaining_credits": "Remaining amount",
   "reconcile_vendor_credit.column.bill_number": "Bill #",
   "reconcile_vendor_credit.column.remaining_amount": "Remaining amount",

src/style/pages/CreditNote/PageForm.scss

@@ -36,7 +36,7 @@ body.page-credit-note-edit {
     }
   }
   #{$self}__footer {
-    .form-group--customer_notes,
+    .form-group--note,
     .form-group--terms_conditions {
       max-width: 450px;
       width: 100%;

src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss

@@ -62,6 +62,20 @@
     }
   }
 
+  .credit-remaining {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 5px;
+    padding-bottom: 15px;
+    &__label {
+    }
+    &__balance {
+      font-weight: 500;
+      color: #343463;
+      margin-left: 5px;
+    }
+  }
+
   .bp3-callout {
     font-size: 14px;
   }

src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss

@@ -66,6 +66,20 @@
   .bp3-callout {
     font-size: 14px;
   }
+
+  .credit-remaining {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 5px;
+    padding-bottom: 15px;
+    &__label {
+    }
+    &__balance {
+      font-weight: 500;
+      color: #343463;
+      margin-left: 5px;
+    }
+  }
   .bp3-dialog-footer {
     display: flex;
     justify-content: flex-start;

src/style/pages/VendorsCreditNote/PageForm.scss

@@ -5,7 +5,7 @@ body.page-vendor-credit-note-edit {
   }
 }
 
-.dashboard__insider--vendor-credit-note-form {
+.dashboard__insider--vendor-credit-form {
   padding-bottom: 64px;
 }