WIP / exchangeRate / localize

2026-02-16 21:00:31 +00:00 · 2020-05-10 20:44:23 +02:00
parent e590a21740
commit cceb4786c2
55 changed files with 2339 additions and 971 deletions
--- a/client/src/containers/Dialogs/AccountFormDialog.js
+++ b/client/src/containers/Dialogs/AccountFormDialog.js
@@ -8,12 +8,13 @@ import {
  TextArea,
  MenuItem,
  Checkbox,
-  Position
+  Position,
 } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import { omit } from 'lodash';
 import { useQuery, queryCache } from 'react-query';

@@ -27,7 +28,6 @@ import Icon from 'components/Icon';
 import ErrorMessage from 'components/ErrorMessage';
 import { fetchAccountTypes } from 'store/accounts/accounts.actions';

-
 function AccountFormDialog({
  name,
  payload,
@@ -57,25 +57,29 @@ function AccountFormDialog({
    account_type_id: Yup.string()
      .nullable()
      .required(intl.formatMessage({ id: 'required' })),
-    description: Yup.string().trim()
+    description: Yup.string().trim(),
  });

-  const initialValues = useMemo(() => ({
-    account_type_id: null,
-    name: '',
-    description: '',
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      account_type_id: null,
+      name: '',
+      description: '',
+    }),
+    []
+  );

  const [selectedAccountType, setSelectedAccountType] = useState(null);
  const [selectedSubaccount, setSelectedSubaccount] = useState(
-    payload.action === 'new_child' ? 
-      accounts.find(a => a.id === payload.id) : null,
+    payload.action === 'new_child'
+      ? accounts.find((a) => a.id === payload.id)
+      : null
  );

  const transformApiErrors = (errors) => {
    const fields = {};
-    if (errors.find(e => e.type === 'NOT_UNIQUE_CODE')) {
-      fields.code = 'Account code is not unqiue.'
+    if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
+      fields.code = 'Account code is not unqiue.';
    }
    return fields;
  };
@@ -84,7 +88,7 @@ function AccountFormDialog({
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
-      ...(payload.action === 'edit' && account) ? account : initialValues,
+      ...(payload.action === 'edit' && account ? account : initialValues),
    },
    validationSchema: accountFormValidationSchema,
    onSubmit: (values, { setSubmitting, setErrors }) => {
@@ -93,43 +97,48 @@ function AccountFormDialog({
      if (payload.action === 'edit') {
        requestEditAccount({
          payload: payload.id,
-          form: { ...omit(values, [...exclude, 'account_type_id']) }
-        }).then((response) => {
-          closeDialog(name);
-          AppToaster.show({
-            message: 'the_account_has_been_edited',
-            intent: Intent.SUCCESS,
+          form: { ...omit(values, [...exclude, 'account_type_id']) },
+        })
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_account_has_been_edited',
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            queryCache.refetchQueries('accounts-table', { force: true });
+          })
+          .catch((errors) => {
+            setSubmitting(false);
+            setErrors(transformApiErrors(errors));
          });
-          setSubmitting(false);
-          queryCache.refetchQueries('accounts-table', { force: true });
-        }).catch((errors) => {
-          setSubmitting(false); 
-          setErrors(transformApiErrors(errors));
-        });
      } else {
-        requestSubmitAccount({ form: { ...omit(values, exclude) } }).then((response) => {
-          closeDialog(name);
-          AppToaster.show({
-            message: 'the_account_has_been_submit',
-            intent: Intent.SUCCESS,
-            position: Position.BOTTOM,
+        requestSubmitAccount({ form: { ...omit(values, exclude) } })
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_account_has_been_submit',
+              intent: Intent.SUCCESS,
+              position: Position.BOTTOM,
+            });
+            setSubmitting(false);
+            queryCache.refetchQueries('accounts-table', { force: true });
+          })
+          .catch((errors) => {
+            setSubmitting(false);
+            setErrors(transformApiErrors(errors));
          });
-          setSubmitting(false);
-          queryCache.refetchQueries('accounts-table', { force: true });
-        }).catch((errors) => {
-          setSubmitting(false);
-          setErrors(transformApiErrors(errors));
-        });
      }
-    }
+    },
  });
