re-structure to monorepo.

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogContent.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import React from 'react';
+import { AccountDialogProvider } from './AccountDialogProvider';
+import AccountDialogForm from './AccountDialogForm';
+
+/**
+ * Account dialog content.
+ */
+export default function AccountDialogContent({ dialogName, payload }) {
+  return (
+    <AccountDialogProvider dialogName={dialogName} payload={payload}>
+      <AccountDialogForm />
+    </AccountDialogProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogForm.tsx

@@ -0,0 +1,137 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { omit } from 'lodash';
+import { AppToaster } from '@/components';
+
+import AccountDialogFormContent from './AccountDialogFormContent';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import {
+  EditAccountFormSchema,
+  CreateAccountFormSchema,
+} from './AccountForm.schema';
+import { compose, transformToForm } from '@/utils';
+import { transformApiErrors, transformAccountToForm } from './utils';
+
+import '@/style/pages/Accounts/AccountFormDialog.scss';
+import { useAccountDialogContext } from './AccountDialogProvider';
+
+// Default initial form values.
+const defaultInitialValues = {
+  account_type: '',
+  parent_account_id: '',
+  name: '',
+  code: '',
+  description: '',
+  currency_code:'',
+  subaccount: false,
+};
+
+/**
+ * Account form dialog content.
+ */
+function AccountFormDialogContent({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Account form context.
+  const {
+    editAccountMutate,
+    createAccountMutate,
+    account,
+
+    accountId,
+    payload,
+    isNewMode,
+    dialogName,
+  } = useAccountDialogContext();
+
+  // Form validation schema in create and edit mode.
+  const validationSchema = isNewMode
+    ? CreateAccountFormSchema
+    : EditAccountFormSchema;
+
+  // Callbacks handles form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = omit(values, ['subaccount']);
+    const toastAccountName = values.code
+      ? `${values.code} - ${values.name}`
+      : values.name;
+
+    // Handle request success.
+    const handleSuccess = () => {
+      closeDialog(dialogName);
+
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'service_has_been_created_successfully'
+            : 'service_has_been_edited_successfully',
+          {
+            name: toastAccountName,
+            service: intl.get('account'),
+          },
+        ),
+        intent: Intent.SUCCESS,
+      });
+    };
+    // Handle request error.
+    const handleError = (error) => {
+      const {
+        response: {
+          data: { errors },
+        },
+      } = error;
+
+      const errorsTransformed = transformApiErrors(errors);
+      setErrors({ ...errorsTransformed });
+      setSubmitting(false);
+    };
+    if (accountId) {
+      editAccountMutate([accountId, form])
+        .then(handleSuccess)
+        .catch(handleError);
+    } else {
+      createAccountMutate({ ...form })
+        .then(handleSuccess)
+        .catch(handleError);
+    }
+  };
+  // Form initial values in create and edit mode.
+  const initialValues = {
+    ...defaultInitialValues,
+    /**
+     * We only care about the fields in the form. Previously unfilled optional
+     * values such as `notes` come back from the API as null, so remove those
+     * as well.
+     */
+    ...transformToForm(
+      transformAccountToForm(account, payload),
+      defaultInitialValues,
+    ),
+  };
+
+  // Handles dialog close.
+  const handleClose = useCallback(() => {
+    closeDialog(dialogName);
+  }, [closeDialog, dialogName]);
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <AccountDialogFormContent
+        dialogName={dialogName}
+        action={payload?.action}
+        onClose={handleClose}
+      />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(AccountFormDialogContent);

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.tsx

