chore: Refactoring all import directories to alias and all .js|.jsx renamed to be .ts|.tsx

src/containers/Preferences/Accountant/AccountantForm.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { Form, FastField, useFormikContext } from 'formik';
 import {
   FormGroup,
@@ -9,16 +10,15 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import intl from 'react-intl-universal';
 
 import {
   FormattedMessage as T,
   AccountsSelectList,
   FieldRequiredHint,
   CardFooterActions,
-} from 'components';
-import { handleStringChange, inputIntent } from 'utils';
-import { ACCOUNT_TYPE } from 'common/accountTypes';
+} from '@/components';
+import { handleStringChange, inputIntent } from '@/utils';
+import { ACCOUNT_TYPE } from '@/constants/accountTypes';
 
 import { useAccountantFormContext } from './AccountantFormProvider';
 

src/containers/Preferences/Accountant/AccountantFormPage.tsx

@@ -1,21 +1,21 @@
 import React, { useEffect } from 'react';
+import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { pick } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 
-import { AppToaster } from 'components';
-import intl from 'react-intl-universal';
+import { AppToaster } from '@/components';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withSettings from 'containers/Settings/withSettings';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withSettings from '@/containers/Settings/withSettings';
 
 import AccountantForm from './AccountantForm';
 import { AccountantSchema } from './Accountant.schema';
 import { useAccountantFormContext } from './AccountantFormProvider';
 import { transformToOptions } from './utils';
-import { compose, transformGeneralSettings } from 'utils';
+import { compose, transformGeneralSettings } from '@/utils';
 
