From 1fa03822f1c916312a5823244a37c348d6a7729a Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 23 Oct 2021 20:03:31 +0200
Subject: [PATCH 1/3] feat: money in .

---
 src/common/cashflowOptions.js                 | 11 ++-
 .../AccountTransactionsActionsBar.js          |  8 +-
 .../MoneyInDialog/MoneyInContentFields.js     | 23 +++++
 .../MoneyInDialog/MoneyInDialogContent.js     | 10 +-
 .../MoneyInDialog/MoneyInDialogForm.js        | 24 -----
 .../MoneyInDialog/MoneyInDialogProvider.js    | 22 ++++-
 .../OtherIncomeForm.js => MoneyInForm.js}     | 34 +++----
 ...meForm.schema.js => MoneyInForm.schema.js} |  6 +-
 .../MoneyInDialog/MoneyInFormContent.js       | 17 ++++
 .../MoneyInDialog/MoneyInFormFields.js        | 27 ++++++
 .../OtherIncome/OtherIncomeFormContent.js     | 17 ----
 .../OtherIncome/OtherIncomeFormFields.js      |  4 +-
 .../OwnerContributionForm.js                  | 92 ------------------
 .../OwnerContributionForm.schema.js           | 22 -----
 .../OwnerContributionFormContent.js           | 17 ----
 .../OwnerContributionFormFields.js            |  4 +-
 .../MoneyInDialog/TransactionTypeFields.js    | 94 +++++++++++++++++++
 .../TransferFromAccountForm.js                | 92 ------------------
 .../TransferFromAccountForm.schema.js         | 22 -----
 .../TransferFromAccountFormContent.js         | 14 ---
 .../TransferFromAccountFormFields.js          |  4 +-
 src/containers/Dialogs/MoneyInDialog/index.js | 10 +-
 .../Dialogs/MoneyOutDialog/index.js           |  8 +-
 src/lang/en/index.json                        |  4 +-
 .../CashFlow/CashflowTransactionForm.scss     |  6 ++
 25 files changed, 242 insertions(+), 350 deletions(-)
 create mode 100644 src/containers/Dialogs/MoneyInDialog/MoneyInContentFields.js
 delete mode 100644 src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js
 rename src/containers/Dialogs/MoneyInDialog/{OtherIncome/OtherIncomeForm.js => MoneyInForm.js} (77%)
 rename src/containers/Dialogs/MoneyInDialog/{OtherIncome/OtherIncomeForm.schema.js => MoneyInForm.schema.js} (79%)
 create mode 100644 src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js
 create mode 100644 src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js
 delete mode 100644 src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormContent.js
 delete mode 100644 src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js
 delete mode 100644 src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js
 delete mode 100644 src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormContent.js
 create mode 100644 src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js
 delete mode 100644 src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js
 delete mode 100644 src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js
 delete mode 100644 src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js

