build(deps): bump actions/setup-node from 4 to 6

Bumps [actions/setup-node](https://github.com/actions/setup-node) from 4 to 6. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/v4...v6) --- updated-dependencies: - dependency-name: actions/setup-node dependency-version: '6' dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
chore(deps): update dependency @openedx/paragon to v23.14.9 (#1586 )
2025-10-20 03:19:23 +00:00 · 2025-10-15 18:41:27 +00:00 · 2025-10-15 01:51:39 +05:00 · 2025-10-10 21:11:29 +00:00 · 2025-10-10 18:04:03 +00:00 · 2025-10-10 13:10:59 +00:00
43 changed files with 10754 additions and 2748 deletions
--- a/.env
+++ b/.env
@@ -41,3 +41,5 @@ BANNER_IMAGE_EXTRA_SMALL=''
 # ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}
--- a/.env.development
+++ b/.env.development
@@ -41,3 +41,5 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}
--- a/.env.test
+++ b/.env.test
@@ -18,3 +18,4 @@ SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+PARAGON_THEME_URLS={}
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -16,7 +16,7 @@ jobs:
    - name: Checkout
      uses: actions/checkout@v4
    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v6
      with:
        node-version-file: '.nvmrc'

--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20
+24
--- a/2
+++ b/2
@@ -1,2 +0,0 @@
-# The following users are the owners of all frontend-app-authn files
-*       @openedx/2u-infinity
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -35,17 +35,17 @@
    "@fortawesome/fontawesome-svg-core": "6.7.2",
    "@fortawesome/free-brands-svg-icons": "6.7.2",
    "@fortawesome/free-solid-svg-icons": "6.7.2",
-    "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/paragon": "^22.16.0",
+    "@fortawesome/react-fontawesome": "0.2.6",
+    "@openedx/paragon": "^23.4.2",
    "@optimizely/react-sdk": "^2.9.1",
    "@redux-devtools/extension": "3.3.0",
    "@testing-library/react": "^16.2.0",
    "algoliasearch": "^4.14.3",
-    "algoliasearch-helper": "^3.14.0",
+    "algoliasearch-helper": "^3.26.0",
    "classnames": "2.5.1",
-    "core-js": "3.41.0",
+    "core-js": "3.43.0",
    "fastest-levenshtein": "1.0.16",
-    "form-urlencoded": "6.1.5",
+    "form-urlencoded": "6.1.6",
    "prop-types": "15.8.1",
    "query-string": "7.1.3",
    "react": "^18.3.1",
@@ -54,8 +54,8 @@
    "react-loading-skeleton": "3.5.0",
    "react-redux": "7.2.9",
    "react-responsive": "8.2.0",
-    "react-router": "6.30.0",
-    "react-router-dom": "6.30.0",
+    "react-router": "6.30.1",
+    "react-router-dom": "6.30.1",
    "react-zendesk": "^0.1.13",
    "redux": "4.2.1",
    "redux-logger": "3.0.6",
@@ -68,13 +68,13 @@
  },
  "devDependencies": {
    "@edx/browserslist-config": "^1.1.1",
-    "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "^14.4.2",
-    "babel-plugin-formatjs": "10.5.37",
-    "eslint-plugin-import": "2.31.0",
+    "@openedx/frontend-build": "^14.6.2",
+    "babel-plugin-formatjs": "10.5.41",
+    "eslint-plugin-import": "2.32.0",
    "glob": "7.2.3",
    "history": "5.3.0",
-    "jest": "29.7.0",
-    "react-test-renderer": "^18.3.1"
+    "jest": "30.2.0",
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.4.0"
  }
 }
--- a/src/common-components/tests/FormField.test.jsx
+++ b/src/common-components/tests/FormField.test.jsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import { Provider } from 'react-redux';

