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

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetails.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { Card } from 'components';
+import { Card } from '@/components';
 
 import CustomerDetailsActionsBar from './CustomerDetailsActionsBar';
 import CustomerDetailsHeader from './CustomerDetailsHeader';

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
 import { useHistory } from 'react-router-dom';
 import {
   Button,
@@ -13,16 +14,19 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import clsx from 'classnames';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider';
 
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
-import { Can, Icon, FormattedMessage as T } from 'components';
+import {
+  DashboardActionsBar,
+  Can,
+  Icon,
+  FormattedMessage as T,
+} from '@/components';
 import { CustomerMoreMenuItem } from './utils';
 import {
   AbilitySubject,
@@ -31,8 +35,8 @@ import {
   SaleReceiptAction,
   PaymentReceiveAction,
   CustomerAction,
-} from '../../../common/abilityOption';
-import { compose } from 'utils';
+} from '@/constants/abilityOption';
+import { compose } from '@/utils';
 
 /**
  * Customer details actions bar.
@@ -53,22 +57,22 @@ function CustomerDetailsActionsBar({
   // Handle new invoice button click.
   const handleNewInvoiceClick = () => {
     history.push('invoices/new');
-    closeDrawer('customer-details-drawer');
+    closeDrawer('customer-detail-drawer');
   };
   // Handle new receipt button click.
   const handleNewReceiptClick = () => {
     history.push('receipts/new');
-    closeDrawer('customer-details-drawer');
+    closeDrawer('customer-detail-drawer');
   };
   // Handle new payment receive button click.
   const handleNewPaymentClick = () => {
     history.push('payment-receives/new');
-    closeDrawer('customer-details-drawer');
+    closeDrawer('customer-detail-drawer');
   };
   // Handle new estimate button click.
   const handleNewEstimateClick = () => {
     history.push('estimates/new');
-    closeDrawer('customer-details-drawer');
+    closeDrawer('customer-detail-drawer');
   };
 
   const handleDeleteCustomer = () => {

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerContent.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { DrawerBody } from 'components';
-import CustomerDetails from './CustomerDetails';
+import { DrawerBody } from '@/components';
 import { CustomerDetailsDrawerProvider } from './CustomerDetailsDrawerProvider';
+import CustomerDetails from './CustomerDetails';
 
 /**
  * Contact detail drawer content.

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DrawerHeaderContent, DrawerLoading } from 'components';
-import { useCustomer } from 'hooks/query';
+import { useCustomer } from '@/hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
 
 const ContactDetailDrawerContext = React.createContext();
 
@@ -25,7 +25,7 @@ function CustomerDetailsDrawerProvider({ customerId, ...props }) {
   return (
     <DrawerLoading loading={isCustomerLoading}>
       <DrawerHeaderContent
-        name="customer-details-drawer"
+        name="customer-detail-drawer"
         title={customer?.display_name}
       />
       <ContactDetailDrawerContext.Provider value={provider} {...props} />

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.tsx

@@ -3,8 +3,7 @@ import intl from 'react-intl-universal';
 import clsx from 'classnames';
 import { defaultTo } from 'lodash';
 
-import { DetailsMenu, DetailItem, T } from 'components';
-
+import { DetailsMenu, DetailItem, T } from '@/components';
 import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider';
 
 import Style from './CustomerDetailsDrawer.module.scss';

src/containers/Drawers/CustomerDetailsDrawer/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Drawer, DrawerSuspense } from 'components';
-import withDrawers from 'containers/Drawer/withDrawers';
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 const CustomerDetailsDrawerContent = React.lazy(() =>
   import('./CustomerDetailsDrawerContent'),

src/containers/Drawers/CustomerDetailsDrawer/utils.tsx

@@ -7,7 +7,7 @@ import {
   MenuItem,
   Menu,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T } from '@/components';
 
 /**
  *  Customer more actions menu items.