chore/MSSDK-1742: upgrade react-redux package to v8; upgrade redux-to…

…olkit to newest version; update toolkit's usages to match the newest APIs (#372) * chore/MSSDK-1742: upgrade react-redux package to v8 * chore/MSSDK-1742: upgrade redux-toolkit to latest and run codemods * chore/MSSDK-1742: update lint script
Cleeng · Jun 17, 2024 · 85277a2 · 85277a2
1 parent 74f5fcc
commit 85277a2
Show file tree

Hide file tree

Showing 36 changed files with 1,706 additions and 1,527 deletions.
diff --git a/package.json b/package.json
@@ -14,11 +14,12 @@
   "peerDependencies": {
     "react": ">= 18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.1.3",
     "styled-components": ">= 5"
   },
   "dependencies": {
     "@adyen/adyen-web": "~5.38.0",
-    "@reduxjs/toolkit": "^1.7.2",
+    "@reduxjs/toolkit": "^2.2.5",
     "camelcase": "^5.3.1",
     "classnames": "^2.3.2",
     "dotenv": "6.2.0",
@@ -36,9 +37,8 @@
     "react-app-polyfill": "^1.0.6",
     "react-i18next": "^12.2.0",
     "react-loading-skeleton": "^3.1.0",
-    "react-redux": "^7.2.6",
+    "react-redux": "^8.1.3",
     "react-select": "^5.5.4",
-    "redux": "^4.1.2",
     "redux-thunk": "^2.4.2",
     "resolve": "1.22.0",
     "svgo": "^2.8.0"
@@ -51,10 +51,9 @@
     "ts-coverage-ts": "typescript-coverage-report --project \"./tsconfig.json\" --ignore-files \"src/**/*.js*\"",
     "ts-coverage-js": "typescript-coverage-report --project \"./tsconfig.json\" --ignore-files \"src/**/*.ts*\"",
     "ts-check": "tsc --skipLibCheck --noEmit --pretty",
-    "lint": "eslint . --ext js,jsx,ts,tsx",
+    "lint": "eslint ./src --ext js,jsx,ts,tsx",
     "lint-fix": "pnpm lint --fix",
-    "dev": "pnpm --prefix ../mediastore-sdk-demo-2024 dev & onchange './src/**' -e './src/**/*.(spec|test|type|types).[jt]s?(x)' -- pnpm publish-dev",
-    "prepare": "husky"
+    "dev": "pnpm --prefix ../mediastore-sdk-demo-2024 dev & onchange './src/**' -e './src/**/*.(spec|test|type|types).[jt]s?(x)' -- pnpm publish-dev"
   },
   "browserslist": {
     "production": [
@@ -102,10 +101,11 @@
     "@types/jest": "^29.4.0",
     "@types/jwt-decode": "^3.1.0",
     "@types/mixpanel-browser": "^2.47.5",
+    "@types/node": "^20.14.2",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@types/react-redux": "^7.1.25",
-    "@types/redux-mock-store": "^1.0.3",
+    "@types/react-redux": "^7.1.33",
+    "@types/redux-mock-store": "^1.0.6",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "@typescript-eslint/parser": "^5.54.0",
@@ -127,6 +127,7 @@
     "jest-environment-jsdom": "^29.2.1",
     "lint-staged": "^15.2.5",
     "onchange": "^7.1.0",
+    "postcss-styled-syntax": "^0.6.4",
     "prettier": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Capture/Capture.tsx b/src/components/Capture/Capture.tsx
@@ -17,7 +17,7 @@ const noop = () => null;
 
 const Capture = ({ settings = [], onSuccess = noop }: CaptureProps) => {
   const { t } = useTranslation();
-  const [captureSettings, setCaptureSettings] = useState<CaptureSetting[]>();
+  const [captureSettings, setCaptureSettings] = useState<CaptureSetting[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {

diff --git a/src/components/Capture/CaptureForm/CaptureForm.tsx b/src/components/Capture/CaptureForm/CaptureForm.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect, FormEvent } from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import Input from 'components/Input';
 import EmailInput from 'components/EmailInput';
@@ -494,14 +493,4 @@ const CaptureForm = ({ settings, onSuccess }: CaptureProps) => {
   );
 };
 
-CaptureForm.propTypes = {
-  settings: PropTypes.arrayOf(PropTypes.any),
-  onSuccess: PropTypes.func
-};
-
-CaptureForm.defaultProps = {
-  settings: [],
-  onSuccess: () => null
-};
-
 export default CaptureForm;
diff --git a/src/components/CheckoutPriceBox/CheckoutPriceBox.test.js b/src/components/CheckoutPriceBox/CheckoutPriceBox.test.js
@@ -1,12 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import 'i18NextInit';
+import { Provider } from 'react-redux';
 import CheckoutPriceBox from './CheckoutPriceBox';
 
-const store = (unlimited = true, trial = false) => ({
+const getPreloadedState = (unlimited = true, trial = false) => ({
   order: {
     order: {
       priceBreakdown: {
@@ -28,25 +27,30 @@ const store = (unlimited = true, trial = false) => ({
   }
 });
 
+const defaultProps = {
+  hideRedeemButton: false,
+  isCheckout: true,
+  onRedeemClick: () => null
+};
+
 const middleware = [thunk];
 const mockStore = configureStore(middleware);
 
 describe('<CheckoutPriceBox />', () => {
   it('should not display coupon note for unlimited coupon with yearly period', () => {
     render(
-      <Provider store={mockStore(store())}>
-        <CheckoutPriceBox />
+      <Provider store={mockStore(getPreloadedState())}>
+        <CheckoutPriceBox {...defaultProps} />
       </Provider>
     );
 
-    const couponNote = screen.getByTestId('coupon-notes');
-    expect(couponNote).toHaveTextContent('');
+    expect(screen.getByTestId('coupon-notes')).toHaveTextContent('');
   });
 
   it('should display coupon note for NOT unlimited coupon with yearly period', () => {
     render(
-      <Provider store={mockStore(store(false))}>
-        <CheckoutPriceBox />
+      <Provider store={mockStore(getPreloadedState(false))}>
+        <CheckoutPriceBox {...defaultProps} />
       </Provider>
     );
 
@@ -56,8 +60,8 @@ describe('<CheckoutPriceBox />', () => {
 
   it('should display Trial Discount when isTrial is true', () => {
     render(
-      <Provider store={mockStore(store(false, true))}>
-        <CheckoutPriceBox />
+      <Provider store={mockStore(getPreloadedState(false, true))}>
+        <CheckoutPriceBox {...defaultProps} />
       </Provider>
     );
 
@@ -66,8 +70,8 @@ describe('<CheckoutPriceBox />', () => {
 
   it('should display Coupon Discount when isTrial is false', () => {
     render(
-      <Provider store={mockStore(store(false))}>
-        <CheckoutPriceBox />
+      <Provider store={mockStore(getPreloadedState(false))}>
+        <CheckoutPriceBox {...defaultProps} />
       </Provider>
     );
 

diff --git a/src/components/Consents/Consents.test.tsx b/src/components/Consents/Consents.test.tsx
@@ -1,61 +1,52 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
 import Consent from 'components/Consents';
 import 'i18NextInit';
 import { Consent as ConsentType } from 'types/Consents.types';
+import renderWithProviders from 'util/testHelpers';
+import { RootState } from 'redux/rootReducer';
+import { initialState } from 'redux/publisherConfigSlice';
 
 const store = (
   loading = false,
   error = '',
   publisherConsents: ConsentType[] = [],
   checked: boolean[] = []
-) => ({
+): Partial<RootState> => ({
   publisherConsents: {
     publisherConsents,
     checked,
     loading,
     error
   },
-  publisherConfig: { publisherId: '' }
+  publisherConfig: { ...initialState, publisherId: '' }
 });
 
 const consentsProps = {
   onChangeFn: () => null
 };
 
-const middleware = [thunk];
-const mockStore = configureStore(middleware);
-
 describe('Consents component', () => {
   test('should render GeneralErrorStyled when publisherId is not given (if loading = false)', async () => {
-    const { getByTestId } = render(
-      <Provider store={mockStore(store(false, 'noPublisherId'))}>
-        <Consent {...consentsProps} />
-      </Provider>
-    );
+    renderWithProviders(<Consent {...consentsProps} />, {
+      preloadedState: store(false, 'noPublisherId')
+    });
 
-    expect(getByTestId('consents__general-error')).toBeInTheDocument();
+    expect(screen.getByTestId('consents__general-error')).toBeInTheDocument();
   });
   test('should render GeneralErrorStyled when publisherId is not given (if loading = true)', async () => {
-    const { getByTestId } = render(
-      <Provider store={mockStore(store(true, 'noPublisherId'))}>
-        <Consent {...consentsProps} />
-      </Provider>
-    );
+    renderWithProviders(<Consent {...consentsProps} />, {
+      preloadedState: store(true, 'noPublisherId')
+    });
 
-    expect(getByTestId('consents__general-error')).toBeInTheDocument();
+    expect(screen.getByTestId('consents__general-error')).toBeInTheDocument();
   });
   test('should render Loader component', async () => {
-    const { getByTestId } = render(
-      <Provider store={mockStore(store(true))}>
-        <Consent {...consentsProps} />
-      </Provider>
-    );
+    renderWithProviders(<Consent {...consentsProps} />, {
+      preloadedState: store(true)
+    });
 
-    expect(getByTestId('consents__loader')).toBeInTheDocument();
+    expect(screen.getByTestId('consents__loader')).toBeInTheDocument();
   });
   test('should render consents', async () => {
     const publisherConsents: ConsentType[] = [
@@ -80,11 +71,9 @@ describe('Consents component', () => {
     ];
     const checked = [false, true];
 
-    render(
-      <Provider store={mockStore(store(false, '', publisherConsents, checked))}>
-        <Consent {...consentsProps} />
-      </Provider>
-    );
+    renderWithProviders(<Consent {...consentsProps} />, {
+      preloadedState: store(false, '', publisherConsents, checked)
+    });
 
     expect(
       screen.getByRole('checkbox', { checked: false }).parentElement

diff --git a/src/components/CouponInput/CouponInput.test.tsx b/src/components/CouponInput/CouponInput.test.tsx
@@ -41,8 +41,9 @@ const couponInputProps = (
   };
 };
 
-const middleware = [thunk];
-const mockStore = configureStore(middleware);
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const mockStore = configureStore([thunk]);
 
 describe('CouponInput component', () => {
   test('render input with correct value', async () => {

diff --git a/src/components/GracePeriodError/GracePeriodError.test.tsx b/src/components/GracePeriodError/GracePeriodError.test.tsx
@@ -21,8 +21,9 @@ const store = (currentPlan: CurrentPlan[], displayGracePeriodError = true) => ({
 const pastDate = 16762771;
 const futureDate = 99999999999999;
 
-const middleware = [thunk];
-const mockStore = configureStore(middleware);
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const mockStore = configureStore([thunk]);
 
 describe('GracePeriodError component', () => {
   test('renders warning with correct styles', async () => {

diff --git a/src/components/PasswordReset/PasswordReset.js b/src/components/PasswordReset/PasswordReset.js
@@ -18,7 +18,8 @@ import {
 } from './PasswordResetStyled';
 
 // eslint-disable-next-line no-useless-escape
-const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+const EMAIL_REGEX =
+  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 
 class PasswordReset extends Component {
   constructor(props) {
@@ -31,7 +32,7 @@ class PasswordReset extends Component {
     };
   }
 
-  onSubmit = async e => {
+  onSubmit = async (e) => {
     e.preventDefault();
     const publisherId = getData('CLEENG_PUBLISHER_ID');
 
@@ -92,7 +93,7 @@ class PasswordReset extends Component {
     this.setState({
       message: errorFields.email
     });
-    return !Object.keys(errorFields).find(key => errorFields[key] !== '');
+    return !Object.keys(errorFields).find((key) => errorFields[key] !== '');
   }
 
   render() {
@@ -117,16 +118,16 @@ class PasswordReset extends Component {
               label={t('password-reset.label.email', 'Email')}
               error={message}
               value={value}
-              onChange={v => this.setState({ value: v })}
+              onChange={(v) => this.setState({ value: v })}
             />
             <Button
-              type="submit"
-              theme="confirm"
-              size="big"
+              type='submit'
+              theme='confirm'
+              size='big'
               disabled={processing || overloaded}
             >
               {processing ? (
-                <Loader buttonLoader color="#ffffff" />
+                <Loader buttonLoader color='#ffffff' />
               ) : (
                 t('password-reset.button.reset-password', 'Reset Password')
               )}
@@ -153,7 +154,7 @@ PasswordReset.propTypes = {
 };
 PasswordReset.defaultProps = {
   urlProps: {},
-  t: k => k
+  t: (k) => k
 };
 
 export { PasswordReset as PurePasswordReset };