re-structure to monorepo.

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntries.schema.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+
+const Schema = Yup.object().shape({
+  journal_number: Yup.string()
+    .required()
+    .min(1)
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('journal_number_')),
+  journal_type: Yup.string()
+    .required()
+    .min(1)
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('journal_type')),
+  date: Yup.date().required().label(intl.get('date')),
+  currency_code: Yup.string().max(3),
+  publish: Yup.boolean(),
+  branch_id: Yup.string(),
+  reference: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),
+  description: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
+  exchange_rate: Yup.number(),
+  entries: Yup.array().of(
+    Yup.object().shape({
+      credit: Yup.number().nullable(),
+      debit: Yup.number().nullable(),
+      account_id: Yup.number()
+        .nullable()
+        .when(['credit', 'debit'], {
+          is: (credit, debit) => credit || debit,
+          then: Yup.number().required(),
+        }),
+      contact_id: Yup.number().nullable(),
+      contact_type: Yup.string().nullable(),
+      project_id: Yup.number().nullable(),
+      note: Yup.string().max(DATATYPES_LENGTH.TEXT).nullable(),
+    }),
+  ),
+});
+
+export const CreateJournalSchema = Schema;
+export const EditJournalSchema = Schema;

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesField.tsx

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+import {
+  entriesFieldShouldUpdate,
+  defaultEntry,
+  MIN_LINES_NUMBER,
+} from './utils';
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+import MakeJournalEntriesTable from './MakeJournalEntriesTable';
+
+/**
+ * Make journal entries field.
+ */
+export default function MakeJournalEntriesField() {
+  const { accounts, contacts, branches, projects } =
+    useMakeJournalFormContext();
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField
+        name={'entries'}
+        contacts={contacts}
+        accounts={accounts}
+        branches={branches}
+        projects={projects}
+        shouldUpdate={entriesFieldShouldUpdate}
+      >
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <MakeJournalEntriesTable
+            onChange={(entries) => {
+              setFieldValue('entries', entries);
+            }}
+            entries={value}
+            defaultEntry={defaultEntry}
+            initialLinesNumber={MIN_LINES_NUMBER}
+            error={error}
+            currencyCode={values.currency_code}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesFooter.tsx

@@ -0,0 +1,193 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T, If, Icon } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+import { useHistory } from 'react-router-dom';
+
+/**
+ * Make Journal floating actions bar.
+ */
+export default function MakeJournalEntriesFooter() {
+  const history = useHistory();
+
+  // Formik context.
+  const { isSubmitting, submitForm } = useFormikContext();
+
+  // Make journal form context.
+  const {
+    manualJournalId,
+    setSubmitPayload,
+    manualJournalPublished = false,
+  } = useMakeJournalFormContext();
+
+  // Handle `submit & publish` button click.
+  const handleSubmitPublishBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, publish: true });
+    submitForm();
+  };
+
+  // Handle `submit, publish & new` button click.
+  const handleSubmitPublishAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, publish: true, resetForm: true });
+    submitForm();
+  };
+
+  // Handle `submit, publish & continue editing` button click.
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, publish: true });
+    submitForm();
+  };
+
+  // Handle `submit as draft` button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, publish: false });
+  };
+
+  // Handle `submit as draft & new` button click.
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, publish: false, resetForm: true });
+    submitForm();
+  };
+
+  // Handles submit as draft & continue editing button click.
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, publish: false });
+    submitForm();
+  };
+
+  // Handle cancel button action click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  const handleClearBtnClick = (event) => {};
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Publish ----------- */}
+      <If condition={!manualJournalId || !manualJournalPublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save_publish'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'publish_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'publish_continue_editing'} />}
+                  onClick={handleSubmitPublishContinueEditingBtnClick}
+                />
+              </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'}
+            type="submit"
+            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={manualJournalId && manualJournalPublished}>
+        <ButtonGroup>
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            type="submit"
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+              </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={manualJournalId ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx

@@ -0,0 +1,195 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+import { defaultTo, isEmpty, omit } from 'lodash';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import { CLASSES } from '@/constants/classes';
+import {
+  CreateJournalSchema,
+  EditJournalSchema,
+} from './MakeJournalEntries.schema';
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
+import MakeJournalFormFloatingActions from './MakeJournalFormFloatingActions';
+import MakeJournalEntriesField from './MakeJournalEntriesField';
+import MakeJournalFormFooter from './MakeJournalFormFooter';
+import MakeJournalFormDialogs from './MakeJournalFormDialogs';
+import MakeJournalFormTopBar from './MakeJournalFormTopBar';
+
+import withSettings from '@/containers/Settings/withSettings';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+import { AppToaster } from '@/components';
+import { compose, orderingLinesIndexes, transactionNumber } from '@/utils';
+import {
+  transformErrors,
+  transformToEditForm,
+  defaultManualJournal,
+} from './utils';
+
+/**
+ * Journal entries form.
+ */
+function MakeJournalEntriesForm({
+  // #withSettings
+  journalNextNumber,
+  journalNumberPrefix,
+  journalAutoIncrement,
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  // Journal form context.
+  const {
+    createJournalMutate,
+    editJournalMutate,
+    isNewMode,
+    manualJournal,
+    submitPayload,
+  } = useMakeJournalFormContext();
+
+  const history = useHistory();
+
+  // New journal number.
+  const journalNumber = transactionNumber(
+    journalNumberPrefix,
+    journalNextNumber,
+  );
+
+  // Form initial values.
+  const initialValues = useMemo(
+    () => ({
+      ...(!isEmpty(manualJournal)
+        ? {
+            ...transformToEditForm(manualJournal),
+          }
+        : {
+            ...defaultManualJournal,
+            ...(journalAutoIncrement && {
+              journal_number: journalNumber,
+            }),
+            currency_code: base_currency,
+          }),
+    }),
+    [manualJournal, base_currency, journalNumber, journalAutoIncrement],
+  );
+
+  // Handle the form submiting.
+  const handleSubmit = (values, { setErrors, setSubmitting, resetForm }) => {
+    setSubmitting(true);
+    const entries = values.entries.filter(
+      (entry) => entry.debit || entry.credit,
+    );
+    const getTotal = (type = 'credit') => {
+      return entries.reduce((total, item) => {
+        return item[type] ? item[type] + total : total;
+      }, 0);
+    };
+    const totalCredit = getTotal('credit');
+    const totalDebit = getTotal('debit');
+
+    // Validate the total credit should be eqials total debit.
+    if (totalCredit !== totalDebit) {
+      AppToaster.show({
+        message: intl.get('should_total_of_credit_and_debit_be_equal'),
+        intent: Intent.DANGER,
+      });
+      setSubmitting(false);
+      return;
+    } else if (totalCredit === 0 || totalDebit === 0) {
+      AppToaster.show({
+        message: intl.get('amount_cannot_be_zero_or_empty'),
+        intent: Intent.DANGER,
+      });
+      setSubmitting(false);
+      return;
+    }
+    const form = {
+      ...omit(values, ['journal_number_manually']),
+      ...(values.journal_number_manually && {
+        journal_number: values.journal_number,
+      }),
+      entries: R.compose(orderingLinesIndexes)(entries),
+      publish: submitPayload.publish,
+    };
+
+    // Handle the request error.
+    const handleError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      transformErrors(errors, { setErrors });
+      setSubmitting(false);
+    };
+
+    // Handle the request success.
+    const handleSuccess = (errors) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'the_journal_has_been_created_successfully'
+            : 'the_journal_has_been_edited_successfully',
+          { number: values.journal_number },
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      if (submitPayload.redirect) {
+        history.push('/manual-journals');
+      }
+      if (submitPayload.resetForm) {
+        resetForm();
+      }
+    };
+
+    if (isNewMode) {
+      createJournalMutate(form).then(handleSuccess).catch(handleError);
+    } else {
+      editJournalMutate([manualJournal.id, form])
+        .then(handleSuccess)
+        .catch(handleError);
+    }
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_MAKE_JOURNAL,
+      )}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={isNewMode ? CreateJournalSchema : EditJournalSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <MakeJournalFormTopBar />
+          <MakeJournalEntriesHeader />
+          <MakeJournalEntriesField />
+          <MakeJournalFormFooter />
+          <MakeJournalFormFloatingActions />
+
+          {/* --------- Dialogs --------- */}
+          <MakeJournalFormDialogs />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(
+  withSettings(({ manualJournalsSettings }) => ({
+    journalNextNumber: manualJournalsSettings?.nextNumber,
+    journalNumberPrefix: manualJournalsSettings?.numberPrefix,
+    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
+  })),
+  withCurrentOrganization(),
+)(MakeJournalEntriesForm);

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
+import { CLASSES } from '@/constants/classes';
+import { safeSumBy } from '@/utils';
+import { PageFormBigNumber, FormattedMessage as T } from '@/components';
+import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields';
+
+export default function MakeJournalEntriesHeader() {
+  const {
+    values: { entries, currency_code },
+  } = useFormikContext();
+  const totalCredit = safeSumBy(entries, 'credit');
+  const totalDebit = safeSumBy(entries, 'debit');
+
+  const total = Math.max(totalCredit, totalDebit);
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <MakeJournalEntriesHeaderFields />
+
+      <PageFormBigNumber
+        label={<T id={'amount'} />}
+        amount={total}
+        currencyCode={currency_code}
+      />
+    </div>
+  );
+}

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx

@@ -0,0 +1,230 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  InputGroup,
+  FormGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import classNames from 'classnames';
+
+import { CLASSES } from '@/constants/classes';
+import {
+  momentFormatter,
+  compose,
+  inputIntent,
+  handleDateChange,
+  tansformDateValue,
+} from '@/utils';
+import {
+  Hint,
+  FieldHint,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+  CurrencySelectList,
+  FormattedMessage as T
+} from '@/components';
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+import { JournalExchangeRateInputField } from './components';
+import withSettings from '@/containers/Settings/withSettings';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import {
+  currenciesFieldShouldUpdate,
+  useObserveJournalNoSettings,
+} from './utils';
+/**
+ * Make journal entries header.
+ */
+function MakeJournalEntriesHeader({
+  // #ownProps
+  onJournalNumberChanged,
+
+  // #withDialog
+  openDialog,
+
+  // #withSettings
+  journalAutoIncrement,
+  journalNextNumber,
+  journalNumberPrefix,
+}) {
+  const { currencies } = useMakeJournalFormContext();
+
+  // Handle journal number change.
+  const handleJournalNumberChange = () => {
+    openDialog('journal-number-form');
+  };
+
+  // Handle journal number blur.
+  const handleJournalNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && journalAutoIncrement) {
+      openDialog('journal-number-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+
+  useObserveJournalNoSettings(journalNumberPrefix, journalNextNumber);
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/*------------ Posting date -----------*/}
+      <FastField name={'date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'posting_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="date" />}
+            minimal={true}
+            inline={true}
+            className={classNames(CLASSES.FILL)}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('date', formattedDate);
+              })}
+              value={tansformDateValue(value)}
+              popoverProps={{
+                position: Position.BOTTOM,
+                minimal: true,
+              }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Journal number -----------*/}
+      <FastField name={'journal_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'journal_no'} />}
+            labelInfo={
+              <>
+                <FieldRequiredHint />
+                <FieldHint />
+              </>
+            }
+            className={'form-group--journal-number'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="journal_number" />}
+            fill={true}
+            inline={true}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                fill={true}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handleJournalNoBlur(form, field)}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleJournalNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: (
+                    <T id={'setting_your_auto_generated_journal_number'} />
+                  ),
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Reference -----------*/}
+      <FastField name={'reference'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            labelInfo={
+              <Hint
+                content={<T id={'journal_reference_hint'} />}
+                position={Position.RIGHT}
+              />
+            }
+            className={'form-group--reference'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+            fill={true}
+            inline={true}
+          >
+            <InputGroup fill={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Journal type  -----------*/}
+      <FastField name={'journal_type'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'journal_type'} />}
+            className={classNames('form-group--account-type', CLASSES.FILL)}
+            inline={true}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              fill={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Currency  -----------*/}
+      <FastField
+        name={'currency_code'}
+        currencies={currencies}
+        shouldUpdate={currenciesFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'currency'} />}
+            className={classNames('form-group--currency', CLASSES.FILL)}
+            inline={true}
+          >
+            <CurrencySelectList
+              currenciesList={currencies}
+              selectedCurrencyCode={value}
+              onCurrencySelected={(currencyItem) => {
+                form.setFieldValue('currency_code', currencyItem.currency_code);
+                form.setFieldValue('exchange_rate', '');
+              }}
+              defaultSelectText={value}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Exchange rate ----------- */}
+      <JournalExchangeRateInputField
+        name={'exchange_rate'}
+        formGroupProps={{ label: ' ', inline: true }}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettings(({ manualJournalsSettings }) => ({
+    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
+    journalNextNumber: manualJournalsSettings?.nextNumber,
+    journalNumberPrefix: manualJournalsSettings?.numberPrefix,
+  })),
+)(MakeJournalEntriesHeader);

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesPage.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import '@/style/pages/ManualJournal/MakeJournal.scss';
+
+import MakeJournalEntriesForm from './MakeJournalEntriesForm';
+import { MakeJournalProvider } from './MakeJournalProvider';
+
+/**
+ * Make journal entries page.
+ */
+export default function MakeJournalEntriesPage() {
+  const { id: journalId } = useParams();
+
+  return (
+    <MakeJournalProvider journalId={journalId}>
+      <MakeJournalEntriesForm />
+    </MakeJournalProvider>
+  );
+}

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesTable.tsx

