refactor(common): CHECKOUT-4338 Stop importing internal modules

.eslintrc.json

@@ -1,8 +1,9 @@
 {
     "extends": [
         "plugin:import/errors",
-        "plugin:import/warnings",
-        "plugin:import/typescript"
+        "plugin:import/react",
+        "plugin:import/typescript",
+        "plugin:import/warnings"
     ],
     "env": {
         "browser": true
@@ -30,6 +31,16 @@
             }
         ],
         "react-hooks/exhaustive-deps": "error",
-        "react-hooks/rules-of-hooks": "error"
+        "react-hooks/rules-of-hooks": "error",
+        "import/no-internal-modules": [
+            "error",
+            {
+                "allow": [
+                    "react-dom/test-utils",
+                    "**/*.{mock,scss}",
+                    "**/index.ts"
+                ]
+            }
+        ]
     }
 }

src/app/address/AddressSelect.spec.tsx

@@ -10,8 +10,8 @@ import { getCustomer } from '../customer/customers.mock';
 import { createLocaleContext, LocaleContext, LocaleContextType } from '../locale';
 
 import { getAddress } from './address.mock';
-import StaticAddress from './staticAddress/StaticAddress';
 import AddressSelect from './AddressSelect';
+import StaticAddress from './StaticAddress';
 
 describe('AddressSelect Component', () => {
     let checkoutService: CheckoutService;

src/app/address/AddressSelect.tsx

@@ -2,11 +2,11 @@ import { Address, CustomerAddress } from '@bigcommerce/checkout-sdk';
 import React, { Component, FunctionComponent, ReactNode } from 'react';
 
 import { preventDefault } from '../common/dom';
-import { TranslatedString } from '../language';
+import { TranslatedString } from '../locale';
 import { DropdownTrigger } from '../ui/dropdown';
 
-import StaticAddress from './staticAddress/StaticAddress';
-import isEqualAddress from './util/isEqualAddress';
+import isEqualAddress from './isEqualAddress';
+import StaticAddress from './StaticAddress';
 
 export interface AddressSelectProps {
     addresses: CustomerAddress[];

src/app/address/DynamicFormField.spec.tsx

@@ -3,7 +3,7 @@ import { mount, shallow } from 'enzyme';
 import { Formik } from 'formik';
 import React from 'react';
 
-import { TranslatedString } from '../language';
+import { TranslatedString } from '../locale';
 import { FormField } from '../ui/form';
 
 import { getFormFields } from './formField.mock';

src/app/address/DynamicFormField.tsx

@@ -1,10 +1,10 @@
 import { FormField as FormFieldType } from '@bigcommerce/checkout-sdk';
 import React, { FunctionComponent } from 'react';
 
-import { TranslatedString } from '../language';
+import { TranslatedString } from '../locale';
 import { FormField, Label } from '../ui/form';
 
-import { getFormFieldInputId, getFormFieldLegacyName } from './util/getFormFieldInputId';
+import { getFormFieldInputId, getFormFieldLegacyName } from './getFormFieldInputId';
 import CheckboxGroupFormField from './CheckboxGroupFormField';
 import DynamicFormFieldType from './DynamicFormFieldType';
 import DynamicInput from './DynamicInput';

src/app/address/MultiCheckboxControl.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 
-import { TranslatedString } from '../language';
+import { TranslatedString } from '../locale';
 
 export interface MultiCheckboxControlProps {
     testId?: string;

src/app/address/staticAddress/StaticAddress.spec.tsx → src/app/address/StaticAddress.spec.tsx

@@ -2,10 +2,10 @@ import { createCheckoutService, CheckoutService } from '@bigcommerce/checkout-sd
 import { mount } from 'enzyme';
 import React from 'react';
 
-import { CheckoutProvider } from '../../checkout';
-import { getCountries } from '../../geography/countries.mock';
-import { getAddress } from '../address.mock';
+import { CheckoutProvider } from '../checkout';
+import { getCountries } from '../geography/countries.mock';
 
+import { getAddress } from './address.mock';
 import StaticAddress from './StaticAddress';
 
 describe('StaticAddress Component', () => {

src/app/address/staticAddress/StaticAddress.tsx → src/app/address/StaticAddress.tsx

@@ -1,10 +1,10 @@
 import { Address } from '@bigcommerce/checkout-sdk';
 import React from 'react';
 
-import { withCheckout, CheckoutContextProps } from '../../checkout';
-import { LocalizedGeography } from '../../geography';
-import localizeAddress from '../util/localizeAddress';
+import { withCheckout, CheckoutContextProps } from '../checkout';
+import { LocalizedGeography } from '../geography';
 
+import localizeAddress from './localizeAddress';
 import './StaticAddress.scss';
 
 interface StaticAddressProps {

src/app/address/util/getFormFieldInputId.ts → src/app/address/getFormFieldInputId.ts

@@ -1,4 +1,4 @@
-import { AddressKeyMap } from '../DynamicFormField';
+import { AddressKeyMap } from './DynamicFormField';
 
 export const ADDRESS_FIELD_IDS: AddressKeyMap = {
     address1: 'addressLine1',

src/app/address/googleAutocomplete/AddressSelector.spec.ts

@@ -1,4 +1,4 @@
-import { getGoogleAutocompletePlaceMock } from './__mocks__/googleAutocompleteResult';
+import { getGoogleAutocompletePlaceMock } from './googleAutocompleteResult.mock';
 import AddressSelector from './AddressSelector';
 
 describe('AddressSelector', () => {

src/app/address/googleAutocomplete/GoogleAutocompleteFormField.tsx

@@ -1,10 +1,10 @@
 import { FormField as FormFieldType } from '@bigcommerce/checkout-sdk';
 import React, { FunctionComponent } from 'react';
 
-import { TranslatedString } from '../../language';
+import { TranslatedString } from '../../locale';
 import { AutocompleteItem } from '../../ui/autocomplete';
 import { FormField } from '../../ui/form';
-import { getFormFieldInputId } from '../util/getFormFieldInputId';
+import { getFormFieldInputId } from '../getFormFieldInputId';
 
 import GoogleAutocomplete from './GoogleAutocomplete';
 

src/app/address/googleAutocomplete/mapToAddress.spec.ts

@@ -1,7 +1,7 @@
 import { getCountries } from '../../geography/countries.mock';
 
+import { getGoogleAutocompletePlaceMock } from './googleAutocompleteResult.mock';
 import mapToAddress from './mapToAddress';
-import { getGoogleAutocompletePlaceMock } from './__mocks__/googleAutocompleteResult';
 
 describe('mapToAddress()', () => {
     it('returns a partial address with hydrated province', () => {

src/app/address/index.ts

@@ -7,8 +7,8 @@ export { default as mapAddressFromFormValues } from './mapAddressFromFormValues'
 export { default as AddressForm } from './AddressForm';
 export { default as AddressSelect } from './AddressSelect';
 export { default as getAddressValidationSchema } from './getAddressValidationSchema';
-export { default as StaticAddress } from './staticAddress/StaticAddress';
-export { default as localizeAddress } from './util/localizeAddress';
-export { default as isValidAddress } from './util/isValidAddress';
-export { default as isValidCustomerAddress } from './util/isValidCustomerAddress';
-export { default as isEqualAddress } from './util/isEqualAddress';
+export { default as StaticAddress } from './StaticAddress';
+export { default as localizeAddress } from './localizeAddress';
+export { default as isValidAddress } from './isValidAddress';
+export { default as isValidCustomerAddress } from './isValidCustomerAddress';
+export { default as isEqualAddress } from './isEqualAddress';

src/app/address/util/isEqualAddress.spec.ts → src/app/address/isEqualAddress.spec.ts

@@ -1,9 +1,8 @@
-import { getAddress } from '../address.mock';
-import { getAddressFormFields } from '../formField.mock';
-import mapAddressFromFormValues from '../mapAddressFromFormValues';
-import mapAddressToFormValues from '../mapAddressToFormValues';
-
+import { getAddress } from './address.mock';
+import { getAddressFormFields } from './formField.mock';
 import isEqualAddress from './isEqualAddress';
+import mapAddressFromFormValues from './mapAddressFromFormValues';
+import mapAddressToFormValues from './mapAddressToFormValues';
 
 describe('isEqualAddress', () => {
     it('returns true when ignored values are different', () => {

src/app/address/util/isValidAddress.spec.ts → src/app/address/isValidAddress.spec.ts

@@ -1,6 +1,5 @@
-import { getAddress } from '../address.mock';
-import { getFormFields } from '../formField.mock';
-
+import { getAddress } from './address.mock';
+import { getFormFields } from './formField.mock';
 import isValidAddress from './isValidAddress';
 
 describe('isValidAddress()', () => {

src/app/address/util/isValidAddress.ts → src/app/address/isValidAddress.ts

@@ -1,7 +1,7 @@
 import { Address, FormField } from '@bigcommerce/checkout-sdk';
 
-import getAddressValidationSchema from '../getAddressValidationSchema';
-import mapAddressToFormValues from '../mapAddressToFormValues';
+import getAddressValidationSchema from './getAddressValidationSchema';
+import mapAddressToFormValues from './mapAddressToFormValues';
 
 export default function isValidAddress(address: Address, formFields: FormField[]): boolean {
     const addressSchema = getAddressValidationSchema({ formFields });

src/app/address/util/localizeAddress.spec.ts → src/app/address/localizeAddress.spec.ts

@@ -1,8 +1,8 @@
 import { Address } from '@bigcommerce/checkout-sdk';
 
-import { getCountries } from '../../geography/countries.mock';
-import { getAddress } from '../address.mock';
+import { getCountries } from '../geography/countries.mock';
 
+import { getAddress } from './address.mock';
 import localizeAddress from './localizeAddress';
 
 describe('localizeAddress', () => {

src/app/address/util/localizeAddress.ts → src/app/address/localizeAddress.ts

@@ -1,8 +1,8 @@
 import { Address } from '@bigcommerce/checkout-sdk';
 import { find, isEmpty } from 'lodash';
 
-import { memoize } from '../../common/utility';
-import { Country, LocalizedGeography } from '../../geography';
+import { memoize } from '../common/utility';
+import { Country, LocalizedGeography } from '../geography';
 
 const localizeAddress = <T1 extends Address>(
     address: T1,

src/app/billing/Billing.tsx

@@ -5,7 +5,7 @@ import React, { Component, ReactNode } from 'react';
 import { isEqualAddress, mapAddressFromFormValues } from '../address';
 import { withCheckout, CheckoutContextProps } from '../checkout';
 import { EMPTY_ARRAY } from '../common/utility';
-import { TranslatedString } from '../language';
+import { TranslatedString } from '../locale';
 import { getShippableItemsCount } from '../shipping';
 import { Legend } from '../ui/form';
 import { LoadingOverlay } from '../ui/loading';

src/app/billing/BillingForm.tsx

@@ -4,8 +4,7 @@ import React, { createRef, Component, ReactNode, RefObject } from 'react';
 import { lazy } from 'yup';
 
 import { getAddressValidationSchema, isValidCustomerAddress, mapAddressToFormValues, AddressForm, AddressFormValues, AddressSelect } from '../address';
-import { TranslatedString } from '../language';
-import { withLanguage, WithLanguageProps } from '../locale';
+import { withLanguage, TranslatedString, WithLanguageProps } from '../locale';
 import { OrderComments } from '../orderComments';
 import { Button, ButtonVariant } from '../ui/button';
 import { Fieldset, Form } from '../ui/form';

src/app/payment/redeemable/AppliedRedeemable.spec.tsx → src/app/cart/AppliedRedeemable.spec.tsx

@@ -1,8 +1,8 @@
 import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
 
-import { getStoreConfig } from '../../config/config.mock';
-import { createLocaleContext, LocaleContext } from '../../locale';
+import { getStoreConfig } from '../config/config.mock';
+import { createLocaleContext, LocaleContext } from '../locale';
 
 import AppliedRedeemable from './AppliedRedeemable';
 

src/app/payment/redeemable/AppliedRedeemable.tsx → src/app/cart/AppliedRedeemable.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import React, { FunctionComponent } from 'react';
 
-import { TranslatedString } from '../../language';
-import { IconRemove } from '../../ui/icon';
+import { TranslatedString } from '../locale';
+import { IconRemove } from '../ui/icon';
 
 export interface AppliedRedeemableProps {
     isRemoving: boolean;

src/app/payment/redeemable/AppliedRedeemables.tsx → src/app/cart/AppliedRedeemables.tsx

@@ -1,8 +1,8 @@
 import { Coupon, GiftCertificate } from '@bigcommerce/checkout-sdk';
 import React, { FunctionComponent } from 'react';
 
-import { AppliedCoupon } from '../../coupon';
-import { AppliedGiftCertificate } from '../../giftCertificate';
+import { AppliedCoupon } from '../coupon';
+import { AppliedGiftCertificate } from '../giftCertificate';
 
 import AppliedRedeemable from './AppliedRedeemable';
 

src/app/cart/EditLink.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 
-import { TranslatedString } from '../language';
+import { TranslatedString } from '../locale';
 
 export interface EditLinkProps {
     className?: string;

src/app/cart/EmptyCartMessage.tsx

@@ -1,6 +1,6 @@
 import React, { Component, ReactNode } from 'react';
 
-import { TranslatedHtml } from '../language';
+import { TranslatedHtml } from '../locale';
 import { LoadingOverlay } from '../ui/loading';
 
 export interface EmptyCartMessageProps {

src/app/cart/Redeemable.tsx

@@ -5,15 +5,14 @@ import React, { Fragment, FunctionComponent } from 'react';
 import { object, string } from 'yup';
 
 import { preventDefault } from '../common/dom';
-import { TranslatedString } from '../language';
-import { withLanguage, WithLanguageProps } from '../locale';
-import AppliedRedeemables, { AppliedRedeemablesProps } from '../payment/redeemable/AppliedRedeemables';
+import { withLanguage, TranslatedString, WithLanguageProps } from '../locale';
 import { Alert, AlertType } from '../ui/alert';
 import { Button, ButtonVariant } from '../ui/button';
-import { FormField, Label, TextInput } from '../ui/form';
-import FormProvider from '../ui/form/FormProvider';
+import { FormField, FormProvider, Label, TextInput } from '../ui/form';
 import { Toggle } from '../ui/toggle';
 
+import AppliedRedeemables, { AppliedRedeemablesProps } from './AppliedRedeemables';
+
 export interface RedeemableFormValues {
     redeemableCode: string;
 }

src/app/cart/index.ts

@@ -1,9 +1,13 @@
 import { CartSummaryProps } from './CartSummary';
 import { EmptyCartMessageProps } from './EmptyCartMessage';
+import { RedeemableProps } from './Redeemable';
 
 export type EmptyCartMessageProps = EmptyCartMessageProps;
 export type CartSummaryProps = CartSummaryProps;
+export type RedeemableProps = RedeemableProps;
 
 export { default as CartSummaryDrawer } from './CartSummaryDrawer';
 export { default as CartSummary } from './CartSummary';
+export { default as Redeemable } from './Redeemable';
 export { default as EmptyCartMessage } from './EmptyCartMessage';
+export { default as mapToRedeemableProps } from './mapToRedeemableProps';

src/app/cart/withRedeemable.tsx

@@ -1,7 +1,6 @@
 import React, { ComponentType, FunctionComponent } from 'react';
 
-import { OrderSummarySubtotalsProps } from '../order';
-import { OrderSummaryProps } from '../order/OrderSummary';
+import { OrderSummaryProps, OrderSummarySubtotalsProps } from '../order';
 
 import mapToOrderSummarySubtotalsProps from './mapToOrderSummarySubtotalsProps';
 import { CartSummaryProps, WithCheckoutCartSummaryProps } from './CartSummary';

src/app/checkout/Checkout.spec.tsx

@@ -536,7 +536,6 @@ describe('Checkout', () => {
                 .toMatchObject({
                     cart: getCart(),
                     compactView: true,
-                    showShippingMethod: true,
                     consignment,
                 });
         });

src/app/checkout/Checkout.tsx

@@ -10,8 +10,7 @@ import { CartSummary, CartSummaryDrawer, EmptyCartMessage } from '../cart';
 import { ErrorLogger, ErrorModal } from '../common/error';
 import { Customer, CustomerInfo, CustomerSignOutEvent, CustomerViewType } from '../customer';
 import { isEmbedded, EmbeddedCheckoutStylesheet } from '../embeddedCheckout';
-import { TranslatedString } from '../language';
-import { withLanguage, WithLanguageProps } from '../locale';
+import { withLanguage, TranslatedString, WithLanguageProps } from '../locale';
 import { Payment } from '../payment';
 import { PromotionBannerList } from '../promotion';
 import { isUsingMultiShipping, Shipping, StaticConsignment } from '../shipping';
@@ -276,7 +275,6 @@ class Checkout extends Component<CheckoutProps & WithCheckoutProps & WithLanguag
                 summary={ consignments.map(consignment =>
                     <div key={ consignment.id } className="staticConsignmentContainer">
                         <StaticConsignment
-                            showShippingMethod
                             cart={ cart }
                             consignment={ consignment }
                             compactView={ consignments.length < 2 }

src/app/checkout/CheckoutStepHeader.tsx

@@ -3,7 +3,7 @@ import { noop } from 'lodash';
 import React, { FunctionComponent, ReactNode } from 'react';
 
 import { preventDefault } from '../common/dom';
-import { TranslatedString } from '../language';
+import { TranslatedString } from '../locale';
 import { Button, ButtonSize, ButtonVariant } from '../ui/button';
 import { IconCheck } from '../ui/icon';
 

src/app/checkout/getCheckoutStepStatuses.ts

@@ -4,7 +4,7 @@ import { createSelector } from 'reselect';
 
 import { isValidAddress } from '../address';
 import { EMPTY_ARRAY } from '../common/utility';
-import { SUPPORTED_METHODS } from '../customer/CheckoutButtonList';
+import { SUPPORTED_METHODS } from '../customer';
 import { hasSelectedShippingOptions, hasUnassignedLineItems } from '../shipping';
 
 import CheckoutStepType from './CheckoutStepType';

src/app/common/error/errorCode/ErrorCode.scss → src/app/common/error/ErrorCode.scss

@@ -1,4 +1,4 @@
-@import '../../../../../node_modules/@bigcommerce/citadel/src/settings/global/global';
+@import '../../../../node_modules/@bigcommerce/citadel/src/settings/global/global';
 
 .errorCode {
     font-size: fontSize("tiny");

src/app/common/error/errorCode/ErrorCode.tsx → src/app/common/error/ErrorCode.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
-import { TranslatedString } from '../../../language';
+import { TranslatedString } from '../../locale';
 
 import './ErrorCode.scss';
 
-const ErrorCode: React.SFC<{code: string}> = ({ code }) => {
+const ErrorCode: FunctionComponent<{code: string}> = ({ code }) => {
     return (
         <div className="errorCode">
             <span className="errorCode-label">