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

src/containers/Subscriptions/BillingForm.tsx

@@ -1,20 +1,17 @@
 import React, { useEffect } from 'react';
-import { Formik, Form } from 'formik';
 import intl from 'react-intl-universal';
-import { If, Alert, T } from 'components';
+import { Formik, Form } from 'formik';
+import { DashboardInsider, If, Alert, T } from '@/components';
 
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-
-import 'style/pages/Billing/BillingPage.scss';
+import '@/style/pages/Billing/BillingPage.scss';
 
+import { compose } from '@/utils';
 import { MasterBillingTabs } from './SubscriptionTabs';
+import { getBillingFormValidationSchema } from './utils';
 
 import withBillingActions from './withBillingActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import withSubscriptionPlansActions from './withSubscriptionPlansActions';
-
-import { compose } from 'utils';
-import { getBillingFormValidationSchema } from './utils';
 import withSubscriptions from './withSubscriptions';
 
 /**

src/containers/Subscriptions/BillingPaymentMethod.js

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { T } from 'components';
-import { PaymentMethodTabs } from './SubscriptionTabs';
-
-export default ({ formik, title, description }) => {
-  return (
-    <section class="billing-plans__section">
-      <h1 className="title"><T id={'setup.plans.payment_methods.title'} /></h1>
-      <p className="paragraph"><T id={'setup.plans.payment_methods.description' } /></p>
-
-      <PaymentMethodTabs formik={formik} />
-    </section>
-  );
-};

src/containers/Subscriptions/BillingPaymentMethod.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { T } from 'components';
+import { T } from '@/components';
 import { PaymentMethodTabs } from './SubscriptionTabs';
 
 export default ({ formik, title, description }) => {

src/containers/Subscriptions/BillingPeriod.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
 import { get } from 'lodash';
-import { compose } from 'redux';
 
-import 'style/pages/Subscription/PlanPeriodRadio.scss';
 
-import withPlan from 'containers/Subscriptions/withPlan';
+import '@/style/pages/Subscription/PlanPeriodRadio.scss';
 
-import { saveInvoke } from 'utils';
+import withPlan from '@/containers/Subscriptions/withPlan';
+
+import { saveInvoke, compose } from '@/utils';
 
 /**
  * Billing period.

src/containers/Subscriptions/BillingPeriodsInput.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Field } from 'formik';
 import * as R from 'ramda';
 
-import { T, SubscriptionPeriods } from 'components';
+import { T, SubscriptionPeriods } from '@/components';
 
 import withPlan from './withPlan';
 

src/containers/Subscriptions/BillingPlan.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
+import { FormattedMessage as T } from '@/components';
 
-import { saveInvoke } from 'utils';
+import { saveInvoke } from '@/utils';
 
 /**
  * Billing plan.

src/containers/Subscriptions/BillingPlansForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as R from 'ramda';
 
-import 'style/pages/Subscription/BillingPlans.scss';
+import '@/style/pages/Subscription/BillingPlans.scss';
 
 import BillingPlansInput from './BillingPlansInput';
 import BillingPeriodsInput from './BillingPeriodsInput';

src/containers/Subscriptions/BillingPlansInput.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Field } from 'formik';
-import { T, SubscriptionPlans } from 'components';
+import { T, SubscriptionPlans } from '@/components';
 
 import withPlans from './withPlans';
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Billing plans.

src/containers/Subscriptions/LicenseTab.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
-
 import { Intent, Button } from '@blueprintjs/core';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'redux';
 import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from '@/components';
+import { compose } from '@/utils';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 /**
  * Payment via license code tab.

src/containers/Subscriptions/SubscriptionTabs.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 BillingTab from './BillingTab';
 import LicenseTab from './LicenseTab';
 

src/containers/Subscriptions/withBillingActions.tsx

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { submitBilling } from 'store/billing/Billing.action';
+import { submitBilling } from '@/store/billing/Billing.action';
 
 export const mapDispatchToProps = (dispatch) => ({
   requestSubmitBilling: (form) => dispatch(submitBilling({ form })),

src/containers/Subscriptions/withPlan.tsx

@@ -1,8 +1,5 @@
-
-
-
 import { connect } from 'react-redux';
-import { getPlanSelector } from 'store/plans/plans.selectors';
+import { getPlanSelector } from '@/store/plans/plans.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
@@ -11,7 +8,7 @@ export default (mapState) => {
     const mapped = {
       plan: getPlan(state, props),
     };
-    return (mapState) ? mapState(mapped, state, props) : mapped;
+    return mapState ? mapState(mapped, state, props) : mapped;
   };
   return connect(mapStateToProps);
-};
+};

src/containers/Subscriptions/withPlans.tsx

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import {
   getPlansSelector,
-} from 'store/plans/plans.selectors';
+} from '@/store/plans/plans.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {

src/containers/Subscriptions/withSubscriptionPlansActions.tsx

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { initSubscriptionPlans } from 'store/plans/plans.actions';
+import { initSubscriptionPlans } from '@/store/plans/plans.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
   initSubscriptionPlans: () => dispatch(initSubscriptionPlans()),

src/containers/Subscriptions/withSubscriptions.tsx

@@ -3,7 +3,7 @@ import {
   isSubscriptionOnTrialFactory,
   isSubscriptionInactiveFactory,
   isSubscriptionActiveFactory,
-} from 'store/subscription/subscription.selectors';
+} from '@/store/subscription/subscription.selectors';
 
 export default (mapState, slug) => {
   const isSubscriptionOnTrial = isSubscriptionOnTrialFactory(slug);
@@ -16,7 +16,7 @@ export default (mapState, slug) => {
       isSubscriptionInactive: isSubscriptionInactive(state, props),
       isSubscriptionActive: isSubscriptionActive(state, props),
     };
-    return (mapState) ? mapState(mapped, state, props) : mapped;
+    return mapState ? mapState(mapped, state, props) : mapped;
   };
   return connect(mapStateToProps);
-};
+};

src/containers/Subscriptions/withSubscriptionsActions.tsx

@@ -1,10 +1,8 @@
 import { connect } from 'react-redux';
-import { 
-  fetchSubscriptions,
-} from 'store/subscription/subscription.actions'
+import { fetchSubscriptions } from '@/store/subscription/subscription.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   requestFetchSubscriptions: () => dispatch(fetchSubscriptions()),
 });
 
-export default connect(null, mapDispatchToProps);
+export default connect(null, mapDispatchToProps);

src/containers/Subscriptions/withSubscriptionss.tsx

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
 import {
   isSubscriptionsInactiveFactory,
-  isSubscriptionsActiveFactory
-} from 'store/subscription/subscription.selectors';
+  isSubscriptionsActiveFactory,
+} from '@/store/subscription/subscription.selectors';
 
 export default (mapState) => {
   const isSubscriptionsInactive = isSubscriptionsInactiveFactory();
@@ -13,7 +13,7 @@ export default (mapState) => {
       isSubscriptionsInactive: isSubscriptionsInactive(state, props),
       isSubscriptionsActive: isSubscriptionsActive(state, props),
     };
-    return (mapState) ? mapState(mapped, state, props) : mapped;
+    return mapState ? mapState(mapped, state, props) : mapped;
   };
   return connect(mapStateToProps);
-};
+};