@@ -0,0 +1,225 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { Form, FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+  Checkbox,
+} from '@blueprintjs/core';
+import {
+  If,
+  FieldRequiredHint,
+  Hint,
+  AccountsSelectList,
+  AccountsTypesSelect,
+  CurrencySelect,
+  FormattedMessage as T,
+} from '@/components';
+import withAccounts from '@/containers/Accounts/withAccounts';
+
+import { inputIntent, compose } from '@/utils';
+import { useAutofocus } from '@/hooks';
+import { FOREIGN_CURRENCY_ACCOUNTS } from '@/constants/accountTypes';
+import { useAccountDialogContext } from './AccountDialogProvider';
+
+/**
+ * Account form dialogs fields.
+ */
+function AccountFormDialogFields({
+  // #ownProps
+  onClose,
+  action,
+}) {
+  const { values, isSubmitting } = useFormikContext();
+  const accountNameFieldRef = useAutofocus();
+
+  // Account form context.
+  const { fieldsDisabled, accounts, accountsTypes, currencies } =
+    useAccountDialogContext();
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <Field name={'account_type'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'account_type'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames('form-group--account-type', Classes.FILL)}
+              inline={true}
+              helperText={<ErrorMessage name="account_type" />}
+              intent={inputIntent({ error, touched })}
+            >
+              <AccountsTypesSelect
+                accountsTypes={accountsTypes}
+                selectedTypeId={value}
+                defaultSelectText={<T id={'select_account_type'} />}
+                onTypeSelected={(accountType) => {
+                  form.setFieldValue('account_type', accountType.key);
+                  form.setFieldValue('currency_code', '');
+                }}
+                disabled={fieldsDisabled.accountType}
+                popoverProps={{ minimal: true }}
+                popoverFill={true}
+              />
+            </FormGroup>
+          )}
+        </Field>
+
+        <FastField name={'name'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'account_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={'form-group--account-name'}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="name" />}
+              inline={true}
+            >
+              <InputGroup
+                medium={true}
+                inputRef={(ref) => (accountNameFieldRef.current = ref)}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        <FastField name={'code'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'account_code'} />}
+              className={'form-group--account-code'}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="code" />}
+              inline={true}
+              labelInfo={<Hint content={<T id="account_code_hint" />} />}
+            >
+              <InputGroup medium={true} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+
+        <Field name={'subaccount'} type={'checkbox'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={' '}
+              className={classNames('form-group--subaccount')}
+              intent={inputIntent({ error, touched })}
+              inline={true}
+            >
+              <Checkbox
+                inline={true}
+                label={
+                  <>
+                    <T id={'sub_account'} />
+                    <Hint />
+                  </>
+                }
+                name={'subaccount'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </Field>
+
+        <If condition={values.subaccount}>
+          <FastField name={'parent_account_id'}>
+            {({
+              form: { values, setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'parent_account'} />}
+                className={classNames(
+                  'form-group--parent-account',
+                  Classes.FILL,
+                )}
+                inline={true}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="parent_account_id" />}
+              >
+                <AccountsSelectList
+                  accounts={accounts}
+                  onAccountSelected={(account) => {
+                    setFieldValue('parent_account_id', account.id);
+                  }}
+                  defaultSelectText={<T id={'select_parent_account'} />}
+                  selectedAccountId={value}
+                  popoverFill={true}
+                  filterByTypes={values.account_type}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </If>
+
+        <If condition={FOREIGN_CURRENCY_ACCOUNTS.includes(values.account_type)}>
+          {/*------------ Currency  -----------*/}
+          <FastField name={'currency_code'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'currency'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+                inline={true}
+              >
+                <CurrencySelect
+                  name={'currency_code'}
+                  currencies={currencies}
+                  popoverProps={{ minimal: true }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </If>
+        <FastField name={'description'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'description'} />}
+              className={'form-group--description'}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name={'description'} />}
+              inline={true}
+            >
+              <TextArea growVertically={true} height={280} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button
+            disabled={isSubmitting}
+            onClick={onClose}
+            style={{ minWidth: '75px' }}
+          >
+            <T id={'close'} />
+          </Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            loading={isSubmitting}
+            style={{ minWidth: '95px' }}
+            type="submit"
+          >
+            {action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+export default compose(
+  withAccounts(({ accountsTypes, accountsList }) => ({
+    accountsTypes,
+    accounts: accountsList,
+  })),
+)(AccountFormDialogFields);

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogProvider.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import { DialogContent } from '@/components';
+import {
+  useCreateAccount,
+  useAccountsTypes,
+  useCurrencies,
+  useAccount,
+  useAccounts,
+  useEditAccount,
+} from '@/hooks/query';
+import { AccountDialogAction, getDisabledFormFields } from './utils';
+
+const AccountDialogContext = createContext();
+
+/**
+ * Account form provider.
+ */
+function AccountDialogProvider({ dialogName, payload, ...props }) {
+  // Create and edit account mutations.
+  const { mutateAsync: createAccountMutate } = useCreateAccount();
+  const { mutateAsync: editAccountMutate } = useEditAccount();
+
+  // Fetches accounts list.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Fetches accounts types.
+  const { data: accountsTypes, isLoading: isAccountsTypesLoading } =
+    useAccountsTypes();
+
+  // Fetches the specific account details.
+  const { data: account, isLoading: isAccountLoading } = useAccount(
+    payload.accountId,
+    {
+      enabled:
+        !!payload.accountId && payload.action === AccountDialogAction.Edit,
+    },
+  );
+
+  // Handle fetch Currencies data table
+  const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
+
+  const isNewMode = !payload?.action;
+
+  // Retrieves the disabled fields of the form.
+  const fieldsDisabled = React.useMemo(
+    () => getDisabledFormFields(account, payload),
+    [account, payload],
+  );
+
+  // Provider payload.
+  const provider = {
+    dialogName,
+    payload,
+    fieldsDisabled,
+
+    currencies,
+
+    createAccountMutate,
+    editAccountMutate,
+    accounts,
+    accountsTypes,
+    account,
+
+    isAccountsLoading,
+    isCurrenciesLoading,
+    isNewMode,
+  };
+
+  const isLoading =
+    isAccountsLoading ||
+    isAccountsTypesLoading ||
+    isAccountLoading ||
+    isCurrenciesLoading;
+
+  return (
+    <DialogContent isLoading={isLoading}>
+      <AccountDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useAccountDialogContext = () => useContext(AccountDialogContext);
+
+export { AccountDialogProvider, useAccountDialogContext };

packages/webapp/src/containers/Dialogs/AccountDialog/AccountForm.schema.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+
+const Schema = Yup.object().shape({
+  name: Yup.string()
+    .required()
+    .min(3)
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('account_name_')),
+  code: Yup.string().nullable().min(3).max(6),
+  account_type: Yup.string()
+    .required()
+    .label(intl.get('account_type')),
+  description: Yup.string().min(3).max(DATATYPES_LENGTH.TEXT).nullable().trim(),
+  parent_account_id: Yup.number().nullable(),
+});
+
+export const CreateAccountFormSchema = Schema;
+export const EditAccountFormSchema = Schema;

packages/webapp/src/containers/Dialogs/AccountDialog/index.tsx

@@ -0,0 +1,40 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from '@/components';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const AccountDialogContent = lazy(() => import('./AccountDialogContent'));
+
+/**
+ * Account form dialog.
+ */
+function AccountFormDialog({
+  dialogName,
+  payload = { action: '', id: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_account'} />
+        ) : (
+          <T id={'new_account'} />
+        )
+      }
+      className={'dialog--account-form'}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <AccountDialogContent dialogName={dialogName} payload={payload} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(AccountFormDialog);

packages/webapp/src/containers/Dialogs/AccountDialog/utils.tsx

@@ -0,0 +1,108 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+import { isUndefined } from 'lodash';
+
+export const AccountDialogAction = {
+  Edit: 'edit',
+  NewChild: 'NewChild',
+  NewDefinedType: 'NewDefinedType',
+};
+
+/**
+ * Transformes the response API errors.
+ */
+export const transformApiErrors = (errors) => {
+  const fields = {};
+  if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
+    fields.code = intl.get('account_code_is_not_unique');
+  }
+  if (errors.find((e) => e.type === 'ACCOUNT.NAME.NOT.UNIQUE')) {
+    fields.name = intl.get('account_name_is_already_used');
+  }
+  if (
+    errors.find((e) => e.type === 'ACCOUNT_CURRENCY_NOT_SAME_PARENT_ACCOUNT')
+  ) {
+    fields.parent_account_id = intl.get(
+      'accounts.error.account_currency_not_same_parent_account',
+    );
+  }
+  return fields;
+};
+
+/**
+ * Payload transformer in account edit mode.
+ */
+function tranformNewChildAccountPayload(payload) {
+  return {
+    parent_account_id: payload.parentAccountId || '',
+    account_type: payload.accountType || '',
+    subaccount: true,
+  };
+}
+
+/**
+ * Payload transformer in new account with defined type.
+ */
+function transformNewDefinedTypePayload(payload) {
+  return {
+    account_type: payload.accountType || '',
+  };
+}
+
+/**
+ * Merged the fetched account with transformed payload.
+ */
+const mergeWithAccount = R.curry((transformed, account) => {
+  return {
+    ...account,
+    ...transformed,
+  };
+});
+
+/**
+ * Default account payload transformer.
+ */
+const defaultPayloadTransform = () => ({});
+
+/**
+ * Defined payload transformers.
+ */
+function getConditions() {
+  return [
+    [AccountDialogAction.Edit],
+    [AccountDialogAction.NewChild, tranformNewChildAccountPayload],
+    [AccountDialogAction.NewDefinedType, transformNewDefinedTypePayload],
+  ];
+}
+
+/**
+ * Transformes the given payload to account form initial values.
+ */
+export const transformAccountToForm = (account, payload) => {
+  const conditions = getConditions();
+
+  const results = conditions.map((condition) => {
+    const transformer = !isUndefined(condition[1])
+      ? condition[1]
+      : defaultPayloadTransform;
+
+    return [
+      condition[0] === payload.action ? R.T : R.F,
+      mergeWithAccount(transformer(payload)),
+    ];
+  });
+  return R.cond(results)(account);
+};
+
+/**
+ * Detarmines whether the for fields are disabled.
+ */
+export const getDisabledFormFields = (account, payload) => {
+  return {
+    accountType:
+      payload.action === AccountDialogAction.Edit ||
+      payload.action === AccountDialogAction.NewChild ||
+      payload.action === AccountDialogAction.NewDefinedType,
+  };
+};

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogContent.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+import { AllocateLandedCostDialogProvider } from './AllocateLandedCostDialogProvider';
+import AllocateLandedCostForm from './AllocateLandedCostForm';
+
+/**
+ * Allocate landed cost dialog content.
+ */
+export default function AllocateLandedCostDialogContent({
+  // #ownProps
+  dialogName,
+  billId,
+}) {
+  return (
+    <AllocateLandedCostDialogProvider billId={billId} dialogName={dialogName}>
+      <AllocateLandedCostForm />
+    </AllocateLandedCostDialogProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.tsx

@@ -0,0 +1,115 @@
+// @ts-nocheck
+import React from 'react';
+import { defaultTo, get } from 'lodash';
+import { DialogContent } from '@/components';
+import {
+  useBill,
+  useCreateLandedCost,
+  useLandedCostTransaction,
+} from '@/hooks/query';
+import {
+  getEntriesByTransactionId,
+  getCostTransactionById,
+  getTransactionEntryById,
+} from './utils';
+
+const AllocateLandedCostDialogContext = React.createContext();
+
+/**
+ * Allocate landed cost provider.
+ */
+function AllocateLandedCostDialogProvider({
+  billId,
+  query,
+  dialogName,
+  ...props
+}) {
+  const [transactionsType, setTransactionsType] = React.useState(null);
+  const [transactionId, setTransactionId] = React.useState(null);
+  const [transactionEntryId, setTransactionEntryId] = React.useState(null);
+
+  // Handle fetch bill details.
+  const { isLoading: isBillLoading, data: bill } = useBill(billId, {
+    enabled: !!billId,
+  });
+  // Retrieve the landed cost transactions based on the given transactions type.
+  const {
+    data: { transactions: landedCostTransactions },
+  } = useLandedCostTransaction(transactionsType, {
+    enabled: !!transactionsType,
+  });
+  // Landed cost selected transaction.
+  const costTransaction = React.useMemo(
+    () =>
+      transactionId
+        ? getCostTransactionById(transactionId, landedCostTransactions)
+        : null,
+    [transactionId, landedCostTransactions],
+  );
+  // Retrieve the cost transaction entry.
+  const costTransactionEntry = React.useMemo(
+    () =>
+      costTransaction && transactionEntryId
+        ? getTransactionEntryById(costTransaction, transactionEntryId)
+        : null,
+    [costTransaction, transactionEntryId],
+  );
+  // Retrieve entries of the given transaction id.
+  const costTransactionEntries = React.useMemo(
+    () =>
+      transactionId
+        ? getEntriesByTransactionId(landedCostTransactions, transactionId)
+        : [],
+    [landedCostTransactions, transactionId],
+  );
+  // Create landed cost mutations.
+  const { mutateAsync: createLandedCostMutate } = useCreateLandedCost();
+
+  // Retrieve the unallocate cost amount of cost transaction.
+  const unallocatedCostAmount = defaultTo(
+    get(costTransactionEntry, 'unallocated_cost_amount'),
+    0,
+  );
+
+  // Retrieve the unallocate cost amount of cost transaction.
+  const formattedUnallocatedCostAmount = defaultTo(
+    get(costTransactionEntry, 'formatted_unallocated_cost_amount'),
+    0,
+  );
+
+  // Provider payload.
+  const provider = {
+    isBillLoading,
+    bill,
+    dialogName,
+    query,
+    createLandedCostMutate,
+    costTransaction,
+    costTransactionEntries,
+    transactionsType,
+    landedCostTransactions,
+    setTransactionsType,
+    setTransactionId,
+    setTransactionEntryId,
+    costTransactionEntry,
+    transactionEntryId,
+    transactionId,
+    billId,
+    unallocatedCostAmount,
+    formattedUnallocatedCostAmount,
+  };
+
+  return (
+    <DialogContent isLoading={isBillLoading} name={'allocate-landed-cost'}>
+      <AllocateLandedCostDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useAllocateLandedConstDialogContext = () =>
+  React.useContext(AllocateLandedCostDialogContext);
+
+export {
+  AllocateLandedCostDialogProvider,
+  useAllocateLandedConstDialogContext,
+};

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.tsx

@@ -0,0 +1,56 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { DataTableEditable } from '@/components';
+
+import { compose, updateTableCell } from '@/utils';
+import { useAllocateLandedCostEntriesTableColumns } from './utils';
+
+/**
+ * Allocate landed cost entries table.
+ */
+export default function AllocateLandedCostEntriesTable({
+  onUpdateData,
+  entries,
+}) {
+  // Allocate landed cost entries table columns.
+  const columns = useAllocateLandedCostEntriesTableColumns();
+
+  // Handle update data.
+  const handleUpdateData = React.useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+
+  return (
+    <AllocateLandeedCostEntriesEditableTable
+      columns={columns}
+      data={entries}
+      payload={{
+        errors: [],
+        updateData: handleUpdateData,
+      }}
+    />
+  );
+}
+
+export const AllocateLandeedCostEntriesEditableTable = styled(
+  DataTableEditable,
+)`
+  .table {
+    .thead .tr .th {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .tbody .tr .td {
+      padding: 0.25rem;
+    }
+  }
+`;

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.tsx

@@ -0,0 +1,78 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { Intent, Button } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import {
+  DialogFooter,
+  DialogFooterActions,
+  FormattedMessage as T,
+} from '@/components';
+
+import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+/**
+ * Allocate landed cost floating actions.
+ * @returns {React.JSX}
+ */
+function AllocateLandedCostFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Allocate landed cost dialog context.
+  const { dialogName, costTransactionEntry, formattedUnallocatedCostAmount } =
+    useAllocateLandedConstDialogContext();
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <AllocateDialogFooter>
+      <DialogFooterActions alignment={'left'}>
+        {costTransactionEntry && (
+          <UnallocatedAmount>
+           <T id={'landed_cost.dialog.label_unallocated_cost_amount'}/>
+            <strong>{formattedUnallocatedCostAmount}</strong>
+          </UnallocatedAmount>
+        )}
+      </DialogFooterActions>
+
+      <DialogFooterActions alignment={'right'}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          style={{ minWidth: '95px' }}
+          type="submit"
+          loading={isSubmitting}
+        >
+          {<T id={'save'} />}
+        </Button>
+      </DialogFooterActions>
+    </AllocateDialogFooter>
+  );
+}
+
+export default compose(withDialogActions)(AllocateLandedCostFloatingActions);
+
+const AllocateDialogFooter = styled(DialogFooter)`
+  display: flex;
+`;
+
+const UnallocatedAmount = styled.div`
+  color: #3f5278;
+  align-self: center;
+
+  strong {
+    color: #353535;
+    padding-left: 4px;
+  }
+`;

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+
+export const AllocateLandedCostFormSchema = () =>
+  Yup.object().shape({
+    transaction_type: Yup.string().label(intl.get('transaction_type')),
+    transaction_date: Yup.date().label(intl.get('transaction_date')),
+    transaction_id: Yup.string().label(intl.get('transaction_number')),
+    transaction_entry_id: Yup.string().label(intl.get('transaction_line')),
+    amount: Yup.number().label(intl.get('amount')),
+    allocation_method: Yup.string().trim(),
+    items: Yup.array().of(
+      Yup.object().shape({
+        entry_id: Yup.number().nullable(),
+        cost: Yup.number().nullable(),
+      }),
+    ),
+  });

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.tsx

@@ -0,0 +1,104 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+
+import '@/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss';
+
+import { AppToaster } from '@/components';
+import { AllocateLandedCostFormSchema } from './AllocateLandedCostForm.schema';
+import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
+import AllocateLandedCostFormContent from './AllocateLandedCostFormContent';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose, transformToForm } from '@/utils';
+import { defaultInitialValues } from './utils';
+
+/**
+ * Allocate landed cost form.
+ */
+function AllocateLandedCostForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, bill, billId, createLandedCostMutate } =
+    useAllocateLandedConstDialogContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    items: bill.entries.map((entry) => ({
+      ...entry,
+      entry_id: entry.id,
+      cost: '',
+    })),
+  };
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    setSubmitting(true);
+
+    // Filters the entries has no cost.
+    const entries = values.items
+      .filter((entry) => entry.entry_id && entry.cost)
+      .map((entry) => transformToForm(entry, defaultInitialValues.items[0]));
+
+    if (entries.length <= 0) {
+      AppToaster.show({
+        message: intl.get('something_wrong'),
+        intent: Intent.DANGER,
+      });
+      return;
+    }
+    const form = {
+      ...values,
+      items: entries,
+    };
+    // Handle the request success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('the_landed_cost_has_been_created_successfully'),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      closeDialog(dialogName);
+    };
+    // Handle the request error.
+    const onError = (res) => {
+      const { errors } = res.response.data;
+      setSubmitting(false);
+
+      if (
+        errors.some(
+          (e) => e.type === 'COST_AMOUNT_BIGGER_THAN_UNALLOCATED_AMOUNT',
+        )
+      ) {
+        AppToaster.show({
+          message: intl.get(
+            'landed_cost.error.the_total_located_cost_is_bigger_than_the_transaction_line',
+          ),
+          intent: Intent.DANGER,
+        });
+      } else {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      }
+    };
+    createLandedCostMutate([billId, form]).then(onSuccess).catch(onError);
+  };
+
+  // Computed validation schema.
+  const validationSchema = AllocateLandedCostFormSchema();
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={AllocateLandedCostFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(AllocateLandedCostForm);

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormBody.tsx

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

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormContent.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+import { Form, useFormikContext } from 'formik';
+import { FormObserver } from '@/components';
+import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
+import AllocateLandedCostFloatingActions from './AllocateLandedCostFloatingActions';
+import AllocateLandedCostFormFields from './AllocateLandedCostFormFields';
+
+/**
+ * Allocate landed cost form content.
+ */
+export default function AllocateLandedCostFormContent() {
+  const { values } = useFormikContext();
+
+  // Allocate landed cost dialog context.
+  const { setTransactionsType, setTransactionId, setTransactionEntryId } =
+    useAllocateLandedConstDialogContext();
+
+  // Handle the form change.
+  const handleFormChange = (values) => {
+    if (values.transaction_type) {
+      setTransactionsType(values.transaction_type);
+    }
+    if (values.transaction_id) {
+      setTransactionId(values.transaction_id);
+    }
+    if (values.transaction_entry_id) {
+      setTransactionEntryId(values.transaction_entry_id);
+    }
+  };
+  return (
+    <Form>
+      <AllocateLandedCostFormFields />
+      <AllocateLandedCostFloatingActions />
+      <FormObserver values={values} onChange={handleFormChange} />
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.tsx

@@ -0,0 +1,230 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FastField, Field, ErrorMessage } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  RadioGroup,
+  Radio,
+  InputGroup,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { FormattedMessage as T, If } from '@/components';
+import { inputIntent, handleStringChange } from '@/utils';
+import { FieldRequiredHint, ListSelect } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import allocateLandedCostType from '@/constants/allocateLandedCostType';
+
+import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
+import {
+  transactionsSelectShouldUpdate,
+  allocateCostToEntries,
+  resetAllocatedCostEntries,
+} from './utils';
+import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
+
+/**
+ * Allocate landed cost form fields.
+ */
+export default function AllocateLandedCostFormFields() {
+  // Allocated landed cost dialog.
+  const { costTransactionEntries, landedCostTransactions } =
+    useAllocateLandedConstDialogContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------Transaction type -----------*/}
+      <FastField
+        name={'transaction_type'}
+        transactions={allocateLandedCostType}
+        shouldUpdate={transactionsSelectShouldUpdate}
+      >
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'transaction_type'} />}
+            labelInfo={<FieldRequiredHint />}
+            helperText={<ErrorMessage name="transaction_type" />}
+            intent={inputIntent({ error, touched })}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--transaction_type')}
+          >
+            <ListSelect
+              items={allocateLandedCostType}
+              onItemSelect={(type) => {
+                const { items } = values;
+
+                setFieldValue('transaction_type', type.value);
+                setFieldValue('transaction_id', '');
+                setFieldValue('transaction_entry_id', '');
+
+                setFieldValue('amount', '');
+                setFieldValue('items', resetAllocatedCostEntries(items));
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'value'}
+              textProp={'name'}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Transaction  -----------*/}
+      <Field
+        name={'transaction_id'}
+        transactions={landedCostTransactions}
+        shouldUpdate={transactionsSelectShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'transaction_id'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="transaction_id" />}
+            className={classNames(CLASSES.FILL, 'form-group--transaction_id')}
+            inline={true}
+          >
+            <ListSelect
+              items={landedCostTransactions}
+              onItemSelect={({ id }) => {
+                const { items } = form.values;
+                form.setFieldValue('transaction_id', id);
+                form.setFieldValue('transaction_entry_id', '');
+
+                form.setFieldValue('amount', '');
+                form.setFieldValue('items', resetAllocatedCostEntries(items));
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'id'}
+              textProp={'name'}
+              labelProp={'formatted_unallocated_cost_amount'}
+              defaultText={intl.get(
+                'landed_cost.dialog.label_select_transaction',
+              )}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </Field>
+
+      {/*------------ Transaction line  -----------*/}
+      <If condition={costTransactionEntries.length > 0}>
+        <Field
+          name={'transaction_entry_id'}
+          transactions={costTransactionEntries}
+          shouldUpdate={transactionsSelectShouldUpdate}
+        >
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'transaction_line'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="transaction_entry_id" />}
+              className={classNames(
+                CLASSES.FILL,
+                'form-group--transaction_entry_id',
+              )}
+              inline={true}
+            >
+              <ListSelect
+                items={costTransactionEntries}
+                onItemSelect={(entry) => {
+                  const { id, unallocated_cost_amount: unallocatedAmount } =
+                    entry;
+                  const { items, allocation_method } = form.values;
+
+                  form.setFieldValue('amount', unallocatedAmount);
+                  form.setFieldValue('transaction_entry_id', id);
+                  form.setFieldValue(
+                    'items',
+                    allocateCostToEntries(
+                      unallocatedAmount,
+                      allocation_method,
+                      items,
+                    ),
+                  );
+                }}
+                filterable={false}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'name'}
+                labelProp={'formatted_unallocated_cost_amount'}
+                defaultText={intl.get(
+                  'landed_cost.dialog.label_select_transaction_entry',
+                )}
+                popoverProps={{ minimal: true }}
+              />
+            </FormGroup>
+          )}
+        </Field>
+      </If>
+
+      {/*------------ Amount -----------*/}
+      <FastField name={'amount'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'amount'} />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="amount" />}
+            className={'form-group--amount'}
+            inline={true}
+          >
+            <InputGroup
+              {...field}
+              onBlur={(e) => {
+                const amount = e.target.value;
+                const { allocation_method, items } = form.values;
+
+                form.setFieldValue(
+                  'items',
+                  allocateCostToEntries(amount, allocation_method, items),
+                );
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Allocation method -----------*/}
+      <Field name={'allocation_method'}>
+        {({ form, field: { value }, meta: { touched, error } }) => (
+          <FormGroup
+            medium={true}
+            label={<T id={'allocation_method'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--allocation_method'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="allocation_method" />}
+            inline={true}
+          >
+            <RadioGroup
+              onChange={handleStringChange((_value) => {
+                const { amount, items } = form.values;
+
+                form.setFieldValue('allocation_method', _value);
+                form.setFieldValue(
+                  'items',
+                  allocateCostToEntries(amount, _value, items),
+                );
+              })}
+              selectedValue={value}
+              inline={true}
+            >
+              <Radio label={<T id={'quantity'} />} value="quantity" />
+              <Radio label={<T id={'valuation'} />} value="value" />
+            </RadioGroup>
+          </FormGroup>
+        )}
+      </Field>
+
+      {/*------------ Allocate Landed cost Table -----------*/}
+      <AllocateLandedCostFormBody />
+    </div>
+  );
+}

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/index.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { FormattedMessage as T, Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const AllocateLandedCostDialogContent = lazy(() =>
+  import('./AllocateLandedCostDialogContent'),
+);
+
+/**
+ * Allocate landed cost dialog.
+ */
+function AllocateLandedCostDialog({
+  dialogName,
+  payload = { billId: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'allocate_landed_coast'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className="dialog--allocate-landed-cost-form"
+    >
+      <DialogSuspense>
+        <AllocateLandedCostDialogContent
+          billId={payload.billId}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(AllocateLandedCostDialog);

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/utils.tsx

@@ -0,0 +1,171 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { sumBy, round } from 'lodash';
+import * as R from 'ramda';
+
+import { defaultFastFieldShouldUpdate } from '@/utils';
+import { MoneyFieldCell } from '@/components';
+
+export const defaultInitialItem = {
+  entry_id: '',
+  cost: '',
+};
+
+// Default form initial values.
+export const defaultInitialValues = {
+  transaction_type: 'Bill',
+  transaction_id: '',
+  transaction_entry_id: '',
+  amount: '',
+  allocation_method: 'quantity',
+  items: [defaultInitialItem],
+};
+
+/**
+ * Retrieve transaction entries of the given transaction id.
+ */
+export function getEntriesByTransactionId(transactions, id) {
+  const transaction = transactions.find((trans) => trans.id === id);
+  return transaction ? transaction.entries : [];
+}
+
+/**
+ *
+ * @param {*} transaction
+ * @param {*} transactionEntryId
+ * @returns
+ */
+export function getTransactionEntryById(transaction, transactionEntryId) {
+  return transaction.entries.find((entry) => entry.id === transactionEntryId);
+}
+
+/**
+ *
+ * @param {*} total
+ * @param {*} allocateType
+ * @param {*} entries
+ * @returns
+ */
+export function allocateCostToEntries(total, allocateType, entries) {
+  return R.compose(
+    R.when(
+      R.always(allocateType === 'value'),
+      R.curry(allocateCostByValue)(total),
+    ),
+    R.when(
+      R.always(allocateType === 'quantity'),
+      R.curry(allocateCostByQuantity)(total),
+    ),
+  )(entries);
+}
+
+/**
+ * Allocate total cost on entries on value.
+ * @param {*} entries
+ * @param {*} total
+ * @returns
+ */
+export function allocateCostByValue(total, entries) {
+  const totalAmount = sumBy(entries, 'amount');
+
+  const entriesMapped = entries.map((entry) => ({
+    ...entry,
+    percentageOfValue: entry.amount / totalAmount,
+  }));
+
+  return entriesMapped.map((entry) => ({
+    ...entry,
+    cost: round(entry.percentageOfValue * total, 2),
+  }));
+}
+
+/**
+ * Allocate total cost on entries by quantity.
+ * @param {*} entries
+ * @param {*} total
+ * @returns
+ */
+export function allocateCostByQuantity(total, entries) {
+  const totalQuantity = sumBy(entries, 'quantity');
+
+  const _entries = entries.map((entry) => ({
+    ...entry,
+    percentageOfQuantity: entry.quantity / totalQuantity,
+  }));
+
+  return _entries.map((entry) => ({
+    ...entry,
+    cost: round(entry.percentageOfQuantity * total, 2),
+  }));
+}
+
+/**
+ * Retrieve the landed cost transaction by the given id.
+ */
+export function getCostTransactionById(id, transactions) {
+  return transactions.find((trans) => trans.id === id);
+}
+
+/**
+ * Detarmines the transactions selet field when should update.
+ */
+export function transactionsSelectShouldUpdate(newProps, oldProps) {
+  return (
+    newProps.transactions !== oldProps.transactions ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+}
+
+/**
+ *
+ * @param {*} entries
+ * @returns
+ */
+export function resetAllocatedCostEntries(entries) {
+  return entries.map((entry) => ({ ...entry, cost: 0 }));
+}
+
+/**
+ * Retrieves allocate landed cost entries table columns.
+ */
+export const useAllocateLandedCostEntriesTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('item'),
+        accessor: 'item.name',
+        disableSortBy: true,
+        width: '150',
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        disableSortBy: true,
+        width: '100',
+        align: 'right',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        disableSortBy: true,
+        align: 'right',
+        width: '100',
+      },
+      {
+        Header: intl.get('cost'),
+        accessor: 'cost',
+        width: '150',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+};

packages/webapp/src/containers/Dialogs/BadDebtDialog/BadDebtDialogContent.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/pages/BadDebt/BadDebtDialog.scss';
+import { BadDebtFormProvider } from './BadDebtFormProvider';
+import BadDebtForm from './BadDebtForm';
+
+/**
+ * Bad debt  dialog content.
+ */
+export default function BadDebtDialogContent({
+  // #ownProps
+  dialogName,
+  invoice,
+}) {
+  return (
+    <BadDebtFormProvider invoiceId={invoice} dialogName={dialogName}>
+      <BadDebtForm />
+    </BadDebtFormProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/BadDebtDialog/BadDebtForm.schema.tsx

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+
+const Schema = Yup.object().shape({
+  expense_account_id: Yup.number()
+    .required()
+    .label(intl.get('expense_account_id')),
+  amount: Yup.number().required().label(intl.get('amount')),
+  reason: Yup.string()
+    .required()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('reason')),
+});
+
+export const CreateBadDebtFormSchema = Schema;

packages/webapp/src/containers/Dialogs/BadDebtDialog/BadDebtForm.tsx

@@ -0,0 +1,86 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { omit } from 'lodash';
+
+import { AppToaster } from '@/components';
+import { CreateBadDebtFormSchema } from './BadDebtForm.schema';
+import { transformErrors } from './utils';
+
+import BadDebtFormContent from './BadDebtFormContent';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+import { useBadDebtContext } from './BadDebtFormProvider';
+
+import { compose } from '@/utils';
+
+const defaultInitialValues = {
+  expense_account_id: '',
+  reason: '',
+  amount: '',
+};
+
+function BadDebtForm({
+  // #withDialogActions
+  closeDialog,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const { invoice, dialogName, createBadDebtMutate, cancelBadDebtMutate } =
+    useBadDebtContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+    amount: invoice.due_amount,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...omit(values, ['currency_code']),
+    };
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('bad_debt.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+        transformErrors(errors, { setErrors });
+      }
+      setSubmitting(false);
+    };
+    createBadDebtMutate([invoice.id, form]).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateBadDebtFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={BadDebtFormContent}
+    />
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withCurrentOrganization(),
+)(BadDebtForm);

packages/webapp/src/containers/Dialogs/BadDebtDialog/BadDebtFormContent.tsx

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import React from 'react';
+import { Form } from 'formik';
+
+import BadDebtFormFields from './BadDebtFormFields';
+import BadDebtFormFloatingActions from './BadDebtFormFloatingActions';
+
+/**
+ * Bad debt form content.
+ */
+export default function BadDebtFormContent() {
+  return (
+    <Form>
+      <BadDebtFormFields />
+      <BadDebtFormFloatingActions />
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/BadDebtDialog/BadDebtFormFields.tsx

@@ -0,0 +1,122 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from '@/components';
+
+import { useAutofocus } from '@/hooks';
+import {
+  Classes,
+  FormGroup,
+  TextArea,
+  ControlGroup,
+  Callout,
+  Intent,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+import { ACCOUNT_TYPE } from '@/constants/accountTypes';
+import { inputIntent } from '@/utils';
+import {
+  AccountsSuggestField,
+  InputPrependText,
+  MoneyInputGroup,
+  FieldRequiredHint,
+} from '@/components';
+
+import { useBadDebtContext } from './BadDebtFormProvider';
+
+/**
+ * Bad debt form fields.
+ */
+function BadDebtFormFields() {
+  const amountfieldRef = useAutofocus();
+
+  const { accounts ,invoice } = useBadDebtContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Callout intent={Intent.PRIMARY}>
+        <p>
+          <T id={'bad_debt.dialog.header_note'} />
+        </p>
+      </Callout>
+
+      {/*------------ Written-off amount -----------*/}
+      <FastField name={'amount'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'bad_debt.dialog.written_off_amount'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--amount', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="amount" />}
+          >
+            <ControlGroup>
+              <InputPrependText text={invoice.currency_code} />
+
+              <MoneyInputGroup
+                value={value}
+                minimal={true}
+                onChange={(amount) => {
+                  setFieldValue('amount', amount);
+                }}
+                intent={inputIntent({ error, touched })}
+                disabled={amountfieldRef}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ Expense account -----------*/}
+      <FastField name={'expense_account_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'expense_account_id'} />}
+            className={classNames(
+              'form-group--expense_account_id',
+              'form-group--select-list',
+              CLASSES.FILL,
+            )}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'expense_account_id'} />}
+          >
+            <AccountsSuggestField
+              selectedAccountId={value}
+              accounts={accounts}
+              onAccountSelected={({ id }) =>
+                form.setFieldValue('expense_account_id', id)
+              }
+              filterByTypes={[ACCOUNT_TYPE.EXPENSE]}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ reason -----------*/}
+      <FastField name={'reason'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reason'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--reason'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'reason'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default BadDebtFormFields;

packages/webapp/src/containers/Dialogs/BadDebtDialog/BadDebtFormFloatingActions.tsx

@@ -0,0 +1,49 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from '@/components';
+
+import { useBadDebtContext } from './BadDebtFormProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+
+/**
+ * Bad bebt form floating actions.
+ */
+function BadDebtFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // bad debt invoice dialog context.
+  const { dialogName } = useBadDebtContext();
+
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'save'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(BadDebtFormFloatingActions);

packages/webapp/src/containers/Dialogs/BadDebtDialog/BadDebtFormProvider.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React from 'react';
+
+import { DialogContent } from '@/components';
+import { useAccounts, useInvoice, useCreateBadDebt } from '@/hooks/query';
+
+const BadDebtContext = React.createContext();
+
+/**
+ * Bad debt provider.
+ */
+function BadDebtFormProvider({ invoiceId, dialogName, ...props }) {
+  // Handle fetch accounts data.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Handle fetch invoice data.
+  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
+    enabled: !!invoiceId,
+  });
+
+  // Create and cancel bad debt mutations.
+  const { mutateAsync: createBadDebtMutate } = useCreateBadDebt();
+
+  // State provider.
+  const provider = {
+    accounts,
+    invoice,
+    invoiceId,
+    dialogName,
+    createBadDebtMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isAccountsLoading || isInvoiceLoading}>
+      <BadDebtContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useBadDebtContext = () => React.useContext(BadDebtContext);
+
+export { BadDebtFormProvider, useBadDebtContext };

packages/webapp/src/containers/Dialogs/BadDebtDialog/index.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from 'redux';
+
+const BadDebtDialogContent = React.lazy(() => import('./BadDebtDialogContent'));
+
+/**
+ * Bad debt dialog.
+ */
+function BadDebtDialog({ dialogName, payload: { invoiceId = null }, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'bad_debt.dialog.bad_debt'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--bad-debt'}
+    >
+      <DialogSuspense>
+        <BadDebtDialogContent dialogName={dialogName} invoice={invoiceId} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(BadDebtDialog);

packages/webapp/src/containers/Dialogs/BadDebtDialog/utils.tsx

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent } from '@blueprintjs/core';
+
+import { AppToaster } from '@/components';
+
+/**
+ * Transformes the response errors types.
+ */
+export const transformErrors = (errors, { setErrors }) => {
+  if (errors.some(({ type }) => type === 'SALE_INVOICE_ALREADY_WRITTEN_OFF')) {
+    AppToaster.show({
+      message: 'SALE_INVOICE_ALREADY_WRITTEN_OFF',
+      // message: intl.get(''),
+      intent: Intent.DANGER,
+    });
+  }
+};

packages/webapp/src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.tsx

@@ -0,0 +1,80 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import { useQuery, queryCache } from 'react-query';
+
+import ReferenceNumberForm from '@/containers/JournalNumber/ReferenceNumberForm';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withBillActions from '@/containers/Purchases/Bills/BillsLanding/withBillsActions';
+
+import { compose, optionsMapToArray } from '@/utils';
+
+/**
+ * bill number dialog's content.
+ */
+
+function BillNumberDialogContent({
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+
+  // #withSettingsActions
+  requestFetchOptions,
+  requestSubmitOptions,
+
+  // #withDialogActions
+  closeDialog,
+
+  // #withBillActions
+  setBillNumberChanged,
+}) {
+  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
+
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    const options = optionsMapToArray(values).map((option) => {
+      return { key: option.key, ...option, group: 'bills' };
+    });
+
+    requestSubmitOptions({ options })
+      .then(() => {
+        setSubmitting(false);
+        closeDialog('bill-number-form');
+        setBillNumberChanged(true);
+
+        setTimeout(() => {
+          queryCache.invalidateQueries('settings');
+        }, 250);
+      })
+      .catch(() => {
+        setSubmitting(false);
+      });
+  };
+
+  const handleClose = () => {
+    closeDialog('bill-number-form');
+  };
+
+  return (
+    <DialogContent isLoading={fetchSettings.isFetching}>
+      <ReferenceNumberForm
+        initialNumber={nextNumber}
+        initialPrefix={numberPrefix}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ billsettings }) => ({
+    nextNumber: billsettings?.next_number,
+    numberPrefix: billsettings?.number_prefix,
+  })),
+  withBillActions,
+)(BillNumberDialogContent);

packages/webapp/src/containers/Dialogs/BillNumberDialog/index.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from '@/components';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const BillNumberDialogContent = lazy(() => import('./BillNumberDialogContent'));
+
+function BillNumberDialog({ dialogName, payload = { id: null }, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'bill_number_settings'} />}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className={'dialog--journal-number-settings'}
+    >
+      <DialogSuspense>
+        <BillNumberDialogContent billNumberId={payload.id} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(BillNumberDialog);

packages/webapp/src/containers/Dialogs/BranchActivateDialog/BranchActivateDialogContent.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import React from 'react';
+
+import BranchActivateForm from './BranchActivateForm';
+import { BranchActivateFormProvider } from './BranchActivateFormProvider';
+
+export default function BranchActivateDialogContent({
+  // #ownProps
+  dialogName,
+}) {
+  return (
+    <BranchActivateFormProvider dialogName={dialogName}>
+      <BranchActivateForm />
+    </BranchActivateFormProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/BranchActivateDialog/BranchActivateForm.tsx

@@ -0,0 +1,65 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+
+import { AppToaster } from '@/components';
+import { useBranchActivateContext } from './BranchActivateFormProvider';
+import BranchActivateFormContent from './BranchActivateFormContent';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Branch activate form.
+ */
+function BranchActivateForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { activateBranches, dialogName } = useBranchActivateContext();
+
+  // Initial form values
+  const initialValues = {};
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...values,
+    };
+    setSubmitting(true);
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('branch_activate.dialog_success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+      }
+      setSubmitting(false);
+    };
+    activateBranches(form).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={BranchActivateFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(BranchActivateForm);

packages/webapp/src/containers/Dialogs/BranchActivateDialog/BranchActivateFormContent.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Form } from 'formik';
+import { Classes } from '@blueprintjs/core';
+import BranchActivateFormFloatingActions from './BranchActivateFormFloatingActions';
+
+/**
+ * Branch activate form content.
+ */
+export default function BranchActivateFormContent() {
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <p class="paragraph">
+          {intl.getHTML('branch_activate.dialog_paragraph')}
+        </p>
+
+        <ul class="paragraph list">
+          <li>{intl.get('branch_activate.dialog_paragraph.line_1')}</li>
+          <li>{intl.get('branch_activate.dialog_paragraph.line_2')}</li>
+        </ul>
+      </div>
+      <BranchActivateFormFloatingActions />
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/BranchActivateDialog/BranchActivateFormFloatingActions.tsx

@@ -0,0 +1,49 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from '@/components';
+
+import { useBranchActivateContext } from './BranchActivateFormProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+/**
+ * branch activate  form floating actions.
+ */
+function BranchActivateFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // branch activate dialog context.
+  const { dialogName } = useBranchActivateContext();
+
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '95px' }}
+          type="submit"
+        >
+          {<T id={'branches.activate_button'} />}
+          
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(BranchActivateFormFloatingActions);

packages/webapp/src/containers/Dialogs/BranchActivateDialog/BranchActivateFormProvider.tsx

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import React from 'react';
+
+import { DialogContent } from '@/components';
+import { useActivateBranches } from '@/hooks/query';
+
+const BranchActivateContext = React.createContext();
+
+/**
+ * Branch activate form provider.
+ */
+function BranchActivateFormProvider({ dialogName, ...props }) {
+  const { mutateAsync: activateBranches } = useActivateBranches();
+
+  // State provider.
+  const provider = {
+    activateBranches,
+    dialogName,
+  };
+
+  return (
+    <DialogContent>
+      <BranchActivateContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useBranchActivateContext = () => React.useContext(BranchActivateContext);
+
+export { BranchActivateFormProvider, useBranchActivateContext };

packages/webapp/src/containers/Dialogs/BranchActivateDialog/index.tsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+
+import { compose } from '@/utils';
+
+const BranchActivateDialogContent = React.lazy(
+  () => import('./BranchActivateDialogContent'),
+);
+
+/**
+ * Branch activate dialog.
+ */
+function BranchActivateDialog({ dialogName, payload: {}, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'branch_activate.dialog.label'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--branch-activate'}
+    >
+      <DialogSuspense>
+        <BranchActivateDialogContent dialogName={dialogName} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(BranchActivateDialog);

packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchForm.schema.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+
+const Schema = Yup.object().shape({
+  name: Yup.string().required().label(intl.get('branch_name')),
+  code: Yup.string().trim().min(0).max(DATATYPES_LENGTH.STRING),
+  address: Yup.string().trim(),
+  city: Yup.string().trim(),
+  country: Yup.string().trim(),
+  website: Yup.string().url().nullable(),
+  phone_number: Yup.number(),
+  email: Yup.string().email().nullable(),
+});
+
+export const CreateBranchFormSchema = Schema;

packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchForm.tsx

@@ -0,0 +1,83 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+
+import { AppToaster } from '@/components';
+import { CreateBranchFormSchema } from './BranchForm.schema';
+import { transformErrors } from './utils';
+
+import BranchFormContent from './BranchFormContent';
+import { useBranchFormContext } from './BranchFormProvider';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose, transformToForm } from '@/utils';
+
+const defaultInitialValues = {
+  name: '',
+  code: '',
+  address: '',
+  phone_number: '',
+  email: '',
+  website: '',
+  city: '',
+  country: '',
+};
+
+function BranchForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, branch, branchId, createBranchMutate, editBranchMutate } =
+    useBranchFormContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    ...transformToForm(branch, defaultInitialValues),
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = { ...values };
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('branch.dialog.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+      }
+      transformErrors(errors, { setErrors });
+      setSubmitting(false);
+    };
+
+    if (branchId) {
+      editBranchMutate([branchId, form]).then(onSuccess).catch(onError);
+    } else {
+      createBranchMutate(form).then(onSuccess).catch(onError);
+    }
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateBranchFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={BranchFormContent}
+    />
+  );
+}
+export default compose(withDialogActions)(BranchForm);

packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchFormContent.tsx

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import React from 'react';
+import { Form } from 'formik';
+
+import BranchFormFields from './BranchFormFields';
+import BranchFormFloatingActions from './BranchFormFloatingActions';
+
+/**
+ * Branch form content.
+ */
+export default function BranchFormContent() {
+  return (
+    <Form>
+      <BranchFormFields />
+      <BranchFormFloatingActions />
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchFormDialogContent.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/pages/Branches/BranchFormDialog.scss';
+
+import { BranchFormProvider } from './BranchFormProvider';
+import BranchForm from './BranchForm';
+
+/**
+ * Branch form dialog content.
+ */
+export default function BranchFormDialogContent({
+  // #ownProps
+  dialogName,
+  branchId,
+}) {
+  return (
+    <BranchFormProvider branchId={branchId} dialogName={dialogName}>
+      <BranchForm />
+    </BranchFormProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchFormFields.tsx

@@ -0,0 +1,152 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { FastField, ErrorMessage, Field } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  InputGroup,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { inputIntent } from '@/utils';
+import { FieldRequiredHint, FormattedMessage as T } from '@/components';
+
+/**
+ * Branch form dialog fields.
+ */
+function BranchFormFields() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Branch Name -----------*/}
+      <FastField name={'name'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'branch.dialog.label.branch_name'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            inline={true}
+            helperText={<ErrorMessage name="branch_name" />}
+            className={'form-group--branch_name'}
+          >
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ Branch Code -----------*/}
+      <FastField name={'code'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'branch.dialog.label.branch_code'} />}
+            intent={inputIntent({ error, touched })}
+            inline={true}
+            helperText={<ErrorMessage name="code" />}
+            className={'form-group--branch_name'}
+          >
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Branch Address  -----------*/}
+      <FastField name={'address'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={intl.get('branch.dialog.label.branch_address')}
+            intent={inputIntent({ error, touched })}
+            inline={true}
+            helperText={<ErrorMessage name="address" />}
+            className={'form-group--branch_address'}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              placeholder={intl.get('branch.dialog.label.address_1')}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      <BranchAddressWrap>
+        {/*------------ Branch Address City & Country-----------*/}
+        <FormGroup
+          inline={true}
+          className={'form-group--branch_address'}
+          helperText={<ErrorMessage name="branch_address_2" />}
+        >
+          <ControlGroup>
+            <FastField name={'city'}>
+              {({ field, meta: { error, touched } }) => (
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  placeholder={intl.get('branch.dialog.label.city')}
+                  {...field}
+                />
+              )}
+            </FastField>
+
+            <FastField name={'country'}>
+              {({ field, meta: { error, touched } }) => (
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  placeholder={intl.get('branch.dialog.label.country')}
+                  {...field}
+                />
+              )}
+            </FastField>
+          </ControlGroup>
+        </FormGroup>
+      </BranchAddressWrap>
+
+      {/*------------ Phone Number -----------*/}
+      <FastField name={'phone_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={intl.get('branch.dialog.label.phone_number')}
+            intent={inputIntent({ error, touched })}
+            inline={true}
+            helperText={<ErrorMessage name="phone_number" />}
+            className={'form-group--phone_number'}
+          >
+            <InputGroup placeholder={'https://'} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Email -----------*/}
+      <FastField name={'email'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={intl.get('branch.dialog.label.email')}
+            intent={inputIntent({ error, touched })}
+            inline={true}
+            helperText={<ErrorMessage name="email" />}
+            className={'form-group--email'}
+          >
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Website -----------*/}
+      <FastField name={'website'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={intl.get('branch.dialog.label.website')}
+            intent={inputIntent({ error, touched })}
+            inline={true}
+            helperText={<ErrorMessage name="email" />}
+            className={'form-group--website'}
+          >
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default BranchFormFields;
+
+const BranchAddressWrap = styled.div`
+  margin-left: 160px;
+`;

packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchFormFloatingActions.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from '@/components';
+
+import { useBranchFormContext } from './BranchFormProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+/**
+ * Branch form floating actions.
+ */
+function BranchFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useBranchFormContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '95px' }}
+          type="submit"
+        >
+          {<T id={'save'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+export default compose(withDialogActions)(BranchFormFloatingActions);

packages/webapp/src/containers/Dialogs/BranchFormDialog/BranchFormProvider.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import { useCreateBranch, useEditBranch, useBranch } from '@/hooks/query';
+
+const BranchFormContext = React.createContext();
+
+/**
+ * Branch form dialog provider.
+ */
+function BranchFormProvider({ dialogName, branchId, ...props }) {
+  // Create and edit warehouse mutations.
+  const { mutateAsync: createBranchMutate } = useCreateBranch();
+  const { mutateAsync: editBranchMutate } = useEditBranch();
+
+  // Handle fetch branch detail.
+  const { data: branch, isLoading: isBranchLoading } = useBranch(branchId, {
+    enabled: !!branchId,
+  });
+
+  // State provider.
+  const provider = {
+    dialogName,
+    branch,
+    branchId,
+    createBranchMutate,
+    editBranchMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isBranchLoading}>
+      <BranchFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+const useBranchFormContext = () => React.useContext(BranchFormContext);
+
+export { BranchFormProvider, useBranchFormContext };

packages/webapp/src/containers/Dialogs/BranchFormDialog/index.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+
+import { compose } from '@/utils';
+
+const BranchFormDialogContent = React.lazy(
+  () => import('./BranchFormDialogContent'),
+);
+
+/**
+ * Branch form form dialog.
+ */
+function BranchFormDialog({
+  dialogName,
+  payload: { branchId, action },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        action === 'edit' ? (
+          <T id={'branch.dialog.label_edit_branch'} />
+        ) : (
+          <T id={'branch.dialog.label_new_branch'} />
+        )
+      }
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--branch-form'}
+    >
+      <DialogSuspense>
+        <BranchFormDialogContent dialogName={dialogName} branchId={branchId} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(BranchFormDialog);

packages/webapp/src/containers/Dialogs/BranchFormDialog/utils.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+
+/**
+ * Transformes the response errors types.
+ */
+export const transformErrors = (errors, { setErrors }) => {
+  if (errors.find((error) => error.type === 'BRANCH_CODE_NOT_UNIQUE')) {
+    setErrors({
+      code: intl.get('branche.error.warehouse_code_not_unique'),
+    });
+  }
+};

packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateDialogContent.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+
+import ContactDuplicateForm from './ContactDuplicateForm';
+import { ContactDuplicateProvider } from './ContactDuplicateProvider';
+
+import '@/style/pages/ContactDuplicate/ContactDuplicateDialog.scss';
+
+export default function ContactDuplicateDialogContent({
+  // #ownProp
+  contact,
+  dialogName,
+}) {
+  return (
+    <ContactDuplicateProvider dialogName={dialogName} contactId={contact}>
+      <ContactDuplicateForm />
+    </ContactDuplicateProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx

@@ -0,0 +1,109 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import * as Yup from 'yup';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import { inputIntent } from '@/utils';
+import { ListSelect, FieldRequiredHint } from '@/components';
+import { Button, FormGroup, Intent, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+import { useHistory } from 'react-router-dom';
+import { useContactDuplicateFromContext } from './ContactDuplicateProvider';
+
+import Contacts from '@/constants/contactsOptions';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+function ContactDuplicateForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const history = useHistory();
+
+  const { dialogName, contactId } = useContactDuplicateFromContext();
+
+  const validationSchema = Yup.object().shape({
+    contact_type: Yup.string()
+      .required()
+      .label(intl.get('contact_type_')),
+  });
+
+  const initialValues = {
+    contact_type: '',
+  };
+
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    closeDialog(dialogName);
+  };
+
+  // Handle form submit.
+  const handleFormSubmit = (values) => {
+    closeDialog(dialogName);
+    history.push(`${values.contact_type}/new?duplicate=${contactId}`, {
+      action: contactId,
+    });
+  };
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      {({ isSubmitting }) => (
+        <Form>
+          <div className={Classes.DIALOG_BODY}>
+            <p class="paragraph">
+              <T id={'are_you_sure_want_to_duplicate'} />
+            </p>
+
+            {/*------------ Contact Type -----------*/}
+            <Field name={'contact_type'}>
+              {({ form, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'contact_type'} />}
+                  labelInfo={<FieldRequiredHint />}
+                  intent={inputIntent({ error, touched })}
+                  className={'form-group--select-list'}
+                  helperText={<ErrorMessage name="contact_type" />}
+                >
+                  <ListSelect
+                    items={Contacts}
+                    onItemSelect={({ path }) =>
+                      form.setFieldValue('contact_type', path)
+                    }
+                    defaultText={<T id={'select_contact'} />}
+                    textProp={'name'}
+                    selectedItemProp={'name'}
+                    filterable={false}
+                    popoverProps={{ minimal: true }}
+                  />
+                </FormGroup>
+              )}
+            </Field>
+          </div>
+
+          <div className={Classes.DIALOG_FOOTER}>
+            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+              <Button onClick={handleCancelClick}>
+                <T id={'cancel'} />
+              </Button>
+
+              <Button
+                intent={Intent.PRIMARY}
+                type="submit"
+                disabled={isSubmitting}
+              >
+                <T id={'duplicate'} />
+              </Button>
+            </div>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(ContactDuplicateForm);

packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateProvider.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+
+const ContactDuplicateContext = React.createContext();
+
+/**
+ *  contact duplicate provider.
+ */
+function ContactDuplicateProvider({ contactId, dialogName, ...props }) {
+  // Provider state.
+  const provider = {
+    dialogName,
+    contactId,
+  };
+
+  return (
+    <DialogContent name={'contact-duplicate'}>
+      <ContactDuplicateContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useContactDuplicateFromContext = () =>
+  React.useContext(ContactDuplicateContext);
+
+export { ContactDuplicateProvider, useContactDuplicateFromContext };

packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/index.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from '@/components';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const ContactDialogContent = lazy(() =>
+  import('./ContactDuplicateDialogContent'),
+);
+/**
+ * Contact duplicate dialog.
+ */
+function ContactDuplicateDialog({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'duplicate_contact'} />}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      className={'dialog--contact-duplicate'}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <ContactDialogContent
+          dialogName={dialogName}
+          contact={payload.contactId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(ContactDuplicateDialog);

packages/webapp/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.tsx

@@ -0,0 +1,103 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useSaveSettings } from '@/hooks/query';
+
+import { CreditNoteNumberDialogProvider } from './CreditNoteNumberDialogProvider';
+import ReferenceNumberForm from '@/containers/JournalNumber/ReferenceNumberForm';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import { compose } from '@/utils';
+import {
+  transformFormToSettings,
+  transformSettingsToForm,
+} from '@/containers/JournalNumber/utils';
+
+/**
+ * credit note number dialog content
+ */
+function CreditNoteNumberDialogContent({
+  // #ownProps
+  initialValues,
+  onConfirm,
+
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+  autoIncrement,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: saveSettings } = useSaveSettings();
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
+  // Handle the submit form.
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    // Handle the form success.
+    const handleSuccess = () => {
+      setSubmitting(false);
+      closeDialog('credit-number-form');
+      onConfirm(values);
+    };
+    // Handle the form errors.
+    const handleErrors = () => {
+      setSubmitting(false);
+    };
+    if (values.incrementMode === 'manual-transaction') {
+      handleSuccess();
+      return;
+    }
+    // Transformes the form values to settings to save it.
+    const options = transformFormToSettings(values, 'credit_note');
+
+    // Save the settings.
+    saveSettings({ options }).then(handleSuccess).catch(handleErrors);
+  };
+
+  // Handle the dialog close.
+  const handleClose = () => {
+    closeDialog('credit-number-form');
+  };
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('credit_note.auto_increment.auto')
+      : intl.get('credit_note.auto_increment.manually');
+
+  return (
+    <CreditNoteNumberDialogProvider>
+      <ReferenceNumberForm
+        initialValues={{
+          ...transformSettingsToForm({
+            nextNumber,
+            numberPrefix,
+            autoIncrement,
+          }),
+          ...initialValues,
+        }}
+        description={description}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+        onChange={handleChange}
+      />
+    </CreditNoteNumberDialogProvider>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ creditNoteSettings }) => ({
+    autoIncrement: creditNoteSettings?.autoIncrement,
+    nextNumber: creditNoteSettings?.nextNumber,
+    numberPrefix: creditNoteSettings?.numberPrefix,
+  })),
+)(CreditNoteNumberDialogContent);

packages/webapp/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogProvider.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import { useSettingsCreditNotes } from '@/hooks/query';
+
+const CreditNoteNumberDialogContext = React.createContext();
+
+/**
+ *Credit Note number dialog provider
+ */
+function CreditNoteNumberDialogProvider({ query, ...props }) {
+  const { isLoading: isSettingsLoading } = useSettingsCreditNotes();
+
+  // Provider payload.
+  const provider = {
+    isSettingsLoading,
+  };
+
+  return (
+    <DialogContent isLoading={isSettingsLoading}>
+      <CreditNoteNumberDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useCreditNoteNumberDialogContext = () =>
+  React.useContext(CreditNoteNumberDialogContext);
+
+export { CreditNoteNumberDialogProvider, useCreditNoteNumberDialogContext };

packages/webapp/src/containers/Dialogs/CreditNoteNumberDialog/index.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose, saveInvoke } from '@/utils';
+
+const CreditNoteNumberDialogContent = React.lazy(() =>
+  import('./CreditNoteNumberDialogContent'),
+);
+
+/**
+ * Credit note number dialog.
+ */
+function CreditNoteNumberDialog({
+  dialogName,
+  payload: { initialFormValues },
+  isOpen,
+  onConfirm,
+}) {
+  const handleConfirm = (values) => {
+    saveInvoke(onConfirm, values);
+  };
+
+  return (
+    <Dialog
+      title={<T id={'credit_note_number_settings'} />}
+      name={dialogName}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <CreditNoteNumberDialogContent
+          initialValues={{ ...initialFormValues }}
+          onConfirm={handleConfirm}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(CreditNoteNumberDialog);

packages/webapp/src/containers/Dialogs/CreditNotePdfPreviewDialog/CreditNotePdfPreviewDialogContent.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+import { AnchorButton } from '@blueprintjs/core';
+
+import { DialogContent, PdfDocumentPreview, T } from '@/components';
+import { usePdfCreditNote } from '@/hooks/query';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+function CreditNotePdfPreviewDialogContent({
+  subscriptionForm: { creditNoteId },
+}) {
+  const { isLoading, pdfUrl } = usePdfCreditNote(creditNoteId);
+  
+  return (
+    <DialogContent>
+      <div class="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'creditNote.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(withDialogActions)(CreditNotePdfPreviewDialogContent);

packages/webapp/src/containers/Dialogs/CreditNotePdfPreviewDialog/index.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+
+import { T, Dialog, DialogSuspense } from '@/components';
+
+import withDialogRedux from '@/components/DialogReduxConnect';
+
+import { CLASSES } from '@/constants/classes';
+import { compose } from '@/utils';
+
+const PdfPreviewDialogContent = React.lazy(() =>
+  import('./CreditNotePdfPreviewDialogContent'),
+);
+
+/**
+ * Credit note PDF previwe dialog.
+ */
+function CreditNotePdfPreviewDialog({
+  dialogName,
+  payload = { creditNoteId: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'credit_note_preview.dialog.title'} />}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <PdfPreviewDialogContent
+          dialogName={dialogName}
+          subscriptionForm={payload}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(CreditNotePdfPreviewDialog);

packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyForm.schema.tsx

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+
+const Schema = Yup.object().shape({
+  currency_name: Yup.string()
+    .required()
+    .label(intl.get('currency_name_')),
+  currency_code: Yup.string()
+    .max(4)
+    .required()
+    .label(intl.get('currency_code_')),
+  currency_sign: Yup.string().required(),
+});
+
+export const CreateCurrencyFormSchema = Schema;
+export const EditCurrencyFormSchema = Schema;

packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyForm.tsx

@@ -0,0 +1,105 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { AppToaster } from '@/components';
+import CurrencyFormContent from './CurrencyFormContent';
+
+import { useCurrencyFormContext } from './CurrencyFormProvider';
+import {
+  CreateCurrencyFormSchema,
+  EditCurrencyFormSchema,
+} from './CurrencyForm.schema';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+import { compose, transformToForm } from '@/utils';
+
+const defaultInitialValues = {
+  currency_name: '',
+  currency_code: '',
+  currency_sign: '',
+};
+
+/**
+ * Currency form.
+ */
+function CurrencyForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    createCurrencyMutate,
+    editCurrencyMutate,
+    dialogName,
+    currency,
+    isEditMode,
+  } = useCurrencyFormContext();
+
+  // Form validation schema in create and edit mode.
+  const validationSchema = isEditMode
+    ? EditCurrencyFormSchema
+    : CreateCurrencyFormSchema;
+
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      // ...(isEditMode && pick(currency, Object.keys(defaultInitialValues))),
+      ...transformToForm(currency, defaultInitialValues),
+    }),
+    [],
+  );
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+    // Handle the request success.
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: intl.get(
+          isEditMode
+            ? 'the_currency_has_been_edited_successfully'
+            : 'the_currency_has_been_created_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+    // Handle the response error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors.find((e) => e.type === 'CURRENCY_CODE_EXISTS')) {
+        AppToaster.show({
+          message: 'The given currency code is already exists.',
+          intent: Intent.DANGER,
+        });
+      }
+      setSubmitting(false);
+    };
+    if (isEditMode) {
+      editCurrencyMutate([currency.id, values]).then(onSuccess).catch(onError);
+    } else {
+      createCurrencyMutate(values).then(onSuccess).catch(onError);
+    }
+  };
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <CurrencyFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(CurrencyForm);

packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormContent.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import React from 'react';
+import { Form } from 'formik';
+
+import CurrencyFormFields from './CurrencyFormFields';
+import CurrencyFormFooter from './CurrencyFormFooter';
+
+export default function CurrencyFormContent() {
+  return (
+    <Form>
+      <CurrencyFormFields />
+      <CurrencyFormFooter />
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormDialogContent.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+import React from 'react';
+import { CurrencyFormProvider } from './CurrencyFormProvider';
+
+import CurrencyForm from './CurrencyForm';
+import withCurrencyDetail from '@/containers/Currencies/withCurrencyDetail';
+
+import { compose } from '@/utils';
+import '@/style/pages/Currency/CurrencyFormDialog.scss';
+
+function CurrencyFormDialogContent({
+  // #ownProp
+  action,
+  currencyCode,
+  dialogName,
+}) {
+  return (
+    <CurrencyFormProvider
+      isEditMode={action}
+      currency={currencyCode}
+      dialogName={dialogName}
+    >
+      <CurrencyForm />
+    </CurrencyFormProvider>
+  );
+}
+
+export default compose(withCurrencyDetail)(CurrencyFormDialogContent);

packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.tsx

@@ -0,0 +1,98 @@
+// @ts-nocheck
+import React from 'react';
+import { Classes, FormGroup, InputGroup } from '@blueprintjs/core';
+import { FastField } from 'formik';
+import { FormattedMessage as T } from '@/components';
+import classNames from 'classnames';
+
+import { CLASSES } from '@/constants/classes';
+import { useCurrencyFormContext } from './CurrencyFormProvider';
+import { ErrorMessage, FieldRequiredHint, ListSelect } from '@/components';
+
+import { useAutofocus } from '@/hooks';
+import { inputIntent, currenciesOptions } from '@/utils';
+
+/**
+ * Currency form fields.
+ */
+export default function CurrencyFormFields() {
+  const currencyNameFieldRef = useAutofocus();
+
+  const { isEditMode } = useCurrencyFormContext();
+
+  // Filter currency code
+  const filterCurrencyCode = (query, currency, _index, exactMatch) => {
+    const normalizedTitle = currency.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <FastField name={'currency_code'}>
+        {({
+          form: { setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'currency_code'} />}
+            className={classNames(CLASSES.FILL, 'form-group--type')}
+          >
+            <ListSelect
+              items={currenciesOptions}
+              selectedItemProp={'currency_code'}
+              selectedItem={value}
+              textProp={'formatted_name'}
+              defaultText={<T id={'select_currency_code'} />}
+              onItemSelect={(currency) => {
+                setFieldValue('currency_code', currency.currency_code);
+                setFieldValue('currency_name', currency.name);
+                setFieldValue('currency_sign', currency.symbol);
+              }}
+              itemPredicate={filterCurrencyCode}
+              disabled={isEditMode}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Currency name ----------- */}
+      <FastField name={'currency_name'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'currency_name'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--currency-name'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="currency_name" />}
+            // inline={true}
+          >
+            <InputGroup
+              inputRef={(ref) => (currencyNameFieldRef.current = ref)}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Currency Code ----------- */}
+      <FastField name={'currency_sign'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'currency_sign'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--currency-sign'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="currency_sign" />}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFooter.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { useCurrencyFormContext } from './CurrencyFormProvider';
+
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+/**
+ * Currency dialog form footer action.
+ */
+function CurrencyFormFooter({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName, isEditMode } = useCurrencyFormContext();
+
+  const handleClose = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleClose} disabled={isSubmitting}>
+          <T id={'cancel'} />
+        </Button>
+        <Button intent={Intent.PRIMARY} type="submit" loading={isSubmitting}>
+          {!isEditMode ? <T id={'submit'} /> : <T id={'edit'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(CurrencyFormFooter);

packages/webapp/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormProvider.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { useEditCurrency, useCreateCurrency } from '@/hooks/query';
+import { DialogContent } from '@/components';
+
+const CurrencyFormContext = createContext();
+
+/**
+ * Currency Form page provider.
+ */
+function CurrencyFormProvider({ isEditMode, currency, dialogName, ...props }) {
+  // Create and edit item currency mutations.
+  const { mutateAsync: createCurrencyMutate } = useCreateCurrency();
+  const { mutateAsync: editCurrencyMutate } = useEditCurrency();
+
+  // Provider state.
+  const provider = {
+    createCurrencyMutate,
+    editCurrencyMutate,
+    dialogName,
+    currency,
+    isEditMode,
+  };
+
+  return (
+    <DialogContent name={'currency-form'}>
+      <CurrencyFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useCurrencyFormContext = () => React.useContext(CurrencyFormContext);
+
+export { CurrencyFormProvider, useCurrencyFormContext };

packages/webapp/src/containers/Dialogs/CurrencyFormDialog/index.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from '@/components';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const CurrencyFormDialogContent = lazy(() =>
+  import('./CurrencyFormDialogContent'),
+);
+
+/**
+ * Currency form dialog.
+ */
+function CurrencyFormDialog({
+  dialogName,
+  payload = { action: '', id: null, currency: '' },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_currency'} />
+        ) : (
+          <T id={'new_currency'} />
+        )
+      }
+      className={'dialog--currency-form'}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      style={{ width: '400px' }}
+    >
+      <DialogSuspense>
+        <CurrencyFormDialogContent
+          dialogName={dialogName}
+          currencyCode={payload.currency}
+          action={payload.action}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(CurrencyFormDialog);

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceDialogContent.tsx

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/pages/CustomerOpeningBalance/CustomerOpeningBalance.scss';
+
+import CustomerOpeningBalanceForm from './CustomerOpeningBalanceForm';
+import { CustomerOpeningBalanceFormProvider } from './CustomerOpeningBalanceFormProvider';
+
+/**
+ * Customer opening balance dialog content.
+ * @returns
+ */
+export default function CustomerOpeningBalanceDialogContent({
+  // #ownProps
+  dialogName,
+  customerId,
+}) {
+  return (
+    <CustomerOpeningBalanceFormProvider
+      customerId={customerId}
+      dialogName={dialogName}
+    >
+      <CustomerOpeningBalanceForm />
+    </CustomerOpeningBalanceFormProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFields.tsx

@@ -0,0 +1,116 @@
+// @ts-nocheck
+import React from 'react';
+import { Classes, Position, FormGroup, ControlGroup } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { isEqual } from 'lodash';
+import { FastField, useFormikContext } from 'formik';
+import { momentFormatter, tansformDateValue, handleDateChange } from '@/utils';
+import { Features } from '@/constants';
+import classNames from 'classnames';
+
+import {
+  If,
+  Icon,
+  FormattedMessage as T,
+  ExchangeRateMutedField,
+  BranchSelect,
+  BranchSelectButton,
+  FeatureCan,
+  InputPrependText,
+} from '@/components';
+import { FMoneyInputGroup, FFormGroup } from '@/components/Forms';
+
+import { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormProvider';
+import { useSetPrimaryBranchToForm } from './utils';
+
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+import { compose } from '@/utils';
+
+/**
+ * Customer Opening balance fields.
+ * @returns
+ */
+function CustomerOpeningBalanceFields({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  // Formik context.
+  const { values } = useFormikContext();
+
+  const { branches, customer } = useCustomerOpeningBalanceContext();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Opening balance -----------*/}
+      <FFormGroup
+        name={'opening_balance'}
+        label={<T id={'customer_opening_balance.label.opening_balance'} />}
+      >
+        <ControlGroup>
+          <InputPrependText text={customer.currency_code} />
+          <FMoneyInputGroup
+            name={'opening_balance'}
+            allowDecimals={true}
+            allowNegativeValue={true}
+          />
+        </ControlGroup>
+      </FFormGroup>
+
+      {/*------------ Opening balance at -----------*/}
+      <FastField name={'opening_balance_at'}>
+        {({ form, field: { value } }) => (
+          <FormGroup
+            label={
+              <T id={'customer_opening_balance.label.opening_balance_at'} />
+            }
+            className={Classes.FILL}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('opening_balance_at', formattedDate);
+              })}
+              value={tansformDateValue(value)}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <If condition={!isEqual(base_currency, customer.currency_code)}>
+        {/*------------ Opening balance exchange rate -----------*/}
+        <ExchangeRateMutedField
+          name={'opening_balance_exchange_rate'}
+          fromCurrency={base_currency}
+          toCurrency={customer.currency_code}
+          formGroupProps={{ label: '', inline: false }}
+          date={values.opening_balance_at}
+          exchangeRate={values.opening_balance_exchange_rate}
+        />
+      </If>
+
+      {/*------------ Opening balance branch id -----------*/}
+      <FeatureCan feature={Features.Branches}>
+        <FFormGroup
+          label={<T id={'branch'} />}
+          name={'opening_balance_branch_id'}
+          className={classNames('form-group--select-list', Classes.FILL)}
+        >
+          <BranchSelect
+            name={'opening_balance_branch_id'}
+            branches={branches}
+            input={BranchSelectButton}
+            popoverProps={{ minimal: true }}
+          />
+        </FFormGroup>
+      </FeatureCan>
+    </div>
+  );
+}
+export default compose(withCurrentOrganization())(CustomerOpeningBalanceFields);

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceForm.schema.tsx

@@ -0,0 +1,11 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  opening_balance_branch_id: Yup.string(),
+  opening_balance: Yup.number().nullable(),
+  opening_balance_at: Yup.date(),
+  opening_balance_exchange_rate: Yup.number(),
+});
+
+export const CreateCustomerOpeningBalanceFormSchema = Schema;

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceForm.tsx

@@ -0,0 +1,84 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { defaultTo } from 'lodash';
+
+import { AppToaster } from '@/components';
+import { CreateCustomerOpeningBalanceFormSchema } from './CustomerOpeningBalanceForm.schema';
+import { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormProvider';
+
+import CustomerOpeningBalanceFormContent from './CustomerOpeningBalanceFormContent';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+import { compose } from '@/utils';
+
+const defaultInitialValues = {
+  opening_balance: '0',
+  opening_balance_branch_id: '',
+  opening_balance_exchange_rate: 1,
+  opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+};
+
+/**
+ * Customer Opening balance form.
+ * @returns
+ */
+function CustomerOpeningBalanceForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, customer, editCustomerOpeningBalanceMutate } =
+    useCustomerOpeningBalanceContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+    ...customer,
+    opening_balance: defaultTo(customer.opening_balance, ''),
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const formValues = {
+      ...values,
+    };
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('customer_opening_balance.success_message'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+      }
+      setSubmitting(false);
+    };
+
+    editCustomerOpeningBalanceMutate([customer.id, formValues])
+      .then(onSuccess)
+      .catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateCustomerOpeningBalanceFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={CustomerOpeningBalanceFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(CustomerOpeningBalanceForm);

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFormContent.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+import { Form } from 'formik';
+
+import CustomerOpeningBalanceFields from './CustomerOpeningBalanceFields';
+import CustomerOpeningBalanceFormFloatingActions from './CustomerOpeningBalanceFormFloatingActions';
+
+/**
+ * Customer Opening balance form content.
+ * @returns
+ */
+export default function CustomerOpeningBalanceFormContent() {
+  return (
+    <Form>
+      <CustomerOpeningBalanceFields />
+      <CustomerOpeningBalanceFormFloatingActions />
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFormFloatingActions.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from '@/components';
+
+import { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+
+/**
+ * Customer Opening balance floating actions.
+ * @returns
+ */
+function CustomerOpeningBalanceFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // dialog context.
+  const { dialogName } = useCustomerOpeningBalanceContext();
+
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'edit'} />}
+        </Button>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+export default compose(withDialogActions)(
+  CustomerOpeningBalanceFormFloatingActions,
+);

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFormProvider.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import {
+  useBranches,
+  useCustomer,
+  useEditCustomerOpeningBalance,
+} from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+import { transfromCustomertoForm } from './utils';
+
+const CustomerOpeningBalanceContext = React.createContext();
+
+/**
+ * Customer opening balance provider.
+ * @returns
+ */
+function CustomerOpeningBalanceFormProvider({
+  query,
+  customerId,
+  dialogName,
+  ...props
+}) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  const { mutateAsync: editCustomerOpeningBalanceMutate } =
+    useEditCustomerOpeningBalance();
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
+  // Handle fetch customer details.
+  const { data: customer, isLoading: isCustomerLoading } = useCustomer(
+    customerId,
+    { enabled: !!customerId },
+  );
+
+  // State provider.
+  const provider = {
+    branches,
+    customer: transfromCustomertoForm(customer),
+
+    isBranchesSuccess,
+    isBranchesLoading,
+    dialogName,
+    editCustomerOpeningBalanceMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isBranchesLoading || isCustomerLoading}>
+      <CustomerOpeningBalanceContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useCustomerOpeningBalanceContext = () =>
+  React.useContext(CustomerOpeningBalanceContext);
+
+export { CustomerOpeningBalanceFormProvider, useCustomerOpeningBalanceContext };

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/index.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React from 'react';
+
+import { FormattedMessage as T } from '@/components';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const CustomerOpeningBalanceDialogContent = React.lazy(() =>
+  import('./CustomerOpeningBalanceDialogContent'),
+);
+
+/**
+ * Customer opening balance dialog.
+ * @returns
+ */
+function CustomerOpeningBalanceDialog({
+  dialogName,
+  payload: { customerId },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'customer_opening_balance.label'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--customer-opening-balance'}
+    >
+      <DialogSuspense>
+        <CustomerOpeningBalanceDialogContent
+          customerId={customerId}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(CustomerOpeningBalanceDialog);

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/utils.tsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { first, pick } from 'lodash';
+
+import { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormProvider';
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useCustomerOpeningBalanceContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('opening_balance_branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};
+
+export function transfromCustomertoForm(values) {
+  return {
+    ...pick(values, [
+      'id',
+      'opening_balance',
+      'opening_balance_exchange_rate',
+      'currency_code',
+    ]),
+  };
+}

packages/webapp/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.tsx

@@ -0,0 +1,104 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+
+import { DialogContent } from '@/components';
+import { useSaveSettings, useSettingsEstimates } from '@/hooks/query';
+
+import ReferenceNumberForm from '@/containers/JournalNumber/ReferenceNumberForm';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+import { compose, saveInvoke } from '@/utils';
+import {
+  transformFormToSettings,
+  transformSettingsToForm,
+} from '@/containers/JournalNumber/utils';
+
+/**
+ * Estimate number dialog's content.
+ */
+function EstimateNumberDialogContent({
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+  autoIncrement,
+
+  // #withDialogActions
+  closeDialog,
+
+  // #ownProps
+  initialValues,
+  onConfirm,
+}) {
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
+  // Fetches the estimates settings.
+  const { isLoading: isSettingsLoading } = useSettingsEstimates();
+
+  // Mutates the settings.
+  const { mutateAsync: saveSettingsMutate } = useSaveSettings();
+
+  // Handle the submit form.
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    // Transformes the form values to settings to save it.
+    const options = transformFormToSettings(values, 'sales_estimates');
+
+    const handleSuccess = () => {
+      setSubmitting(false);
+      closeDialog('estimate-number-form');
+      saveInvoke(onConfirm, values);
+    };
+    const handleErrors = () => {
+      setSubmitting(false);
+    };
+    if (values.incrementMode === 'manual-transaction') {
+      handleSuccess();
+      return;
+    }
+    saveSettingsMutate({ options }).then(handleSuccess).catch(handleErrors);
+  };
+
+  const handleClose = useCallback(() => {
+    closeDialog('estimate-number-form');
+  }, [closeDialog]);
+
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('estimate.auto_increment.auto')
+      : intl.get('estimate.auto_increment.manually');
+
+  return (
+    <DialogContent isLoading={isSettingsLoading}>
+      <ReferenceNumberForm
+        initialValues={{
+          ...transformSettingsToForm({
+            nextNumber,
+            numberPrefix,
+            autoIncrement,
+          }),
+          ...initialValues,
+        }}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+        onChange={handleChange}
+        description={description}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettings(({ estimatesSettings }) => ({
+    nextNumber: estimatesSettings?.nextNumber,
+    numberPrefix: estimatesSettings?.numberPrefix,
+    autoIncrement: estimatesSettings?.autoIncrement,
+  })),
+)(EstimateNumberDialogContent);

packages/webapp/src/containers/Dialogs/EstimateNumberDialog/index.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { saveInvoke, compose } from '@/utils';
+
+const EstimateNumberDialogContent = lazy(
+  () => import('./EstimateNumberDialogContent'),
+);
+
+/**
+ * Estimate number dialog.
+ */
+function EstimateNumberDialog({
+  dialogName,
+  payload: { initialFormValues },
+  isOpen,
+  onConfirm,
+}) {
+  const handleConfirm = (values) => {
+    saveInvoke(onConfirm, values);
+  };
+
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'Estimate_number_settings'} />}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className={'dialog--journal-number-settings'}
+    >
+      <DialogSuspense>
+        <EstimateNumberDialogContent
+          initialValues={{ ...initialFormValues }}
+          onConfirm={handleConfirm}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(EstimateNumberDialog);

packages/webapp/src/containers/Dialogs/EstimatePdfPreviewDialog/EstimatePdfPreviewDialogContent.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React from 'react';
+import { AnchorButton } from '@blueprintjs/core';
+
+import { DialogContent, PdfDocumentPreview, T } from '@/components';
+import { usePdfEstimate } from '@/hooks/query';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+function EstimatePdfPreviewDialogContent({
+  subscriptionForm: { estimateId },
+  dialogName,
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isLoading, pdfUrl } = usePdfEstimate(estimateId);
+
+  return (
+    <DialogContent>
+      <div class="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'estimate.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(withDialogActions)(EstimatePdfPreviewDialogContent);

packages/webapp/src/containers/Dialogs/EstimatePdfPreviewDialog/index.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+
+import { T, Dialog, DialogSuspense } from '@/components';
+import { CLASSES } from '@/constants/classes';
+
+import withDialogRedux from '@/components/DialogReduxConnect';
+
+import { compose } from '@/utils';
+
+// Lazy loading the content.
+const PdfPreviewDialogContent = React.lazy(() =>
+  import('./EstimatePdfPreviewDialogContent'),
+);
+
+/**
+ * Estimate PDF preview dialog.
+ */
+function EstimatePdfPreviewDialog({
+  dialogName,
+  payload = { estimateId: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'estimate_preview.dialog.title'} />}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <PdfPreviewDialogContent
+          dialogName={dialogName}
+          subscriptionForm={payload}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(EstimatePdfPreviewDialog);

packages/webapp/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateForm.schema.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+
+const Schema = Yup.object().shape({
+  exchange_rate: Yup.number()
+    .required()
+    .label(intl.get('exchange_rate_')),
+  currency_code: Yup.string()
+    .max(3)
+    .required(intl.get('currency_code_')),
+  date: Yup.date()
+    .required()
+    .label(intl.get('date')),
+});
+
+export const CreateExchangeRateFormSchema = Schema;
+export const EditExchangeRateFormSchema = Schema;

packages/webapp/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateForm.tsx

@@ -0,0 +1,114 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { AppToaster } from '@/components';
+import {
+  CreateExchangeRateFormSchema,
+  EditExchangeRateFormSchema,
+} from './ExchangeRateForm.schema';
+import ExchangeRateFormContent from './ExchangeRateFormContent';
+import { useExchangeRateFromContext } from './ExchangeRateFormProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+import { compose, transformToForm } from '@/utils';
+
+const defaultInitialValues = {
+  exchange_rate: '',
+  currency_code: '',
+  date: moment(new Date()).format('YYYY-MM-DD'),
+};
+
+/**
+ * Exchange rate form.
+ */
+function ExchangeRateForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    createExchangeRateMutate,
+    editExchangeRateMutate,
+    isNewMode,
+    dialogName,
+    exchangeRate,
+  } = useExchangeRateFromContext();
+
+  // Form validation schema in create and edit mode.
+  const validationSchema = isNewMode
+    ? CreateExchangeRateFormSchema
+    : EditExchangeRateFormSchema;
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      ...transformToForm(exchangeRate, defaultInitialValues),
+    }),
+    [],
+  );
+
+  // Transformers response errors.
+  const transformErrors = (errors, { setErrors }) => {
+    if (
+      errors.find((error) => error.type === 'EXCHANGE.RATE.DATE.PERIOD.DEFINED')
+    ) {
+      setErrors({
+        exchange_rate: intl.get(
+          'there_is_exchange_rate_in_this_date_with_the_same_currency',
+        ),
+      });
+    }
+  };
+
+  // Handle the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: intl.get(
+          !isNewMode
+            ? 'the_exchange_rate_has_been_edited_successfully'
+            : 'the_exchange_rate_has_been_created_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+    // Handle the response error.
+    const onError = (error) => {
+      const {
+        response: {
+          data: { errors },
+        },
+      } = error;
+
+      transformErrors(errors, { setErrors });
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createExchangeRateMutate(values).then(onSuccess).catch(onError);
+    } else {
+      editExchangeRateMutate([exchangeRate.id, values])
+        .then(onSuccess)
+        .catch(onError);
+    }
+  };
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <ExchangeRateFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(ExchangeRateForm);

packages/webapp/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormContent.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import React from 'react';
+import { Form } from 'formik';
+import ExchangeRateFormFields from './ExchangeRateFormFields';
+import ExchangeRateFormFooter from './ExchangeRateFormFooter';
+
+export default function ExchangeRateFormContent() {
+  return (
+    <Form>
+      <ExchangeRateFormFields />
+      <ExchangeRateFormFooter />
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormDialogContent.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+
+import ExchangeRateForm from './ExchangeRateForm';
+import { ExchangeRateFormProvider } from './ExchangeRateFormProvider';
+
+import '@/style/pages/ExchangeRate/ExchangeRateDialog.scss';
+
+/**
+ * Exchange rate form content.
+ */
+export default function ExchangeRateFormDialogContent({
+  // #ownProp
+  action,
+  exchangeRateId,
+  dialogName,
+}) {
+  return (
+    <ExchangeRateFormProvider
+      dialogName={dialogName}
+      exchangeRate={exchangeRateId}
+      action={action}
+    >
+      <ExchangeRateForm />
+    </ExchangeRateFormProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormFields.tsx

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import React from 'react';
+import { Classes, FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import { FastField } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from '@/components';
+import classNames from 'classnames';
+import {
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+  inputIntent,
+} from '@/utils';
+import {
+  ErrorMessage,
+  FieldRequiredHint,
+  CurrencySelectList,
+} from '@/components';
+import { useExchangeRateFromContext } from './ExchangeRateFormProvider';
+
+
+export default function ExchangeRateFormFields() {
+  const { action, currencies } = useExchangeRateFromContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/* ----------- Date ----------- */}
+      <FastField name={'date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'date'} />}
+            labelInfo={FieldRequiredHint}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="date" />}
+            inline={true}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              disabled={action === 'edit'}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Currency Code ----------- */}
+      <FastField name={'currency_code'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'currency_code'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--currency', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="currency_code" />}
+            inline={true}
+          >
+            <CurrencySelectList
+              currenciesList={currencies}
+              selectedCurrencyCode={value}
+              onCurrencySelected={({ currency_code }) => {
+                form.setFieldValue('currency_code', currency_code);
+              }}
+              disabled={action === 'edit'}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Exchange Rate  -----------*/}
+      <FastField name={'exchange_rate'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'exchange_rate'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="exchange_rate" />}
+            inline={true}
+          >
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

packages/webapp/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormFooter.tsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+import { useExchangeRateFromContext } from './ExchangeRateFormProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+function ExchangeRateFormFooter({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+  const { dialogName, action } = useExchangeRateFromContext();
+
+  const handleClose = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleClose}>
+          <T id={'close'} />
+        </Button>
+        <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
+          {action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(ExchangeRateFormFooter);

packages/webapp/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormProvider.tsx

@@ -0,0 +1,53 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import {
+  useCreateExchangeRate,
+  useEdiExchangeRate,
+  useCurrencies,
+  useExchangeRates,
+} from '@/hooks/query';
+import { DialogContent } from '@/components';
+
+const ExchangeRateFormContext = createContext();
+
+/**
+ * Exchange rate Form page provider.
+ */
+function ExchangeRateFormProvider({
+  exchangeRate,
+  action,
+  dialogName,
+  ...props
+}) {
+  // Create and edit  exchange rate mutations.
+  const { mutateAsync: createExchangeRateMutate } = useCreateExchangeRate();
+  const { mutateAsync: editExchangeRateMutate } = useEdiExchangeRate();
+
+  // Load Currencies list.
+  const { data: currencies, isFetching: isCurrenciesLoading } = useCurrencies();
+  const { isFetching: isExchangeRatesLoading } = useExchangeRates();
+
+  const isNewMode = !exchangeRate;
+
+  // Provider state.
+  const provider = {
+    createExchangeRateMutate,
+    editExchangeRateMutate,
+    dialogName,
+    exchangeRate,
+    action,
+    currencies,
+    isExchangeRatesLoading,
+    isNewMode,
+  };
+
+  return (
+    <DialogContent isLoading={isCurrenciesLoading} name={'exchange-rate-form'}>
+      <ExchangeRateFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useExchangeRateFromContext = () => useContext(ExchangeRateFormContext);
+
+export { ExchangeRateFormProvider, useExchangeRateFromContext };

packages/webapp/src/containers/Dialogs/ExchangeRateFormDialog/index.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const ExchangeRateFormDialogContent = lazy(
+  () => import('./ExchangeRateFormDialogContent'),
+);
+
+/**
+ * Exchange rate form dialog.
+ */
+function ExchangeRateFormDialog({
+  dialogName,
+  payload = { action: '', id: null, exchangeRate: '' },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_exchange_rate'} />
+        ) : (
+          <T id={'new_exchange_rate'} />
+        )
+      }
+      className={'dialog--exchangeRate-form'}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+    >
+      <DialogSuspense>
+        <ExchangeRateFormDialogContent
+          dialogName={dialogName}
+          action={payload.action}
+          exchangeRateId={payload.exchangeRate}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(ExchangeRateFormDialog);

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.tsx

@@ -0,0 +1,122 @@
+// @ts-nocheck
+import React from 'react';
+import { Field, ErrorMessage, FastField } from 'formik';
+import { FormGroup, InputGroup } from '@blueprintjs/core';
+import { inputIntent, toSafeNumber } from '@/utils';
+import { Row, Col, MoneyInputGroup, FormattedMessage as T } from '@/components';
+import { useAutofocus } from '@/hooks';
+import { decrementQuantity } from './utils';
+
+/**
+ * Decrement adjustment fields.
+ */
+function DecrementAdjustmentFields() {
+  const decrementFieldRef = useAutofocus();
+
+  return (
+    <Row className={'row--decrement-fields'}>
+      {/*------------ Quantity on hand  -----------*/}
+      <Col className={'col--quantity-on-hand'}>
+        <FastField name={'quantity_on_hand'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'qty_on_hand'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="quantity_on_hand" />}
+            >
+              <InputGroup
+                disabled={true}
+                medium={'true'}
+                intent={inputIntent({ error, touched })}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </Col>
+
+      <Col className={'col--sign'}>
+        <span>–</span>
+      </Col>
+
+      {/*------------ Decrement -----------*/}
+      <Col className={'col--decrement'}>
+        <Field name={'quantity'}>
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'decrement'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="quantity" />}
+              fill={true}
+            >
+              <MoneyInputGroup
+                value={field.value}
+                allowDecimals={false}
+                allowNegativeValue={true}
+                inputRef={(ref) => (decrementFieldRef.current = ref)}
+                onChange={(value) => {
+                  setFieldValue('quantity', value);
+                }}
+                onBlurValue={(value) => {
+                  setFieldValue(
+                    'new_quantity',
+                    decrementQuantity(
+                      toSafeNumber(value),
+                      toSafeNumber(values.quantity_on_hand),
+                    ),
+                  );
+                }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </Field>
+      </Col>
+
+      <Col className={'col--sign'}>
+        <span>=</span>
+      </Col>
+      {/*------------ New quantity -----------*/}
+      <Col className={'col--quantity'}>
+        <Field name={'new_quantity'}>
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'new_quantity'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="new_quantity" />}
+            >
+              <MoneyInputGroup
+                value={field.value}
+                allowDecimals={false}
+                allowNegativeValue={true}
+                onChange={(value) => {
+                  setFieldValue('new_quantity', value);
+                }}
+                onBlurValue={(value) => {
+                  setFieldValue(
+                    'quantity',
+                    decrementQuantity(
+                      toSafeNumber(value),
+                      toSafeNumber(values.quantity_on_hand),
+                    ),
+                  );
+                }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </Field>
+      </Col>
+    </Row>
+  );
+}
+
+export default DecrementAdjustmentFields;

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.tsx

@@ -0,0 +1,145 @@
+// @ts-nocheck
+import React from 'react';
+import { Field, FastField, ErrorMessage } from 'formik';
+import { FormGroup, InputGroup } from '@blueprintjs/core';
+import { useAutofocus } from '@/hooks';
+import { Row, Col, MoneyInputGroup, FormattedMessage as T } from '@/components';
+import { inputIntent, toSafeNumber } from '@/utils';
+import { decrementQuantity, incrementQuantity } from './utils';
+
+export default function IncrementAdjustmentFields() {
+  const incrementFieldRef = useAutofocus();
+
+  return (
+    <Row>
+      {/*------------ Quantity on hand  -----------*/}
+      <Col className={'col--quantity-on-hand'}>
+        <FastField name={'quantity_on_hand'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'qty_on_hand'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="quantity_on_hand" />}
+            >
+              <InputGroup
+                disabled={true}
+                medium={'true'}
+                intent={inputIntent({ error, touched })}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </Col>
+
+      {/*------------ Sign -----------*/}
+      <Col className={'col--sign'}>
+        <span>+</span>
+      </Col>
+
+      {/*------------ Increment -----------*/}
+      <Col className={'col--quantity'}>
+        <Field name={'quantity'}>
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'increment'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="quantity" />}
+              fill={true}
+            >
+              <MoneyInputGroup
+                value={field.value}
+                allowDecimals={false}
+                allowNegativeValue={true}
+                inputRef={(ref) => (incrementFieldRef.current = ref)}
+                onChange={(value) => {
+                  setFieldValue('quantity', value);
+                }}
+                onBlurValue={(value) => {
+                  setFieldValue(
+                    'new_quantity',
+                    incrementQuantity(
+                      toSafeNumber(value),
+                      toSafeNumber(values.quantity_on_hand),
+                    ),
+                  );
+                }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </Field>
+      </Col>
+
+      {/*------------ Cost -----------*/}
+      <Col className={'col--cost'}>
+        <FastField name={'cost'}>
+          {({
+            form: { setFieldValue },
+            field: { value },
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'cost'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="cost" />}
+            >
+              <MoneyInputGroup
+                value={value}
+                onChange={(value) => {
+                  setFieldValue('cost', value);
+                }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </Col>
+
+      {/*------------ Sign -----------*/}
+      <Col className={'col--sign'}>
+        <span>=</span>
+      </Col>
+
+      {/*------------ New quantity -----------*/}
+      <Col className={'col--quantity-on-hand'}>
+        <Field name={'new_quantity'}>
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'new_quantity'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="new_quantity" />}
+            >
+              <MoneyInputGroup
+                value={field.value}
+                allowDecimals={false}
+                allowNegativeValue={true}
+                onChange={(value) => {
+                  setFieldValue('new_quantity', value);
+                }}
+                onBlurValue={(value) => {
+                  setFieldValue(
+                    'quantity',
+                    decrementQuantity(
+                      toSafeNumber(value),
+                      toSafeNumber(values.quantity_on_hand),
+                    ),
+                  );
+                }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </Field>
+      </Col>
+    </Row>
+  );
+}

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFloatingActions.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from '@/components';
+
+import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+/**
+ * Inventory adjustment floating actions.
+ */
+function InventoryAdjustmentFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting, submitForm } = useFormikContext();
+
+  // Inventory adjustment dialog context.
+  const { dialogName, setSubmitPayload, submitPayload } =
+    useInventoryAdjContext();
+
+  // handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ publish: false });
+    submitForm();
+  };
+
+  // Handle submit make adjustment button click.
+  const handleSubmitMakeAdjustmentBtnClick = (event) => {
+    setSubmitPayload({ publish: true });
+    submitForm();
+  };
+
+  // Handle close button click.
+  const handleCloseBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          disabled={isSubmitting}
+          onClick={handleCloseBtnClick}
+          style={{ minWidth: '75px' }}
+        >
+          <T id={'close'} />
+        </Button>
+
+        <Button
+          loading={isSubmitting && !submitPayload.publish}
+          style={{ minWidth: '75px' }}
+          type="submit"
+          onClick={handleSubmitDraftBtnClick}
+        >
+          {<T id={'save_as_draft'} />}
+        </Button>
+
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting && submitPayload.publish}
+          style={{ minWidth: '75px' }}
+          type="submit"
+          onClick={handleSubmitMakeAdjustmentBtnClick}
+        >
+          {<T id={'make_adjustment'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(InventoryAdjustmentFloatingActions);

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.tsx

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+
+const Schema = Yup.object().shape({
+  date: Yup.date().required().label(intl.get('date')),
+  type: Yup.string().required(),
+  adjustment_account_id: Yup.string()
+    .required()
+    .label(intl.get('adjustment_account')),
+  item_id: Yup.number().required(),
+  reason: Yup.string()
+    .required()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('reason')),
+  quantity_on_hand: Yup.number().required().label(intl.get('qty')),
+  quantity: Yup.number().integer().min(1).required(),
+  cost: Yup.number().when(['type'], {
+    is: (type) => type === 'increment',
+    then: Yup.number().required(),
+  }),
+  reference_no: Yup.string(),
+  new_quantity: Yup.number().required(),
+  publish: Yup.boolean(),
+  branch_id: Yup.string(),
+  warehouse_id: Yup.string(),
+});
+
+export const CreateInventoryAdjustmentFormSchema = Schema;

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.tsx

@@ -0,0 +1,86 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { omit, get } from 'lodash';
+
+import '@/style/pages/Items/ItemAdjustmentDialog.scss';
+
+import { AppToaster } from '@/components';
+import { CreateInventoryAdjustmentFormSchema } from './InventoryAdjustmentForm.schema';
+
+import InventoryAdjustmentFormContent from './InventoryAdjustmentFormContent';
+import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+const defaultInitialValues = {
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  type: 'decrement',
+  adjustment_account_id: '',
+  item_id: '',
+  reason: '',
+  cost: '',
+  quantity: '',
+  reference_no: '',
+  quantity_on_hand: '',
+  publish: '',
+  branch_id: '',
+  warehouse_id: '',
+};
+
+/**
+ * Inventory adjustment form.
+ */
+function InventoryAdjustmentForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, item, itemId, submitPayload, createInventoryAdjMutate } =
+    useInventoryAdjContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    item_id: itemId,
+    quantity_on_hand: get(item, 'quantity_on_hand', 0),
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...omit(values, ['quantity_on_hand', 'new_quantity', 'action']),
+      publish: submitPayload.publish,
+    };
+    setSubmitting(true);
+    createInventoryAdjMutate(form)
+      .then(() => {
+        closeDialog(dialogName);
+
+        AppToaster.show({
+          message: intl.get(
+            'the_adjustment_transaction_has_been_created_successfully',
+          ),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .finally(() => {
+        setSubmitting(true);
+      });
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateInventoryAdjustmentFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <InventoryAdjustmentFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(InventoryAdjustmentForm);

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormContent.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import React from 'react';
+import { Form } from 'formik';
+import InventoryAdjustmentFormDialogFields from './InventoryAdjustmentFormDialogFields';
+import InventoryAdjustmentFloatingActions from './InventoryAdjustmentFloatingActions';
+
+/**
+ * Inventory adjustment form content.
+ */
+export default function InventoryAdjustmentFormContent() {
+  return (
+    <Form>
+      <InventoryAdjustmentFormDialogFields />
+      <InventoryAdjustmentFloatingActions />
+    </Form>
+  );
+}

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+ 
+import '@/style/pages/Items/ItemAdjustmentDialog.scss';
+ 
+import { InventoryAdjustmentFormProvider } from './InventoryAdjustmentFormProvider';
+import InventoryAdjustmentForm from './InventoryAdjustmentForm';
+
+/**
+ * Inventory adjustment form dialog content.
+ */
+export default function InventoryAdjustmentFormDialogContent({
+  // #ownProps
+  dialogName,
+  itemId
+}) {
+  return (
+    <InventoryAdjustmentFormProvider itemId={itemId} dialogName={dialogName}>
+      <InventoryAdjustmentForm />
+    </InventoryAdjustmentFormProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx

@@ -0,0 +1,242 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import { FastField, ErrorMessage, Field } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+import { DateInput } from '@blueprintjs/datetime';
+import { useAutofocus } from '@/hooks';
+import {
+  ListSelect,
+  FieldRequiredHint,
+  Col,
+  Row,
+  FeatureCan,
+  BranchSelect,
+  WarehouseSelect,
+  BranchSelectButton,
+  WarehouseSelectButton,
+  AccountsSuggestField,
+} from '@/components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+  toSafeNumber,
+} from '@/utils';
+import { Features, CLASSES } from '@/constants';
+import adjustmentType from '@/constants/adjustmentType';
+
+import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
+import {
+  diffQuantity,
+  useSetPrimaryBranchToForm,
+  useSetPrimaryWarehouseToForm,
+} from './utils';
+import { useFeatureCan } from '@/hooks/state';
+import InventoryAdjustmentQuantityFields from './InventoryAdjustmentQuantityFields';
+
+/**
+ * Inventory adjustment form dialogs fields.
+ */
+export default function InventoryAdjustmentFormDialogFields() {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  const dateFieldRef = useAutofocus();
+
+  // Inventory adjustment dialog context.
+  const { accounts, branches, warehouses } = useInventoryAdjContext();
+
+  // Sets the primary warehouse to form.
+  useSetPrimaryWarehouseToForm();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Row>
+        <FeatureCan feature={Features.Branches}>
+          <Col xs={5}>
+            <FormGroup
+              label={<T id={'branch'} />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
+              <BranchSelect
+                name={'branch_id'}
+                branches={branches}
+                input={BranchSelectButton}
+                popoverProps={{ minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </FeatureCan>
+        <FeatureCan feature={Features.Warehouses}>
+          <Col xs={5}>
+            <FormGroup
+              label={<T id={'warehouse'} />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
+              <WarehouseSelect
+                name={'warehouse_id'}
+                warehouses={warehouses}
+                input={WarehouseSelectButton}
+                popoverProps={{ minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </FeatureCan>
+      </Row>
+
+      {featureCan(Features.Warehouses) && featureCan(Features.Branches) && (
+        <FeatureRowDivider />
+      )}
+
+      <Row>
+        <Col xs={5}>
+          {/*------------ Date -----------*/}
+          <FastField name={'date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'date'} />}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="date" />}
+                minimal={true}
+                className={classNames(CLASSES.FILL, 'form-group--date')}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('date', formattedDate);
+                  })}
+                  value={tansformDateValue(value)}
+                  popoverProps={{
+                    position: Position.BOTTOM,
+                    minimal: true,
+                  }}
+                  intent={inputIntent({ error, touched })}
+                  inputRef={(ref) => (dateFieldRef.current = ref)}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+
+        <Col xs={5}>
+          {/*------------ Adjustment type -----------*/}
+          <Field name={'type'}>
+            {({
+              form: { values, setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'adjustment_type'} />}
+                labelInfo={<FieldRequiredHint />}
+                helperText={<ErrorMessage name="type" />}
+                intent={inputIntent({ error, touched })}
+                className={classNames(CLASSES.FILL, 'form-group--type')}
+              >
+                <ListSelect
+                  items={adjustmentType}
+                  onItemSelect={(type) => {
+                    const result = diffQuantity(
+                      toSafeNumber(values.quantity),
+                      toSafeNumber(values.quantity_on_hand),
+                      type.value,
+                    );
+                    setFieldValue('type', type.value);
+                    setFieldValue('new_quantity', result);
+                  }}
+                  filterable={false}
+                  selectedItem={value}
+                  selectedItemProp={'value'}
+                  textProp={'name'}
+                  popoverProps={{ minimal: true }}
+                  intent={inputIntent({ error, touched })}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+
+      <InventoryAdjustmentQuantityFields />
+
+      {/*------------ Adjustment account -----------*/}
+      <FastField name={'adjustment_account_id'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'adjustment_account'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="adjustment_account_id" />}
+            className={'form-group--adjustment-account'}
+          >
+            <AccountsSuggestField
+              accounts={accounts}
+              onAccountSelected={({ id }) =>
+                form.setFieldValue('adjustment_account_id', id)
+              }
+              inputProps={{
+                placeholder: intl.get('select_adjustment_account'),
+                intent: inputIntent({ error, touched }),
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Reference -----------*/}
+      <FastField name={'reference_no'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference_no'} />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference_no" />}
+            className={'form-group--reference-no'}
+          >
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Adjustment reasons -----------*/}
+      <FastField name={'reason'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'adjustment_reasons'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--adjustment-reasons'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'reason'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export const FeatureRowDivider = styled.div`
+  height: 2px;
+  background: #e9e9e9;
+  margin-bottom: 15px;
+`;

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormProvider.tsx

@@ -0,0 +1,87 @@
+// @ts-nocheck
+import React, { useState, createContext } from 'react';
+import { DialogContent } from '@/components';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import {
+  useItem,
+  useAccounts,
+  useBranches,
+  useWarehouses,
+  useCreateInventoryAdjustment,
+} from '@/hooks/query';
+
+const InventoryAdjustmentContext = createContext();
+
+/**
+ * Inventory adjustment dialog provider.
+ */
+function InventoryAdjustmentFormProvider({ itemId, dialogName, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isWarehouseFeatureCan = featureCan(Features.Warehouses);
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  // Fetches accounts list.
+  const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
+
+  // Fetches the item details.
+  const { isFetching: isItemLoading, data: item } = useItem(itemId);
+
+  // Fetch warehouses list.
+  const {
+    data: warehouses,
+    isLoading: isWarehouesLoading,
+    isSuccess: isWarehousesSuccess,
+  } = useWarehouses({}, { enabled: isWarehouseFeatureCan });
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches({}, { enabled: isBranchFeatureCan });
+
+  const { mutateAsync: createInventoryAdjMutate } =
+    useCreateInventoryAdjustment();
+
+  // Submit payload.
+  const [submitPayload, setSubmitPayload] = useState({});
+
+  // Determines whether the warehouse and branches are loading.
+  const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
+
+  // State provider.
+  const provider = {
+    item,
+    itemId,
+    branches,
+    warehouses,
+    accounts,
+
+    dialogName,
+    submitPayload,
+
+    isBranchesSuccess,
+    isWarehousesSuccess,
+    isAccountsLoading,
+    isItemLoading,
+    isFeatureLoading,
+    isWarehouesLoading,
+    isBranchesLoading,
+
+    createInventoryAdjMutate,
+    setSubmitPayload,
+  };
+
+  return (
+    <DialogContent isLoading={isAccountsLoading || isItemLoading}>
+      <InventoryAdjustmentContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useInventoryAdjContext = () =>
+  React.useContext(InventoryAdjustmentContext);
+
+export { InventoryAdjustmentFormProvider, useInventoryAdjContext };

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentQuantityFields.tsx

@@ -0,0 +1,23 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Choose, If } from '@/components';
+import IncrementAdjustmentFields from './IncrementAdjustmentFields';
+import DecrementAdjustmentFields from './DecrementAdjustmentFields';
+
+export default function InventoryAdjustmentQuantityFields() {
+  const { values } = useFormikContext();
+
+  return (
+    <div class="adjustment-fields">
+      <Choose>
+        <Choose.When condition={values.type === 'decrement'}>
+          <DecrementAdjustmentFields />
+        </Choose.When>
+        <Choose.When condition={values.type === 'increment'}>
+          <IncrementAdjustmentFields />
+        </Choose.When>
+      </Choose>
+    </div>
+  );
+}

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/index.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const InventoryAdjustmentFormDialogContent = lazy(
+  () => import('./InventoryAdjustmentFormDialogContent'),
+);
+
+/**
+ * Inventory adjustments form dialog.
+ */
+function InventoryAdjustmentFormDialog({
+  dialogName,
+  payload = { action: '', itemId: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'make_adjustment'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--adjustment-item'}
+    >
+      <DialogSuspense>
+        <InventoryAdjustmentFormDialogContent
+          dialogName={dialogName}
+          itemId={payload.itemId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(InventoryAdjustmentFormDialog);

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.tsx

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
+import { first } from 'lodash';
+
+export const decrementQuantity = (newQuantity, quantityOnHand) => {
+  return quantityOnHand - newQuantity;
+};
+
+export const incrementQuantity = (newQuantity, quantityOnHand) => {
+  return quantityOnHand + newQuantity;
+};
+
+export const diffQuantity = (newQuantity, quantityOnHand, type) => {
+  return type === 'decrement'
+    ? decrementQuantity(newQuantity, quantityOnHand)
+    : incrementQuantity(newQuantity, quantityOnHand);
+};
+
+export const useSetPrimaryWarehouseToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { warehouses, isWarehousesSuccess } = useInventoryAdjContext();
+
+  React.useEffect(() => {
+    if (isWarehousesSuccess) {
+      const primaryWarehouse =
+        warehouses.find((b) => b.primary) || first(warehouses);
+
+      if (primaryWarehouse) {
+        setFieldValue('warehouse_id', primaryWarehouse.id);
+      }
+    }
+  }, [isWarehousesSuccess, setFieldValue, warehouses]);
+};
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useInventoryAdjContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+
+const Schema = Yup.object().shape({
+  email: Yup.string().email().required().label(intl.get('email')),
+  role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
+});
+
+export const InviteUserFormSchema = Schema;

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserDialogContent.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+
+import InviteUserForm from './InviteUserForm';
+import { InviteUserFormProvider } from './InviteUserFormProvider';
+
+import '@/style/pages/Users/InviteFormDialog.scss';
+
+/**
+ * Invite user dialog content.
+ */
+export default function InviteUserDialogContent({
+  action,
+  userId,
+  dialogName,
+}) {
+  return (
+    <InviteUserFormProvider isEditMode={action} dialogName={dialogName}>
+      <InviteUserForm />
+    </InviteUserFormProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserForm.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { pick, snakeCase } from 'lodash';
+import { AppToaster } from '@/components';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+import { InviteUserFormSchema } from './InviteUserDialog.schema';
+import InviteUserFormContent from './InviteUserFormContent';
+import { useInviteUserFormContext } from './InviteUserFormProvider';
+
+import { transformApiErrors } from './utils';
+
+import { compose, objectKeysTransform } from '@/utils';
+
+function InviteUserForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, isEditMode, inviteUserMutate, userId } =
+    useInviteUserFormContext();
+
+  const initialValues = {
+    status: 1,
+    ...(isEditMode &&
+      pick(
+        objectKeysTransform(userId, snakeCase),
+        Object.keys(InviteUserFormSchema.fields),
+      )),
+  };
+
+  const handleSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = { ...values };
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: intl.get('teammate_invited_to_organization_account'),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+
+    // Handle the response error.
+    const onError = (error) => {
+      const {
+        response: {
+          data: { errors },
+        },
+      } = error;
+
+      const errorsTransformed = transformApiErrors(errors);
+
+      setErrors({ ...errorsTransformed });
+      setSubmitting(false);
+    };
+    inviteUserMutate(form).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={InviteUserFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+    >
+      <InviteUserFormContent />
+    </Formik>
+  );
+}
+export default compose(withDialogActions)(InviteUserForm);

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx

@@ -0,0 +1,90 @@
+// @ts-nocheck
+import React from 'react';
+import { FormGroup, InputGroup, Intent, Button } from '@blueprintjs/core';
+import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
+import {
+  ListSelect,
+  FieldRequiredHint,
+  FormattedMessage as T,
+} from '@/components';
+import { CLASSES } from '@/constants/classes';
+import classNames from 'classnames';
+import { compose, inputIntent } from '@/utils';
+import { useInviteUserFormContext } from './InviteUserFormProvider';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+function InviteUserFormContent({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+  const { isEditMode, dialogName, roles } = useInviteUserFormContext();
+
+  const handleClose = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <Form>
+      <div className={CLASSES.DIALOG_BODY}>
+        <p className="mb2">
+          <T id={'your_access_to_your_team'} />
+        </p>
+        {/* ----------- Email ----------- */}
+        <FastField name={'email'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'email'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames('form-group--email', CLASSES.FILL)}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="email" />}
+            >
+              <InputGroup medium={true} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+        {/* ----------- Role name ----------- */}
+        <FastField name={'role_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'invite_user.label.role_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              helperText={<ErrorMessage name="role_id" />}
+              className={classNames(CLASSES.FILL, 'form-group--role_name')}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={roles}
+                onItemSelect={({ id }) => {
+                  form.setFieldValue('role_id', id);
+                }}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'name'}
+                // labelProp={'id '}
+                popoverProps={{ minimal: true }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+
+      <div className={CLASSES.DIALOG_FOOTER}>
+        <div className={CLASSES.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleClose}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
+            {isEditMode ? <T id={'edit'} /> : <T id={'invite'} />}
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+export default compose(withDialogActions)(InviteUserFormContent);

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { useCreateInviteUser, useUsers, useRoles } from '@/hooks/query';
+import { DialogContent } from '@/components';
+
+const InviteUserFormContext = createContext();
+
+/**
+ * Invite user Form page provider.
+ */
+function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
+  // Create and edit item currency mutations.
+  const { mutateAsync: inviteUserMutate } = useCreateInviteUser();
+
+  // fetch users list.
+  const { isLoading: isUsersLoading } = useUsers();
+
+  // fetch roles list.
+  const { data: roles, isLoading: isRolesLoading } = useRoles();
+
+  // Provider state.
+  const provider = {
+    inviteUserMutate,
+    dialogName,
+    userId,
+    isUsersLoading,
+    isEditMode,
+    roles,
+  };
+
+  return (
+    <DialogContent
+      isLoading={isUsersLoading || isRolesLoading}
+      name={'invite-form'}
+    >
+      <InviteUserFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useInviteUserFormContext = () => React.useContext(InviteUserFormContext);
+
+export { InviteUserFormProvider, useInviteUserFormContext };

packages/webapp/src/containers/Dialogs/InviteUserDialog/index.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const UserFormDialogContent = lazy(() => import('./InviteUserDialogContent'));
+
+// User form dialog.
+function UserFormDialog({
+  dialogName,
+  payload = { action: '', id: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_invite'} />
+        ) : (
+          <T id={'invite_user'} />
+        )
+      }
+      className={'dialog--invite-form'}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <UserFormDialogContent
+          dialogName={dialogName}
+          userId={payload.id}
+          action={payload.action}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(
+  // UserFormDialogConnect,
+  withDialogRedux(),
+)(UserFormDialog);