-import 'style/pages/Preferences/Accounting.scss';
+import '@/style/pages/Preferences/Accounting.scss';
 
 // Accountant preferences.
 function AccountantFormPage({

src/containers/Preferences/Accountant/AccountantFormProvider.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
 
-import { Card } from 'components';
-import { CLASSES } from 'common/classes';
-import { useAccounts, useSaveSettings, useSettings } from 'hooks/query';
+import { Card } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import { useAccounts, useSaveSettings, useSettings } from '@/hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const AccountantFormContext = React.createContext();

src/containers/Preferences/Accounts/Accounts.js

@@ -1,33 +0,0 @@
-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 } from 'components';
-
-export default function AccountsPreferences() {
-  const history = useHistory();
-  const onChangeTabs = (currentTabId) => {
-    switch(currentTabId) {
-      default:
-        history.push('/preferences/accounts/general');
-        break;
-      case 'custom_fields':
-        history.push('/preferences/accounts/custom_fields');
-        break;
-    }
-  };
-  return (
-    <div class="preferences__inside-content preferences__inside-content--accounts">
-      <Tabs
-        animate={true}
-        large={true}
-        onChange={onChangeTabs}>
-        <Tab id="general" title={<T id={'general'}/>} />
-        <Tab id="custom_fields" title={<T id={'custom_fields'}/>} />
-      </Tabs>
-
-      <PreferencesSubContent preferenceTab="accounts" />
-    </div>
-  );
-}
-

src/containers/Preferences/Accounts/AccountsCustomFields.js

@@ -1,83 +0,0 @@
-import React, { useEffect } from 'react';
-import {
-  Popover,
-  Button,
-  Menu,
-  MenuDivider,
-  MenuItem,
-  Position,
-  Icon
-} from '@blueprintjs/core';
-import {
-  GridComponent,
-  ColumnsDirective,
-  ColumnDirective,
-} from '@syncfusion/ej2-react-grids';
-import useAsync from 'hooks/async';
-import {connect} from 'react-redux';
-import {
-  fetchResourceFields,
-} from 'store/customFields/customFields.actions';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-
-function AccountsCustomFields({ fetchResourceFields, fields }) {
-  const fetchHook = useAsync(async () => {
-    await Promise.all([
-      // fetchResourceFields('accounts'),
-    ]);
-  }, false);
-
-  useEffect(() => { fetchHook.execute(); }, []);
-
-  const actionMenuList = (column) => (
-    <Menu>
-      <MenuItem text={<T id={'view_details'}/>} />
-      <MenuDivider />
-      <MenuItem text={<T id={'edit_account'}/>} />
-      <MenuItem text={<T id={'new_account'}/>} />
-      <MenuDivider />
-      <MenuItem text={<T id={'inactivate_account'}/>} />
-      <MenuItem text={<T id={'delete_account'}/>} />
-    </Menu>
-  );
-
-  const statusRowTemplate = (column) => {
-    return ('Active');
-  };
-  const actionsRowTemplate = (column) => (
-    <Popover content={actionMenuList(column)} position={Position.RIGHT_BOTTOM}>
-      <Button icon={<Icon icon="ellipsis-h" />} />
-    </Popover>
-  );
- 
-  const columns = [
-    {field: 'label_name', headerText: 'Field Label'},
-    {field: 'data_type', headerText: 'Type'},
-    {template: statusRowTemplate, headerText: 'Status'},
-    {template: actionsRowTemplate, headerText: ''},
-  ];
-  return (
-    <div class="preferences__inside-content-tab preferences__inside-content-tab--custom-fields">
-      <GridComponent dataSource={fields}>
-        <ColumnsDirective>
-          {columns.map((column) => {
-            return (<ColumnDirective
-              field={column.field}
-              headerText={column.headerText}
-              template={column.template} />);
-          })}
-        </ColumnsDirective>
-      </GridComponent>
-    </div>
-  );
-}
-
-const mapStateToProps = (state) => ({
-  fields: state.fields.custom_fields['accounts'] || [],
-});
-const mapDispatchToProps = (dispatch) => ({
-  fetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(AccountsCustomFields);

src/containers/Preferences/Accounts/AccountsGeneral.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-export default function AccountsGeneralPreferences() {
-  return (
-    <div class="preferences__inside-content preferences__inside-content--general">
-
-    </div>
-  );
-}

src/containers/Preferences/Branches/Branches.tsx

@@ -4,10 +4,10 @@ import intl from 'react-intl-universal';
 import BranchesDataTable from './BranchesDataTable';
 import BranchesEmptyStatus from './BranchesEmptyStatus';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import { useBranchesContext } from './BranchesProvider';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 function Branches({
   // #withDashboardActions

src/containers/Preferences/Branches/BranchesActions.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 
-import { Features } from 'common';
-import { FeatureCan, FormattedMessage as T, Icon } from 'components';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
+import { Features } from '@/constants';
+import { FeatureCan, FormattedMessage as T, Icon } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
 
 function BranchesActions({
   //#ownProps

src/containers/Preferences/Branches/BranchesAlerts.js

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const BranchDeleteAlert = React.lazy(() =>
-  import('../../Alerts/Branches/BranchDeleteAlert'),
-);
-// const BranchMarkPrimaryAlert = React.lazy(() =>
-//   import('../../Alerts/Branches/BranchMarkPrimaryAlert'),
-// );
-
-export default [
-  { name: 'branch-delete', component: BranchDeleteAlert },
-  // {
-  //   name: 'branch-mark-primary',
-  //   component: BranchMarkPrimaryAlert,
-  // },
-];

src/containers/Preferences/Branches/BranchesAlerts.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const BranchDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Branches/BranchDeleteAlert'),
+);
+
+export default [{ name: 'branch-delete', component: BranchDeleteAlert }];

src/containers/Preferences/Branches/BranchesDataTable.tsx

@@ -3,18 +3,17 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { Intent } from '@blueprintjs/core';
 
-import 'style/pages/Preferences/branchesList.scss';
+import '@/style/pages/Preferences/branchesList.scss';
 
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-import { DataTable, Card, AppToaster } from 'components';
+import { DataTable, Card, AppToaster, TableSkeletonRows } from '@/components';
 import { useBranchesTableColumns, ActionsMenu } from './components';
 import { useBranchesContext } from './BranchesProvider';
-import { useMarkBranchAsPrimary } from 'hooks/query';
+import { useMarkBranchAsPrimary } from '@/hooks/query';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertActions from 'containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Branches data table.

src/containers/Preferences/Branches/BranchesEmptyStatus.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, EmptyStatus } from '../../../components';
-import withDialogActions from 'containers/Dialog/withDialogActions';
+import { FormattedMessage as T, EmptyStatus } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 function BranchesEmptyStatus({
   // #withDialogActions

src/containers/Preferences/Branches/BranchesProvider.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-import { useBranches } from 'hooks/query';
-import { useFeatureCan } from 'hooks/state';
-import { Features } from 'common';
+import { CLASSES } from '@/constants/classes';
+import { useBranches } from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 import { isEmpty } from 'lodash';
 
 const BranchesContext = React.createContext();

src/containers/Preferences/Branches/components.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Intent, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
 
-import { safeCallback } from 'utils';
-import { Icon, If } from 'components';
+import { safeCallback } from '@/utils';
+import { Icon, If } from '@/components';
 
 /**
  * Context menu of Branches.

src/containers/Preferences/Branches/utils.tsx

@@ -1,6 +1,6 @@
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
-import { AppToaster } from 'components';
+import { AppToaster } from '@/components';
 
 /**
  * Handle delete errors.

src/containers/Preferences/Currencies/Currencies.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
 
-import { Card } from 'components';
-import { CLASSES } from 'common/classes';
+import { Card } from '@/components';
+import { CLASSES } from '@/constants/classes';
 import CurrenciesList from './CurrenciesList';
 
 export default function PreferencesCurrenciesPage() {

src/containers/Preferences/Currencies/CurrenciesActions.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
-import Icon from 'components/Icon';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
-import { FormattedMessage as T } from 'components';
+import { compose } from '@/utils';
+import { Icon, FormattedMessage as T } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 function CurrenciesActions({ openDialog }) {
   const handleClickNewCurrency = useCallback(() => {

src/containers/Preferences/Currencies/CurrenciesAlerts.js

@@ -1,6 +0,0 @@
-import React from 'react';
-
-const CurrencyDeleteAlert = React.lazy(() =>
-  import('../../Alerts/Currencies/CurrencyDeleteAlert'),
-);
-export default [{ name: 'currency-delete', component: CurrencyDeleteAlert }];

src/containers/Preferences/Currencies/CurrenciesAlerts.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const CurrencyDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Currencies/CurrencyDeleteAlert'),
+);
+export default [{ name: 'currency-delete', component: CurrencyDeleteAlert }];

src/containers/Preferences/Currencies/CurrenciesDataTable.tsx

@@ -1,15 +1,14 @@
 import React, { useCallback } from 'react';
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
-import { DataTable } from 'components';
+import { DataTable, TableSkeletonRows } from '@/components';
 
 import { useCurrenciesContext } from './CurrenciesProvider';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
 import { ActionMenuList, useCurrenciesTableColumns } from './components';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertActions from 'containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';
 
 /**
  * Currencies table.
@@ -44,7 +43,7 @@ function CurrenciesDataTable({
   const handleDeleteCurrency = ({ currency_code }) => {
     openAlert('currency-delete', { currency_code: currency_code });
   };
-  
+
   return (
     <DataTable
       columns={columns}

src/containers/Preferences/Currencies/CurrenciesList.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect } from 'react';
-
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
 
 import { CurrenciesProvider } from './CurrenciesProvider';
 import CurrenciesDataTable from './CurrenciesDataTable';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 function CurrenciesList({
   // #withDashboardActions

src/containers/Preferences/Currencies/CurrenciesProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import { useCurrencies } from 'hooks/query';
+import { useCurrencies } from '@/hooks/query';
 
 const CurrenciesContext = createContext();
 
@@ -15,9 +15,7 @@ function CurrenciesProvider({ ...props }) {
     isCurrenciesLoading,
   };
 
-  return (
-    <CurrenciesContext.Provider value={state} {...props} />  
-  );
+  return <CurrenciesContext.Provider value={state} {...props} />;
 }
 
 const useCurrenciesContext = () => useContext(CurrenciesContext);

src/containers/Preferences/Currencies/components.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
 import {
   Menu,
   Popover,
@@ -8,9 +9,8 @@ import {
   MenuDivider,
   Intent,
 } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
-import { Icon } from 'components';
-import { safeCallback } from 'utils';
+import { Icon } from '@/components';
+import { safeCallback } from '@/utils';
 
 /**
  * Row actions menu list.

src/containers/Preferences/General/GeneralForm.tsx

@@ -1,20 +1,23 @@
-import { Form } from 'formik';
 import React from 'react';
-import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
 import classNames from 'classnames';
+import { Form } from 'formik';
+import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { ErrorMessage, FastField } from 'formik';
 import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
 
-import { FormattedMessage as T } from 'components';
-import { ListSelect, FieldRequiredHint } from 'components';
-import { inputIntent } from 'utils';
-import { CLASSES } from 'common/classes';
-import { getCountries } from 'common/countries';
-import { getAllCurrenciesOptions } from 'common/currencies';
-import { getFiscalYear } from 'common/fiscalYearOptions';
-import { getLanguages } from 'common/languagesOptions';
+import {
+  ListSelect,
+  FieldRequiredHint,
+  FormattedMessage as T,
+} from '@/components';
+import { inputIntent } from '@/utils';
+import { CLASSES } from '@/constants/classes';
+import { getCountries } from '@/constants/countries';
+import { getAllCurrenciesOptions } from '@/constants/currencies';
+import { getFiscalYear } from '@/constants/fiscalYearOptions';
+import { getLanguages } from '@/constants/languagesOptions';
 import { useGeneralFormContext } from './GeneralFormProvider';
 
 import { shouldBaseCurrencyUpdate } from './utils';
@@ -152,7 +155,7 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
             <ListSelect
               items={FiscalYear}
               onItemSelect={(option) => {
-                form.setFieldValue('fiscal_year', option.key)
+                form.setFieldValue('fiscal_year', option.key);
               }}
               selectedItem={value}
               selectedItemProp={'key'}
@@ -263,8 +266,8 @@ const CardFooterActions = styled.div`
   .bp3-button {
     min-width: 70px;
 
-    + .bp3-button{
+    + .bp3-button {
       margin-left: 10px;
     }
   }
-`;
+`;

src/containers/Preferences/General/GeneralFormPage.tsx

@@ -1,18 +1,17 @@
 import React, { useEffect } from 'react';
+import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
 
-import 'style/pages/Preferences/GeneralForm.scss';
+import '@/style/pages/Preferences/GeneralForm.scss';
 
-import { AppToaster } from 'components';
+import { AppToaster } from '@/components';
 import GeneralForm from './GeneralForm';
 import { PreferencesGeneralSchema } from './General.schema';
 import { useGeneralFormContext } from './GeneralFormProvider';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
-import { compose } from 'utils';
-import { transformToForm } from '../../../utils';
+import { compose, transformToForm } from '@/utils';
 
 const defaultValues = {
   name: '',

src/containers/Preferences/General/GeneralFormProvider.tsx

@@ -2,14 +2,14 @@ import React, { createContext } from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
 
-import { Card } from 'components';
-import { CLASSES } from 'common/classes';
+import { Card } from '@/components';
+import { CLASSES } from '@/constants/classes';
 import {
   useCurrentOrganization,
   useUpdateOrganization,
   useDateFormats,
   useOrgBaseCurrencyMutateAbilities,
-} from 'hooks/query';
+} from '@/hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const GeneralFormContext = createContext();

src/containers/Preferences/General/utils.tsx

@@ -1,4 +1,4 @@
-import { defaultFastFieldShouldUpdate } from 'utils';
+import { defaultFastFieldShouldUpdate } from '@/utils';
 
 export const shouldBaseCurrencyUpdate = (newProps, oldProps) => {
   return (

src/containers/Preferences/Item/ItemPreferencesForm.tsx

@@ -7,9 +7,9 @@ import {
   FieldRequiredHint,
   FormattedMessage as T,
   CardFooterActions
-} from 'components';
-import { inputIntent } from 'utils';
-import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from 'common/accountTypes';
+} from '@/components';
+import { inputIntent } from '@/utils';
+import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
 
 import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
 

src/containers/Preferences/Item/ItemPreferencesFormPage.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect } from 'react';
+import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-import intl from 'react-intl-universal';
-import { pick, omit } from 'lodash';
+import { AppToaster } from '@/components';
+import { omit } from 'lodash';
 import { ItemPreferencesSchema } from './ItemPreferences.schema';
 import ItemPreferencesForm from './ItemPreferencesForm';
 
 import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withSettings from 'containers/Settings/withSettings';
-import { compose, optionsMapToArray, transformGeneralSettings } from 'utils';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withSettings from '@/containers/Settings/withSettings';
+import { compose, optionsMapToArray, transformGeneralSettings } from '@/utils';
 
-import 'style/pages/Preferences/Accounting.scss';
+import '@/style/pages/Preferences/Accounting.scss';
 
 // item form page preferences.
 function ItemPreferencesFormPage({
@@ -27,7 +27,7 @@ function ItemPreferencesFormPage({
   const itemPerferencesSettings = {
     ...omit(itemsSettings, ['tableSize']),
   };
-  
+
   // Initial values.
   const initialValues = {
     preferred_sell_account: '',

src/containers/Preferences/Item/ItemPreferencesFormProvider.tsx

@@ -2,9 +2,9 @@ import React, { useContext, createContext } from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
 
-import { CLASSES } from 'common/classes';
-import { Card } from 'components';
-import { useSettingsItems, useAccounts, useSaveSettings } from 'hooks/query';
+import { CLASSES } from '@/constants/classes';
+import { Card } from '@/components';
+import { useSettingsItems, useAccounts, useSaveSettings } from '@/hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const ItemFormContext = createContext();

src/containers/Preferences/SMSIntegration/SMSIntegrationProvider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-import { useSettings, useSettingSMSNotifications } from 'hooks/query';
+import { CLASSES } from '@/constants/classes';
+import { useSettings, useSettingSMSNotifications } from '@/hooks/query';
 
 const SMSIntegrationContext = React.createContext();
 

src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Tabs, Tab } from '@blueprintjs/core';
-import classNames from 'classnames';
 import styled from 'styled-components';
+import classNames from 'classnames';
+import { Tabs, Tab } from '@blueprintjs/core';
 
-import { CLASSES } from 'common/classes';
+import { CLASSES } from '@/constants/classes';
 import SMSMessagesDataTable from './SMSMessagesDataTable';
-import { Card } from 'components';
+import { Card } from '@/components';
 
-import '../../../style/pages/Preferences/SMSIntegration.scss';
+import '@/style/pages/Preferences/SMSIntegration.scss';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * SMS Integration Tabs.

src/containers/Preferences/SMSIntegration/SMSMessagesDataTable.tsx

@@ -3,15 +3,14 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { Intent } from '@blueprintjs/core';
 
-import { DataTable, AppToaster } from 'components';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import { DataTable, AppToaster, TableSkeletonRows } from '@/components';
 
 import { useSMSIntegrationTableColumns, ActionsMenu } from './components';
 import { useSMSIntegrationContext } from './SMSIntegrationProvider';
-import { useSettingEditSMSNotification } from 'hooks/query';
+import { useSettingEditSMSNotification } from '@/hooks/query';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
 
 /**
  * SMS Message data table.

src/containers/Preferences/SMSIntegration/components.tsx

@@ -3,8 +3,8 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { Intent, Button, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
-import { SwitchFieldCell } from 'components/DataTableCells';
-import { safeInvoke } from 'utils';
+import { SwitchFieldCell } from '@/components/DataTableCells';
+import { safeInvoke } from '@/utils';
 
 /**
  * Notification accessor.

src/containers/Preferences/Users/Roles/RolesAlerts.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const RoleDeleteAlert = React.lazy(() =>
-  import('../../../Alerts/Roles/RoleDeleteAlert'),
+const RoleDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Roles/RoleDeleteAlert'),
 );
 
 /**

src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { useFormikContext } from 'formik';
 import styled from 'styled-components';
+import { useFormikContext } from 'formik';
 import { Intent, Button } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from '@/components';
 
 /**
  * Role form floating actions.

src/containers/Preferences/Users/Roles/RolesForm/RoleFormHeader.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { ErrorMessage, FastField } from 'formik';
 import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
 
-import { inputIntent } from 'utils';
-import { FormattedMessage as T, FieldRequiredHint, Card } from 'components';
-import { useAutofocus } from 'hooks';
+import { inputIntent } from '@/utils';
+import { FormattedMessage as T, FieldRequiredHint, Card } from '@/components';
+import { useAutofocus } from '@/hooks';
 
 /**
  * Role form header.

src/containers/Preferences/Users/Roles/RolesForm/RoleFormObserver.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
-import { FormikObserver } from 'components';
+import { FormikObserver } from '@/components';
 
 /**
  * Role form observer.

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.tsx

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import intl from 'react-intl-universal';
-import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
 
 const Schema = Yup.object().shape({
   role_name: Yup.string().required().label(intl.get('roles.label.role_name_')),

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
+import { useHistory } from 'react-router-dom';
 import { Formik } from 'formik';
 import { isEmpty } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 
-import 'style/pages/Preferences/Roles/Form.scss';
+import '@/style/pages/Preferences/Roles/Form.scss';
 
-import { AppToaster, FormattedMessage as T } from 'components';
+import { AppToaster, FormattedMessage as T } from '@/components';
 import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
 import { useRolesFormContext } from './RolesFormProvider';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import RolesFormContent from './RolesFormContent';
 import {
   getNewRoleInitialValues,
@@ -18,7 +18,7 @@ import {
   transformToObject,
 } from './utils';
 import { handleDeleteErrors } from '../utils';
-import { compose, transformToForm } from 'utils';
+import { compose, transformToForm } from '@/utils';
 
 const defaultValues = {
   role_name: '',

src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import RolesForm from './RolesForm';
 import { RolesFormProvider } from './RolesFormProvider';
+import RolesForm from './RolesForm';
 
 /**
  * Roles Form page.

src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
+import { CLASSES } from '@/constants/classes';
 
 import {
   useCreateRolePermissionSchema,
   useEditRolePermissionSchema,
   usePermissionsSchema,
   useRolePermission,
-} from 'hooks/query';
-import PreferencesPageLoader from '../../../PreferencesPageLoader';
+} from '@/hooks/query';
+import PreferencesPageLoader from '@/containers/Preferences/PreferencesPageLoader';
 
 const RolesFormContext = React.createContext();
 

src/containers/Preferences/Users/Roles/RolesForm/components.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Checkbox, Popover } from '@blueprintjs/core';
 import styled from 'styled-components';
 import { Field } from 'formik';
+import { Checkbox, Popover } from '@blueprintjs/core';
 
 import {
   getPermissionsSchema,
   ModulePermissionsStyle,
-} from 'common/permissionsSchema';
-import { Card, If, ButtonLink, Choose, T } from 'components';
+} from '@/constants/permissionsSchema';
+import { Card, If, ButtonLink, Choose, T } from '@/components';
 import {
   getSerivceColumnPermission,
   getServiceExtraPermissions,

src/containers/Preferences/Users/Roles/RolesForm/utils.tsx

@@ -5,7 +5,7 @@ import {
   getPermissionsSchema,
   getPermissionsSchemaService,
   getPermissionsSchemaServices,
-} from 'common/permissionsSchema';
+} from '@/constants/permissionsSchema';
 
 export const FULL_ACCESS_CHECKBOX_STATE = {
   INDETARMINE: -1,

src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { Intent } from '@blueprintjs/core';
-import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
+import { Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
 
-import { DataTable, AppToaster } from 'components';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import { DataTable, AppToaster, TableSkeletonRows } from '@/components';
 
 import { useRolesTableColumns, ActionsMenu } from './components';
-import withAlertsActions from 'containers/Alert/withAlertActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
 import { useRolesContext } from './RolesListProvider';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Roles data table.

src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-import { useRoles } from 'hooks/query';
+import { CLASSES } from '@/constants/classes';
+import { useRoles } from '@/hooks/query';
 
 const RolesListContext = React.createContext();
 

src/containers/Preferences/Users/Roles/RolesLanding/components.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import intl from 'react-intl-universal';
 
 import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
-import { safeCallback } from 'utils';
-import { Icon } from 'components';
+import { safeCallback } from '@/utils';
+import { Icon } from '@/components';
 
 /**
  * Context menu of roles.

src/containers/Preferences/Users/Roles/utils.tsx

@@ -1,6 +1,6 @@
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
-import { AppToaster } from 'components';
+import { AppToaster } from '@/components';
 
 // handle delete errors.
 export const handleDeleteErrors = (errors) => {

src/containers/Preferences/Users/Users.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import styled from 'styled-components';
+import { Tabs, Tab } from '@blueprintjs/core';
 
-import 'style/pages/Preferences/Users.scss';
+import '@/style/pages/Preferences/Users.scss';
 
-import { Card } from 'components';
-import { CLASSES } from 'common/classes';
-import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
+import { Card } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import PreferencesSubContent from '@/components/Preferences/PreferencesSubContent';
 
-import withUserPreferences from 'containers/Preferences/Users/withUserPreferences';
+import withUserPreferences from '@/containers/Preferences/Users/withUserPreferences';
 
 /**
  * Preferences page - Users page.

src/containers/Preferences/Users/UsersActions.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T } from '@/components';
 
-import Icon from 'components/Icon';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
 
 function UsersActions({ openDialog, closeDialog }) {
   const history = useHistory();

src/containers/Preferences/Users/UsersAlerts.js

@@ -1,17 +0,0 @@
-import React from 'react';
-
-const UserDeleteAlert = React.lazy(() =>
-  import('../../Alerts/Users/UserDeleteAlert'),
-);
-const UserActivateAlert = React.lazy(() =>
-  import('../../Alerts/Users/UserActivateAlert'),
-);
-const UserInactivateAlert = React.lazy(() =>
-  import('../../Alerts/Users/UserInactivateAlert'),
-);
-
-export default [
-  { name: 'user-delete', component: UserDeleteAlert },
-  { name: 'user-activate', component: UserActivateAlert },
-  { name: 'user-inactivate', component: UserInactivateAlert },
-];

src/containers/Preferences/Users/UsersAlerts.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const UserDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Users/UserDeleteAlert'),
+);
+const UserActivateAlert = React.lazy(
+  () => import('@/containers/Alerts/Users/UserActivateAlert'),
+);
+const UserInactivateAlert = React.lazy(
+  () => import('@/containers/Alerts/Users/UserInactivateAlert'),
+);
+
+export default [
+  { name: 'user-delete', component: UserDeleteAlert },
+  { name: 'user-activate', component: UserActivateAlert },
+  { name: 'user-inactivate', component: UserInactivateAlert },
+];

src/containers/Preferences/Users/UsersDataTable.tsx

@@ -1,14 +1,11 @@
 import React, { useCallback } from 'react';
 
-import { compose } from 'utils';
-import { DataTable } from 'components';
-import { useResendInvitation } from 'hooks/query';
-import AppToaster from 'components/AppToaster';
+import { compose } from '@/utils';
+import { DataTable, TableSkeletonRows, AppToaster } from '@/components';
+import { useResendInvitation } from '@/hooks/query';
 
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertActions from 'containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';
 
 import { ActionsMenu, useUsersListColumns } from './components';
 import { useUsersListContext } from './UsersProvider';
@@ -36,42 +33,49 @@ function UsersDataTable({
     (user) => {
       openAlert('user-inactivate', { userId: user.id });
     },
-    [openAlert]
+    [openAlert],
   );
   // Handle activate user action.
   const handleActivateuser = useCallback(
     (user) => {
       openAlert('user-activate', { userId: user.id });
     },
-    [openAlert]
+    [openAlert],
   );
   // Handle delete user action.
   const handleDeleteUser = useCallback(
     (user) => {
       openAlert('user-delete', { userId: user.id });
     },
-    [openAlert]
+    [openAlert],
   );
 
   const { mutateAsync: resendInviation } = useResendInvitation();
 
-  const handleResendInvitation = useCallback(
-    (user) => {
-      resendInviation(user.id).then(() => {
+  const handleResendInvitation = useCallback((user) => {
+    resendInviation(user.id)
+      .then(() => {
         AppToaster.show({
           message: 'User invitation has been re-sent to the user.',
-          intent: Intent.SUCCESS
+          intent: Intent.SUCCESS,
         });
-      }).catch(({ response: { data: { errors } } }) => {
-        if (errors.find(e => e.type === 'USER_RECENTLY_INVITED')) {
-          AppToaster.show({
-            message: 'This person was recently invited. No need to invite them again just yet.',
-            intent: Intent.DANGER
-          });
-        }
-      });
-    }
-  )
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          if (errors.find((e) => e.type === 'USER_RECENTLY_INVITED')) {
+            AppToaster.show({
+              message:
+                'This person was recently invited. No need to invite them again just yet.',
+              intent: Intent.DANGER,
+            });
+          }
+        },
+      );
+  });
   // Users list columns.
   const columns = useUsersListColumns();
 
@@ -93,13 +97,10 @@ function UsersDataTable({
         onActivate: handleActivateuser,
         onInactivate: handleInactivateUser,
         onDelete: handleDeleteUser,
-        onResendInvitation: handleResendInvitation
+        onResendInvitation: handleResendInvitation,
       }}
     />
   );
 }
 
-export default compose(
-  withDialogActions,
-  withAlertActions
-)(UsersDataTable);
+export default compose(withDialogActions, withAlertActions)(UsersDataTable);

src/containers/Preferences/Users/UsersList.tsx

@@ -2,10 +2,10 @@ import React, { useEffect } from 'react';
 import intl from 'react-intl-universal';
 
 import { UsersListProvider } from './UsersProvider';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
 import UsersDataTable from './UsersDataTable';
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Users list.

src/containers/Preferences/Users/UsersProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext } from 'react';
-import { useUsers } from 'hooks/query';
+import { useUsers } from '@/hooks/query';
 
 const UsersListContext = createContext();
 

src/containers/Preferences/Users/components.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
+import { FormattedMessage as T, Icon, If } from '@/components';
 import {
   Intent,
   Button,
@@ -11,8 +11,7 @@ import {
   MenuItem,
   Position,
 } from '@blueprintjs/core';
-import { safeCallback, firstLettersArgs } from 'utils';
-import { Icon, If } from 'components';
+import { safeCallback, firstLettersArgs } from '@/utils';
 
 /**
  * Avatar cell.

src/containers/Preferences/Users/withUserPreferences.js

@@ -1,13 +0,0 @@
-import {connect} from 'react-redux';
-import t from 'store/types';
-
-export const mapStateToProps = (state, props) => {
-
-};
-
-export const mapDispatchToProps = (dispatch) => ({
-  openDialog: (name, payload) => dispatch({ type: t.OPEN_DIALOG, name, payload }),
-  closeDialog: (name, payload) => dispatch({ type: t.CLOSE_DIALOG, name, payload }),
-});
-
-export default connect(null, mapDispatchToProps);

src/containers/Preferences/Users/withUserPreferences.tsx

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import t from '@/store/types';
+
+export const mapStateToProps = (state, props) => {};
+
+export const mapDispatchToProps = (dispatch) => ({
+  openDialog: (name, payload) =>
+    dispatch({ type: t.OPEN_DIALOG, name, payload }),
+  closeDialog: (name, payload) =>
+    dispatch({ type: t.CLOSE_DIALOG, name, payload }),
+});
+
+export default connect(null, mapDispatchToProps);

src/containers/Preferences/Warehouses/Warehouses.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import '../../../style/pages/Preferences/warehousesList.scss';
+import '@/style/pages/Preferences/warehousesList.scss';
 
 import WarehousesGrid from './WarehousesGrid';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import { compose } from 'utils';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import { compose } from '@/utils';
 
 /**
  * Warehouses.

src/containers/Preferences/Warehouses/WarehousesActions.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 
-import { Features } from 'common';
-import { FeatureCan, FormattedMessage as T, Icon } from 'components';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
+import { Features } from '@/constants';
+import { FeatureCan, FormattedMessage as T, Icon } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
 
 /**
  * Warehouse actions.

src/containers/Preferences/Warehouses/WarehousesAlerts.js

@@ -1,19 +0,0 @@
-import React from 'react';
-
-const WarehouseDeleteAlert = React.lazy(() =>
-  import('../../Alerts/Warehouses/WarehouseDeleteAlert'),
-);
-// const WarehouseMarkPrimaryAlert = React.lazy(() =>
-//   import('../../Alerts/Warehouses/WarehouseMarkPrimaryAlert'),
-// );
-
-/**
- * Warehouses alerts.
- */
-export default [
-  { name: 'warehouse-delete', component: WarehouseDeleteAlert },
-  // {
-  //   name: 'warehouse-mark-primary',
-  //   component: WarehouseMarkPrimaryAlert,
-  // },
-];

src/containers/Preferences/Warehouses/WarehousesAlerts.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const WarehouseDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Warehouses/WarehouseDeleteAlert'),
+);
+
+/**
+ * Warehouses alerts.
+ */
+export default [{ name: 'warehouse-delete', component: WarehouseDeleteAlert }];

src/containers/Preferences/Warehouses/WarehousesEmptyStatus.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, EmptyStatus } from '../../../components';
-import withDialogActions from 'containers/Dialog/withDialogActions';
+import { FormattedMessage as T, EmptyStatus } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 function WarehousesEmptyStatus({
   // #withDialogActions

src/containers/Preferences/Warehouses/WarehousesGridItems.tsx

@@ -3,13 +3,13 @@ import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import { ContextMenu2 } from '@blueprintjs/popover2';
 
-import { AppToaster } from 'components';
+import { AppToaster } from '@/components';
 import { WarehouseContextMenu, WarehousesGridItemBox } from './components';
-import { useMarkWarehouseAsPrimary } from 'hooks/query';
+import { useMarkWarehouseAsPrimary } from '@/hooks/query';
 
-import withAlertsActions from '../../Alert/withAlertActions';
-import withDialogActions from '../../Dialog/withDialogActions';
-import { compose } from 'utils';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
 
 /**
  *  warehouse grid item.

src/containers/Preferences/Warehouses/WarehousesProvider.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-import { useWarehouses, useCashflowAccounts } from 'hooks/query';
+import { CLASSES } from '@/constants/classes';
+import { useWarehouses } from '@/hooks/query';
 import { isEmpty } from 'lodash';
 
-import { Features } from 'common';
-import { useFeatureCan } from 'hooks/state';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
 
 const WarehousesContext = React.createContext();
 

src/containers/Preferences/Warehouses/components.tsx

@@ -9,8 +9,8 @@ import {
   Classes,
 } from '@blueprintjs/core';
 
-import { Icon, If } from '../../../components';
-import { safeCallback } from 'utils';
+import { Icon, If } from '@/components';
+import { safeCallback } from '@/utils';
 
 const WAREHOUSES_SKELETON_N = 4;
 

src/containers/Preferences/Warehouses/utils.tsx

@@ -1,6 +1,6 @@
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
-import { AppToaster } from 'components';
+import { AppToaster } from '@/components';
 
 /**
  * Handle delete errors.