WIP feature/breadcrumb/fix_localize

client/src/containers/Preferences/Accounts/Accounts.js

@@ -2,16 +2,17 @@ import React from 'react';
 import {Tabs, Tab} from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default function AccountsPreferences() {
   const history = useHistory();
   const onChangeTabs = (currentTabId) => {
     switch(currentTabId) {
       default:
-        history.push('/dashboard/preferences/accounts/general');
+        history.push('/preferences/accounts/general');
         break;
       case 'custom_fields':
-        history.push('/dashboard/preferences/accounts/custom_fields');
+        history.push('/preferences/accounts/custom_fields');
         break;
     }
   };
@@ -21,8 +22,8 @@ export default function AccountsPreferences() {
         animate={true}
         large={true}
         onChange={onChangeTabs}>
-        <Tab id="general" title="General" />
-        <Tab id="custom_fields" title="Custom Fields" />
+        <Tab id="general" title={<T id={'general'}/>} />
+        <Tab id="custom_fields" title={<T id={'custom_fields'}/>} />
       </Tabs>
 
       <PreferencesSubContent preferenceTab="accounts" />

client/src/containers/Preferences/Accounts/AccountsCustomFields.js

@@ -18,6 +18,7 @@ import {connect} from 'react-redux';
 import {
   fetchResourceFields,
 } from 'store/customFields/customFields.actions';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function AccountsCustomFields({ fetchResourceFields, fields }) {
   const fetchHook = useAsync(async () => {
@@ -30,13 +31,13 @@ function AccountsCustomFields({ fetchResourceFields, fields }) {
 
   const actionMenuList = (column) => (
     <Menu>
-      <MenuItem text="View Details" />
+      <MenuItem text={<T id={'view_details'}/>} />
       <MenuDivider />
-      <MenuItem text="Edit Account" />
-      <MenuItem text="New Account" />
+      <MenuItem text={<T id={'edit_account'}/>} />
+      <MenuItem text={<T id={'new_account'}/>} />
       <MenuDivider />
-      <MenuItem text="Inactivate Account" />
-      <MenuItem text="Delete Account" />
+      <MenuItem text={<T id={'inactivate_account'}/>} />
+      <MenuItem text={<T id={'delete_account'}/>} />
     </Menu>
   );
 

client/src/containers/Preferences/Currencies/CurrenciesList.js

@@ -21,6 +21,7 @@ import AppToaster from 'components/AppToaster';
 import withDashboard from 'connectors/Dashboard.connector';
 import withCurrencies from 'containers/Currencies/withCurrencies';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 function CurrenciesList({
@@ -36,7 +37,7 @@ function CurrenciesList({
   onFetchData,
 }) {
   const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
-
+  const { formatMessage } = useIntl()
   const fetchCurrencies = useQuery(['currencies-table'],
     () => requestFetchCurrencies());
 
@@ -60,7 +61,7 @@ function CurrenciesList({
       (response) => {
         setDeleteCurrencyState(false);
         AppToaster.show({
-          message: 'the_Currency_has_been_deleted',
+          message: formatMessage({id:'the_currency_has_been_successfully_deleted'}),
         });
       }
     );
@@ -69,11 +70,11 @@ function CurrenciesList({
   const actionMenuList = useCallback((currency) => (
     <Menu>
       <MenuItem
-        text='Edit Currency'
+        text={<T id={'edit_currency'} />}
         onClick={() => handleEditCurrency(currency)} />
 
       <MenuItem
-        text='Delete Currency'
+        text={<T id={'delete_currency'} />}
         onClick={() => onDeleteCurrency(currency)}
       />
     </Menu>
@@ -81,12 +82,12 @@ function CurrenciesList({
 
   const columns = useMemo(() => [
     {
-      Header: 'Currency Name',
+      Header: formatMessage({id:'currency_name'}),
       accessor: 'currency_name',
       width: 100,
     },
     {
-      Header: 'Currency Code',
+      Header: formatMessage({id:'currency_code'}),
       accessor: 'currency_code',
       className: 'currency_code',
       width: 100,
@@ -125,8 +126,8 @@ function CurrenciesList({
       />
 
       <Alert
-        cancelButtonText='Cancel'
-        confirmButtonText='Move to Trash'
+        cancelButtonText={<T id={'cancel'}/>}
+        confirmButtonText={<T id={'move_to_trash'}/>}
         icon='trash'
         intent={Intent.DANGER}
         isOpen={deleteCurrencyState}

client/src/containers/Preferences/General/General.js

@@ -12,7 +12,6 @@ import {
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { Select } from '@blueprintjs/select';
-import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
 
 import { compose, optionsMapToArray } from 'utils';
@@ -22,6 +21,7 @@ import AppToaster from 'components/AppToaster';
 
 import withSettings from 'containers/Settings/withSettings';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 function GeneralPreferences({
@@ -180,7 +180,7 @@ function GeneralPreferences({
     <div className='preferences__inside-content--general'>
       <form onSubmit={handleSubmit}>
         <FormGroup
-          label={'Organization Name'}
+          label={<T id={'organization_name'}/>}
           inline={true}
           intent={(errors.name && touched.name) && Intent.DANGER}
           helperText={<ErrorMessage name='name' {...{errors, touched}} />}
@@ -193,7 +193,7 @@ function GeneralPreferences({
         </FormGroup>
 
         <FormGroup
-          label={'Organization Industry'}
+          label={<T id={'organization_industry'}/>}
           inline={true}
           intent={(errors.industry && touched.industry) && Intent.DANGER}
           helperText={<ErrorMessage name='industry' {...{errors, touched}} />}
@@ -206,7 +206,7 @@ function GeneralPreferences({
         </FormGroup>
 
         <FormGroup
-          label={'Business Location'}
+          label={<T id={'business_location'}/>}
           className={classNames(
             'form-group--business-location',
             'form-group--select-list',
@@ -235,7 +235,7 @@ function GeneralPreferences({
         </FormGroup>
 
         <FormGroup
-          label={'Base Currency'}
+          label={<T id={'base_currency'}/>}
           className={classNames(
             'form-group--base-currency',
             'form-group--select-list',
@@ -264,7 +264,7 @@ function GeneralPreferences({
         </FormGroup>
 
         <FormGroup
-          label={'Fiscal Year'}
+          label={<T id={'fiscal_year'}/>}
           className={classNames(
             'form-group--fiscal-year',
             'form-group--select-list',
@@ -293,7 +293,7 @@ function GeneralPreferences({
         </FormGroup>
 
         <FormGroup
-          label={'Language'}
+          label={<T id={'language'}/>}
           inline={true}
           className={classNames(
             'form-group--language',
@@ -320,7 +320,7 @@ function GeneralPreferences({
           </Select>
         </FormGroup>
         <FormGroup
-          label={'Time Zone'}
+          label={<T id={'time_zone'}/>}
           inline={true}
           className={classNames(
             'form-group--time-zone',
@@ -338,7 +338,7 @@ function GeneralPreferences({
           />
         </FormGroup>
         <FormGroup
-          label={'Date Format'}
+          label={<T id={'date_format'}/>}
           inline={true}
           className={classNames(
             'form-group--language',
@@ -371,9 +371,9 @@ function GeneralPreferences({
             intent={Intent.PRIMARY}
             type='submit'
           >
-            {'Save'}
+            <T id={'save'}/>
           </Button>
-          <Button onClick={'handleClose'}>Close</Button>
+          <Button onClick={'handleClose'}><T id={'close'}/></Button>
         </div>
       </form>
     </div>

client/src/containers/Preferences/Users/UsersList.js

@@ -24,6 +24,7 @@ import withUsers from 'containers/Users/withUsers';
 import withUsersActions from 'containers/Users/withUsersActions';
 
 import { compose } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 function UsersListPreferences({
@@ -33,7 +34,7 @@ function UsersListPreferences({
 
   // #withUsers  
   usersList,
-  
+
   // #withUsersActions
   requestDeleteUser,
   requestInactiveUser,
@@ -44,14 +45,14 @@ function UsersListPreferences({
 }) {
   const [deleteUserState, setDeleteUserState] = useState(false);
   const [inactiveUserState, setInactiveUserState] = useState(false);
-
-  const fetchUsers = useQuery('users-table', 
+  const { formatMessage } = useIntl()
+  const fetchUsers = useQuery('users-table',
     () => requestFetchUsers());
 
   const onInactiveUser = (user) => {
     setInactiveUserState(user);
   };
-  
+
   // Handle cancel inactive user alert
   const handleCancelInactiveUser = useCallback(() => {
     setInactiveUserState(false);
@@ -61,7 +62,7 @@ function UsersListPreferences({
   const handleConfirmUserActive = useCallback(() => {
     requestInactiveUser(inactiveUserState.id).then(() => {
       setInactiveUserState(false);
-      AppToaster.show({ message: 'the_user_has_been_inactivated' });
+      AppToaster.show({ message: formatMessage({id:'the_user_has_been_successfully_inactivated'}) });
     });
   }, [inactiveUserState, requestInactiveUser, requestFetchUsers]);
 
@@ -98,7 +99,7 @@ function UsersListPreferences({
     requestDeleteUser(deleteUserState.id).then((response) => {
       setDeleteUserState(false);
       AppToaster.show({
-        message: 'the_user_has_been_deleted',
+        message: formatMessage({id:'the_user_has_been_successfully_deleted'}),
       });
     });
   };
@@ -106,11 +107,11 @@ function UsersListPreferences({
   const actionMenuList = useCallback(
     (user) => (
       <Menu>
-        <MenuItem text='Edit User' onClick={onEditUser(user)} />
+        <MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
         <MenuDivider />
-        <MenuItem text='Edit Invite ' onClick={onEditInviteUser(user)} />
-        <MenuItem text='Inactivate User' onClick={() => onInactiveUser(user)} />
-        <MenuItem text='Delete User' onClick={() => onDeleteUser(user)} />
+        <MenuItem text={<T id={'edit_invite'} />} onClick={onEditInviteUser(user)} />
+        <MenuItem text={<T id={'inactivate_user'} />} onClick={() => onInactiveUser(user)} />
+        <MenuItem text={<T id={'delete_user'} />} onClick={() => onDeleteUser(user)} />
       </Menu>
     ),
     []
@@ -119,25 +120,25 @@ function UsersListPreferences({
   const columns = useMemo(() => [
     {
       id: 'full_name',
-      Header: 'Full Name',
-      accessor: 'full_name',
+      Header:formatMessage({id:'full_name'}),
+        accessor: 'full_name',
       width: 170,
     },
     {
       id: 'email',
-      Header: 'Email',
+      Header: formatMessage({id:'email'}),
       accessor: 'email',
       width: 150,
     },
     {
       id: 'phone_number',
-      Header: 'Phone Number',
+      Header: formatMessage({id:'phone_number'}),
       accessor: 'phone_number',
       width: 150,
     },
     {
       id: 'active',
-      Header: 'Status',
+      Header: formatMessage({id:'status'}),
       accessor: (user) =>
         user.active ? <span>Active</span> : <span>Inactivate</span>,
       width: 50,
@@ -174,8 +175,8 @@ function UsersListPreferences({
       />
 
       <Alert
-        cancelButtonText='Cancel'
-        confirmButtonText='Move to Trash'
+        cancelButtonText={<T id={'cancel'}/>}
+        confirmButtonText={<T id={'move_to_trash'}/>}
         icon='trash'
         intent={Intent.DANGER}
         isOpen={deleteUserState}
@@ -189,8 +190,8 @@ function UsersListPreferences({
       </Alert>
 
       <Alert
-        cancelButtonText='Cancel'
-        confirmButtonText='Inactivate'
+        cancelButtonText={<T id={'cancel'}/>}
+        confirmButtonText={<T id={'inactivate'}/>}
         icon='trash'
         intent={Intent.WARNING}
         isOpen={inactiveUserState}