Enable import order (#24091)

* Enable import order

* Add new order groups and add consistent-type-imports

* Remove types group, move react to top and fix issues

* Add store and reducers to the redux group and move imports from types folder to the end

* Fix tsc

* Remove react rule

* Fix test

* Fix eslint disable

webapp/channels/src/components/payment_form/address_form.tsx

@@ -2,14 +2,16 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import type {MessageDescriptor} from 'react-intl';
 
-import {FormattedMessage, MessageDescriptor, useIntl} from 'react-intl';
+import type {Address} from '@mattermost/types/cloud';
 
-import {Address} from '@mattermost/types/cloud';
 import DropdownInput from 'components/dropdown_input';
-import {COUNTRIES} from 'utils/countries';
 import Input from 'components/widgets/inputs/input/input';
 
+import {COUNTRIES} from 'utils/countries';
+
 import StateSelector from './state_selector';
 
 import './payment_form.scss';

webapp/channels/src/components/payment_form/card_image.tsx

@@ -4,7 +4,6 @@
 import React from 'react';
 
 import amex from 'images/cloud/cards/amex.png';
-
 import dinersclub from 'images/cloud/cards/dinersclub.png';
 import discover from 'images/cloud/cards/discover.jpg';
 import jcb from 'images/cloud/cards/jcb.png';

webapp/channels/src/components/payment_form/card_input.tsx

@@ -1,12 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
-import {StripeElements, StripeCardElement, StripeCardElementChangeEvent} from '@stripe/stripe-js';
 import {ElementsConsumer, CardElement} from '@stripe/react-stripe-js';
+import type {StripeElements, StripeCardElement, StripeCardElementChangeEvent} from '@stripe/stripe-js';
+import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Theme} from 'mattermost-redux/selectors/entities/preferences';
+import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
 
 import {toRgbValues} from 'utils/utils';
 

webapp/channels/src/components/payment_form/gather_intent/gather_intent.test.tsx