-  const { errors, values, touched } = useMemo(() => (formik), [formik]);
+  const { errors, values, touched } = useMemo(() => formik, [formik]);

  // Set default account type.
  useEffect(() => {
    if (account && account.account_type_id) {
-      const defaultType = accountsTypes.find((t) =>
-        t.id === account.account_type_id);
+      const defaultType = accountsTypes.find(
+        (t) => t.id === account.account_type_id
+      );

      defaultType && setSelectedAccountType(defaultType);
    }
@@ -155,44 +164,64 @@ function AccountFormDialog({
  // Account item of select accounts field.
  const accountItem = (item, { handleClick, modifiers, query }) => {
    return (
-      <MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
+      <MenuItem
+        text={item.name}
+        label={item.code}
+        key={item.id}
+        onClick={handleClick}
+      />
    );
  };

  // Filters accounts items.
-  const filterAccountsPredicater = useCallback((query, account, _index, exactMatch) => {
-    const normalizedTitle = account.name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
+  const filterAccountsPredicater = useCallback(
+    (query, account, _index, exactMatch) => {
+      const normalizedTitle = account.name.toLowerCase();
+      const normalizedQuery = query.toLowerCase();

-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
-    }
-  }, []);
+      if (exactMatch) {
+        return normalizedTitle === normalizedQuery;
+      } else {
+        return (
+          `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
+        );
+      }
+    },
+    []
+  );

  // Handles dialog close.
-  const handleClose = useCallback(() => { closeDialog(name); }, [closeDialog, name]);
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [closeDialog, name]);

  // Fetches accounts list.
-  const fetchAccountsList = useQuery('accounts-list',
-    () => requestFetchAccounts(), { manual: true });
+  const fetchAccountsList = useQuery(
+    'accounts-list',
+    () => requestFetchAccounts(),
+    { manual: true }
+  );

  // Fetches accounts types.
-  const fetchAccountsTypes = useQuery('accounts-types-list', async () => {
-    await requestFetchAccountTypes();
-  }, { manual: true });
+  const fetchAccountsTypes = useQuery(
+    'accounts-types-list',
+    async () => {
+      await requestFetchAccountTypes();
+    },
+    { manual: true }
+  );

  // Fetch the given account id on edit mode.
  const fetchAccount = useQuery(
    payload.action === 'edit' && ['account', payload.id],
    (key, id) => requestFetchAccount(id),
-    { manual: true });
+    { manual: true }
+  );

-  const isFetching = (
-    fetchAccountsList.isFetching || 
-    fetchAccountTypes.isFetching || 
-    fetchAccount.isFetching);
+  const isFetching =
+    fetchAccountsList.isFetching ||
+    fetchAccountTypes.isFetching ||
+    fetchAccount.isFetching;

  // Fetch requests on dialog opening.
  const onDialogOpening = useCallback(() => {
@@ -201,16 +230,22 @@ function AccountFormDialog({
    fetchAccount.refetch();
  }, []);

-  const onChangeAccountType = useCallback((accountType) => {
-    setSelectedAccountType(accountType);
-    formik.setFieldValue('account_type_id', accountType.id);
-  }, [setSelectedAccountType, formik]);
+  const onChangeAccountType = useCallback(
+    (accountType) => {
+      setSelectedAccountType(accountType);
+      formik.setFieldValue('account_type_id', accountType.id);
+    },
+    [setSelectedAccountType, formik]
+  );

  // Handles change sub-account.
-  const onChangeSubaccount = useCallback((account) => {
-    setSelectedSubaccount(account);
-    formik.setFieldValue('parent_account_id', account.id);
-  }, [setSelectedSubaccount, formik]);
+  const onChangeSubaccount = useCallback(
+    (account) => {
+      setSelectedSubaccount(account);
+      formik.setFieldValue('parent_account_id', account.id);
+    },
+    [setSelectedSubaccount, formik]
+  );

  const onDialogClosed = useCallback(() => {
    formik.resetForm();
@@ -218,21 +253,25 @@ function AccountFormDialog({
    setSelectedAccountType(null);
  }, [formik]);

-  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
+  const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);

  const subAccountLabel = useMemo(() => {
-    return (<span>{'Sub account?'} <Icon icon="info-circle" iconSize={12} /></span>);
+    return (
+      <span>
+        <T id={'sub_account'}/> <Icon icon='info-circle' iconSize={12} />
+      </span>
+    );
  }, []);

-  const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
+  const requiredSpan = useMemo(() => <span class='required'>*</span>, []);

  return (
    <Dialog
      name={name}
-      title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
+      title={payload.action === 'edit' ? <T id={'edit_account'}/> : <T id={'new_account'}/>}
      className={{
        'dialog--loading': isFetching,
-        'dialog--account-form': true
+        'dialog--account-form': true,
      }}
      autoFocus={true}
      canEscapeKeyClose={true}
@@ -245,15 +284,18 @@ function AccountFormDialog({
      <form onSubmit={formik.handleSubmit}>
        <div className={Classes.DIALOG_BODY}>
          <FormGroup
-            label={'Account Type'}
+            label={<T id={'account_type'}/>}
            labelInfo={requiredSpan}
            className={classNames(
              'form-group--account-type',
              'form-group--select-list',
-              Classes.FILL)}
+              Classes.FILL
+            )}
            inline={true}
-            helperText={<ErrorMessage name="account_type_id" {...formik} />}
-            intent={(errors.account_type_id && touched.account_type_id) && Intent.DANGER}
+            helperText={<ErrorMessage name='account_type_id' {...formik} />}
+            intent={
+              errors.account_type_id && touched.account_type_id && Intent.DANGER
+            }
          >
            <Select
              items={accountsTypes}
@@ -265,39 +307,42 @@ function AccountFormDialog({
            >
              <Button
                rightIcon='caret-down'
-                text={selectedAccountType ?
-                  selectedAccountType.name : 'Select account type'}
+                text={
+                  selectedAccountType
+                    ? selectedAccountType.name
+                    : 'Select account type'
+                }
                disabled={payload.action === 'edit'}
              />
            </Select>
          </FormGroup>

          <FormGroup
-            label={'Account Name'}
+            label={<T id={'account_name'}/>}
            labelInfo={requiredSpan}
            className={'form-group--account-name'}
-            intent={(errors.name && touched.name) && Intent.DANGER}
-            helperText={<ErrorMessage name="name" {...formik} />}
+            intent={errors.name && touched.name && Intent.DANGER}
+            helperText={<ErrorMessage name='name' {...formik} />}
            inline={true}
          >
            <InputGroup
              medium={true}
-              intent={(errors.name && touched.name) && Intent.DANGER}
+              intent={errors.name && touched.name && Intent.DANGER}
              {...formik.getFieldProps('name')}
            />
          </FormGroup>

          <FormGroup
-            label={'Account Code'}
+            label={<T id={'account_code'}/>}
            className={'form-group--account-code'}
-            intent={(errors.code && touched.code) && Intent.DANGER}
-            helperText={<ErrorMessage name="code" {...formik} />}
+            intent={errors.code && touched.code && Intent.DANGER}
+            helperText={<ErrorMessage name='code' {...formik} />}
            inline={true}
            labelInfo={infoIcon}
          >
            <InputGroup
              medium={true}
-              intent={(errors.code && touched.code) && Intent.DANGER}
+              intent={errors.code && touched.code && Intent.DANGER}
              {...formik.getFieldProps('code')}
            />
          </FormGroup>
@@ -316,11 +361,12 @@ function AccountFormDialog({

          {values.subaccount && (
            <FormGroup
-              label={'Parent Account'}
+              label={<T id={'parent_account'}/>}
              className={classNames(
                'form-group--parent-account',
                'form-group--select-list',
-                Classes.FILL)}
+                Classes.FILL
+              )}
              inline={true}
            >
              <Select
@@ -335,7 +381,9 @@ function AccountFormDialog({
                <Button
                  rightIcon='caret-down'
                  text={
-                    selectedSubaccount ? selectedSubaccount.name : 'Select Parent Account'
+                    selectedSubaccount
+                      ? selectedSubaccount.name
+                      : 'Select Parent Account'
                  }
                />
              </Select>
@@ -343,7 +391,7 @@ function AccountFormDialog({
          )}

          <FormGroup
-            label={'Description'}
+            label={<T id={'description'}/>}
            className={'form-group--description'}
            intent={formik.errors.description && Intent.DANGER}
            helperText={formik.errors.description && formik.errors.credential}
@@ -359,9 +407,13 @@ function AccountFormDialog({

        <div className={Classes.DIALOG_FOOTER}>
          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
-            <Button intent={Intent.PRIMARY} disabled={formik.isSubmitting} type='submit'>
-              {payload.action === 'edit' ? 'Edit' : 'Submit'}
+            <Button onClick={handleClose}><T id={'close'}/></Button>
+            <Button
+              intent={Intent.PRIMARY}
+              disabled={formik.isSubmitting}
+              type='submit'
+            >
+              {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
            </Button>
          </div>
        </div>
@@ -370,6 +422,4 @@ function AccountFormDialog({
  );
 }

-export default AccountFormDialogContainer(
-  AccountFormDialog,
-);
+export default AccountFormDialogContainer(AccountFormDialog);
--- a/client/src/containers/Dialogs/CurrencyDialog.js
+++ b/client/src/containers/Dialogs/CurrencyDialog.js
@@ -7,7 +7,7 @@ import {
  Intent,
 } from '@blueprintjs/core';
 import * as Yup from 'yup';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import { compose } from 'utils';
 import Dialog from 'components/Dialog';
@@ -30,15 +30,15 @@ function CurrencyDialog({
  requestEditCurrency,
  editCurrency,
 }) {
-  const intl = useIntl();
+  const {formatMessage} = useIntl();

  const ValidationSchema = Yup.object().shape({
    currency_name: Yup.string().required(
-      intl.formatMessage({ id: 'required' })
+      formatMessage({ id: 'required' })
    ),
    currency_code: Yup.string()
      .max(4)
-      .required(intl.formatMessage({ id: 'required' })),
+      .required(formatMessage({ id: 'required' })),
  });
  const initialValues = useMemo(
    () => ({
@@ -110,7 +110,7 @@ function CurrencyDialog({
  return (
    <Dialog
      name={name}
-      title={payload.action === 'edit' ? 'Edit Currency' : ' New Currency'}
+      title={payload.action === 'edit' ? <T id={'edit_currency'}/> : <T id={'new_currency'}/>}
      className={classNames(
        {
          'dialog--loading': fetchHook.pending,
@@ -126,7 +126,7 @@ function CurrencyDialog({
      <form onSubmit={formik.handleSubmit}>
        <div className={Classes.DIALOG_BODY}>
          <FormGroup
-            label={'Currency Name'}
+            label={<T id={'currency_name'}/>}
            labelInfo={requiredSpan}
            className={'form-group--currency-name'}
            intent={
@@ -144,7 +144,7 @@ function CurrencyDialog({
            />
          </FormGroup>
          <FormGroup
-            label={'Currency Code'}
+            label={<T id={'currency_code'}/>}
            labelInfo={requiredSpan}
            className={'form-group--currency-code'}
            intent={
@@ -164,9 +164,9 @@ function CurrencyDialog({
        </div>
        <div className={Classes.DIALOG_FOOTER}>
          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}><T id={'close'}/></Button>
            <Button intent={Intent.PRIMARY} type='submit'>
-              {payload.action === 'edit' ? 'Edit' : 'Submit'}
+            {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
            </Button>
          </div>
        </div>
--- a/client/src/containers/Dialogs/ExchangeRateDialog.js
+++ b/client/src/containers/Dialogs/ExchangeRateDialog.js
@@ -0,0 +1,282 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+  MenuItem,
+} from '@blueprintjs/core';
+import { pick } from 'lodash';
+import * as Yup from 'yup';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useFormik } from 'formik';
+import Dialog from 'components/Dialog';
+
+import { useQuery, queryCache } from 'react-query';
+import AppToaster from 'components/AppToaster';
+import ErrorMessage from 'components/ErrorMessage';
+import classNames from 'classnames';
+import { Select } from '@blueprintjs/select';
+import moment from 'moment';
+import { DateInput } from '@blueprintjs/datetime';
+import { momentFormatter } from 'utils';
+import ExchangeRatesDialogConnect from 'connectors/ExchangeRatesFromDialog.connect';
+
+function ExchangeRateDialog({
+  name,
+  payload,
+  isOpen,
+
+  openDialog,
+  closeDialog,
+  currencies,
+
+  requestSubmitExchangeRate,
+  requestFetchExchangeRates,
+  requestEditExchangeRate,
+  requestFetchCurrencies,
+  editExchangeRate,
+  addExchangeRatesTableQueries,
+}) {
+  const {formatMessage} = useIntl();
+
+  const [selectedItems, setSelectedItems] = useState({});
+
+  const validationSchema = Yup.object().shape({
+    exchange_rate: Yup.number().required(
+      formatMessage({ id: 'required' })
+    ),
+    currency_code: Yup.string()
+      .max(3)
+      .required(formatMessage({ id: 'required' })),
+    date: Yup.date().required(formatMessage({ id: 'required' })),
+  });
+
+  const initialValues = useMemo(
+    () => ({
+      exchange_rate: '',
+      currency_code: '',
+      date: moment(new Date()).format('YYYY-MM-DD'),
+    }),
+    []
+  );
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema,
+    initialValues: {
+      ...(payload.action === 'edit' &&
+        pick(editExchangeRate, Object.keys(initialValues))),
+    },
+    onSubmit: (values, { setSubmitting }) => {
+      if (payload.action === 'edit') {
+        requestEditExchangeRate(payload.id, values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_exchange_rate_has_been_edited',
+            });
+            setSubmitting(false);
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      } else {
+        requestSubmitExchangeRate(values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_exchangeRate_has_been_submit',
+            });
+            setSubmitting(false);
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      }
+    },
+  });
+
+  const { values, errors, touched } = useMemo(() => formik, [formik]);
+
+  const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
+
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [name, closeDialog]);
+
+  const fetchHook = useQuery('exchange-rates-dialog', () => {
+    return Promise.all([requestFetchExchangeRates(), requestFetchCurrencies()]);
+  });
+
+  const onDialogClosed = useCallback(() => {
+    formik.resetForm();
+    closeDialog(name);
+  }, [formik, closeDialog, name]);
+
+  const onDialogOpening = useCallback(() => {
+    fetchHook.refetch();
+  }, [fetchHook]);
+
+  const handleDateChange = useCallback(
+    (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      formik.setFieldValue('date', formatted);
+    },
+    [formik.setFieldValue]
+  );
+
+  const onItemsSelect = useCallback(
+    (filedName) => {
+      return (filed) => {
+        setSelectedItems({
+          ...selectedItems,
+          [filedName]: filed,
+        });
+        formik.setFieldValue(filedName, filed.currency_code);
+      };
+    },
+    [formik.setFieldValue, selectedItems]
+  );
+
+  const filterCurrencyCode = (query, currency_code, _index, exactMatch) => {
+    const normalizedTitle = currency_code.currency_code.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${currency_code.currency_code} ${normalizedTitle}`.indexOf(
+          normalizedQuery
+        ) >= 0
+      );
+    }
+  };
+
+  const currencyCodeRenderer = useCallback((CurrencyCode, { handleClick }) => {
+    return (
+      <MenuItem
+        className={'exchangeRate-menu'}
+        key={CurrencyCode.id}
+        text={CurrencyCode.currency_code}
+        onClick={handleClick}
+      />
+    );
+  }, []);
+
+  const getSelectedItemLabel = useCallback(
+    (fieldName, defaultLabel) => {
+      return typeof selectedItems[fieldName] !== 'undefined'
+        ? selectedItems[fieldName].currency_code
+        : defaultLabel;
+    },
+    [selectedItems]
+  );
+
+  return (
+    <Dialog
+      name={name}
+      title={
+        payload.action === 'edit' ?  <T id={'edit_exchange_rate'}/> : <T id={'new_exchange_rate'}/>
+
+      }
+      className={classNames(
+        {
+          'dialog--loading': fetchHook.pending,
+        },
+        'dialog--exchangeRate-form'
+      )}
+      isOpen={isOpen}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}
+      isLoading={fetchHook.pending}
+      onClose={handleClose}
+    >
+      <form onSubmit={formik.handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={<T id={'date'}/>}
+            inline={true}
+            labelInfo={requiredSpan}
+            intent={errors.date && touched.date && Intent.DANGER}
+            helperText={<ErrorMessage name='date' {...formik} />}
+          >
+            <DateInput
+              fill={true}
+              {...momentFormatter('YYYY-MM-DD')}
+              defaultValue={new Date()}
+              onChange={handleDateChange}
+              popoverProps={{ position: Position.BOTTOM }}
+              // disabled={payload.action === 'edit'}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={<T id={'exchange_rate'}/>}
+            labelInfo={requiredSpan}
+            intent={
+              errors.exchange_rate && touched.exchange_rate && Intent.DANGER
+            }
+            helperText={<ErrorMessage name='exchange_rate' {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={
+                errors.exchange_rate && touched.exchange_rate && Intent.DANGER
+              }
+              {...formik.getFieldProps('exchange_rate')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={<T id={'currency_code'}/>}
+            labelInfo={requiredSpan}
+            className={classNames(
+              'form-group--select-list',
+
+              Classes.FILL
+            )}
+            inline={true}
+            intent={
+              errors.currency_code && touched.currency_code && Intent.DANGER
+            }
+            helperText={<ErrorMessage name='currency_code' {...formik} />}
+          >
+            <Select
+              items={Object.values(currencies)}
+              noResults={<MenuItem disabled={true} text='No results.' />}
+              itemRenderer={currencyCodeRenderer}
+              itemPredicate={filterCurrencyCode}
+              popoverProps={{ minimal: true }}
+              onItemSelect={onItemsSelect('currency_code')}
+            >
+              <Button
+                rightIcon='caret-down'
+                fill={true}
+                text={getSelectedItemLabel(
+                  'currency_code',
+                  'select Currency Code'
+                )}
+                // disabled={payload.action === 'edit'}
+              />
+            </Select>
+          </FormGroup>
+        </div>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose}><T id={'close'}/></Button>
+            <Button intent={Intent.PRIMARY} type='submit'>
+            {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+export default ExchangeRatesDialogConnect(ExchangeRateDialog);
--- a/client/src/containers/Dialogs/InviteUserDialog.js
+++ b/client/src/containers/Dialogs/InviteUserDialog.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import {
@@ -28,7 +28,7 @@ function InviteUserDialog({
  requestFetchUser,
  requestEditUser,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();

  const fetchHook = useAsync(async () => {
    await Promise.all([
@@ -37,12 +37,12 @@ function InviteUserDialog({
  }, false);

  const validationSchema = Yup.object().shape({
-    first_name: Yup.string().required(intl.formatMessage({ id: 'required' })),
-    last_name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    first_name: Yup.string().required(formatMessage({ id: 'required' })),
+    last_name: Yup.string().required(formatMessage({ id: 'required' })),
    email: Yup.string()
      .email()
-      .required(intl.formatMessage({ id: 'required' })),
-    phone_number: Yup.number().required(intl.formatMessage({ id: 'required' })),
+      .required(formatMessage({ id: 'required' })),
+    phone_number: Yup.number().required(formatMessage({ id: 'required' })),
  });

  const initialValues = useMemo(
@@ -101,7 +101,7 @@ function InviteUserDialog({
  return (
    <Dialog
      name={name}
-      title={payload.action === 'edit' ? 'Edit invite' : ''}
+      title={payload.action === 'edit' ? <T id={'edit_invite'} /> : ''}
      className={classNames({
        'dialog--loading': fetchHook.pending,
        'dialog--invite-user': true,
@@ -116,7 +116,7 @@ function InviteUserDialog({
      <form onSubmit={formik.handleSubmit}>
        <div className={Classes.DIALOG_BODY}>
          <FormGroup
-            label={'First Name'}
+            label={<T id={'first_name'} />}
            className={'form-group--first-name'}
            intent={errors.first_name && touched.first_name && Intent.DANGER}
            helperText={<ErrorMessage name='first_name' {...formik} />}
@@ -129,7 +129,7 @@ function InviteUserDialog({
          </FormGroup>

          <FormGroup
-            label={'Last Name'}
+            label={<T id={'last_name'} />}
            className={'form-group--last-name'}
            intent={errors.last_name && touched.last_name && Intent.DANGER}
            helperText={<ErrorMessage name='last_name' {...formik} />}
@@ -142,7 +142,7 @@ function InviteUserDialog({
          </FormGroup>

          <FormGroup
-            label={'Email'}
+            label={<T id={'email'} />}
            className={'form-group--email'}
            intent={errors.email && touched.email && Intent.DANGER}
            helperText={<ErrorMessage name='email' {...formik} />}
@@ -156,7 +156,7 @@ function InviteUserDialog({
          </FormGroup>

          <FormGroup
-            label={'Phone Number'}
+            label={<T id={'phone_number'} />}
            className={'form-group--phone-number'}
            intent={
              errors.phone_number && touched.phone_number && Intent.DANGER
@@ -175,9 +175,9 @@ function InviteUserDialog({

        <div className={Classes.DIALOG_FOOTER}>
          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}><T id={'close'}/></Button>
            <Button intent={Intent.PRIMARY} type='submit'>
-              {payload.action === 'edit' ? 'Edit' : ''}
+              {payload.action === 'edit' ? <T id={'edit'}/> : ''}
            </Button>
          </div>
        </div>
--- a/client/src/containers/Dialogs/ItemCategoryDialog.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog.js
@@ -11,7 +11,7 @@ import {
 import { Select } from '@blueprintjs/select';
 import { pick } from 'lodash';
 import * as Yup from 'yup';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import { compose } from 'utils';
 import { useQuery } from 'react-query';
@@ -55,13 +55,13 @@ function ItemCategoryDialog({
  requestEditItemCategory,
 }) {
  const [selectedParentCategory, setParentCategory] = useState(null);
-  const intl = useIntl();
+  const {formatMessage} = useIntl();

  const fetchList = useQuery(['items-categories-list'],
    () => requestFetchItemCategories());

  const ValidationSchema = Yup.object().shape({
-    name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    name: Yup.string().required(formatMessage({ id: 'required' })),
    parent_category_id: Yup.string().nullable(),
    description: Yup.string().trim()
  });
@@ -149,7 +149,7 @@ function ItemCategoryDialog({
  return (
    <Dialog
      name={name}
-      title={payload.action === 'edit' ? 'Edit Category' : ' New Category'}
+      title={payload.action === 'edit' ? <T id={'edit_category'}/> : <T id={'new_category'}/>}
      className={classNames({
        'dialog--loading': fetchList.isFetching,
      },
@@ -164,7 +164,7 @@ function ItemCategoryDialog({
      <form onSubmit={formik.handleSubmit}>
        <div className={Classes.DIALOG_BODY}>
          <FormGroup
-            label={'Category Name'}
+            label={<T id={'category_name'}/>}
            labelInfo={requiredSpan}
            className={'form-group--category-name'}
            intent={(errors.name && touched.name) && Intent.DANGER}
@@ -179,7 +179,7 @@ function ItemCategoryDialog({
          </FormGroup>

          <FormGroup
-            label={'Parent Category'}
+            label={<T id={'parent_category'}/>}
            labelInfo={infoIcon}
            className={classNames(
              'form-group--select-list',
@@ -207,7 +207,7 @@ function ItemCategoryDialog({
          </FormGroup>

          <FormGroup
-            label={'Description'}
+            label={<T id={'description'}/>}
            className={'form-group--description'}
            intent={(errors.description && touched.description) && Intent.DANGER}
            helperText={(<ErrorMessage name="description" {...formik} />)}
@@ -222,9 +222,9 @@ function ItemCategoryDialog({
        </div>
        <div className={Classes.DIALOG_FOOTER}>
          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}><T id={'close'}/></Button>
            <Button intent={Intent.PRIMARY} type='submit'>
-              {payload.action === 'edit' ? 'Edit' : 'Submit'}
+            {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
            </Button>
          </div>
        </div>
--- a/client/src/containers/Dialogs/ItemFromDialog.js
+++ b/client/src/containers/Dialogs/ItemFromDialog.js
@@ -5,10 +5,10 @@ import {
  FormGroup,
  InputGroup,
  Intent,
-  TextArea
+  TextArea,
 } from '@blueprintjs/core';
 import * as Yup from 'yup';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import { compose } from 'utils';
 import Dialog from 'components/Dialog';
@@ -25,30 +25,30 @@ function ItemFromDialog({
  submitItemCategory,
  fetchCategory,
  openDialog,
-  closeDialog
+  closeDialog,
 }) {
  const [state, setState] = useState({});
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
  const ValidationSchema = Yup.object().shape({
-    name: Yup.string().required(intl.formatMessage({ id: 'required' })),
-    description: Yup.string().trim()
+    name: Yup.string().required(formatMessage({ id: 'required' })),
+    description: Yup.string().trim(),
  });

  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {},
    validationSchema: ValidationSchema,
-    onSubmit: values => {
+    onSubmit: (values) => {
      submitItemCategory({ values })
-        .then(response => {
+        .then((response) => {
          AppToaster.show({
-            message: 'the_category_has_been_submit'
+            message: 'the_category_has_been_submit',
          });
        })
-        .catch(error => {
+        .catch((error) => {
          alert(error.message);
        });
-    }
+    },
  });

  const fetchHook = useAsync(async () => {
@@ -71,10 +71,12 @@ function ItemFromDialog({
  return (
    <Dialog
      name={name}
-      title={payload.action === 'new' ? 'New' : ' New Category'}
+      title={
+        payload.action === 'new' ? <T id={'new'} /> : <T id={'new_category'} />
+      }
      className={{
        'dialog--loading': state.isLoading,
-        'dialog--item-form': true
+        'dialog--item-form': true,
      }}
      isOpen={isOpen}
      onClosed={onDialogClosed}
@@ -84,7 +86,7 @@ function ItemFromDialog({
      <form onSubmit={formik.handleSubmit}>
        <div className={Classes.DIALOG_BODY}>
          <FormGroup
-            label={'Category Name'}
+            label={<T id={'category_name'} />}
            className={'form-group--category-name'}
            intent={formik.errors.name && Intent.DANGER}
            helperText={formik.errors.name && formik.errors.name}
@@ -97,7 +99,7 @@ function ItemFromDialog({
            />
          </FormGroup>
          <FormGroup
-            label={'Description'}
+            label={<T id={'description'} />}
            className={'form-group--description'}
            intent={formik.errors.description && Intent.DANGER}
            helperText={formik.errors.description && formik.errors.credential}
@@ -112,9 +114,15 @@ function ItemFromDialog({
        </div>
        <div className={Classes.DIALOG_FOOTER}>
          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
            <Button intent={Intent.PRIMARY} type='submit'>
-              {payload.action === 'new' ? 'New' : 'Submit'}
+              {payload.action === 'new' ? (
+                <T id={'new'} />
+              ) : (
+                <T id={'submit'} />
+              )}
            </Button>
          </div>
        </div>
--- a/client/src/containers/Dialogs/UserFormDialog.js
+++ b/client/src/containers/Dialogs/UserFormDialog.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import {
@@ -37,7 +37,9 @@ function UserFormDialog({
  }, false);

  const validationSchema = Yup.object().shape({
-    email: Yup.string().email().required(intl.formatMessage({id:'required'})),
+    email: Yup.string()
+      .email()
+      .required(intl.formatMessage({ id: 'required' })),
  });

  const initialValues = {
@@ -96,7 +98,13 @@ function UserFormDialog({
  return (
    <Dialog
      name={name}
-      title={payload.action === 'edit' ? 'Edit invite' : 'invite User'}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_invite'} />
+        ) : (
+          <T id={'invite_user'} />
+        )
+      }
      className={classNames({
        'dialog--loading': fetchHook.pending,
        'dialog--invite-form': true,
@@ -110,18 +118,20 @@ function UserFormDialog({
    >
      <form onSubmit={handleSubmit}>
        <div className={Classes.DIALOG_BODY}>
-          <p class="mb2">Your teammate will get an email that gives them access to your team.</p>
+          <p class='mb2'>
+            <T id={'your_access_to_your_team'} />
+          </p>

          <FormGroup
-            label={'Email'}
+            label={<T id={'email'} />}
            className={classNames('form-group--email', Classes.FILL)}
-            intent={(errors.email && touched.email) && Intent.DANGER}
-            helperText={<ErrorMessage name='email' {...{errors, touched}} />}
+            intent={errors.email && touched.email && Intent.DANGER}
+            helperText={<ErrorMessage name='email' {...{ errors, touched }} />}
            inline={true}
          >
            <InputGroup
              medium={true}
-              intent={(errors.email && touched.email) && Intent.DANGER}
+              intent={errors.email && touched.email && Intent.DANGER}
              {...getFieldProps('email')}
            />
          </FormGroup>
@@ -129,9 +139,15 @@ function UserFormDialog({

        <div className={Classes.DIALOG_FOOTER}>
          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
            <Button intent={Intent.PRIMARY} type='submit'>
-              {payload.action === 'edit' ? 'Edit' : 'invite'}
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'invite'} />
+              )}
            </Button>
          </div>
        </div>