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

src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
-import { Row, Col } from 'components';
-import { FormattedMessage as T } from 'components';
+import { Row, Col } from '@/components';
+import { FormattedMessage as T } from '@/components';
 import { FastField, ErrorMessage } from 'formik';
-import { inputIntent } from 'utils';
+import { inputIntent } from '@/utils';
 
 const CustomerBillingAddress = ({}) => {
   return (

src/containers/Customers/CustomerForm/CustomerAttachmentTabs.tsx

@@ -5,8 +5,7 @@ import React, {
   useRef,
   useCallback,
 } from 'react';
-import Dragzone from 'components/Dragzone';
-import { FormattedMessage as T } from 'components';
+import { Dragzone, FormattedMessage as T } from '@/components';
 
 function CustomerAttachmentTabs() {
   return (

src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import moment from 'moment';
 import classNames from 'classnames';
 import { FormGroup, Position, Classes, ControlGroup } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
-import { FFormGroup } from '../../../components/Forms';
-import moment from 'moment';
-import { Features } from 'common';
+import { Features } from '@/constants';
 import {
+  FFormGroup,
+  FormattedMessage as T,
   MoneyInputGroup,
   InputPrependText,
   CurrencySelectList,
@@ -15,12 +16,10 @@ import {
   FeatureCan,
   Row,
   Col,
-} from 'components';
-import { FormattedMessage as T } from 'components';
-
+} from '@/components';
 import { useCustomerFormContext } from './CustomerFormProvider';
 import { useSetPrimaryBranchToForm } from './utils';
-import { momentFormatter, tansformDateValue, inputIntent } from 'utils';
+import { momentFormatter, tansformDateValue, inputIntent } from '@/utils';
 
 /**
  * Customer financial panel.

src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import {
   Intent,
   Button,
@@ -11,15 +12,11 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import styled from 'styled-components';
-
-import { FormattedMessage as T } from 'components';
-
-import { CLASSES } from 'common/classes';
-import { Icon } from 'components';
+import { Icon, FormattedMessage as T } from '@/components';
+import { CLASSES } from '@/constants/classes';
 import { useCustomerFormContext } from './CustomerFormProvider';
+import { safeInvoke } from '@/utils';
 
-import { safeInvoke } from 'utils';
 
 /**
  * Customer floating actions bar.

src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-import { inputIntent } from 'utils';
+import { FormattedMessage as T } from '@/components';
+import { inputIntent } from '@/utils';
 
 export default function CustomerFormAfterPrimarySection({}) {
   return (

src/containers/Customers/CustomerForm/CustomerFormFormik.tsx

@@ -1,26 +1,24 @@
 import React, { useMemo } from 'react';
-import { Formik, Form } from 'formik';
-import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
 
-import { CLASSES } from 'common/classes';
-import AppToaster from 'components/AppToaster';
-
+import { CLASSES } from '@/constants/classes';
 import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
+import { compose, transformToForm, saveInvoke } from '@/utils';
+import { useCustomerFormContext } from './CustomerFormProvider';
+import { defaultInitialValues } from './utils';
 
+import { AppToaster } from '@/components';
 import CustomerFormPrimarySection from './CustomerFormPrimarySection';
 import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
 import CustomersTabs from './CustomersTabs';
 import CustomerFloatingActions from './CustomerFloatingActions';
 
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
-import { compose, transformToForm, saveInvoke } from 'utils';
-import { useCustomerFormContext } from './CustomerFormProvider';
-import { defaultInitialValues } from './utils';
-
-import 'style/pages/Customers/Form.scss';
+import '@/style/pages/Customers/Form.scss';
 
 /**
  * Customer form.

src/containers/Customers/CustomerForm/CustomerFormPage.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { DashboardCard } from 'components';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { DashboardCard, DashboardInsider } from '@/components';
 
 import CustomerFormFormik from './CustomerFormFormik';
 import {

src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx

@@ -1,28 +1,26 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField, Field, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-
 import {
   Hint,
   FieldRequiredHint,
   SalutationList,
   DisplayNameList,
-} from 'components';
+  FormattedMessage as T,
+} from '@/components';
 import CustomerTypeRadioField from './CustomerTypeRadioField';
-import { CLASSES } from 'common/classes';
-import { inputIntent } from 'utils';
-import { useAutofocus } from 'hooks';
+import { CLASSES } from '@/constants/classes';
+import { inputIntent } from '@/utils';
+import { useAutofocus } from '@/hooks';
 
 /**
  * Customer form primary section.
  */
 export default function CustomerFormPrimarySection({}) {
   const firstNameFieldRef = useAutofocus();
-  
-  
+
   return (
     <div className={'customer-form__primary-section-content'}>
       {/**-----------Customer type. -----------*/}

src/containers/Customers/CustomerForm/CustomerFormProvider.tsx

@@ -7,9 +7,9 @@ import {
   useEditCustomer,
   useContact,
   useBranches,
-} from 'hooks/query';
-import { Features } from 'common';
-import { useFeatureCan } from 'hooks/state';
+} from '@/hooks/query';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
 
 const CustomerFormContext = createContext();
 

src/containers/Customers/CustomerForm/CustomerNotePanel.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { FormGroup, TextArea, Classes } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'components';
-import { inputIntent } from 'utils';
+import { FormattedMessage as T } from '@/components';
+import { inputIntent } from '@/utils';
 
 export default function CustomerNotePanel({ errors, touched, getFieldProps }) {
   return (

src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
+import { FormattedMessage as T } from '@/components';
 import { FastField } from 'formik';
 
-import { handleStringChange, saveInvoke } from 'utils';
+import { handleStringChange, saveInvoke } from '@/utils';
 
 /**
  * Customer type radio field.

src/containers/Customers/CustomerForm/CustomersTabs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import { Tabs, Tab } from '@blueprintjs/core';
 
 import CustomerAddressTabs from './CustomerAddressTabs';
 import CustomerAttachmentTabs from './CustomerAttachmentTabs';
@@ -8,8 +8,6 @@ import CustomerFinancialPanel from './CustomerFinancialPanel';
 import CustomerNotePanel from './CustomerNotePanel';
 
 export default function CustomersTabs() {
-  
-
   return (
     <div>
       <Tabs

src/containers/Customers/CustomersAlerts.js

@@ -1,20 +0,0 @@
-import React from 'react';
-
-const CustomerDeleteAlert = React.lazy(() =>
-  import('../Alerts/Customers/CustomerDeleteAlert'),
-);
-const CustomerActivateAlert = React.lazy(() =>
-  import('../Alerts/Customers/CustomerActivateAlert'),
-);
-const CustomerInactivateAlert = React.lazy(() =>
-  import('../Alerts/Customers/CustomerInactivateAlert'),
-);
-
-/**
- * Customers alert.
- */
-export default [
-  { name: 'customer-delete', component: CustomerDeleteAlert },
-  { name: 'customer-activate', component: CustomerActivateAlert },
-  { name: 'customer-inactivate', component: CustomerInactivateAlert },
-];

src/containers/Customers/CustomersAlerts.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const CustomerDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Customers/CustomerDeleteAlert'),
+);
+const CustomerActivateAlert = React.lazy(
+  () => import('@/containers/Alerts/Customers/CustomerActivateAlert'),
+);
+const CustomerInactivateAlert = React.lazy(
+  () => import('@/containers/Alerts/Customers/CustomerInactivateAlert'),
+);
+
+/**
+ * Customers alert.
+ */
+export default [
+  { name: 'customer-delete', component: CustomerDeleteAlert },
+  { name: 'customer-activate', component: CustomerActivateAlert },
+  { name: 'customer-inactivate', component: CustomerInactivateAlert },
+];

src/containers/Customers/CustomersLanding/CustomersActionsBar.tsx

@@ -10,7 +10,6 @@ import {
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
   Icon,
@@ -20,19 +19,20 @@ import {
   AdvancedFilterPopover,
   DashboardFilterButton,
   DashboardRowsHeightButton,
-} from 'components';
+  DashboardActionsBar,
+} from '@/components';
 
 import { useCustomersListContext } from './CustomersListProvider';
-import { useRefreshCustomers } from 'hooks/query/customers';
+import { useRefreshCustomers } from '@/hooks/query/customers';
 
 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
-import withAlertActions from 'containers/Alert/withAlertActions';
-import withSettingsActions from '../../Settings/withSettingsActions';
-import withSettings from '../../Settings/withSettings';
-import { CustomerAction, AbilitySubject } from '../../../common/abilityOption';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withSettings from '@/containers/Settings/withSettings';
+import { CustomerAction, AbilitySubject } from '@/constants/abilityOption';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Customers actions bar.

src/containers/Customers/CustomersLanding/CustomersEmptyStatus.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import { EmptyStatus } from 'components';
-import { Can, FormattedMessage as T } from 'components';
-import { AbilitySubject, CustomerAction } from '../../../common/abilityOption';
+import { Can, FormattedMessage as T, EmptyStatus } from '@/components';
+import { AbilitySubject, CustomerAction } from '@/constants/abilityOption';
 
 export default function CustomersEmptyStatus() {
   const history = useHistory();

src/containers/Customers/CustomersLanding/CustomersList.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 
-import 'style/pages/Customers/List.scss';
+import '@/style/pages/Customers/List.scss';
 
-import { DashboardPageContent } from 'components';
+import { DashboardPageContent } from '@/components';
 
 import CustomersActionsBar from './CustomersActionsBar';
 import CustomersViewsTabs from './CustomersViewsTabs';
@@ -12,7 +12,7 @@ import { CustomersListProvider } from './CustomersListProvider';
 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Customers list.

src/containers/Customers/CustomersLanding/CustomersListProvider.tsx

@@ -1,9 +1,9 @@
 import React, { createContext } from 'react';
 import { isEmpty } from 'lodash';
 
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceMeta, useResourceViews, useCustomers } from 'hooks/query';
-import { getFieldsFromResourceMeta } from 'utils';
+import { DashboardInsider } from '@/components';
+import { useResourceMeta, useResourceViews, useCustomers } from '@/hooks/query';
+import { getFieldsFromResourceMeta } from '@/utils';
 import { transformCustomersStateToQuery } from './utils';
 
 const CustomersListContext = createContext();
@@ -53,7 +53,7 @@ function CustomersListProvider({ tableState, tableStateChanged, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isResourceMetaLoading }
+      loading={isViewsLoading || isResourceMetaLoading}
       name={'customers-list'}
     >
       <CustomersListContext.Provider value={state} {...props} />

src/containers/Customers/CustomersLanding/CustomersTable.tsx

@@ -2,24 +2,27 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import CustomersEmptyStatus from './CustomersEmptyStatus';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
-import { TABLES } from 'common/tables';
-import { DataTable, DashboardContentTable } from 'components';
+import { TABLES } from '@/constants/tables';
+import {
+  DataTable,
+  DashboardContentTable,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+} from '@/components';
 import { ActionsMenu, useCustomersTableColumns } from './components';
 
 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-import withSettings from '../../Settings/withSettings';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withSettings from '@/containers/Settings/withSettings';
 
 import { useCustomersListContext } from './CustomersListProvider';
-import { useMemorizedColumnsWidths } from 'hooks';
+import { useMemorizedColumnsWidths } from '@/hooks';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Customers table.
@@ -104,12 +107,12 @@ function CustomersTable({
 
   // Handle view detail contact.
   const handleViewDetailCustomer = ({ id }) => {
-    openDrawer('customer-details-drawer', { customerId: id });
+    openDrawer('customer-detail-drawer', { customerId: id });
   };
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('customer-details-drawer', { customerId: cell.row.original.id });
+    openDrawer('customer-detail-drawer', { customerId: cell.row.original.id });
   };
 
   if (isEmptyStatus) {

src/containers/Customers/CustomersLanding/CustomersViewsTabs.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 
-import { DashboardViewsTabs } from 'components';
+import { DashboardViewsTabs } from '@/components';
+import { useCustomersListContext } from './CustomersListProvider';
+import { compose, transfromViewsToTabs } from '@/utils';
 
 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
-import { useCustomersListContext } from './CustomersListProvider';
-import { compose, transfromViewsToTabs } from 'utils';
 
 /**
  * Customers views tabs.

src/containers/Customers/CustomersLanding/components.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
 import {
   Menu,
   MenuItem,
@@ -8,14 +9,10 @@ import {
   Position,
   Classes,
 } from '@blueprintjs/core';
-import clsx from 'classnames';
 
-import intl from 'react-intl-universal';
-
-import { Can, Icon, Money, If, AvaterCell } from 'components';
-import { CustomerAction, AbilitySubject } from '../../../common/abilityOption';
-
-import { safeCallback } from 'utils';
+import { Can, Icon, Money, If, AvaterCell } from '@/components';
+import { CustomerAction, AbilitySubject } from '@/constants/abilityOption';
+import { safeCallback } from '@/utils';
 
 /**
  * Actions menu.

src/containers/Customers/CustomersLanding/utils.tsx

@@ -1,4 +1,4 @@
-import { transformTableStateToQuery } from 'utils';
+import { transformTableStateToQuery } from '@/utils';
 
 export const transformCustomersStateToQuery = (tableState) => {
   return {

src/containers/Customers/CustomersLanding/withCustomers.tsx

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import {
   getCustomersTableStateFactory,
   customersTableStateChangedFactory,
-} from 'store/customers/customers.selectors';
+} from '@/store/customers/customers.selectors';
 
 
 export default (mapState) => {

src/containers/Customers/CustomersLanding/withCustomersActions.tsx

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import {
   setCustomersTableState,
   resetCustomersTableState
-} from 'store/customers/customers.actions';
+} from '@/store/customers/customers.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
   setCustomersTableState: (state) => dispatch(setCustomersTableState(state)),

src/containers/Customers/CustomersUniversalSearch.tsx

@@ -1,8 +1,8 @@
 import intl from 'react-intl-universal';
-import { AbilitySubject, CustomerAction } from '../../common/abilityOption';
+import { AbilitySubject, CustomerAction } from '@/constants/abilityOption';
 
-import { RESOURCES_TYPES } from '../../common/resourcesTypes';
-import withDrawerActions from '../Drawer/withDrawerActions';
+import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 function CustomerUniversalSearchSelectComponent({
   resourceType,
@@ -13,7 +13,7 @@ function CustomerUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.CUSTOMER) {
-    openDrawer('customer-details-drawer', { customerId: resourceId });
+    openDrawer('customer-detail-drawer', { customerId: resourceId });
     onAction && onAction();
   }
   return null;

src/containers/Customers/utils.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Intent } from '@blueprintjs/core';
-import { AppToaster } from 'components';
 import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from '@/components';
 
 export const transformErrors = (errors) => {
   if (errors.some((e) => e.type === 'CUSTOMER.HAS.SALES_INVOICES')) {

src/containers/Customers/withCustomerDetail.tsx

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getCustomerById } from 'store/customers/customers.reducer';
+import { getCustomerById } from '@/store/customers/customers.reducer';
 
 const mapStateToProps = (state, props) => ({
   customer: getCustomerById(state, props.customerId),