re-structure to monorepo.

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx

@@ -0,0 +1,194 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+import { useHistory } from 'react-router-dom';
+import { CLASSES } from '@/constants/classes';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
+import { If, Icon } from '@/components';
+import { useBillFormContext } from './BillFormProvider';
+
+/**
+ * Bill floating actions bar.
+ */
+export default function BillFloatingActions() {
+  const history = useHistory();
+
+  // Formik context.
+  const { resetForm, submitForm, isSubmitting } = useFormikContext();
+
+  // Bill form context.
+  const { bill, setSubmitPayload } = useBillFormContext();
+
+  // Handle submit as open button click.
+  const handleSubmitOpenBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, status: true });
+    submitForm();
+  };
+
+  // Handle submit, open and anothe new button click.
+  const handleSubmitOpenAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, status: true, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as open & continue editing button click.
+  const handleSubmitOpenContinueEditingBtnClick = (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();
+  };
+
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Open ----------- */}
+      <If condition={!bill || !bill?.is_open}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitOpenBtnClick}
+            text={<T id={'save_open'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'open_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'open_continue_editing'} />}
+                  onClick={handleSubmitOpenContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={bill && bill?.is_open}>
+        <ButtonGroup>
+          <Button
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitOpenBtnClick}
+            style={{ minWidth: '85px' }}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={bill ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

packages/webapp/src/containers/Purchases/Bills/BillForm/BillForm.schema.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+import { isBlank } from '@/utils';
+
+const BillFormSchema = 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()
+    .min(Yup.ref('bill_date'), ({ path, min }) =>
+      intl.get('bill.validation.due_date', {
+        path,
+        min: moment(min).format('YYYY/MM/DD'),
+      }),
+    )
+    .required()
+    .label(intl.get('due_date_')),
+  bill_number: Yup.string()
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('bill_number_')),
+  reference_no: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),
+  note: Yup.string()
+    .trim()
+    .min(1)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('note')),
+  open: Yup.boolean(),
+  branch_id: Yup.string(),
+  warehouse_id: Yup.string(),
+  exchange_rate: Yup.number(),
+  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(),
+        }),
+      total: Yup.number().nullable(),
+      discount: Yup.number().nullable().min(0).max(DATATYPES_LENGTH.INT_10),
+      description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+    }),
+  ),
+});
+
+const CreateBillFormSchema = BillFormSchema;
+const EditBillFormSchema = BillFormSchema;
+
+export { CreateBillFormSchema, EditBillFormSchema };

packages/webapp/src/containers/Purchases/Bills/BillForm/BillForm.tsx

@@ -0,0 +1,138 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { isEmpty } from 'lodash';
+import { CLASSES } from '@/constants/classes';
+
+import { EditBillFormSchema, CreateBillFormSchema } from './BillForm.schema';
+import BillFormHeader from './BillFormHeader';
+import BillFloatingActions from './BillFloatingActions';
+import BillFormFooter from './BillFormFooter';
+import BillItemsEntriesEditor from './BillItemsEntriesEditor';
+import BillFormTopBar from './BillFormTopBar';
+
+import { AppToaster } from '@/components';
+import { useBillFormContext } from './BillFormProvider';
+import { compose, safeSumBy } from '@/utils';
+import {
+  defaultBill,
+  filterNonZeroEntries,
+  transformToEditForm,
+  transformFormValuesToRequest,
+  handleErrors,
+} from './utils';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * Bill form.
+ */
+function BillForm({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const history = useHistory();
+
+  // Bill form context.
+  const { bill, isNewMode, submitPayload, createBillMutate, editBillMutate } =
+    useBillFormContext();
+
+  // Initial values in create and edit mode.
+  const initialValues = useMemo(
+    () => ({
+      ...(!isEmpty(bill)
+        ? {
+            ...transformToEditForm(bill),
+          }
+        : {
+            ...defaultBill,
+            currency_code: base_currency,
+          }),
+    }),
+    [bill, base_currency],
+  );
+
+  // Handles form submit.
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, setErrors, resetForm },
+  ) => {
+    const entries = filterNonZeroEntries(values.entries);
+    const totalQuantity = safeSumBy(entries, 'quantity');
+
+    if (totalQuantity === 0) {
+      AppToaster.show({
+        message: intl.get('quantity_cannot_be_zero_or_empty'),
+        intent: Intent.DANGER,
+      });
+      setSubmitting(false);
+      return;
+    }
+    const form = {
+      ...transformFormValuesToRequest(values),
+      open: submitPayload.status,
+    };
+    // Handle the request success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'the_bill_has_been_created_successfully'
+            : 'the_bill_has_been_edited_successfully',
+          { number: values.bill_number },
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      if (submitPayload.redirect) {
+        history.push('/bills');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
+    // Handle the request error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      handleErrors(errors, { setErrors });
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createBillMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editBillMutate([bill.id, form]).then(onSuccess).catch(onError);
+    }
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_BILL,
+      )}
+    >
+      <Formik
+        validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        <Form>
+          <BillFormTopBar />
+          <BillFormHeader />
+          <BillItemsEntriesEditor />
+          <BillFormFooter />
+          <BillFloatingActions />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+export default compose(withCurrentOrganization())(BillForm);

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormCurrencyTag.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from '@/components';
+import { useBillFormContext } from './BillFormProvider';
+
+/**
+ * Bill form currnecy tag.
+ * @returns
+ */
+export default function BillFormCurrencyTag() {
+  const { isForeignVendor, selectVendor } = useBillFormContext();
+
+  if (!isForeignVendor) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectVendor?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooter.tsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { CLASSES } from '@/constants/classes';
+import { Paper, Row, Col } from '@/components';
+import { BillFormFooterLeft } from './BillFormFooterLeft';
+import { BillFormFooterRight } from './BillFormFooterRight';
+
+// Bill form floating actions.
+export default function BillFormFooter() {
+  return (
+    <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <BillFooterPaper>
+        <Row>
+          <Col md={8}>
+            <BillFormFooterLeft />
+          </Col>
+
+          <Col md={4}>
+            <BillFormFooterRight />
+          </Col>
+        </Row>
+      </BillFooterPaper>
+    </div>
+  );
+}
+
+const BillFooterPaper = styled(Paper)`
+  padding: 20px;
+`;

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from '@/components';
+
+export function BillFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- note --------- */}
+      <TermsConditsFormGroup
+        label={<T id={'bill_form.label.note'} />}
+        name={'note'}
+      >
+        <FEditableText
+          name={'note'}
+          placeholder={intl.get('bill_form.label.note.placeholder')}
+        />
+      </TermsConditsFormGroup>
+    </React.Fragment>
+  );
+}
+
+const TermsConditsFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.tsx

@@ -0,0 +1,52 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from '@/components';
+import { useBillTotals } from './utils';
+
+export function BillFormFooterRight() {
+  const {
+    formattedSubtotal,
+    formattedTotal,
+    formattedDueTotal,
+    formattedPaymentTotal,
+  } = useBillTotals();
+
+  return (
+    <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <TotalLine
+        title={<T id={'bill_form.label.subtotal'} />}
+        value={formattedSubtotal}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'bill_form.label.total'} />}
+        value={formattedTotal}
+        borderStyle={TotalLineBorderStyle.SingleDark}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+      <TotalLine
+        title={<T id={'bill_form.label.total'} />}
+        value={formattedPaymentTotal}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'bill_form.label.total'} />}
+        value={formattedDueTotal}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </BillTotalLines>
+  );
+}
+
+const BillTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
+import { CLASSES } from '@/constants/classes';
+import { PageFormBigNumber } from '@/components';
+
+import BillFormHeaderFields from './BillFormHeaderFields';
+
+/**
+ * Fill form header.
+ */
+function BillFormHeader() {
+  const {
+    values: { currency_code, entries },
+  } = useFormikContext();
+
+  // Calculate the total due amount of bill entries.
+  const totalDueAmount = useMemo(() => sumBy(entries, 'amount'), [entries]);
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <BillFormHeaderFields />
+      <PageFormBigNumber
+        label={intl.get('due_amount')}
+        amount={totalDueAmount}
+        currencyCode={currency_code}
+      />
+    </div>
+  );
+}
+export default BillFormHeader;

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx

@@ -0,0 +1,198 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import { FeatureCan, FormattedMessage as T } from '@/components';
+import { CLASSES } from '@/constants/classes';
+
+import {
+  FFormGroup,
+  VendorSelectField,
+  FieldRequiredHint,
+  Icon,
+  VendorDrawerLink,
+} from '@/components';
+
+import { useBillFormContext } from './BillFormProvider';
+import { vendorsFieldShouldUpdate } from './utils';
+import {
+  BillExchangeRateInputField,
+  BillProjectSelectButton,
+} from './components';
+import { ProjectsSelect } from '@/containers/Projects/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import {
+  momentFormatter,
+  compose,
+  tansformDateValue,
+  handleDateChange,
+  inputIntent,
+} from '@/utils';
+import { Features } from '@/constants';
+
+/**
+ * Fill form header.
+ */
+function BillFormHeader() {
+  // Bill form context.
+  const { vendors, projects } = useBillFormContext();
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ------- Vendor name ------ */}
+      <FastField
+        name={'vendor_id'}
+        vendors={vendors}
+        shouldUpdate={vendorsFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FFormGroup
+            name={'vendor_id'}
+            label={<T id={'vendor_name'} />}
+            inline={true}
+            className={classNames(
+              'form-group--vendor-name',
+              'form-group--select-list',
+              CLASSES.FILL,
+            )}
+            labelInfo={<FieldRequiredHint />}
+          >
+            <VendorSelectField
+              contacts={vendors}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
+                form.setFieldValue('currency_code', contact?.currency_code);
+              }}
+              popoverFill={true}
+              allowCreate={true}
+            />
+
+            {value && (
+              <VendorButtonLink vendorId={value}>
+                <T id={'view_vendor_details'} />
+              </VendorButtonLink>
+            )}
+          </FFormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Exchange rate ----------- */}
+      <BillExchangeRateInputField
+        name={'exchange_rate'}
+        formGroupProps={{ label: ' ', inline: true }}
+      />
+
+      {/* ------- Bill date ------- */}
+      <FastField name={'bill_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'bill_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames(CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="bill_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('bill_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{ leftIcon: <Icon icon={'date-range'} /> }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Due date ------- */}
+      <FastField name={'due_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'due_date'} />}
+            inline={true}
+            className={classNames(
+              'form-group--due-date',
+              'form-group--select-list',
+              CLASSES.FILL,
+            )}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="due_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('due_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Bill number ------- */}
+      <FastField name={'bill_number'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'bill_number'} />}
+            inline={true}
+            className={('form-group--bill_number', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="bill_number" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Reference ------- */}
+      <FastField name={'reference_no'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Project name -----------*/}
+      <FeatureCan feature={Features.Projects}>
+        <FFormGroup
+          name={'project_id'}
+          label={<T id={'bill.project_name.label'} />}
+          inline={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
+        >
+          <ProjectsSelect
+            name={'project_id'}
+            projects={projects}
+            input={BillProjectSelectButton}
+            popoverFill={true}
+          />
+        </FFormGroup>
+      </FeatureCan>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(BillFormHeader);
+
+const VendorButtonLink = styled(VendorDrawerLink)`
+  font-size: 11px;
+  margin-top: 6px;
+`;

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormPage.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import BillForm from './BillForm';
+import { BillFormProvider } from './BillFormProvider';
+
+import '@/style/pages/Bills/PageForm.scss';
+
+export default function BillFormPage() {
+  const { id } = useParams();
+  const billId = parseInt(id, 10);
+
+  return (
+    <BillFormProvider billId={billId}>
+      <BillForm />
+    </BillFormProvider>
+  );
+}

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormProvider.tsx

@@ -0,0 +1,147 @@
+// @ts-nocheck
+import React, { createContext, useState } from 'react';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { DashboardInsider } from '@/components/Dashboard';
+import { useProjects } from '@/containers/Projects/hooks';
+import {
+  useAccounts,
+  useVendors,
+  useItems,
+  useBill,
+  useWarehouses,
+  useBranches,
+  useSettings,
+  useCreateBill,
+  useEditBill,
+} from '@/hooks/query';
+
+const BillFormContext = createContext();
+
+// Filter all purchasable items only.
+const stringifiedFilterRoles = JSON.stringify([
+  {
+    index: 1,
+    fieldKey: 'purchasable',
+    value: true,
+    condition: '&&',
+    comparator: 'equals',
+  },
+  {
+    index: 2,
+    fieldKey: 'active',
+    value: true,
+    condition: '&&',
+    comparator: 'equals',
+  },
+]);
+
+/**
+ * Bill form provider.
+ */
+function BillFormProvider({ billId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isWarehouseFeatureCan = featureCan(Features.Warehouses);
+  const isBranchFeatureCan = featureCan(Features.Branches);
+  const isProjectsFeatureCan = featureCan(Features.Projects);
+
+  // Handle fetch accounts.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Handle fetch vendors data table
+  const {
+    data: { vendors },
+    isLoading: isVendorsLoading,
+  } = useVendors({ page_size: 10000 });
+
+  // Handle fetch Items data table or list
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+  } = useItems({
+    page_size: 10000,
+    stringified_filter_roles: stringifiedFilterRoles,
+  });
+
+  // Handle fetch bill details.
+  const { data: bill, isLoading: isBillLoading } = useBill(billId, {
+    enabled: !!billId,
+  });
+
+  // Fetch warehouses list.
+  const {
+    data: warehouses,
+    isLoading: isWarehouesLoading,
+    isSuccess: isWarehousesSuccess,
+  } = useWarehouses({}, { enabled: isWarehouseFeatureCan });
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches({}, { enabled: isBranchFeatureCan });
+
+  // Fetches the projects list.
+  const {
+    data: { projects },
+    isLoading: isProjectsLoading,
+  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
+
+  // Handle fetching bill settings.
+  const { isFetching: isSettingLoading } = useSettings();
+
+  // Form submit payload.
+  const [submitPayload, setSubmitPayload] = useState({});
+
+  // Create and edit bills mutations.
+  const { mutateAsync: createBillMutate } = useCreateBill();
+  const { mutateAsync: editBillMutate } = useEditBill();
+
+  const isNewMode = !billId;
+
+  // Determines whether the warehouse and branches are loading.
+  const isFeatureLoading =
+    isWarehouesLoading || isBranchesLoading || isProjectsLoading;
+
+  const provider = {
+    accounts,
+    vendors,
+    items,
+    bill,
+    warehouses,
+    branches,
+    projects,
+    submitPayload,
+    isNewMode,
+
+    isSettingLoading,
+    isBillLoading,
+    isAccountsLoading,
+    isItemsLoading,
+    isVendorsLoading,
+    isFeatureLoading,
+    isBranchesSuccess,
+    isWarehousesSuccess,
+
+    createBillMutate,
+    editBillMutate,
+    setSubmitPayload,
+  };
+
+  return (
+    <DashboardInsider
+      loading={
+        isVendorsLoading || isItemsLoading || isAccountsLoading || isBillLoading
+      }
+      name={'bill-form'}
+    >
+      <BillFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useBillFormContext = () => React.useContext(BillFormContext);
+
+export { BillFormProvider, useBillFormContext };

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormTopBar.tsx

@@ -0,0 +1,115 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  Alignment,
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+} from '@blueprintjs/core';
+import {
+  useSetPrimaryBranchToForm,
+  useSetPrimaryWarehouseToForm,
+} from './utils';
+import { useFeatureCan } from '@/hooks/state';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from '@/components';
+import { useBillFormContext } from './BillFormProvider';
+import { Features } from '@/constants';
+
+/**
+ * Bill form topbar .
+ * @returns {JSX.Element}
+ */
+export default function BillFormTopBar() {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // Sets the primary warehouse to form.
+  useSetPrimaryWarehouseToForm();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
+  // Can't display the navigation bar if warehouses or branches feature is not enabled.
+  if (!featureCan(Features.Warehouses) && !featureCan(Features.Branches)) {
+    return null;
+  }
+
+  return (
+    <FormTopbar>
+      <NavbarGroup align={Alignment.LEFT}>
+        <FeatureCan feature={Features.Branches}>
+          <BillFormSelectBranch />
+        </FeatureCan>
+        {featureCan(Features.Warehouses) && featureCan(Features.Branches) && (
+          <NavbarDivider />
+        )}
+        <FeatureCan feature={Features.Warehouses}>
+          <BillFormSelectWarehouse />
+        </FeatureCan>
+      </NavbarGroup>
+    </FormTopbar>
+  );
+}
+
+function BillFormSelectBranch() {
+  // Bill form context.
+  const { branches, isBranchesLoading } = useBillFormContext();
+
+  return isBranchesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <BranchSelect
+      name={'branch_id'}
+      branches={branches}
+      input={BillBranchSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+
+function BillFormSelectWarehouse() {
+  // Bill form context.
+  const { warehouses, isWarehouesLoading } = useBillFormContext();
+
+  return isWarehouesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <WarehouseSelect
+      name={'warehouse_id'}
+      warehouses={warehouses}
+      input={BillWarehouseSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+
+function BillWarehouseSelectButton({ label }) {
+  return (
+    <Button
+      text={intl.get('bill.warehouse_button.label', { label })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
+    />
+  );
+}
+
+function BillBranchSelectButton({ label }) {
+  return (
+    <Button
+      text={intl.get('bill.branch_button.label', { label })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'branch-16'} iconSize={16} />}
+    />
+  );
+}

packages/webapp/src/containers/Purchases/Bills/BillForm/BillItemsEntriesEditor.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import ItemsEntriesTable from '@/containers/Entries/ItemsEntriesTable';
+import { FastField } from 'formik';
+import { CLASSES } from '@/constants/classes';
+import { useBillFormContext } from './BillFormProvider';
+import { entriesFieldShouldUpdate } from './utils';
+import { ITEM_TYPE } from '@/containers/Entries/utils';
+
+/**
+ * Bill form body. 
+ */
+export default function BillFormBody({ defaultBill }) {
+  const { items } = useBillFormContext();
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField
+        name={'entries'}
+        items={items}
+        shouldUpdate={entriesFieldShouldUpdate}
+      >
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <ItemsEntriesTable
+            entries={value}
+            onUpdateData={(entries) => {
+              setFieldValue('entries', entries);
+            }}
+            items={items}
+            errors={error}
+            linesNumber={4}
+            currencyCode={values.currency_code}
+            itemType={ITEM_TYPE.PURCHASABLE}
+            landedCost={true}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

packages/webapp/src/containers/Purchases/Bills/BillForm/components.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Button } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { ExchangeRateInputGroup } from '@/components';
+import { useCurrentOrganization } from '@/hooks/state';
+import { useBillIsForeignCustomer } from './utils';
+
+/**
+ * bill exchange rate input field.
+ * @returns {JSX.Element}
+ */
+export function BillExchangeRateInputField({ ...props }) {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  const isForeignCustomer = useBillIsForeignCustomer();
+
+  // Can't continue if the customer is not foreign.
+  if (!isForeignCustomer) {
+    return null;
+  }
+  return (
+    <ExchangeRateInputGroup
+      fromCurrency={values.currency_code}
+      toCurrency={currentOrganization.base_currency}
+      {...props}
+    />
+  );
+}
+
+/**
+ * bill project select.
+ * @returns {JSX.Element}
+ */
+ export function BillProjectSelectButton({ label }) {
+  return <Button text={label ?? intl.get('select_project')} />;
+}

packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx

@@ -0,0 +1,287 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+import { first } from 'lodash';
+import { Intent } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { AppToaster } from '@/components';
+import {
+  defaultFastFieldShouldUpdate,
+  transformToForm,
+  repeatValue,
+  orderingLinesIndexes,
+  formattedAmount,
+} from '@/utils';
+import {
+  updateItemsEntriesTotal,
+  ensureEntriesHaveEmptyLine,
+} from '@/containers/Entries/utils';
+import { useCurrentOrganization } from '@/hooks/state';
+import { isLandedCostDisabled, getEntriesTotal } from '@/containers/Entries/utils';
+import { useBillFormContext } from './BillFormProvider';
+
+export const MIN_LINES_NUMBER = 1;
+
+// Default bill entry.
+export const defaultBillEntry = {
+  index: 0,
+  item_id: '',
+  rate: '',
+  discount: '',
+  quantity: '',
+  description: '',
+  amount: '',
+  landed_cost: false,
+};
+
+// Default bill.
+export const defaultBill = {
+  vendor_id: '',
+  bill_number: '',
+  bill_date: moment(new Date()).format('YYYY-MM-DD'),
+  due_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference_no: '',
+  note: '',
+  open: '',
+  branch_id: '',
+  warehouse_id: '',
+  exchange_rate: 1,
+  currency_code: '',
+  entries: [...repeatValue(defaultBillEntry, MIN_LINES_NUMBER)],
+};
+
+export const ERRORS = {
+  // Bills
+  BILL_NUMBER_EXISTS: 'BILL.NUMBER.EXISTS',
+  ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED:
+    'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
+};
+/**
+ * Transformes the bill to initial values of edit form.
+ */
+export const transformToEditForm = (bill) => {
+  const initialEntries = [
+    ...bill.entries.map((entry) => ({
+      ...transformToForm(entry, defaultBillEntry),
+      landed_cost_disabled: isLandedCostDisabled(entry.item),
+    })),
+    ...repeatValue(
+      defaultBillEntry,
+      Math.max(MIN_LINES_NUMBER - bill.entries.length, 0),
+    ),
+  ];
+  const entries = R.compose(
+    ensureEntriesHaveEmptyLine(defaultBillEntry),
+    updateItemsEntriesTotal,
+  )(initialEntries);
+
+  return {
+    ...transformToForm(bill, defaultBill),
+    entries,
+  };
+};
+
+/**
+ * Transformes bill entries to submit request.
+ */
+export const transformEntriesToSubmit = (entries) => {
+  const transformBillEntry = R.compose(
+    R.omit(['amount']),
+    R.curry(transformToForm)(R.__, defaultBillEntry),
+  );
+  return R.compose(orderingLinesIndexes, R.map(transformBillEntry))(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),
+    open: false,
+  };
+};
+
+/**
+ * Handle delete errors.
+ */
+export const handleDeleteErrors = (errors) => {
+  if (
+    errors.find((error) => error.type === 'BILL_HAS_ASSOCIATED_PAYMENT_ENTRIES')
+  ) {
+    AppToaster.show({
+      message: intl.get('cannot_delete_bill_that_has_payment_transactions'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find((error) => error.type === 'BILL_HAS_ASSOCIATED_LANDED_COSTS')
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'cannot_delete_bill_that_has_associated_landed_cost_transactions',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find((error) => error.type === 'BILL_HAS_APPLIED_TO_VENDOR_CREDIT')
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'bills.error.you_couldn_t_delete_bill_has_reconciled_with_vendor_credit',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+/**
+ * Detarmines vendors fast field should update
+ */
+export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.vendors !== oldProps.vendors ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Detarmines entries fast field should update.
+ */
+export const entriesFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.items !== oldProps.items ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+// Transform response error to fields.
+export const handleErrors = (errors, { setErrors }) => {
+  if (errors.some((e) => e.type === ERRORS.BILL_NUMBER_EXISTS)) {
+    setErrors({
+      bill_number: intl.get('bill_number_exists'),
+    });
+  }
+  if (
+    errors.some(
+      (e) => e.type === ERRORS.ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED,
+    )
+  ) {
+    setErrors(
+      AppToaster.show({
+        intent: Intent.DANGER,
+        message: 'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
+      }),
+    );
+  }
+};
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useBillFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};
+
+export const useSetPrimaryWarehouseToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { warehouses, isWarehousesSuccess } = useBillFormContext();
+
+  React.useEffect(() => {
+    if (isWarehousesSuccess) {
+      const primaryWarehouse =
+        warehouses.find((b) => b.primary) || first(warehouses);
+
+      if (primaryWarehouse) {
+        setFieldValue('warehouse_id', primaryWarehouse.id);
+      }
+    }
+  }, [isWarehousesSuccess, setFieldValue, warehouses]);
+};
+
+/**
+ * Retreives the bill totals.
+ */
+export const useBillTotals = () => {
+  const {
+    values: { entries, currency_code: currencyCode },
+  } = useFormikContext();
+
+  // Retrieves the bili entries total.
+  const total = React.useMemo(() => getEntriesTotal(entries), [entries]);
+
+  // Retrieves the formatted total money.
+  const formattedTotal = React.useMemo(
+    () => formattedAmount(total, currencyCode),
+    [total, currencyCode],
+  );
+  // Retrieves the formatted subtotal.
+  const formattedSubtotal = React.useMemo(
+    () => formattedAmount(total, currencyCode, { money: false }),
+    [total, currencyCode],
+  );
+  // Retrieves the payment total.
+  const paymentTotal = React.useMemo(() => 0, []);
+
+  // Retireves the formatted payment total.
+  const formattedPaymentTotal = React.useMemo(
+    () => formattedAmount(paymentTotal, currencyCode),
+    [paymentTotal, currencyCode],
+  );
+  // Retrieves the formatted due total.
+  const dueTotal = React.useMemo(
+    () => total - paymentTotal,
+    [total, paymentTotal],
+  );
+  // Retrieves the formatted due total.
+  const formattedDueTotal = React.useMemo(
+    () => formattedAmount(dueTotal, currencyCode),
+    [dueTotal, currencyCode],
+  );
+
+  return {
+    total,
+    paymentTotal,
+    dueTotal,
+    formattedTotal,
+    formattedSubtotal,
+    formattedPaymentTotal,
+    formattedDueTotal,
+  };
+};
+
+/**
+ * Detarmines whether the bill has foreign customer.
+ * @returns {boolean}
+ */
+export const useBillIsForeignCustomer = () => {
+  const { values } = useFormikContext();
+  const currentOrganization = useCurrentOrganization();
+
+  const isForeignCustomer = React.useMemo(
+    () => values.currency_code !== currentOrganization.base_currency,
+    [values.currency_code, currentOrganization.base_currency],
+  );
+  return isForeignCustomer;
+};

packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx

@@ -0,0 +1,125 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+
+import { formattedAmount } from '@/utils';
+import { T, Icon, Choose, If } from '@/components';
+
+import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import { AbilitySubject, BillAction } from '@/constants/abilityOption';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+/**
+ * Universal search bill item select action.
+ */
+function BillUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+  onAction,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.BILL) {
+    openDrawer('bill-drawer', { billId: resourceId });
+    onAction && onAction();
+  }
+  return null;
+}
+
+export const BillUniversalSearchSelect = withDrawerActions(
+  BillUniversalSearchSelectComponent,
+);
+
+/**
+ * Status accessor.
+ */
+export function BillStatus({ bill }) {
+  return (
+    <Choose>
+      <Choose.When condition={bill.is_fully_paid && bill.is_open}>
+        <span class="fully-paid-text">
+          <T id={'paid'} />
+        </span>
+      </Choose.When>
+      <Choose.When condition={bill.is_open}>
+        <Choose>
+          <Choose.When condition={bill.is_overdue}>
+            <span className={'overdue-status'}>
+              {intl.get('overdue_by', { overdue: bill.overdue_days })}
+            </span>
+          </Choose.When>
+          <Choose.Otherwise>
+            <span className={'due-status'}>
+              {intl.get('due_in', { due: bill.remaining_days })}
+            </span>
+          </Choose.Otherwise>
+        </Choose>
+        <If condition={bill.is_partially_paid}>
+          <span className="partial-paid">
+            {intl.get('day_partially_paid', {
+              due: formattedAmount(bill.due_amount, bill.currency_code),
+            })}
+          </span>
+        </If>
+      </Choose.When>
+      <Choose.Otherwise>
+        <span class="draft">
+          <T id={'draft'} />
+        </span>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Bill universal search item.
+ */
+export function BillUniversalSearchItem(
+  item,
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{item.text}</div>
+          <span class="bp3-text-muted">
+            {item.reference.bill_number}{' '}
+            <Icon icon={'caret-right-16'} iconSize={16} />
+            {item.reference.formatted_bill_date}
+          </span>
+        </div>
+      }
+      label={
+        <>
+          <div class="amount">{item.reference.formatted_amount}</div>
+          <BillStatus bill={item.reference} />
+        </>
+      }
+      onClick={handleClick}
+      className={'universal-search__item--bill'}
+    />
+  );
+}
+
+const billsToSearch = (bill) => ({
+  id: bill.id,
+  text: bill.vendor.display_name,
+  reference: bill,
+});
+
+export const universalSearchBillBind = () => ({
+  resourceType: RESOURCES_TYPES.BILL,
+  optionItemLabel: intl.get('bills'),
+  selectItemAction: BillUniversalSearchSelect,
+  itemRenderer: BillUniversalSearchItem,
+  itemSelect: billsToSearch,
+  permission: {
+    ability: BillAction.View,
+    subject: AbilitySubject.Bill,
+  },
+});

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx

@@ -0,0 +1,167 @@
+// @ts-nocheck
+import React, { useState } from 'react';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+
+import { useHistory } from 'react-router-dom';
+
+import {
+  If,
+  Can,
+  Icon,
+  FormattedMessage as T,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+  DashboardRowsHeightButton,
+  DashboardActionsBar,
+} from '@/components';
+import { BillAction, AbilitySubject } from '@/constants/abilityOption';
+
+import withBills from './withBills';
+import withBillsActions from './withBillsActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+
+import { useBillsListContext } from './BillsListProvider';
+import { useRefreshBills } from '@/hooks/query/bills';
+import { compose } from '@/utils';
+
+/**
+ * Bills actions bar.
+ */
+function BillActionsBar({
+  // #withBillActions
+  setBillsTableState,
+
+  // #withBills
+  billsConditionsRoles,
+
+  // #withSettings
+  billsTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+
+  // Bills refresh action.
+  const { refresh } = useRefreshBills();
+
+  // Bills list context.
+  const { billsViews, fields } = useBillsListContext();
+
+  // Handle click a new bill.
+  const handleClickNewBill = () => {
+    history.push('/bills/new');
+  };
+
+  // Handle tab change.
+  const handleTabChange = (view) => {
+    setBillsTableState({
+      viewSlug: view ? view.slug : null,
+    });
+  };
+  // Handle click a refresh bills
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('bills', 'tableSize', size);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'bills'}
+          views={billsViews}
+          allMenuItem={true}
+          allMenuItemText={<T id={'all'} />}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Can I={BillAction.Create} a={AbilitySubject.Bill}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_bill'} />}
+            onClick={handleClickNewBill}
+          />
+        </Can>
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: billsConditionsRoles,
+            defaultFieldKey: 'bill_number',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setBillsTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={billsConditionsRoles.length}
+          />
+        </AdvancedFilterPopover>
+
+        <If condition={false}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            // onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={billsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withBillsActions,
+  withSettingsActions,
+  withBills(({ billsTableState }) => ({
+    billsConditionsRoles: billsTableState.filterRoles,
+  })),
+  withSettings(({ billsettings }) => ({
+    billsTableSize: billsettings?.tableSize,
+  })),
+)(BillActionsBar);

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+
+const BillOpenAlert = React.lazy(
+  () => import('@/containers/Alerts/Bills/BillOpenAlert'),
+);
+const BillDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Bills/BillDeleteAlert'),
+);
+
+const BillLocatedLandedCostDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert'),
+);
+
+export default [
+  { name: 'bill-delete', component: BillDeleteAlert },
+  { name: 'bill-open', component: BillOpenAlert },
+  {
+    name: 'bill-located-cost-delete',
+    component: BillLocatedLandedCostDeleteAlert,
+  },
+];

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from '@/components';
+import { Can, FormattedMessage as T } from '@/components';
+import { BillAction, AbilitySubject } from '@/constants/abilityOption';
+
+export default function BillsEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'manage_the_organization_s_services_and_products'} />}
+      description={
+        <p>
+          <T id="bill_empty_status_description" />
+        </p>
+      }
+      action={
+        <>
+          <Can I={BillAction.Create} a={AbilitySubject.Bill}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/bills/new');
+              }}
+            >
+              <T id={'new_bill'} />
+            </Button>
+
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
+        </>
+      }
+    />
+  );
+}

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsList.tsx

@@ -0,0 +1,58 @@
+// @ts-nocheck
+import React, { useEffect } from 'react';
+import { DashboardPageContent } from '@/components';
+
+import '@/style/pages/Bills/List.scss';
+
+import { BillsListProvider } from './BillsListProvider';
+
+import BillsActionsBar from './BillsActionsBar';
+import BillsViewsTabs from './BillsViewsTabs';
+import BillsTable from './BillsTable';
+
+import withBills from './withBills';
+import withBillsActions from './withBillsActions';
+
+import { transformTableStateToQuery, compose } from '@/utils';
+
+/**
+ * Bills list.
+ */
+function BillsList({
+  // #withBills
+  billsTableState,
+  billsTableStateChanged,
+
+  // #withBillsActions
+  resetBillsTableState,
+}) {
+  // Resets the accounts table state once the page unmount.
+  useEffect(
+    () => () => {
+      resetBillsTableState();
+    },
+    [resetBillsTableState],
+  );
+
+  return (
+    <BillsListProvider
+      query={transformTableStateToQuery(billsTableState)}
+      tableStateChanged={billsTableStateChanged}
+    >
+      <BillsActionsBar />
+
+      <DashboardPageContent>
+        <BillsViewsTabs />
+        <BillsTable />
+      </DashboardPageContent>
+    </BillsListProvider>
+  );
+}
+
+export default compose(
+  withBills(({ billsTableState, billsTableStateChanged }) => ({
+    billsTableState,
+    billsTableStateChanged,
+  })),
+  withBillsActions,
+)(BillsList);

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import { DashboardInsider } from '@/components/Dashboard';
+import { useResourceViews, useResourceMeta, useBills } from '@/hooks/query';
+
+import { getFieldsFromResourceMeta } from '@/utils';
+
+const BillsListContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function BillsListProvider({ query, tableStateChanged, ...props }) {
+  // Fetch accounts resource views and fields.
+  const { data: billsViews, isLoading: isViewsLoading } =
+    useResourceViews('bills');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('bills');
+
+  // Fetch accounts list according to the given custom view id.
+  const {
+    data: { bills, pagination, filterMeta },
+    isLoading: isBillsLoading,
+    isFetching: isBillsFetching,
+  } = useBills(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isEmpty(bills) && !isBillsLoading && !tableStateChanged;
+
+  // Provider payload.
+  const provider = {
+    bills,
+    pagination,
+    billsViews,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isBillsLoading,
+    isBillsFetching,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'bills'}
+    >
+      <BillsListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useBillsListContext = () => React.useContext(BillsListContext);
+
+export { BillsListProvider, useBillsListContext };

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx

@@ -0,0 +1,163 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { TABLES } from '@/constants/tables';
+import {
+  DataTable,
+  DashboardContentTable,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+} from '@/components';
+
+import BillsEmptyStatus from './BillsEmptyStatus';
+
+import withBills from './withBills';
+import withBillActions from './withBillsActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+import { useBillsTableColumns, ActionsMenu } from './components';
+import { useBillsListContext } from './BillsListProvider';
+import { useMemorizedColumnsWidths } from '@/hooks';
+
+import { compose } from '@/utils';
+
+/**
+ * Bills transactions datatable.
+ */
+function BillsDataTable({
+  // #withBillsActions
+  setBillsTableState,
+
+  // #withBills
+  billsTableState,
+
+  // #withAlerts
+  openAlert,
+
+  // #withDialogActions
+  openDialog,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withSettings
+  billsTableSize,
+}) {
+  // Bills list context.
+  const { bills, pagination, isBillsLoading, isBillsFetching, isEmptyStatus } =
+    useBillsListContext();
+
+  const history = useHistory();
+
+  // Bills table columns.
+  const columns = useBillsTableColumns();
+
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      setBillsTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setBillsTableState],
+  );
+
+  // Handle bill edit action.
+  const handleEditBill = (bill) => {
+    history.push(`/bills/${bill.id}/edit`);
+  };
+
+  // Handle convert to vendor credit.
+  const handleConvertToVendorCredit = ({ id }) => {
+    history.push(`/vendor-credits/new?from_bill_id=${id}`, { billId: id });
+  };
+
+  // Handle bill delete action.
+  const handleDeleteBill = (bill) => {
+    openAlert('bill-delete', { billId: bill.id });
+  };
+
+  // Handle bill open action.
+  const handleOpenBill = (bill) => {
+    openAlert('bill-open', { billId: bill.id });
+  };
+
+  // Handle quick payment made action.
+  const handleQuickPaymentMade = ({ id }) => {
+    openDialog('quick-payment-made', { billId: id });
+  };
+
+  // handle allocate landed cost.
+  const handleAllocateLandedCost = ({ id }) => {
+    openDialog('allocate-landed-cost', { billId: id });
+  };
+
+  // Handle view detail bill.
+  const handleViewDetailBill = ({ id }) => {
+    openDrawer('bill-drawer', { billId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('bill-drawer', { billId: cell.row.original.id });
+  };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.BILLS);
+
+  if (isEmptyStatus) {
+    return <BillsEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={bills}
+        loading={isBillsLoading}
+        headerLoading={isBillsLoading}
+        progressBarLoading={isBillsFetching}
+        onFetchData={handleFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        size={billsTableSize}
+        payload={{
+          onDelete: handleDeleteBill,
+          onEdit: handleEditBill,
+          onOpen: handleOpenBill,
+          onQuick: handleQuickPaymentMade,
+          onAllocateLandedCost: handleAllocateLandedCost,
+          onViewDetails: handleViewDetailBill,
+          onConvert: handleConvertToVendorCredit,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withBills(({ billsTableState }) => ({ billsTableState })),
+  withBillActions,
+  withAlertsActions,
+  withDrawerActions,
+  withDialogActions,
+  withSettings(({ billsettings }) => ({
+    billsTableSize: billsettings?.tableSize,
+  })),
+)(BillsDataTable);

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.tsx

@@ -0,0 +1,54 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+import { DashboardViewsTabs } from '@/components';
+import { useBillsListContext } from './BillsListProvider';
+
+import withBills from './withBills';
+import withBillActions from './withBillsActions';
+
+import { compose, transfromViewsToTabs } from '@/utils';
+
+/**
+ * Bills view tabs.
+ */
+function BillViewTabs({
+  // #withBillActions
+  setBillsTableState,
+
+  // #withBills
+  billsCurrentView,
+}) {
+  // Bills list context.
+  const { billsViews } = useBillsListContext();
+
+  // Handle tab chaging.
+  const handleTabsChange = (viewSlug) => {
+    setBillsTableState({
+      viewSlug: viewSlug || null,
+    });
+  };
+
+  const tabs = transfromViewsToTabs(billsViews);
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={billsCurrentView}
+          resourceName={'bills'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withBillActions,
+  withBills(({ billsTableState }) => ({
+    billsCurrentView: billsTableState.viewSlug,
+  })),
+)(BillViewTabs);

packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx

@@ -0,0 +1,235 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  Intent,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Tag,
+  ProgressBar,
+} from '@blueprintjs/core';
+
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Icon,
+  If,
+  Choose,
+  Money,
+  Can,
+} from '@/components';
+import {
+  formattedAmount,
+  safeCallback,
+  isBlank,
+  calculateStatus,
+} from '@/utils';
+import {
+  BillAction,
+  PaymentMadeAction,
+  AbilitySubject,
+} from '@/constants/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  payload: {
+    onEdit,
+    onOpen,
+    onDelete,
+    onQuick,
+    onConvert,
+    onViewDetails,
+    onAllocateLandedCost,
+  },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_bill')}
+          onClick={safeCallback(onEdit, original)}
+        />
+        <MenuItem
+          icon={<Icon icon="convert_to" />}
+          text={intl.get('bill.convert_to_credit_note')}
+          onClick={safeCallback(onConvert, original)}
+        />
+
+        <If condition={!original.is_open}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('mark_as_open')}
+            onClick={safeCallback(onOpen, original)}
+          />
+        </If>
+      </Can>
+      <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
+        <If condition={original.is_open && !original.is_fully_paid}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={intl.get('add_payment')}
+            onClick={safeCallback(onQuick, original)}
+          />
+        </If>
+      </Can>
+      <MenuItem
+        icon={<Icon icon="receipt-24" iconSize={16} />}
+        text={intl.get('allocate_landed_coast')}
+        onClick={safeCallback(onAllocateLandedCost, original)}
+      />
+      <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('delete_bill')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Amount accessor.
+ */
+export function AmountAccessor(bill) {
+  return !isBlank(bill.amount) ? (
+    <Money amount={bill.amount} currency={bill.currency_code} />
+  ) : (
+    ''
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(bill) {
+  return (
+    <div className={'status-accessor'}>
+      <Choose>
+        <Choose.When condition={bill.is_fully_paid && bill.is_open}>
+          <span className={'fully-paid-icon'}>
+            <Icon icon="small-tick" iconSize={18} />
+          </span>
+          <span class="fully-paid-text">
+            <T id={'paid'} />
+          </span>
+        </Choose.When>
+        <Choose.When condition={bill.is_open}>
+          <Choose>
+            <Choose.When condition={bill.is_overdue}>
+              <span className={'overdue-status'}>
+                {intl.get('overdue_by', { overdue: bill.overdue_days })}
+              </span>
+            </Choose.When>
+            <Choose.Otherwise>
+              <span className={'due-status'}>
+                {intl.get('due_in', { due: bill.remaining_days })}
+              </span>
+            </Choose.Otherwise>
+          </Choose>
+          <If condition={bill.is_partially_paid}>
+            <span className="partial-paid">
+              {intl.get('day_partially_paid', {
+                due: formattedAmount(bill.due_amount, bill.currency_code),
+              })}
+            </span>
+            <ProgressBar
+              animate={false}
+              stripes={false}
+              intent={Intent.PRIMARY}
+              value={calculateStatus(bill.balance, bill.amount)}
+            />
+          </If>
+        </Choose.When>
+        <Choose.Otherwise>
+          <Tag minimal={true} round={true}>
+            <T id={'draft'} />
+          </Tag>
+        </Choose.Otherwise>
+      </Choose>
+    </div>
+  );
+}
+
+/**
+ * Retrieve bills table columns.
+ */
+export function useBillsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'bill_date',
+        Header: intl.get('bill_date'),
+        accessor: 'bill_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'bill_date',
+        clickable: true,
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor_name'),
+        accessor: 'vendor.display_name',
+        width: 180,
+        className: 'vendor',
+        clickable: true,
+      },
+      {
+        id: 'bill_number',
+        Header: intl.get('bill_number'),
+        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
+        width: 100,
+        className: 'bill_number',
+        clickable: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: AmountAccessor,
+        width: 120,
+        className: 'amount',
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: StatusAccessor,
+        width: 160,
+        className: 'status',
+        clickable: true,
+      },
+      {
+        id: 'due_date',
+        Header: intl.get('due_date'),
+        accessor: 'due_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'due_date',
+        clickable: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Purchases/Bills/BillsLanding/withBills.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getBillsTableStateFactory,
+  billsTableStateChangedFactory,
+} from '@/store/Bills/bills.selectors';
+
+export default (mapState) => {
+  const getBillsTableState = getBillsTableStateFactory();
+  const billsTableStateChanged = billsTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      billsTableState: getBillsTableState(state, props),
+      billsTableStateChanged: billsTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/Purchases/Bills/BillsLanding/withBillsActions.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  setBillsTableState,
+  resetBillsTableState,
+} from '@/store/Bills/bills.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setBillsTableState: (queries) => dispatch(setBillsTableState(queries)),
+  resetBillsTableState: () => dispatch(resetBillsTableState()),
+});
+
+export default connect(null, mapDispatchToProps);

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx

@@ -0,0 +1,190 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+import { useFormikContext } from 'formik';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { If, Icon, FormattedMessage as T } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+
+/**
+ * Purchases Credit note floating actions.
+ */
+export default function VendorCreditNoteFloatingActions() {
+  const history = useHistory();
+
+  // Formik context.
+  const { resetForm, submitForm, isSubmitting } = useFormikContext();
+
+  // Credit note form context.
+  const { setSubmitPayload, vendorCredit } = useVendorCreditNoteFormContext();
+
+  // Handle submit as open button click.
+  const handleSubmitOpenBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, open: true });
+    submitForm();
+  };
+
+  // Handle submit, open and anothe new button click.
+  const handleSubmitOpenAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: true, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as open & continue editing button click.
+  const handleSubmitOpenContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: true });
+    submitForm();
+  };
+  // Handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, open: false });
+    submitForm();
+  };
+
+  // handle submit as draft & new button click.
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: false, resetForm: true });
+    submitForm();
+  };
+
+  // Handle submit as draft & continue editing button click.
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: false });
+    submitForm();
+  };
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Open  ----------- */}
+      <If condition={!vendorCredit || !vendorCredit?.is_open}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitOpenBtnClick}
+            text={<T id={'save_open'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'open_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'open_continue_editing'} />}
+                  onClick={handleSubmitOpenContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            className={'ml1'}
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={vendorCredit && vendorCredit?.is_open}>
+        <ButtonGroup>
+          <Button
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitOpenBtnClick}
+            style={{ minWidth: '85px' }}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={vendorCredit ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+import { isBlank } from '@/utils';
+
+const getSchema = Yup.object().shape({
+  vendor_id: Yup.number().required().label(intl.get('vendor_name_')),
+  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),
+  note: Yup.string()
+    .trim()
+    .min(1)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('note')),
+  open: Yup.boolean(),
+  branch_id: Yup.string(),
+  warehouse_id: Yup.string(),
+  exchange_rate: Yup.number(),
+  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(DATATYPES_LENGTH.INT_10),
+      description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+    }),
+  ),
+});
+
+export const CreateCreditNoteFormSchema = getSchema;
+export const EditCreditNoteFormSchema = getSchema;

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.tsx