-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
@@ -37,7 +36,6 @@ describe('FormGroup', () => {

 describe('PasswordField', () => {
  const mockStore = configureStore();
-  const IntlPasswordField = injectIntl(PasswordField);
  let props = {};
  let store = {};

@@ -66,7 +64,7 @@ describe('PasswordField', () => {
  });

  it('should show/hide password on icon click', () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
    const passwordInput = getByLabelText('Password');

    const showPasswordButton = getByLabelText('Show password');
@@ -79,7 +77,7 @@ describe('PasswordField', () => {
  });

  it('should show password requirement tooltip on focus', async () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
    const passwordInput = getByLabelText('Password');
    jest.useFakeTimers();
    await act(async () => {
@@ -96,7 +94,7 @@ describe('PasswordField', () => {
      ...props,
      value: '',
    };
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
    const passwordInput = getByLabelText('Password');
    jest.useFakeTimers();
    await act(async () => {
@@ -119,7 +117,7 @@ describe('PasswordField', () => {
  });

  it('should update password requirement checks', async () => {
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
    const passwordInput = getByLabelText('Password');
    jest.useFakeTimers();
    await act(async () => {
@@ -142,7 +140,7 @@ describe('PasswordField', () => {
  });

  it('should not run validations when blur is fired on password icon click', () => {
-    const { container, getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { container, getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
    const passwordInput = container.querySelector('input[name="password"]');

    const passwordIcon = getByLabelText('Show password');
@@ -163,7 +161,7 @@ describe('PasswordField', () => {
      ...props,
      handleBlur: jest.fn(),
    };
-    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { container } = render(reduxWrapper(<PasswordField {...props} />));
    const passwordInput = container.querySelector('input[name="password"]');

    fireEvent.blur(passwordInput, {
@@ -181,7 +179,7 @@ describe('PasswordField', () => {
      ...props,
      handleErrorChange: jest.fn(),
    };
-    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { container } = render(reduxWrapper(<PasswordField {...props} />));
    const passwordInput = container.querySelector('input[name="password"]');

    fireEvent.blur(passwordInput, {
@@ -204,7 +202,7 @@ describe('PasswordField', () => {
      handleErrorChange: jest.fn(),
    };

-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));

    const passwordIcon = getByLabelText('Show password');

@@ -224,7 +222,7 @@ describe('PasswordField', () => {
      handleErrorChange: jest.fn(),
    };

-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));

    const passwordIcon = getByLabelText('Show password');

@@ -248,7 +246,7 @@ describe('PasswordField', () => {
      ...props,
      handleErrorChange: jest.fn(),
    };
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
    const passwordField = getByLabelText('Password');
    fireEvent.blur(passwordField, {
      target: {
@@ -268,7 +266,7 @@ describe('PasswordField', () => {
      handleErrorChange: jest.fn(),
      handleBlur: jest.fn(),
    };
-    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));

    const passwordIcon = getByLabelText('Show password');

--- a/src/forgot-password/tests/ForgotPasswordPage.test.jsx
+++ b/src/forgot-password/tests/ForgotPasswordPage.test.jsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { mergeConfig } from '@edx/frontend-platform';
-import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
  fireEvent, render, screen,
 } from '@testing-library/react';
@@ -26,7 +25,6 @@ jest.mock('react-router-dom', () => ({
  useNavigate: () => mockedNavigator,
 }));

-const IntlForgotPasswordPage = injectIntl(ForgotPasswordPage);
 const mockStore = configureStore();

 const initialState = {
@@ -78,7 +76,7 @@ describe('ForgotPasswordPage', () => {
  );

  it('not should display need other help signing in button', () => {
-    const { queryByTestId } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    const { queryByTestId } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
    const forgotPasswordButton = queryByTestId('forgot-password');
    expect(forgotPasswordButton).toBeNull();
  });
@@ -87,14 +85,14 @@ describe('ForgotPasswordPage', () => {
    mergeConfig({
      LOGIN_ISSUE_SUPPORT_LINK: '/support',
    });
-    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    render(reduxWrapper(<ForgotPasswordPage {...props} />));
    const forgotPasswordButton = screen.findByText('Need help signing in?');
    expect(forgotPasswordButton).toBeDefined();
  });

  it('should display email validation error message', async () => {
    const validationMessage = 'We were unable to contact you.Enter a valid email address below.';
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));

    const emailInput = screen.getByLabelText('Email');

@@ -115,7 +113,7 @@ describe('ForgotPasswordPage', () => {
    const expectedMessage = 'We were unable to contact you.'
                            + 'An error has occurred. Try refreshing the page, or check your internet connection.';

-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));

    const alertElements = container.querySelectorAll('.alert-danger');
    const validationErrors = alertElements[0].textContent;
@@ -124,7 +122,7 @@ describe('ForgotPasswordPage', () => {

  it('should display empty email validation message', async () => {
    const validationMessage = 'We were unable to contact you.Enter your email below.';
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));

    const submitButton = screen.getByText('Submit');
    fireEvent.click(submitButton);
@@ -141,7 +139,7 @@ describe('ForgotPasswordPage', () => {
      forgotPassword: { status: 'forbidden' },
    });

-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));

    const alertElements = container.querySelectorAll('.alert-danger');
    const validationErrors = alertElements[0].textContent;
@@ -149,7 +147,7 @@ describe('ForgotPasswordPage', () => {
  });

  it('should not display any error message on change event', () => {
-    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    render(reduxWrapper(<ForgotPasswordPage {...props} />));

    const emailInput = screen.getByLabelText('Email');

@@ -172,7 +170,7 @@ describe('ForgotPasswordPage', () => {
    };

    store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    render(reduxWrapper(<ForgotPasswordPage {...props} />));
    const emailInput = screen.getByLabelText('Email');

    fireEvent.blur(emailInput);
@@ -187,7 +185,7 @@ describe('ForgotPasswordPage', () => {
      emailValidationError: validationMessage,
      email: '',
    };
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
    const validationElement = container.querySelector('.pgn__form-text-invalid');
    expect(validationElement.textContent).toEqual(validationMessage);
  });
@@ -205,7 +203,7 @@ describe('ForgotPasswordPage', () => {

    store.dispatch = jest.fn(store.dispatch);

-    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    render(reduxWrapper(<ForgotPasswordPage {...props} />));
    const emailInput = screen.getByLabelText('Email');

    fireEvent.focus(emailInput);
@@ -219,7 +217,7 @@ describe('ForgotPasswordPage', () => {
      emailValidationError: '',
      email: '',
    };
-    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    render(reduxWrapper(<ForgotPasswordPage {...props} />));
    const errorElement = screen.queryByTestId('email-invalid-feedback');
    expect(errorElement).toBeNull();
  });
@@ -236,7 +234,7 @@ describe('ForgotPasswordPage', () => {
                           + 'receive a password reset message after 1 minute, verify that you entered the correct email address,'
                           + ' or check your spam folder. If you need further assistance, contact technical support.';

-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
    const successElement = findByTextContent(container, successMessage);

    expect(successElement).toBeDefined();
@@ -254,7 +252,7 @@ describe('ForgotPasswordPage', () => {
                            + 'This password reset link is invalid. It may have been used already. '
                            + 'Enter your email below to receive a new link.';

-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
    const successElement = findByTextContent(container, successMessage);

    expect(successElement).toBeDefined();
@@ -262,7 +260,7 @@ describe('ForgotPasswordPage', () => {
  });

  it('should redirect onto login page', async () => {
-    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));

    const navElement = container.querySelector('nav');
    const anchorElement = navElement.querySelector('a');
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,6 +1,2 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
@import "sass/style";
--- a/src/login/LoginPage.jsx
+++ b/src/login/LoginPage.jsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { connect } from 'react-redux';

 import { getConfig } from '@edx/frontend-platform';
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
  Form, StatefulButton,
 } from '@openedx/paragon';
@@ -365,4 +365,4 @@ export default connect(
    loginRequest,
    getTPADataFromBackend: getThirdPartyAuthContext,
  },
-)(injectIntl(LoginPage));
+)(LoginPage);
--- a/src/login/tests/AccountActivationMessage.test.jsx
+++ b/src/login/tests/AccountActivationMessage.test.jsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
 import { mergeConfig } from '@edx/frontend-platform';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
  render, screen,
 } from '@testing-library/react';
@@ -9,8 +7,6 @@ import {
 import AccountActivationMessage from '../AccountActivationMessage';
 import { ACCOUNT_ACTIVATION_MESSAGE } from '../data/constants';

-const IntlAccountActivationMessage = injectIntl(AccountActivationMessage);
-
 describe('AccountActivationMessage', () => {
  beforeEach(() => {
    mergeConfig({
@@ -21,7 +17,7 @@ describe('AccountActivationMessage', () => {
  it('should match account already activated message', () => {
    render(
      <IntlProvider locale="en">
-        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
+        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
      </IntlProvider>,
    );

@@ -36,7 +32,7 @@ describe('AccountActivationMessage', () => {
  it('should match account activated success message', () => {
    render(
      <IntlProvider locale="en">
-        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
+        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
      </IntlProvider>,
    );

@@ -53,7 +49,7 @@ describe('AccountActivationMessage', () => {
  it('should match account activation error message', () => {
    render(
      <IntlProvider locale="en">
-        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
+        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
      </IntlProvider>,
    );

@@ -69,7 +65,7 @@ describe('AccountActivationMessage', () => {
  it('should not display anything for invalid message type', () => {
    const { container } = render(
      <IntlProvider locale="en">
-        <IntlAccountActivationMessage messageType="invalid-message" />
+        <AccountActivationMessage messageType="invalid-message" />
      </IntlProvider>,
    );

@@ -88,7 +84,7 @@ describe('EmailConfirmationMessage', () => {
  it('should match email already confirmed message', () => {
    render(
      <IntlProvider locale="en">
-        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
+        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
      </IntlProvider>,
    );

@@ -103,7 +99,7 @@ describe('EmailConfirmationMessage', () => {
  it('should match email confirmation success message', () => {
    render(
      <IntlProvider locale="en">
-        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
+        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
      </IntlProvider>,
    );
    const expectedMessage = 'Success! You have confirmed your email.Sign in to continue.';
@@ -117,7 +113,7 @@ describe('EmailConfirmationMessage', () => {
  it('should match email confirmation error message', () => {
    render(
      <IntlProvider locale="en">
-        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
+        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
      </IntlProvider>,
    );
    const expectedMessage = 'Your email could not be confirmed'
--- a/src/login/tests/ChangePasswordPrompt.test.jsx
+++ b/src/login/tests/ChangePasswordPrompt.test.jsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
  fireEvent, render, screen,
 } from '@testing-library/react';
@@ -11,7 +9,6 @@ import { MemoryRouter } from 'react-router-dom';
 import { RESET_PAGE } from '../../data/constants';
 import ChangePasswordPrompt from '../ChangePasswordPrompt';

-const IntlChangePasswordPrompt = injectIntl(ChangePasswordPrompt);
 const mockedNavigator = jest.fn();

 jest.mock('react-router-dom', () => ({
@@ -44,7 +41,7 @@ describe('ChangePasswordPromptTests', () => {
    render(
      <IntlProvider locale="en">
        <MemoryRouter>
-          <IntlChangePasswordPrompt {...props} />
+          <ChangePasswordPrompt {...props} />
        </MemoryRouter>
      </IntlProvider>,
    );
@@ -61,7 +58,7 @@ describe('ChangePasswordPromptTests', () => {
    render(
      <IntlProvider locale="en">
        <MemoryRouter>
-          <IntlChangePasswordPrompt {...props} />
+          <ChangePasswordPrompt {...props} />
        </MemoryRouter>
      </IntlProvider>,
    );
--- a/src/login/tests/LoginFailure.test.jsx
+++ b/src/login/tests/LoginFailure.test.jsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
  render, screen,
 } from '@testing-library/react';
@@ -26,8 +24,6 @@ jest.mock('@edx/frontend-platform/auth', () => ({
  getAuthService: jest.fn(),
 }));

-const IntlLoginFailureMessage = injectIntl(LoginFailureMessage);
-
 describe('LoginFailureMessage', () => {
  let props = {};

@@ -48,7 +44,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -76,7 +72,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -106,7 +102,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -132,7 +128,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -152,7 +148,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -176,7 +172,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -196,7 +192,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -216,7 +212,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -236,7 +232,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -255,7 +251,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -275,7 +271,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

@@ -301,7 +297,7 @@ describe('LoginFailureMessage', () => {
    render(
      <IntlProvider locale="en">
        <MemoryRouter>
-          <IntlLoginFailureMessage {...props} />
+          <LoginFailureMessage {...props} />
        </MemoryRouter>
      </IntlProvider>,
    );
@@ -327,7 +323,7 @@ describe('LoginFailureMessage', () => {
    render(
      <IntlProvider locale="en">
        <MemoryRouter>
-          <IntlLoginFailureMessage {...props} />
+          <LoginFailureMessage {...props} />
        </MemoryRouter>
      </IntlProvider>,
    );
@@ -359,7 +355,7 @@ describe('LoginFailureMessage', () => {

    render(
      <IntlProvider locale="en">
-        <IntlLoginFailureMessage {...props} />
+        <LoginFailureMessage {...props} />
      </IntlProvider>,
    );

--- a/src/login/tests/LoginPage.test.jsx
+++ b/src/login/tests/LoginPage.test.jsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
  fireEvent, render, screen, waitFor,
 } from '@testing-library/react';
@@ -24,7 +23,6 @@ jest.mock('@edx/frontend-platform/auth', () => ({
  getAuthService: jest.fn(),
 }));

-const IntlLoginPage = injectIntl(LoginPage);
 const mockStore = configureStore();

 describe('LoginPage', () => {
@@ -88,7 +86,7 @@ describe('LoginPage', () => {
  it('should submit form for valid input', () => {
    store.dispatch = jest.fn(store.dispatch);

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));

    fireEvent.change(screen.getByText(
      '',
@@ -109,7 +107,7 @@ describe('LoginPage', () => {

  it('should not dispatch loginRequest on empty form submission', () => {
    store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));

    fireEvent.click(screen.getByText(
      '',
@@ -128,7 +126,7 @@ describe('LoginPage', () => {
    });

    store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    fireEvent.click(screen.getByText(
      '',
      { selector: '.btn-brand' },
@@ -142,7 +140,7 @@ describe('LoginPage', () => {
  it('should match state for invalid email (less than 2 characters), on form submission', () => {
    store.dispatch = jest.fn(store.dispatch);

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));

    fireEvent.change(screen.getByText(
      '',
@@ -162,7 +160,7 @@ describe('LoginPage', () => {
  });

  it('should show error messages for required fields on empty form submission', () => {
-    const { container } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { container } = render(reduxWrapper(<LoginPage {...props} />));
    fireEvent.click(screen.getByText(
      '',
      { selector: '.btn-brand' },
@@ -176,7 +174,7 @@ describe('LoginPage', () => {
  });

  it('should run frontend validations for emailOrUsername field on form submission', () => {
-    const { container } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { container } = render(reduxWrapper(<LoginPage {...props} />));

    fireEvent.change(screen.getByText(
      '',
@@ -195,7 +193,7 @@ describe('LoginPage', () => {
  it('should reset field related error messages on onFocus event', async () => {
    store.dispatch = jest.fn(store.dispatch);

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));

    await act(async () => {
      // clicking submit button with empty fields to make the errors appear
@@ -224,7 +222,7 @@ describe('LoginPage', () => {
  // ******** test form buttons and links ********

  it('should match default button state', () => {
-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(screen.getByText('Sign in')).toBeDefined();
  });

@@ -237,7 +235,7 @@ describe('LoginPage', () => {
      },
    });

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));

    expect(screen.getByText(
      'pending',
@@ -245,7 +243,7 @@ describe('LoginPage', () => {
  });

  it('should show forgot password link', () => {
-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));

    expect(screen.getByText(
      'Forgot password',
@@ -265,7 +263,7 @@ describe('LoginPage', () => {
      },
    });

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(screen.getByText(
      '',
      { selector: `#${ssoProvider.id}` },
@@ -287,7 +285,7 @@ describe('LoginPage', () => {
      },
    });

-    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
    expect(queryByText('Company or school credentials')).toBeNull();
    expect(queryByText('Or sign in with:')).toBeNull();
    expect(queryByText('Institution/campus credentials')).toBeNull();
@@ -307,7 +305,7 @@ describe('LoginPage', () => {
      },
    });

-    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
    expect(queryByText('Company or school credentials')).toBeNull();
    expect(queryByText('Or sign in with:')).toBeNull();
  });
@@ -327,7 +325,7 @@ describe('LoginPage', () => {
      },
    });

-    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
    expect(queryByText('Or sign in with:')).toBeDefined();
    expect(queryByText('Company or school credentials')).toBeDefined();
    expect(queryByText('Institution/campus credentials')).toBeDefined();
@@ -352,7 +350,7 @@ describe('LoginPage', () => {
      },
    });

-    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
    expect(queryByText('Or sign in with:')).toBeDefined();
    expect(queryByText('Company or school credentials')).toBeNull();
    expect(queryByText('Institution/campus credentials')).toBeDefined();
@@ -380,7 +378,7 @@ describe('LoginPage', () => {
      },
    });

-    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
    expect(queryByText('Or sign in with:')).toBeDefined();
    expect(queryByText('Institution/campus credentials')).toBeDefined();

@@ -400,7 +398,7 @@ describe('LoginPage', () => {
      },
    });

-    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
    expect(queryByText('Or sign in with:')).toBeNull();
    expect(queryByText('Institution/campus credentials')).toBeNull();
    expect(queryByText('Company or school credentials')).toBeNull();
@@ -418,7 +416,7 @@ describe('LoginPage', () => {
      },
    });

-    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
    expect(queryByText('Or sign in with:')).toBeDefined();
    expect(queryByText('Company or school credentials')).toBeNull();
    expect(queryByText('Institution/campus credentials')).toBeDefined();
@@ -441,7 +439,7 @@ describe('LoginPage', () => {
      },
    });

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(screen.getByText(
      '',
      { selector: '#login-failure-alert' },
@@ -465,7 +463,7 @@ describe('LoginPage', () => {
                            + 'linked '}${ getConfig().SITE_NAME } account. To link your accounts, sign in now using your ${
                             getConfig().SITE_NAME } password.`;

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(screen.getByText(
      '',
      { selector: '#tpa-alert' },
@@ -484,7 +482,7 @@ describe('LoginPage', () => {
        },
      },
    });
-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(screen.getByText(
      '',
      { selector: '#login-failure-alert' },
@@ -501,7 +499,7 @@ describe('LoginPage', () => {
      },
    });

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(screen.getByText(
      '',
      { selector: '#login-failure-alert' },
@@ -525,7 +523,7 @@ describe('LoginPage', () => {

    delete window.location;
    window.location = { href: getConfig().BASE_URL };
-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(window.location.href).toBe(dashboardURL);
  });

@@ -552,7 +550,7 @@ describe('LoginPage', () => {
    delete window.location;
    window.location = { href: getConfig().BASE_URL };

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl);
  });

@@ -571,7 +569,7 @@ describe('LoginPage', () => {
    delete window.location;
    window.location = { href: getConfig().BASE_URL };

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));

    fireEvent.click(screen.getByText(
      '',
@@ -600,7 +598,7 @@ describe('LoginPage', () => {
    delete window.location;
    window.location = { href: getConfig().BASE_URL };

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(window.location.href).toBe(getConfig().LMS_BASE_URL + finishAuthUrl);
  });

@@ -622,7 +620,7 @@ describe('LoginPage', () => {
    delete window.location;
    window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(screen.getByText(
      '',
      { selector: `#${ssoProvider.id}` },
@@ -649,7 +647,7 @@ describe('LoginPage', () => {
    delete window.location;
    window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };

-    const { container } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { container } = render(reduxWrapper(<LoginPage {...props} />));
    expect(container.querySelector('.react-loading-skeleton')).toBeTruthy();
  });

@@ -671,7 +669,7 @@ describe('LoginPage', () => {
    window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${secondaryProviders.id}` };
    secondaryProviders.iconImage = null;

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(window.location.href).toEqual(getConfig().LMS_BASE_URL + secondaryProviders.loginUrl);
  });

@@ -691,7 +689,7 @@ describe('LoginPage', () => {
    delete window.location;
    window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: '?next=/dashboard&tpa_hint=invalid' };

-    const { container } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { container } = render(reduxWrapper(<LoginPage {...props} />));
    expect(container.querySelector(`#${ssoProvider.id}`).querySelector('#provider-name').textContent).toEqual(`${ssoProvider.name}`);

    mergeConfig({
@@ -715,7 +713,7 @@ describe('LoginPage', () => {
    delete window.location;
    window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?tpa_hint=${ssoProvider.id}` };

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(screen.getByText(
      'Show me other ways to sign in or register',
    ).textContent).toBeDefined();
@@ -741,7 +739,7 @@ describe('LoginPage', () => {
    delete window.location;
    window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?tpa_hint=${ssoProvider.id}` };

-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(screen.getByText(
      'Show me other ways to sign in',
    ).textContent).toBeDefined();
@@ -750,7 +748,7 @@ describe('LoginPage', () => {
  // ******** miscellaneous tests ********

  it('should send page event when login page is rendered', () => {
-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login');
  });

@@ -764,7 +762,7 @@ describe('LoginPage', () => {
    });

    store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(store.dispatch).toHaveBeenCalledWith(backupLoginFormBegin(
      {
        formFields: {
@@ -778,7 +776,7 @@ describe('LoginPage', () => {
  });

  it('should send track event when forgot password link is clicked', () => {
-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    fireEvent.click(screen.getByText(
      'Forgot password',
      { selector: '#forgot-password' },
@@ -797,7 +795,7 @@ describe('LoginPage', () => {
    });

    store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<IntlLoginPage {...props} />));
+    render(reduxWrapper(<LoginPage {...props} />));
    expect(store.dispatch).toHaveBeenCalledWith(backupLoginFormBegin(
      {
        formFields: {
@@ -826,7 +824,7 @@ describe('LoginPage', () => {
      },
    });

-    const { container } = render(reduxWrapper(<IntlLoginPage {...props} />));
+    const { container } = render(reduxWrapper(<LoginPage {...props} />));
    expect(container.querySelector('input#emailOrUsername').value).toEqual('john_doe');
    expect(container.querySelector('input#password').value).toEqual('test-password');
  });
--- a/src/logistration/Logistration.test.jsx
+++ b/src/logistration/Logistration.test.jsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -23,7 +22,6 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
 jest.mock('@edx/frontend-platform/auth');

 const mockStore = configureStore();
-const IntlLogistration = injectIntl(Logistration);

 describe('Logistration', () => {
  let store = {};
@@ -95,7 +93,7 @@ describe('Logistration', () => {
  });

  it('should do nothing when user clicks on the same tab (login/register) again', () => {
-    const { container } = render(reduxWrapper(<IntlLogistration />));
+    const { container } = render(reduxWrapper(<Logistration />));
    // While staying on the registration form, clicking the register tab again
    fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));

@@ -107,14 +105,14 @@ describe('Logistration', () => {
      ALLOW_PUBLIC_ACCOUNT_CREATION: true,
    });

-    const { container } = render(reduxWrapper(<IntlLogistration />));
+    const { container } = render(reduxWrapper(<Logistration />));

    expect(container.querySelector('RegistrationPage')).toBeDefined();
  });

  it('should render login page', () => {
    const props = { selectedPage: LOGIN_PAGE };
-    const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
+    const { container } = render(reduxWrapper(<Logistration {...props} />));

    expect(container.querySelector('LoginPage')).toBeDefined();
  });
@@ -125,7 +123,7 @@ describe('Logistration', () => {
    });

    let props = { selectedPage: LOGIN_PAGE };
-    const { rerender } = render(reduxWrapper(<IntlLogistration {...props} />));
+    const { rerender } = render(reduxWrapper(<Logistration {...props} />));

    // verifying sign in heading
    expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
@@ -133,7 +131,7 @@ describe('Logistration', () => {
    // register page is still accessible when SHOW_REGISTRATION_LINKS is false
    // but it needs to be accessed directly
    props = { selectedPage: REGISTER_PAGE };
-    rerender(reduxWrapper(<IntlLogistration {...props} />));
+    rerender(reduxWrapper(<Logistration {...props} />));

    // verifying register heading
    expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Register');
@@ -160,7 +158,7 @@ describe('Logistration', () => {
    });

    const props = { selectedPage: LOGIN_PAGE };
-    const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
+    const { container } = render(reduxWrapper(<Logistration {...props} />));

    // verifying sign in heading for institution login false
    expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
@@ -190,7 +188,7 @@ describe('Logistration', () => {
    });

    const props = { selectedPage: LOGIN_PAGE };
-    render(reduxWrapper(<IntlLogistration {...props} />));
+    render(reduxWrapper(<Logistration {...props} />));
    expect(screen.getByText('Institution/campus credentials')).toBeDefined();

    // on clicking "Institution/campus credentials" button, it should display institution login page
@@ -221,7 +219,7 @@ describe('Logistration', () => {
    });

    const props = { selectedPage: LOGIN_PAGE };
-    render(reduxWrapper(<IntlLogistration {...props} />));
+    render(reduxWrapper(<Logistration {...props} />));
    fireEvent.click(screen.getByText('Institution/campus credentials'));

    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
@@ -253,7 +251,7 @@ describe('Logistration', () => {
    delete window.location;
    window.location = { hostname: getConfig().SITE_NAME, href: getConfig().BASE_URL };

-    render(reduxWrapper(<IntlLogistration />));
+    render(reduxWrapper(<Logistration />));
    fireEvent.click(screen.getByText('Institution/campus credentials'));
    expect(screen.getByText('Test University')).toBeDefined();

@@ -264,7 +262,7 @@ describe('Logistration', () => {

  it('should fire action to backup registration form on tab click', () => {
    store.dispatch = jest.fn(store.dispatch);
-    const { container } = render(reduxWrapper(<IntlLogistration />));
+    const { container } = render(reduxWrapper(<Logistration />));
    fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
    expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm());
  });
@@ -272,14 +270,14 @@ describe('Logistration', () => {
  it('should fire action to backup login form on tab click', () => {
    store.dispatch = jest.fn(store.dispatch);
    const props = { selectedPage: LOGIN_PAGE };
-    const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
+    const { container } = render(reduxWrapper(<Logistration {...props} />));
    fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
    expect(store.dispatch).toHaveBeenCalledWith(backupLoginForm());
  });

  it('should clear tpa context errorMessage tab click', () => {
    store.dispatch = jest.fn(store.dispatch);
-    const { container } = render(reduxWrapper(<IntlLogistration />));
+    const { container } = render(reduxWrapper(<Logistration />));
    fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
    expect(store.dispatch).toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage());
  });
--- a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
+++ b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { identifyAuthenticatedUser, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
  fireEvent, render, screen,
 } from '@testing-library/react';
@@ -22,7 +21,6 @@ import {
 import { saveUserProfile } from '../data/actions';
 import ProgressiveProfiling from '../ProgressiveProfiling';

-const IntlProgressiveProfilingPage = injectIntl(ProgressiveProfiling);
 const mockStore = configureStore();

 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -114,7 +112,7 @@ describe('ProgressiveProfilingTests', () => {
    mergeConfig({
      AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: '',
    });
-    const { queryByRole } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
+    const { queryByRole } = render(reduxWrapper(<ProgressiveProfiling />));
    const button = queryByRole('button', { name: /learn more about how we use this information/i });

    expect(button).toBeNull();
@@ -125,7 +123,7 @@ describe('ProgressiveProfilingTests', () => {
      AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
    });

-    const { getByText } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
+    const { getByText } = render(reduxWrapper(<ProgressiveProfiling />));

    const learnMoreButton = getByText('Learn more about how we use this information.');

@@ -135,7 +133,7 @@ describe('ProgressiveProfilingTests', () => {
  it('should open modal on pressing skip for now button', () => {
    delete window.location;
    window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
-    const { getByRole } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
+    const { getByRole } = render(reduxWrapper(<ProgressiveProfiling />));

    const skipButton = getByRole('button', { name: /skip for now/i });
    fireEvent.click(skipButton);
@@ -150,7 +148,7 @@ describe('ProgressiveProfilingTests', () => {
  // ******** test event functionality ********

  it('should make identify call to segment on progressive profiling page', () => {
-    render(reduxWrapper(<IntlProgressiveProfilingPage />));
+    render(reduxWrapper(<ProgressiveProfiling />));

    expect(identifyAuthenticatedUser).toHaveBeenCalledWith(3);
    expect(identifyAuthenticatedUser).toHaveBeenCalled();
@@ -160,7 +158,7 @@ describe('ProgressiveProfilingTests', () => {
    mergeConfig({
      AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
    });
-    render(reduxWrapper(<IntlProgressiveProfilingPage />));
+    render(reduxWrapper(<ProgressiveProfiling />));

    const supportLink = screen.getByRole('link', { name: /learn more about how we use this information/i });
    fireEvent.click(supportLink);
@@ -178,7 +176,7 @@ describe('ProgressiveProfilingTests', () => {
    };
    delete window.location;
    window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
-    render(reduxWrapper(<IntlProgressiveProfilingPage />));
+    render(reduxWrapper(<ProgressiveProfiling />));

    const nextButton = screen.getByText('Next');
    fireEvent.click(nextButton);
@@ -194,7 +192,7 @@ describe('ProgressiveProfilingTests', () => {
      extended_profile: [{ field_name: 'company', field_value: 'test company' }],
    };
    store.dispatch = jest.fn(store.dispatch);
-    const { getByLabelText, getByText } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
+    const { getByLabelText, getByText } = render(reduxWrapper(<ProgressiveProfiling />));

    const genderSelect = getByLabelText('Gender');
    const companyInput = getByLabelText('Company');
@@ -216,7 +214,7 @@ describe('ProgressiveProfilingTests', () => {
      },
    });

-    const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
+    const { container } = render(reduxWrapper(<ProgressiveProfiling />));
    const errorElement = container.querySelector('#pp-page-errors');

    expect(errorElement).toBeTruthy();
@@ -232,7 +230,7 @@ describe('ProgressiveProfilingTests', () => {
      href: getConfig().BASE_URL,
    };

-    render(reduxWrapper(<IntlProgressiveProfilingPage />));
+    render(reduxWrapper(<ProgressiveProfiling />));
    expect(window.location.href).toEqual(DASHBOARD_URL);
  });

@@ -250,7 +248,7 @@ describe('ProgressiveProfilingTests', () => {
          success: true,
        },
      });
-      const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
+      const { container } = render(reduxWrapper(<ProgressiveProfiling />));
      const nextButton = container.querySelector('button.btn-brand');
      expect(nextButton.textContent).toEqual('Next');

@@ -277,7 +275,7 @@ describe('ProgressiveProfilingTests', () => {
        },
      });

-      const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
+      const { container } = render(reduxWrapper(<ProgressiveProfiling />));
      const nextButton = container.querySelector('button.btn-brand');
      expect(nextButton.textContent).toEqual('Submit');

@@ -311,7 +309,7 @@ describe('ProgressiveProfilingTests', () => {
        href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
        search: `?host=${host}&variant=${EMBEDDED}`,
      };
-      render(reduxWrapper(<IntlProgressiveProfilingPage />));
+      render(reduxWrapper(<ProgressiveProfiling />));

      const skipLinkButton = screen.getByText('Skip for now');
      fireEvent.click(skipLinkButton);
@@ -336,7 +334,7 @@ describe('ProgressiveProfilingTests', () => {
        },
      });

-      const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
+      const { container } = render(reduxWrapper(<ProgressiveProfiling />));

      const tpaSpinnerElement = container.querySelector('#tpa-spinner');
      expect(tpaSpinnerElement).toBeTruthy();
@@ -355,7 +353,7 @@ describe('ProgressiveProfilingTests', () => {
        href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
        search: `?host=${host}`,
      };
-      render(reduxWrapper(<IntlProgressiveProfilingPage />));
+      render(reduxWrapper(<ProgressiveProfiling />));
      const submitButton = screen.getByText('Next');
      fireEvent.click(submitButton);

@@ -370,7 +368,7 @@ describe('ProgressiveProfilingTests', () => {
        search: `?variant=${EMBEDDED}&host=${host}`,
      };

-      const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
+      const { container } = render(reduxWrapper(<ProgressiveProfiling />));

      const genderField = container.querySelector('#gender');
      expect(genderField).toBeTruthy();
@@ -391,7 +389,7 @@ describe('ProgressiveProfilingTests', () => {
        },
      });

-      render(reduxWrapper(<IntlProgressiveProfilingPage />));
+      render(reduxWrapper(<ProgressiveProfiling />));
      expect(window.location.href).toBe(DASHBOARD_URL);
    });

@@ -419,7 +417,7 @@ describe('ProgressiveProfilingTests', () => {
        },
      });

-      render(reduxWrapper(<IntlProgressiveProfilingPage />));
+      render(reduxWrapper(<ProgressiveProfiling />));
      const submitButton = screen.getByText('Submit');
      fireEvent.click(submitButton);
      expect(window.location.href).toBe(redirectUrl);
--- a/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx
+++ b/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx
@@ -1,13 +1,9 @@
-import React from 'react';
-
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { render } from '@testing-library/react';

 import SmallLayout from './SmallLayout';
 import mockedRecommendedProducts from '../data/tests/mockedData';

-const IntlRecommendationsSmallLayoutPage = injectIntl(SmallLayout);
-
 jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useLocation: jest.fn(),
@@ -36,7 +32,7 @@ describe('RecommendationsPageTests', () => {
  });

  it('should render recommendations when recommendations are not loading', () => {
-    const { container } = render(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));
+    const { container } = render(reduxWrapper(<SmallLayout {...props} />));

    const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');

@@ -48,7 +44,7 @@ describe('RecommendationsPageTests', () => {
      ...props,
      isLoading: true,
    };
-    const { container } = render(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));
+    const { container } = render(reduxWrapper(<SmallLayout {...props} />));

    const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');

--- a/src/recommendations/tests/RecommendationsList.test.jsx
+++ b/src/recommendations/tests/RecommendationsList.test.jsx
@@ -1,14 +1,12 @@
-import React from 'react';
 import { Provider } from 'react-redux';

-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';

 import mockedProductData from './mockedData';
 import RecommendationList from '../RecommendationsList';

-const IntlRecommendationList = injectIntl(RecommendationList);
 const mockStore = configureStore();

 describe('RecommendationsListTests', () => {
@@ -25,7 +23,7 @@ describe('RecommendationsListTests', () => {
      userId: 1234567,
    };

-    const { container } = render(reduxWrapper(<IntlRecommendationList {...props} />));
+    const { container } = render(reduxWrapper(<RecommendationList {...props} />));

    const recommendationCards = container.querySelectorAll('.recommendation-card');
    expect(recommendationCards.length).toEqual(mockedProductData.length);
@@ -37,7 +35,7 @@ describe('RecommendationsListTests', () => {
      userId: 1234567,
    };

-    const { getByText } = render(reduxWrapper(<IntlRecommendationList {...props} />));
+    const { getByText } = render(reduxWrapper(<RecommendationList {...props} />));

    const firstFooterContent = getByText('1 Course');
    const secondFooterContent = getByText('2 Courses');
--- a/src/recommendations/tests/RecommendationsPage.test.jsx
+++ b/src/recommendations/tests/RecommendationsPage.test.jsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { useMediaQuery } from '@openedx/paragon';
 import { fireEvent, render } from '@testing-library/react';
 import { useLocation } from 'react-router-dom';
@@ -16,7 +15,6 @@ import mockedRecommendedProducts from '../data/tests/mockedData';
 import RecommendationsPage from '../RecommendationsPage';
 import { eventNames, getProductMapping } from '../track';

-const IntlRecommendationsPage = injectIntl(RecommendationsPage);
 const mockStore = configureStore();

 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -77,7 +75,7 @@ describe('RecommendationsPageTests', () => {
  });

  it('should redirect to dashboard if user is not coming from registration workflow', () => {
-    render(reduxWrapper(<IntlRecommendationsPage />));
+    render(reduxWrapper(<RecommendationsPage />));
    expect(window.location.href).toEqual(dashboardUrl);
  });

@@ -86,14 +84,14 @@ describe('RecommendationsPageTests', () => {
      recommendations: [],
      isLoading: false,
    });
-    render(reduxWrapper(<IntlRecommendationsPage />));
+    render(reduxWrapper(<RecommendationsPage />));
    expect(window.location.href).toEqual(dashboardUrl);
  });

  it('should redirect user if they click "Skip for now" button', () => {
    mockUseLocation();
    jest.useFakeTimers();
-    const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
+    const { container } = render(reduxWrapper(<RecommendationsPage />));
    const skipButton = container.querySelector('.pgn__stateful-btn-state-default');
    fireEvent.click(skipButton);
    jest.advanceTimersByTime(300);
@@ -103,7 +101,7 @@ describe('RecommendationsPageTests', () => {
  it('should display recommendations small layout for small screen', () => {
    mockUseLocation();
    useMediaQuery.mockReturnValue(true);
-    const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
+    const { container } = render(reduxWrapper(<RecommendationsPage />));

    const recommendationsSmallLayout = container.querySelector('#recommendations-small-layout');
    const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -115,7 +113,7 @@ describe('RecommendationsPageTests', () => {
  it('should display recommendations large layout for large screen', () => {
    mockUseLocation();
    useMediaQuery.mockReturnValue(false);
-    const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
+    const { container } = render(reduxWrapper(<RecommendationsPage />));

    const pgnCollapsible = container.querySelector('.pgn_collapsible');
    const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -131,7 +129,7 @@ describe('RecommendationsPageTests', () => {
      recommendations: [],
      isLoading: true,
    });
-    const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
+    const { container } = render(reduxWrapper(<RecommendationsPage />));

    const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');

@@ -145,7 +143,7 @@ describe('RecommendationsPageTests', () => {
      recommendations: [],
      isLoading: true,
    });
-    const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
+    const { container } = render(reduxWrapper(<RecommendationsPage />));

    const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');

@@ -160,7 +158,7 @@ describe('RecommendationsPageTests', () => {
    });

    useMediaQuery.mockReturnValue(false);
-    render(reduxWrapper(<IntlRecommendationsPage />));
+    render(reduxWrapper(<RecommendationsPage />));

    expect(sendTrackEvent).toBeCalled();
    expect(sendTrackEvent).toHaveBeenCalledWith(
--- a/src/register/RegistrationFields/CountryField/CountryField.test.jsx
+++ b/src/register/RegistrationFields/CountryField/CountryField.test.jsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { mergeConfig } from '@edx/frontend-platform';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -10,7 +9,6 @@ import configureStore from 'redux-mock-store';
 import { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator';
 import { CountryField } from '../index';

-const IntlCountryField = injectIntl(CountryField);
 const mockStore = configureStore();

 jest.mock('react-router-dom', () => {
@@ -82,7 +80,7 @@ describe('CountryField', () => {
    };

    it('should run country field validation when onBlur is fired', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
      const countryInput = container.querySelector('input[name="country"]');

      fireEvent.blur(countryInput, {
@@ -97,7 +95,7 @@ describe('CountryField', () => {
    });

    it('should run country field validation when country name is invalid', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
      const countryInput = container.querySelector('input[name="country"]');

      fireEvent.blur(countryInput, {
@@ -112,7 +110,7 @@ describe('CountryField', () => {
    });

    it('should not run country field validation when onBlur is fired by drop-down arrow icon click', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
      const countryInput = container.querySelector('input[name="country"]');
      const dropdownArrowIcon = container.querySelector('.btn-icon.pgn__form-autosuggest__icon-button');

@@ -125,7 +123,7 @@ describe('CountryField', () => {
    });

    it('should update errors for frontend validations', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
      const countryInput = container.querySelector('input[name="country"]');

      fireEvent.blur(countryInput, { target: { value: '', name: 'country' } });
@@ -135,7 +133,7 @@ describe('CountryField', () => {
    });

    it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
      const countryInput = container.querySelector('input[name="country"]');

      fireEvent.focus(countryInput);
@@ -153,7 +151,7 @@ describe('CountryField', () => {
        },
      });

-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));

      container.querySelector('input[name="country"]');
      expect(props.onChangeHandler).toHaveBeenCalledTimes(1);
@@ -164,7 +162,7 @@ describe('CountryField', () => {
    });

    it('should set option on dropdown menu item click', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));

      const dropdownButton = container.querySelector('.pgn__form-autosuggest__icon-button');
      fireEvent.click(dropdownButton);
@@ -181,7 +179,7 @@ describe('CountryField', () => {

    it('should set value on change', () => {
      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlCountryField {...props} />)),
+        routerWrapper(reduxWrapper(<CountryField {...props} />)),
      );

      const countryInput = container.querySelector('input[name="country"]');
@@ -200,7 +198,7 @@ describe('CountryField', () => {
        errorMessage: 'country error message',
      };

-      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));

      const feedbackElement = container.querySelector('div[feedback-for="country"]');
      expect(feedbackElement).toBeTruthy();
--- a/src/register/RegistrationFields/EmailField/EmailField.test.jsx
+++ b/src/register/RegistrationFields/EmailField/EmailField.test.jsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -10,7 +9,6 @@ import configureStore from 'redux-mock-store';
 import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
 import { EmailField } from '../index';

-const IntlEmailField = injectIntl(EmailField);
 const mockStore = configureStore();

 jest.mock('react-router-dom', () => {
@@ -80,7 +78,7 @@ describe('EmailField', () => {
    };

    it('should run email field validation when onBlur is fired', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));

      const emailInput = container.querySelector('input#email');
      fireEvent.blur(emailInput, { target: { value: '', name: 'email' } });
@@ -92,7 +90,7 @@ describe('EmailField', () => {
    });

    it('should update errors for frontend validations', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));

      const emailInput = container.querySelector('input#email');
      fireEvent.blur(emailInput, { target: { value: 'ab', name: 'email' } });
@@ -105,7 +103,7 @@ describe('EmailField', () => {
    });

    it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));

      const emailInput = container.querySelector('input#email');
      fireEvent.focus(emailInput, { target: { value: '', name: 'email' } });
@@ -119,7 +117,7 @@ describe('EmailField', () => {

    it('should call backend validation api on blur event, if frontend validations have passed', () => {
      store.dispatch = jest.fn(store.dispatch);
-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));

      // Enter a valid email so that frontend validations are passed
      const emailInput = container.querySelector('input#email');
@@ -129,7 +127,7 @@ describe('EmailField', () => {
    });

    it('should give email suggestions for common service provider domain typos', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));

      const emailInput = container.querySelector('input#email');
      fireEvent.blur(emailInput, { target: { value: 'john@yopmail.com', name: 'email' } });
@@ -139,7 +137,7 @@ describe('EmailField', () => {
    });

    it('should be able to click on email suggestions and set it as value', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));

      const emailInput = container.querySelector('input#email');
      fireEvent.blur(emailInput, { target: { value: 'john@yopmail.com', name: 'email' } });
@@ -154,7 +152,7 @@ describe('EmailField', () => {
    });

    it('should give error for common top level domain mistakes', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));

      const emailInput = container.querySelector('input#email');
      fireEvent.blur(emailInput, { target: { value: 'john@gmail.mistake', name: 'email' } });
@@ -164,7 +162,7 @@ describe('EmailField', () => {
    });

    it('should give error and suggestion for invalid email', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));

      const emailInput = container.querySelector('input#email');
      fireEvent.blur(emailInput, { target: { value: 'john@gmail', name: 'email' } });
@@ -194,7 +192,7 @@ describe('EmailField', () => {

      store.dispatch = jest.fn(store.dispatch);

-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));

      const emailInput = container.querySelector('input#email');
      fireEvent.focus(emailInput, { target: { value: 'a@gmail.com', name: 'email' } });
@@ -203,7 +201,7 @@ describe('EmailField', () => {
    });

    it('should clear email suggestions when close icon is clicked', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));

      const emailInput = container.querySelector('input#email');
      fireEvent.blur(emailInput, { target: { value: 'john@gmail.mistake', name: 'email' } });
@@ -224,7 +222,7 @@ describe('EmailField', () => {
        confirmEmailValue: 'confirmEmail@yopmail.com',
      };

-      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
      const emailInput = container.querySelector('input#email');
      fireEvent.blur(emailInput, { target: { value: 'differentEmail@yopmail.com', name: 'email' } });

--- a/src/register/RegistrationFields/HonorCodeField/HonorCode.test.jsx
+++ b/src/register/RegistrationFields/HonorCodeField/HonorCode.test.jsx
@@ -1,13 +1,9 @@
-import React from 'react';
-
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { render } from '@testing-library/react';

 import { HonorCode } from '../index';

-const IntlHonorCode = injectIntl(HonorCode);
-
 describe('HonorCodeTest', () => {
  mergeConfig({
    PRIVACY_POLICY: 'http://privacy-policy.com',
@@ -28,7 +24,7 @@ describe('HonorCodeTest', () => {
    const errorMessage = `You must agree to the ${getConfig().SITE_NAME} Honor Code`;
    const { container } = render(
      <IntlProvider locale="en">
-        <IntlHonorCode
+        <HonorCode
          errorMessage={errorMessage}
          onChangeHandler={changeHandler}
        />
@@ -43,7 +39,7 @@ describe('HonorCodeTest', () => {
    const expectedMsg = 'I agree to the Your Platform Name Here\u00a0Honor Codein a new tab';
    const { container } = render(
      <IntlProvider locale="en">
-        <IntlHonorCode onChangeHandler={changeHandler} />
+        <HonorCode onChangeHandler={changeHandler} />
      </IntlProvider>,
    );

@@ -56,7 +52,7 @@ describe('HonorCodeTest', () => {
  it('should render Terms of Service and Honor code field', () => {
    const { container } = render(
      <IntlProvider locale="en">
-        <IntlHonorCode fieldType="tos_and_honor_code" onChangeHandler={changeHandler} />
+        <HonorCode fieldType="tos_and_honor_code" onChangeHandler={changeHandler} />
      </IntlProvider>,
    );
    const expectedMsg = 'By creating an account, you agree to the Terms of Service and Honor Code and you '
--- a/src/register/RegistrationFields/NameField/NameField.test.jsx
+++ b/src/register/RegistrationFields/NameField/NameField.test.jsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import { Provider } from 'react-redux';

-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -9,7 +8,6 @@ import configureStore from 'redux-mock-store';
 import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
 import { NameField } from '../index';

-const IntlNameField = injectIntl(NameField);
 const mockStore = configureStore();

 jest.mock('react-router-dom', () => {
@@ -69,7 +67,7 @@ describe('NameField', () => {
    const fieldValidation = { name: 'Enter your full name' };

    it('should run name field validation when onBlur is fired', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));

      const nameInput = container.querySelector('input#name');
      fireEvent.blur(nameInput, { target: { value: '', name: 'name' } });
@@ -82,7 +80,7 @@ describe('NameField', () => {
    });

    it('should update errors for frontend validations', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));

      const nameInput = container.querySelector('input#name');
      fireEvent.blur(nameInput, { target: { value: 'https://invalid-name.com', name: 'name' } });
@@ -95,7 +93,7 @@ describe('NameField', () => {
    });

    it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));

      const nameInput = container.querySelector('input#name');
      fireEvent.focus(nameInput, { target: { value: '', name: 'name' } });
@@ -113,7 +111,7 @@ describe('NameField', () => {
        ...props,
        shouldFetchUsernameSuggestions: true,
      };
-      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));

      const nameInput = container.querySelector('input#name');
      // Enter a valid name so that frontend validations are passed
@@ -135,7 +133,7 @@ describe('NameField', () => {
      });

      store.dispatch = jest.fn(store.dispatch);
-      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));

      const nameInput = container.querySelector('input#name');

--- a/src/register/RegistrationFields/TermsOfServiceField/TermsOfService.test.jsx
+++ b/src/register/RegistrationFields/TermsOfServiceField/TermsOfService.test.jsx
@@ -1,13 +1,9 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';

 import { TermsOfService } from '../index';

-const IntlTermsOfService = injectIntl(TermsOfService);
-
 describe('TermsOfServiceTest', () => {
  let value = false;

@@ -23,7 +19,7 @@ describe('TermsOfServiceTest', () => {
    const errorMessage = `You must agree to the ${getConfig().SITE_NAME} Terms of Service`;
    const { container } = render(
      <IntlProvider locale="en">
-        <IntlTermsOfService errorMessage={errorMessage} onChangeHandler={changeHandler} />
+        <TermsOfService errorMessage={errorMessage} onChangeHandler={changeHandler} />
      </IntlProvider>,
    );
    const errorElement = container.querySelector('.form-text-size');
@@ -33,7 +29,7 @@ describe('TermsOfServiceTest', () => {
  it('should render Terms of Service field', () => {
    const { container } = render(
      <IntlProvider locale="en">
-        <IntlTermsOfService onChangeHandler={changeHandler} />
+        <TermsOfService onChangeHandler={changeHandler} />
      </IntlProvider>,
    );

@@ -48,7 +44,7 @@ describe('TermsOfServiceTest', () => {
  it('should change value when Terms of Service field is checked', () => {
    const { container } = render(
      <IntlProvider locale="en">
-        <IntlTermsOfService onChangeHandler={changeHandler} />
+        <TermsOfService onChangeHandler={changeHandler} />
      </IntlProvider>,
    );
    const field = container.querySelector('input#tos');
--- a/src/register/RegistrationFields/UsernameField/UsernameField.jsx
+++ b/src/register/RegistrationFields/UsernameField/UsernameField.jsx
@@ -101,7 +101,7 @@ const UsernameField = (props) => {
  };

  const suggestedUsernames = () => (
-    <div className={className}>
+    <div className={className} role="listbox">
      <span className="text-gray username-suggestion--label">{formatMessage(messages['registration.username.suggestion.label'])}</span>
      <div className="username-scroll-suggested--form-field">
        {usernameSuggestions.map((username, index) => (
@@ -112,7 +112,9 @@ const UsernameField = (props) => {
            className="username-suggestions--chip data-hj-suppress"
            autoComplete={props.autoComplete}
            key={`suggestion-${index.toString()}`}
+            tabIndex={0}
            onClick={(e) => handleSuggestionClick(e, username)}
+            role="option"
          >
            {username}
          </Button>
@@ -123,7 +125,7 @@ const UsernameField = (props) => {
  );

  if (usernameSuggestions.length > 0 && errorMessage && value === ' ') {
-    className = 'username-suggestions__error';
+    className = 'username-suggestions';
    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />;
    suggestedUsernameDiv = suggestedUsernames();
  } else if (usernameSuggestions.length > 0 && value === ' ') {
@@ -134,14 +136,15 @@ const UsernameField = (props) => {
    suggestedUsernameDiv = suggestedUsernames();
  }
  return (
-    <FormGroup
-      {...props}
-      handleChange={handleOnChange}
-      handleFocus={handleOnFocus}
-      handleBlur={handleOnBlur}
-    >
+    <div className="username__form-group-wrapper">
      {suggestedUsernameDiv}
-    </FormGroup>
+      <FormGroup
+        {...props}
+        handleChange={handleOnChange}
+        handleFocus={handleOnFocus}
+        handleBlur={handleOnBlur}
+      />
+    </div>
  );
 };

--- a/src/register/RegistrationFields/UsernameField/UsernameField.test.jsx
+++ b/src/register/RegistrationFields/UsernameField/UsernameField.test.jsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import { Provider } from 'react-redux';

-import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -9,7 +8,6 @@ import configureStore from 'redux-mock-store';
 import { clearRegistrationBackendError, clearUsernameSuggestions, fetchRealtimeValidations } from '../../data/actions';
 import { UsernameField } from '../index';

-const IntlUsernameField = injectIntl(UsernameField);
 const mockStore = configureStore();

 jest.mock('react-router-dom', () => {
@@ -73,7 +71,7 @@ describe('UsernameField', () => {
    };

    it('should run username field validation when onBlur is fired', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));

      const usernameField = container.querySelector('input#username');
      fireEvent.blur(usernameField, { target: { value: '', name: 'username' } });
@@ -86,7 +84,7 @@ describe('UsernameField', () => {
    });

    it('should update errors for frontend validations', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));

      const usernameField = container.querySelector('input#username');
      fireEvent.blur(usernameField, { target: { value: 'user#', name: 'username' } });
@@ -99,7 +97,7 @@ describe('UsernameField', () => {
    });

    it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));

      const usernameField = container.querySelector('input#username');
      fireEvent.focus(usernameField, { target: { value: '', name: 'username' } });
@@ -112,7 +110,7 @@ describe('UsernameField', () => {
    });

    it('should remove space from field on focus if space exists', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));

      const usernameField = container.querySelector('input#username');
      fireEvent.focus(usernameField, { target: { value: ' ', name: 'username' } });
@@ -125,7 +123,7 @@ describe('UsernameField', () => {

    it('should call backend validation api on blur event, if frontend validations have passed', () => {
      store.dispatch = jest.fn(store.dispatch);
-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));

      const usernameField = container.querySelector('input#username');
      // Enter a valid username so that frontend validations are passed
@@ -135,7 +133,7 @@ describe('UsernameField', () => {
    });

    it('should remove space from the start of username on change', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
      const usernameField = container.querySelector('input#username');
      fireEvent.change(usernameField, { target: { value: ' test-user', name: 'username' } });

@@ -146,7 +144,7 @@ describe('UsernameField', () => {
    });

    it('should not set username if it is more than 30 character long', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));

      const usernameField = container.querySelector('input#username');
      fireEvent.change(usernameField, { target: { value: 'why_this_is_not_valid_username_', name: 'username' } });
@@ -157,7 +155,7 @@ describe('UsernameField', () => {
    it('should clear username suggestions when username field is focused in', () => {
      store.dispatch = jest.fn(store.dispatch);

-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));

      const usernameField = container.querySelector('input#username');
      fireEvent.focus(usernameField);
@@ -179,7 +177,7 @@ describe('UsernameField', () => {
        errorMessage: 'It looks like this username is already taken',
      };

-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
      const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
      expect(usernameSuggestions.length).toEqual(3);
    });
@@ -198,7 +196,7 @@ describe('UsernameField', () => {
        value: ' ',
      };

-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
      const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
      expect(usernameSuggestions.length).toEqual(3);
    });
@@ -218,7 +216,7 @@ describe('UsernameField', () => {
        errorMessage: 'username error',
      };

-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
      const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
      expect(usernameSuggestions.length).toEqual(3);
    });
@@ -232,7 +230,7 @@ describe('UsernameField', () => {
        },
      });

-      render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
      expect(props.handleChange).toHaveBeenCalledTimes(1);
      expect(props.handleChange).toHaveBeenCalledWith(
        { target: { name: 'username', value: ' ' } },
@@ -253,7 +251,7 @@ describe('UsernameField', () => {
        value: ' ',
      };

-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
      const usernameSuggestion = container.querySelector('.username-suggestions--chip');
      fireEvent.click(usernameSuggestion);
      expect(props.handleChange).toHaveBeenCalledTimes(1);
@@ -277,7 +275,7 @@ describe('UsernameField', () => {
        value: ' ',
      };

-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
      let closeButton = container.querySelector('button.username-suggestions__close__button');
      fireEvent.click(closeButton);
      expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
@@ -287,7 +285,7 @@ describe('UsernameField', () => {
        errorMessage: 'username error',
      };

-      render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
      closeButton = container.querySelector('button.username-suggestions__close__button');
      fireEvent.click(closeButton);
      expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
@@ -309,7 +307,7 @@ describe('UsernameField', () => {

      store.dispatch = jest.fn(store.dispatch);

-      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));

      const usernameField = container.querySelector('input#username');
      fireEvent.focus(usernameField, { target: { value: 'test', name: 'username' } });
--- a/src/register/RegistrationPage.test.jsx
+++ b/src/register/RegistrationPage.test.jsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
-  configure, getLocale, injectIntl, IntlProvider,
+  configure, getLocale, IntlProvider,
 } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { mockNavigate, BrowserRouter as Router } from 'react-router-dom';
@@ -31,7 +30,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
  getLocale: jest.fn(),
 }));

-const IntlRegistrationPage = injectIntl(RegistrationPage);
 const mockStore = configureStore();

 jest.mock('react-router-dom', () => {
@@ -188,7 +186,7 @@ describe('RegistrationPage', () => {
      };

      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      populateRequiredFields(getByLabelText, payload);
      const button = container.querySelector('button.btn-brand');
      fireEvent.click(button);
@@ -220,7 +218,7 @@ describe('RegistrationPage', () => {
        },
      });
      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));

      populateRequiredFields(getByLabelText, formPayload, true);
      const button = container.querySelector('button.btn-brand');
@@ -243,7 +241,7 @@ describe('RegistrationPage', () => {
      };

      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      populateRequiredFields(getByLabelText, formPayload, true);

      const button = container.querySelector('button.btn-brand');
@@ -268,7 +266,7 @@ describe('RegistrationPage', () => {
      };

      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      populateRequiredFields(getByLabelText, formPayload, true);
      const button = container.querySelector('button.btn-brand');
      fireEvent.click(button);
@@ -295,7 +293,7 @@ describe('RegistrationPage', () => {
      };

      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      populateRequiredFields(getByLabelText, payload);
      const button = container.querySelector('button.btn-brand');
      fireEvent.click(button);
@@ -321,7 +319,7 @@ describe('RegistrationPage', () => {
      };

      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      populateRequiredFields(getByLabelText, payload, false, true);
      const button = container.querySelector('button.btn-brand');
      fireEvent.click(button);
@@ -336,7 +334,7 @@ describe('RegistrationPage', () => {
        ENABLE_AUTO_GENERATED_USERNAME: true,
      });

-      const { queryByLabelText } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { queryByLabelText } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(queryByLabelText('Username')).toBeNull();

      mergeConfig({
@@ -347,7 +345,7 @@ describe('RegistrationPage', () => {
    it('should not dispatch registerNewUser on empty form Submission', () => {
      store.dispatch = jest.fn(store.dispatch);

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));

      const button = container.querySelector('button.btn-brand');
      fireEvent.click(button);
@@ -358,7 +356,7 @@ describe('RegistrationPage', () => {
    // ******** test registration form validations ********

    it('should show error messages for required fields on empty form submission', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));

      const button = container.querySelector('button.btn-brand');
      fireEvent.click(button);
@@ -386,7 +384,7 @@ describe('RegistrationPage', () => {
          },
        },
      });
-      const { container } = render(routerWrapper(reduxWrapper(<IntlProvider locale="en"><IntlRegistrationPage {...props} /></IntlProvider>)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlProvider locale="en"><RegistrationPage {...props} /></IntlProvider>)));
      const usernameFeedback = container.querySelector('div[feedback-for="username"]');
      const emailFeedback = container.querySelector('div[feedback-for="email"]');

@@ -395,7 +393,7 @@ describe('RegistrationPage', () => {
    });

    it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));

      const submitButton = container.querySelector('button.btn-brand');
      fireEvent.click(submitButton);
@@ -424,7 +422,7 @@ describe('RegistrationPage', () => {
      store.dispatch = jest.fn(store.dispatch);

      const { container } = render(routerWrapper(reduxWrapper(
-        <IntlRegistrationPage {...props} />,
+        <RegistrationPage {...props} />,
      )));

      const emailInput = container.querySelector('input#email');
@@ -435,7 +433,7 @@ describe('RegistrationPage', () => {
    // ******** test form buttons and fields ********

    it('should match default button state', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const button = container.querySelector('button[type="submit"] span');
      expect(button.textContent).toEqual('Create an account for free');
    });
@@ -449,7 +447,7 @@ describe('RegistrationPage', () => {
        },
      });

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));

      const button = container.querySelector('button[type="submit"] span.sr-only');
      expect(button.textContent).toEqual('pending');
@@ -460,7 +458,7 @@ describe('RegistrationPage', () => {
        MARKETING_EMAILS_OPT_IN: 'true',
      });

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const checkboxDivs = container.querySelectorAll('div.form-field--checkbox');
      expect(checkboxDivs.length).toEqual(1);

@@ -473,7 +471,7 @@ describe('RegistrationPage', () => {
      const buttonLabel = 'Register';
      delete window.location;
      window.location = { href: getConfig().BASE_URL, search: `?cta=${buttonLabel}` };
-      const { container } = render(reduxWrapper(<IntlRegistrationPage {...props} />));
+      const { container } = render(reduxWrapper(<RegistrationPage {...props} />));
      const button = container.querySelector('button[type="submit"] span');

      const buttonText = button.textContent;
@@ -492,7 +490,7 @@ describe('RegistrationPage', () => {
        },
      });

-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(document.cookie).toMatch(`${getConfig().USER_RETENTION_COOKIE_NAME}=true`);
    });

@@ -510,7 +508,7 @@ describe('RegistrationPage', () => {
      });
      delete window.location;
      window.location = { href: getConfig().BASE_URL };
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(window.location.href).toBe(dashboardURL);
    });

@@ -537,7 +535,7 @@ describe('RegistrationPage', () => {
      });
      delete window.location;
      window.location = { href: getConfig().BASE_URL };
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(window.location.href).toBe(dashboardUrl);
    });

@@ -568,7 +566,7 @@ describe('RegistrationPage', () => {

      render(reduxWrapper(
        <Router>
-          <IntlRegistrationPage {...props} />
+          <RegistrationPage {...props} />
        </Router>,
      ));
      expect(mockNavigate).toHaveBeenCalledWith(AUTHN_PROGRESSIVE_PROFILING);
@@ -586,12 +584,12 @@ describe('RegistrationPage', () => {
      });

      store.dispatch = jest.fn(store.dispatch);
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationFormBegin({ ...registrationFormData }));
    });

    it('should send page event when register page is rendered', () => {
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register');
    });

@@ -609,7 +607,7 @@ describe('RegistrationPage', () => {

      delete window.location;
      window.location = { href: getConfig().BASE_URL };
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.user.account.registered.client', {});
    });

@@ -635,7 +633,7 @@ describe('RegistrationPage', () => {
      store.dispatch = jest.fn(store.dispatch);
      const { container } = render(reduxWrapper(
        <Router>
-          <IntlRegistrationPage {...props} />
+          <RegistrationPage {...props} />
        </Router>,
      ));

@@ -658,7 +656,7 @@ describe('RegistrationPage', () => {
        },
      });

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const validationErrors = container.querySelector('div#validation-errors');
      expect(validationErrors.textContent).toContain(
        'An error has occurred. Try refreshing the page, or check your internet connection.',
@@ -685,7 +683,7 @@ describe('RegistrationPage', () => {
        },
      });

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));

      const fullNameInput = container.querySelector('input#name');
      const usernameInput = container.querySelector('input#username');
@@ -731,14 +729,14 @@ describe('RegistrationPage', () => {
          },
        },
      });
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(window.parent.postMessage).toHaveBeenCalledTimes(2);
    });

    it('should not display validations error on blur event when embedded variant is rendered', () => {
      delete window.location;
      window.location = { href: getConfig().BASE_URL.concat(REGISTER_PAGE), search: '?host=http://localhost/host-website' };
-      const { container } = render(reduxWrapper(<IntlRegistrationPage {...props} />));
+      const { container } = render(reduxWrapper(<RegistrationPage {...props} />));

      const usernameInput = container.querySelector('input#username');
      fireEvent.blur(usernameInput, { target: { value: '', name: 'username' } });
@@ -766,7 +764,7 @@ describe('RegistrationPage', () => {
        },
      });
      const { container } = render(routerWrapper(reduxWrapper(
-        <IntlRegistrationPage {...props} />),
+        <RegistrationPage {...props} />),
      ));

      const usernameFeedback = container.querySelector('div[feedback-for="username"]');
@@ -783,7 +781,7 @@ describe('RegistrationPage', () => {
        search: '?host=http://localhost/host-website',
      };

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const submitButton = container.querySelector('button.btn-brand');
      fireEvent.click(submitButton);

@@ -824,7 +822,7 @@ describe('RegistrationPage', () => {
      });
      store.dispatch = jest.fn(store.dispatch);

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const spinnerElement = container.querySelector('#tpa-spinner');
      const registrationFormElement = container.querySelector('#registration-form');

@@ -875,7 +873,7 @@ describe('RegistrationPage', () => {
      });
      store.dispatch = jest.fn(store.dispatch);

-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({
        name: 'John Doe',
        username: 'john_doe',
--- a/src/register/components/RegistrationFailure.jsx
+++ b/src/register/components/RegistrationFailure.jsx
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { windowScrollTo } from '../../data/utils';
 import {
  FORBIDDEN_REQUEST,
+  FORBIDDEN_USERNAME,
  INTERNAL_SERVER_ERROR,
  TPA_AUTHENTICATION_FAILURE,
  TPA_SESSION_EXPIRED,
@@ -48,6 +49,9 @@ const RegistrationFailureMessage = (props) => {
    case TPA_SESSION_EXPIRED:
      errorMessage = formatMessage(messages['registration.tpa.session.expired'], { provider: context.provider });
      break;
+    case FORBIDDEN_USERNAME:
+      errorMessage = formatMessage(messages['registration.forbidden.username']);
+      break;
    default:
      errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
      break;
--- a/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
+++ b/src/register/components/tests/ConfigurableRegistrationForm.test.jsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { mergeConfig } from '@edx/frontend-platform';
 import {
-  getLocale, injectIntl, IntlProvider,
+  getLocale, IntlProvider,
 } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -23,8 +22,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
  getLocale: jest.fn(),
 }));

-const IntlConfigurableRegistrationForm = injectIntl(ConfigurableRegistrationForm);
-const IntlRegistrationPage = injectIntl(RegistrationPage);
 const mockStore = configureStore();

 jest.mock('react-router-dom', () => {
@@ -158,7 +155,7 @@ describe('ConfigurableRegistrationForm', () => {
      };

      render(routerWrapper(reduxWrapper(
-        <IntlConfigurableRegistrationForm {...props} />,
+        <ConfigurableRegistrationForm {...props} />,
      )));

      expect(document.querySelector('#profession')).toBeTruthy();
@@ -188,7 +185,7 @@ describe('ConfigurableRegistrationForm', () => {
      };

      render(routerWrapper(reduxWrapper(
-        <IntlConfigurableRegistrationForm {...props} />,
+        <ConfigurableRegistrationForm {...props} />,
      )));

      expect(props.setFormFields).toHaveBeenCalledTimes(2);
@@ -215,7 +212,7 @@ describe('ConfigurableRegistrationForm', () => {
          },
        },
      });
-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(document.querySelector('#profession')).toBeTruthy();
      expect(document.querySelector('#tos')).toBeTruthy();
    });
@@ -249,7 +246,7 @@ describe('ConfigurableRegistrationForm', () => {
      };

      store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));

      populateRequiredFields(getByLabelText, payload);

@@ -284,7 +281,7 @@ describe('ConfigurableRegistrationForm', () => {
        },
      });

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const submitButton = container.querySelector('button.btn-brand');

      fireEvent.click(submitButton);
@@ -310,7 +307,7 @@ describe('ConfigurableRegistrationForm', () => {
          },
        },
      });
-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const countryInput = container.querySelector('input[name="country"]');
      fireEvent.change(countryInput, { target: { value: 'Pak', name: 'country' } });
      fireEvent.blur(countryInput, { target: { value: 'Pak', name: 'country' } });
@@ -335,7 +332,7 @@ describe('ConfigurableRegistrationForm', () => {
          },
        },
      });
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));

      const emailInput = getByLabelText('Email');
      const confirmEmailInput = getByLabelText('Confirm Email');
@@ -371,7 +368,7 @@ describe('ConfigurableRegistrationForm', () => {
          },
        },
      });
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));

      populateRequiredFields(getByLabelText, formPayload, true);
      fireEvent.change(
@@ -406,7 +403,7 @@ describe('ConfigurableRegistrationForm', () => {
      });

      const { getByLabelText, container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
+        routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
      );

      const professionInput = getByLabelText('Profession');
--- a/src/register/components/tests/RegistrationFailure.test.jsx
+++ b/src/register/components/tests/RegistrationFailure.test.jsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { mergeConfig } from '@edx/frontend-platform';
 import {
-  configure, getLocale, injectIntl, IntlProvider,
+  configure, getLocale, IntlProvider,
 } from '@edx/frontend-platform/i18n';
 import { render, screen } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -24,8 +23,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
  getLocale: jest.fn(),
 }));

-const IntlRegistrationPage = injectIntl(RegistrationPage);
-const IntlRegistrationFailure = injectIntl(RegistrationFailureMessage);
 const mockStore = configureStore();

 jest.mock('react-router-dom', () => {
@@ -137,7 +134,7 @@ describe('RegistrationFailure', () => {
        failureCount: 0,
      };

-      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
+      const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));

      const alertHeading = container.querySelectorAll('div.alert-heading');
      expect(alertHeading.length).toEqual(1);
@@ -153,7 +150,7 @@ describe('RegistrationFailure', () => {
        failureCount: 0,
      };

-      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
+      const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));

      const alertHeading = container.querySelectorAll('div.alert-heading');
      expect(alertHeading.length).toEqual(1);
@@ -172,7 +169,7 @@ describe('RegistrationFailure', () => {
        failureCount: 0,
      };

-      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
+      const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));

      const alertHeading = container.querySelectorAll('div.alert-heading');
      expect(alertHeading.length).toEqual(1);
@@ -191,7 +188,7 @@ describe('RegistrationFailure', () => {
        failureCount: 0,
      };

-      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
+      const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));

      const alertHeading = container.querySelectorAll('div.alert-heading');
      expect(alertHeading.length).toEqual(1);
@@ -211,7 +208,7 @@ describe('RegistrationFailure', () => {
        },
      });

-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const validationError = screen.queryByText('An error has occurred. Try refreshing the page, or check your internet connection.');

      expect(validationError).not.toBeNull();
--- a/src/register/components/tests/ThirdPartyAuth.test.jsx
+++ b/src/register/components/tests/ThirdPartyAuth.test.jsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import { Provider } from 'react-redux';

 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import {
-  configure, getLocale, injectIntl, IntlProvider,
+  configure, getLocale, IntlProvider,
 } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -23,7 +22,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
  getLocale: jest.fn(),
 }));

-const IntlRegistrationPage = injectIntl(RegistrationPage);
 const mockStore = configureStore();

 jest.mock('react-router-dom', () => {
@@ -157,7 +155,7 @@ describe('ThirdPartyAuth', () => {
      });

      const { queryByLabelText } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />, { store })),
+        routerWrapper(reduxWrapper(<RegistrationPage {...props} />, { store })),
      );

      const passwordField = queryByLabelText('Password');
@@ -182,7 +180,7 @@ describe('ThirdPartyAuth', () => {
      window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };

      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
+        routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
      );
      const tpaButton = container.querySelector(`button#${ssoProvider.id}`);

@@ -207,7 +205,7 @@ describe('ThirdPartyAuth', () => {
        search: `?next=/dashboard&tpa_hint=${ssoProvider.id}`,
      };

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const skeletonElement = container.querySelector('.react-loading-skeleton');

      expect(skeletonElement).toBeTruthy();
@@ -231,7 +229,7 @@ describe('ThirdPartyAuth', () => {
      window.location = { href: getConfig().BASE_URL.concat(REGISTER_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };
      ssoProvider.iconImage = null;

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const iconElement = container.querySelector(`button#${ssoProvider.id} div span.pgn__icon`);

      expect(iconElement).toBeTruthy();
@@ -254,7 +252,7 @@ describe('ThirdPartyAuth', () => {
      delete window.location;
      window.location = { href: getConfig().BASE_URL.concat(REGISTER_PAGE), search: `?next=/dashboard&tpa_hint=${secondaryProviders.id}` };

-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(window.location.href).toEqual(getConfig().LMS_BASE_URL + secondaryProviders.registerUrl);
    });

@@ -275,7 +273,7 @@ describe('ThirdPartyAuth', () => {
      delete window.location;
      window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: '?next=/dashboard&tpa_hint=invalid' };

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const providerButton = container.querySelector(`button#${ssoProvider.id} span#provider-name`);

      expect(providerButton.textContent).toEqual(expectedMessage);
@@ -294,7 +292,7 @@ describe('ThirdPartyAuth', () => {
      });

      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />, { store })),
+        routerWrapper(reduxWrapper(<RegistrationPage {...props} />, { store })),
      );

      const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`);
@@ -315,7 +313,7 @@ describe('ThirdPartyAuth', () => {
      });

      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
+        routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
      );

      const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`);
@@ -329,7 +327,7 @@ describe('ThirdPartyAuth', () => {
        institutionLogin: true,
      };

-      const { getByText } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { getByText } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const headingElement = getByText('Register with institution/campus credentials');
      expect(headingElement).toBeTruthy();
    });
@@ -354,7 +352,7 @@ describe('ThirdPartyAuth', () => {
      window.location = { href: getConfig().BASE_URL };

      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
+        routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
      );

      const ssoButton = container.querySelector('button#oa2-apple-id');
@@ -385,7 +383,7 @@ describe('ThirdPartyAuth', () => {
      delete window.location;
      window.location = { href: getConfig().BASE_URL };

-      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl);
    });

@@ -406,7 +404,7 @@ describe('ThirdPartyAuth', () => {
      const expectedMessage = `${'You\'ve successfully signed into Apple! We just need a little more information before '
                              + 'you start learning with '}${ getConfig().SITE_NAME }.`;

-      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
      const tpaAlert = container.querySelector('#tpa-alert p');
      expect(tpaAlert.textContent).toEqual(expectedMessage);
    });
@@ -437,7 +435,7 @@ describe('ThirdPartyAuth', () => {
      store.dispatch = jest.fn(store.dispatch);

      const { container } = render(
-        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
+        routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
      );

      const alertHeading = container.querySelector('div.alert-heading');
--- a/src/register/data/constants.js
+++ b/src/register/data/constants.js
@@ -11,3 +11,4 @@ export const FORM_SUBMISSION_ERROR = 'form-submission-error';
 export const INTERNAL_SERVER_ERROR = 'internal-server-error';
 export const TPA_AUTHENTICATION_FAILURE = 'tpa-authentication-failure';
 export const TPA_SESSION_EXPIRED = 'tpa-session-expired';
+export const FORBIDDEN_USERNAME = 'forbidden-username';
--- a/src/register/data/sagas.js
+++ b/src/register/data/sagas.js
@@ -1,11 +1,14 @@
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError, logInfo } from '@edx/frontend-platform/logging';
-import { call, put, takeEvery } from 'redux-saga/effects';
+import {
+  call, put, race, take, takeEvery,
+} from 'redux-saga/effects';

 import {
  fetchRealtimeValidationsBegin,
  fetchRealtimeValidationsFailure,
  fetchRealtimeValidationsSuccess,
+  REGISTER_CLEAR_USERNAME_SUGGESTIONS,
  REGISTER_FORM_VALIDATIONS,
  REGISTER_NEW_USER,
  registerNewUserBegin,
@@ -41,9 +44,15 @@ export function* handleNewUserRegistration(action) {
 export function* fetchRealtimeValidations(action) {
  try {
    yield put(fetchRealtimeValidationsBegin());
-    const { fieldValidations } = yield call(getFieldsValidations, action.payload.formPayload);

-    yield put(fetchRealtimeValidationsSuccess(camelCaseObject(fieldValidations)));
+    const { response } = yield race({
+      response: call(getFieldsValidations, action.payload.formPayload),
+      cancel: take(REGISTER_CLEAR_USERNAME_SUGGESTIONS),
+    });
+
+    if (response) {
+      yield put(fetchRealtimeValidationsSuccess(camelCaseObject(response.fieldValidations)));
+    }
  } catch (e) {
    if (e.response && e.response.status === 403) {
      yield put(fetchRealtimeValidationsFailure());
--- a/src/register/messages.jsx
+++ b/src/register/messages.jsx
@@ -162,6 +162,11 @@ const messages = defineMessages({
    defaultMessage: 'Registration using {provider} has timed out.',
    description: '',
  },
+  'registration.forbidden.username': {
+    id: 'registration.forbidden.username',
+    defaultMessage: 'Usernames can\'t include words that could be mistaken for course roles. Please choose a different username.',
+    description: '',
+  },
  'registration.tpa.authentication.failure': {
    id: 'registration.tpa.authentication.failure',
    defaultMessage: 'We are sorry, you are not authorized to access {platform_name} via this channel. '
--- a/src/reset-password/tests/ResetPasswordPage.test.jsx
+++ b/src/reset-password/tests/ResetPasswordPage.test.jsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import { Provider } from 'react-redux';

-import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
  fireEvent, render, screen,
 } from '@testing-library/react';
@@ -26,7 +25,6 @@ jest.mock('react-router-dom', () => ({
  useParams: jest.fn().mockReturnValue({ token }),
 }));

-const IntlResetPasswordPage = injectIntl(ResetPasswordPage);
 const mockStore = configureStore();

 describe('ResetPasswordPage', () => {
@@ -95,7 +93,7 @@ describe('ResetPasswordPage', () => {
    }));

    store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    render(reduxWrapper(<ResetPasswordPage {...props} />));
    const newPasswordInput = screen.getByLabelText('New password');
    const confirmPasswordInput = screen.getByLabelText('Confirm password');

@@ -120,7 +118,7 @@ describe('ResetPasswordPage', () => {
        status: TOKEN_STATE.VALID,
      },
    });
-    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    render(reduxWrapper(<ResetPasswordPage {...props} />));
    const resetPasswordButton = screen.getByRole('button', { name: /Reset password/i, id: 'submit-new-password' });
    fireEvent.click(resetPasswordButton);

@@ -144,7 +142,7 @@ describe('ResetPasswordPage', () => {
        status: TOKEN_STATE.VALID,
      },
    });
-    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    render(reduxWrapper(<ResetPasswordPage {...props} />));
    const confirmPasswordInput = screen.getByLabelText('Confirm password');
    fireEvent.change(confirmPasswordInput, { target: { value: 'password-mismatch' } });

@@ -163,7 +161,7 @@ describe('ResetPasswordPage', () => {
      },
    });

-    const { container } = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<ResetPasswordPage {...props} />));

    const alertElements = container.querySelectorAll('.alert-danger');
    const rateLimitError = alertElements[0].textContent;
@@ -179,7 +177,7 @@ describe('ResetPasswordPage', () => {
      },
    });

-    const { container } = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<ResetPasswordPage {...props} />));
    const alertElements = container.querySelectorAll('.alert-danger');
    const internalServerError = alertElements[0].textContent;
    expect(internalServerError).toBe(validationMessage);
@@ -188,7 +186,7 @@ describe('ResetPasswordPage', () => {
  // ******** miscellaneous tests ********

  it('should call validation on password field when blur event fires', () => {
-    const resetPasswordPage = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    const resetPasswordPage = render(reduxWrapper(<ResetPasswordPage {...props} />));
    const expectedText = 'Password criteria has not been metPassword must contain at least 8 characters, at least one letter, and at least one number';
    const newPasswordInput = resetPasswordPage.container.querySelector('input#newPassword');
    newPasswordInput.value = 'test-password';
@@ -207,7 +205,7 @@ describe('ResetPasswordPage', () => {
      TOKEN_STATE.PENDING,
    };

-    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    render(reduxWrapper(<ResetPasswordPage {...props} />));

    expect(store.dispatch).toHaveBeenCalledWith(validateToken(token));
  });
@@ -216,19 +214,19 @@ describe('ResetPasswordPage', () => {
      status:
      PASSWORD_RESET_ERROR,
    };
-    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    render(reduxWrapper(<ResetPasswordPage {...props} />));
    expect(mockedNavigator).toHaveBeenCalledWith(RESET_PAGE);
  });
  it('should redirect the user to root url of the application ', async () => {
    props = {
      status: SUCCESS,
    };
-    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    render(reduxWrapper(<ResetPasswordPage {...props} />));
    expect(mockedNavigator).toHaveBeenCalledWith(LOGIN_PAGE);
  });

  it('shows spinner during token validation', () => {
-    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    render(reduxWrapper(<ResetPasswordPage {...props} />));
    const spinnerElement = document.getElementsByClassName('div.spinner-header');

    expect(spinnerElement).toBeTruthy();
@@ -237,7 +235,7 @@ describe('ResetPasswordPage', () => {
  // ******** redirection tests ********

  it('by clicking on sign in tab should redirect onto login page', async () => {
-    const { getByText } = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    const { getByText } = render(reduxWrapper(<ResetPasswordPage {...props} />));

    const signInTab = getByText('Sign in');

--- a/src/sass/_base_component.scss
+++ b/src/sass/_base_component.scss
@@ -2,19 +2,19 @@
 .layout {
  display: flex;

-  @include media-breakpoint-down('lg') {
+  @media (--pgn-size-breakpoint-max-width-lg) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

-  @include media-breakpoint-up('xl') {
+  @media (--pgn-size-breakpoint-min-width-xl) {
    justify-content: space-between;
  }
 }

 .content {
-  @include media-breakpoint-up('xl') {
+  @media (--pgn-size-breakpoint-min-width-xl) {
    display: flex;
    justify-content: center;
    width: 50vw;
@@ -47,7 +47,7 @@
  font-weight: 700;
  line-height: 1;

-  @include media-breakpoint-down('xl') {
+  @media (--pgn-size-breakpoint-max-width-xl) {
    font-size: 3.75rem;
  }

@@ -60,7 +60,7 @@
  margin-bottom: 0.5rem;
  font-weight: 700;

-  @include media-breakpoint-down('xl') {
+  @media (-pgn-size-breakpoint-max-width-xl) {
    font-size: 1.375rem;
    line-height: 1.75rem;
  }
@@ -72,7 +72,7 @@
 }

 .large-screen-left-container {
-  @include media-breakpoint-down('xl') {
+  @media (-pgn-size-breakpoint-max-width-xl) {
    flex: 0 0 25%;
    max-width: 25%;
  }
@@ -87,43 +87,43 @@
  height: 0.25rem;
  background-image: linear-gradient(
    102.02deg,
-    $brand-700,
-    $brand-700 20%,
-    $brand 20%,
+    var(--pgn-color-brand-700),
+    var(--pgn-color-brand-700) 20%,
+    var(--pgn-color-brand-base) 20%,
  );
  background-repeat: no-repeat;
 }

-@include media-breakpoint-only('md') {
+@media (--pgn-size-breakpoint-min-width-md) and (--pgn-size-breakpoint-max-width-md) {
  .medium-screen-top-stripe {
    display: flex;
    height: 0.5rem;
    background-image: linear-gradient(
      102.02deg,
-      $brand-700,
-      $brand-700 10%,
-      $brand 10%,
-      $brand 90%,
-      $primary-700 90%,
-      $primary-700 100%,
+      var(--pgn-color-brand-700),
+      var(--pgn-color-brand-700) 10%,
+      var(--pgn-color-brand-base) 10%,
+      var(--pgn-color-brand-base) 90%,
+      var(--pgn-color-primary-700) 90%,
+      var(--pgn-color-primary-700) 100%,
    );
    background-repeat: no-repeat;
  }
 }

-@include media-breakpoint-only('lg') {
+@media (--pgn-size-breakpoint-min-width-lg) and (--pgn-size-breakpoint-max-width-lg){
  .medium-screen-top-stripe {
    display: flex;
    height: 0.5rem;
    background-image: linear-gradient(
      102.02deg,
-      $brand-700 10%,
-      $brand 10%,
-      $brand 65%,
-      $primary-700 65%,
-      $primary-700 75%,
-      $accent-a 75%,
-      $accent-a 75%
+      var(--pgn-color-brand-700) 10%,
+      var(--pgn-color-brand-base) 10%,
+      var(--pgn-color-brand-base) 65%,
+      var(--pgn-color-primary-700) 65%,
+      var(--pgn-color-primary-700) 75%,
+      var(--pgn-color-accent-a) 75%,
+      var(--pgn-color-accent-a) 75%
    );
    background-repeat: no-repeat;
  }
@@ -131,20 +131,20 @@

 .extra-large-screen-top-stripe { display: none; }

-@include media-breakpoint-up('xl') {
+@media (--pgn-size-breakpoint-min-width-xl) {
 .extra-large-screen-top-stripe {
   display: flex;
   height: 0.5rem;
   background-image: linear-gradient(
     102.02deg,
-     $brand-700 10%,
-     $brand 10%,
-     $brand 45%,
-     $primary-700 45%,
-     $primary-700 55%,
-     $accent-a 55%,
-     $accent-a 75%,
-     $info-200 75%,
+     var(--pgn-color-brand-700) 10%,
+     var(--pgn-color-brand-base) 10%,
+     var(--pgn-color-brand-base) 45%,
+     var(--pgn-color-primary-700) 45%,
+     var(--pgn-color-primary-700) 55%,
+     var(--pgn-color-accent-a) 55%,
+     var(--pgn-color-accent-a) 75%,
+     var(--pgn-color-info-200) 75%,
  );
   background-repeat: no-repeat;
 }
@@ -152,24 +152,24 @@

 .large-screen-svg-light,
 .large-screen-svg-primary {
-  fill: $light-200;
+  fill: var(--pgn-color-light-200);
  overflow: hidden;
  position: absolute;
 }

 .large-screen-svg-primary {
-  fill: $primary-400;
+  fill: var(--pgn-color-primary-400);
 }

 .medium-screen-svg-light,
 .medium-screen-svg-primary {
-  fill: $light-200;
+  fill: var(--pgn-color-light-200);
  overflow: inherit;
  position: absolute;
 }

 .medium-screen-svg-primary {
-  fill: $primary-400;
+  fill: var(--pgn-color-primary-400);
 }

 [dir=rtl]{
@@ -184,20 +184,20 @@
 .small-yellow-line {
  width: 80px;
  height: 0;
-  border: 2px solid $accent-b;
+  border: 2px solid var(--pgn-color-accent-b);
  transform: rotate(102.02deg);
 }

 .medium-yellow-line {
  width: 120px;
  height: 0;
-  border: 3px solid $accent-b;
+  border: 3px solid var(--pgn-color-accent-b);
  transform: rotate(102.02deg);
 }

 .large-yellow-line {
  width: 240px;
  height: 0;
-  border: 3px solid $accent-b;
+  border: 3px solid var(--pgn-color-accent-b);
  transform: rotate(102.02deg);
 }
--- a/src/sass/_progressive_profiling_page.scss
+++ b/src/sass/_progressive_profiling_page.scss
@@ -11,7 +11,7 @@
    margin-bottom: 0.5rem;
    font-weight: 700;

-    @include media-breakpoint-down('md') {
+    @media (--pgn-size-breakpoint-max-width-md) {
      line-height: 1.5rem;
      font-size: 1.125rem;
    }
--- a/src/sass/_recommendations_card_base.scss
+++ b/src/sass/_recommendations_card_base.scss
@@ -64,52 +64,52 @@ $header-height: 104px;
  }

  &.light {
-    background-color: $white;
+    background-color: var(--pgn-color-white);

    .title {
-      color: $black;
+      color: var(--pgn-color-black);
    }

    .subtitle {
-      color: $gray-700;
+      color: var(--pgn-color-gray-700);
    }

    .badge {
-      background-color: $light-500;
-      color: $black;
+      background-color: var(--pgn-color-light-500);
+      color: var(--pgn-color-black);
    }

    .footer-content {
-      color: $gray-700;
+      color: var(--pgn-color-gray-700);
    }
  }

  &.dark {
-    background-color: $primary-500;
+    background-color: var(--pgn-color-primary-500);

    .pgn__card-header-title-md {
-      color: $white;
+      color: var(--pgn-color-white);
    }

    .pgn__card-header-subtitle-md {
-      color: $light-200;
+      color: var(--pgn-color-light-200);
    }

    .title {
-      color: $white;
+      color: var(--pgn-color-white);
    }

    .subtitle {
-      color: $light-200;
+      color: var(--pgn-color-light-200);
    }

    .badge {
-      background-color: $dark-200;
-      color: $white;
+      background-color: var(--pgn-color-dark-200);
+      color: var(--pgn-color-white);
    }

    .footer-content {
-      color: $light-200;
+      color: var(--pgn-color-light-200);
    }
  }
 }
--- a/src/sass/_recommendations_page.scss
+++ b/src/sass/_recommendations_page.scss
@@ -3,7 +3,7 @@ $card-gap: 24px;
 .recommendations-container__card-list {
  gap: $card-gap $card-gap;

-  @include media-breakpoint-down(sm) {
+  @media (-pgn-size-breakpoint-max-width-sm) {
    margin-bottom: 0 !important;
  }

@@ -11,15 +11,15 @@ $card-gap: 24px;
    flex: 0 1 100%;
    cursor: pointer;

-    @include media-breakpoint-up(sm) {
+    @media (--pgn-size-breakpoint-min-width-sm) {
      flex: 0 1 calc(50% - #{$card-gap - 12});
    }

-    @include media-breakpoint-up(md) {
+    @media (--pgn-size-breakpoint-min-width-md) {
      flex: 0 1 calc(33.333% - #{$card-gap - 8});
    }

-    @include media-breakpoint-up(lg) {
+    @media (--pgn-size-breakpoint-min-width-lg) {
      flex: 0 1 calc(25% - #{$card-gap - 6});
    }
  }
--- a/src/sass/_registration.scss
+++ b/src/sass/_registration.scss
@@ -23,21 +23,21 @@
  }

  .alert-link  {
-    color: $primary !important;
+    color: var(--pgn-color-primary-base) !important;

    &:hover {
      text-decoration: underline;
-      color: $info-700 !important;
+      color: var(--pgn-color-info-700) !important;
    }
  }
 }

 .email-suggestion-alert-warning {
-  color: $info-500 !important;
+  color: var(--pgn-color-info-500) !important;

  &:hover {
    text-decoration: underline;
-    color: $info-700 !important;
+    color: var(--pgn-color-info-700) !important;
  }
 }

@@ -56,7 +56,7 @@
  line-height: 24px;
  font-size: 12px;
  font-weight: normal;
-  color: $primary-700;
+  color: var(--pgn-color-primary-700);
 }

 .username-suggestion--label {
@@ -65,10 +65,15 @@
  margin-right: 0.25rem;
 }

-.username-suggestions {
+.username__form-group-wrapper {
  position: relative;
-  margin-top: -2.5rem;
-  margin-left: 15px;
+}
+
+.username-suggestions {
+  position: absolute;
+  inset: 0;
+  padding-left: 15px;
+  z-index: 100;
 }

 .username-suggestions__close__button {
@@ -76,13 +81,6 @@
  position: absolute;
 }

-.username-suggestions__error {
-  position: relative;
-  margin-top: -13.7%;
-  margin-bottom: 11%;
-  margin-left: 15px;
-}
-
 .username-scroll-suggested--form-field {
  width: 20rem;
  white-space: nowrap;
@@ -99,7 +97,7 @@
  }
 }

-@media (max-width: map-get($grid-breakpoints, "sm")) {
+@media (--pgn-size-breakpoint-max-width-sm) {
  .username-scroll-suggested--form-field {
    width: 15rem;
  }
--- a/src/sass/_style.scss
+++ b/src/sass/_style.scss
@@ -40,7 +40,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }

 .main-content {
-  @extend .pt-4;
+  padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
  min-width: 464px !important;
 }

@@ -80,15 +80,15 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 .alert-link {
  font-weight: normal;
  text-decoration: underline;
-  color: $info-300 !important;
+  color: var(--pgn-color-info-300) !important;

  &:hover {
-    color: $info-500 !important;
+    color: var(--pgn-color-info-500) !important;
  }
 }

 .form-control {
-  background-color: $white !important;
+  background-color: var(--pgn-color-white) !important;
  font-size: 0.875rem;
  line-height: 1.5;
  height: 2.75rem;
@@ -103,11 +103,11 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  margin-bottom: 1rem;
  font-size: 14px;

-  background-color: $white;
-  border: 1px solid $primary;
+  background-color: var(--pgn-color-white);
+  border: 1px solid var(--pgn-color-primary-base);
  width: 224px;
  height: 36px;
-  color: $primary;
+  color: var(--pgn-color-primary-base);

  .btn-tpa__image-icon{
    background-color: transparent;
@@ -132,8 +132,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }

 .btn-tpa__font-container {
-  background-color: $primary;
-  color: $white;
+  background-color: var(--pgn-color-primary-base);
+  color: var(--pgn-color-white);
  font-size: 11px;

  margin-left: -6px;
@@ -143,7 +143,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }

 .btn-oa2-facebook {
-  color: $white;
+  color: var(--pgn-color-white);
  border-color: $facebook-blue;
  background-color: $facebook-blue;

@@ -151,12 +151,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  &:focus {
    background-color: $facebook-focus-blue;
    border: 1px solid $facebook-focus-blue;
-    color: $white;
+    color: var(--pgn-color-white);
  }
 }

 .btn-oa2-google-oauth2 {
-  color: $white;
+  color: var(--pgn-color-white);
  border-color: $google-blue;
  background-color: $google-blue;

@@ -171,12 +171,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  &:focus {
    background-color: $google-focus-blue;
    border: 1px solid $google-focus-blue;
-    color: $white;
+    color: var(--pgn-color-white);
  }
 }

 .btn-oa2-apple-id {
-  color: $white;
+  color: var(--pgn-color-white);
  border-color: $apple-black;
  background-color: $apple-black;
  font-size: 16px;
@@ -190,12 +190,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  &:focus {
    background-color: $apple-focus-black;
    border: 1px solid $apple-focus-black;
-    color: $white;
+    color: var(--pgn-color-white);
  }
 }

 .btn-oa2-azuread-oauth2 {
-  color: $white;
+  color: var(--pgn-color-white);
  border-color: $microsoft-black;
  background-color: $microsoft-black;

@@ -203,7 +203,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  &:focus {
    background-color: $microsoft-focus-black;
    border: 1px solid $microsoft-focus-black;
-    color: $white;
+    color: var(--pgn-color-white);
  }
 }

@@ -214,9 +214,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }

 .institute-icon {
-  @extend .mr-1;
-  @extend .text-gray;
-
+  margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important;
+  color: var(--pgn-color-gray-base) !important;
  display: inline-block;
  margin-bottom: 0.25rem;
  height: 18px;
@@ -232,7 +231,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }

 .invalid-feedback {
-  color: $red;
+  color: var(--pgn-color-red);
 }

 .full-vertical-height {
@@ -290,22 +289,22 @@ select.form-control {

 #password-requirement-left {
  opacity: 1;
-  @extend .x-small;
+  font-size: var(--pgn-typography-font-size-xs) !important;
  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
  right: 0.2rem !important;
  .tooltip-inner {
-    background: $white;
+    background: var(--pgn-color-white);
    display: block;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
  }
  .arrow::before {
-    border-left-color: $white;
+    border-left-color: var(--pgn-color-white);
  }
 }

 #password-requirement-top {
-  @extend .x-small;
-  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
+  font-size: var(--pgn-typography-font-size-xs) !important;
+  filter: drop-shadow(var(--pgn-elevation-box-shadow-level-2)) drop-shadow(var(--pgn-elevation-box-shadow-level-2)) !important;
  opacity: 1;
  width: 90%;
  bottom: 10px !important;
@@ -314,30 +313,30 @@ select.form-control {

  .tooltip-inner {
    min-width: 464px !important;
-    background: $white;
+    background: var(--pgn-color-white);
    display: block;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
  }
  .arrow::before {
-    border-top-color: $white;
+    border-top-color: var(--pgn-color-white);
  }

 }

 .yellow-border {
-  border: 2px solid $accent-b;
+  border: 2px solid var(--pgn-color-accent-b);
 }

 .institutions__heading {
-  color: $primary-700;
+  color: var(--pgn-color-primary-700);
 }

 .logistration-button {
-  color: $gray-700;
+  color: var(--pgn-color-gray-700);
 }

 .logistration-button:hover{
-  color: $gray-700;
+  color: var(--pgn-color-gray-700);
  text-decoration: none;
 }

@@ -352,7 +351,7 @@ select.form-control {
  width: 2.3rem;
 }
 .has-floating-label {
-  color: $gray-500;
+  color: var(--pgn-color-gray-500);
 }

 .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
@@ -366,7 +365,7 @@ select.form-control {

 .form-group__form-field .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
    font-size: 16px;
-    color: $primary-700;
+    color: var(--pgn-color-primary-700);
 }

 .form-group__form-field .form-control:not([value='']):not(:focus) ~
@@ -444,14 +443,14 @@ select.form-control {
 }

 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: $light-200;
+  background-color: var(--pgn-color-light-200);
 }

 .institutions--provider-link {
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 1.5rem;
-  color: $primary-700
+  color: var(--pgn-color-primary-700)
 }

 .pgn__form-control-decorator-trailing {
Author	SHA1	Message	Date
dependabot[bot]	a8f90cfc1b	build(deps): bump actions/setup-node from 4 to 6 Bumps [actions/setup-node](https://github.com/actions/setup-node) from 4 to 6. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/v4...v6) --- updated-dependencies: - dependency-name: actions/setup-node dependency-version: '6' dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>	2025-10-20 03:19:23 +00:00
renovate[bot]	f8868b1e36	chore(deps): update dependency @openedx/paragon to v23.14.9 (#1586 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-15 18:41:27 +00:00
Ihor Romaniuk	ffb8a2d434	fix: username suggestions alignment (#1584 ) Co-authored-by: Kyrylo Hudym-Levkovych <kyr.hudym@kyrs-MacBook-Pro.local>	2025-10-15 01:51:39 +05:00
renovate[bot]	a615cba2fa	chore(deps): update dependency @openedx/paragon to v23.14.8 (#1583 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-10 21:11:29 +00:00
renovate[bot]	c09d7f4eec	chore(deps): update dependency ts-jest to v29.4.5 (#1582 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-10 18:04:03 +00:00
renovate[bot]	a67a08a5fb	chore(deps): update dependency @openedx/paragon to v23.14.6 (#1581 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-10 13:10:59 +00:00
renovate[bot]	43ef53b703	chore(deps): update dependency babel-plugin-formatjs to v10.5.41 (#1580 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-09 18:05:55 +00:00
renovate[bot]	1dc39fcce1	chore(deps): update dependency @openedx/paragon to v23.14.5 (#1579 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-08 20:51:02 +00:00
renovate[bot]	0a28ef2fb4	chore(deps): update dependency babel-plugin-formatjs to v10.5.40 (#1578 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-06 01:36:40 +00:00
renovate[bot]	c2fa1fa2df	chore(deps): update dependency @openedx/paragon to v23.14.4 (#1577 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-01 21:33:53 +00:00
renovate[bot]	44cf541b06	chore(deps): update dependency jest to v30.2.0 (#1576 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-29 01:01:52 +00:00
Feanil Patel	b5b12d0e87	Merge pull request #1574 from openedx/feanil/remove-reactifex-packages build: remove unused @edx/reactifex package	2025-09-26 16:14:56 -04:00
Feanil Patel	b2862eeb42	build: remove unused @edx/reactifex package Remove @edx/reactifex package from devDependencies as it is no longer needed. Translation extraction functionality has been verified to work correctly without this dependency. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-09-26 16:11:41 -04:00
renovate[bot]	92a333cc66	chore(deps): update dependency @openedx/paragon to v23.14.3 (#1575 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-26 16:10:20 -04:00
oleksandr.buhaienko	7a9d9bb300	test: Remove support for Node 20	2025-09-26 10:50:26 -03:00
oleksandr.buhaienko	fc4eb61ec9	build: Upgrade to Node 24	2025-09-26 09:17:49 -03:00
renovate[bot]	b2972929c9	chore(deps): update dependency ts-jest to v29.4.4 (#1573 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-19 18:00:14 +00:00
bydawen	bc251a61b2	test: Add Node 24 to CI matrix (#1564 )	2025-09-19 13:56:48 -04:00
renovate[bot]	632e962161	chore(deps): update dependency ts-jest to v29.4.3 (#1572 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-18 10:35:42 +00:00
renovate[bot]	5d913b720e	chore(deps): update dependency ts-jest to v29.4.2 (#1570 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-16 10:17:33 +00:00
renovate[bot]	f8a5cb50ed	fix(deps): update dependency @edx/frontend-platform to v8.5.1 (#1568 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-15 02:15:50 +00:00
Samuel Allan	b97f777b6f	fix: update frontend-build to fix install issues (#1553 ) Earlier versions of @openedx/frontend-build used on older version of 'sharp', which caused intermittent installation issues. The version of 'sharp' was updated in @openedx/frontend-build to fix these issues, so the frontend-build version can be updated here, to fix the issues in this project too. See https://github.com/openedx/frontend-build/issues/664 and https://github.com/openedx/frontend-build/pull/665 for more information. The frontend-build dependency was updated by: ``` npm install --package-lock-only @openedx/frontend-build ``` Private-ref: https://tasks.opencraft.com/browse/BB-9953	2025-09-08 13:39:50 -06:00
renovate[bot]	b2f7579054	fix(deps): update dependency form-urlencoded to v6.1.6 (#1560 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-04 08:36:57 +00:00
renovate[bot]	24742c1cf5	chore(deps): update dependency jest to v30.1.3 (#1557 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-02 16:30:15 +00:00
renovate[bot]	051383e68a	chore(deps): update dependency jest to v30.1.2 (#1555 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-01 08:23:58 +00:00
renovate[bot]	5443ebd01b	chore(deps): update dependency @openedx/frontend-build to v14.6.2 (#1554 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-01 07:55:50 +00:00
renovate[bot]	3aa2422735	chore(deps): update dependency jest to v30.1.1 (#1552 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-27 20:30:04 +00:00
renovate[bot]	90a7dfeb15	chore(deps): update dependency jest to v30.1.0 (#1551 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-27 05:27:12 +00:00
renovate[bot]	97c7bd744f	fix(deps): update dependency @fortawesome/react-fontawesome to v0.2.6 (#1549 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-22 02:27:19 +00:00
renovate[bot]	55c5f705fb	fix(deps): update dependency @fortawesome/react-fontawesome to v0.2.5 (#1548 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-20 03:30:08 +00:00
renovate[bot]	f4e2adc261	fix(deps): update dependency @openedx/paragon to v23.14.2 (#1546 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-13 16:49:41 +00:00
Hassan Raza	58ec90aca6	chore: Handle forbidden username exceptions on registration (#1545 )	2025-08-13 07:35:30 +00:00
Diana Villalvazo	76e400f0ad	refactor: Replace of injectIntl with useIntl (#1540 )	2025-08-12 11:00:33 -04:00
Diana Villalvazo	5bd6926f2f	refactor: Replace of injectIntl with useIntl (#1539 )	2025-08-12 10:46:01 -04:00
Diana Villalvazo	43a584ebd1	refactor: Replace of injectIntl with useIntl (#1538 )	2025-08-12 09:42:57 -04:00
sundasnoreen12	4cf0a64d81	Merge pull request #1541 from WGU-Open-edX/1526/injectIntl-4of4 Replace of injectIntl with useIntl() 4/4	2025-08-11 12:31:50 +05:00
diana-villalvazo-wgu	db3d007c51	refactor: Replace of injectIntl with useIntl	2025-08-07 10:50:11 -05:00
renovate[bot]	55a930840f	fix(deps): update dependency @edx/frontend-platform to v8.5.0 (#1543 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-06 21:25:05 +00:00
renovate[bot]	fad82b52ad	fix(deps): update dependency @openedx/paragon to v23.14.1 (#1537 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-04 14:50:25 +00:00
renovate[bot]	41450686aa	chore(deps): update dependency ts-jest to v29.4.1 (#1536 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-04 02:11:37 +00:00
Kyle McCormick	2fcda640f5	chore: Delete CODEOWNERS (#1535 ) See: https://github.com/openedx/axim-engineering/issues/1511	2025-07-31 16:18:27 -04:00
renovate[bot]	82252f9a7c	fix(deps): update dependency @fortawesome/react-fontawesome to v0.2.3 (#1531 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-24 15:03:04 +00:00
renovate[bot]	818d0278a5	chore(deps): update dependency jest to v30.0.5 (#1527 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-22 08:44:21 +00:00
renovate[bot]	ff3fce99db	fix(deps): update dependency @openedx/paragon to v23.14.0 (#1517 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-03 19:01:47 +00:00
renovate[bot]	157c302384	chore(deps): update dependency jest to v30.0.4 (#1516 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-03 00:16:29 +00:00
renovate[bot]	f2a905d373	fix(deps): update dependency @openedx/paragon to v23.13.0 (#1514 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-26 23:59:51 +00:00
renovate[bot]	e984a0b07b	chore(deps): update dependency jest to v30.0.3 (#1513 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-25 03:34:38 +00:00
renovate[bot]	7150d4562a	fix(deps): update dependency algoliasearch to v4.25.2 (#1510 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-23 17:06:34 +00:00
renovate[bot]	451056866f	chore(deps): update dependency eslint-plugin-import to v2.32.0 (#1509 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-20 23:30:16 +00:00
renovate[bot]	76f0cc54d9	fix(deps): update dependency algoliasearch to v4.25.0 (#1508 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-19 19:51:42 +00:00
renovate[bot]	fb70f7a1c2	chore(deps): update dependency jest to v30.0.2 (#1507 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-19 15:46:32 +00:00
renovate[bot]	b664150b4d	chore(deps): update dependency jest to v30.0.1 (#1506 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-18 22:50:33 +00:00
Brian Smith	da5a2e31b6	feat!: add design tokens support (#1504 ) BREAKING CHANGE: Pre-design-tokens theming is no longer supported. Co-authored-by: Diana Olarte <diana.olarte@edunext.co>	2025-06-18 14:29:11 -04:00
renovate[bot]	486d0bfd37	chore(deps): update dependency @openedx/frontend-build to v14.6.1 (#1503 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-18 03:45:28 +00:00
renovate[bot]	9332fc113a	fix(deps): update dependency algoliasearch-helper to v3.26.0 (#1501 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-16 17:05:31 +00:00
renovate[bot]	181e837ca4	fix(deps): update dependency @openedx/paragon to v22.20.2 (#1500 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-16 06:13:56 +00:00
renovate[bot]	735a9afc3c	chore(deps): update dependency babel-plugin-formatjs to v10.5.39 (#1499 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-16 00:51:57 +00:00
renovate[bot]	319c48f1c8	fix(deps): update dependency @openedx/paragon to v22.20.1 (#1496 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-12 17:38:03 +00:00
renovate[bot]	fbd73bfbfe	chore(deps): update dependency jest to v30 (#1495 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-10 05:28:53 +00:00
renovate[bot]	27a63cf406	fix(deps): update dependency @edx/frontend-platform to v8.4.0 (#1494 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-09 16:33:27 +00:00
renovate[bot]	7ea351f6a0	fix(deps): update dependency core-js to v3.43.0 (#1493 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-09 07:34:11 +00:00
renovate[bot]	61e8c254d7	fix(deps): update dependency @edx/frontend-platform to v8.3.9 (#1492 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-06 19:27:33 +00:00
renovate[bot]	3a08e790c3	fix(deps): update dependency @openedx/paragon to v22.20.0 (#1491 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-04 18:02:08 +00:00
renovate[bot]	b4c5171886	fix(deps): update dependency @openedx/paragon to v22.18.2 (#1490 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-03 20:32:20 +00:00
renovate[bot]	7b83c416f8	fix(deps): update dependency @edx/frontend-platform to v8.3.8 (#1489 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-30 21:59:07 +00:00
renovate[bot]	a3c261bb13	fix(deps): update dependency @openedx/paragon to v22.18.1 (#1488 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-22 18:12:22 +00:00
renovate[bot]	98d03aa29f	fix(deps): update dependency @openedx/paragon to v22.18.0 (#1487 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-21 22:11:58 +00:00
renovate[bot]	f5d5e2fd02	fix(deps): update react-router monorepo to v6.30.1 (#1486 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-20 20:32:18 +00:00
renovate[bot]	490bf27ed1	fix(deps): update dependency @edx/frontend-platform to v8.3.7 (#1484 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-19 13:30:11 +00:00
renovate[bot]	780acac2fd	fix(deps): update dependency @edx/frontend-platform to v8.3.6 (#1482 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-12 11:17:03 +00:00
renovate[bot]	2ea763701d	fix(deps): update dependency @edx/frontend-platform to v8.3.5 (#1481 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-05 11:51:58 +00:00
renovate[bot]	e2d9ba5857	chore(deps): update dependency babel-plugin-formatjs to v10.5.38 (#1480 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-05 07:15:18 +00:00
renovate[bot]	747d656f0a	fix(deps): update dependency core-js to v3.42.0 (#1479 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-29 19:33:32 +00:00
renovate[bot]	8638ed5cf4	fix(deps): update dependency algoliasearch-helper to v3.25.0 (#1478 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-29 15:06:11 +00:00
renovate[bot]	ca2e7f554a	chore(deps): update dependency @openedx/frontend-build to v14.6.0 (#1477 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-28 23:54:00 +00:00