From 15fa1729a23ea94e3c345e3d319ae631ae3e9237 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Tue, 30 Nov 2021 16:34:13 +0200
Subject: [PATCH] feat: add create & edit & delete in vendor credit.

---
 src/common/resourcesTypes.js                  |   2 +-
 src/config/sidebarMenu.js                     |  12 +-
 ...eteAlert.js => VendorCreditDeleteAlert.js} |  40 ++++-
 .../VendorCreditNoteFloatingActions.js        |  67 ++++++--
 .../CreditNoteForm/VendorCreditNoteForm.js    |  66 ++++++--
 .../VendorCreditNoteForm.schema.js            |   7 +-
 .../VendorCreditNoteFormHeaderFields.js       |  25 +--
 .../VendorCreditNoteFormPage.js               |   2 +-
 .../VendorCreditNoteFormProvider.js           |  50 +++---
 .../CreditNotes/CreditNoteForm/utils.js       |  30 ++--
 .../VendorsCreditNoteActionsBar.js            |  46 +++++-
 .../VendorsCreditNoteDataTable.js             |  40 +++--
 .../VendorsCreditNoteEmptyStatus.js           |   9 +-
 .../VendorsCreditNoteListProvider.js          |  56 ++++++-
 .../VendorsCreditNoteViewTabs.js              |  24 +--
 .../CreditNotesLanding/components.js          |  45 +++++-
 .../CreditNotes/VendorCreditNotesAlerts.js    |   8 +-
 src/containers/Settings/withSettings.js       |   4 +-
 src/hooks/query/index.js                      |   1 +
 src/hooks/query/types.js                      |  12 ++
 src/hooks/query/vendorCredit.js               | 149 ++++++++++++++++++
 src/lang/en/index.json                        |  15 +-
 src/routes/dashboard.js                       |  26 +--
 src/store/settings/settings.reducer.js        |   6 +
 24 files changed, 584 insertions(+), 158 deletions(-)
 rename src/containers/Alerts/VendorCeditNotes/{VendorCreditNoteDeleteAlert.js => VendorCreditDeleteAlert.js} (55%)
 create mode 100644 src/hooks/query/vendorCredit.js

diff --git a/src/common/resourcesTypes.js b/src/common/resourcesTypes.js
index e6de2706d..91e981aa8 100644
--- a/src/common/resourcesTypes.js
+++ b/src/common/resourcesTypes.js
@@ -12,5 +12,5 @@ export const RESOURCES_TYPES = {
   MANUAL_JOURNAL: 'manual_journal',
   ACCOUNT: 'account',
   CREDIT_NOTE: 'credit_note',
-  VENDOR_CREDIT_NOTE:'vendor_credit_note'
+  VENDOR_CREDIT:'vendor_credit'
 };
diff --git a/src/config/sidebarMenu.js b/src/config/sidebarMenu.js
index 928d37eb0..5e1ca1b60 100644
--- a/src/config/sidebarMenu.js
+++ b/src/config/sidebarMenu.js
@@ -259,8 +259,8 @@ export default [
         },
       },
       {
-        text: <T id={'sidebar_credit_note'} />,
-        href: '/vendors-credit-notes',
+        text: <T id={'sidebar_vendor_credits'} />,
+        href: '/vendor-credits',
       },
       {
         text: <T id={'payment_mades'} />,
@@ -306,6 +306,14 @@ export default [
           ability: BillAction.Create,
         },
       },