@@ -0,0 +1,176 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { isEmpty } from 'lodash';
+import { CLASSES } from '@/constants/classes';
+import {
+  CreateCreditNoteFormSchema,
+  EditCreditNoteFormSchema,
+} from './VendorCreditNoteForm.schema';
+
+import VendorCreditNoteFormHeader from './VendorCreditNoteFormHeader';
+import VendorCreditNoteItemsEntriesEditor from './VendorCreditNoteItemsEntriesEditor';
+import VendorCreditNoteFormFooter from './VendorCreditNoteFormFooter';
+import VendorCreditNoteFloatingActions from './VendorCreditNoteFloatingActions';
+import VendorCreditNoteFormDialogs from './VendorCreditNoteFormDialogs';
+import VendorCreditNoteFormTopBar from './VendorCreditNoteFormTopBar';
+
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+
+import { AppToaster } from '@/components';
+import { compose, safeSumBy, transactionNumber } from '@/utils';
+import {
+  defaultVendorsCreditNote,
+  filterNonZeroEntries,
+  transformToEditForm,
+  transformFormValuesToRequest,
+} from './utils';
+
+import withSettings from '@/containers/Settings/withSettings';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * Vendor Credit note form.
+ */
+function VendorCreditNoteForm({
+  // #withSettings
+  vendorcreditAutoIncrement,
+  vendorcreditNumberPrefix,
+  vendorcreditNextNumber,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const history = useHistory();
+
+  // Vendor Credit note form context.
+  const {
+    isNewMode,
+    submitPayload,
+    vendorCredit,
+    newVendorCredit,
+    createVendorCreditMutate,
+    editVendorCreditMutate,
+  } = useVendorCreditNoteFormContext();
+
+  // Credit number.
+  const vendorCreditNumber = transactionNumber(
+    vendorcreditNumberPrefix,
+    vendorcreditNextNumber,
+  );
+
+  // Initial values.
+  const initialValues = React.useMemo(
+    () => ({
+      ...(!isEmpty(vendorCredit)
+        ? {
+            ...transformToEditForm(vendorCredit),
+          }
+        : {
+            ...defaultVendorsCreditNote,
+            ...(vendorcreditAutoIncrement && {
+              vendor_credit_number: vendorCreditNumber,
+            }),
+            currency_code: base_currency,
+            ...newVendorCredit,
+          }),
+    }),
+    [vendorCredit, base_currency],
+  );
+
+  // Handles form submit.
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, setErrors, resetForm },
+  ) => {
+    const entries = filterNonZeroEntries(values.entries);
+    const totalQuantity = safeSumBy(entries, 'quantity');
+
+    if (totalQuantity === 0) {
+      AppToaster.show({
+        message: intl.get('quantity_cannot_be_zero_or_empty'),
+        intent: Intent.DANGER,
+      });
+      setSubmitting(false);
+      return;
+    }
+    const form = {
+      ...transformFormValuesToRequest(values),
+      open: submitPayload.open,
+    };
+    // Handle the request success.
+    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 (
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_VENDOR_CREDIT_NOTE,
+      )}
+    >
+      <Formik
+        validationSchema={
+          isNewMode ? CreateCreditNoteFormSchema : EditCreditNoteFormSchema
+        }
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        <Form>
+          <VendorCreditNoteFormTopBar />
+          <VendorCreditNoteFormHeader />
+          <VendorCreditNoteItemsEntriesEditor />
+          <VendorCreditNoteFormFooter />
+          <VendorCreditNoteFloatingActions />
+          <VendorCreditNoteFormDialogs />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(
+  withSettings(({ vendorsCreditNoteSetting }) => ({
+    vendorcreditAutoIncrement: vendorsCreditNoteSetting?.autoIncrement,
+    vendorcreditNextNumber: vendorsCreditNoteSetting?.nextNumber,
+    vendorcreditNumberPrefix: vendorsCreditNoteSetting?.numberPrefix,
+  })),
+  withCurrentOrganization(),
+)(VendorCreditNoteForm);

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormCurrencyTag.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from '@/components';
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+
+/**
+ * Vendor credit note currency tag.
+ * @returns
+ */
+export default function VendorCreditNoteFormCurrencyTag() {
+  const { isForeignVendor, selectVendor } = useVendorCreditNoteFormContext();
+
+  if (!isForeignVendor) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectVendor?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormDialogs.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+import React from 'react';
+import VendorCreditNumberDialog from '@/containers/Dialogs/VendorCreditNumberDialog';
+import { useFormikContext } from 'formik';
+
+/**
+ * Vendor credit form dialog.
+ */
+export default function VendorCreditNoteFormDialogs() {
+  // Update the form once the vendor credit number form submit confirm.
+  const handleVendorCreditNumberFormConfirm = ({
+    incrementNumber,
+    manually,
+  }) => {
+    setFieldValue('vendor_credit_number', incrementNumber || '');
+    setFieldValue('vendor_credit_no_manually', manually);
+  };
+  const { setFieldValue } = useFormikContext();
+
+  return (
+    <React.Fragment>
+      <VendorCreditNumberDialog
+        dialogName={'vendor-credit-form'}
+        onConfirm={handleVendorCreditNumberFormConfirm}
+      />
+    </React.Fragment>
+  );
+}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooter.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { CLASSES } from '@/constants/classes';
+import { Row, Col, Paper } from '@/components';
+import { VendorCreditNoteFormFooterLeft } from './VendorCreditNoteFormFooterLeft';
+import { VendorCreditNoteFormFooterRight } from './VendorCreditNoteFormFooterRight';
+
+/**
+ * Vendor Credit note form footer.
+ */
+export default function VendorCreditNoteFormFooter() {
+  return (
+    <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <VendorCreditNoteFooterPaper>
+        <Row>
+          <Col md={8}>
+            <VendorCreditNoteFormFooterLeft />
+          </Col>
+
+          <Col md={4}>
+            <VendorCreditNoteFormFooterRight />
+          </Col>
+        </Row>
+      </VendorCreditNoteFooterPaper>
+    </div>
+  );
+}
+
+const VendorCreditNoteFooterPaper = styled(Paper)`
+  padding: 20px;
+`;

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from '@/components';
+
+export function VendorCreditNoteFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Terms and conditions --------- */}
+      <TermsConditsFormGroup
+        label={<T id={'vendor_credit_form.label.note'} />}
+        name={'note'}
+      >
+        <FEditableText
+          name={'note'}
+          placeholder={intl.get('vendor_credit_form.note.placeholder')}
+        />
+      </TermsConditsFormGroup>
+    </React.Fragment>
+  );
+}
+
+const TermsConditsFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterRight.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from '@/components';
+import { useVendorCrditNoteTotals } from './utils';
+
+export function VendorCreditNoteFormFooterRight() {
+  const { formattedSubtotal, formattedTotal } = useVendorCrditNoteTotals();
+
+  return (
+    <VendorCreditNoteTotalLines
+      labelColWidth={'180px'}
+      amountColWidth={'180px'}
+    >
+      <TotalLine
+        title={<T id={'vendor_credit_form.label.subtotal'} />}
+        value={formattedSubtotal}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'vendor_credit_form.label.total'} />}
+        value={formattedTotal}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </VendorCreditNoteTotalLines>
+  );
+}
+
+const VendorCreditNoteTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
+import { CLASSES } from '@/constants/classes';
+import VendorCreditNoteFormHeaderFields from './VendorCreditNoteFormHeaderFields';
+
+import { getEntriesTotal } from '@/containers/Entries/utils';
+import { PageFormBigNumber } from '@/components';
+
+
+/**
+ * Vendor Credit note header.
+ */
+function VendorCreditNoteFormHeader() {
+  const { values:{entries ,currency_code} } = useFormikContext();
+
+  // Calculate the total amount.
+  const totalAmount = React.useMemo(
+    () => getEntriesTotal(entries),
+    [entries],
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <VendorCreditNoteFormHeaderFields />
+      <PageFormBigNumber
+        label={intl.get('vendor_credits.label.amount_to_credit')}
+        amount={totalAmount}
+        currencyCode={currency_code}
+      />
+    </div>
+  );
+}
+
+export default VendorCreditNoteFormHeader;

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx

@@ -0,0 +1,220 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, ErrorMessage } from 'formik';
+import { CLASSES } from '@/constants/classes';
+
+import {
+  FFormGroup,
+  VendorSelectField,
+  FieldRequiredHint,
+  InputPrependButton,
+  Icon,
+  FormattedMessage as T,
+  VendorDrawerLink,
+} from '@/components';
+import {
+  vendorsFieldShouldUpdate,
+  useObserveVendorCreditNoSettings,
+} from './utils';
+
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+import { VendorCreditNoteExchangeRateInputField } from './components';
+import {
+  momentFormatter,
+  compose,
+  tansformDateValue,
+  inputIntent,
+  handleDateChange,
+} from '@/utils';
+
+import withSettings from '@/containers/Settings/withSettings';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+/**
+ * Vendor Credit note form header fields.
+ */
+function VendorCreditNoteFormHeaderFields({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  vendorcreditAutoIncrement,
+  vendorcreditNumberPrefix,
+  vendorcreditNextNumber,
+}) {
+  // Vendor Credit form context.
+  const { vendors } = useVendorCreditNoteFormContext();
+
+  // Handle vendor credit number changing.
+  const handleVendorCreditNumberChange = () => {
+    openDialog('vendor-credit-form');
+  };
+
+  // Handle vendor credit no. field blur.
+  const handleVendorCreditNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && vendorcreditAutoIncrement) {
+      openDialog('vendor-credit-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+  // Syncs vendor credit number settings with form.
+  useObserveVendorCreditNoSettings(
+    vendorcreditNumberPrefix,
+    vendorcreditNextNumber,
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Vendor name ----------- */}
+      <FastField
+        name={'vendor_id'}
+        vendors={vendors}
+        shouldUpdate={vendorsFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FFormGroup
+            name={'vendor_id'}
+            label={<T id={'vendor_name'} />}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--vendor')}
+            labelInfo={<FieldRequiredHint />}
+          >
+            <VendorSelectField
+              contacts={vendors}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
+                form.setFieldValue('currency_code', contact?.currency_code);
+              }}
+              popoverFill={true}
+              allowCreate={true}
+            />
+
+            {value && (
+              <VendorButtonLink vendorId={value}>
+                <T id={'view_vendor_details'} />
+              </VendorButtonLink>
+            )}
+          </FFormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Exchange rate ----------- */}
+      <VendorCreditNoteExchangeRateInputField
+        name={'exchange_rate'}
+        formGroupProps={{ label: ' ', inline: true }}
+      />
+
+      {/* ------- 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--vendor_credit_date',
+              CLASSES.FILL,
+            )}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="vendor_credit_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('vendor_credit_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Vendor Credit No # ----------- */}
+      <FastField name={'vendor_credit_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'credit_note.label_credit_note'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={('form-group--vendor_credit_number', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="vendor_credit_number" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handleVendorCreditNoBlur(form, field)}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleVendorCreditNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: (
+                    <T
+                      id={'setting_your_auto_generated_vendor_credit_number'}
+                    />
+                  ),
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Reference ----------- */}
+      <FastField name={'reference_no'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference_no'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference_no" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettings(({ vendorsCreditNoteSetting }) => ({
+    vendorcreditAutoIncrement: vendorsCreditNoteSetting?.autoIncrement,
+    vendorcreditNextNumber: vendorsCreditNoteSetting?.nextNumber,
+    vendorcreditNumberPrefix: vendorsCreditNoteSetting?.numberPrefix,
+  })),
+)(VendorCreditNoteFormHeaderFields);
+
+const VendorButtonLink = styled(VendorDrawerLink)`
+  font-size: 11px;
+  margin-top: 6px;
+`;

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormPage.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import '@/style/pages/VendorsCreditNote/PageForm.scss';
+
+import VendorCreditNoteForm from './VendorCreditNoteForm';
+import { VendorCreditNoteFormProvider } from './VendorCreditNoteFormProvider';
+
+/**
+ * Vendor Credit note form pages.
+ */
+export default function VendorCreditNoteFormPage() {
+  const { id } = useParams();
+  const idAsInteger = parseInt(id, 10);
+
+  return (
+    <VendorCreditNoteFormProvider vendorCreditId={idAsInteger}>
+      <VendorCreditNoteForm />
+    </VendorCreditNoteFormProvider>
+  );
+}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormProvider.tsx

@@ -0,0 +1,136 @@
+// @ts-nocheck
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { isEmpty, pick } from 'lodash';
+import { DashboardInsider } from '@/components/Dashboard';
+import { transformToEditForm } from './utils';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import {
+  useCreateVendorCredit,
+  useEditVendorCredit,
+  useVendorCredit,
+  useWarehouses,
+  useBranches,
+  useItems,
+  useVendors,
+  useSettingsVendorCredits,
+  useBill,
+} from '@/hooks/query';
+
+const VendorCreditNoteFormContext = React.createContext();
+
+/**
+ * Vendor Credit note data provider.
+ */
+function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
+  const { state } = useLocation();
+  const billId = state?.billId;
+
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+  const isWarehouseFeatureCan = featureCan(Features.Warehouses);
+
+  // Handle fetching the items table based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+  } = useItems({
+    page_size: 10000,
+  });
+
+  // Handle fetching settings.
+  useSettingsVendorCredits();
+
+  // Handle fetch vendors data table or list
+  const {
+    data: { vendors },
+    isLoading: isVendorsLoading,
+  } = useVendors({ page_size: 10000 });
+
+  // Handle fetch vendor credit details.
+  const { data: vendorCredit, isLoading: isVendorCreditLoading } =
+    useVendorCredit(vendorCreditId, {
+      enabled: !!vendorCreditId,
+    });
+
+  // Handle fetch bill details.
+  const { isLoading: isBillLoading, data: bill } = useBill(billId, {
+    enabled: !!billId,
+  });
+
+  // Fetch warehouses list.
+  const {
+    data: warehouses,
+    isLoading: isWarehouesLoading,
+    isSuccess: isWarehousesSuccess,
+  } = useWarehouses({}, { enabled: isWarehouseFeatureCan });
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches({}, { enabled: isBranchFeatureCan });
+
+  // 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 = !vendorCreditId;
+
+  // Determines whether the warehouse and branches are loading.
+  const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
+
+  const newVendorCredit = !isEmpty(bill)
+    ? transformToEditForm({
+        ...pick(bill, ['vendor_id', 'currency_code', 'entries']),
+      })
+    : [];
+
+  // Provider payload.
+  const provider = {
+    items,
+    vendors,
+    vendorCredit,
+    warehouses,
+    branches,
+    submitPayload,
+    isNewMode,
+    newVendorCredit,
+
+    isVendorCreditLoading,
+    isFeatureLoading,
+    isBranchesSuccess,
+    isWarehousesSuccess,
+
+    createVendorCreditMutate,
+    editVendorCreditMutate,
+    setSubmitPayload,
+  };
+
+  return (
+    <DashboardInsider
+      loading={
+        isVendorCreditLoading ||
+        isItemsLoading ||
+        isVendorsLoading ||
+        isVendorCreditLoading ||
+        isBillLoading
+      }
+      name={'vendor-credit-form'}
+    >
+      <VendorCreditNoteFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useVendorCreditNoteFormContext = () =>
+  React.useContext(VendorCreditNoteFormContext);
+
+export { VendorCreditNoteFormProvider, useVendorCreditNoteFormContext };

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.tsx

@@ -0,0 +1,115 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  Alignment,
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+} from '@blueprintjs/core';
+import {
+  useSetPrimaryBranchToForm,
+  useSetPrimaryWarehouseToForm,
+} from './utils';
+import { useFeatureCan } from '@/hooks/state';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from '@/components';
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+import { Features } from '@/constants';
+
+/**
+ * Vendor Credit note form topbar .
+ * @returns {JSX.Element}
+ */
+export default function VendorCreditNoteFormTopBar() {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // Sets the primary warehouse to form.
+  useSetPrimaryWarehouseToForm();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
+  // Can't display the navigation bar if warehouses or branches feature is not enabled.
+  if (!featureCan(Features.Warehouses) && !featureCan(Features.Branches)) {
+    return null;
+  }
+
+  return (
+    <FormTopbar>
+      <NavbarGroup align={Alignment.LEFT}>
+        <FeatureCan feature={Features.Branches}>
+          <VendorCreditNoteFormSelectBranch />
+        </FeatureCan>
+        {featureCan(Features.Warehouses) && featureCan(Features.Branches) && (
+          <NavbarDivider />
+        )}
+        <FeatureCan feature={Features.Warehouses}>
+          <VendorCreditFormSelectWarehouse />
+        </FeatureCan>
+      </NavbarGroup>
+    </FormTopbar>
+  );
+}
+
+function VendorCreditNoteFormSelectBranch() {
+  //  Vendor credit note form context.
+  const { branches, isBranchesLoading } = useVendorCreditNoteFormContext();
+
+  return isBranchesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <BranchSelect
+      name={'branch_id'}
+      branches={branches}
+      input={VendorCreditNoteBranchSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+
+function VendorCreditFormSelectWarehouse() {
+  // vendor credit note form context.
+  const { warehouses, isWarehouesLoading } = useVendorCreditNoteFormContext();
+
+  return isWarehouesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <WarehouseSelect
+      name={'warehouse_id'}
+      warehouses={warehouses}
+      input={VendorCreditNoteWarehouseSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+
+function VendorCreditNoteWarehouseSelectButton({ label }) {
+  return (
+    <Button
+      text={intl.get('vendor_credit.warehouse_button.label', { label })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
+    />
+  );
+}
+
+function VendorCreditNoteBranchSelectButton({ label }) {
+  return (
+    <Button
+      text={intl.get('vendor_credit.branch_button.label', { label })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'branch-16'} iconSize={16} />}
+    />
+  );
+}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteItemsEntriesEditor.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { FastField } from 'formik';
+import { CLASSES } from '@/constants/classes';
+import { entriesFieldShouldUpdate } from './utils';
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+import ItemsEntriesTable from '@/containers/Entries/ItemsEntriesTable';
+
+export default function VendorCreditNoteItemsEntriesEditor() {
+  const { items } = useVendorCreditNoteFormContext();
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField
+        name={'entries'}
+        items={items}
+        shouldUpdate={entriesFieldShouldUpdate}
+      >
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <ItemsEntriesTable
+            entries={value}
+            onUpdateData={(entries) => {
+              setFieldValue('entries', entries);
+            }}
+            items={items}
+            errors={error}
+            linesNumber={4}
+            currencyCode={values.currency_code}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/components.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { ExchangeRateInputGroup } from '@/components';
+import { useCurrentOrganization } from '@/hooks/state';
+import { useVendorNoteIsForeignCustomer } from './utils';
+
+/**
+ * vendor credit note exchange rate input field.
+ * @returns {JSX.Element}
+ */
+export function VendorCreditNoteExchangeRateInputField({ ...props }) {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  const isForeignCustomer = useVendorNoteIsForeignCustomer();
+
+  // Can't continue if the customer is not foreign.
+  if (!isForeignCustomer) {
+    return null;
+  }
+  return (
+    <ExchangeRateInputGroup
+      fromCurrency={values.currency_code}
+      toCurrency={currentOrganization.base_currency}
+      {...props}
+    />
+  );
+}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx

@@ -0,0 +1,213 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import moment from 'moment';
+import { first } from 'lodash';
+
+import {
+  defaultFastFieldShouldUpdate,
+  transformToForm,
+  repeatValue,
+  transactionNumber,
+  orderingLinesIndexes,
+  formattedAmount,
+} from '@/utils';
+import {
+  updateItemsEntriesTotal,
+  ensureEntriesHaveEmptyLine,
+} from '@/containers/Entries/utils';
+import { useFormikContext } from 'formik';
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+import { useCurrentOrganization } from '@/hooks/state';
+import { getEntriesTotal } from '@/containers/Entries/utils';
+
+export const MIN_LINES_NUMBER = 1;
+
+// Default Vendors Credit Note entry.
+export const defaultCreditNoteEntry = {
+  index: 0,
+  item_id: '',
+  rate: '',
+  discount: '',
+  quantity: '',
+  description: '',
+  amount: '',
+};
+
+// Default Vendors Credit Note.
+export const defaultVendorsCreditNote = {
+  vendor_id: '',
+  vendor_credit_number: '',
+  vendor_credit_no_manually: false,
+  open: '',
+  vendor_credit_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference_no: '',
+  note: '',
+  branch_id: '',
+  warehouse_id: '',
+  exchange_rate: 1,
+  currency_code: '',
+  entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
+};
+
+/**
+ * Transformes the credit note to initial values of edit form.
+ */
+export const transformToEditForm = (creditNote) => {
+  const initialEntries = [
+    ...creditNote.entries.map((entry) => ({
+      ...transformToForm(entry, defaultCreditNoteEntry),
+    })),
+    ...repeatValue(
+      defaultCreditNoteEntry,
+      Math.max(MIN_LINES_NUMBER - creditNote.entries.length, 0),
+    ),
+  ];
+  const entries = R.compose(
+    ensureEntriesHaveEmptyLine(defaultCreditNoteEntry),
+    updateItemsEntriesTotal,
+  )(initialEntries);
+
+  return {
+    ...transformToForm(creditNote, defaultVendorsCreditNote),
+    entries,
+  };
+};
+
+/**
+ * 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),
+    open: false,
+  };
+};
+
+/**
+ * Detarmines vendors fast field should update
+ */
+export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.vendors !== oldProps.vendors ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Detarmines entries fast field should update.
+ */
+export const entriesFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.items !== oldProps.items ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Syncs invoice no. settings with form.
+ */
+export const useObserveVendorCreditNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const creditNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('vendor_credit_number', creditNo);
+  }, [setFieldValue, prefix, nextNumber]);
+};
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useVendorCreditNoteFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};
+
+export const useSetPrimaryWarehouseToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { warehouses, isWarehousesSuccess } = useVendorCreditNoteFormContext();
+
+  React.useEffect(() => {
+    if (isWarehousesSuccess) {
+      const primaryWarehouse =
+        warehouses.find((b) => b.primary) || first(warehouses);
+
+      if (primaryWarehouse) {
+        setFieldValue('warehouse_id', primaryWarehouse.id);
+      }
+    }
+  }, [isWarehousesSuccess, setFieldValue, warehouses]);
+};
+
+export const useVendorCrditNoteTotals = () => {
+  const {
+    values: { entries, currency_code: currencyCode },
+  } = useFormikContext();
+
+  // Retrieves the invoice entries total.
+  const total = React.useMemo(() => getEntriesTotal(entries), [entries]);
+
+  // Retrieves the formatted total money.
+  const formattedTotal = React.useMemo(
+    () => formattedAmount(total, currencyCode),
+    [total, currencyCode],
+  );
+  // Retrieves the formatted subtotal.
+  const formattedSubtotal = React.useMemo(
+    () => formattedAmount(total, currencyCode, { money: false }),
+    [total, currencyCode],
+  );
+
+  return {
+    total,
+    formattedTotal,
+    formattedSubtotal,
+  };
+};
+
+/**
+ * Detarmines whether the vendor note has foreign customer.
+ * @returns {boolean}
+ */
+export const useVendorNoteIsForeignCustomer = () => {
+  const { values } = useFormikContext();
+  const currentOrganization = useCurrentOrganization();
+
+  const isForeignCustomer = React.useMemo(
+    () => values.currency_code !== currentOrganization.base_currency,
+    [values.currency_code, currentOrganization.base_currency],
+  );
+  return isForeignCustomer;
+};

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteActionsBar.tsx