@@ -13,7 +13,7 @@ import {
 import {TestHelper} from 'utils/test_helper';
 
 import {GatherIntent} from './gather_intent';
-import {GatherIntentModalProps} from './gather_intent_modal';
+import type {GatherIntentModalProps} from './gather_intent_modal';
 
 const DummyModal = ({onClose, onSave}: GatherIntentModalProps) => {
     return (

webapp/channels/src/components/payment_form/gather_intent/gather_intent.tsx

@@ -1,15 +1,17 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {JSXElementConstructor} from 'react';
-import {FormattedMessage} from 'react-intl';
+import React from 'react';
+import type {JSXElementConstructor} from 'react';
 import {Modal} from 'react-bootstrap';
+import {FormattedMessage} from 'react-intl';
 
-import {TypePurchases} from '@mattermost/types/cloud';
+import type {TypePurchases} from '@mattermost/types/cloud';
 
-import {GatherIntentModalProps} from './gather_intent_modal';
+import type {GatherIntentModalProps} from './gather_intent_modal';
 import {GatherIntentSubmittedModal} from './gather_intent_submitted_modal';
 import {useGatherIntent} from './useGatherIntent';
+
 import './gather_intent.scss';
 
 interface GatherIntentProps {

webapp/channels/src/components/payment_form/gather_intent/gather_intent_modal.test.tsx

@@ -5,7 +5,8 @@ import React from 'react';
 
 import {fireEvent, renderWithIntl, screen} from 'tests/react_testing_utils';
 
-import {GatherIntentModal, GatherIntentModalProps} from './gather_intent_modal';
+import {GatherIntentModal} from './gather_intent_modal';
+import type {GatherIntentModalProps} from './gather_intent_modal';
 
 describe('components/gather_intent/gather_intent_modal.tsx', () => {
     const renderComponent = (props: Partial<GatherIntentModalProps> | undefined = {}) => {

webapp/channels/src/components/payment_form/gather_intent/gather_intent_modal.tsx

@@ -2,13 +2,13 @@
 // See LICENSE.txt for license information.
 
 import React, {useState} from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
 import {Modal} from 'react-bootstrap';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import warningIcon from 'images/icons/warning-icon.svg';
 
 import './gather_intent.scss';
-import {FormDataState} from './useGatherIntent';
+import type {FormDataState} from './useGatherIntent';
 
 export interface GatherIntentModalProps {
     onClose: () => void;

webapp/channels/src/components/payment_form/gather_intent/gather_intent_submitted_modal.tsx

@@ -2,11 +2,12 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
 import {Modal} from 'react-bootstrap';
+import {FormattedMessage} from 'react-intl';
+
+import {CheckCircleIcon} from '@mattermost/compass-icons/components';
 
 import './gather_intent.scss';
-import {CheckCircleIcon} from '@mattermost/compass-icons/components';
 
 export interface GatherIntentModalProps {
     onClose: () => void;

webapp/channels/src/components/payment_form/gather_intent/useGatherIntent.ts

@@ -4,10 +4,14 @@
 import {useState, useEffect} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
-import {MetadataGatherWireTransferKeys, TypePurchases} from '@mattermost/types/cloud';
+import type {MetadataGatherWireTransferKeys} from '@mattermost/types/cloud';
+import {TypePurchases} from '@mattermost/types/cloud';
+
 import {updateCloudCustomer} from 'mattermost-redux/actions/cloud';
+
 import {trackEvent} from 'actions/telemetry_actions';
-import {GlobalState} from 'types/store';
+
+import type {GlobalState} from 'types/store';
 
 interface UseGatherIntentArgs {
     typeGatherIntent: keyof typeof TypePurchases;

webapp/channels/src/components/payment_form/payment_form.tsx

@@ -1,28 +1,30 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
-import {getName} from 'country-list';
-import {FormattedMessage} from 'react-intl';
-
-import {
+import type {
     StripeCardElementChangeEvent,
 } from '@stripe/stripe-js';
+import {getName} from 'country-list';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
 
-import {PaymentMethod} from '@mattermost/types/cloud';
+import type {PaymentMethod} from '@mattermost/types/cloud';
 
-import {BillingDetails} from 'types/cloud/sku';
-import {Theme} from 'mattermost-redux/selectors/entities/preferences';
+import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
 
 import DropdownInput from 'components/dropdown_input';
 import Input from 'components/widgets/inputs/input/input';
-import * as Utils from 'utils/utils';
-import {COUNTRIES} from 'utils/countries';
 
-import StateSelector from './state_selector';
-import CardInput, {CardInputType} from './card_input';
+import {COUNTRIES} from 'utils/countries';
+import * as Utils from 'utils/utils';
+
+import type {BillingDetails} from 'types/cloud/sku';
+
 import CardImage from './card_image';
+import CardInput from './card_input';
+import type {CardInputType} from './card_input';
 import {GatherIntent, GatherIntentModal} from './gather_intent';
+import StateSelector from './state_selector';
 
 import './payment_form.scss';
 

webapp/channels/src/components/payment_form/state_selector.tsx

@@ -1,15 +1,15 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {getName} from 'country-list';
 import React from 'react';
 import {useIntl} from 'react-intl';
-import {getName} from 'country-list';
 
 import DropdownInput from 'components/dropdown_input';
-
 import Input from 'components/widgets/inputs/input/input';
 
-import {US_STATES, CA_PROVINCES, StateCode} from 'utils/states';
+import {US_STATES, CA_PROVINCES} from 'utils/states';
+import type {StateCode} from 'utils/states';
 
 type Props = {
     country: string;

webapp/channels/src/components/payment_form/stripe.ts

@@ -3,16 +3,17 @@
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
-import {
+import type {
     StripeError,
     ConfirmCardSetupData,
     ConfirmCardSetupOptions,
     SetupIntent,
 } from '@stripe/stripe-js';
 
-import {GlobalState} from 'types/store';
 import {ServiceEnvironment} from '@mattermost/types/config';
 
+import type {GlobalState} from 'types/store';
+
 type ConfirmCardSetupType = (clientSecret: string, data?: ConfirmCardSetupData | undefined, options?: ConfirmCardSetupOptions | undefined) => Promise<{ setupIntent?: SetupIntent | undefined; error?: StripeError | undefined }> | undefined;
 
 function prodConfirmCardSetup(confirmCardSetup: ConfirmCardSetupType): ConfirmCardSetupType {