+      {
+        text: <T id={'vendor_credits.label.new_vendor_credit'} />,
+        href: '/vendor-credits/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.Create,
+        },
+      },
       {
         text: <T id={'new_payment_made'} />,
         href: '/payment-mades/new',
diff --git a/src/containers/Alerts/VendorCeditNotes/VendorCreditNoteDeleteAlert.js b/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js
similarity index 55%
rename from src/containers/Alerts/VendorCeditNotes/VendorCreditNoteDeleteAlert.js
rename to src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js
index 25e935099..1067d486e 100644
--- a/src/containers/Alerts/VendorCeditNotes/VendorCreditNoteDeleteAlert.js
+++ b/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js
@@ -8,17 +8,18 @@ import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
+import { useDeleteVendorCredit } from 'hooks/query';
 import { compose } from 'utils';
 
 /**
- * Vendor Credit note delete alert.
+ * Vendor Credit delete alert.
  */
-function VendorCreditNoteDeleteAlert({
+function VendorCreditDeleteAlert({
   name,
 
   // #withAlertStoreConnect
   isOpen,
-  payload: { vendorCrditNoteId },
+  payload: { vendorCreditId },
 
   // #withAlertActions
   closeAlert,
@@ -26,11 +27,32 @@ function VendorCreditNoteDeleteAlert({
   // #withDrawerActions
   closeDrawer,
 }) {
+  const { isLoading, mutateAsync: deleteVendorCreditMutate } =
+    useDeleteVendorCredit();
+
   // handle cancel delete credit note alert.
   const handleCancelDeleteAlert = () => {
     closeAlert(name);
   };
-  const handleConfirmCreditNoteDelete = () => {};
+  const handleConfirmCreditDelete = () => {
+    deleteVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor_credits.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
 
   return (
     <Alert
@@ -40,11 +62,13 @@ function VendorCreditNoteDeleteAlert({
       intent={Intent.DANGER}
       isOpen={isOpen}
       onCancel={handleCancelDeleteAlert}
-      onConfirm={handleConfirmCreditNoteDelete}
-      // loading={isLoading}
+      onConfirm={handleConfirmCreditDelete}
+      loading={isLoading}
     >
       <p>
-        <FormattedHTMLMessage id={'credit_note.once_delete_this_credit_note'} />
+        <FormattedHTMLMessage
+          id={'vendor_credits.note.once_delete_this_vendor_credit_note'}
+        />
       </p>
     </Alert>
   );
@@ -54,4 +78,4 @@ export default compose(
   withAlertStoreConnect(),
   withAlertActions,
   withDrawerActions,
-)(VendorCreditNoteDeleteAlert);
+)(VendorCreditDeleteAlert);
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
index a8f0121f4..3affd700e 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
@@ -26,32 +26,74 @@ export default function VendorCreditNoteFloatingActions() {
   const { resetForm, submitForm, isSubmitting } = useFormikContext();
 
   // Credit note form context.
-  const { setSubmitPayload } = useVendorCreditNoteFormContext();
+  const { setSubmitPayload, isNewMode } = useVendorCreditNoteFormContext();
+
+  // Handle submit, save and anothe new button click.
+  const handleSubmitAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, status: true, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as save & continue editing button click.
+  const handleSubmitSaveContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, status: true });
+    submitForm();
+  };
+
+  // Handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, status: false });
+    submitForm();
+  };
+
+  // handle submit as draft & new button click.
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, status: false, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as draft & continue editing button click.
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, status: false });
+    submitForm();
+  };
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
     history.goBack();
   };
 
+  // Handle submit button click.
+  const handleSubmitBtnClick = (event) => {
+    setSubmitPayload({ redirect: true });
+  };
+
   const handleClearBtnClick = (event) => {
     resetForm();
   };
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save And Open ----------- */}
+      {/* ----------- Save  ----------- */}
       <ButtonGroup>
         <Button
           disabled={isSubmitting}
           loading={isSubmitting}
           intent={Intent.PRIMARY}
-          text={<T id={'save_open'} />}
+          text={<T id={'save'} />}
         />
+
         <Popover
           content={
             <Menu>
-              <MenuItem text={<T id={'open_and_new'} />} />
-              <MenuItem text={<T id={'open_continue_editing'} />} />
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewBtnClick}
+              />
+              <MenuItem
+                text={<T id={'save_continue_editing'} />}
+                onClick={handleSubmitSaveContinueEditingBtnClick}
+              />
             </Menu>
           }
           minimal={true}
@@ -70,13 +112,20 @@ export default function VendorCreditNoteFloatingActions() {
         <Button
           disabled={isSubmitting}
           className={'ml1'}
+          onClick={handleSubmitDraftBtnClick}
           text={<T id={'save_as_draft'} />}
         />
         <Popover
           content={
             <Menu>
-              <MenuItem text={<T id={'save_and_new'} />} />
-              <MenuItem text={<T id={'save_continue_editing'} />} />
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitDraftAndNewBtnClick}
+              />
+              <MenuItem
+                text={<T id={'save_continue_editing'} />}
+                onClick={handleSubmitDraftContinueEditingBtnClick}
+              />
             </Menu>
           }
           minimal={true}