@@ -0,0 +1,80 @@
+// @ts-nocheck
+import React from 'react';
+import { DataTableEditable } from '@/components';
+import {
+  compose,
+  saveInvoke,
+  updateMinEntriesLines,
+  updateRemoveLineByIndex,
+  updateAutoAddNewLine,
+  updateTableCell,
+} from '@/utils';
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+import { useJournalTableEntriesColumns } from './components';
+import { updateAdjustEntries } from './utils';
+
+/**
+ * Make journal entries table component.
+ */
+export default function MakeJournalEntriesTable({
+  // #ownPorps
+  onChange,
+  entries,
+  defaultEntry,
+  error,
+  initialLinesNumber = 1,
+  minLinesNumber = 1,
+  currencyCode,
+}) {
+  const { accounts, contacts, branches, projects } =
+    useMakeJournalFormContext();
+
+  // Memorized data table columns.
+  const columns = useJournalTableEntriesColumns();
+
+  // Handles update datatable data.
+  const handleUpdateData = (rowIndex, columnId, value) => {
+    const newRows = compose(
+      // Auto-adding new lines.
+      updateAutoAddNewLine(defaultEntry, ['account_id', 'credit', 'debit']),
+      // Update items entries total.
+      updateAdjustEntries(rowIndex, columnId, value),
+      // Update entry of the given row index and column id.
+      updateTableCell(rowIndex, columnId, value),
+    )(entries);
+
+    saveInvoke(onChange, newRows);
+  };
+
+  // Handle remove datatable row.
+  const handleRemoveRow = (rowIndex) => {
+    const newRows = compose(
+      // Ensure minimum lines count.
+      updateMinEntriesLines(minLinesNumber, defaultEntry),
+      // Remove the line by the given index.
+      updateRemoveLineByIndex(rowIndex),
+    )(entries);
+
+    saveInvoke(onChange, newRows);
+  };
+
+  return (
+    <DataTableEditable
+      columns={columns}
+      data={entries}
+      sticky={true}
+      totalRow={true}
+      payload={{
+        accounts,
+        errors: error,
+        updateData: handleUpdateData,
+        removeRow: handleRemoveRow,
+        contacts,
+        branches,
+        projects,
+        autoFocus: ['account_id', 0],
+        currencyCode,
+      }}
+    />
+  );
+}

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import JournalNumberDialog from '@/containers/Dialogs/JournalNumberDialog';
+
+/**
+ * Make journal form dialogs.
+ */
+export default function MakeJournalFormDialogs() {
+  const { setFieldValue } = useFormikContext();
+
+  // Update the form once the journal number form submit confirm.
+  const handleConfirm = ({ manually, incrementNumber }) => {
+    setFieldValue('journal_number', incrementNumber || '');
+    setFieldValue('journal_number_manually', manually);
+  };
+
+  return (
+    <>
+      <JournalNumberDialog
+        dialogName={'journal-number-form'}
+        onConfirm={handleConfirm}
+      />
+    </>
+  );
+}

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx

@@ -0,0 +1,193 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { useFormikContext } from 'formik';
+import classNames from 'classnames';
+import { Icon, If, FormattedMessage as T } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+
+/**
+ * Make Journal floating actions bar.
+ */
+export default function MakeJournalFloatingAction() {
+  const history = useHistory();
+
+  // Formik context.
+  const { submitForm, resetForm, isSubmitting } = useFormikContext();
+
+  // Make journal form context.
+  const { setSubmitPayload, manualJournal } = useMakeJournalFormContext();
+
+  // Handle submit & publish button click.
+  const handleSubmitPublishBtnClick = (event) => {
+    submitForm();
+    setSubmitPayload({ redirect: true, publish: true });
+  };
+
+  // Handle submit, publish & new button click.
+  const handleSubmitPublishAndNewBtnClick = (event) => {
+    submitForm();
+    setSubmitPayload({ redirect: false, publish: true, resetForm: true });
+  };
+
+  // Handle submit, publish & edit button click.
+  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+    submitForm();
+    setSubmitPayload({ redirect: false, publish: true });
+  };
+
+  // Handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    submitForm();
+    setSubmitPayload({ redirect: true, publish: false });
+  };
+
+  // Handle submit as draft & new button click.
+  const handleSubmitDraftAndNewBtnClick = (event) => {
+    submitForm();
+    setSubmitPayload({ redirect: false, publish: false, resetForm: true });
+  };
+
+  // Handle submit as draft & continue editing button click.
+  const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    submitForm();
+    setSubmitPayload({ redirect: false, publish: false });
+  };
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  // Handle clear button click.
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save And Publish ----------- */}
+      <If condition={!manualJournal || !manualJournal?.is_published}>
+        <ButtonGroup>
+          <Button
+            loading={isSubmitting}
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitPublishBtnClick}
+            text={<T id={'save_publish'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'publish_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'publish_continue_editing'} />}
+                  onClick={handleSubmitPublishContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              disabled={isSubmitting}
+            />
+          </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
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              disabled={isSubmitting}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={manualJournal && manualJournal?.is_published}>
+        <ButtonGroup>
+          <Button
+            loading={isSubmitting}
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitPublishBtnClick}
+            style={{ minWidth: '85px' }}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitPublishAndNewBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              intent={Intent.PRIMARY}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              disabled={isSubmitting}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={manualJournal ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel ----------- */}
+      <Button
+        className={'ml1'}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.tsx

@@ -0,0 +1,30 @@
+// @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 { MakeJournalFormFooterLeft } from './MakeJournalFormFooterLeft';
+import { MakeJournalFormFooterRight } from './MakeJournalFormFooterRight';
+
+export default function MakeJournalFormFooter() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <MakeJournalFooterPaper>
+        <Row>
+          <Col md={8}>
+            <MakeJournalFormFooterLeft />
+          </Col>
+
+          <Col md={4}>
+            <MakeJournalFormFooterRight />
+          </Col>
+        </Row>
+      </MakeJournalFooterPaper>
+    </div>
+  );
+}
+const MakeJournalFooterPaper = styled(Paper)`
+  padding: 20px;
+`;

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx

@@ -0,0 +1,33 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from '@/components';
+
+export function MakeJournalFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Description --------- */}
+      <DescriptionFormGroup
+        label={<T id={'description'} />}
+        name={'description'}
+      >
+        <FEditableText
+          name={'description'}
+          placeholder={<T id={'make_jorunal.decscrption.placeholder'} />}
+        />
+      </DescriptionFormGroup>
+    </React.Fragment>
+  );
+}
+
+const DescriptionFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.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 { useJournalTotals } from './utils';
+
+export function MakeJournalFormFooterRight() {
+  const { formattedSubtotal, formattedTotal } = useJournalTotals();
+
+  return (
+    <MakeJouranlTotalLines>
+      <TotalLine
+        title={<T id={'make_journal.label.subtotal'} />}
+        value={formattedSubtotal}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'make_journal.label.total'} />}
+        value={formattedTotal}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </MakeJouranlTotalLines>
+  );
+}
+
+const MakeJouranlTotalLines =styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormTopBar.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Button, Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
+import { useSetPrimaryBranchToForm } from './utils';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from '@/components';
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+
+/**
+ * Make journal form topbar.
+ * @returns
+ */
+export default function MakeJournalFormTopBar() {
+  // 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}>
+          <MakeJournalFormSelectBranch />
+        </FeatureCan>
+      </NavbarGroup>
+    </FormTopbar>
+  );
+}
+
+function MakeJournalFormSelectBranch() {
+  // Invoice form context.
+  const { branches, isBranchesLoading } = useMakeJournalFormContext();
+
+  return isBranchesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <BranchSelect
+      name={'branch_id'}
+      branches={branches}
+      input={MakeJournalBranchSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+function MakeJournalBranchSelectButton({ label }) {
+  return (
+    <Button
+      text={intl.get('make_journal.branch_button.label', { label })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'branch-16'} iconSize={16} />}
+    />
+  );
+}

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalProvider.tsx

@@ -0,0 +1,116 @@
+// @ts-nocheck
+import React, { createContext, useState } from 'react';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { DashboardInsider } from '@/components';
+import {
+  useAccounts,
+  useAutoCompleteContacts,
+  useCurrencies,
+  useJournal,
+  useCreateJournal,
+  useEditJournal,
+  useBranches,
+  useSettingsManualJournals,
+} from '@/hooks/query';
+import { useProjects } from '@/containers/Projects/hooks';
+
+const MakeJournalFormContext = createContext();
+
+/**
+ * Make journal form provider.
+ */
+function MakeJournalProvider({ journalId, query, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+  const isProjectFeatureCan = featureCan(Features.Projects);
+
+  // Load the accounts list.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Load the customers list.
+  const { data: contacts, isLoading: isContactsLoading } =
+    useAutoCompleteContacts();
+
+  // Load the currencies list.
+  const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
+
+  // Load the details of the given manual journal.
+  const { data: manualJournal, isLoading: isJournalLoading } = useJournal(
+    journalId,
+    {
+      enabled: !!journalId,
+    },
+  );
+  // Create and edit journal mutations.
+  const { mutateAsync: createJournalMutate } = useCreateJournal();
+  const { mutateAsync: editJournalMutate } = useEditJournal();
+
+  // Loading the journal settings.
+  const { isLoading: isSettingsLoading } = useSettingsManualJournals();
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
+  // Fetch the projects list.
+  const {
+    data: { projects },
+    isLoading: isProjectsLoading,
+  } = useProjects({}, { enabled: !!isProjectFeatureCan });
+
+  // Submit form payload.
+  const [submitPayload, setSubmitPayload] = useState({});
+
+  // Determines whether the warehouse and branches are loading.
+  const isFeatureLoading = isBranchesLoading;
+
+  const provider = {
+    accounts,
+    contacts,
+    currencies,
+    manualJournal,
+    projects,
+    branches,
+
+    createJournalMutate,
+    editJournalMutate,
+
+    isAccountsLoading,
+    isContactsLoading,
+    isCurrenciesLoading,
+    isJournalLoading,
+    isFeatureLoading,
+    isSettingsLoading,
+    isBranchesSuccess,
+    isNewMode: !journalId,
+
+    submitPayload,
+    setSubmitPayload,
+  };
+
+  return (
+    <DashboardInsider
+      loading={
+        isJournalLoading ||
+        isAccountsLoading ||
+        isCurrenciesLoading ||
+        isContactsLoading ||
+        isSettingsLoading ||
+        isProjectsLoading
+      }
+      name={'make-journal-page'}
+    >
+      <MakeJournalFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useMakeJournalFormContext = () =>
+  React.useContext(MakeJournalFormContext);
+
+export { MakeJournalProvider, useMakeJournalFormContext };

packages/webapp/src/containers/Accounting/MakeJournal/components.tsx

@@ -0,0 +1,201 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Menu, MenuItem, Position, Button } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+import { useFormikContext } from 'formik';
+
+import {
+  ExchangeRateInputGroup,
+  Icon,
+  Hint,
+  FormattedMessage as T,
+} from '@/components';
+import {
+  AccountsListFieldCell,
+  MoneyFieldCell,
+  InputGroupCell,
+  ContactsListFieldCell,
+  BranchesListFieldCell,
+  ProjectsListFieldCell,
+} from '@/components/DataTableCells';
+
+import { CellType, Features, Align } from '@/constants';
+
+import { useCurrentOrganization, useFeatureCan } from '@/hooks/state';
+import { useJournalIsForeign } from './utils';
+
+/**
+ * Contact header cell.
+ */
+export function ContactHeaderCell() {
+  return (
+    <>
+      <T id={'contact'} />
+      <Hint
+        content={<T id={'contact_column_hint'} />}
+        position={Position.LEFT_BOTTOM}
+      />
+    </>
+  );
+}
+
+/**
+ * Credit header cell.
+ */
+export function CreditHeaderCell({ payload: { currencyCode } }) {
+  return intl.get('credit_currency', { currency: currencyCode });
+}
+
+/**
+ * debit header cell.
+ */
+export function DebitHeaderCell({ payload: { currencyCode } }) {
+  return intl.get('debit_currency', { currency: currencyCode });
+}
+
+/**
+ * Actions cell renderer.
+ */
+export const ActionsCellRenderer = ({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  data,
+  payload,
+}) => {
+  const handleClickRemoveRole = () => {
+    payload.removeRow(index);
+  };
+  const exampleMenu = (
+    <Menu>
+      <MenuItem
+        onClick={handleClickRemoveRole}
+        text={intl.get('make_journal.entries.remove_row')}
+      />
+    </Menu>
+  );
+  return (
+    <Popover2 content={exampleMenu} placement="left-start">
+      <Button
+        icon={<Icon icon={'more-13'} iconSize={13} />}
+        iconSize={14}
+        className="m12"
+        minimal={true}
+      />
+    </Popover2>
+  );
+};
+ActionsCellRenderer.cellType = CellType.Button;
+
+/**
+ * Retrieve columns of make journal entries table.
+ */
+export const useJournalTableEntriesColumns = () => {
+  const { featureCan } = useFeatureCan();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('account'),
+        id: 'account_id',
+        accessor: 'account_id',
+        Cell: AccountsListFieldCell,
+        disableSortBy: true,
+        width: 160,
+        fieldProps: { allowCreate: true },
+      },
+      {
+        Header: CreditHeaderCell,
+        accessor: 'credit',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+        width: 100,
+        align: Align.Right,
+      },
+      {
+        Header: DebitHeaderCell,
+        accessor: 'debit',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+        width: 100,
+        align: Align.Right,
+      },
+      {
+        Header: ContactHeaderCell,
+        id: 'contact_id',
+        accessor: 'contact_id',
+        Cell: ContactsListFieldCell,
+        disableSortBy: true,
+        width: 120,
+      },
+
+      ...(featureCan(Features.Branches)
+        ? [
+            {
+              Header: intl.get('project'),
+              id: 'project_id',
+              accessor: 'project_id',
+              Cell: ProjectsListFieldCell,
+              className: 'project_id',
+              disableSortBy: true,
+              width: 120,
+            },
+          ]
+        : []),
+
+      ...(featureCan(Features.Branches)
+        ? [
+            {
+              Header: intl.get('branch'),
+              id: 'branch_id',
+              accessor: 'branch_id',
+              Cell: BranchesListFieldCell,
+              disableSortBy: true,
+              width: 120,
+            },
+          ]
+        : []),
+      {
+        Header: intl.get('note'),
+        accessor: 'note',
+        Cell: InputGroupCell,
+        disableSortBy: true,
+        width: 200,
+      },
+      {
+        Header: '',
+        accessor: 'action',
+        Cell: ActionsCellRenderer,
+        disableSortBy: true,
+        disableResizing: true,
+        width: 45,
+        align: Align.Center,
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Journal exchange rate input field.
+ * @returns {JSX.Element}
+ */
+export function JournalExchangeRateInputField({ ...props }) {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  const isForeignJouranl = useJournalIsForeign();
+
+  // Can't continue if the customer is not foreign.
+  if (!isForeignJouranl) {
+    return null;
+  }
+  return (
+    <ExchangeRateInputGroup
+      fromCurrency={values.currency_code}
+      toCurrency={currentOrganization.base_currency}
+      {...props}
+    />
+  );
+}

packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx

@@ -0,0 +1,266 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { sumBy, setWith, toSafeInteger, get, first } from 'lodash';
+import {
+  transactionNumber,
+  updateTableCell,
+  repeatValue,
+  transformToForm,
+  defaultFastFieldShouldUpdate,
+  ensureEntriesHasEmptyLine,
+  formattedAmount,
+  safeSumBy,
+} from '@/utils';
+import { AppToaster } from '@/components';
+import { useFormikContext } from 'formik';
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+import { useCurrentOrganization } from '@/hooks/state';
+
+const ERROR = {
+  JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
+  CUSTOMERS_NOT_WITH_RECEVIABLE_ACC: 'CUSTOMERS.NOT.WITH.RECEIVABLE.ACCOUNT',
+  VENDORS_NOT_WITH_PAYABLE_ACCOUNT: 'VENDORS.NOT.WITH.PAYABLE.ACCOUNT',
+  PAYABLE_ENTRIES_HAS_NO_VENDORS: 'PAYABLE.ENTRIES.HAS.NO.VENDORS',
+  RECEIVABLE_ENTRIES_HAS_NO_CUSTOMERS: 'RECEIVABLE.ENTRIES.HAS.NO.CUSTOMERS',
+  CREDIT_DEBIT_SUMATION_SHOULD_NOT_EQUAL_ZERO:
+    'CREDIT.DEBIT.SUMATION.SHOULD.NOT.EQUAL.ZERO',
+  ENTRIES_SHOULD_ASSIGN_WITH_CONTACT: 'ENTRIES_SHOULD_ASSIGN_WITH_CONTACT',
+};
+
+export const MIN_LINES_NUMBER = 1;
+export const DEFAULT_LINES_NUMBER = 1;
+
+export const defaultEntry = {
+  account_id: '',
+  credit: '',
+  debit: '',
+  contact_id: '',
+  branch_id: '',
+  project_id: '',
+  note: '',
+};
+
+export const defaultManualJournal = {
+  journal_number: '',
+  journal_number_manually: false,
+  journal_type: 'Journal',
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  description: '',
+  reference: '',
+  currency_code: '',
+  publish: '',
+  branch_id: '',
+  exchange_rate: 1,
+  entries: [...repeatValue(defaultEntry, DEFAULT_LINES_NUMBER)],
+};
+
+// Transform to edit form.
+export function transformToEditForm(manualJournal) {
+  const defaultEntry = defaultManualJournal.entries[0];
+  const initialEntries = [
+    ...manualJournal.entries.map((entry) => ({
+      ...transformToForm(entry, defaultEntry),
+    })),
+    ...repeatValue(
+      defaultEntry,
+      Math.max(MIN_LINES_NUMBER - manualJournal.entries.length, 0),
+    ),
+  ];
+
+  const entries = R.compose(
+    ensureEntriesHasEmptyLine(MIN_LINES_NUMBER, defaultEntry),
+  )(initialEntries);
+
+  return {
+    ...transformToForm(manualJournal, defaultManualJournal),
+    entries,
+  };
+}
+
+/**
+ * Entries adjustment.
+ */
+function adjustmentEntries(entries) {
+  const credit = sumBy(entries, (e) => toSafeInteger(e.credit));
+  const debit = sumBy(entries, (e) => toSafeInteger(e.debit));
+
+  return {
+    debit: Math.max(credit - debit, 0),
+    credit: Math.max(debit - credit, 0),
+  };
+}
+
+/**
+ * Adjustment credit/debit entries.
+ * @param {number} rowIndex
+ * @param {number} columnId
+ * @param {string} value
+ * @return {array}
+ */
+export const updateAdjustEntries = (rowIndex, columnId, value) => (rows) => {
+  let newRows = [...rows];
+
+  const oldCredit = get(rows, `[${rowIndex}].credit`);
+  const oldDebit = get(rows, `[${rowIndex}].debit`);
+
+  if (columnId === 'account_id' && !oldCredit && !oldDebit) {
+    const adjustment = adjustmentEntries(rows);
+
+    if (adjustment.credit) {
+      newRows = updateTableCell(rowIndex, 'credit', adjustment.credit)(newRows);
+    }
+    if (adjustment.debit) {
+      newRows = updateTableCell(rowIndex, 'debit', adjustment.debit)(newRows);
+    }
+  }
+  return newRows;
+};
+
+/**
+ * Transform API errors in toasts messages.
+ */
+export const transformErrors = (resErrors, { setErrors, errors }) => {
+  const getError = (errorType) => resErrors.find((e) => e.type === errorType);
+  const toastMessages = [];
+  let error;
+  let newErrors = { ...errors, entries: [] };
+
+  const setEntriesErrors = (indexes, prop, message) =>
+    indexes.forEach((i) => {
+      const index = Math.max(i - 1, 0);
+      newErrors = setWith(newErrors, `entries.[${index}].${prop}`, message);
+    });
+
+  if ((error = getError(ERROR.RECEIVABLE_ENTRIES_HAS_NO_CUSTOMERS))) {
+    toastMessages.push(
+      intl.get('should_select_customers_with_entries_have_receivable_account'),
+    );
+    setEntriesErrors(error.indexes, 'contact_id', 'error');
+  }
+  if ((error = getError(ERROR.ENTRIES_SHOULD_ASSIGN_WITH_CONTACT))) {
+    if (error.meta.find((meta) => meta.contact_type === 'customer')) {
+      toastMessages.push(
+        intl.get('receivable_accounts_should_assign_with_customers'),
+      );
+    }
+    if (error.meta.find((meta) => meta.contact_type === 'vendor')) {
+      toastMessages.push(
+        intl.get('payable_accounts_should_assign_with_vendors'),
+      );
+    }
+    const indexes = error.meta.map((meta) => meta.indexes).flat();
+    setEntriesErrors(indexes, 'contact_id', 'error');
+  }
+  if ((error = getError(ERROR.JOURNAL_NUMBER_ALREADY_EXISTS))) {
+    newErrors = setWith(
+      newErrors,
+      'journal_number',
+      intl.get('journal_number_is_already_used'),
+    );
+  }
+  setErrors({ ...newErrors });
+
+  if (toastMessages.length > 0) {
+    AppToaster.show({
+      message: toastMessages.map((message) => {
+        return <div>{message}</div>;
+      }),
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+export const useObserveJournalNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const journalNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('journal_number', journalNo);
+  }, [setFieldValue, prefix, nextNumber]);
+};
+
+/**
+ * Detarmines entries fast field should update.
+ */
+export const entriesFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.accounts !== oldProps.accounts ||
+    newProps.contacts !== oldProps.contacts ||
+    newProps.branches !== oldProps.branches ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Detarmines currencies fast field should update.
+ */
+export const currenciesFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.currencies !== oldProps.currencies ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useMakeJournalFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};
+
+/**
+ * Retreives the Journal totals.
+ */
+export const useJournalTotals = () => {
+  const {
+    values: { entries, currency_code: currencyCode },
+  } = useFormikContext();
+
+  // Retrieves the invoice entries total.
+  const totalCredit = safeSumBy(entries, 'credit');
+  const totalDebit = safeSumBy(entries, 'debit');
+
+  const total = Math.max(totalCredit, totalDebit);
+  // 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 {
+    formattedTotal,
+    formattedSubtotal,
+  };
+};
+
+/**
+ * Detarmines whether the expenses has foreign .
+ * @returns {boolean}
+ */
+export const useJournalIsForeign = () => {
+  const { values } = useFormikContext();
+  const currentOrganization = useCurrentOrganization();
+
+  const isForeignJournal = React.useMemo(
+    () => values.currency_code !== currentOrganization.base_currency,
+    [values.currency_code, currentOrganization.base_currency],
+  );
+  return isForeignJournal;
+};