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

2026-02-19 22:30:31 +00:00 · 2021-11-30 21:04:36 +02:00
parent 15fa1729a2
commit eeb16f4362
29 changed files with 644 additions and 235 deletions
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
@@ -26,32 +26,76 @@ export default function CreditNoteFloatingActions() {
  const { resetForm, submitForm, isSubmitting } = useFormikContext();

  // Credit note form context.
-  const { setSubmitPayload } = useCreditNoteFormContext();
+  const { setSubmitPayload, isNewMode } = useCreditNoteFormContext();
+
+  // 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 });
+    submitForm();
+  };
+
  const handleClearBtnClick = (event) => {
    resetForm();
  };

  return (
    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save And Deliver ----------- */}
+      {/* ----------- Save  ----------- */}
      <ButtonGroup>
        <Button
          disabled={isSubmitting}
          loading={isSubmitting}
          intent={Intent.PRIMARY}
-          text={<T id={'save_and_deliver'} />}
+          onClick={handleSubmitBtnClick}
+          text={<T id={'save'} />}
        />
+
        <Popover
          content={
            <Menu>
-              <MenuItem text={<T id={'deliver_and_new'} />} />
-              <MenuItem text={<T id={'deliver_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 +114,20 @@ export default function CreditNoteFloatingActions() {
        <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,18 +140,17 @@ export default function CreditNoteFloatingActions() {
          />
        </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
        className={'ml1'}
+        disabled={isSubmitting}
        onClick={handleCancelBtnClick}
        text={<T id={'cancel'} />}
      />
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
@@ -7,8 +7,8 @@ import { sumBy, omit, isEmpty } from 'lodash';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
-  getCreateCreditNoteFormSchema,
-  getEditCreditNoteFormSchema,
+  CreateCreditNoteFormSchema,
+  EditCreditNoteFormSchema,
 } from './CreditNoteForm.schema';

 import CreditNoteFormHeader from './CreditNoteFormHeader';
@@ -17,9 +17,21 @@ import CreditNoteFormFooter from './CreditNoteFormFooter';
 import CreditNoteFloatingActions from './CreditNoteFloatingActions';

 import { AppToaster } from 'components';
-import { compose, orderingLinesIndexes, transactionNumber } from 'utils';
+
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
-import { transformToEditForm, defaultCreditNote } from './utils';
+import {
+  filterNonZeroEntries,
+  transformToEditForm,
+  transformFormValuesToRequest,
+  defaultCreditNote,
+} from './utils';
+
+import {
+  compose,
+  orderingLinesIndexes,
+  transactionNumber,
+  safeSumBy,
+} from 'utils';

 import withSettings from 'containers/Settings/withSettings';
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
@@ -36,33 +48,35 @@ function CreditNoteForm({
  const history = useHistory();

  // Credit note form context.
-  const { invoice } = useCreditNoteFormContext();
+  const {
+    isNewMode,
+    submitPayload,
+    creditNote,
+    createCreditNoteMutate,
+    editCreditNoteMutate,
+  } = useCreditNoteFormContext();

  // Initial values.
  const initialValues = React.useMemo(
    () => ({
-      ...(!isEmpty(invoice)
-        ? { ...transformToEditForm(invoice), currency_code: base_currency }
+      ...(!isEmpty(creditNote)
+        ? { ...transformToEditForm(creditNote), currency_code: base_currency }
        : {
            ...defaultCreditNote,
            entries: orderingLinesIndexes(defaultCreditNote.entries),
-            currency_code: base_currency,
          }),
    }),
    [],
  );

-  // Handle form submit.
-  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {
-    setSubmitting(true);
+  // Handles form submit.
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, setErrors, resetForm },
+  ) => {
+    const entries = filterNonZeroEntries(values.entries);
+    const totalQuantity = safeSumBy(entries, 'quantity');

-    const entries = values.entries.filter(
-      (item) => item.item_id && item.quantity,
-    );
-
-    const totalQuantity = sumBy(entries, (entry) => parseInt(entry.quantity));
-
-    // Throw danger toaster in case total quantity equals zero.
    if (totalQuantity === 0) {
      AppToaster.show({
        message: intl.get('quantity_cannot_be_zero_or_empty'),
@@ -71,24 +85,45 @@ function CreditNoteForm({
      setSubmitting(false);
      return;
    }
-    // Transformes the values of the form to request.
    const form = {
-      // ...transformValueToRequest(values),
+      ...transformFormValuesToRequest(values),
    };
-
    // Handle the request success.
-    const onSuccess = () => {};
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'credit_note.success_message'
+            : 'credit_note.edit_success_message',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      if (submitPayload.redirect) {
+        history.push('/credit-notes');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
    // Handle the request error.
    const onError = ({
      response: {
        data: { errors },
      },
-    }) => {};
+    }) => {
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createCreditNoteMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editCreditNoteMutate([creditNote.id, form])
+        .then(onSuccess)
+        .catch(onError);
+    }
  };

-  const CreateCreditNoteFormSchema = getCreateCreditNoteFormSchema();
-  const EditCreditNoteFormSchema = getEditCreditNoteFormSchema();
-
  return (
    <div
      className={classNames(
@@ -99,10 +134,10 @@ function CreditNoteForm({
    >
      <Formik
        validationSchema={
-          true ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
+          isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
        }
        initialValues={initialValues}
-        onSubmit={handleSubmit}
+        onSubmit={handleFormSubmit}
      >
        <Form>
          <CreditNoteFormHeader />
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js
@@ -3,49 +3,45 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 import { isBlank } from 'utils';

-const getSchema = () => Yup.object().shape({
-  customer_id: Yup.string()
-    .label(intl.get('customer_name_'))
-    .required(),
-  invoice_date: Yup.date()
-    .required()
-    .label(intl.get('invoice_date_')),
-  invoice_no: Yup.string()
-    .max(DATATYPES_LENGTH.STRING)
-    .label(intl.get('invoice_no_')),
-  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING),
-  delivered: Yup.boolean(),
-  invoice_message: Yup.string()
-    .trim()
-    .min(1)
-    .max(DATATYPES_LENGTH.TEXT)
-    .label(intl.get('note')),
-  terms_conditions: Yup.string()
-    .trim()
-    .min(1)
-    .max(DATATYPES_LENGTH.TEXT)
-    .label(intl.get('note')),
-  entries: Yup.array().of(
-    Yup.object().shape({
-      quantity: Yup.number()
-        .nullable()
-        .max(DATATYPES_LENGTH.INT_10)
-        .when(['rate'], {
-          is: (rate) => rate,
-          then: Yup.number().required(),
-        }),
-      rate: Yup.number().nullable().max(DATATYPES_LENGTH.INT_10),
-      item_id: Yup.number()
-        .nullable()
-        .when(['quantity', 'rate'], {
-          is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
-          then: Yup.number().required(),
-        }),
-      discount: Yup.number().nullable().min(0).max(100),
-      description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
-    }),
-  ),
-});
+const getSchema = () =>
+  Yup.object().shape({
+    customer_id: Yup.string().label(intl.get('customer_name_')).required(),
+    credit_note_date: Yup.date().required().label(intl.get('invoice_date_')),
+    credit_note_number: Yup.string()
+      .max(DATATYPES_LENGTH.STRING)
+      .label(intl.get('invoice_no_')),
+    reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING),
+    note: Yup.string()
+      .trim()
+      .min(1)
+      .max(DATATYPES_LENGTH.TEXT)
+      .label(intl.get('note')),
+    terms_conditions: Yup.string()
+      .trim()
+      .min(1)
+      .max(DATATYPES_LENGTH.TEXT)
+      .label(intl.get('note')),
+    entries: Yup.array().of(
+      Yup.object().shape({
+        quantity: Yup.number()
+          .nullable()
+          .max(DATATYPES_LENGTH.INT_10)
+          .when(['rate'], {
+            is: (rate) => rate,
+            then: Yup.number().required(),
+          }),
+        rate: Yup.number().nullable().max(DATATYPES_LENGTH.INT_10),
+        item_id: Yup.number()
+          .nullable()
+          .when(['quantity', 'rate'], {
+            is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
+            then: Yup.number().required(),
+          }),
+        discount: Yup.number().nullable().min(0).max(100),
+        description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+      }),
+    ),
+  });

-export const getCreateCreditNoteFormSchema = getSchema;
-export const getEditCreditNoteFormSchema = getSchema;
+export const CreateCreditNoteFormSchema = getSchema;
+export const EditCreditNoteFormSchema = getSchema;
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooter.js
@@ -20,11 +20,11 @@ export default function CreditNoteFormFooter() {
        <Row>
          <Col md={8}>
            {/* --------- Customer notes --------- */}
-            <FastField name={'invoice_message'}>
+            <FastField name={'note'}>
              {({ field, meta: { error, touched } }) => (
                <FormGroup
                  label={<T id={'credit_note.label_customer_note'} />}
-                  className={'form-group--customer_notes'}
+                  className={'form-group--note'}
                  intent={inputIntent({ error, touched })}
                >
                  <TextArea growVertically={true} {...field} />
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js
@@ -65,7 +65,7 @@ function CreditNoteFormHeaderFields() {
        )}
      </FastField>
      {/* ----------- Credit note date ----------- */}
-      <FastField name={'invoice_date'}>
+      <FastField name={'credit_note_date'}>
        {({ form, field: { value }, meta: { error, touched } }) => (
          <FormGroup
            label={<T id={'credit_note.label_credit_note_date'} />}
@@ -73,13 +73,13 @@ function CreditNoteFormHeaderFields() {
            labelInfo={<FieldRequiredHint />}
            className={classNames('form-group--credit_note_date', CLASSES.FILL)}
            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="invoice_date" />}
+            helperText={<ErrorMessage name="credit_note_date" />}
          >
            <DateInput
              {...momentFormatter('YYYY/MM/DD')}
              value={tansformDateValue(value)}
              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('invoice_date', formattedDate);
+                form.setFieldValue('credit_note_date', formattedDate);
              })}
              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
              inputProps={{
@@ -90,15 +90,15 @@ function CreditNoteFormHeaderFields() {
        )}
      </FastField>
      {/* ----------- Credit note # ----------- */}
-      <Field name={'invoice_no'}>
+      <Field name={'credit_note_number'}>
        {({ form, field, meta: { error, touched } }) => (
          <FormGroup
            label={<T id={'credit_note.label_credit_note'} />}
            labelInfo={<FieldRequiredHint />}
            inline={true}
-            className={classNames('form-group--invoice-no', CLASSES.FILL)}
+            className={classNames('form-group--credit_note_number', CLASSES.FILL)}
            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="invoice_no" />}
+            helperText={<ErrorMessage name="credit_note_number" />}
          >
            <InputGroup minimal={true} {...field} />
          </FormGroup>
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormProvider.js
@@ -4,7 +4,13 @@ import { isEmpty, pick } from 'lodash';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { transformToEditForm } from './utils';

-import { useInvoice, useItems, useCustomers } from 'hooks/query';
+import {
+  useCreditNote,
+  useCreateCreditNote,
+  useEditCreditNote,
+  useItems,
+  useCustomers,
+} from 'hooks/query';

 const CreditNoteFormContext = React.createContext();

@@ -12,14 +18,6 @@ const CreditNoteFormContext = React.createContext();
 * Credit note data provider.
 */
 function CreditNoteFormProvider({ creditNoteId, ...props }) {
-  const { state } = useLocation();
-  const invoiceId = state?.action;
-
-  // Fetches the invoice by the given id.
-  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
-    enabled: !!invoiceId,
-  });
-
  // Handle fetch customers data table or list
  const {
    data: { customers },
@@ -34,9 +32,17 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {
    page_size: 10000,
  });

-  // const newCreditNote =
+  // Handle fetch vendor credit details.
+  const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
+    creditNoteId,
+    {
+      enabled: !!creditNoteId,
+    },
+  );

  // Create and edit credit note mutations.
+  const { mutateAsync: createCreditNoteMutate } = useCreateCreditNote();
+  const { mutateAsync: editCreditNoteMutate } = useEditCreditNote();

  // Form submit payload.
  const [submitPayload, setSubmitPayload] = React.useState();
@@ -46,23 +52,24 @@ function CreditNoteFormProvider({ creditNoteId, ...props }) {

  // Provider payload.
  const provider = {
-    invoice,
    items,
    customers,
-    invoiceId,
+    creditNote,
    submitPayload,
+    isNewMode,

    isItemsLoading,
    isCustomersLoading,

+    createCreditNoteMutate,
+    editCreditNoteMutate,
    setSubmitPayload,
-    isNewMode,
  };

  return (
    <DashboardInsider
-      loading={isInvoiceLoading || isItemsLoading || isCustomersLoading}
-      name={'credit-note-form'}
+      loading={isItemsLoading || isCustomersLoading || isCreditNoteLoading}
+      name={'credit-notes-form'}
    >
      <CreditNoteFormContext.Provider value={provider} {...props} />
    </DashboardInsider>
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js
@@ -1,18 +1,14 @@
 import React from 'react';
+import * as R from 'ramda';
 import moment from 'moment';
-import intl from 'react-intl-universal';
-import { useFormikContext } from 'formik';
-import { Intent } from '@blueprintjs/core';
-import { omit } from 'lodash';

 import {
-  compose,
+  defaultFastFieldShouldUpdate,
  transformToForm,
  repeatValue,
-  transactionNumber,
-  defaultFastFieldShouldUpdate,
+  orderingLinesIndexes,
 } from 'utils';
-import { AppToaster } from 'components';
+
 import {
  updateItemsEntriesTotal,
  ensureEntriesHaveEmptyLine,
@@ -34,11 +30,11 @@ export const defaultCreditNoteEntry = {
 // Default credit note object.
 export const defaultCreditNote = {
  customer_id: '',
-  invoice_date: moment(new Date()).format('YYYY-MM-DD'),
-  invoice_no: '',
-  invoice_no_manually: false,
-  reference_no: '',
-  invoice_message: '',
+  credit_note_date: moment(new Date()).format('YYYY-MM-DD'),
+  credit_note_number: '',
+  credit_note_no_manually: false,
+  // reference_no: '',
+  note: '',
  terms_conditions: '',
  entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
 };
@@ -56,7 +52,7 @@ export function transformToEditForm(creditNote) {
      Math.max(MIN_LINES_NUMBER - creditNote.entries.length, 0),
    ),
  ];
-  const entries = compose(
+  const entries = R.compose(
    ensureEntriesHaveEmptyLine(defaultCreditNoteEntry),
    updateItemsEntriesTotal,
  )(initialEntries);
@@ -67,6 +63,39 @@ export function transformToEditForm(creditNote) {
  };
 }

+/**
+ * Transformes credit note entries to submit request.
+ */
+export const transformEntriesToSubmit = (entries) => {
+  const transformCreditNoteEntry = R.compose(
+    R.omit(['amount']),
+    R.curry(transformToForm)(R.__, defaultCreditNoteEntry),
+  );
+  return R.compose(
+    orderingLinesIndexes,
+    R.map(transformCreditNoteEntry),
+  )(entries);
+};
+
+/**
+ * Filters the givne non-zero entries.
+ */
+ export const filterNonZeroEntries = (entries) => {
+  return entries.filter((item) => item.item_id && item.quantity);
+};
+
+/**
+ * Transformes form values to request body.
+ */
+ export const transformFormValuesToRequest = (values) => {
+  const entries = filterNonZeroEntries(values.entries);
+
+  return {
+    ...values,
+    entries: transformEntriesToSubmit(entries),
+  };
+};
+
 /**
 * Determines customer name field when should update.
 */
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.js
@@ -16,9 +16,10 @@ import {
  DashboardFilterButton,
  DashboardRowsHeightButton,
 } from 'components';
-
 import DashboardActionsBar from '../../../../components/Dashboard/DashboardActionsBar';

+import { useCreditNoteListContext } from './CreditNotesListProvider';
+
 import withCreditNotes from './withCreditNotes';
 import withCreditNotesActions from './withCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
@@ -45,20 +46,26 @@ function CreditNotesActionsBar({
  const history = useHistory();

  // credit note list context.
-
-  // credit note refresh action.
+  const { CreditNotesView, fields, refresh } = useCreditNoteListContext();

  // Handle view tab change.
  const handleTabChange = (view) => {
    setCreditNotesTableState({ viewSlug: view ? view.slug : null });
  };

+  // Handle click a new Credit.
+  const handleClickNewCreateNote = () => {
+    history.push('/credit-notes/new');
+  };
+
  // Handle click a refresh credit note.
-  const handleRefreshBtnClick = () => {};
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };

  // Handle table row size change.
  const handleTableRowSizeChange = (size) => {
-    addSetting('creditNote', 'tableSize', size);
+    addSetting('creditNotes', 'tableSize', size);
  };

  return (
@@ -66,11 +73,31 @@ function CreditNotesActionsBar({
      <NavbarGroup>
        <DashboardActionViewsList
          allMenuItem={true}
-          resourceName={'credit_note'}
-          views={[]}
+          resourceName={'credit_notes'}
+          views={CreditNotesView}
          onChange={handleTabChange}
        />
        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'credit_note.label.new_credit_note'} />}
+          onClick={handleClickNewCreateNote}
+        />
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: creditNoteFilterRoles,
+            defaultFieldKey: 'created_at',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setCreditNotesTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={creditNoteFilterRoles.length}
+          />
+        </AdvancedFilterPopover>

        <Button
          className={Classes.MINIMAL}
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
@@ -14,7 +14,7 @@ import withCreditNotesActions from './withCreditNotesActions';
 import withSettings from '../../../Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';

-import { useCreditNoteTableColumns } from './components';
+import { useCreditNoteTableColumns, ActionsMenu } from './components';
 import { useCreditNoteListContext } from './CreditNotesListProvider';

 import { compose } from 'utils';
@@ -35,13 +35,20 @@ function CreditNotesDataTable({
  const history = useHistory();

  // Credit note list context.
+  const {
+    creditNotes,
+    pagination,
+    isEmptyStatus,
+    isCreditNotesFetching,
+    isCreditNotesLoading,
+  } = useCreditNoteListContext();

  // Credit note table columns.
  const columns = useCreditNoteTableColumns();

  // Local storage memorizing columns widths.
  const [initialColumnsWidths, , handleColumnResizing] =
-    useMemorizedColumnsWidths(TABLES.CREDIT_NOTE);
+    useMemorizedColumnsWidths(TABLES.CREDIT_NOTES);

  // Handles fetch data once the table state change.
  const handleDataTableFetchData = React.useCallback(
@@ -55,9 +62,14 @@ function CreditNotesDataTable({
    [setCreditNotesTableState],
  );

+  // Display create note empty status instead of the table.
+  if (isEmptyStatus) {
+    return <CreditNoteEmptyStatus />;
+  }
+
  // Handle delete credit note.
  const handleDeleteCreditNote = ({ id }) => {
-    openAlert('sale-credit-note-delete', { creditNoteId: id });
+    openAlert('credit-note-delete', { creditNoteId: id });
  };

  // Handle edit credit note.
@@ -69,19 +81,19 @@ function CreditNotesDataTable({
    <DashboardContentTable>
      <DataTable
        columns={columns}
-        data={[]}
-        // loading={}
-        // headerLoading={}
-        // progressBarLoading={}
+        data={creditNotes}
+        loading={isCreditNotesLoading}
+        headerLoading={isCreditNotesLoading}
+        progressBarLoading={isCreditNotesFetching}
        onFetchData={handleDataTableFetchData}
-        manualSortBy={true}
        selectionColumn={true}
        noInitialFetch={true}
        sticky={true}
-        autoResetSortBy={false}
-        autoResetPage={false}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
        initialColumnsWidths={initialColumnsWidths}
        onColumnResizing={handleColumnResizing}
        size={creditNoteTableSize}
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesEmptyStatus.js
@@ -5,6 +5,7 @@ import { EmptyStatus } from 'components';
 import { FormattedMessage as T } from 'components';

 export default function CreditNotesEmptyStatus() {
+  const history = useHistory();
  return (
    <EmptyStatus
      title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
@@ -15,8 +16,12 @@ export default function CreditNotesEmptyStatus() {
      }
      action={
        <>
-          <Button intent={Intent.PRIMARY} large={true}>
-            <T id={'credit_note.new_credit_note'} />
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => history.push('/credit-notes/new')}
+          >
+            <T id={'credit_note.label.new_credit_note'} />
          </Button>

          <Button intent={Intent.NONE} large={true}>
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js
@@ -22,12 +22,15 @@ function CreditNotesList({
  resetCreditNotesTableState,
 }) {
  // Resets the credit note table state once the page unmount.
-  // React.useEffect(
-  //   () => () => {
-  //     resetCreditNotesTableState();
-  //   },
-  //   [resetCreditNotesTableState],
-  // );
+  React.useEffect(
+    () => () => {
+      resetCreditNotesTableState();
+    },
+    [resetCreditNotesTableState],
+  );
+
+  console.log(creditNoteTableState, 'XX');
+  console.log(creditNoteTableStateChanged, 'XX');
  return (
    <CreditNotesListProvider
      query={transformTableStateToQuery(creditNoteTableState)}
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesListProvider.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesListProvider.js
@@ -2,6 +2,13 @@ import React from 'react';
 import { isEmpty } from 'lodash';

 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useResourceViews,
+  useResourceMeta,
+  useCreditNotes,
+  useRefreshCreditNotes,
+} from 'hooks/query';
+
 import { getFieldsFromResourceMeta } from 'utils';

 const CreditNoteListContext = React.createContext();
@@ -10,13 +17,53 @@ const CreditNoteListContext = React.createContext();
 * Credit note data provider.
 */
 function CreditNotesListProvider({ query, tableStateChanged, ...props }) {
+  // Credit notes refresh action.
+  const { refresh } = useRefreshCreditNotes();
+
+  // Fetch create notes resource views and fields.
+  const { data: CreditNotesView, isLoading: isViewsLoading } =
+    useResourceViews('credit_notes');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('credit_notes');
+
+  // Fetch credit note list.
+  const {
+    data: { creditNotes, pagination, filterMeta },
+    isFetching: isCreditNotesFetching,
+    isLoading: isCreditNotesLoading,
+  } = useCreditNotes(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.S
+  const isEmptyStatus = isEmpty(creditNotes) && !isCreditNotesLoading && !tableStateChanged;
+
  // Provider payload.
-  const provider = {};
+  const provider = {
+    creditNotes,
+    pagination,
+
+    CreditNotesView,
+    refresh,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isCreditNotesFetching,
+    isCreditNotesLoading,
+    isViewsLoading,
+    isEmptyStatus,
+  };

  return (
    <DashboardInsider
-      // loading={}
-      name={'credit-note-list'}
+      loading={isViewsLoading || isResourceLoading}
+      name={'credit-notes-list'}
    >
      <CreditNoteListContext.Provider value={provider} {...props} />
    </DashboardInsider>
@@ -25,4 +72,4 @@ function CreditNotesListProvider({ query, tableStateChanged, ...props }) {

 const useCreditNoteListContext = () => React.useContext(CreditNoteListContext);

-export { CreditNotesListProvider , useCreditNoteListContext };
+export { CreditNotesListProvider, useCreditNoteListContext };
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesViewTabs.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesViewTabs.js
@@ -20,11 +20,9 @@ function CreditNotesViewTabs({
  setCreditNotesTableState,
 }) {
  // Credit note list context.
+  const { CreditNotesView } = useCreditNoteListContext();

-  // Handle click a new view tab.
-  const handleClickNewView = () => {};
-
-  // const tabs = transfromViewsToTabs(creditNoteCurrentView);
+  const tabs = transfromViewsToTabs(CreditNotesView);

  // Handle tab change.
  const handleTabsChange = (viewSlug) => {
@@ -33,7 +31,14 @@ function CreditNotesViewTabs({

  return (
    <Navbar className={'navbar--dashboard-views'}>
-      <NavbarGroup align={Alignment.LEFT}></NavbarGroup>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={creditNoteCurrentView}
+          resourceName={'credit_notes'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
    </Navbar>
  );
 }
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
@@ -22,15 +22,7 @@ import {
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';

 export function ActionsMenu({
-  payload: {
-    onEdit,
-    onDeliver,
-    onDelete,
-    onDrawer,
-    onQuick,
-    onViewDetails,
-    onPrint,
-  },
+  payload: { onEdit, onDelete, onViewDetails },
  row: { original },
 }) {
  return (
@@ -38,15 +30,16 @@ export function ActionsMenu({
      <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('credit_note.label_edit_credit_note')}
+        text={intl.get('credit_note.action.edit_credit_note')}
        onClick={safeCallback(onEdit, original)}
      />
      <MenuItem
-        text={intl.get('credit_note.label_delete_credit_note')}
+        text={intl.get('credit_note.action.delete_credit_note')}
        intent={Intent.DANGER}
        onClick={safeCallback(onDelete, original)}
        icon={<Icon icon="trash-16" iconSize={16} />}
@@ -62,12 +55,12 @@ export function useCreditNoteTableColumns() {
  return React.useMemo(
    () => [
      {
-        id: 'date',
-        Header: intl.get('date'),
-        accessor: 'date',
+        id: 'credit_note_date',
+        Header: intl.get('credit_note.column.credit_date'),
+        accessor: 'credit_note_date',
        Cell: FormatDateCell,
        width: 110,
-        className: 'date',
+        className: 'credit_note_date',
        clickable: true,
        textOverview: true,
      },
@@ -81,17 +74,18 @@ export function useCreditNoteTableColumns() {
        textOverview: true,
      },
      {
-        id: 'credit_note',
-        Header: intl.get('credit_note.label_credit_note_no'),
-        accessor: 'credit_note',
+        id: 'credit_note_number',
+        Header: intl.get('credit_note.column.credit_note_no'),
+        accessor: 'credit_note_number',
        width: 100,
-        className: 'credit_note',
+        className: 'credit_note_number',
        clickable: true,
        textOverview: true,
      },
      {
        id: 'amount',
        Header: intl.get('amount'),
+        accessor: 'amount',
        // accessor: 'formatted_amount',
        width: 120,
        align: 'right',
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.js
@@ -4,9 +4,10 @@ import {
  resetCreditNotesTableState,
 } from '../../../../store/CreditNotes/creditNotes.actions';

-const mapDispatchToProps = (dispatch) => ({
-  setCreditNoteTableState: (state) => dispatch(setCreditNotesTableState(state)),
-  resetCreditNoteTableState: () => dispatch(resetCreditNotesTableState()),
+const mapDipatchToProps = (dispatch) => ({
+  setCreditNotesTableState: (queries) =>
+    dispatch(setCreditNotesTableState(queries)),
+  resetCreditNotesTableState: () => dispatch(resetCreditNotesTableState()),
 });

-export default connect(null, mapDispatchToProps);
+export default connect(null, mapDipatchToProps);