@@ -89,14 +138,12 @@ export default function VendorCreditNoteFloatingActions() {
           />
         </Popover>
       </ButtonGroup>
-      {/* ----------- Save and New ----------- */}
-
       {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
         disabled={isSubmitting}
         onClick={handleClearBtnClick}
-        // text={ ? <T id={'reset'} /> : <T id={'clear'} />}
+        text={isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
       />
       {/* ----------- Cancel ----------- */}
       <Button
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js
index 735efceb2..e48b31edf 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Formik, Form } from 'formik';
-import { Intent } from '@blueprintjs/core';
+import { Button, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import { sumBy, omit, isEmpty } from 'lodash';
 import classNames from 'classnames';
@@ -36,27 +36,35 @@ function VendorCreditNoteForm({
   organization: { base_currency },
 }) {
   const history = useHistory();
+
   // Vendor Credit note form context.
-  const { bill } = useVendorCreditNoteFormContext();
+  const {
+    isNewMode,
+    submitPayload,
+    vendorCredit,
+    createVendorCreditMutate,
+    editVendorCreditMutate,
+  } = useVendorCreditNoteFormContext();
 
   // Initial values.
   const initialValues = React.useMemo(
     () => ({
-      ...(!isEmpty(bill)
+      ...(!isEmpty(vendorCredit)
         ? {
-            ...transformToEditForm(bill),
-            currency_code: base_currency,
+            ...transformToEditForm(vendorCredit),
           }
         : {
             ...defaultVendorsCreditNote,
-            currency_code: base_currency,
           }),
     }),
-    [],
+    [vendorCredit, base_currency],
   );
 
-  // Handle form submit.
-  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {
+  // Handles form submit.
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, setErrors, resetForm },
+  ) => {
     const entries = filterNonZeroEntries(values.entries);
     const totalQuantity = safeSumBy(entries, 'quantity');
 
@@ -68,18 +76,43 @@ function VendorCreditNoteForm({
       setSubmitting(false);
       return;
     }
-
-    const form = {};
-
+    const form = {
+      ...transformFormValuesToRequest(values),
+    };
     // Handle the request success.
-    const onSuccess = (response) => {};
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'vendor_credits.success_message'
+            : 'vendor_credits.edit_success_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
 
+      if (submitPayload.redirect) {
+        history.push('/vendor-credits');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
     // Handle the request error.
     const onError = ({
       response: {
         data: { errors },
       },
-    }) => {};
+    }) => {
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createVendorCreditMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editVendorCreditMutate([vendorCredit.id, form])
+        .then(onSuccess)
+        .catch(onError);
+    }
   };
 
   return (
@@ -92,15 +125,16 @@ function VendorCreditNoteForm({
     >
       <Formik
         validationSchema={
-          true ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
+          isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
         }
         initialValues={initialValues}
-        onSubmit={handleSubmit}
+        onSubmit={handleFormSubmit}
       >
         <Form>
           <VendorCreditNoteFormHeader />
           <VendorCreditNoteItemsEntriesEditor />
           <VendorCreditNoteFormFooter />
+
           <VendorCreditNoteFloatingActions />
         </Form>
       </Formik>
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js
index 29773cb98..d3c5cabe4 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js
@@ -5,9 +5,8 @@ import { isBlank } from 'utils';
 
 const getSchema = Yup.object().shape({
   vendor_id: Yup.number().required().label(intl.get('vendor_name_')),
-  bill_date: Yup.date().required().label(intl.get('bill_date_')),
-  due_date: Yup.date().required().label(intl.get('due_date_')),
-  bill_number: Yup.string()
+  vendor_credit_date: Yup.date().required().label(intl.get('bill_date_')),
+  vendor_credit_number: Yup.string()
     .max(DATATYPES_LENGTH.STRING)
     .label(intl.get('bill_number_')),
   reference_no: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),
@@ -16,7 +15,6 @@ const getSchema = Yup.object().shape({
     .min(1)
     .max(DATATYPES_LENGTH.TEXT)
     .label(intl.get('note')),
-  open: Yup.boolean(),
   entries: Yup.array().of(
     Yup.object().shape({
       quantity: Yup.number()
@@ -33,7 +31,6 @@ const getSchema = Yup.object().shape({
           is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
           then: Yup.number().required(),
         }),
-      total: Yup.number().nullable(),
       discount: Yup.number().nullable().min(0).max(DATATYPES_LENGTH.INT_10),
       description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
     }),
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
index 25fd59b9c..120d59b5d 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js
@@ -63,22 +63,25 @@ function VendorCreditNoteFormHeaderFields() {
         )}
       </FastField>
 
-      {/* ------- Credit note date ------- */}
-      <FastField name={'bill_date'}>
+      {/* ------- Vendor Credit date ------- */}
+      <FastField name={'vendor_credit_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'credit_note.label_credit_note_date'} />}
             inline={true}
             labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--credit_note_date', CLASSES.FILL)}
+            className={classNames(
+              'form-group--vendor_credit_date',
+              CLASSES.FILL,
+            )}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="bill_date" />}
+            helperText={<ErrorMessage name="vendor_credit_date" />}
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
               value={tansformDateValue(value)}
               onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('bill_date', formattedDate);
+                form.setFieldValue('vendor_credit_date', formattedDate);
               })}
               popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
               inputProps={{
@@ -89,22 +92,22 @@ function VendorCreditNoteFormHeaderFields() {
         )}
       </FastField>
 
-      {/* ----------- Credit note # ----------- */}
-      <FastField name={'bill_number'}>
+      {/* ----------- Vendor Credit No # ----------- */}
+      <FastField name={'vendor_credit_number'}>
         {({ field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'credit_note.label_credit_note'} />}
             inline={true}
-            className={('form-group--bill_number', CLASSES.FILL)}
+            className={('form-group--vendor_credit_number', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="bill_number" />}
+            helperText={<ErrorMessage name="vendor_credit_number" />}
           >
             <InputGroup minimal={true} {...field} />
           </FormGroup>
         )}
       </FastField>
       {/* ----------- Reference ----------- */}
-      <FastField name={'reference_no'}>
+      {/* <FastField name={'reference_no'}>
         {({ field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'reference_no'} />}
@@ -116,7 +119,7 @@ function VendorCreditNoteFormHeaderFields() {
             <InputGroup minimal={true} {...field} />
           </FormGroup>
         )}
-      </FastField>
+      </FastField> */}
     </div>
   );
 }
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.js
index 62c966293..31a4c3e3e 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.js
@@ -14,7 +14,7 @@ export default function VendorCreditNoteFormPage() {
   const idAsInteger = parseInt(id, 10);
 
   return (
-    <VendorCreditNoteFormProvider creditNoteId={idAsInteger}>
+    <VendorCreditNoteFormProvider vendorCreditId={idAsInteger}>
       <VendorCreditNoteForm />
     </VendorCreditNoteFormProvider>
   );
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js
index 0cb45a195..b3e74703b 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.js
@@ -1,25 +1,20 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
-import { isEmpty, pick } from 'lodash';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { transformToEditForm } from './utils';
 
-import { useBill, useItems, useVendors } from 'hooks/query';
+import {
+  useCreateVendorCredit,
+  useEditVendorCredit,
+  useVendorCredit,
+  useItems,
+  useVendors,
+} from 'hooks/query';
 
 const VendorCreditNoteFormContext = React.createContext();
 
 /**
  * Vendor Credit note data provider.
  */
-function VendorCreditNoteFormProvider({ creditNoteId, ...props }) {
-  const { state } = useLocation();
-  const billId = state?.action;
-
-  // Fetches the bill by the given id.
-  const { data: bill, isLoading: isBillLoading } = useBill(billId, {
-    enabled: !!billId,
-  });
-
+function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
   // Handle fetching the items table based on the given query.
   const {
     data: { items },
@@ -34,28 +29,41 @@ function VendorCreditNoteFormProvider({ creditNoteId, ...props }) {
     isLoading: isVendorsLoading,
   } = useVendors({ page_size: 10000 });
 
+  // Handle fetch vendor credit details.
+  const { data: vendorCredit, isLoading: isVendorCreditLoading } =
+    useVendorCredit(vendorCreditId, {
+      enabled: !!vendorCreditId,
+    });
+
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState();
 
+  // Create and edit vendor credit mutations.
+  const { mutateAsync: createVendorCreditMutate } = useCreateVendorCredit();
+  const { mutateAsync: editVendorCreditMutate } = useEditVendorCredit();
+
   // Determines whether the form in new mode.
-  const isNewMode = !creditNoteId;
+  const isNewMode = !vendorCreditId;
 
   // Provider payload.
   const provider = {
-    bill,
     items,
     vendors,
-    billId,
+    vendorCredit,
     submitPayload,
-
-    setSubmitPayload,
     isNewMode,
+
+    isVendorCreditLoading,
+
+    createVendorCreditMutate,
+    editVendorCreditMutate,
+    setSubmitPayload,
   };
 
   return (
     <DashboardInsider
-      loading={isBillLoading || isItemsLoading || isVendorsLoading}
-      name={'vendor-credit-note-form'}
+      loading={isItemsLoading || isVendorsLoading || isVendorCreditLoading}
+      name={'vendor-credits-form'}
     >
       <VendorCreditNoteFormContext.Provider value={provider} {...props} />
     </DashboardInsider>
@@ -65,4 +73,4 @@ function VendorCreditNoteFormProvider({ creditNoteId, ...props }) {
 const useVendorCreditNoteFormContext = () =>
   React.useContext(VendorCreditNoteFormContext);
 
-export { VendorCreditNoteFormProvider , useVendorCreditNoteFormContext };
+export { VendorCreditNoteFormProvider, useVendorCreditNoteFormContext };
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js
index c5d611c0b..114dc1580 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import * as R from 'ramda';
 import moment from 'moment';
-import intl from 'react-intl-universal';
-import { Intent } from '@blueprintjs/core';
-import { AppToaster } from 'components';
+
 import {
   defaultFastFieldShouldUpdate,
   transformToForm,
@@ -14,7 +12,6 @@ import {
   updateItemsEntriesTotal,
   ensureEntriesHaveEmptyLine,
 } from 'containers/Entries/utils';
-import { isLandedCostDisabled } from '../../../Entries/utils';
 
 export const MIN_LINES_NUMBER = 4;
 
@@ -32,11 +29,10 @@ export const defaultCreditNoteEntry = {
 // Default Vendors Credit Note.
 export const defaultVendorsCreditNote = {
   vendor_id: '',
-  bill_number: '',
-  bill_date: moment(new Date()).format('YYYY-MM-DD'),
-  reference_no: '',
+  vendor_credit_number: '',
+  vendor_credit_date: moment(new Date()).format('YYYY-MM-DD'),
+  // reference_no: '',
   note: '',
-  open: '',
   entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
 };
 
@@ -64,16 +60,18 @@ export const transformToEditForm = (creditNote) => {
   };
 };
 
-
 /**
  * Transformes credit note entries to submit request.
  */
- export const transformEntriesToSubmit = (entries) => {
+export const transformEntriesToSubmit = (entries) => {
   const transformCreditNoteEntry = R.compose(
     R.omit(['amount']),
     R.curry(transformToForm)(R.__, defaultCreditNoteEntry),
   );
-  return R.compose(orderingLinesIndexes, R.map(transformCreditNoteEntry))(entries);
+  return R.compose(
+    orderingLinesIndexes,
+    R.map(transformCreditNoteEntry),
+  )(entries);
 };
 
 /**
@@ -86,21 +84,19 @@ export const filterNonZeroEntries = (entries) => {
 /**
  * Transformes form values to request body.
  */
- export const transformFormValuesToRequest = (values) => {
+export const transformFormValuesToRequest = (values) => {
   const entries = filterNonZeroEntries(values.entries);
 
   return {
     ...values,
     entries: transformEntriesToSubmit(entries),
-    open: false,
   };
 };
 
-
 /**
  * Detarmines vendors fast field should update
  */
- export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
+export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
   return (
     newProps.vendors !== oldProps.vendors ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
@@ -110,9 +106,9 @@ export const filterNonZeroEntries = (entries) => {
 /**
  * Detarmines entries fast field should update.
  */
- export const entriesFieldShouldUpdate = (newProps, oldProps) => {
+export const entriesFieldShouldUpdate = (newProps, oldProps) => {
   return (
     newProps.items !== oldProps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
-};
\ No newline at end of file
+};
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js
index 12a79c20f..e52077150 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.js
@@ -18,6 +18,8 @@ import {
 } from 'components';
 import DashboardActionsBar from '../../../../components/Dashboard/DashboardActionsBar';
 
+import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+
 import withVendorsCreditNotes from './withVendorsCreditNotes';
 import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
@@ -30,6 +32,7 @@ import { compose } from 'utils';
  */
 function VendorsCreditNoteActionsBar({
   // #withVendorsCreditNotes
+  vendorCreditFilterRoles,
 
   // #withVendorsCreditNotesActions
   setVendorsCreditNoteTableState,
@@ -42,9 +45,14 @@ function VendorsCreditNoteActionsBar({
 }) {
   const history = useHistory();
 
-  // credit note list context.
+  // vendor credit list context.
+  const { VendorCreditsViews, fields, refresh } =
+    useVendorsCreditNoteListContext();
 
-  // credit note refresh action.
+  // Handle click a new Vendor.
+  const handleClickNewVendorCredit = () => {
+    history.push('/vendor-credits/new');
+  };
 
   // Handle view tab change.
   const handleTabChange = (view) => {
@@ -52,11 +60,13 @@ function VendorsCreditNoteActionsBar({
   };
 
   // Handle click a refresh credit note.
-  const handleRefreshBtnClick = () => {};
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('vendorsCreditNote', 'tableSize', size);
+    addSetting('vendorCredits', 'tableSize', size);
   };
 
   return (
@@ -64,11 +74,33 @@ function VendorsCreditNoteActionsBar({
       <NavbarGroup>
         <DashboardActionViewsList
           allMenuItem={true}
-          resourceName={'credit_note'}
-          views={[]}
+          resourceName={'vendor_credit'}
+          views={VendorCreditsViews}
+          allMenuItem={true}
+          allMenuItemText={<T id={'all'} />}
           onChange={handleTabChange}
         />
         <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'vendor_credits.action.new_vendor_credit'} />}
+          onClick={handleClickNewVendorCredit}
+        />
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: vendorCreditFilterRoles,
+            defaultFieldKey: 'created_at',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setVendorsCreditNoteTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={vendorCreditFilterRoles.length}
+          />
+        </AdvancedFilterPopover>
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
@@ -106,7 +138,7 @@ export default compose(
   withVendorsCreditNotesActions,
   withSettingsActions,
   withVendorsCreditNotes(({ vendorsCreditNoteTableState }) => ({
-    creditNoteFilterRoles: vendorsCreditNoteTableState.filterRoles,
+    vendorCreditFilterRoles: vendorsCreditNoteTableState.filterRoles,
   })),
   withSettings(({ vendorsCreditNoteSetting }) => ({
     creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
index 9beed42b4..7cf8d381e 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
@@ -14,7 +14,7 @@ import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
-import { useVendorsCreditNoteTableColumns } from './components';
+import { useVendorsCreditNoteTableColumns, ActionsMenu } from './components';
 import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
 
 import { compose } from 'utils';
@@ -34,7 +34,14 @@ function VendorsCreditNoteDataTable({
 }) {
   const history = useHistory();
 
-  // Credit note list context.
+  // Vendor credits context.
+  const {
+    vendorCredits,
+    pagination,
+    isEmptyStatus,
+    isVendorCreditsFetching,
+    isVendorCreditsLoading,
+  } = useVendorsCreditNoteListContext();
 
   // Credit note table columns.
   const columns = useVendorsCreditNoteTableColumns();
@@ -56,40 +63,39 @@ function VendorsCreditNoteDataTable({
   );
 
   // Display create note empty status instead of the table.
-  // if (isEmptyStatus) {
-  //   return <VendorsCreditNoteEmptyStatus />;
-  // }
+  if (isEmptyStatus) {
+    return <VendorsCreditNoteEmptyStatus />;
+  }
 
   // Handle delete credit note.
   const handleDeleteVendorCreditNote = ({ id }) => {
-    openAlert('vendor-credit-note-delete', { creditNoteId: id });
+    openAlert('vendor-credit-delete', { vendorCreditId: id });
   };
 
   // Handle edit credit note.
-  const hanldeEditVendorCreditNote = (creditNote) => {
-    history.push(`/vendor-credit-notes/${creditNote.id}/edit`);
+  const hanldeEditVendorCreditNote = (vendorCredit) => {
+    history.push(`/vendor-credits/${vendorCredit.id}/edit`);
   };
 
   return (
     <DashboardContentTable>
       <DataTable
         columns={columns}
-        data={[]}
-        // loading={}
-        // headerLoading={}
-        // progressBarLoading={}
-        onFetchData={handleDataTableFetchData}
+        data={vendorCredits}
+        loading={isVendorCreditsLoading}
+        headerLoading={isVendorCreditsLoading}
+        progressBarLoading={isVendorCreditsFetching}
+        // onFetchData={handleDataTableFetchData}
         manualSortBy={true}
         selectionColumn={true}
         noInitialFetch={true}
         sticky={true}
         pagination={true}
-        manualPagination={true}
-        // pagesCount={}
-        autoResetSortBy={false}
-        autoResetPage={false}
+        pagesCount={pagination.pagesCount}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        // onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
         size={creditNoteTableSize}
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js
index 04f928779..de5238b9c 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.js
@@ -5,6 +5,7 @@ import { EmptyStatus } from 'components';
 import { FormattedMessage as T } from 'components';
 
 export default function VendorsCreditNoteEmptyStatus() {
+  const history = useHistory();
   return (
     <EmptyStatus
       title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
@@ -15,8 +16,12 @@ export default function VendorsCreditNoteEmptyStatus() {
       }
       action={
         <>
-          <Button intent={Intent.PRIMARY} large={true}>
-            'Vendors Credit Note'
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => history.push('/vendor-credits/new')}
+          >
+            <T id={'vendor_credits.action.new_vendor_credit'} />
           </Button>
 
           <Button intent={Intent.NONE} large={true}>
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteListProvider.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteListProvider.js
index eb18d09ec..b4c7b80c2 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteListProvider.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteListProvider.js
@@ -2,19 +2,69 @@ import React from 'react';
 import { isEmpty } from 'lodash';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useResourceViews,
+  useResourceMeta,
+  useVendorCredits,
+  useRefreshVendorCredits,
+} from 'hooks/query';
+
 import { getFieldsFromResourceMeta } from 'utils';
 
 const VendorsCreditNoteListContext = React.createContext();
+
 /**
  * Vendors Credit note data provider.
  */
 function VendorsCreditNoteListProvider({ query, tableStateChanged, ...props }) {
+  // Vendor Credits refresh action.
+  const { refresh } = useRefreshVendorCredits();
+
+  // Fetch accounts resource views and fields.
+  const { data: VendorCreditsViews, isLoading: isViewsLoading } =
+    useResourceViews('vendor_credits');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('vendor_credits');
+
+  // Fetch vendor credits list.
+  const {
+    data: { vendorCredits, pagination, filterMeta },
+    isLoading: isVendorCreditsLoading,
+    isFetching: isVendorCreditsFetching,
+  } = useVendorCredits(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(vendorCredits) && !isVendorCreditsLoading && !tableStateChanged;
+
   // Provider payload.
-  const provider = {};
+  const provider = {
+    vendorCredits,
+    pagination,
+    VendorCreditsViews,
+    refresh,
+
+    
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isVendorCreditsFetching,
+    isVendorCreditsLoading,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
   return (
     <DashboardInsider
-      // loading={}
-      name={'vendors-credit-note-list'}
+      loading={isViewsLoading || isResourceLoading}
+      name={'vendor-credits'}
     >
       <VendorsCreditNoteListContext.Provider value={provider} {...props} />
     </DashboardInsider>
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteViewTabs.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteViewTabs.js
index 149374600..6bdcac9ed 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteViewTabs.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteViewTabs.js
@@ -14,26 +14,30 @@ import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider
  */
 function VendorsCreditNoteViewTabs({
   // #withVendorsCreditNotes
-  creditNoteCurrentView,
+  vendorCreditCurrentView,
 
   // #withVendorsCreditNotesActions
   setVendorsCreditNoteTableState,
 }) {
-  // Credit note list context.
-
-  // Handle click a new view tab.
-  const handleClickNewView = () => {};
-
-  // const tabs = transfromViewsToTabs(creditNoteCurrentView);
+  // vendor credit list context.
+  const { VendorCreditsViews } = useVendorsCreditNoteListContext();
 
   // Handle tab change.
   const handleTabsChange = (viewSlug) => {
-    setVendorsCreditNoteTableState({ viewSlug });
+    setVendorsCreditNoteTableState({ viewSlug: viewSlug || null });
   };
 
+  const tabs = transfromViewsToTabs(VendorCreditsViews);
   return (
     <Navbar className={'navbar--dashboard-views'}>
-      <NavbarGroup align={Alignment.LEFT}></NavbarGroup>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={vendorCreditCurrentView}
+          resourceName={'vendor_credits'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
     </Navbar>
   );
 }
@@ -41,6 +45,6 @@ function VendorsCreditNoteViewTabs({
 export default compose(
   withVendorsCreditNotesActions,
   withVendorsCreditNotes(({ vendorsCreditNoteTableState }) => ({
-    creditNoteCurrentView: vendorsCreditNoteTableState.viewSlug,
+    vendorCreditCurrentView: vendorsCreditNoteTableState.viewSlug,
   })),
 )(VendorsCreditNoteViewTabs);
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
index 31fcf5aab..5396e79a4 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
@@ -21,6 +21,36 @@ import {
 } from 'components';
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';
 
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onViewDetails },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('vendor_credits.action.edit_vendor_credit')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('vendor_credits.action.delete_vendor_credit')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
 /**
  * Retrieve vendors credit note table columns.
  */
@@ -28,12 +58,12 @@ export function useVendorsCreditNoteTableColumns() {
   return React.useMemo(
     () => [
       {
-        id: 'date',
+        id: 'vendor_credit_date',
         Header: intl.get('date'),
-        accessor: 'date',
+        accessor: 'vendor_credit_date',
         Cell: FormatDateCell,
         width: 110,
-        className: 'date',
+        className: 'vendor_credit_date',
         clickable: true,
         textOverview: true,
       },
@@ -47,11 +77,11 @@ export function useVendorsCreditNoteTableColumns() {
         textOverview: true,
       },
       {
-        id: 'credit_note',
-        Header: intl.get('credit_note.label_credit_note_no'),
-        accessor: 'credit_note',
+        id: 'vendor_credit_number',
+        Header: intl.get('vendor_credits.column.vendor_credit_no'),
+        accessor: 'vendor_credit_number',
         width: 100,
-        className: 'credit_note',
+        className: 'vendor_credit_number',
         clickable: true,
         textOverview: true,
       },
@@ -59,6 +89,7 @@ export function useVendorsCreditNoteTableColumns() {
         id: 'amount',
         Header: intl.get('amount'),
         // accessor: 'formatted_amount',
+        accessor: 'amount',
         width: 120,
         align: 'right',
         clickable: true,
diff --git a/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js b/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
index 182c4862a..fb0b1b3ff 100644
--- a/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
+++ b/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-const VendorCreditNoteDeleteAlert = React.lazy(() =>
-  import('../../Alerts/VendorCeditNotes/VendorCreditNoteDeleteAlert'),
+const VendorCreditDeleteAlert = React.lazy(() =>
+  import('../../Alerts/VendorCeditNotes/VendorCreditDeleteAlert'),
 );
 
 /**
@@ -9,7 +9,7 @@ const VendorCreditNoteDeleteAlert = React.lazy(() =>
  */
 export default [
   {
-    name: 'vendor-credit-note-delete',
-    component: VendorCreditNoteDeleteAlert,
+    name: 'vendor-credit-delete',
+    component: VendorCreditDeleteAlert,
   },
 ];
diff --git a/src/containers/Settings/withSettings.js b/src/containers/Settings/withSettings.js
index 9b02ef8f7..6acdcb53b 100644
--- a/src/containers/Settings/withSettings.js
+++ b/src/containers/Settings/withSettings.js
@@ -19,8 +19,8 @@ export default (mapState) => {
       cashflowSettings: state.settings.data.cashflowAccounts,
       cashflowTransactionsSettings: state.settings.data.cashflowTransactions,
       cashflowSetting: state.settings.data.cashflow,
-      creditNoteSettings: state.settings.data.salesCreditNotes,
-      vendorsCreditNoteSetting:state.settings.data.vendorsCreditNotes
+      creditNoteSettings: state.settings.data.creditNotes,
+      vendorsCreditNoteSetting: state.settings.data.vendorCredits,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/src/hooks/query/index.js b/src/hooks/query/index.js
index e73c09307..16adb004d 100644
--- a/src/hooks/query/index.js
+++ b/src/hooks/query/index.js
@@ -30,3 +30,4 @@ export * from './jobs';
 export * from './misc';
 export * from './cashflowAccounts'
 export * from './roles'
+export * from './vendorCredit'
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index edec96183..a32093703 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -108,6 +108,16 @@ const ROLES = {
   ROLES_PERMISSIONS_SCHEMA: 'ROLES_PERMISSIONS_SCHEMA',
 };
 
+const CREDIT_NOTES = {
+  CREDIT_NOTE: 'CREDIT_NOTE',
+  CREDIT_NOTES: 'CREDIT_NOTES',
+};
+
+const VENDOR_CREDIT_NOTES = {
+  VENDOR_CREDITS: 'VENDOR_CREDITS',
+  VENDOR_CREDIT: 'VENDOR_CREDIT',
+};
+
 const SETTING = {
   SETTING: 'SETTING',
   SETTING_INVOICES: 'SETTING_INVOICES',
@@ -184,4 +194,6 @@ export default {
   ...CONTACTS,
   ...CASH_FLOW_ACCOUNTS,
   ...ROLES,
+  ...CREDIT_NOTES,
+  ...VENDOR_CREDIT_NOTES,
 };
diff --git a/src/hooks/query/vendorCredit.js b/src/hooks/query/vendorCredit.js
new file mode 100644
index 000000000..f4867aceb
--- /dev/null
+++ b/src/hooks/query/vendorCredit.js
@@ -0,0 +1,149 @@
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import { transformPagination } from 'utils';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+const commonInvalidateQueries = (queryClient) => {
+  // Invalidate vendor credit.
+  queryClient.invalidateQueries(t.VENDOR_CREDITS);
+  queryClient.invalidateQueries(t.VENDOR_CREDIT);
+
+  // Invalidate items.
+  queryClient.invalidateQueries(t.ITEMS);
+  queryClient.invalidateQueries(t.ITEM);
+
+  // Invalidate vendors.
+  queryClient.invalidateQueries([t.VENDORS]);
+  queryClient.invalidateQueries(t.VENDOR);
+
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+};
+
+/**
+ * Create a new vendor credit.
+ */
+export function useCreateVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('purchases/vendor-credit', values),
+    {
+      onSuccess: (res, values) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Edit the given vendor credit.
+ */
+export function useEditVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) => apiRequest.post(`purchases/vendor-credit/${id}`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given vendor credit.
+ */
+export function useDeleteVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`purchases/vendor-credit/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+const transformVendorCreditsResponse = (response) => ({
+  vendorCredits: response.data.vendor_credits,
+  pagination: transformPagination(response.data.pagination),
+  filterMeta: response.data.filter_meta,
+});
+
+/**
+ * Retrieve vendor credit notes list with pagination meta.
+ */
+export function useVendorCredits(query, props) {
+  return useRequestQuery(
+    [t.VENDOR_CREDITS],
+    {
+      method: 'get',
+      url: 'purchases/vendor-credit',
+      params: query,
+    },
+    {
+      select: transformVendorCreditsResponse,
+      defaultData: {
+        vendorCredits: [],
+        pagination: {
+          page: 1,
+          page_size: 12,
+          total: 0,
+        },
+        filterMeta: {},
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve vendor credit detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useVendorCredit(id, props, requestProps) {
+  return useRequestQuery(
+    [t.VENDOR_CREDIT, id],
+    { method: 'get', url: `purchases/vendor-credit/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
+
+export function useRefreshVendorCredits() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.VENDOR_CREDITS);
+    },
+  };
+}
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index de2a2a045..bc1ab9c4c 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1500,5 +1500,18 @@
   "credit_note.label_customer_note": "Customer notes",
   "credit_note.label_edit_credit_note": "Edit Credit note",
   "credit_note.label_delete_credit_note": "Delete Credit note",
-  "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?"
+  "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?",
+  
+  "sidebar_vendor_credits":"Vendor Credits",
+  "vendor_credits.lable_vendor_credit_list":"Vendor Credit List",
+  "vendor_credits.label.new_vendor_credit":"New Vendor Credit",
+  "vendor_credits.label.edit_vendor_credit":"Edit Vendor 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.delete_vendor_credit":"Delete Vendot Credit",
+  "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.",
+  "vendor_credits.note.once_delete_this_vendor_credit_note": "Once you delete this vendor credit , you won't be able to restore it later. Are you sure you want to delete this vendor credit ?"
 }
\ No newline at end of file
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index c55605f63..ece09cac1 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -759,45 +759,45 @@ export const getDashboardRoutes = () => [
   },
   //  Purchases Credit note.
   {
-    path: `/vendors-credit-notes/:id/edit`,
+    path: `/vendor-credits/:id/edit`,
     component: lazy(() =>
       import(
         'containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage'
       ),
     ),
-    name: 'vendor-credit-note-edit',
+    name: 'vendor-credits-edit',
     breadcrumb: intl.get('edit'),
-    pageTitle: intl.get('credit_note.edit_credit_note'),
+    pageTitle: intl.get('vendor_credits.label.edit_vendor_credit'),
     backLink: true,
     sidebarExpand: false,
-    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT_NOTE,
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
   {
-    path: '/vendors-credit-notes/new',
+    path: '/vendor-credits/new',
     component: lazy(() =>
       import(
         'containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage'
       ),
     ),
-    name: 'vendor-credit-note-new',
+    name: 'vendor-credits-new',
     backLink: true,
     sidebarExpand: false,
-    breadcrumb: intl.get('credit_note.new_credit_note'),
-    pageTitle: intl.get('credit_note.new_credit_note'),
-    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT_NOTE,
+    breadcrumb: intl.get('vendor_credits.label.new_vendor_credit'),
+    pageTitle: intl.get('vendor_credits.label.new_vendor_credit'),
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
   {
-    path: '/vendors-credit-notes',
+    path: '/vendor-credits',
     component: lazy(() =>
       import(
         '../containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNotesList'
       ),
     ),
-    breadcrumb: intl.get('credit_note.label_list'),
-    pageTitle: intl.get('credit_note.label_list'),
-    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT_NOTE,
+    breadcrumb: intl.get('vendor_credits.lable_vendor_credit_list'),
+    pageTitle: intl.get('vendor_credits.lable_vendor_credit_list'),
+    defaultSearchResource: RESOURCES_TYPES.VENDOR_CREDIT,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
 
diff --git a/src/store/settings/settings.reducer.js b/src/store/settings/settings.reducer.js
index 28ceaa9e8..2498a04bd 100644
--- a/src/store/settings/settings.reducer.js
+++ b/src/store/settings/settings.reducer.js
@@ -52,6 +52,12 @@ const initialState = {
     cashflowTransactions: {
       tableSize: 'medium',
     },
+    creditNotes: {
+      tableSize: 'medium',
+    },
+    vendorCredits: {
+      tableSize: 'medium',
+    },
   },
 };