@@ -0,0 +1,154 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  Can,
+  FormattedMessage as T,
+  DashboardActionViewsList,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+  DashboardRowsHeightButton,
+  DashboardActionsBar,
+} from '@/components';
+
+import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withVendorsCreditNotes from './withVendorsCreditNotes';
+import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
+
+import withVendorActions from './withVendorActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Vendors Credit note  table actions bar.
+ */
+function VendorsCreditNoteActionsBar({
+  setVendorCreditsTableState,
+
+  // #withVendorsCreditNotes
+  vendorCreditFilterRoles,
+
+  // #withVendorsCreditNotesActions
+  setVendorsCreditNoteTableState,
+
+  // #withSettings
+  creditNoteTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+
+  // vendor credit list context.
+  const { VendorCreditsViews, fields, refresh } =
+    useVendorsCreditNoteListContext();
+
+  // Handle click a new Vendor.
+  const handleClickNewVendorCredit = () => {
+    history.push('/vendor-credits/new');
+  };
+
+  // Handle view tab change.
+  const handleTabChange = (view) => {
+    setVendorCreditsTableState({ viewSlug: view ? view.slug : null });
+  };
+
+  // Handle click a refresh credit note.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('vendorCredit', 'tableSize', size);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          allMenuItem={true}
+          resourceName={'vendor_credit'}
+          views={VendorCreditsViews}
+          allMenuItemText={<T id={'all'} />}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Can I={VendorCreditAction.Create} a={AbilitySubject.VendorCredit}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'vendor_credits.label.new_vendor_credit'} />}
+            onClick={handleClickNewVendorCredit}
+          />
+        </Can>
+        <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'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={creditNoteTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withVendorsCreditNotesActions,
+  withVendorActions,
+  withSettingsActions,
+  withVendorsCreditNotes(({ vendorsCreditNoteTableState }) => ({
+    vendorCreditFilterRoles: vendorsCreditNoteTableState.filterRoles,
+  })),
+  withSettings(({ vendorsCreditNoteSetting }) => ({
+    creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
+  })),
+)(VendorsCreditNoteActionsBar);

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.tsx

@@ -0,0 +1,160 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import VendorsCreditNoteEmptyStatus from './VendorsCreditNoteEmptyStatus';
+import {
+  DataTable,
+  DashboardContentTable,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+} from '@/components';
+import { TABLES } from '@/constants/tables';
+import { useMemorizedColumnsWidths } from '@/hooks';
+
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+import { useVendorsCreditNoteTableColumns, ActionsMenu } from './components';
+import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+
+import { compose } from '@/utils';
+
+/**
+ * Vendors Credit note data table.
+ */
+function VendorsCreditNoteDataTable({
+  // #withVendorsCreditNotesActions
+  setVendorsCreditNoteTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogAction
+  openDialog,
+
+  // #withSettings
+  creditNoteTableSize,
+}) {
+  const history = useHistory();
+
+  // Vendor credits context.
+  const {
+    vendorCredits,
+    pagination,
+    isEmptyStatus,
+    isVendorCreditsFetching,
+    isVendorCreditsLoading,
+  } = useVendorsCreditNoteListContext();
+
+  // Credit note table columns.
+  const columns = useVendorsCreditNoteTableColumns();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.VENDOR_CREDITS);
+
+  // Handles fetch data once the table state change.
+  const handleDataTableFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setVendorsCreditNoteTableState({
+        pageSize,
+        pageIndex,
+        sortBy,
+      });
+    },
+    [setVendorsCreditNoteTableState],
+  );
+
+  // Display create note empty status instead of the table.
+  if (isEmptyStatus) {
+    return <VendorsCreditNoteEmptyStatus />;
+  }
+
+  const handleViewDetailVendorCredit = ({ id }) => {
+    openDrawer('vendor-credit-detail-drawer', { vendorCreditId: id });
+  };
+
+  // Handle delete credit note.
+  const handleDeleteVendorCreditNote = ({ id }) => {
+    openAlert('vendor-credit-delete', { vendorCreditId: id });
+  };
+
+  // Handle edit credit note.
+  const hanldeEditVendorCreditNote = (vendorCredit) => {
+    history.push(`/vendor-credits/${vendorCredit.id}/edit`);
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('vendor-credit-detail-drawer', {
+      vendorCreditId: cell.row.original.id,
+    });
+  };
+
+  const handleRefundCreditVendor = ({ id }) => {
+    openDialog('refund-vendor-credit', { vendorCreditId: id });
+  };
+
+  // Handle cancel/confirm vendor credit open.
+  const handleOpenCreditNote = ({ id }) => {
+    openAlert('vendor-credit-open', { vendorCreditId: id });
+  };
+
+  // Handle reconcile credit note.
+  const handleReconcileVendorCredit = ({ id }) => {
+    openDialog('reconcile-vendor-credit', { vendorCreditId: id });
+  };
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={vendorCredits}
+        loading={isVendorCreditsLoading}
+        headerLoading={isVendorCreditsLoading}
+        progressBarLoading={isVendorCreditsFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        size={creditNoteTableSize}
+        payload={{
+          onViewDetails: handleViewDetailVendorCredit,
+          onDelete: handleDeleteVendorCreditNote,
+          onEdit: hanldeEditVendorCreditNote,
+          onRefund: handleRefundCreditVendor,
+          onOpen: handleOpenCreditNote,
+          onReconcile: handleReconcileVendorCredit,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withVendorsCreditNotesActions,
+  withAlertsActions,
+  withDrawerActions,
+  withDialogActions,
+  withSettings(({ vendorsCreditNoteSetting }) => ({
+    creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
+  })),
+)(VendorsCreditNoteDataTable);

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteEmptyStatus.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus, Can, FormattedMessage as T } from '@/components';
+import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
+
+export default function VendorsCreditNoteEmptyStatus() {
+  const history = useHistory();
+  return (
+    <EmptyStatus
+      title={<T id={'vendor_credits.empty_status.title'} />}
+      description={
+        <p>
+          <T id={'vendor_credits.empty_status.description'} />
+        </p>
+      }
+      action={
+        <>
+          <Can I={VendorCreditAction.Create} a={AbilitySubject.VendorCredit}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => history.push('/vendor-credits/new')}
+            >
+              <T id={'vendor_credits.label.new_vendor_credit'} />
+            </Button>
+
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
+        </>
+      }
+    />
+  );
+}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteListProvider.tsx

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import React from 'react';
+import { isEmpty } from 'lodash';
+
+import { DashboardInsider } from '@/components/Dashboard';
+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 = {
+    vendorCredits,
+    pagination,
+    VendorCreditsViews,
+    refresh,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
+    isVendorCreditsFetching,
+    isVendorCreditsLoading,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'vendor-credits'}
+    >
+      <VendorsCreditNoteListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useVendorsCreditNoteListContext = () =>
+  React.useContext(VendorsCreditNoteListContext);
+
+export { VendorsCreditNoteListProvider, useVendorsCreditNoteListContext };

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteViewTabs.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from '@/components';
+
+import withVendorsCreditNotes from './withVendorsCreditNotes';
+import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
+
+import { compose, transfromViewsToTabs } from '@/utils';
+import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
+
+/**
+ * Vendors Credit note views tabs.
+ */
+function VendorsCreditNoteViewTabs({
+  // #withVendorsCreditNotes
+  vendorCreditCurrentView,
+
+  // #withVendorsCreditNotesActions
+  setVendorsCreditNoteTableState,
+}) {
+  // vendor credit list context.
+  const { VendorCreditsViews } = useVendorsCreditNoteListContext();
+
+  // Handle tab change.
+  const handleTabsChange = (viewSlug) => {
+    setVendorsCreditNoteTableState({ viewSlug: viewSlug || null });
+  };
+
+  const tabs = transfromViewsToTabs(VendorCreditsViews);
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={vendorCreditCurrentView}
+          resourceName={'vendor_credits'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withVendorsCreditNotesActions,
+  withVendorsCreditNotes(({ vendorsCreditNoteTableState }) => ({
+    vendorCreditCurrentView: vendorsCreditNoteTableState.viewSlug,
+  })),
+)(VendorsCreditNoteViewTabs);

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNotesList.tsx

@@ -0,0 +1,55 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/pages/VendorsCreditNote/List.scss';
+
+import { DashboardPageContent } from '@/components';
+import VendorsCreditNoteActionsBar from './VendorsCreditNoteActionsBar';
+import VendorsCreditNoteViewTabs from './VendorsCreditNoteViewTabs';
+import VendorsCreditNoteDataTable from './VendorsCreditNoteDataTable';
+
+import withVendorsCreditNotes from './withVendorsCreditNotes';
+import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
+
+import { VendorsCreditNoteListProvider } from './VendorsCreditNoteListProvider';
+import { transformTableStateToQuery, compose } from '@/utils';
+
+function VendorsCreditNotesList({
+  // #withVendorsCreditNotes
+  vendorsCreditNoteTableState,
+  vendorsCreditNoteTableStateChanged,
+
+  // #withVendorsCreditNotesActions
+  resetVendorsCreditNoteTableState,
+}) {
+  // Resets the credit note table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetVendorsCreditNoteTableState();
+    },
+    [resetVendorsCreditNoteTableState],
+  );
+
+  return (
+    <VendorsCreditNoteListProvider
+      query={transformTableStateToQuery(vendorsCreditNoteTableState)}
+      tableStateChanged={vendorsCreditNoteTableStateChanged}
+    >
+      <VendorsCreditNoteActionsBar />
+      <DashboardPageContent>
+        <VendorsCreditNoteViewTabs />
+        <VendorsCreditNoteDataTable />
+      </DashboardPageContent>
+    </VendorsCreditNoteListProvider>
+  );
+}
+
+export default compose(
+  withVendorsCreditNotesActions,
+  withVendorsCreditNotes(
+    ({ vendorsCreditNoteTableState, vendorsCreditNoteTableStateChanged }) => ({
+      vendorsCreditNoteTableState,
+      vendorsCreditNoteTableStateChanged,
+    }),
+  ),
+)(VendorsCreditNotesList);

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.tsx

@@ -0,0 +1,187 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+
+import { CLASSES } from '@/constants/classes';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Choose,
+  If,
+  Icon,
+  Can,
+} from '@/components';
+import { safeCallback } from '@/utils';
+import { VendorCreditAction, AbilitySubject } from '@/constants/abilityOption';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onOpen, onRefund, onReconcile, onViewDetails },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('vendor_credits.action.edit_vendor_credit')}
+          onClick={safeCallback(onEdit, original)}
+        />
+        <If condition={original.is_draft}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('vendor_credits.action.mark_as_open')}
+            onClick={safeCallback(onOpen, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Refund} a={AbilitySubject.VendorCredit}>
+        <If condition={!original.is_closed && original.is_published}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" />}
+            text={intl.get('vendor_credits.action.refund_vendor_credit')}
+            onClick={safeCallback(onRefund, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Edit} a={AbilitySubject.VendorCredit}>
+        <If
+          condition={
+            !original.is_draft && !original.is_closed && original.is_published
+          }
+        >
+          <MenuItem
+            text={intl.get('vendor_credits.action.reconcile_with_bills')}
+            icon={<Icon icon="receipt-24" iconSize={16} />}
+            onClick={safeCallback(onReconcile, original)}
+          />
+        </If>
+      </Can>
+      <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('vendor_credits.action.delete_vendor_credit')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(creditNote) {
+  return (
+    <div>
+      <Choose>
+        <Choose.When condition={creditNote.is_open}>
+          <Tag minimal={true} intent={Intent.WARNING} round={true}>
+            <T id={'open'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_closed}>
+          <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+            <T id={'closed'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_draft}>
+          <Tag minimal={true} round={true}>
+            <T id={'draft'} />
+          </Tag>
+        </Choose.When>
+      </Choose>
+    </div>
+  );
+}
+
+/**
+ * Retrieve vendors credit note table columns.
+ */
+export function useVendorsCreditNoteTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'credit_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_vendor_credit_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'credit_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor_name'),
+        accessor: 'vendor.display_name',
+        width: 180,
+        className: 'vendor_id',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'credit_number',
+        Header: intl.get('vendor_credits.column.vendor_credit_no'),
+        accessor: 'vendor_credit_number',
+        width: 100,
+        className: 'credit_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'balance',
+        Header: intl.get('balance'),
+        accessor: 'formatted_credits_remaining',
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        disableSortBy: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: StatusAccessor,
+        width: 160,
+        className: 'status',
+        clickable: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/utils.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from '@/components';
+
+export const handleDeleteErrors = (errors) => {
+  if (
+    errors.find((error) => error.type === 'VENDOR_CREDIT_HAS_APPLIED_BILLS')
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'vendor_credit.error.you_couldn_t_delete_vendor_credit_has_reconciled',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find(
+      (error) => error.type === 'VENDOR_CREDIT_HAS_REFUND_TRANSACTIONS',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'vendor_credit.error.you_couldn_t_delete_vendor_credit_that_has_associated_refund',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+};

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorActions.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  setVendorCreditTableState,
+  resetVendorCreditTableState,
+} from '@/store/VendorCredit/vendorCredit.actions';
+
+const mapDipatchToProps = (dispatch) => ({
+  setVendorCreditsTableState: (queries) =>
+    dispatch(setVendorCreditTableState(queries)),
+  resetVendorCreditsTableState: () => dispatch(resetVendorCreditTableState()),
+});
+
+export default connect(null, mapDipatchToProps);

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotes.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getVendorCreditTableStateFactory,
+  isVendorCreditTableStateChangedFactory,
+} from '@/store/VendorCredit/vendorCredit.selector';
+
+export default (mapState) => {
+  const getVendorsCreditNoteTableState = getVendorCreditTableStateFactory();
+  const isVendorsCreditNoteTableChanged =
+    isVendorCreditTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      vendorsCreditNoteTableState: getVendorsCreditNoteTableState(state, props),
+      vendorsCreditNoteTableStateChanged: isVendorsCreditNoteTableChanged(
+        state,
+        props,
+      ),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotesActions.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  setVendorCreditTableState,
+  resetVendorCreditTableState,
+} from '@/store/VendorCredit/vendorCredit.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setVendorsCreditNoteTableState: (queries) =>
+    dispatch(setVendorCreditTableState(queries)),
+  resetVendorsCreditNoteTableState: () =>
+    dispatch(resetVendorCreditTableState()),
+});
+
+export default connect(null, mapDispatchToProps);

packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx

@@ -0,0 +1,119 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Intent } from '@blueprintjs/core';
+
+import { TextStatus, Icon, Choose, T } from '@/components';
+import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import { AbilitySubject, VendorCreditAction } from '@/constants/abilityOption';
+import { DRAWERS } from '@/constants/drawers';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+/**
+ * Vendor credit universal search item select action.
+ */
+function VendorCreditUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+  onAction,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.VENDOR_CREDIT) {
+    openDrawer(DRAWERS.VENDOR_CREDIT_DETAIL_DRAWER, {
+      vendorCreditId: resourceId,
+    });
+    onAction && onAction();
+  }
+  return null;
+}
+
+export const VendorCreditUniversalSearchSelect = withDrawerActions(
+  VendorCreditUniversalSearchSelectComponent,
+);
+
+/**
+ * Status accessor.
+ */
+function VendorCreditUniversalSearchStatus({ receipt }) {
+  return (
+    <Choose>
+      <Choose.When condition={receipt.is_closed}>
+        <TextStatus intent={Intent.SUCCESS}>
+          <T id={'closed'} />
+        </TextStatus>
+      </Choose.When>
+
+      <Choose.When condition={receipt.is_open}>
+        <TextStatus intent={Intent.WARNING}>
+          <T id={'closed'} />
+        </TextStatus>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <TextStatus intent={Intent.NONE}>
+          <T id={'draft'} />
+        </TextStatus>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Credit note universal search item.
+ */
+export function VendorCreditUniversalSearchItem(
+  item,
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{item.text}</div>
+          <span class="bp3-text-muted">
+            {item.reference.vendor_credit_number}{' '}
+            <Icon icon={'caret-right-16'} iconSize={16} />
+            {item.reference.formatted_vendor_credit_date}
+          </span>
+        </div>
+      }
+      label={
+        <>
+          <div class="amount">${item.reference.amount}</div>
+          <VendorCreditUniversalSearchStatus receipt={item.reference} />
+        </>
+      }
+      onClick={handleClick}
+      className={'universal-search__item--receipt'}
+    />
+  );
+}
+
+/**
+ * Transformes receipt resource item to search item.
+ */
+const transformVendorCreditsToSearch = (vendorCredit) => ({
+  id: vendorCredit.id,
+  text: vendorCredit.vendor.display_name,
+  label: vendorCredit.formatted_amount,
+  reference: vendorCredit,
+});
+
+/**
+ * Credit note universal search bind configuration.
+ */
+export const universalSearchVendorCreditBind = () => ({
+  resourceType: RESOURCES_TYPES.VENDOR_CREDIT,
+  optionItemLabel: intl.get('vendor_credit.label'),
+  selectItemAction: VendorCreditUniversalSearchSelect,
+  itemRenderer: VendorCreditUniversalSearchItem,
+  itemSelect: transformVendorCreditsToSearch,
+  permission: {
+    ability: VendorCreditAction.View,
+    subject: AbilitySubject.VendorCredit,
+  },
+});

packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import React from 'react';
+
+const VendorCreditDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert'),
+);
+
+const RefundVendorCreditDeleteAlert = React.lazy(
+  () =>
+    import(
+      '@/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert'
+    ),
+);
+
+const OpenVendorCreditAlert = React.lazy(
+  () => import('@/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert'),
+);
+
+const ReconcileVendorCreditDeleteAlert = React.lazy(
+  () =>
+    import(
+      '@/containers/Alerts/VendorCeditNotes/ReconcileVendorCreditDeleteAlert'
+    ),
+);
+
+/**
+ * Vendor Credit notes alerts.
+ */
+export default [
+  {
+    name: 'vendor-credit-delete',
+    component: VendorCreditDeleteAlert,
+  },
+  {
+    name: 'vendor-credit-open',
+    component: OpenVendorCreditAlert,
+  },
+  {
+    name: 'refund-vendor-delete',
+    component: RefundVendorCreditDeleteAlert,
+  },
+  {
+    name: 'reconcile-vendor-delete',
+    component: ReconcileVendorCreditDeleteAlert,
+  },
+];

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.tsx

@@ -0,0 +1,74 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import {
+  DataTableEditable,
+  CloudLoadingIndicator,
+  FormattedMessage as T,
+} from '@/components';
+
+import { CLASSES } from '@/constants/classes';
+import { usePaymentMadeEntriesTableColumns } from './components';
+import { usePaymentMadeInnerContext } from './PaymentMadeInnerProvider';
+import { compose, updateTableCell } from '@/utils';
+import { useFormikContext } from 'formik';
+
+/**
+ * Payment made items table.
+ */
+export default function PaymentMadeEntriesTable({
+  onUpdateData,
+  entries,
+  currencyCode,
+}) {
+  // Payment made inner context.
+  const { isNewEntriesFetching } = usePaymentMadeInnerContext();
+
+  // Payment entries table columns.
+  const columns = usePaymentMadeEntriesTableColumns();
+
+  // Formik context.
+  const {
+    values: { vendor_id },
+  } = useFormikContext();
+
+  // Handle update data.
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+  // Detarmines the right no results message before selecting vendor and aftering
+  // selecting vendor id.
+  const noResultsMessage = vendor_id ? (
+    <T
+      id={
+        'there_is_no_payable_bills_for_this_vendor_that_can_be_applied_for_this_payment'
+      }
+    />
+  ) : (
+    <T id={'please_select_a_vendor_to_display_all_open_bills_for_it'} />
+  );
+
+  return (
+    <CloudLoadingIndicator isLoading={isNewEntriesFetching}>
+      <DataTableEditable
+        progressBarLoading={isNewEntriesFetching}
+        className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
+        columns={columns}
+        data={entries}
+        spinnerProps={false}
+        payload={{
+          errors: [],
+          updateData: handleUpdateData,
+          currencyCode,
+        }}
+        noResults={noResultsMessage}
+      />
+    </CloudLoadingIndicator>
+  );
+}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.tsx

