feat: add create & edit & delete in vendor credit.

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);

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

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>

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),
     }),

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>
   );
 }

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>
   );

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 };

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)
   );
-};
+};

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,

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}

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}>

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>

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);

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,

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,
   },
 ];

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;
   };