diff --git a/src/common/cashflowOptions.js b/src/common/cashflowOptions.js
index 6ff7401f5..480b71162 100644
--- a/src/common/cashflowOptions.js
+++ b/src/common/cashflowOptions.js
@@ -3,29 +3,30 @@ import intl from 'react-intl-universal';
 export const addMoneyIn = [
   {
     name: intl.get('cash_flow.option_owner_contribution'),
-    type: 'OWNER_CONTRIBUTION',
+    value: 'owner_contribution',
   },
   {
     name: intl.get('cash_flow.option_other_income'),
     type: 'OTHER_INCOME',
+    value: 'other_income',
   },
   {
     name: intl.get('cash_flow.option_transfer_form_account'),
-    type: 'TRANSFER_FROM_ACCOUNT',
+    value: 'transfer_from_account',
   },
 ];
 
 export const addMoneyOut = [
   {
     name: intl.get('cash_flow.option_owner_drawings'),
-    type: 'ONWERS_DRAWING',
+    value: 'onwers_drawing',
   },
   {
     name: intl.get('cash_flow.option_expenses'),
-    type: 'OTHER_EXPENSE',
+    value: 'other_expense',
   },
   {
     name: intl.get('cash_flow.option_transfer_to_account'),
-    type: 'TRANSFER_TO_ACCOUNT',
+    value: 'transfer_to_account',
   },
 ];
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js
index 27fab2255..34d322fc6 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js
@@ -40,17 +40,17 @@ function AccountTransactionsActionsBar({
   const { accountId } = useAccountTransactionsContext();
 
   // Handle money in form
-  const handleMoneyInFormTransaction = (value) => {
+  const handleMoneyInFormTransaction = (account) => {
     openDialog('money-in', {
-      account_type: value.type,
+      account_type: account,
       account_id: accountId,
     });
   };
 
   // Handle money out form
-  const handlMoneyOutFormTransaction = (value) => {
+  const handlMoneyOutFormTransaction = (account) => {
     openDialog('money-out', {
-      account_type: value.type,
+      account_type: account,
       account_id: accountId,
     });
   };
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInContentFields.js b/src/containers/Dialogs/MoneyInDialog/MoneyInContentFields.js
new file mode 100644
index 000000000..838c173aa
--- /dev/null
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInContentFields.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import OwnerContributionFormFields from './OwnerContribution/OwnerContributionFormFields';
+import OtherIncomeFormFields from './OtherIncome/OtherIncomeFormFields';
+import TransferFromAccountFormFields from './TransferFromAccount/TransferFromAccountFormFields';
+
+export default function MoneyInContentFields({ accountType }) {
+  const handleTransactionType = () => {
+    switch (accountType) {
+      case 'owner_contribution':
+        return <OwnerContributionFormFields />;
+
+      case 'other_income':
+        return <OtherIncomeFormFields />;
+
+      case 'transfer_from_account':
+        return <TransferFromAccountFormFields />;
+      default:
+        break;
+    }
+  };
+
+  return <React.Fragment>{handleTransactionType()}</React.Fragment>;
+}
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js
index 959490ded..7eee4f501 100644
--- a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { MoneyInDialogProvider } from './MoneyInDialogProvider';
-import MoneyInDialogForm from './MoneyInDialogForm';
+import MoneyInForm from './MoneyInForm';
 
 /**
  * Money in dialog content.
@@ -13,8 +13,12 @@ export default function MoneyInDialogContent({
   accountType,
 }) {
   return (
-    <MoneyInDialogProvider accountId={accountId} dialogName={dialogName}>
-      <MoneyInDialogForm accountType={accountType} />
+    <MoneyInDialogProvider
+      accountId={accountId}
+      accountType={accountType}
+      dialogName={dialogName}
+    >
+      <MoneyInForm />
     </MoneyInDialogProvider>
   );
 }
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js
deleted file mode 100644
index 6ea90e77a..000000000
--- a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import OwnerContributionForm from './OwnerContribution/OwnerContributionForm';
-import OtherIncomeForm from './OtherIncome/OtherIncomeForm';
-import TransferFromAccountForm from './TransferFromAccount/TransferFromAccountForm';
-
-export default function MoneyInDialogForm({ accountType }) {
-  // Handle from transaction.
-  const handleFromTransaction = () => {
-    switch (accountType) {
-      case 'OWNER_CONTRIBUTION':
-        return <OwnerContributionForm />;
-
-      case 'OTHER_INCOME':
-        return <OtherIncomeForm />;
-
-      case 'TRANSFER_FROM_ACCOUNT':
-        return <TransferFromAccountForm />;
-      default:
-        break;
-    }
-  };
-
-  return <React.Fragment>{handleFromTransaction()}</React.Fragment>;
-}
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js
index 0525c8edf..8d365451d 100644
--- a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js
@@ -1,16 +1,29 @@
 import React from 'react';
 import { DialogContent } from 'components';
-import { useCreateCashflowTransaction, useAccounts } from 'hooks/query';
+import {
+  useCreateCashflowTransaction,
+  useAccounts,
+  useCashflowAccounts,
+} from 'hooks/query';
 
 const MoneyInDialogContent = React.createContext();
 
 /**
  * Money in dialog provider.
  */
-function MoneyInDialogProvider({ accountId, dialogName, ...props }) {
+function MoneyInDialogProvider({
+  accountId,
+  accountType,
+  dialogName,
+  ...props
+}) {
   // Fetches accounts list.
   const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
 
+  // Fetch cash flow list .
+  const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
+    useCashflowAccounts({}, { keepPreviousData: true });
+
   const { mutateAsync: createCashflowTransactionMutate } =
     useCreateCashflowTransaction();
 
@@ -21,8 +34,11 @@ function MoneyInDialogProvider({ accountId, dialogName, ...props }) {
   const provider = {
     accounts,
     accountId,
+    accountType,
     isAccountsLoading,
 
+    cashflowAccounts,
+
     submitPayload,
     dialogName,
 
@@ -31,7 +47,7 @@ function MoneyInDialogProvider({ accountId, dialogName, ...props }) {
   };
 
   return (
-    <DialogContent isLoading={isAccountsLoading}>
+    <DialogContent isLoading={isAccountsLoading || isCashFlowAccountsLoading}>
       <MoneyInDialogContent.Provider value={provider} {...props} />
     </DialogContent>
   );
diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
similarity index 77%
rename from src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js
rename to src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
index 3f47fc31b..dfe4ab7fe 100644
--- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
@@ -8,10 +8,11 @@ import intl from 'react-intl-universal';
 import 'style/pages/CashFlow/CashflowTransactionForm.scss';
 
 import { AppToaster } from 'components';
-import { CreateOtherIncomeFormSchema } from './OtherIncomeForm.schema';
-import OtherIncomeFormContent from './OtherIncomeFormContent';
 
-import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
+import MoneyInFormContent from './MoneyInFormContent';
+import { CreateMoneyInFormSchema } from './MoneyInForm.schema';
+
+import { useMoneyInDailogContext } from './MoneyInDialogProvider';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
@@ -22,7 +23,7 @@ const defaultInitialValues = {
   date: moment(new Date()).format('YYYY-MM-DD'),
   amount: '',
   transaction_number: '',
-  transaction_type: 'other_income',
+  transaction_type: '',
   reference_no: '',
   cashflow_account_id: '',
   credit_account_id: '',
@@ -30,10 +31,7 @@ const defaultInitialValues = {
   published: '',
 };
 
-/**
- * Other income form.
- */
-function OtherIncomeForm({
+function MoneyInForm({
   // #withDialogActions
   closeDialog,
 
@@ -43,6 +41,7 @@ function OtherIncomeForm({
   const {
     dialogName,
     accountId,
+    accountType,
     createCashflowTransactionMutate,
     submitPayload,
   } = useMoneyInDailogContext();
@@ -51,6 +50,7 @@ function OtherIncomeForm({
   const initialValues = {
     ...defaultInitialValues,
     currency_code: base_currency,
+    transaction_type: accountType,
     cashflow_account_id: accountId,
   };
 
@@ -76,17 +76,19 @@ function OtherIncomeForm({
   };
 
   return (
-    <Formik
-      validationSchema={CreateOtherIncomeFormSchema}
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
-    >
-      <OtherIncomeFormContent />
-    </Formik>
+    <div>
+      <Formik
+        validationSchema={CreateMoneyInFormSchema}
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        <MoneyInFormContent />
+      </Formik>
+    </div>
   );
 }
 
 export default compose(
   withDialogActions,
   withCurrentOrganization(),
-)(OtherIncomeForm);
+)(MoneyInForm);
diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js
similarity index 79%
rename from src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js
rename to src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js
index 300f98511..63711f142 100644
--- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js
@@ -8,9 +8,7 @@ const Schema = Yup.object().shape({
   transaction_number: Yup.string(),
   transaction_type: Yup.string().required(),
   reference_no: Yup.string(),
-  credit_account_id: Yup.number()
-    .required()
-    .label(intl.get('other_income_account')),
+  credit_account_id: Yup.number().required(),
   cashflow_account_id: Yup.string().required(),
   description: Yup.string()
     .min(3)
@@ -19,4 +17,4 @@ const Schema = Yup.object().shape({
   published: Yup.boolean(),
 });
 
-export const CreateOtherIncomeFormSchema = Schema;
+export const CreateMoneyInFormSchema = Schema;
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js b/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js
new file mode 100644
index 000000000..c3e01b84e
--- /dev/null
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import MoneyInFormFields from './MoneyInFormFields';
+import MoneyInFloatingActions from './MoneyInFloatingActions';
+
+/**
+ * Money In form content.
+ */
+export default function MoneyInFormContent() {
+  return (
+    <Form>
+      <MoneyInFormFields />
+      <MoneyInFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js b/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js
new file mode 100644
index 000000000..1900e2479
--- /dev/null
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Classes } from '@blueprintjs/core';
+
+import { If } from 'components';
+
+import MoneyInContentFields from './MoneyInContentFields';
+import TransactionTypeFields from './TransactionTypeFields';
+import { useMoneyInDailogContext } from './MoneyInDialogProvider';
+
+/**
+ * Money in form fields.
+ */
+function MoneyInFormFields() {
+  // Money in dialog context.
+  const { accountId, accountType } = useMoneyInDailogContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <If condition={!accountId}>
+        <TransactionTypeFields />
+      </If>
+      <MoneyInContentFields accountType={accountType} />
+    </div>
+  );
+}
+
+export default MoneyInFormFields;
diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormContent.js b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormContent.js
deleted file mode 100644
index e05f48788..000000000
--- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormContent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-
-import OtherIncomeFormFields from './OtherIncomeFormFields';
-import MoneyInFloatingActions from '../MoneyInFloatingActions';
-
-/**
- * Other income form content.
- */
-export default function OtherIncomeFormContent() {
-  return (
-    <Form>
-      <OtherIncomeFormFields />
-      <MoneyInFloatingActions />
-    </Form>
-  );
-}
diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
index 0a2544b96..f0e10f72a 100644
--- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
@@ -41,7 +41,7 @@ function OtherIncomeFormFields() {
   const amountFieldRef = useAutofocus();
 
   return (
-    <div className={Classes.DIALOG_BODY}>
+    <React.Fragment>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -187,7 +187,7 @@ function OtherIncomeFormFields() {
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </React.Fragment>
   );
 }
 
diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js
deleted file mode 100644
index e7ff7bfaf..000000000
--- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-import { Intent } from '@blueprintjs/core';
-import { Formik } from 'formik';
-import { omit } from 'lodash';
-import intl from 'react-intl-universal';
-
-import 'style/pages/CashFlow/CashflowTransactionForm.scss';
-
-import { AppToaster } from 'components';
-import { CreateOwnerContributionFormSchema } from './OwnerContributionForm.schema';
-import OwnerContributionFormContent from './OwnerContributionFormContent';
-
-import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
-
-import { compose } from 'utils';
-
-const defaultInitialValues = {
-  date: moment(new Date()).format('YYYY-MM-DD'),
-  amount: '',
-  transaction_number: '',
-  transaction_type: 'owner_contribution',
-  reference_no: '',
-  cashflow_account_id: '',
-  credit_account_id: '',
-  description: '',
-  published: '',
-};
-
-/**
- * Owner contribution form
- */
-function OwnerContributionForm({
-  // #withDialogActions
-  closeDialog,
-
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
-  const {
-    dialogName,
-    accountId,
-    submitPayload,
-    createCashflowTransactionMutate,
-  } = useMoneyInDailogContext();
-
-  // Initial form values.
-  const initialValues = {
-    ...defaultInitialValues,
-    currency_code: base_currency,
-    cashflow_account_id: accountId,
-  };
-
-  // Handles the form submit.
-  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    const form = {
-      ...omit(values, ['currency_code']),
-      published: submitPayload.publish,
-    };
-    setSubmitting(true);
-    createCashflowTransactionMutate(form)
-      .then(() => {
-        closeDialog(dialogName);
-
-        AppToaster.show({
-          message: intl.get('cash_flow_transaction_success_message'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .finally(() => {
-        setSubmitting(true);
-      });
-  };
-
-  return (
-    <Formik
-      validationSchema={CreateOwnerContributionFormSchema}
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
-    >
-      <OwnerContributionFormContent />
-    </Formik>
-  );
-}
-
-export default compose(
-  withDialogActions,
-  withCurrentOrganization(),
-)(OwnerContributionForm);
diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js
deleted file mode 100644
index b877c0e26..000000000
--- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as Yup from 'yup';
-import intl from 'react-intl-universal';
-import { DATATYPES_LENGTH } from 'common/dataTypes';
-
-const Schema = Yup.object().shape({
-  date: Yup.date().required().label(intl.get('date')),
-  amount: Yup.number().required().label(intl.get('amount')),
-  transaction_number: Yup.string(),
-  transaction_type: Yup.string().required(),
-  reference_no: Yup.string(),
-  credit_account_id: Yup.number()
-    .required()
-    .label(intl.get('cash_flow_transaction.label_equity_account')),
-  cashflow_account_id: Yup.string().required(),
-  description: Yup.string()
-    .min(3)
-    .max(DATATYPES_LENGTH.TEXT)
-    .label(intl.get('description')),
-  published: Yup.boolean(),
-});
-
-export const CreateOwnerContributionFormSchema = Schema;
diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormContent.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormContent.js
deleted file mode 100644
index 27932fc3b..000000000
--- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormContent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-
-import OwnerContributionFormFields from './OwnerContributionFormFields';
-import MoneyInFloatingActions from '../MoneyInFloatingActions';
-
-/**
- * Owner contribution form content.
- */
-export default function OwnerContributionFormContent() {
-  return (
-    <Form>
-      <OwnerContributionFormFields />
-      <MoneyInFloatingActions />
-    </Form>
-  );
-}
diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
index 6bcea0830..203e5387f 100644
--- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
@@ -39,7 +39,7 @@ function OwnerContributionFormFields() {
 
   const amountFieldRef = useAutofocus();
   return (
-    <div className={Classes.DIALOG_BODY}>
+    <React.Fragment>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -183,7 +183,7 @@ function OwnerContributionFormFields() {
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </React.Fragment>
   );
 }
 
diff --git a/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js b/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js
new file mode 100644
index 000000000..1a62527b3
--- /dev/null
+++ b/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { Classes, FormGroup } from '@blueprintjs/core';
+import classNames from 'classnames';
+import {
+  FormattedMessage as T,
+  AccountsSuggestField,
+  FieldRequiredHint,
+  ListSelect,
+  Col,
+  Row,
+} from 'components';
+
+import { inputIntent } from 'utils';
+import { CLASSES } from 'common/classes';
+import { addMoneyIn } from '../../../common/cashflowOptions';
+
+import { useMoneyInDailogContext } from './MoneyInDialogProvider';
+
+/**
+ * Transaction type fields.
+ */
+export default function TransactionTypeFields() {
+  // Money in dialog context.
+  const { cashflowAccounts } = useMoneyInDailogContext();
+
+  return (
+    <div className="trasnaction-type-fileds">
+      <Row>
+        <Col xs={5}>
+          {/*------------ Current account -----------*/}
+          <FastField name={'cashflow_account_id'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={'Current account'}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="cashflow_account_id" />}
+                minimal={true}
+                className={classNames(
+                  CLASSES.FILL,
+                  'form-group--cashflow_account_id',
+                )}
+              >
+                <AccountsSuggestField
+                  accounts={cashflowAccounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('cashflow_account_id', id)
+                  }
+                  inputProps={{
+                    intent: inputIntent({ error, touched }),
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+          {/*------------ Transaction type -----------*/}
+        </Col>
+        <Col xs={5}>
+          <FastField name={'transaction_type'}>
+            {({
+              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 })}
+                className={classNames(
+                  CLASSES.FILL,
+                  'form-group--transaction_type',
+                )}
+              >
+                <ListSelect
+                  items={addMoneyIn}
+                  onItemSelect={(type) => {
+                    setFieldValue('transaction_type', type.value);
+                  }}
+                  filterable={false}
+                  selectedItem={value}
+                  selectedItemProp={'value'}
+                  textProp={'name'}
+                  popoverProps={{ minimal: true }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+    </div>
+  );
+}
diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js
deleted file mode 100644
index 17636469a..000000000
--- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-import { Intent } from '@blueprintjs/core';
-import { Formik } from 'formik';
-import { omit } from 'lodash';
-import intl from 'react-intl-universal';
-
-import 'style/pages/CashFlow/CashflowTransactionForm.scss';
-
-import { AppToaster } from 'components';
-import { CreateTransferFromAccountFormSchema } from './TransferFromAccountForm.schema';
-import TransferFromAccountFormContent from './TransferFromAccountFormContent';
-
-import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
-
-import { compose } from 'utils';
-
-const defaultInitialValues = {
-  date: moment(new Date()).format('YYYY-MM-DD'),
-  amount: '',
-  transaction_number: '',
-  transaction_type: 'transfer_from_account',
-  reference_no: '',
-  cashflow_account_id: '',
-  credit_account_id: '',
-  description: '',
-  published: '',
-};
-
-/**
- * Transfer from account form.
- */
-function TransferFromAccountForm({
-  // #withDialogActions
-  closeDialog,
-
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
-  const {
-    dialogName,
-    accountId,
-    createCashflowTransactionMutate,
-    submitPayload,
-  } = useMoneyInDailogContext();
-
-  // Initial form values.
-  const initialValues = {
-    ...defaultInitialValues,
-    currency_code: base_currency,
-    cashflow_account_id: accountId,
-  };
-
-  // Handles the form submit.
-  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    const form = {
-      ...omit(values, ['currency_code']),
-      published: submitPayload.publish,
-    };
-    setSubmitting(true);
-    createCashflowTransactionMutate(form)
-      .then(() => {
-        closeDialog(dialogName);
-
-        AppToaster.show({
-          message: intl.get('cash_flow_transaction_success_message'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .finally(() => {
-        setSubmitting(true);
-      });
-  };
-
-  return (
-    <Formik
-      validationSchema={CreateTransferFromAccountFormSchema}
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
-    >
-      <TransferFromAccountFormContent />
-    </Formik>
-  );
-}
-
-export default compose(
-  withDialogActions,
-  withCurrentOrganization(),
-)(TransferFromAccountForm);
diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js
deleted file mode 100644
index 3e1786695..000000000
--- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as Yup from 'yup';
-import intl from 'react-intl-universal';
-import { DATATYPES_LENGTH } from 'common/dataTypes';
-
-const Schema = Yup.object().shape({
-  date: Yup.date().required().label(intl.get('date')),
-  amount: Yup.number().required().label(intl.get('amount')),
-  transaction_number: Yup.string(),
-  transaction_type: Yup.string().required(),
-  reference_no: Yup.string(),
-  credit_account_id: Yup.number()
-    .required()
-    .label(intl.get('cash_flow_transaction.label_transfer_account')),
-  cashflow_account_id: Yup.string().required(),
-  description: Yup.string()
-    .min(3)
-    .max(DATATYPES_LENGTH.TEXT)
-    .label(intl.get('description')),
-  published: Yup.boolean(),
-});
-
-export const CreateTransferFromAccountFormSchema = Schema;
diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js
deleted file mode 100644
index 073a893e2..000000000
--- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-
-import TransferFromAccountFormFields from './TransferFromAccountFormFields';
-import MoneyInFloatingActions from '../MoneyInFloatingActions';
-
-export default function TransferFromAccountFormContent() {
-  return (
-    <Form>
-      <TransferFromAccountFormFields />
-      <MoneyInFloatingActions />
-    </Form>
-  );
-}
diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
index 118f71e0c..7925e3c48 100644
--- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
@@ -41,7 +41,7 @@ function TransferFromAccountFormFields() {
   const amountFieldRef = useAutofocus();
 
   return (
-    <div className={Classes.DIALOG_BODY}>
+    <React.Fragment>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -190,7 +190,7 @@ function TransferFromAccountFormFields() {
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </React.Fragment>
   );
 }
 
diff --git a/src/containers/Dialogs/MoneyInDialog/index.js b/src/containers/Dialogs/MoneyInDialog/index.js
index a751b3934..28e2b8412 100644
--- a/src/containers/Dialogs/MoneyInDialog/index.js
+++ b/src/containers/Dialogs/MoneyInDialog/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'redux';
@@ -11,13 +11,15 @@ const MoneyInDialogContent = React.lazy(() => import('./MoneyInDialogContent'));
  */
 function MoneyInDialog({
   dialogName,
-  payload = { action: '', account_type: null, account_id: null },
+  payload = { account_type: '', account_id: null },
   isOpen,
 }) {
   return (
     <Dialog
       name={dialogName}
-      title={<T id={'cash_flow_transaction.money_in'} />}
+      title={intl.get('cash_flow_transaction.money_in', {
+        value: payload.account_type?.name,
+      })}
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}
@@ -27,7 +29,7 @@ function MoneyInDialog({
         <MoneyInDialogContent
           dialogName={dialogName}
           accountId={payload.account_id}
-          accountType={payload.account_type}
+          accountType={payload.account_type?.value}
         />
       </DialogSuspense>
     </Dialog>
diff --git a/src/containers/Dialogs/MoneyOutDialog/index.js b/src/containers/Dialogs/MoneyOutDialog/index.js
index d7fd6e5d0..abc346c36 100644
--- a/src/containers/Dialogs/MoneyOutDialog/index.js
+++ b/src/containers/Dialogs/MoneyOutDialog/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'redux';
@@ -13,13 +13,15 @@ const MoneyOutDialogContent = React.lazy(() =>
  */
 function MoneyOutDialog({
   dialogName,
-  payload = { action: '', account_type: null, account_id: null },
+  payload = { account_type: null, account_id: null },
   isOpen,
 }) {
   return (
     <Dialog
       name={dialogName}
-      title={<T id={'cash_flow_transaction.money_out'} />}
+      title={intl.get('cash_flow_transaction.money_out', {
+        value: payload.account_type,
+      })}
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index f2333197a..2fd1e385a 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1382,8 +1382,8 @@
   "cash_flow_transaction.label_equity_account":"Equity account",
   "cash_flow_transaction.label_expense_account":"Expense account",
   "cash_flow_transaction_success_message":" The cashflow transaction has been created successfully.",
-  "cash_flow_transaction.money_in":"Money In",
-  "cash_flow_transaction.money_out":"Money Out",
+  "cash_flow_transaction.money_in":"Money In {value}",
+  "cash_flow_transaction.money_out":"Money Out {value}",
   "cash_flow_transaction.other_income_account":"Other income account",
   "cash_flow_transaction.other_expense_account":"Other expense account",
   "save_and_publish": "Save & Publish",
diff --git a/src/style/pages/CashFlow/CashflowTransactionForm.scss b/src/style/pages/CashFlow/CashflowTransactionForm.scss
index 81c9c1671..db852724d 100644
--- a/src/style/pages/CashFlow/CashflowTransactionForm.scss
+++ b/src/style/pages/CashFlow/CashflowTransactionForm.scss
@@ -25,6 +25,12 @@
     }
   }
 
+  .trasnaction-type-fileds {
+    margin-bottom: 18px;
+    padding: 16px 0px 12px 0px;
+    border-bottom: 2px solid #e9e9e9;
+  }
+
   .bp3-dialog-footer {
     padding-top: 10px;
   }

From 75acab33482b4fcd247702a858122d011f16f22b Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 23 Oct 2021 20:04:59 +0200
Subject: [PATCH 2/3] feat: money out.

---
 src/containers/Dialogs/MoneyInDialog/index.js |  2 +-
 .../MoneyOutDialog/MoneyOutContentFields.js   | 26 +++++
 .../MoneyOutDialog/MoneyOutDialogContent.js   | 12 ++-
 .../MoneyOutDialog/MoneyOutDialogForm.js      | 24 -----
 ...tProvider.js => MoneyOutDialogProvider.js} | 23 +++--
 ...gActions.js => MoneyOutFloatingActions.js} | 10 +-
 .../OtherExpenseForm.js => MoneyOutForm.js}   | 35 +++----
 ...tForm.schema.js => MoneyOutForm.schema.js} |  6 +-
 .../MoneyOutDialog/MoneyOutFormContent.js     | 17 ++++
 .../MoneyOutDialog/MoneyOutFormFields.js      | 27 ++++++
 .../OtherExpenseFloatingActions.js            | 76 ---------------
 .../OtherExpense/OtherExpenseForm.schema.js   | 22 -----
 .../OtherExpense/OtherExpenseFormContent.js   | 17 ----
 .../OtherExpense/OtherExpnseFormFields.js     |  6 +-
 .../OwnerDrawings/OwnerDrawingsForm.js        | 91 ------------------
 .../OwnerDrawings/OwnerDrawingsForm.schema.js | 22 -----
 .../OwnerDrawings/OwnerDrawingsFormContent.js | 17 ----
 .../OwnerDrawings/OwnerDrawingsFormFields.js  |  7 +-
 .../MoneyOutDialog/TransactionTypeFields.js   | 96 +++++++++++++++++++
 .../TransferToAccountFloatingActions.js       | 73 --------------
 .../TransferToAccountForm.js                  | 92 ------------------
 .../TransferToAccountFormFields.js            |  6 +-
 .../TransferToAccountFromContent.js           | 14 ---
 .../Dialogs/MoneyOutDialog/index.js           |  4 +-
 24 files changed, 227 insertions(+), 498 deletions(-)
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.js
 delete mode 100644 src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js
 rename src/containers/Dialogs/MoneyOutDialog/{MoneyOutProvider.js => MoneyOutDialogProvider.js} (60%)
 rename src/containers/Dialogs/MoneyOutDialog/{OwnerDrawings/OwnerDrawingsFloatingActions.js => MoneyOutFloatingActions.js} (86%)
 rename src/containers/Dialogs/MoneyOutDialog/{OtherExpense/OtherExpenseForm.js => MoneyOutForm.js} (77%)
 rename src/containers/Dialogs/MoneyOutDialog/{TransferToAccount/TransferToAccountForm.schema.js => MoneyOutForm.schema.js} (80%)
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js
 delete mode 100644 src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js
 delete mode 100644 src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js
 delete mode 100644 src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js
 delete mode 100644 src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js
 delete mode 100644 src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js
 delete mode 100644 src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormContent.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js
 delete mode 100644 src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js
 delete mode 100644 src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js
 delete mode 100644 src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js

diff --git a/src/containers/Dialogs/MoneyInDialog/index.js b/src/containers/Dialogs/MoneyInDialog/index.js
index 28e2b8412..e44241225 100644
--- a/src/containers/Dialogs/MoneyInDialog/index.js
+++ b/src/containers/Dialogs/MoneyInDialog/index.js
@@ -11,7 +11,7 @@ const MoneyInDialogContent = React.lazy(() => import('./MoneyInDialogContent'));
  */
 function MoneyInDialog({
   dialogName,
-  payload = { account_type: '', account_id: null },
+  payload = { account_type: null, account_id: null },
   isOpen,
 }) {
   return (
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.js
new file mode 100644
index 000000000..536af6d0c
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import OtherExpnseFormFields from './OtherExpense/OtherExpnseFormFields';
+import OwnerDrawingsFormFields from './OwnerDrawings/OwnerDrawingsFormFields';
+import TransferToAccountFormFields from './TransferToAccount/TransferToAccountFormFields';
+
+function MoneyOutContentFields({ accountType }) {
+  const handleTransactionType = () => {
+    switch (accountType) {
+      case 'onwers_drawing':
+        return <OwnerDrawingsFormFields />;
+
+      case 'other_expense':
+        return <OtherExpnseFormFields />;
+
+      case 'transfer_to_account':
+        return <TransferToAccountFormFields />;
+      default:
+        break;
+    }
+  };
+
+  return <React.Fragment>{handleTransactionType()}</React.Fragment>;
+}
+
+export default MoneyOutContentFields;
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js
index 3c8ad3ac8..70ec9424e 100644
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { MoneyOutProvider } from './MoneyOutProvider';
-import MoneyOutDialogForm from './MoneyOutDialogForm';
+import { MoneyOutProvider } from './MoneyOutDialogProvider';
+import MoneyOutForm from './MoneyOutForm';
 
 /**
  * Money out dailog content.
@@ -12,8 +12,12 @@ export default function MoneyOutDialogContent({
   accountType,
 }) {
   return (
-    <MoneyOutProvider accountId={accountId} dialogName={dialogName}>
-      <MoneyOutDialogForm accountType={accountType} />
+    <MoneyOutProvider
+      accountId={accountId}
+      accountType={accountType}
+      dialogName={dialogName}
+    >
+      <MoneyOutForm />
     </MoneyOutProvider>
   );
 }
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js
deleted file mode 100644
index 11880eacd..000000000
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import OwnerDrawingsForm from './OwnerDrawings/OwnerDrawingsForm';
-import OtherExpenseForm from './OtherExpense/OtherExpenseForm';
-import TransferToAccountForm from './TransferToAccount/TransferToAccountForm';
-
-export default function MoneyOutDialogForm({ accountType }) {
-  // Handle from transaction.
-  const handleFromTransaction = () => {
-    switch (accountType) {
-      case 'ONWERS_DRAWING':
-        return <OwnerDrawingsForm />;
-
-      case 'OTHER_EXPENSE':
-        return <OtherExpenseForm />;
-
-      case 'TRANSFER_TO_ACCOUNT':
-        return <TransferToAccountForm />;
-      default:
-        break;
-    }
-  };
-
-  return <React.Fragment>{handleFromTransaction()}</React.Fragment>;
-}
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js
similarity index 60%
rename from src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js
rename to src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js
index e0564ab5a..fb11f772a 100644
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js
@@ -1,19 +1,23 @@
 import React from 'react';
 import { DialogContent } from 'components';
-import { useAccounts, useCreateCashflowTransaction } from 'hooks/query';
+import {
+  useAccounts,
+  useCreateCashflowTransaction,
+  useCashflowAccounts,
+} from 'hooks/query';
 
 const MoneyInDialogContent = React.createContext();
 
 /**
  * Money out dialog provider.
  */
-function MoneyOutProvider({ accountId, dialogName, ...props }) {
+function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
   // Fetches accounts list.
-  const {
-    isFetching: isAccountFetching,
-    isLoading: isAccountsLoading,
-    data: accounts,
-  } = useAccounts();
+  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
+
+  // Fetch cash flow list .
+  const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
+    useCashflowAccounts({}, { keepPreviousData: true });
 
   const { mutateAsync: createCashflowTransactionMutate } =
     useCreateCashflowTransaction();
@@ -25,8 +29,11 @@ function MoneyOutProvider({ accountId, dialogName, ...props }) {
   const provider = {
     accounts,
     accountId,
+    accountType,
     isAccountsLoading,
 
+    cashflowAccounts,
+
     submitPayload,
     dialogName,
 
@@ -35,7 +42,7 @@ function MoneyOutProvider({ accountId, dialogName, ...props }) {
   };
 
   return (
-    <DialogContent isLoading={isAccountsLoading}>
+    <DialogContent isLoading={isAccountsLoading || isCashFlowAccountsLoading}>
       <MoneyInDialogContent.Provider value={provider} {...props} />
     </DialogContent>
   );
diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js
similarity index 86%
rename from src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js
rename to src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js
index b8ed31d47..cd7b987e7 100644
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js
@@ -3,15 +3,17 @@ import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import { FormattedMessage as T } from 'components';
 
-import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
 import { compose } from 'utils';
 
 /**
- * Owner drawings floating actions.
+ * Money out floating actions.
  */
-function OwnerDrawingsFloatingActions({
+function MoneyOutFloatingActions({
   // #withDialogActions
   closeDialog,
 }) {
@@ -73,4 +75,4 @@ function OwnerDrawingsFloatingActions({
   );
 }
 
-export default compose(withDialogActions)(OwnerDrawingsFloatingActions);
+export default compose(withDialogActions)(MoneyOutFloatingActions);
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
similarity index 77%
rename from src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js
rename to src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
index 13513022e..6a5c08dcb 100644
--- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
@@ -8,10 +8,11 @@ import intl from 'react-intl-universal';
 import 'style/pages/CashFlow/CashflowTransactionForm.scss';
 
 import { AppToaster } from 'components';
-import { CreateOtherExpenseFormSchema } from './OtherExpenseForm.schema';
-import OtherExpenseFormContent from './OtherExpenseFormContent';
 
-import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+import MoneyOutFormContent from './MoneyOutFormContent';
+import { CreateMoneyOutSchema } from './MoneyOutForm.schema';
+
+import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
@@ -22,7 +23,7 @@ const defaultInitialValues = {
   date: moment(new Date()).format('YYYY-MM-DD'),
   amount: '',
   transaction_number: '',
-  transaction_type: 'other_expense',
+  transaction_type: '',
   reference_no: '',
   cashflow_account_id: '',
   credit_account_id: '',
@@ -30,10 +31,7 @@ const defaultInitialValues = {
   published: '',
 };
 
-/**
- * Other expense form.
- */
-function OtherExpenseForm({
+function MoneyOutForm({
   // #withDialogActions
   closeDialog,
 
@@ -43,6 +41,7 @@ function OtherExpenseForm({
   const {
     dialogName,
     accountId,
+    accountType,
     createCashflowTransactionMutate,
     submitPayload,
   } = useMoneyOutDialogContext();
@@ -51,6 +50,7 @@ function OtherExpenseForm({
   const initialValues = {
     ...defaultInitialValues,
     currency_code: base_currency,
+    transaction_type: accountType,
     cashflow_account_id: accountId,
   };
 
@@ -74,19 +74,20 @@ function OtherExpenseForm({
         setSubmitting(true);
       });
   };
-
   return (
-    <Formik
-      validationSchema={CreateOtherExpenseFormSchema}
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
-    >
-      <OtherExpenseFormContent />
-    </Formik>
+    <div>
+      <Formik
+        validationSchema={CreateMoneyOutSchema}
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        <MoneyOutFormContent />
+      </Formik>
+    </div>
   );
 }
 
 export default compose(
   withDialogActions,
   withCurrentOrganization(),
-)(OtherExpenseForm);
+)(MoneyOutForm);
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js
similarity index 80%
rename from src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js
rename to src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js
index 39b71ab31..08228e2b6 100644
--- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js
@@ -8,9 +8,7 @@ const Schema = Yup.object().shape({
   transaction_number: Yup.string(),
   transaction_type: Yup.string().required(),
   reference_no: Yup.string(),
-  credit_account_id: Yup.number()
-    .required()
-    .label(intl.get('account')),
+  credit_account_id: Yup.number().required(),
   cashflow_account_id: Yup.string().required(),
   description: Yup.string()
     .min(3)
@@ -19,4 +17,4 @@ const Schema = Yup.object().shape({
   published: Yup.boolean(),
 });
 
-export const CreateTransferToAccountFormSchema = Schema;
+export const CreateMoneyOutSchema = Schema;
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js
new file mode 100644
index 000000000..b44581433
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import MoneyOutFormFields from './MoneyOutFormFields';
+import MoneyOutFloatingActions from './MoneyOutFloatingActions';
+
+/**
+ * Money out form content.
+ */
+export default function MoneyOutFormContent() {
+  return (
+    <Form>
+      <MoneyOutFormFields />
+      <MoneyOutFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js
new file mode 100644
index 000000000..0b3a18630
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Classes } from '@blueprintjs/core';
+
+import { If } from 'components';
+
+import MoneyOutContentFields from './MoneyOutContentFields';
+import TransactionTypeFields from './TransactionTypeFields';
+import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
+
+/**
+ * Money out form fields.
+ */
+function MoneyOutFormFields() {
+  // Money in dialog context.
+  const { accountId, accountType } = useMoneyOutDialogContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <If condition={!accountId}>
+        <TransactionTypeFields />
+      </If>
+      <MoneyOutContentFields accountType={accountType} />
+    </div>
+  );
+}
+
+export default MoneyOutFormFields;
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js
deleted file mode 100644
index acd9877e9..000000000
--- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { Intent, Button, Classes } from '@blueprintjs/core';
-import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'components';
-
-import { useMoneyOutDialogContext } from '../MoneyOutProvider';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
-
-/**
- * Other expense floating actions.
- */
-function OtherExpenseFloatingActions({
-  // #withDialogActions
-  closeDialog,
-}) {
-  // Formik context.
-  const { isSubmitting, submitForm } = useFormikContext();
-  //  money in  dialog context.
-  const { dialogName, setSubmitPayload, submitPayload } =
-    useMoneyOutDialogContext();
-
-  // handle submit as draft button click.
-  const handleSubmitDraftBtnClick = (event) => {
-    setSubmitPayload({ publish: false });
-    submitForm();
-  };
-
-  // Handle submit  button click.
-  const handleSubmittBtnClick = (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
-          disabled={isSubmitting}
-          loading={isSubmitting && !submitPayload.publish}
-          style={{ minWidth: '75px' }}
-          type="submit"
-          onClick={handleSubmitDraftBtnClick}
-        >
-          {<T id={'save_as_draft'} />}
-        </Button>
-
-        <Button
-          intent={Intent.PRIMARY}
-          disabled={isSubmitting}
-          loading={isSubmitting && submitPayload.publish}
-          style={{ minWidth: '75px' }}
-          type="submit"
-          onClick={handleSubmittBtnClick}
-        >
-          {<T id={'save_and_publish'} />}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default compose(withDialogActions)(OtherExpenseFloatingActions);
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js
deleted file mode 100644
index fc4d58460..000000000
--- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as Yup from 'yup';
-import intl from 'react-intl-universal';
-import { DATATYPES_LENGTH } from 'common/dataTypes';
-
-const Schema = Yup.object().shape({
-  date: Yup.date().required().label(intl.get('date')),
-  amount: Yup.number().required().label(intl.get('amount')),
-  transaction_number: Yup.string(),
-  transaction_type: Yup.string().required(),
-  reference_no: Yup.string(),
-  credit_account_id: Yup.number()
-    .required()
-    .label(intl.get('other_expense_account')),
-  cashflow_account_id: Yup.string().required(),
-  description: Yup.string()
-    .min(3)
-    .max(DATATYPES_LENGTH.TEXT)
-    .label(intl.get('description')),
-  published: Yup.boolean(),
-});
-
-export const CreateOtherExpenseFormSchema = Schema;
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js
deleted file mode 100644
index 4f578485a..000000000
--- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-
-import OtherExpnseFormFields from './OtherExpnseFormFields';
-import OtherExpenseFloatingActions from './OtherExpenseFloatingActions';
-
-/**
- * Other expense form content.
- */
-export default function OtherExpenseFormContent() {
-  return (
-    <Form>
-      <OtherExpnseFormFields />
-      <OtherExpenseFloatingActions />
-    </Form>
-  );
-}
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
index 93cabd62d..39833ff96 100644
--- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
@@ -29,7 +29,7 @@ import {
   handleDateChange,
 } from 'utils';
 import { CLASSES } from 'common/classes';
-import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 
 /**
  * Other expense form fields.
@@ -41,7 +41,7 @@ function OtherExpnseFormFields() {
   const amountFieldRef = useAutofocus();
 
   return (
-    <div className={Classes.DIALOG_BODY}>
+    <React.Fragment>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -188,7 +188,7 @@ function OtherExpnseFormFields() {
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </React.Fragment>
   );
 }
 
diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js
deleted file mode 100644
index 267ad4284..000000000
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-import { Intent } from '@blueprintjs/core';
-import { Formik } from 'formik';
-import { omit } from 'lodash';
-import intl from 'react-intl-universal';
-
-import 'style/pages/CashFlow/CashflowTransactionForm.scss';
-
-import { AppToaster } from 'components';
-import { CreateOwnerDrawingsFormSchema } from './OwnerDrawingsForm.schema';
-import OwnerDrawingsFormContent from './OwnerDrawingsFormContent';
-
-import { useMoneyOutDialogContext } from '../MoneyOutProvider';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
-
-import { compose } from 'utils';
-
-const defaultInitialValues = {
-  date: moment(new Date()).format('YYYY-MM-DD'),
-  amount: '',
-  transaction_number: '',
-  transaction_type: 'onwers_drawing',
-  reference_no: '',
-  cashflow_account_id: '',
-  credit_account_id: '',
-  description: '',
-  published: '',
-};
-
-/**
- * Owner drawings form.
- */
-function OwnerDrawingsForm({
-  // #withDialogActions
-  closeDialog,
-
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
-  const {
-    dialogName,
-    accountId,
-    submitPayload,
-    createCashflowTransactionMutate,
-  } = useMoneyOutDialogContext();
-
-  // Initial form values.
-  const initialValues = {
-    ...defaultInitialValues,
-    currency_code: base_currency,
-    cashflow_account_id: accountId,
-  };
-  // Handles the form submit.
-  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    const form = {
-      ...omit(values, ['currency_code']),
-      published: submitPayload.publish,
-    };
-    setSubmitting(true);
-    createCashflowTransactionMutate(form)
-      .then(() => {
-        closeDialog(dialogName);
-
-        AppToaster.show({
-          message: intl.get('cash_flow_transaction_success_message'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .finally(() => {
-        setSubmitting(true);
-      });
-  };
-
-  return (
-    <Formik
-      validationSchema={CreateOwnerDrawingsFormSchema}
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
-    >
-      <OwnerDrawingsFormContent />
-    </Formik>
-  );
-}
-
-export default compose(
-  withDialogActions,
-  withCurrentOrganization(),
-)(OwnerDrawingsForm);
diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js
deleted file mode 100644
index dfc02dc6e..000000000
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as Yup from 'yup';
-import intl from 'react-intl-universal';
-import { DATATYPES_LENGTH } from 'common/dataTypes';
-
-const Schema = Yup.object().shape({
-  date: Yup.date().required().label(intl.get('date')),
-  amount: Yup.number().required().label(intl.get('amount')),
-  transaction_number: Yup.string(),
-  transaction_type: Yup.string().required(),
-  reference_no: Yup.string(),
-  credit_account_id: Yup.number()
-    .required()
-    .label(intl.get('cash_flow_transaction.label_equity_account')),
-  cashflow_account_id: Yup.string().required(),
-  description: Yup.string()
-    .min(3)
-    .max(DATATYPES_LENGTH.TEXT)
-    .label(intl.get('description')),
-  published: Yup.boolean(),
-});
-
-export const CreateOwnerDrawingsFormSchema = Schema;
diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormContent.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormContent.js
deleted file mode 100644
index cab946864..000000000
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormContent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-
-import OwnerDrawingsFormFields from './OwnerDrawingsFormFields';
-import OwnerDrawingsFloatingActions from './OwnerDrawingsFloatingActions';
-
-/**
- * Owner drawings form content.
- */
-export default function OwnerDrawingsFormContent() {
-  return (
-    <Form>
-      <OwnerDrawingsFormFields />
-      <OwnerDrawingsFloatingActions />
-    </Form>
-  );
-}
diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
index b3e08aedc..d38611321 100644
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
@@ -28,7 +28,7 @@ import {
   handleDateChange,
 } from 'utils';
 import { CLASSES } from 'common/classes';
-import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 
 /**
  * Owner drawings form fields.
@@ -40,7 +40,7 @@ function OwnerDrawingsFormFields() {
   const amountFieldRef = useAutofocus();
 
   return (
-    <div className={Classes.DIALOG_BODY}>
+    <React.Fragment>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -112,7 +112,6 @@ function OwnerDrawingsFormFields() {
                 onChange={(amount) => {
                   setFieldValue('amount', amount);
                 }}
-                
                 inputRef={(ref) => (amountFieldRef.current = ref)}
                 intent={inputIntent({ error, touched })}
               />
@@ -185,7 +184,7 @@ function OwnerDrawingsFormFields() {
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </React.Fragment>
   );
 }
 
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js b/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js
new file mode 100644
index 000000000..d18c9abab
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { FormGroup } from '@blueprintjs/core';
+import classNames from 'classnames';
+import {
+  FormattedMessage as T,
+  AccountsSuggestField,
+  FieldRequiredHint,
+  ListSelect,
+  Col,
+  Row,
+} from 'components';
+
+import { inputIntent } from 'utils';
+import { CLASSES } from 'common/classes';
+import { addMoneyOut } from '../../../common/cashflowOptions';
+
+import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
+
+/**
+ * Transaction type fields.
+ */
+function TransactionTypeFields() {
+  // Money in dialog context.
+  const { cashflowAccounts } = useMoneyOutDialogContext();
+
+  return (
+    <div className="trasnaction-type-fileds">
+      <Row>
+        <Col xs={5}>
+          {/*------------ Current account -----------*/}
+          <FastField name={'cashflow_account_id'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={'Current account'}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="cashflow_account_id" />}
+                minimal={true}
+                className={classNames(
+                  CLASSES.FILL,
+                  'form-group--cashflow_account_id',
+                )}
+              >
+                <AccountsSuggestField
+                  accounts={cashflowAccounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('cashflow_account_id', id)
+                  }
+                  inputProps={{
+                    intent: inputIntent({ error, touched }),
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+          {/*------------ Transaction type -----------*/}
+        </Col>
+        <Col xs={5}>
+          <FastField name={'transaction_type'}>
+            {({
+              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 })}
+                className={classNames(
+                  CLASSES.FILL,
+                  'form-group--transaction_type',
+                )}
+              >
+                <ListSelect
+                  items={addMoneyOut}
+                  onItemSelect={(type) => {
+                    setFieldValue('transaction_type', type.value);
+                  }}
+                  filterable={false}
+                  selectedItem={value}
+                  selectedItemProp={'value'}
+                  textProp={'name'}
+                  popoverProps={{ minimal: true }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default TransactionTypeFields;
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js
deleted file mode 100644
index ce428f017..000000000
--- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { Intent, Button, Classes } from '@blueprintjs/core';
-import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'components';
-
-import { useMoneyOutDialogContext } from '../MoneyOutProvider';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
-
-function TransferToAccountFloatingActions({
-  // #withDialogActions
-  closeDialog,
-}) {
-  // Formik context.
-  const { isSubmitting, submitForm } = useFormikContext();
-  //  money in  dialog context.
-  const { dialogName, setSubmitPayload, submitPayload } =
-    useMoneyOutDialogContext();
-
-  // handle submit as draft button click.
-  const handleSubmitDraftBtnClick = (event) => {
-    setSubmitPayload({ publish: false });
-    submitForm();
-  };
-
-  // Handle submit  button click.
-  const handleSubmittBtnClick = (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
-          disabled={isSubmitting}
-          loading={isSubmitting && !submitPayload.publish}
-          style={{ minWidth: '75px' }}
-          type="submit"
-          onClick={handleSubmitDraftBtnClick}
-        >
-          {<T id={'save_as_draft'} />}
-        </Button>
-
-        <Button
-          intent={Intent.PRIMARY}
-          disabled={isSubmitting}
-          loading={isSubmitting && submitPayload.publish}
-          style={{ minWidth: '75px' }}
-          type="submit"
-          onClick={handleSubmittBtnClick}
-        >
-          {<T id={'save_and_publish'} />}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default compose(withDialogActions)(TransferToAccountFloatingActions);
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js
deleted file mode 100644
index d2b4b16e3..000000000
--- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-import { Intent } from '@blueprintjs/core';
-import { Formik } from 'formik';
-import { omit } from 'lodash';
-import intl from 'react-intl-universal';
-
-import 'style/pages/CashFlow/CashflowTransactionForm.scss';
-
-import { AppToaster } from 'components';
-import { CreateTransferToAccountFormSchema } from './TransferToAccountForm.schema';
-import TransferToAccountFromContent from './TransferToAccountFromContent';
-
-import { useMoneyOutDialogContext } from '../MoneyOutProvider';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
-
-import { compose } from 'utils';
-
-const defaultInitialValues = {
-  date: moment(new Date()).format('YYYY-MM-DD'),
-  amount: '',
-  transaction_number: '',
-  transaction_type: 'transfer_from_account',
-  reference_no: '',
-  cashflow_account_id: '',
-  credit_account_id: '',
-  description: '',
-  published: '',
-};
-
-/**
- * Transfer to account form.
- */
-function TransferToAccountForm({
-  // #withDialogActions
-  closeDialog,
-
-  // #withCurrentOrganization
-  organization: { base_currency },
-}) {
-  const {
-    dialogName,
-    accountId,
-    createCashflowTransactionMutate,
-    submitPayload,
-  } = useMoneyOutDialogContext();
-
-  // Initial form values.
-  const initialValues = {
-    ...defaultInitialValues,
-    currency_code: base_currency,
-    cashflow_account_id: accountId,
-  };
-
-  // Handles the form submit.
-  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    const form = {
-      ...omit(values, ['currency_code']),
-      published: submitPayload.publish,
-    };
-    setSubmitting(true);
-    createCashflowTransactionMutate(form)
-      .then(() => {
-        closeDialog(dialogName);
-
-        AppToaster.show({
-          message: intl.get('cash_flow_transaction_success_message'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .finally(() => {
-        setSubmitting(true);
-      });
-  };
-
-  return (
-    <Formik
-      validationSchema={CreateTransferToAccountFormSchema}
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
-    >
-      <TransferToAccountFromContent />
-    </Formik>
-  );
-}
-
-export default compose(
-  withDialogActions,
-  withCurrentOrganization(),
-)(TransferToAccountForm);
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
index 5bf120c87..7863a0637 100644
--- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
@@ -29,7 +29,7 @@ import {
   handleDateChange,
 } from 'utils';
 import { CLASSES } from 'common/classes';
-import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 
 /**
  * Transfer to account form fields.
@@ -41,7 +41,7 @@ function TransferToAccountFormFields() {
   const accountRef = useAutofocus();
 
   return (
-    <div className={Classes.DIALOG_BODY}>
+    <React.Fragment>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -190,7 +190,7 @@ function TransferToAccountFormFields() {
           </FormGroup>
         )}
       </FastField>
-    </div>
+    </React.Fragment>
   );
 }
 
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js
deleted file mode 100644
index 508f0b330..000000000
--- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-
-import TransferToAccountFormFields from './TransferToAccountFormFields';
-import TransferToAccountFloatingActions from './TransferToAccountFloatingActions';
-
-export default function TransferToAccountFromContent() {
-  return (
-    <Form>
-      <TransferToAccountFormFields />
-      <TransferToAccountFloatingActions />
-    </Form>
-  );
-}
diff --git a/src/containers/Dialogs/MoneyOutDialog/index.js b/src/containers/Dialogs/MoneyOutDialog/index.js
index abc346c36..2cf31320e 100644
--- a/src/containers/Dialogs/MoneyOutDialog/index.js
+++ b/src/containers/Dialogs/MoneyOutDialog/index.js
@@ -20,7 +20,7 @@ function MoneyOutDialog({
     <Dialog
       name={dialogName}
       title={intl.get('cash_flow_transaction.money_out', {
-        value: payload.account_type,
+        value: payload.account_type?.name,
       })}
       isOpen={isOpen}
       canEscapeJeyClose={true}
@@ -31,7 +31,7 @@ function MoneyOutDialog({
         <MoneyOutDialogContent
           dialogName={dialogName}
           accountId={payload.account_id}
-          accountType={payload.account_type}
+          accountType={payload.account_type?.value}
         />
       </DialogSuspense>
     </Dialog>

From e29db07c3249a6874bc72d64aa4d13d920209354 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 23 Oct 2021 20:59:25 +0200
Subject: [PATCH 3/3] feat: money in & out Hotkeys.

---
 src/components/Dashboard/GlobalHotkeys.js           | 13 ++++++++++---
 .../Dialogs/MoneyInDialog/MoneyInFormFields.js      |  7 +++++--
 .../Dialogs/MoneyInDialog/TransactionTypeFields.js  |  8 ++++----
 src/containers/Dialogs/MoneyInDialog/index.js       |  2 ++
 .../Dialogs/MoneyOutDialog/MoneyOutFormFields.js    |  6 ++++--
 .../Dialogs/MoneyOutDialog/TransactionTypeFields.js |  8 ++++----
 src/lang/en/index.json                              |  3 ++-
 7 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/Dashboard/GlobalHotkeys.js b/src/components/Dashboard/GlobalHotkeys.js
index 3ca7a2b0b..2bf734b9e 100644
--- a/src/components/Dashboard/GlobalHotkeys.js
+++ b/src/components/Dashboard/GlobalHotkeys.js
@@ -3,11 +3,16 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useHistory } from 'react-router-dom';
 import { getDashboardRoutes } from 'routes/dashboard';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
 import { compose } from 'utils';
 
 function GlobalHotkeys({
   // #withDashboardActions
   toggleSidebarExpend,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const history = useHistory();
   const routes = getDashboardRoutes();
@@ -16,8 +21,8 @@ function GlobalHotkeys({
     .filter(({ hotkey }) => hotkey)
     .map(({ hotkey }) => hotkey)
     .toString();
-  
-    const handleSidebarToggleBtn = () => {
+
+  const handleSidebarToggleBtn = () => {
     toggleSidebarExpend();
   };
   useHotkeys(
@@ -32,7 +37,9 @@ function GlobalHotkeys({
     [history],
   );
   useHotkeys('ctrl+/', (event, handle) => handleSidebarToggleBtn());
+  useHotkeys('shift+q', (event, handle) => openDialog('money-in', {}));
+  useHotkeys('shift+d', (event, handle) => openDialog('money-out', {}));
   return <div></div>;
 }
 
-export default compose(withDashboardActions)(GlobalHotkeys);
+export default compose(withDashboardActions, withDialogActions)(GlobalHotkeys);
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js b/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js
index 1900e2479..08fcab957 100644
--- a/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useFormikContext } from 'formik';
 import { Classes } from '@blueprintjs/core';
 
 import { If } from 'components';
@@ -11,15 +12,17 @@ import { useMoneyInDailogContext } from './MoneyInDialogProvider';
  * Money in form fields.
  */
 function MoneyInFormFields() {
+  const { values } = useFormikContext();
+
   // Money in dialog context.
-  const { accountId, accountType } = useMoneyInDailogContext();
+  const { accountId } = useMoneyInDailogContext();
 
   return (
     <div className={Classes.DIALOG_BODY}>
       <If condition={!accountId}>
         <TransactionTypeFields />
       </If>
-      <MoneyInContentFields accountType={accountType} />
+      <MoneyInContentFields accountType={values.transaction_type} />
     </div>
   );
 }
diff --git a/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js b/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js
index 1a62527b3..ecc3b0bb0 100644
--- a/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, Field, ErrorMessage } from 'formik';
 import { Classes, FormGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
@@ -32,7 +32,7 @@ export default function TransactionTypeFields() {
           <FastField name={'cashflow_account_id'}>
             {({ form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
-                label={'Current account'}
+                label={<T id={'cash_flow_transaction.label_current_account'} />}
                 labelInfo={<FieldRequiredHint />}
                 intent={inputIntent({ error, touched })}
                 helperText={<ErrorMessage name="cashflow_account_id" />}
@@ -57,7 +57,7 @@ export default function TransactionTypeFields() {
           {/*------------ Transaction type -----------*/}
         </Col>
         <Col xs={5}>
-          <FastField name={'transaction_type'}>
+          <Field name={'transaction_type'}>
             {({
               form: { values, setFieldValue },
               field: { value },
@@ -86,7 +86,7 @@ export default function TransactionTypeFields() {
                 />
               </FormGroup>
             )}
-          </FastField>
+          </Field>
         </Col>
       </Row>
     </div>
diff --git a/src/containers/Dialogs/MoneyInDialog/index.js b/src/containers/Dialogs/MoneyInDialog/index.js
index e44241225..d5098a413 100644
--- a/src/containers/Dialogs/MoneyInDialog/index.js
+++ b/src/containers/Dialogs/MoneyInDialog/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
+
 import { compose } from 'redux';
 
 const MoneyInDialogContent = React.lazy(() => import('./MoneyInDialogContent'));
@@ -14,6 +15,7 @@ function MoneyInDialog({
   payload = { account_type: null, account_id: null },
   isOpen,
 }) {
+
   return (
     <Dialog
       name={dialogName}
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js
index 0b3a18630..f3a97913a 100644
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useFormikContext } from 'formik';
 import { Classes } from '@blueprintjs/core';
 
 import { If } from 'components';
@@ -12,14 +13,15 @@ import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
  */
 function MoneyOutFormFields() {
   // Money in dialog context.
-  const { accountId, accountType } = useMoneyOutDialogContext();
+  const { accountId } = useMoneyOutDialogContext();
 
+  const { values } = useFormikContext();
   return (
     <div className={Classes.DIALOG_BODY}>
       <If condition={!accountId}>
         <TransactionTypeFields />
       </If>
-      <MoneyOutContentFields accountType={accountType} />
+      <MoneyOutContentFields accountType={values.transaction_type} />
     </div>
   );
 }
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js b/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js
index d18c9abab..e00d7e512 100644
--- a/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, Field, ErrorMessage } from 'formik';
 import { FormGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
@@ -32,7 +32,7 @@ function TransactionTypeFields() {
           <FastField name={'cashflow_account_id'}>
             {({ form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
-                label={'Current account'}
+                label={<T id={'cash_flow_transaction.label_current_account'} />}
                 labelInfo={<FieldRequiredHint />}
                 intent={inputIntent({ error, touched })}
                 helperText={<ErrorMessage name="cashflow_account_id" />}
@@ -57,7 +57,7 @@ function TransactionTypeFields() {
           {/*------------ Transaction type -----------*/}
         </Col>
         <Col xs={5}>
-          <FastField name={'transaction_type'}>
+          <Field name={'transaction_type'}>
             {({
               form: { values, setFieldValue },
               field: { value },
@@ -86,7 +86,7 @@ function TransactionTypeFields() {
                 />
               </FormGroup>
             )}
-          </FastField>
+          </Field>
         </Col>
       </Row>
     </div>
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 2fd1e385a..41a8cc2b6 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1388,7 +1388,8 @@
   "cash_flow_transaction.other_expense_account":"Other expense account",
   "save_and_publish": "Save & Publish",
   "cash_flow_transaction.label_transfer_from_account":"Transfer from account",
-  "cash_flow_transaction.label_transfer_to_account":"Transfer to account"
+  "cash_flow_transaction.label_transfer_to_account":"Transfer to account",
+  "cash_flow_transaction.label_current_account":"Current account"
  
 }