@@ -0,0 +1,111 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { Icon, FormattedMessage as T } from '@/components';
+import { useHistory } from 'react-router-dom';
+import { useFormikContext } from 'formik';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import { CLASSES } from '@/constants/classes';
+
+
+
+/**
+ * Payment made floating actions bar.
+ */
+export default function PaymentMadeFloatingActions() {
+  // History context.
+  const history = useHistory();
+
+  // Formik context.
+  const { isSubmitting, resetForm } = useFormikContext();
+
+  // Payment made form context.
+  const { setSubmitPayload, paymentMadeId } = usePaymentMadeFormContext();
+
+  // Handle submit button click.
+  const handleSubmitBtnClick = (event) => {
+    setSubmitPayload({ redirect: true });
+  };
+
+  // Handle clear button click.
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  // Handle submit & new button click.
+  const handleSubmitAndNewClick = (event) => {
+    setSubmitPayload({ redirect: false, resetForm: true });
+  };
+
+  // handle submit & continue editing button click.
+  const handleSubmitContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, publish: true });
+  };
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save and New ----------- */}
+      <ButtonGroup>
+        <Button
+          loading={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          style={{ minWidth: '85px' }}
+          text={paymentMadeId ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+              <MenuItem
+                text={<T id={'save_continue_editing'} />}
+                onClick={handleSubmitContinueEditingBtnClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+      </ButtonGroup>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={paymentMadeId ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel  ----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { CLASSES } from '@/constants/classes';
+import { Row, Col, Paper } from '@/components';
+import { PaymentMadeFormFooterLeft } from './PaymentMadeFormFooterLeft';
+import { PaymentMadeFormFooterRight } from './PaymentMadeFormFooterRight';
+
+/**
+ * Payment made form footer.
+ */
+export default function PaymentMadeFooter() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <PaymentReceiveFooterPaper>
+        <Row>
+          <Col md={8}>
+            <PaymentMadeFormFooterLeft />
+          </Col>
+
+          <Col md={4}>
+            <PaymentMadeFormFooterRight />
+          </Col>
+        </Row>
+      </PaymentReceiveFooterPaper>
+    </div>
+  );
+}
+
+const PaymentReceiveFooterPaper = styled(Paper)`
+  padding: 20px;
+`;

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.schema.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+
+const Schema = Yup.object().shape({
+  vendor_id: Yup.string().label(intl.get('vendor_name_')).required(),
+  payment_date: Yup.date().required().label(intl.get('payment_date_')),
+  payment_account_id: Yup.number()
+    .required()
+    .label(intl.get('payment_account_')),
+  payment_number: Yup.string()
+    .nullable()
+    .max(DATATYPES_LENGTH.STRING)
+    .nullable()
+    .label(intl.get('payment_no_')),
+  reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
+  description: Yup.string().max(DATATYPES_LENGTH.TEXT),
+  branch_id: Yup.string(),
+  exchange_rate: Yup.number(),
+  entries: Yup.array().of(
+    Yup.object().shape({
+      id: Yup.number().nullable(),
+      due_amount: Yup.number().nullable(),
+      payment_amount: Yup.number().nullable().max(Yup.ref('due_amount')),
+      bill_id: Yup.number()
+        .nullable()
+        .when(['payment_amount'], {
+          is: (payment_amount) => payment_amount,
+          then: Yup.number().required(),
+        }),
+    }),
+  ),
+});
+
+export const CreatePaymentMadeFormSchema = Schema;
+export const EditPaymentMadeFormSchema = Schema;

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.tsx

@@ -0,0 +1,166 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { sumBy, defaultTo } from 'lodash';
+import { useHistory } from 'react-router-dom';
+
+import { CLASSES } from '@/constants/classes';
+import { AppToaster } from '@/components';
+import PaymentMadeHeader from './PaymentMadeFormHeader';
+import PaymentMadeFloatingActions from './PaymentMadeFloatingActions';
+import PaymentMadeFooter from './PaymentMadeFooter';
+import PaymentMadeFormBody from './PaymentMadeFormBody';
+import PaymentMadeFormTopBar from './PaymentMadeFormTopBar';
+
+import { PaymentMadeInnerProvider } from './PaymentMadeInnerProvider';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import { compose, orderingLinesIndexes } from '@/utils';
+
+import withSettings from '@/containers/Settings/withSettings';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+import {
+  EditPaymentMadeFormSchema,
+  CreatePaymentMadeFormSchema,
+} from './PaymentMadeForm.schema';
+import {
+  defaultPaymentMade,
+  transformToEditForm,
+  transformErrors,
+  transformFormToRequest,
+} from './utils';
+
+/**
+ * Payment made form component.
+ */
+function PaymentMadeForm({
+  // #withSettings
+  preferredPaymentAccount,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const history = useHistory();
+
+  // Payment made form context.
+  const {
+    isNewMode,
+    paymentMadeId,
+    paymentMadeEditPage,
+    paymentEntriesEditPage,
+    submitPayload,
+    createPaymentMadeMutate,
+    editPaymentMadeMutate,
+  } = usePaymentMadeFormContext();
+
+  // Form initial values.
+  const initialValues = useMemo(
+    () => ({
+      ...(!isNewMode
+        ? {
+            ...transformToEditForm(paymentMadeEditPage, paymentEntriesEditPage),
+          }
+        : {
+            ...defaultPaymentMade,
+            payment_account_id: defaultTo(preferredPaymentAccount),
+            currency_code: base_currency,
+            entries: orderingLinesIndexes(defaultPaymentMade.entries),
+          }),
+    }),
+    [isNewMode, paymentMadeEditPage, paymentEntriesEditPage],
+  );
+
+  // Handle the form submit.
+  const handleSubmitForm = (
+    values,
+    { setSubmitting, resetForm, setFieldError },
+  ) => {
+    setSubmitting(true);
+    // Total payment amount of entries.
+    const totalPaymentAmount = sumBy(values.entries, 'payment_amount');
+
+    if (totalPaymentAmount <= 0) {
+      AppToaster.show({
+        message: intl.get('you_cannot_make_payment_with_zero_total_amount'),
+        intent: Intent.DANGER,
+      });
+      return;
+    }
+    // Transformes the form values to request body.
+    const form = transformFormToRequest(values);
+
+    // Triggers once the save request success.
+    const onSaved = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'the_payment_made_has_been_edited_successfully'
+            : 'the_payment_made_has_been_created_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      submitPayload.redirect && history.push('/payment-mades');
+      submitPayload.resetForm && resetForm();
+    };
+
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+        transformErrors(errors, { setFieldError });
+      }
+
+      setSubmitting(false);
+    };
+
+    if (!isNewMode) {
+      editPaymentMadeMutate([paymentMadeId, form]).then(onSaved).catch(onError);
+    } else {
+      createPaymentMadeMutate(form).then(onSaved).catch(onError);
+    }
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_PAYMENT_MADE,
+      )}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={
+          isNewMode ? CreatePaymentMadeFormSchema : EditPaymentMadeFormSchema
+        }
+        onSubmit={handleSubmitForm}
+      >
+        <Form>
+          <PaymentMadeInnerProvider>
+            <PaymentMadeFormTopBar />
+            <PaymentMadeHeader />
+            <PaymentMadeFormBody />
+            <PaymentMadeFooter />
+            <PaymentMadeFloatingActions />
+          </PaymentMadeInnerProvider>
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(
+  withSettings(({ billPaymentSettings }) => ({
+    paymentNextNumber: billPaymentSettings?.next_number,
+    paymentNumberPrefix: billPaymentSettings?.number_prefix,
+    preferredPaymentAccount: parseInt(billPaymentSettings?.withdrawalAccount),
+  })),
+  withCurrentOrganization(),
+)(PaymentMadeForm);

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormBody.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { FastField } from 'formik';
+import { CLASSES } from '@/constants/classes';
+import PaymentMadeEntriesTable from './PaymentMadeEntriesTable';
+
+export default function PaymentMadeFormBody() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField name={'entries'}>
+        {({
+          form: { setFieldValue, values },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <PaymentMadeEntriesTable
+            entries={value}
+            onUpdateData={(newEntries) => {
+              setFieldValue('entries', newEntries);
+            }}
+            currencyCode={values.currency_code}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormCurrencyTag.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from '@/components';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+
+/**
+ * Payment made form currency tag.
+ * @returns
+ */
+export default function PaymentMadeFormCurrencyTag() {
+  const { isForeignVendor, selectVendor } = usePaymentMadeFormContext();
+
+  if (!isForeignVendor) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectVendor?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx

@@ -0,0 +1,40 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from '@/components';
+
+/**
+ * Payment made form footer left-side.
+ * @returns {JSX.Element}
+ */
+export function PaymentMadeFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Internal Note--------- */}
+      <InternalNoteFormGroup
+        name={'internal_note'}
+        label={<T id={'payment_made.form.internal_note.label'} />}
+      >
+        <FEditableText
+          name={'internal_note'}
+          placeholder={intl.get('payment_made.form.internal_note.placeholder')}
+        />
+      </InternalNoteFormGroup>
+    </React.Fragment>
+  );
+}
+
+const InternalNoteFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    margin-bottom: 40px;
+
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterRight.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from '@/components';
+import { usePaymentMadeTotals } from './utils';
+
+export function PaymentMadeFormFooterRight() {
+  const { formattedSubtotal, formattedTotal } = usePaymentMadeTotals();
+
+  return (
+    <PaymentMadeTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <TotalLine
+        title={<T id={'payment_made_form.label.subtotal'} />}
+        value={formattedSubtotal}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'payment_made_form.label.total'} />}
+        value={formattedTotal}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </PaymentMadeTotalLines>
+  );
+}
+
+const PaymentMadeTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
+import { sumBy } from 'lodash';
+import { CLASSES } from '@/constants/classes';
+import { Money, FormattedMessage as T } from '@/components';
+
+import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields';
+
+/**
+ * Payment made header form.
+ */
+function PaymentMadeFormHeader() {
+  // Formik form context.
+  const {
+    values: { entries, currency_code },
+  } = useFormikContext();
+
+  // Calculate the payment amount of the entries.
+  const amountPaid = useMemo(() => sumBy(entries, 'payment_amount'), [entries]);
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+        <PaymentMadeFormHeaderFields />
+
+        <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+          <div class="big-amount">
+            <span class="big-amount__label">
+              <T id={'amount_received'} />
+            </span>
+            <h1 class="big-amount__number">
+              <Money amount={amountPaid} currency={currency_code} />
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PaymentMadeFormHeader;

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx

@@ -0,0 +1,277 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  Classes,
+  ControlGroup,
+  Button,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from '@/components';
+import { toSafeInteger } from 'lodash';
+import { CLASSES } from '@/constants/classes';
+
+import {
+  FFormGroup,
+  AccountsSelectList,
+  VendorSelectField,
+  FieldRequiredHint,
+  InputPrependText,
+  Money,
+  Hint,
+  Icon,
+  VendorDrawerLink,
+  MoneyInputGroup,
+} from '@/components';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import { ACCOUNT_TYPE } from '@/constants/accountTypes';
+import { PaymentMadeExchangeRateInputField } from './components';
+import {
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+  inputIntent,
+  compose,
+  safeSumBy,
+  fullAmountPaymentEntries,
+  amountPaymentEntries,
+} from '@/utils';
+import { accountsFieldShouldUpdate, vendorsFieldShouldUpdate } from './utils';
+
+/**
+ * Payment made form header fields.
+ */
+function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
+  // Formik form context.
+  const {
+    values: { entries },
+    setFieldValue,
+  } = useFormikContext();
+
+  // Payment made form context.
+  const { vendors, accounts, isNewMode, setPaymentVendorId } =
+    usePaymentMadeFormContext();
+
+  // Sumation of payable full-amount.
+  const payableFullAmount = useMemo(
+    () => safeSumBy(entries, 'due_amount'),
+    [entries],
+  );
+
+  // Handle receive full-amount click.
+  const handleReceiveFullAmountClick = () => {
+    const newEntries = fullAmountPaymentEntries(entries);
+    const fullAmount = safeSumBy(newEntries, 'payment_amount');
+
+    setFieldValue('entries', newEntries);
+    setFieldValue('full_amount', fullAmount);
+  };
+
+  // Handles the full-amount field blur.
+  const onFullAmountBlur = (value) => {
+    const newEntries = amountPaymentEntries(toSafeInteger(value), entries);
+    setFieldValue('entries', newEntries);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ------------ Vendor name ------------ */}
+      <FastField
+        name={'vendor_id'}
+        vendors={vendors}
+        shouldUpdate={vendorsFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FFormGroup
+            name={'vendor_id'}
+            label={<T id={'vendor_name'} />}
+            inline={true}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            labelInfo={<FieldRequiredHint />}
+          >
+            <VendorSelectField
+              contacts={vendors}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
+                form.setFieldValue('currency_code', contact?.currency_code);
+                setPaymentVendorId(contact.id);
+              }}
+              disabled={!isNewMode}
+              popoverFill={true}
+              allowCreate={true}
+            />
+
+            {value && (
+              <VendorButtonLink vendorId={value}>
+                <T id={'view_vendor_details'} />
+              </VendorButtonLink>
+            )}
+          </FFormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Exchange rate ----------- */}
+      <PaymentMadeExchangeRateInputField
+        name={'exchange_rate'}
+        formGroupProps={{ label: ' ', inline: true }}
+      />
+
+      {/* ------------ Payment date ------------ */}
+      <FastField name={'payment_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'payment_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="payment_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('payment_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Full amount ------------ */}
+      <Field name={'full_amount'}>
+        {({
+          form: {
+            values: { currency_code },
+          },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'full_amount'} />}
+            inline={true}
+            className={('form-group--full-amount', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            labelInfo={<Hint />}
+            helperText={<ErrorMessage name="full_amount" />}
+          >
+            <ControlGroup>
+              <InputPrependText text={currency_code} />
+              <MoneyInputGroup
+                value={value}
+                onChange={(value) => {
+                  setFieldValue('full_amount', value);
+                }}
+                onBlurValue={onFullAmountBlur}
+              />
+            </ControlGroup>
+
+            <Button
+              onClick={handleReceiveFullAmountClick}
+              className={'receive-full-amount'}
+              small={true}
+              minimal={true}
+            >
+              <T id={'receive_full_amount'} /> (
+              <Money amount={payableFullAmount} currency={currency_code} />)
+            </Button>
+          </FormGroup>
+        )}
+      </Field>
+
+      {/* ------------ Payment number ------------ */}
+      <FastField name={'payment_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'payment_no'} />}
+            inline={true}
+            className={('form-group--payment_number', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="payment_number" />}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              minimal={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Payment account ------------ */}
+      <FastField
+        name={'payment_account_id'}
+        accounts={accounts}
+        shouldUpdate={accountsFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'payment_account'} />}
+            className={classNames(
+              'form-group--payment_account_id',
+              'form-group--select-list',
+              Classes.FILL,
+            )}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'payment_account_id'} />}
+          >
+            <AccountsSelectList
+              accounts={accounts}
+              labelInfo={<FieldRequiredHint />}
+              onAccountSelected={(account) => {
+                form.setFieldValue('payment_account_id', account.id);
+              }}
+              defaultSelectText={<T id={'select_payment_account'} />}
+              selectedAccountId={value}
+              filterByTypes={[
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+              ]}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Reference ------------ */}
+      <FastField name={'reference'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              minimal={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(withCurrentOrganization())(PaymentMadeFormHeaderFields);
+
+const VendorButtonLink = styled(VendorDrawerLink)`
+  font-size: 11px;
+  margin-top: 6px;
+`;

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import PaymentMadeForm from './PaymentMadeForm';
+import { PaymentMadeFormProvider } from './PaymentMadeFormProvider';
+
+import '@/style/pages/PaymentMade/PageForm.scss';
+
+/**
+ * Payment made - Page form.
+ */
+export default function PaymentMadeFormPage() {
+  const { id: paymentMadeId } = useParams();
+
+  return (
+    <PaymentMadeFormProvider paymentMadeId={paymentMadeId}>
+      <PaymentMadeForm />
+    </PaymentMadeFormProvider>
+  );
+}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.tsx

@@ -0,0 +1,120 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import {
+  useAccounts,
+  useVendors,
+  useItems,
+  useBranches,
+  usePaymentMadeEditPage,
+  useSettings,
+  useCreatePaymentMade,
+  useEditPaymentMade,
+} from '@/hooks/query';
+import { DashboardInsider } from '@/components';
+
+// Payment made form context.
+const PaymentMadeFormContext = createContext();
+
+/**
+ * Payment made form provider.
+ */
+function PaymentMadeFormProvider({ query, paymentMadeId, ...props }) {
+  const [submitPayload, setSubmitPayload] = React.useState({});
+  const [paymentVendorId, setPaymentVendorId] = React.useState(null);
+
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  // Handle fetch accounts data.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Handle fetch Items data table or list.
+  const {
+    data: { items },
+    isFetching: isItemsFetching,
+    isLoading: isItemsLoading,
+  } = useItems({ page_size: 10000 });
+
+  // Handle fetch venders data table or list.
+  const {
+    data: { vendors },
+    isLoading: isVendorsLoading,
+  } = useVendors({ page_size: 10000 });
+
+  // Handle fetch specific payment made details.
+  const {
+    data: { paymentMade: paymentMadeEditPage, entries: paymentEntriesEditPage },
+    isFetching: isPaymentFetching,
+    isLoading: isPaymentLoading,
+  } = usePaymentMadeEditPage(paymentMadeId, {
+    enabled: !!paymentMadeId,
+  });
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
+  // Fetch payment made settings.
+  useSettings();
+
+  // Create and edit payment made mutations.
+  const { mutateAsync: createPaymentMadeMutate } = useCreatePaymentMade();
+  const { mutateAsync: editPaymentMadeMutate } = useEditPaymentMade();
+
+  const isNewMode = !paymentMadeId;
+
+  const isFeatureLoading = isBranchesLoading;
+
+  // Provider payload.
+  const provider = {
+    paymentMadeId,
+    accounts,
+    paymentEntriesEditPage,
+    paymentMadeEditPage,
+    vendors,
+    items,
+    branches,
+    submitPayload,
+    paymentVendorId,
+
+    isNewMode,
+    isAccountsLoading,
+    isItemsFetching,
+    isItemsLoading,
+    isVendorsLoading,
+    isPaymentFetching,
+    isPaymentLoading,
+    isFeatureLoading,
+    isBranchesSuccess,
+
+    createPaymentMadeMutate,
+    editPaymentMadeMutate,
+
+    setSubmitPayload,
+    setPaymentVendorId,
+  };
+
+  return (
+    <DashboardInsider
+      loading={
+        isVendorsLoading ||
+        isItemsLoading ||
+        isAccountsLoading ||
+        isPaymentLoading
+      }
+      name={'payment-made'}
+    >
+      <PaymentMadeFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentMadeFormContext = () => useContext(PaymentMadeFormContext);
+
+export { PaymentMadeFormProvider, usePaymentMadeFormContext };

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Alignment, NavbarGroup, Button, Classes } from '@blueprintjs/core';
+import { useSetPrimaryBranchToForm } from './utils';
+import { useFeatureCan } from '@/hooks/state';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from '@/components';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import { Features } from '@/constants';
+
+/**
+ * Payment made from top bar.
+ * @returns
+ */
+export default function PaymentMadeFormTopBar() {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
+  // Can't display the navigation bar if  branches feature is not enabled.
+  if (!featureCan(Features.Branches)) {
+    return null;
+  }
+  return (
+    <FormTopbar>
+      <NavbarGroup align={Alignment.LEFT}>
+        <FeatureCan feature={Features.Branches}>
+          <PaymentMadeFormSelectBranch />
+        </FeatureCan>
+      </NavbarGroup>
+    </FormTopbar>
+  );
+}
+
+function PaymentMadeFormSelectBranch() {
+  // payment made form context.
+  const { branches, isBranchesLoading } = usePaymentMadeFormContext();
+
+  return isBranchesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <BranchSelect
+      name={'branch_id'}
+      branches={branches}
+      input={PaymentMadeBranchSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+
+function PaymentMadeBranchSelectButton({ label }) {
+  return (
+    <Button
+      text={intl.get('payment_made.branch_button.label', { label })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'branch-16'} iconSize={16} />}
+    />
+  );
+}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeInnerProvider.tsx

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import React, { createContext, useContext, useEffect } from 'react';
+import { useFormikContext } from 'formik';
+import { usePaymentMadeNewPageEntries } from '@/hooks/query';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import { transformToNewPageEntries } from './utils';
+
+const PaymentMadeInnerContext = createContext();
+
+/**
+ * Payment made inner form provider.
+ */
+function PaymentMadeInnerProvider({ ...props }) {
+  // Payment made form context.
+  const { isNewMode } = usePaymentMadeFormContext();
+
+  // Formik context.
+  const {
+    values: { vendor_id: vendorId },
+    setFieldValue,
+  } = useFormikContext();
+
+  const {
+    data: newPageEntries,
+    isLoading: isNewEntriesLoading,
+    isFetching: isNewEntriesFetching,
+  } = usePaymentMadeNewPageEntries(vendorId, {
+    enabled: !!vendorId && isNewMode,
+    keepPreviousData: true,
+  });
+
+  useEffect(() => {
+    if (!isNewEntriesFetching && newPageEntries && isNewMode) {
+      setFieldValue('entries', transformToNewPageEntries(newPageEntries));
+    }
+  }, [isNewEntriesFetching, newPageEntries, isNewMode, setFieldValue]);
+
+  // Provider payload.
+  const provider = {
+    newPageEntries,
+    isNewEntriesLoading,
+    isNewEntriesFetching,
+  };
+
+  return <PaymentMadeInnerContext.Provider value={provider} {...props} />;
+}
+
+const usePaymentMadeInnerContext = () => useContext(PaymentMadeInnerContext);
+
+export { PaymentMadeInnerProvider, usePaymentMadeInnerContext };

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/components.tsx

@@ -0,0 +1,93 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { Money, ExchangeRateInputGroup } from '@/components';
+import { MoneyFieldCell } from '@/components/DataTableCells';
+import { useFormikContext } from 'formik';
+import { useCurrentOrganization } from '@/hooks/state';
+import { usePaymentMadeIsForeignCustomer } from './utils';
+
+function BillNumberAccessor(row) {
+  return row?.bill_no ? row?.bill_no : '-';
+}
+
+function BillDateCell({ value }) {
+  return moment(value).format('YYYY MMM DD');
+}
+
+/**
+ * Mobey table cell.
+ */
+function MoneyTableCell({ row: { original }, value }) {
+  return <Money amount={value} currency={original.currency_code} />;
+}
+
+/**
+ * Payment made entries table columns
+ */
+export function usePaymentMadeEntriesTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: 'Bill date',
+        id: 'bill_date',
+        accessor: 'bill_date',
+        Cell: BillDateCell,
+        disableSortBy: true,
+        width: 120,
+      },
+      {
+        Header: intl.get('bill_number'),
+        accessor: BillNumberAccessor,
+        disableSortBy: true,
+        width: 120,
+      },
+      {
+        Header: intl.get('bill_amount'),
+        accessor: 'amount',
+        Cell: MoneyTableCell,
+        disableSortBy: true,
+        width: 150,
+      },
+      {
+        Header: intl.get('amount_due'),
+        accessor: 'due_amount',
+        Cell: MoneyTableCell,
+        disableSortBy: true,
+        width: 150,
+      },
+      {
+        Header: intl.get('payment_amount'),
+        accessor: 'payment_amount',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+        width: 150,
+      },
+    ],
+    [],
+  );
+}
+
+/**
+ * payment made exchange rate input field.
+ * @returns {JSX.Element}
+ */
+export function PaymentMadeExchangeRateInputField({ ...props }) {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  const isForeignCustomer = usePaymentMadeIsForeignCustomer();
+
+  // Can't continue if the customer is not foreign.
+  if (!isForeignCustomer) {
+    return null;
+  }
+  return (
+    <ExchangeRateInputGroup
+      fromCurrency={values.currency_code}
+      toCurrency={currentOrganization.base_currency}
+      {...props}
+    />
+  );
+}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx

@@ -0,0 +1,182 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { pick, first, sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from '@/components';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import {
+  defaultFastFieldShouldUpdate,
+  safeSumBy,
+  transformToForm,
+  orderingLinesIndexes,
+  formattedAmount,
+} from '@/utils';
+import { useCurrentOrganization } from '@/hooks/state';
+
+export const ERRORS = {
+  PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
+};
+
+// Default payment made entry values.
+export const defaultPaymentMadeEntry = {
+  bill_id: '',
+  payment_amount: '',
+  currency_code: '',
+  id: null,
+  due_amount: null,
+  amount: '',
+};
+
+// Default initial values of payment made.
+export const defaultPaymentMade = {
+  full_amount: '',
+  vendor_id: '',
+  payment_account_id: '',
+  payment_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference: '',
+  payment_number: '',
+  statement: '',
+  currency_code: '',
+  branch_id: '',
+  exchange_rate: 1,
+  entries: [],
+};
+
+export const transformToEditForm = (paymentMade, paymentMadeEntries) => {
+  return {
+    ...transformToForm(paymentMade, defaultPaymentMade),
+    full_amount: safeSumBy(paymentMadeEntries, 'payment_amount'),
+    entries: [
+      ...paymentMadeEntries.map((paymentMadeEntry) => ({
+        ...transformToForm(paymentMadeEntry, defaultPaymentMadeEntry),
+        payment_amount: paymentMadeEntry.payment_amount || '',
+      })),
+    ],
+  };
+};
+
+/**
+ * Transform the new page entries.
+ */
+export const transformToNewPageEntries = (entries) => {
+  return entries.map((entry) => ({
+    ...transformToForm(entry, defaultPaymentMadeEntry),
+    payment_amount: '',
+    currency_code: entry.currency_code,
+  }));
+};
+
+/**
+ * Detarmines vendors fast field when update.
+ */
+export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.vendors !== oldProps.vendors ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Detarmines accounts fast field when update.
+ */
+export const accountsFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.accounts !== oldProps.accounts ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Transformes the form values to request body.
+ */
+export const transformFormToRequest = (form) => {
+  // Filters entries that have no `bill_id` or `payment_amount`.
+  const entries = form.entries
+    .filter((item) => item.bill_id && item.payment_amount)
+    .map((entry) => ({
+      ...pick(entry, ['payment_amount', 'bill_id']),
+    }));
+
+  return { ...form, entries: orderingLinesIndexes(entries) };
+};
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = usePaymentMadeFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};
+
+/**
+ * Transformes the response errors types.
+ */
+export const transformErrors = (errors, { setFieldError }) => {
+  const getError = (errorType) => errors.find((e) => e.type === errorType);
+
+  if (getError('PAYMENT_NUMBER_NOT_UNIQUE')) {
+    setFieldError('payment_number', intl.get('payment_number_is_not_unique'));
+  }
+  if (getError('WITHDRAWAL_ACCOUNT_CURRENCY_INVALID')) {
+    AppToaster.show({
+      message: intl.get(
+        'payment_made.error.withdrawal_account_currency_invalid',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+export const usePaymentMadeTotals = () => {
+  const {
+    values: { entries, currency_code: currencyCode },
+  } = useFormikContext();
+
+  // Retrieves the invoice entries total.
+  const total = React.useMemo(
+    () => sumBy(entries, 'payment_amount'),
+    [entries],
+  );
+
+  // Retrieves the formatted total money.
+  const formattedTotal = React.useMemo(
+    () => formattedAmount(total, currencyCode),
+    [total, currencyCode],
+  );
+  // Retrieves the formatted subtotal.
+  const formattedSubtotal = React.useMemo(
+    () => formattedAmount(total, currencyCode, { money: false }),
+    [total, currencyCode],
+  );
+
+  return {
+    total,
+    formattedTotal,
+    formattedSubtotal,
+  };
+};
+
+/**
+ * Detarmines whether the bill has foreign customer.
+ * @returns {boolean}
+ */
+export const usePaymentMadeIsForeignCustomer = () => {
+  const { values } = useFormikContext();
+  const currentOrganization = useCurrentOrganization();
+
+  const isForeignCustomer = React.useMemo(
+    () => values.currency_code !== currentOrganization.base_currency,
+    [values.currency_code, currentOrganization.base_currency],
+  );
+  return isForeignCustomer;
+};

packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+
+import { Icon } from '@/components';
+import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import { highlightText } from '@/utils';
+import { AbilitySubject, PaymentMadeAction } from '@/constants/abilityOption';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+
+/**
+ * Universal search bill item select action.
+ */
+function PaymentMadeUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.PAYMENT_MADE) {
+    openDrawer('payment-made-detail-drawer', { paymentMadeId: resourceId });
+  }
+  return null;
+}
+
+export const PaymentMadeUniversalSearchSelect = withDrawerActions(
+  PaymentMadeUniversalSearchSelectComponent,
+);
+
+/**
+ * Payment made universal search item.
+ */
+export function PaymentMadeUniversalSearchItem(
+  { text, label, reference },
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{highlightText(text, query)}</div>
+
+          <span class="bp3-text-muted">
+            {reference.payment_number && (
+              <>
+                {highlightText(reference.payment_number, query)}
+                <Icon icon={'caret-right-16'} iconSize={16} />
+              </>
+            )}
+            {highlightText(reference.formatted_payment_date, query)}
+          </span>
+        </div>
+      }
+      label={<div class="amount">{label}</div>}
+      onClick={handleClick}
+      className={'universal-search__item--payment-made'}
+    />
+  );
+}
+
+/**
+ * Payment made resource item to search item.
+ */
+const paymentMadeToSearch = (payment) => ({
+  id: payment.id,
+  text: payment.vendor.display_name,
+  label: payment.formatted_amount,
+  reference: payment,
+});
+
+/**
+ * Binds universal search payment made configure.
+ */
+export const universalSearchPaymentMadeBind = () => ({
+  resourceType: RESOURCES_TYPES.PAYMENT_MADE,
+  optionItemLabel: intl.get('payment_mades'),
+  selectItemAction: PaymentMadeUniversalSearchSelect,
+  itemRenderer: PaymentMadeUniversalSearchItem,
+  itemSelect: paymentMadeToSearch,
+  permission: {
+    ability: PaymentMadeAction.View,
+    subject: AbilitySubject.PaymentMade,
+  },
+});

packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadesAlerts.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import React from 'react';
+
+const PaymentMadeDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert'),
+);
+
+export default [
+  { name: 'payment-made-delete', component: PaymentMadeDeleteAlert },
+];

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.tsx

