re-structure to monorepo.

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveAlerts.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import React from 'react';
+
+const PaymentReceiveDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert'),
+);
+
+/**
+ * PaymentReceives alert.
+ */
+export default [
+  { name: 'payment-receive-delete', component: PaymentReceiveDeleteAlert },
+];

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx

@@ -0,0 +1,117 @@
+// @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 { CLASSES } from '@/constants/classes';
+
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+
+/**
+ * Payment receive floating actions bar.
+ */
+export default function PaymentReceiveFormFloatingActions() {
+  // Payment receive form context.
+  const { setSubmitPayload, isNewMode } = usePaymentReceiveFormContext();
+
+  // Formik form context.
+  const { isSubmitting, submitForm, resetForm } = useFormikContext();
+
+  // History context.
+  const history = useHistory();
+
+  // Handle submit button click.
+  const handleSubmitBtnClick = (event) => {
+    setSubmitPayload({ redirect: true });
+    submitForm();
+  };
+
+  // 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 });
+    submitForm();
+  };
+
+  // Handle submit & continue editing button click.
+  const handleSubmitContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, publish: true });
+    submitForm();
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save and New ----------- */}
+      <ButtonGroup>
+        <Button
+          disabled={isSubmitting}
+          loading={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          style={{ minWidth: '85px' }}
+          text={!isNewMode ? <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={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+
+      {/* ----------- Cancel  ----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.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({
+  customer_id: Yup.string().label(intl.get('customer_name_')).required(),
+  payment_date: Yup.date().required().label(intl.get('payment_date_')),
+  deposit_account_id: Yup.number()
+    .required()
+    .label(intl.get('deposit_account_')),
+  full_amount: Yup.number().nullable(),
+  payment_receive_no: Yup.string()
+    .nullable()
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('payment_receive_no_')),
+  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
+  // statement: Yup.string().nullable().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')),
+      invoice_id: Yup.number()
+        .nullable()
+        .when(['payment_amount'], {
+          is: (payment_amount) => payment_amount,
+          then: Yup.number().required(),
+        }),
+    }),
+  ),
+});
+
+export const CreatePaymentReceiveFormSchema = Schema;
+export const EditPaymentReceiveFormSchema = Schema;

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx

@@ -0,0 +1,198 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { Formik, Form } from 'formik';
+import { omit, sumBy, pick, isEmpty, defaultTo } from 'lodash';
+import { Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+
+import '@/style/pages/PaymentReceive/PageForm.scss';
+
+import { CLASSES } from '@/constants/classes';
+import PaymentReceiveHeader from './PaymentReceiveFormHeader';
+import PaymentReceiveFormBody from './PaymentReceiveFormBody';
+import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
+import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
+import PaymentReceiveFormAlerts from './PaymentReceiveFormAlerts';
+import PaymentReceiveFormDialogs from './PaymentReceiveFormDialogs';
+import PaymentReceiveFormTopBar from './PaymentReceiveFormTopBar';
+import { PaymentReceiveInnerProvider } from './PaymentReceiveInnerProvider';
+
+import withSettings from '@/containers/Settings/withSettings';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+import {
+  EditPaymentReceiveFormSchema,
+  CreatePaymentReceiveFormSchema,
+} from './PaymentReceiveForm.schema';
+import { AppToaster } from '@/components';
+import { transactionNumber, compose } from '@/utils';
+
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+import {
+  defaultPaymentReceive,
+  transformToEditForm,
+  transformFormToRequest,
+  transformErrors,
+} from './utils';
+
+/**
+ * Payment Receive form.
+ */
+function PaymentReceiveForm({
+  // #withSettings
+  preferredDepositAccount,
+  paymentReceiveNextNumber,
+  paymentReceiveNumberPrefix,
+  paymentReceiveAutoIncrement,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const history = useHistory();
+
+  // Payment receive form context.
+  const {
+    isNewMode,
+    paymentReceiveEditPage,
+    paymentEntriesEditPage,
+    paymentReceiveId,
+    submitPayload,
+    editPaymentReceiveMutate,
+    createPaymentReceiveMutate,
+  } = usePaymentReceiveFormContext();
+
+  // Payment receive number.
+  const nextPaymentNumber = transactionNumber(
+    paymentReceiveNumberPrefix,
+    paymentReceiveNextNumber,
+  );
+
+  // Form initial values.
+  const initialValues = useMemo(
+    () => ({
+      ...(!isEmpty(paymentReceiveEditPage)
+        ? transformToEditForm(paymentReceiveEditPage, paymentEntriesEditPage)
+        : {
+            ...defaultPaymentReceive,
+            ...(paymentReceiveAutoIncrement && {
+              payment_receive_no: nextPaymentNumber,
+              deposit_account_id: defaultTo(preferredDepositAccount, ''),
+            }),
+            currency_code: base_currency,
+          }),
+    }),
+    [
+      paymentReceiveEditPage,
+      nextPaymentNumber,
+      paymentEntriesEditPage,
+      paymentReceiveAutoIncrement,
+      preferredDepositAccount,
+    ],
+  );
+
+  // Handle form submit.
+  const handleSubmitForm = (
+    values,
+    { setSubmitting, resetForm, setFieldError },
+  ) => {
+    setSubmitting(true);
+
+    // Calculates the 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);
+
+    // Handle request response success.
+    const onSaved = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          paymentReceiveId
+            ? 'the_payment_receive_transaction_has_been_edited'
+            : 'the_payment_receive_transaction_has_been_created',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      if (submitPayload.redirect) {
+        history.push('/payment-receives');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+        transformErrors(errors, { setFieldError });
+      }
+      setSubmitting(false);
+    };
+
+    if (paymentReceiveId) {
+      editPaymentReceiveMutate([paymentReceiveId, form])
+        .then(onSaved)
+        .catch(onError);
+    } else {
+      createPaymentReceiveMutate(form).then(onSaved).catch(onError);
+    }
+  };
+  return (
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_PAYMENT_RECEIVE,
+      )}
+    >
+      <Formik
+        initialValues={initialValues}
+        onSubmit={handleSubmitForm}
+        validationSchema={
+          isNewMode
+            ? CreatePaymentReceiveFormSchema
+            : EditPaymentReceiveFormSchema
+        }
+      >
+        <Form>
+          <PaymentReceiveInnerProvider>
+            <PaymentReceiveFormTopBar />
+            <PaymentReceiveHeader />
+            <PaymentReceiveFormBody />
+            <PaymentReceiveFormFooter />
+            <PaymentReceiveFloatingActions />
+
+            {/* ------- Alerts & Dialogs ------- */}
+            <PaymentReceiveFormAlerts />
+            <PaymentReceiveFormDialogs />
+          </PaymentReceiveInnerProvider>
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceiveSettings,
+    paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
+    paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
+    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
+    preferredDepositAccount: paymentReceiveSettings?.preferredDepositAccount,
+  })),
+  withCurrentOrganization(),
+)(PaymentReceiveForm);

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormAlerts.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import ClearingAllLinesAlert from '@/containers/Alerts/PaymentReceives/ClearingAllLinesAlert';
+import { clearAllPaymentEntries } from './utils';
+
+/**
+ * Payment receive form alerts.
+ */
+export default function PaymentReceiveFormAlerts() {
+  const { values: { entries }, setFieldValue } = useFormikContext();
+
+  const handleClearingAllLines = () => {
+    const newEntries = clearAllPaymentEntries(entries);
+    setFieldValue('entries', newEntries);
+    setFieldValue('full_amount', '');
+  };
+
+  return (
+    <>
+      <ClearingAllLinesAlert
+        name={'clear-all-lines-payment-receive'}
+        onConfirm={handleClearingAllLines}
+      />
+    </>
+  );
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormBody.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField } from 'formik';
+import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+
+/**
+ * Payment Receive form body.
+ */
+export default function PaymentReceiveFormBody() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField name={'entries'}>
+        {({ form: { values, setFieldValue }, field: { value } }) => (
+          <PaymentReceiveItemsTable
+            entries={value}
+            onUpdateData={(newEntries) => {
+              setFieldValue('entries', newEntries);
+            }}
+            currencyCode={values.currency_code}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormCurrencyTag.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+import { BaseCurrency, BaseCurrencyRoot } from '@/components';
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+
+/**
+ * Payment reecevie form currnecy tag.
+ * @returns
+ */
+export default function PaymentReceiveFormCurrencyTag() {
+  const { isForeignCustomer, selectCustomer } = usePaymentReceiveFormContext();
+
+  if (!isForeignCustomer) {
+    return null;
+  }
+
+  return (
+    <BaseCurrencyRoot>
+      <BaseCurrency currency={selectCustomer?.currency_code} />
+    </BaseCurrencyRoot>
+  );
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import PaymentReceiveNumberDialog from '@/containers/Dialogs/PaymentReceiveNumberDialog';
+
+/**
+ * Payment receive form dialogs.
+ */
+export default function PaymentReceiveFormDialogs() {
+  const { setFieldValue } = useFormikContext();
+
+  const handleUpdatePaymentNumber = ({ incrementNumber, manually }) => {
+    setFieldValue('payment_receive_no', incrementNumber);
+    setFieldValue('payment_receive_no_manually', manually)
+  };
+
+  return (
+    <>
+      <PaymentReceiveNumberDialog
+        dialogName={'payment-receive-number-form'}
+        onConfirm={handleUpdatePaymentNumber}
+      />
+    </>
+  );
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.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 { PaymentReceiveFormFootetLeft } from './PaymentReceiveFormFootetLeft';
+import { PaymentReceiveFormFootetRight } from './PaymentReceiveFormFootetRight';
+
+/**
+ * Payment receive form footer.
+ */
+export default function PaymentReceiveFormFooter() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <PaymentReceiveFooterPaper>
+        <Row>
+          <Col md={8}>
+            <PaymentReceiveFormFootetLeft />
+          </Col>
+
+          <Col md={4}>
+            <PaymentReceiveFormFootetRight />
+          </Col>
+        </Row>
+      </PaymentReceiveFooterPaper>
+    </div>
+  );
+}
+
+const PaymentReceiveFooterPaper = styled(Paper)`
+  padding: 20px;
+`;

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetLeft.tsx

@@ -0,0 +1,59 @@
+// @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 PaymentReceiveFormFootetLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Statement--------- */}
+      <PaymentMsgFormGroup
+        name={'message'}
+        label={<T id={'payment_receive_form.message.label'} />}
+      >
+        <FEditableText
+          name={'message'}
+          placeholder={intl.get('payment_receive_form.message.placeholder')}
+        />
+      </PaymentMsgFormGroup>
+
+      {/* --------- Internal Note--------- */}
+      <TermsConditsFormGroup
+        name={'internal_note'}
+        label={<T id={'payment_receive_form.label.note'} />}
+      >
+        <FEditableText
+          name={'internal_note'}
+          placeholder={intl.get('payment_receive_form.internal_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;
+    }
+  }
+`;
+
+const PaymentMsgFormGroup = 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/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetRight.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 { usePaymentReceiveTotals } from './utils';
+
+export function PaymentReceiveFormFootetRight() {
+  const { formattedSubtotal, formattedTotal } = usePaymentReceiveTotals();
+
+  return (
+    <PaymentReceiveTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+      <TotalLine
+        title={<T id={'payment_receive_form.label.subtotal'} />}
+        value={formattedSubtotal}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'payment_receive_form.label.total'} />}
+        value={formattedTotal}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </PaymentReceiveTotalLines>
+  );
+}
+
+const PaymentReceiveTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
+import { Money } from '@/components';
+import { FormattedMessage as T } from '@/components';
+
+import { CLASSES } from '@/constants/classes';
+import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
+
+/**
+ * Payment receive form header.
+ */
+function PaymentReceiveFormHeader() {
+  // Formik form context.
+  const {
+    values: { currency_code, entries },
+  } = useFormikContext();
+
+  // Calculates the total payment amount from due amount.
+  const paymentFullAmount = useMemo(
+    () => sumBy(entries, 'payment_amount'),
+    [entries],
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+        <PaymentReceiveHeaderFields />
+
+        <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={paymentFullAmount} currency={currency_code} />
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PaymentReceiveFormHeader;

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormPage.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { PaymentReceiveFormProvider } from './PaymentReceiveFormProvider';
+import PaymentReceiveForm from './PaymentReceiveForm';
+
+/**
+ * Payment receive form page.
+ */
+export default function PaymentReceiveFormPage() {
+  const { id: paymentReceiveId } = useParams();
+  const paymentReceiveIdInt = parseInt(paymentReceiveId, 10);
+
+  return (
+    <PaymentReceiveFormProvider paymentReceiveId={paymentReceiveIdInt}>
+      <PaymentReceiveForm paymentReceiveId={paymentReceiveIdInt} />
+    </PaymentReceiveFormProvider>
+  );
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.tsx

@@ -0,0 +1,115 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { DashboardInsider } from '@/components';
+import { useProjects } from '@/containers/Projects/hooks';
+import {
+  useSettingsPaymentReceives,
+  usePaymentReceiveEditPage,
+  useAccounts,
+  useCustomers,
+  useBranches,
+  useCreatePaymentReceive,
+  useEditPaymentReceive,
+} from '@/hooks/query';
+
+// Payment receive form context.
+const PaymentReceiveFormContext = createContext();
+
+/**
+ * Payment receive form provider.
+ */
+function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) {
+  // Form state.
+  const [submitPayload, setSubmitPayload] = React.useState({});
+
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+  const isProjectsFeatureCan = featureCan(Features.Projects);
+
+  // Fetches payment recevie details.
+  const {
+    data: {
+      paymentReceive: paymentReceiveEditPage,
+      entries: paymentEntriesEditPage,
+    },
+    isLoading: isPaymentLoading,
+    isFetching: isPaymentFetching,
+  } = usePaymentReceiveEditPage(paymentReceiveId, {
+    enabled: !!paymentReceiveId,
+  });
+  // Handle fetch accounts data.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Fetch payment made settings.
+  const fetchSettings = useSettingsPaymentReceives();
+
+  // Fetches customers list.
+  const {
+    data: { customers },
+    isLoading: isCustomersLoading,
+  } = useCustomers({ page_size: 10000 });
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
+  // Fetches the projects list.
+  const {
+    data: { projects },
+    isLoading: isProjectsLoading,
+  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
+
+  // Detarmines whether the new mode.
+  const isNewMode = !paymentReceiveId;
+
+  const isFeatureLoading = isBranchesLoading;
+
+  // Create and edit payment receive mutations.
+  const { mutateAsync: editPaymentReceiveMutate } = useEditPaymentReceive();
+  const { mutateAsync: createPaymentReceiveMutate } = useCreatePaymentReceive();
+
+  // Provider payload.
+  const provider = {
+    paymentReceiveId,
+    paymentReceiveEditPage,
+    paymentEntriesEditPage,
+    accounts,
+    customers,
+    branches,
+    projects,
+
+    isPaymentLoading,
+    isAccountsLoading,
+    isPaymentFetching,
+    isCustomersLoading,
+    isFeatureLoading,
+    isBranchesSuccess,
+    isNewMode,
+
+    submitPayload,
+    setSubmitPayload,
+
+    editPaymentReceiveMutate,
+    createPaymentReceiveMutate,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isPaymentLoading || isAccountsLoading || isCustomersLoading}
+      name={'payment-receive-form'}
+    >
+      <PaymentReceiveFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentReceiveFormContext = () =>
+  useContext(PaymentReceiveFormContext);
+
+export { PaymentReceiveFormProvider, usePaymentReceiveFormContext };

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.tsx

@@ -0,0 +1,69 @@
+// @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 { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+import { Features } from '@/constants';
+
+/**
+ * Payment receive from top bar.
+ * @returns
+ */
+export default function PaymentReceiveFormTopBar() {
+  // 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}>
+          <PaymentReceiveFormSelectBranch />
+        </FeatureCan>
+      </NavbarGroup>
+    </FormTopbar>
+  );
+}
+
+function PaymentReceiveFormSelectBranch() {
+  // payment receive form context.
+  const { branches, isBranchesLoading } = usePaymentReceiveFormContext();
+
+  return isBranchesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <BranchSelect
+      name={'branch_id'}
+      branches={branches}
+      input={PaymentReceiveBranchSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+
+function PaymentReceiveBranchSelectButton({ label }) {
+  return (
+    <Button
+      text={intl.get('payment_receive.branch_button.label', { label })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'branch-16'} iconSize={16} />}
+    />
+  );
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx

@@ -0,0 +1,376 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  Classes,
+  ControlGroup,
+  Button,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { toSafeInteger } from 'lodash';
+import { FeatureCan, FormattedMessage as T } from '@/components';
+import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
+
+import { useAutofocus } from '@/hooks';
+import { CLASSES } from '@/constants/classes';
+import {
+  compose,
+  safeSumBy,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+  inputIntent,
+} from '@/utils';
+import {
+  FFormGroup,
+  AccountsSelectList,
+  CustomerSelectField,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+  MoneyInputGroup,
+  InputPrependText,
+  CustomerDrawerLink,
+  Hint,
+  Money,
+} from '@/components';
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+import { ACCOUNT_TYPE } from '@/constants/accountTypes';
+import { ProjectsSelect } from '@/containers/Projects/components';
+import {
+  PaymentReceiveExchangeRateInputField,
+  PaymentReceiveProjectSelectButton,
+} from './components';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+import {
+  useObservePaymentNoSettings,
+  amountPaymentEntries,
+  fullAmountPaymentEntries,
+  customersFieldShouldUpdate,
+  accountsFieldShouldUpdate,
+} from './utils';
+import { Features } from '@/constants';
+
+/**
+ * Payment receive header fields.
+ */
+function PaymentReceiveHeaderFields({
+  // #withCurrentOrganization
+  organization: { base_currency },
+
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  paymentReceiveAutoIncrement,
+  paymentReceiveNumberPrefix,
+  paymentReceiveNextNumber,
+}) {
+  // Payment receive form context.
+  const { customers, accounts, projects, isNewMode } =
+    usePaymentReceiveFormContext();
+
+  // Formik form context.
+  const {
+    values: { entries },
+    setFieldValue,
+  } = useFormikContext();
+
+  const customerFieldRef = useAutofocus();
+
+  // Calculates the full-amount received.
+  const totalDueAmount = useMemo(
+    () => safeSumBy(entries, 'due_amount'),
+    [entries],
+  );
+  // Handle receive full-amount link 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);
+  };
+  // Handle click open payment receive number dialog.
+  const handleClickOpenDialog = () => {
+    openDialog('payment-receive-number-form');
+  };
+
+  // Handle payment number field blur.
+  const handlePaymentNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && paymentReceiveAutoIncrement) {
+      openDialog('payment-receive-number-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+
+  // Syncs payment receive number from settings to the form.
+  useObservePaymentNoSettings(
+    paymentReceiveNumberPrefix,
+    paymentReceiveNextNumber,
+  );
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ------------- Customer name ------------- */}
+      <FastField
+        name={'customer_id'}
+        customers={customers}
+        shouldUpdate={customersFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'customer_name'} />}
+            inline={true}
+            className={classNames('form-group--select-list', CLASSES.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_id'} />}
+          >
+            <CustomerSelectField
+              contacts={customers}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
+                form.setFieldValue('full_amount', '');
+                form.setFieldValue('currency_code', customer?.currency_code);
+              }}
+              popoverFill={true}
+              disabled={!isNewMode}
+              buttonProps={{
+                elementRef: (ref) => (customerFieldRef.current = ref),
+              }}
+              allowCreate={true}
+            />
+
+            {value && (
+              <CustomerButtonLink customerId={value}>
+                <T id={'view_customer_details'} />
+              </CustomerButtonLink>
+            )}
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Exchange rate ----------- */}
+      <PaymentReceiveExchangeRateInputField
+        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: {
+            setFieldValue,
+            values: { currency_code },
+          },
+          field: { value, onChange },
+          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={totalDueAmount} currency={currency_code} />)
+            </Button>
+          </FormGroup>
+        )}
+      </Field>
+
+      {/* ------------ Payment receive no. ------------ */}
+      <FastField name={'payment_receive_no'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'payment_receive_no'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={('form-group--payment_receive_no', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="payment_receive_no" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                intent={inputIntent({ error, touched })}
+                minimal={true}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handlePaymentNoBlur(form, field)}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleClickOpenDialog,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: (
+                    <T
+                      id={'setting_your_auto_generated_payment_receive_number'}
+                    />
+                  ),
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Deposit account ------------ */}
+      <FastField
+        name={'deposit_account_id'}
+        accounts={accounts}
+        shouldUpdate={accountsFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'deposit_to'} />}
+            className={classNames(
+              'form-group--deposit_account_id',
+              'form-group--select-list',
+              CLASSES.FILL,
+            )}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'deposit_account_id'} />}
+          >
+            <AccountsSelectList
+              accounts={accounts}
+              labelInfo={<FieldRequiredHint />}
+              onAccountSelected={(account) => {
+                form.setFieldValue('deposit_account_id', account.id);
+              }}
+              defaultSelectText={<T id={'select_deposit_account'} />}
+              selectedAccountId={value}
+              filterByTypes={[
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+              ]}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Reference No. ------------ */}
+      <FastField name={'reference_no'}>
+        {({ 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>
+
+      {/*------------ Project name -----------*/}
+      <FeatureCan feature={Features.Projects}>
+        <FFormGroup
+          name={'project_id'}
+          label={<T id={'payment_receive.project_name.label'} />}
+          inline={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
+        >
+          <ProjectsSelect
+            name={'project_id'}
+            projects={projects}
+            input={PaymentReceiveProjectSelectButton}
+            popoverFill={true}
+          />
+        </FFormGroup>
+      </FeatureCan>
+    </div>
+  );
+}
+
+export default compose(
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
+    paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
+    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
+  })),
+  withDialogActions,
+  withCurrentOrganization(),
+)(PaymentReceiveHeaderFields);
+
+const CustomerButtonLink = styled(CustomerDrawerLink)`
+  font-size: 11px;
+  margin-top: 6px;
+`;

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveInnerProvider.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React, { createContext, useContext, useEffect } from 'react';
+import { useFormikContext } from 'formik';
+import { useDueInvoices } from '@/hooks/query';
+import { transformInvoicesNewPageEntries } from './utils';
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+
+const PaymentReceiveInnerContext = createContext();
+
+/**
+ * Payment receive inner form provider.
+ */
+function PaymentReceiveInnerProvider({ ...props }) {
+  const { isNewMode } = usePaymentReceiveFormContext();
+
+  // Formik context.
+  const {
+    values: { customer_id: customerId },
+    setFieldValue,
+  } = useFormikContext();
+
+  // Fetches customer receivable invoices.
+  const {
+    data: dueInvoices,
+    isLoading: isDueInvoicesLoading,
+    isFetching: isDueInvoicesFetching,
+  } = useDueInvoices(customerId, {
+    enabled: !!customerId && isNewMode,
+    keepPreviousData: true,
+  });
+
+  useEffect(() => {
+    if (!isDueInvoicesFetching && dueInvoices && isNewMode) {
+      setFieldValue('entries', transformInvoicesNewPageEntries(dueInvoices));
+    }
+  }, [isDueInvoicesFetching, dueInvoices, isNewMode, setFieldValue]);
+
+  // Provider payload.
+  const provider = {
+    dueInvoices,
+    isDueInvoicesLoading,
+    isDueInvoicesFetching,
+  };
+
+  return <PaymentReceiveInnerContext.Provider value={provider} {...props} />;
+}
+
+const usePaymentReceiveInnerContext = () =>
+  useContext(PaymentReceiveInnerContext);
+
+export { PaymentReceiveInnerProvider, usePaymentReceiveInnerContext };

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import { CloudLoadingIndicator } from '@/components';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from '@/components';
+
+import { CLASSES } from '@/constants/classes';
+import { usePaymentReceiveInnerContext } from './PaymentReceiveInnerProvider';
+import { DataTableEditable } from '@/components';
+import { usePaymentReceiveEntriesColumns } from './components';
+import { compose, updateTableCell } from '@/utils';
+
+/**
+ * Payment receive items table.
+ */
+export default function PaymentReceiveItemsTable({
+  entries,
+  onUpdateData,
+  currencyCode,
+}) {
+  // Payment receive form context.
+  const { isDueInvoicesFetching } = usePaymentReceiveInnerContext();
+
+  // Payment receive entries form context.
+  const columns = usePaymentReceiveEntriesColumns();
+
+  // Formik context.
+  const {
+    values: { customer_id },
+  } = useFormikContext();
+
+  // No results message.
+  const noResultsMessage = customer_id ? (
+    <T id={'there_is_no_receivable_invoices_for_this_customer'} />
+  ) : (
+    <T id={'please_select_a_customer_to_display_all_open_invoices_for_it'} />
+  );
+
+  // Handle update data.
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+
+      onUpdateData(newRows);
+    },
+    [entries, onUpdateData],
+  );
+
+  return (
+    <CloudLoadingIndicator isLoading={isDueInvoicesFetching}>
+      <DataTableEditable
+        progressBarLoading={isDueInvoicesFetching}
+        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/Sales/PaymentReceives/PaymentReceiveForm/components.tsx

@@ -0,0 +1,114 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { Button } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+
+import { Money, ExchangeRateInputGroup, MoneyFieldCell } from '@/components';
+
+import { useCurrentOrganization } from '@/hooks/state';
+import { useEstimateIsForeignCustomer } from './utils';
+
+/**
+ * Invoice date cell.
+ */
+function InvoiceDateCell({ value }) {
+  return <span>{moment(value).format('YYYY MMM DD')}</span>;
+}
+
+/**
+ * Invoice number table cell accessor.
+ */
+function InvNumberCellAccessor(row) {
+  return row?.invoice_no ? `#${row?.invoice_no || ''}` : '-';
+}
+
+/**
+ * Mobey table cell.
+ */
+function MoneyTableCell({ row: { original }, value }) {
+  return <Money amount={value} currency={original.currency_code} />;
+}
+
+/**
+ * Retrieve payment receive form entries columns.
+ */
+export const usePaymentReceiveEntriesColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: 'Invoice date',
+        id: 'invoice_date',
+        accessor: 'invoice_date',
+        Cell: InvoiceDateCell,
+        disableSortBy: true,
+        disableResizing: true,
+        width: 250,
+        className: 'date',
+      },
+      {
+        Header: intl.get('invocie_number'),
+        accessor: InvNumberCellAccessor,
+        disableSortBy: true,
+        className: 'invoice_number',
+      },
+      {
+        Header: intl.get('invoice_amount'),
+        accessor: 'amount',
+        Cell: MoneyTableCell,
+        disableSortBy: true,
+        width: 100,
+        className: 'invoice_amount',
+      },
+      {
+        Header: intl.get('amount_due'),
+        accessor: 'due_amount',
+        Cell: MoneyTableCell,
+        disableSortBy: true,
+        width: 150,
+        className: 'amount_due',
+      },
+      {
+        Header: intl.get('payment_amount'),
+        accessor: 'payment_amount',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+        width: 150,
+        className: 'payment_amount',
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * payment receive exchange rate input field.
+ * @returns {JSX.Element}
+ */
+export function PaymentReceiveExchangeRateInputField({ ...props }) {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  const isForeignCustomer = useEstimateIsForeignCustomer();
+
+  // Can't continue if the customer is not foreign.
+  if (!isForeignCustomer) {
+    return null;
+  }
+  return (
+    <ExchangeRateInputGroup
+      fromCurrency={values.currency_code}
+      toCurrency={currentOrganization.base_currency}
+      {...props}
+    />
+  );
+}
+
+/**
+ * payment receive project select.
+ * @returns {JSX.Element}
+ */
+ export function PaymentReceiveProjectSelectButton({ label }) {
+  return <Button text={label ?? intl.get('select_project')} />;
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx

@@ -0,0 +1,266 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { omit, pick, first, sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from '@/components';
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+import {
+  defaultFastFieldShouldUpdate,
+  transactionNumber,
+  transformToForm,
+  safeSumBy,
+  orderingLinesIndexes,
+  formattedAmount,
+} from '@/utils';
+import { useCurrentOrganization } from '@/hooks/state';
+
+
+// Default payment receive entry.
+export const defaultPaymentReceiveEntry = {
+  index: '',
+  payment_amount: '',
+  invoice_id: '',
+  invoice_no: '',
+  due_amount: '',
+  date: '',
+  amount: '',
+  currency_code: '',
+};
+
+// Form initial values.
+export const defaultPaymentReceive = {
+  customer_id: '',
+  deposit_account_id: '',
+  payment_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference_no: '',
+  payment_receive_no: '',
+  statement: '',
+  full_amount: '',
+  currency_code: '',
+  branch_id: '',
+  exchange_rate: 1,
+  entries: [],
+};
+
+export const defaultRequestPaymentEntry = {
+  index: '',
+  payment_amount: '',
+  invoice_id: '',
+};
+
+export const defaultRequestPayment = {
+  customer_id: '',
+  deposit_account_id: '',
+  payment_date: '',
+  payment_receive_no: '',
+  branch_id: '',
+  statement: '',
+  entries: [],
+};
+
+/**
+ * Transformes the edit payment receive to initial values of the form.
+ */
+export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => ({
+  ...transformToForm(paymentReceive, defaultPaymentReceive),
+  full_amount: safeSumBy(paymentReceiveEntries, 'payment_amount'),
+  entries: [
+    ...paymentReceiveEntries.map((paymentReceiveEntry) => ({
+      ...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry),
+      payment_amount: paymentReceiveEntry.payment_amount || '',
+    })),
+  ],
+});
+
+/**
+ * Transformes the given invoices to the new page receivable entries.
+ */
+export const transformInvoicesNewPageEntries = (invoices) => [
+  ...invoices.map((invoice, index) => ({
+    index: index + 1,
+    invoice_id: invoice.id,
+    entry_type: 'invoice',
+    due_amount: invoice.due_amount,
+    date: invoice.invoice_date,
+    amount: invoice.balance,
+    currency_code: invoice.currency_code,
+    payment_amount: '',
+    invoice_no: invoice.invoice_no,
+    branch_id: invoice.branch_id,
+    total_payment_amount: invoice.payment_amount,
+  })),
+];
+
+export const transformEntriesToEditForm = (receivableEntries) => [
+  ...transformInvoicesNewPageEntries([...(receivableEntries || [])]),
+];
+
+export const clearAllPaymentEntries = (entries) => [
+  ...entries.map((entry) => ({ ...entry, payment_amount: 0 })),
+];
+
+export const amountPaymentEntries = (amount, entries) => {
+  let total = amount;
+
+  return entries.map((item) => {
+    const diff = Math.min(item.due_amount, total);
+    total -= Math.max(diff, 0);
+
+    return {
+      ...item,
+      payment_amount: diff,
+    };
+  });
+};
+
+export const fullAmountPaymentEntries = (entries) => {
+  return entries.map((item) => ({
+    ...item,
+    payment_amount: item.due_amount,
+  }));
+};
+
+/**
+ * Syncs payment receive number settings with form.
+ */
+export const useObservePaymentNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const invoiceNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('payment_receive_no', invoiceNo);
+  }, [setFieldValue, prefix, nextNumber]);
+};
+
+/**
+ * Detarmines the customers fast-field should update.
+ */
+export const customersFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.customers !== oldProps.customers ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Detarmines the accounts fast-field should update.
+ */
+export const accountsFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.accounts !== oldProps.accounts ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Tranformes form values to request.
+ */
+export const transformFormToRequest = (form) => {
+  // Filters entries that have no `invoice_id` and `payment_amount`.
+  const entries = form.entries
+    .filter((entry) => entry.invoice_id && entry.payment_amount)
+    .map((entry) => ({
+      ...pick(entry, Object.keys(defaultRequestPaymentEntry)),
+    }));
+
+  return {
+    ...omit(form, ['payment_receive_no_manually', 'payment_receive_no']),
+    ...(form.payment_receive_no_manually && {
+      payment_receive_no: form.payment_receive_no,
+    }),
+    entries: orderingLinesIndexes(entries),
+  };
+};
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = usePaymentReceiveFormContext();
+
+  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_RECEIVE_NO_EXISTS')) {
+    setFieldError(
+      'payment_receive_no',
+      intl.get('payment_number_is_not_unique'),
+    );
+  }
+  if (getError('PAYMENT_RECEIVE_NO_REQUIRED')) {
+    setFieldError(
+      'payment_receive_no',
+      intl.get('payment_receive.field.error.payment_receive_no_required'),
+    );
+  }
+  if (getError('PAYMENT_ACCOUNT_CURRENCY_INVALID')) {
+    AppToaster.show({
+      message: intl.get(
+        'payment_Receive.error.payment_account_currency_invalid',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+/**
+ * Retreives the payment receive totals.
+ */
+export const usePaymentReceiveTotals = () => {
+  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 payment has foreign customer.
+ * @returns {boolean}
+ */
+export const useEstimateIsForeignCustomer = () => {
+  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/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx

@@ -0,0 +1,87 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+
+import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import { AbilitySubject, PaymentReceiveAction } from '@/constants/abilityOption';
+import { highlightText } from '@/utils';
+import { Icon } from '@/components';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+/**
+ * Payment receive universal search item select action.
+ */
+function PaymentReceiveUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.PAYMENT_RECEIVE) {
+    openDrawer('payment-receive-detail-drawer', {
+      paymentReceiveId: resourceId,
+    });
+  }
+  return null;
+}
+
+export const PaymentReceiveUniversalSearchSelect = withDrawerActions(
+  PaymentReceiveUniversalSearchSelectComponent,
+);
+
+/**
+ * Payment receive universal search item.
+ */
+export function PaymentReceiveUniversalSearchItem(
+  item,
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{highlightText(item.text, query)}</div>
+
+          <span class="bp3-text-muted">
+            {highlightText(item.reference.payment_receive_no, query)}{' '}
+            <Icon icon={'caret-right-16'} iconSize={16} />
+            {highlightText(item.reference.formatted_payment_date, query)}
+          </span>
+        </div>
+      }
+      label={<div class="amount">{item.reference.formatted_amount}</div>}
+      onClick={handleClick}
+      className={'universal-search__item--invoice'}
+    />
+  );
+}
+
+/**
+ * Transformes payment receives to search.
+ */
+const paymentReceivesToSearch = (payment) => ({
+  id: payment.id,
+  text: payment.customer.display_name,
+  subText: payment.formatted_payment_date,
+  label: payment.formatted_amount,
+  reference: payment,
+});
+
+/**
+ * Binds universal search payment receive configure.
+ */
+export const universalSearchPaymentReceiveBind = () => ({
+  resourceType: RESOURCES_TYPES.PAYMENT_RECEIVE,
+  optionItemLabel: intl.get('payment_receives'),
+  selectItemAction: PaymentReceiveUniversalSearchSelect,
+  itemRenderer: PaymentReceiveUniversalSearchItem,
+  itemSelect: paymentReceivesToSearch,
+  permission: {
+    ability: PaymentReceiveAction.View,
+    subject: AbilitySubject.PaymentReceive,
+  },
+});

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import { DashboardInsider } from '@/components/Dashboard';
+import {
+  useResourceViews,
+  useResourceMeta,
+  usePaymentReceives,
+} from '@/hooks/query';
+import { getFieldsFromResourceMeta } from '@/utils';
+
+const PaymentReceivesListContext = createContext();
+
+/**
+ * Payment receives list data provider.
+ */
+function PaymentReceivesListProvider({ query, tableStateChanged, ...props }) {
+  // Fetch payment receives resource views and fields.
+  const { data: paymentReceivesViews, isLoading: isViewsLoading } =
+    useResourceViews('payment_receives');
+
+  // Fetch the payment receives resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('payment_receives');
+
+  // Fetch payment receives list according to the given custom view id.
+  const {
+    data: { paymentReceives, pagination, filterMeta },
+    isLoading: isPaymentReceivesLoading,
+    isFetching: isPaymentReceivesFetching,
+  } = usePaymentReceives(query);
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(paymentReceives) && !isPaymentReceivesLoading && !tableStateChanged;
+
+  // Provider payload.
+  const state = {
+    paymentReceives,
+    pagination,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+
+    paymentReceivesViews,
+
+    isPaymentReceivesLoading,
+    isPaymentReceivesFetching,
+    isResourceFetching,
+    isResourceLoading,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'payment-receives-list'}
+    >
+      <PaymentReceivesListContext.Provider value={state} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentReceivesListContext = () =>
+  useContext(PaymentReceivesListContext);
+
+export { PaymentReceivesListProvider, usePaymentReceivesListContext };

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.tsx

@@ -0,0 +1,164 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+
+import { useHistory } from 'react-router-dom';
+import {
+  Icon,
+  Can,
+  If,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+  FormattedMessage as T,
+  DashboardRowsHeightButton,
+  DashboardActionViewsList,
+  DashboardActionsBar,
+} from '@/components';
+
+import withPaymentReceives from './withPaymentReceives';
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import { PaymentReceiveAction, AbilitySubject } from '@/constants/abilityOption';
+import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
+import { useRefreshPaymentReceive } from '@/hooks/query/paymentReceives';
+import { compose } from '@/utils';
+
+/**
+ * Payment receives actions bar.
+ */
+function PaymentReceiveActionsBar({
+  // #withPaymentReceivesActions
+  setPaymentReceivesTableState,
+
+  // #withPaymentReceives
+  paymentFilterConditions,
+
+  // #withSettings
+  paymentReceivesTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  // History context.
+  const history = useHistory();
+
+  // Payment receives list context.
+  const { paymentReceivesViews, fields } = usePaymentReceivesListContext();
+
+  // Handle new payment button click.
+  const handleClickNewPaymentReceive = () => {
+    history.push('/payment-receives/new');
+  };
+
+  // Payment receive refresh action.
+  const { refresh } = useRefreshPaymentReceive();
+
+  // Handle tab changing.
+  const handleTabChange = (viewId) => {
+    setPaymentReceivesTableState({ customViewId: viewId.id || null });
+  };
+
+  // Handle click a refresh payment receives
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('paymentReceives', 'tableSize', size);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'payment_receives'}
+          views={paymentReceivesViews}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Can I={PaymentReceiveAction.Create} a={AbilitySubject.PaymentReceive}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_payment_receive'} />}
+            onClick={handleClickNewPaymentReceive}
+          />
+        </Can>
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: paymentFilterConditions,
+            defaultFieldKey: 'payment_receive_no',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setPaymentReceivesTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={paymentFilterConditions.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={paymentReceivesTableSize}
+          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(
+  withPaymentReceivesActions,
+  withSettingsActions,
+  withPaymentReceives(({ paymentReceivesTableState }) => ({
+    paymentReceivesTableState,
+    paymentFilterConditions: paymentReceivesTableState.filterRoles,
+  })),
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceivesTableSize: paymentReceiveSettings?.tableSize,
+  })),
+)(PaymentReceiveActionsBar);

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveViewTabs.tsx

@@ -0,0 +1,63 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+import { FormattedMessage as T, DashboardViewsTabs } from '@/components';
+import { pick } from 'lodash';
+
+import withPaymentReceives from './withPaymentReceives';
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
+
+import { compose } from '@/utils';
+
+/**
+ * Payment receive view tabs.
+ */
+function PaymentReceiveViewTabs({
+  // #withPaymentReceivesActions
+  addPaymentReceivesTableQueries,
+
+  // #withPaymentReceives
+  paymentReceivesTableState,
+}) {
+  const history = useHistory();
+  const { paymentReceivesViews, ...res } = usePaymentReceivesListContext();
+
+  const tabs = paymentReceivesViews.map((view) => ({
+    ...pick(view, ['name', 'id']),
+  }));
+
+  // Handles click a new view tab.
+  const handleClickNewView = () => {
+    history.push('/custom_views/payment-receives/new');
+  };
+
+  // Handles the active tab chaing.
+  const handleTabsChange = (customView) => {
+    addPaymentReceivesTableQueries({
+      customViewId: customView || null,
+    });
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          customViewId={paymentReceivesTableState.customViewId}
+          tabs={tabs}
+          defaultTabText={<T id={'all_payments'} />}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withPaymentReceivesActions,
+  withPaymentReceives(({ paymentReceivesTableState }) => ({
+    paymentReceivesTableState,
+  })),
+)(PaymentReceiveViewTabs);

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesEmptyStatus.tsx

@@ -0,0 +1,46 @@
+// @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 { PaymentReceiveAction, AbilitySubject } from '@/constants/abilityOption';
+
+export default function PaymentReceivesEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
+      description={
+        <p>
+          <T
+            id={'receiving_customer_payments_is_one_pleasant_accounting_tasks'}
+          />
+        </p>
+      }
+      action={
+        <>
+          <Can
+            I={PaymentReceiveAction.Create}
+            a={AbilitySubject.PaymentReceive}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/payment-receives/new');
+              }}
+            >
+              <T id={'new_payment_receive'} />
+            </Button>
+
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
+        </>
+      }
+    />
+  );
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/pages/PaymentReceive/List.scss';
+
+import { DashboardPageContent } from '@/components';
+import { PaymentReceivesListProvider } from './PaymentReceiptsListProvider';
+import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
+import PaymentReceivesTable from './PaymentReceivesTable';
+import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
+
+import withPaymentReceives from './withPaymentReceives';
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+
+import { compose, transformTableStateToQuery } from '@/utils';
+
+/**
+ * Payment receives list.
+ */
+function PaymentReceiveList({
+  // #withPaymentReceives
+  paymentReceivesTableState,
+  paymentsTableStateChanged,
+
+  // #withPaymentReceivesActions
+  resetPaymentReceivesTableState,
+}) {
+  // Resets the payment receives table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetPaymentReceivesTableState();
+    },
+    [resetPaymentReceivesTableState],
+  );
+
+  return (
+    <PaymentReceivesListProvider
+      query={transformTableStateToQuery(paymentReceivesTableState)}
+      tableStateChanged={paymentsTableStateChanged}
+    >
+      <PaymentReceiveActionsBar />
+
+      <DashboardPageContent>
+        <PaymentReceiveViewTabs />
+        <PaymentReceivesTable />
+      </DashboardPageContent>
+    </PaymentReceivesListProvider>
+  );
+}
+
+export default compose(
+  withPaymentReceives(
+    ({ paymentReceivesTableState, paymentsTableStateChanged }) => ({
+      paymentReceivesTableState,
+      paymentsTableStateChanged,
+    }),
+  ),
+  withPaymentReceivesActions,
+)(PaymentReceiveList);

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.tsx

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import { DashboardInsider } from '@/components/Dashboard';
+import {
+  useResourceViews,
+  useResourceMeta,
+  usePaymentReceives,
+} from '@/hooks/query';
+import { getFieldsFromResourceMeta } from '@/utils';
+
+const PaymentReceivesListContext = createContext();
+
+/**
+ * Payment receives data provider.
+ */
+function PaymentReceivesListProvider({ query, tableStateChanged, ...props }) {
+  // Fetch accounts resource views and fields.
+  const { data: paymentReceivesViews, isFetching: isViewsLoading } =
+    useResourceViews('payment_receives');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isFetching: isResourceFetching,
+    isLoading: isResourceLoading,
+  } = useResourceMeta('payment_receives');
+
+  // Fetch accounts list according to the given custom view id.
+  const {
+    data: { paymentReceives, pagination, filterMeta },
+    isLoading: isPaymentReceivesLoading,
+    isFetching: isPaymentReceivesFetching,
+  } = usePaymentReceives(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    !isPaymentReceivesLoading && !tableStateChanged && isEmpty(paymentReceives);
+
+  // Provider payload.
+  const provider = {
+    paymentReceives,
+    paymentReceivesViews,
+    pagination,
+    resourceMeta,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+
+    isEmptyStatus,
+    isViewsLoading,
+    isResourceFetching,
+    isResourceLoading,
+    isPaymentReceivesLoading,
+    isPaymentReceivesFetching,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'payment_receives'}
+    >
+      <PaymentReceivesListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentReceivesListContext = () =>
+  React.useContext(PaymentReceivesListContext);
+
+export { PaymentReceivesListProvider, usePaymentReceivesListContext };

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.tsx

@@ -0,0 +1,147 @@
+// @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 PaymentReceivesEmptyStatus from './PaymentReceivesEmptyStatus';
+
+import withPaymentReceives from './withPaymentReceives';
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+import { usePaymentReceivesColumns, ActionsMenu } from './components';
+import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
+import { useMemorizedColumnsWidths } from '@/hooks';
+
+/**
+ * Payment receives datatable.
+ */
+function PaymentReceivesDataTable({
+  // #withPaymentReceivesActions
+  setPaymentReceivesTableState,
+
+  // #withPaymentReceives
+  paymentReceivesTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withSettings
+  paymentReceivesTableSize,
+}) {
+  const history = useHistory();
+
+  // Payment receives list context.
+  const {
+    paymentReceives,
+    pagination,
+
+    isPaymentReceivesLoading,
+    isPaymentReceivesFetching,
+    isEmptyStatus,
+  } = usePaymentReceivesListContext();
+
+  // Payment receives columns.
+  const columns = usePaymentReceivesColumns();
+
+  // Handles edit payment receive.
+  const handleEditPaymentReceive = ({ id }) => {
+    history.push(`/payment-receives/${id}/edit`);
+  };
+
+  // Handles delete payment receive.
+  const handleDeletePaymentReceive = ({ id }) => {
+    openAlert('payment-receive-delete', { paymentReceiveId: id });
+  };
+
+  // Handle view detail  payment receive..
+  const handleViewDetailPaymentReceive = ({ id }) => {
+    openDrawer('payment-receive-detail-drawer', { paymentReceiveId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('payment-receive-detail-drawer', {
+      paymentReceiveId: cell.row.original.id,
+    });
+  };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.PAYMENT_RECEIVES);
+
+  // Handle datatable fetch once the table's state changing.
+  const handleDataTableFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      setPaymentReceivesTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setPaymentReceivesTableState],
+  );
+
+  // Display empty status instead of the table.
+  if (isEmptyStatus) {
+    return <PaymentReceivesEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={paymentReceives}
+        loading={isPaymentReceivesLoading}
+        headerLoading={isPaymentReceivesLoading}
+        progressBarLoading={isPaymentReceivesFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        size={paymentReceivesTableSize}
+        payload={{
+          onDelete: handleDeletePaymentReceive,
+          onEdit: handleEditPaymentReceive,
+          onViewDetails: handleViewDetailPaymentReceive,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withPaymentReceivesActions,
+  withAlertsActions,
+  withDrawerActions,
+  withPaymentReceives(({ paymentReceivesTableState }) => ({
+    paymentReceivesTableState,
+  })),
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceivesTableSize: paymentReceiveSettings?.tableSize,
+  })),
+)(PaymentReceivesDataTable);

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/components.tsx

@@ -0,0 +1,142 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+
+import { FormatDateCell, Money, Icon, Can } from '@/components';
+import { safeCallback } from '@/utils';
+import { CLASSES } from '@/constants/classes';
+import { PaymentReceiveAction, AbilitySubject } from '@/constants/abilityOption';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original: paymentReceive },
+  payload: { onEdit, onDelete, onViewDetails },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, paymentReceive)}
+      />
+      <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_payment_receive')}
+          onClick={safeCallback(onEdit, paymentReceive)}
+        />
+      </Can>
+      <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('delete_payment_receive')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, paymentReceive)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Amount accessor.
+ */
+export function AmountAccessor(row) {
+  return <Money amount={row.amount} currency={row.currency_code} />;
+}
+
+/**
+ * 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 receives columns.
+ */
+export function usePaymentReceivesColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'payment_date',
+        Header: intl.get('payment_date'),
+        accessor: 'payment_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'payment_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer_name'),
+        accessor: 'customer.display_name',
+        width: 160,
+        className: 'customer_id',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: AmountAccessor,
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'payment_receive_no',
+        Header: intl.get('payment_receive_no'),
+        accessor: (row) =>
+          row.payment_receive_no ? `${row.payment_receive_no}` : null,
+        width: 140,
+        className: 'payment_receive_no',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'deposit_account',
+        Header: intl.get('deposit_account'),
+        accessor: 'deposit_account.name',
+        width: 140,
+        className: 'deposit_account_id',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceiveDetail.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getPaymentReceiveByIdFactory,
+  getPaymentReceiveEntriesFactory,
+} from '@/store/PaymentReceives/paymentReceives.selector';
+
+export default () => {
+  const getPaymentReceiveById = getPaymentReceiveByIdFactory();
+  const getPaymentReceiveEntries = getPaymentReceiveEntriesFactory();
+
+  const mapStateToProps = (state, props) => ({
+    paymentReceive: getPaymentReceiveById(state, props),
+    paymentReceiveEntries: getPaymentReceiveEntries(state, props),
+  });
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceives.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getPaymentReceiveTableStateFactory,
+  paymentsTableStateChangedFactory
+} from '@/store/PaymentReceives/paymentReceives.selector';
+
+export default (mapState) => {
+  const getPaymentReceiveTableState = getPaymentReceiveTableStateFactory();
+  const paymentsTableStateChanged = paymentsTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      paymentReceivesTableState: getPaymentReceiveTableState(state, props),
+      paymentsTableStateChanged: paymentsTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceivesActions.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  setPaymentReceivesTableState,
+  resetPaymentReceivesTableState,
+} from '@/store/PaymentReceives/paymentReceives.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setPaymentReceivesTableState: (state) =>
+    dispatch(setPaymentReceivesTableState(state)),
+
+  resetPaymentReceivesTableState: () =>
+    dispatch(resetPaymentReceivesTableState()),
+});
+
+export default connect(null, mapDispatchToProps);