feat(account): add currency select.

src/common/accountTypes.js

@@ -221,3 +221,5 @@ export const ACCOUNT_TYPES = [
     incomeSheet: true,
   },
 ];
+
+export const FOREIGN_CURRENCY_ACCOUNTS = ['cash', 'bank'];

src/containers/Dialogs/AccountDialog/AccountDialogForm.js

@@ -25,6 +25,7 @@ const defaultInitialValues = {
   name: '',
   code: '',
   description: '',
+  currency_code:'',
   subaccount: false,
 };
 

src/containers/Dialogs/AccountDialog/AccountDialogFormContent.js

@@ -17,12 +17,14 @@ import {
   Hint,
   AccountsSelectList,
   AccountsTypesSelect,
+  CurrencySelect,
 } from 'components';
 import withAccounts from 'containers/Accounts/withAccounts';
 
 import { inputIntent } from 'utils';
 import { compose } from 'redux';
 import { useAutofocus } from 'hooks';
+import { FOREIGN_CURRENCY_ACCOUNTS } from '../../../common/accountTypes';
 import { useAccountDialogContext } from './AccountDialogProvider';
 
 /**
@@ -37,7 +39,7 @@ function AccountFormDialogFields({
   const accountNameFieldRef = useAutofocus();
 
   // Account form context.
-  const { accounts, accountsTypes } = useAccountDialogContext();
+  const { accounts, accountsTypes, currencies } = useAccountDialogContext();
 
   return (
     <Form>
@@ -58,6 +60,7 @@ function AccountFormDialogFields({
                 defaultSelectText={<T id={'select_account_type'} />}
                 onTypeSelected={(accountType) => {
                   form.setFieldValue('account_type', accountType.key);
+                  form.setFieldValue('currency_code', '');
                 }}
                 disabled={
                   action === 'edit' ||
@@ -159,6 +162,24 @@ function AccountFormDialogFields({
           </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

src/containers/Dialogs/AccountDialog/AccountDialogProvider.js

@@ -3,6 +3,7 @@ import { DialogContent } from 'components';
 import {
   useCreateAccount,
   useAccountsTypes,
+  useCurrencies,
   useAccount,
   useAccounts,
   useEditAccount,
@@ -30,16 +31,17 @@ function AccountDialogProvider({
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
   // Fetches accounts types.
-  const {
+  const { data: accountsTypes, isLoading: isAccountsTypesLoading } =
-    data: accountsTypes,
+    useAccountsTypes();
-    isLoading: isAccountsTypesLoading,
-  } = useAccountsTypes();
 
   // Fetches the specific account details.
   const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
     enabled: !!accountId,
   });
 
+  // Handle fetch Currencies data table
+  const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
+
   const isNewMode = !accountId;
 
   // Provider payload.
@@ -49,6 +51,7 @@ function AccountDialogProvider({
     parentAccountId,
     action,
     accountType,
+    currencies,
 
     createAccountMutate,
     editAccountMutate,
@@ -57,11 +60,15 @@ function AccountDialogProvider({
     account,
 
     isAccountsLoading,
-    isNewMode
+    isCurrenciesLoading,
+    isNewMode,
   };
 
   const isLoading =
-    isAccountsLoading || isAccountsTypesLoading || isAccountLoading;
+    isAccountsLoading ||
+    isAccountsTypesLoading ||
+    isAccountLoading ||
+    isCurrenciesLoading;
 
   return (
     <DialogContent isLoading={isLoading}>