@@ -0,0 +1,165 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+
+import { useHistory } from 'react-router-dom';
+
+import {
+  If,
+  Can,
+  Icon,
+  FormattedMessage as T,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+  DashboardRowsHeightButton,
+  DashboardActionsBar,
+} from '@/components';
+
+import withPaymentMade from './withPaymentMade';
+import withPaymentMadeActions from './withPaymentMadeActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+
+import { usePaymentMadesListContext } from './PaymentMadesListProvider';
+import { useRefreshPaymentMades } from '@/hooks/query/paymentMades';
+import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
+
+import { compose } from '@/utils';
+
+/**
+ * Payment made actions bar.
+ */
+function PaymentMadeActionsBar({
+  // #withPaymentMadesActions
+  setPaymentMadesTableState,
+
+  // #withPaymentMades
+  paymentMadesFilterConditions,
+
+  // #withSettings
+  paymentMadesTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+
+  // Payment receives list context.
+  const { paymentMadesViews, fields } = usePaymentMadesListContext();
+
+  // Payment receive refresh action.
+  const { refresh } = useRefreshPaymentMades();
+
+  // Handle new payment made button click.
+  const handleClickNewPaymentMade = () => {
+    history.push('/payment-mades/new');
+  };
+
+  // Handle tab changing.
+  const handleTabChange = (viewSlug) => {
+    setPaymentMadesTableState({ viewSlug });
+  };
+
+  // Handle click a refresh payment receives.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('billPayments', 'tableSize', size);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'bill_payments'}
+          views={paymentMadesViews}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_payment_made'} />}
+            onClick={handleClickNewPaymentMade}
+          />
+        </Can>
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: paymentMadesFilterConditions,
+            defaultFieldKey: 'payment_number',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setPaymentMadesTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={paymentMadesFilterConditions.length}
+          />
+        </AdvancedFilterPopover>
+
+        <If condition={false}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            // onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={paymentMadesTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withPaymentMadeActions,
+  withSettingsActions,
+  withPaymentMade(({ paymentMadesTableState }) => ({
+    paymentMadesFilterConditions: paymentMadesTableState.filterRoles,
+  })),
+  withSettings(({ billPaymentSettings }) => ({
+    paymentMadesTableSize: billPaymentSettings?.tableSize,
+  })),
+)(PaymentMadeActionsBar);

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.tsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/pages/PaymentMade/List.scss';
+
+import { DashboardPageContent } from '@/components';
+import { PaymentMadesListProvider } from './PaymentMadesListProvider';
+import PaymentMadeActionsBar from './PaymentMadeActionsBar';
+import PaymentMadesTable from './PaymentMadesTable';
+import PaymentMadeViewTabs from './PaymentMadeViewTabs';
+
+import withPaymentMades from './withPaymentMade';
+import withPaymentMadeActions from './withPaymentMadeActions';
+
+import { compose, transformTableStateToQuery } from '@/utils';
+
+/**
+ * Payment mades list.
+ */
+function PaymentMadeList({
+  // #withPaymentMades
+  paymentMadesTableState,
+  paymentsTableStateChanged,
+
+  // #withPaymentMadeActions
+  resetPaymentMadesTableState,
+}) {
+  // Resets the invoices table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetPaymentMadesTableState();
+    },
+    [resetPaymentMadesTableState],
+  );
+
+  return (
+    <PaymentMadesListProvider
+      query={transformTableStateToQuery(paymentMadesTableState)}
+      tableStateChanged={paymentsTableStateChanged}
+    >
+      <PaymentMadeActionsBar />
+
+      <DashboardPageContent>
+        <PaymentMadeViewTabs />
+        <PaymentMadesTable />
+      </DashboardPageContent>
+    </PaymentMadesListProvider>
+  );
+}
+
+export default compose(
+  withPaymentMades(({ paymentMadesTableState, paymentsTableStateChanged }) => ({
+    paymentMadesTableState,
+    paymentsTableStateChanged,
+  })),
+  withPaymentMadeActions,
+)(PaymentMadeList);

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.tsx

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router';
+import { DashboardViewsTabs, FormattedMessage as T } from '@/components';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { compose } from '@/utils';
+import { usePaymentMadesListContext } from './PaymentMadesListProvider';
+import { transformPaymentViewsToTabs } from './utils';
+
+import withPaymentMade from './withPaymentMade';
+import withPaymentMadeActions from './withPaymentMadeActions';
+
+/**
+ * Payment made views tabs.
+ */
+function PaymentMadeViewTabs({
+  // #withPaymentMadesActions
+  setPaymentMadesTableState,
+
+  // #withPaymentMade
+  paymentMadesTableState,
+}) {
+  const history = useHistory();
+
+  // Payment receives list context.
+  const { paymentMadesViews } = usePaymentMadesListContext();
+
+  // Handle the active tab changning.
+  const handleTabsChange = (viewSlug) => {
+    setPaymentMadesTableState({ viewSlug });
+  };
+  // Transformes payment views to tabs.
+  const tabs = React.useMemo(
+    () => transformPaymentViewsToTabs(paymentMadesViews),
+    [paymentMadesViews],
+  );
+
+  const handleClickNewView = () => {
+    history.push('/custom_views/payment-mades/new');
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          customViewId={paymentMadesTableState.customViewId}
+          defaultTabText={<T id={'all_payments'} />}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withPaymentMadeActions,
+  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
+)(PaymentMadeViewTabs);

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.tsx

@@ -0,0 +1,40 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus, Can, FormattedMessage as T } from '@/components';
+import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
+
+export default function PaymentMadesEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'payment_made.empty_status.title'} />}
+      description={
+        <p>
+          <T id="payment_made_empty_status_description" />
+        </p>
+      }
+      action={
+        <>
+          <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/payment-mades/new');
+              }}
+            >
+              <T id={'new_bill_payment'} />
+            </Button>
+
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
+        </>
+      }
+    />
+  );
+}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import { DashboardInsider } from '@/components/Dashboard';
+import {
+  useResourceViews,
+  usePaymentMades,
+  useResourceMeta,
+} from '@/hooks/query';
+import { getFieldsFromResourceMeta } from '@/utils';
+
+const PaymentMadesListContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function PaymentMadesListProvider({ query, tableStateChanged, ...props }) {
+  // Fetch accounts resource views and fields.
+  const { data: paymentMadesViews, isLoading: isViewsLoading } =
+    useResourceViews('bill_payments');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('bill_payments');
+
+  // Fetch accounts list according to the given custom view id.
+  const {
+    data: { paymentMades, pagination, filterMeta },
+    isLoading: isPaymentsLoading,
+    isFetching: isPaymentsFetching,
+  } = usePaymentMades(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(paymentMades) && !isPaymentsLoading && !tableStateChanged;
+
+  // Provider payload.
+  const provider = {
+    paymentMades,
+    pagination,
+    filterMeta,
+    paymentMadesViews,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
+    isPaymentsLoading,
+    isPaymentsFetching,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceMetaLoading}
+      name={'payment-mades-list'}
+    >
+      <PaymentMadesListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentMadesListContext = () =>
+  React.useContext(PaymentMadesListContext);
+
+export { PaymentMadesListProvider, usePaymentMadesListContext };

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.tsx

@@ -0,0 +1,144 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { compose } from '@/utils';
+import { TABLES } from '@/constants/tables';
+import {
+  DataTable,
+  DashboardContentTable,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+} from '@/components';
+
+import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
+
+import withPaymentMade from './withPaymentMade';
+import withPaymentMadeActions from './withPaymentMadeActions';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+import { usePaymentMadesTableColumns, ActionsMenu } from './components';
+import { usePaymentMadesListContext } from './PaymentMadesListProvider';
+import { useMemorizedColumnsWidths } from '@/hooks';
+
+/**
+ * Payment made datatable transactions.
+ */
+function PaymentMadesTable({
+  // #withPaymentMadeActions
+  setPaymentMadesTableState,
+
+  // #withPaymentMade
+  paymentMadesTableState,
+
+  // #withAlerts
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withSettings
+  paymentMadesTableSize,
+}) {
+  // Payment mades table columns.
+  const columns = usePaymentMadesTableColumns();
+
+  // Payment mades list context.
+  const {
+    paymentMades,
+    pagination,
+    isEmptyStatus,
+    isPaymentsLoading,
+    isPaymentsFetching,
+  } = usePaymentMadesListContext();
+
+  // History context.
+  const history = useHistory();
+
+  // Handles the edit payment made action.
+  const handleEditPaymentMade = (paymentMade) => {
+    history.push(`/payment-mades/${paymentMade.id}/edit`);
+  };
+
+  // Handles the delete payment made action.
+  const handleDeletePaymentMade = (paymentMade) => {
+    openAlert('payment-made-delete', { paymentMadeId: paymentMade.id });
+  };
+
+  // Handle view detail  payment made.
+  const handleViewDetailPaymentMade = ({ id }) => {
+    openDrawer('payment-made-detail-drawer', { paymentMadeId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('payment-made-detail-drawer', {
+      paymentMadeId: cell.row.original.id,
+    });
+  };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.PAYMENT_MADES);
+
+  // Handle datatable fetch data once the table state change.
+  const handleDataTableFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      setPaymentMadesTableState({ pageIndex, pageSize, sortBy });
+    },
+    [setPaymentMadesTableState],
+  );
+
+  // Display empty status instead of the table.
+  if (isEmptyStatus) {
+    return <PaymentMadesEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={paymentMades}
+        onFetchData={handleDataTableFetchData}
+        loading={isPaymentsLoading}
+        headerLoading={isPaymentsLoading}
+        progressBarLoading={isPaymentsFetching}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        size={paymentMadesTableSize}
+        payload={{
+          onEdit: handleEditPaymentMade,
+          onDelete: handleDeletePaymentMade,
+          onViewDetails: handleViewDetailPaymentMade,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withPaymentMadeActions,
+  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
+  withAlertsActions,
+  withDrawerActions,
+  withCurrentOrganization(),
+  withSettings(({ billPaymentSettings }) => ({
+    paymentMadesTableSize: billPaymentSettings?.tableSize,
+  })),
+)(PaymentMadesTable);

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesView.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React, { useEffect } from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+import PaymentMadeViewTabs from './PaymentMadeViewTabs';
+
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Payment mades view page.
+ */
+function PaymentMadesViewPage({
+  // #withAlertActions
+  openAlert,
+}) {
+  return (
+    <Switch>
+      <Route
+        exact={true}
+        path={['/payment-mades/:custom_view_id/custom_view', '/payment-mades']}
+      >
+        
+        {/* <PaymentMadeDataTable
+              onDeletePaymentMade={handleDeletePaymentMade}
+              onEditPaymentMade={handleEditPaymentMade}
+              onSelectedRowsChange={handleSelectedRowsChange}
+            /> */}
+      </Route>
+    </Switch>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDialogActions,
+)(PaymentMadesViewPage);

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.tsx

@@ -0,0 +1,54 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { DashboardInsider } from '@/components/Dashboard';
+import {
+  useResourceViews,
+  useResourceFields,
+  usePaymentMades,
+} from '@/hooks/query';
+
+const PaymentMadesContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function PaymentMadesProvider({ query, ...props }) {
+  // Fetch accounts resource views and fields.
+  const { data: paymentsViews, isLoading: isViewsLoading } =
+    useResourceViews('bill_payments');
+
+  // Fetch the accounts resource fields.
+  const { data: paymentsFields, isLoading: isFieldsLoading } =
+    useResourceFields('bill_payments');
+
+  // Fetch accounts list according to the given custom view id.
+  const {
+    data: { paymentMades, pagination },
+    isLoading: isPaymentsLoading,
+  } = usePaymentMades(query);
+
+  // Provider payload.
+  const provider = {
+    paymentMades,
+    pagination,
+    paymentsFields,
+    paymentsViews,
+
+    isPaymentsLoading,
+    isFieldsLoading,
+    isViewsLoading,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isFieldsLoading}
+      name={'payment_made'}
+    >
+      <PaymentMadesContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentMadesContext = () => React.useContext(PaymentMadesContext);
+
+export { PaymentMadesProvider, usePaymentMadesContext };

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/components.tsx

@@ -0,0 +1,133 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+
+import { Icon, Money, FormatDateCell, Can } from '@/components';
+import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
+
+import { safeCallback } from '@/utils';
+
+export function AmountAccessor(row) {
+  return <Money amount={row.amount} currency={row.currency_code} />;
+}
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete, onViewDetails },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+
+      <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_payment_made')}
+          onClick={safeCallback(onEdit, original)}
+        />
+      </Can>
+      <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('delete_payment_made')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Payment mades table actions cell.
+ */
+export function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Retrieve payment mades table columns.
+ */
+export function usePaymentMadesTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'payment_date',
+        Header: intl.get('payment_date'),
+        Cell: FormatDateCell,
+        accessor: 'payment_date',
+        width: 140,
+        className: 'payment_date',
+        clickable: true,
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor_name'),
+        accessor: 'vendor.display_name',
+        width: 140,
+        className: 'vendor_id',
+        clickable: true,
+      },
+      {
+        id: 'payment_number',
+        Header: intl.get('payment_number'),
+        accessor: (row) =>
+          row.payment_number ? `${row.payment_number}` : null,
+        width: 140,
+        className: 'payment_number',
+        clickable: true,
+      },
+      {
+        id: 'payment_account',
+        Header: intl.get('payment_account'),
+        accessor: 'payment_account.name',
+        width: 140,
+        className: 'payment_account_id',
+        clickable: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: AmountAccessor,
+        width: 140,
+        className: 'amount',
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference'),
+        accessor: 'reference',
+        width: 140,
+        className: 'reference',
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/utils.tsx

@@ -0,0 +1,8 @@
+// @ts-nocheck
+import { pick } from 'lodash';
+
+export const transformPaymentViewsToTabs = (paymentMadeViews) => {
+    return paymentMadeViews.map((view) => ({
+      ...pick(view, ['name', 'id']),
+    }));
+  };

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMade.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getPaymentMadesTableStateFactory,
+  paymentsTableStateChangedFactory,
+} from '@/store/PaymentMades/paymentMades.selector';
+
+export default (mapState) => {
+  const getPaymentMadesTableState = getPaymentMadesTableStateFactory();
+  const paymentsTableStateChanged = paymentsTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      paymentMadesTableState: getPaymentMadesTableState(state, props),
+      paymentsTableStateChanged: paymentsTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeActions.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  setPaymentMadesTableState,
+  resetPaymentMadesTableState,
+} from '@/store/PaymentMades/paymentMades.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setPaymentMadesTableState: (state) =>
+    dispatch(setPaymentMadesTableState(state)),
+
+  resetPaymentMadesTableState: () => dispatch(resetPaymentMadesTableState()),
+});
+export default connect(null, mapDispatchToProps);

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeDetail.tsx

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import { getPaymentMadeByIdFactory } from '@/store/PaymentMades/paymentMade.selector';
+
+export default () => {
+  const getPaymentMadeById = getPaymentMadeByIdFactory();
+
+  const mapStateToProps = (state, props) => ({
+    paymentMade: getPaymentMadeById(state, props),
+  });
+  return connect(mapStateToProps);
+};