Merge pull request #1319 from openedx/abdullahwaheed/update-2u-main-temp

[test] Abdullahwaheed/update 2u main temp

.env

@@ -41,5 +41,3 @@ BANNER_IMAGE_EXTRA_SMALL=''
 # ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}

.env.development

@@ -41,5 +41,3 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}

.env.test

@@ -18,4 +18,3 @@ SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 APP_ID=''
 MFE_CONFIG_API_URL=''
-PARAGON_THEME_URLS={}

.github/dependabot.yml

@@ -1,7 +0,0 @@
-version: 2
-updates:
-    # Adding new check for github-actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-        interval: "weekly"

.github/workflows/autoupdate-pull-request.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   autoupdate:
     name: autoupdate
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - uses: docker://chinthakagodawita/autoupdate-action:v1
         env:

.github/workflows/ci.yml

@@ -10,15 +10,18 @@ on:
 
 jobs:
   tests:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        node: [18, 20]
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v3
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ matrix.node }}
 
     - name: Install Dependencies
       run: npm ci
@@ -39,7 +42,7 @@ jobs:
       run: npm run build
 
     - name: Run Code Coverage
-      uses: codecov/codecov-action@v5
+      uses: codecov/codecov-action@v4
       with:
         token: ${{ secrets.CODECOV_TOKEN }}
         fail_ci_if_error: true

.nvmrc

@@ -1 +1 @@
-24
+20

CODEOWNERS

@@ -0,0 +1,2 @@
+# The following users are the owners of all frontend-app-authn files
+*       @openedx/2u-infinity

README.rst

@@ -29,13 +29,7 @@ Getting Started
 Installation
 ============
 
-`Tutor`_ is currently recommended as a development environment for your new MFE. Please refer to the `relevant tutor-mfe documentation`_ to get started using it.
-
-.. _Tutor: https://github.com/overhangio/tutor
-.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
-
-Devstack (Deprecated) instructions
-==================================
+This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ section for setup instructions.
 
 1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
 
@@ -57,7 +51,7 @@ Devstack (Deprecated) instructions
 Environment Variables/Setup Notes
 =================================
 
-This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
+This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
 
 The authentication micro-frontend also requires the following additional variable:
 
@@ -148,13 +142,13 @@ Furthermore, there are several edX-specific environment variables that enable in
      - ``true`` | ``''`` (empty strings are falsy)    
 
 For more information see the document: `Micro-frontend applications in Open
-edX <https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development>`__.
+edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
 
 How To Contribute
 =================
 
 Contributions are very welcome, and strongly encouraged! We've
-put together `some documentation that describes our contribution process <https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html>`_.
+put together `some documentation that describes our contribution process <https://edx.readthedocs.org/projects/edx-developer-guide/en/latest/process/index.html>`_.
 
 Even though they were written with edx-platform in mind, the guidelines should be followed for Open edX code in general.
 

catalog-info.yaml

@@ -12,7 +12,6 @@ metadata:
       icon: 'Article'
   annotations:
     openedx.org/arch-interest-groups: ""
-    openedx.org/release: "master"
 spec:
   owner: group:2u-infinity
   type: 'service'

docs/how_tos/enable_social_auth.rst

@@ -3,7 +3,7 @@ Enable Social Auth Locally
 
 Please follow the steps below to enable social auth (SSO) locally.
 
-1. Follow `Enabling Third Party Authentication <https://docs.openedx.org/en/latest/site_ops/install_configure_run_guide/configuration/tpa/index.html>`_ for backend configuration.
+1. Follow `Enabling Third Party Authentication <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/tpa/index.html>`_ for backend configuration.
 
 2. Authn has a component for rendering Social Auth providers at frontend which goes through each provider.
 

openedx.yaml

@@ -0,0 +1,8 @@
+# This file describes this Open edX repo, as described in OEP-2:
+# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
+
+nick: Authn MFE
+oeps: {}
+owner: openedx/2u-infinity
+openedx-release:
+  ref: master

package.json

@@ -13,12 +13,15 @@
     "build": "fedx-scripts webpack",
     "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "dev": "PUBLIC_PATH=/authn/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
   "author": "edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-authn#readme",
@@ -30,52 +33,53 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-platform": "^8.3.1",
+    "@edx/frontend-platform": "^8.0.0",
     "@edx/openedx-atlas": "^0.6.0",
-    "@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.6",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^23.4.2",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/free-brands-svg-icons": "6.6.0",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/react-fontawesome": "0.2.2",
+    "@openedx/paragon": "^22.1.1",
     "@optimizely/react-sdk": "^2.9.1",
     "@redux-devtools/extension": "3.3.0",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "algoliasearch": "^4.14.3",
-    "algoliasearch-helper": "^3.26.0",
+    "algoliasearch-helper": "^3.14.0",
     "classnames": "2.5.1",
-    "core-js": "3.43.0",
+    "core-js": "3.38.1",
     "fastest-levenshtein": "1.0.16",
-    "form-urlencoded": "6.1.6",
+    "form-urlencoded": "6.1.5",
     "prop-types": "15.8.1",
     "query-string": "7.1.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
-    "react-loading-skeleton": "3.5.0",
+    "react-loading-skeleton": "3.4.0",
     "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "6.30.1",
-    "react-router-dom": "6.30.1",
+    "react-router": "6.26.1",
+    "react-router-dom": "6.26.1",
     "react-zendesk": "^0.1.13",
     "redux": "4.2.1",
     "redux-logger": "3.0.6",
-    "redux-mock-store": "1.5.5",
-    "redux-saga": "1.4.2",
+    "redux-mock-store": "1.5.4",
+    "redux-saga": "1.3.0",
     "redux-thunk": "2.4.2",
     "regenerator-runtime": "0.14.1",
-    "reselect": "5.1.1",
-    "universal-cookie": "7.2.2"
+    "reselect": "4.1.8",
+    "universal-cookie": "4.0.4"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "^14.6.2",
-    "babel-plugin-formatjs": "10.5.41",
-    "eslint-plugin-import": "2.32.0",
+    "@edx/reactifex": "1.1.0",
+    "@openedx/frontend-build": "^14.0.3",
+    "babel-plugin-formatjs": "10.5.16",
+    "eslint-plugin-import": "2.29.1",
     "glob": "7.2.3",
     "history": "5.3.0",
-    "jest": "30.2.0",
-    "react-test-renderer": "^18.3.1",
-    "ts-jest": "^29.4.0"
+    "husky": "7.0.4",
+    "jest": "29.7.0",
+    "react-test-renderer": "^17.0.2"
   }
 }

src/common-components/InstitutionLogistration.jsx

@@ -60,7 +60,7 @@ const InstitutionLogistration = props => {
                     className="btn nav-item p-0 mb-1 institutions--provider-link"
                     destination={lmsBaseUrl + provider.loginUrl}
                   >
-                    {provider.name}
+                    {provider?.name}
                   </Hyperlink>
                 </td>
               </tr>

src/common-components/RedirectLogistration.jsx

@@ -5,7 +5,7 @@ import { Navigate } from 'react-router-dom';
 import {
   AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS, REDIRECT,
 } from '../data/constants';
-import { setCookie } from '../data/utils';
+import setCookie from '../data/utils/cookies';
 
 const RedirectLogistration = (props) => {
   const {

src/common-components/SocialAuthProviders.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -8,15 +9,20 @@ import { Login } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
-import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import { LOGIN_PAGE, REGISTER_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import { setCookie } from '../data/utils';
 
 const SocialAuthProviders = (props) => {
   const { formatMessage } = useIntl();
   const { referrer, socialAuthProviders } = props;
+  const registrationFields = useSelector(state => state.register.registrationFormData);
 
   function handleSubmit(e) {
     e.preventDefault();
 
+    if (referrer === REGISTER_PAGE) {
+      setCookie('marketingEmailsOptIn', registrationFields?.configurableFormFields?.marketingEmailsOptIn);
+    }
     const url = e.currentTarget.dataset.providerUrl;
     window.location.href = getConfig().LMS_BASE_URL + url;
   }

src/common-components/ThirdPartyAuthAlert.jsx

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
+import setCookie from '../data/utils/cookies';
 
 const ThirdPartyAuthAlert = (props) => {
   const { formatMessage } = useIntl();
@@ -20,7 +21,10 @@ const ThirdPartyAuthAlert = (props) => {
     message = formatMessage(messages['register.third.party.auth.account.not.linked'], { currentProvider, platformName });
   }
 
-  if (!currentProvider) {
+  if (currentProvider) {
+    // Setting this cookie to capture marketingEmailsOptIn for SSO flow on the onboarding component
+    setCookie('ssoPipelineRedirectionDone', true);
+  } else {
     return null;
   }
 

src/common-components/UnAuthOnlyRoute.jsx

@@ -4,9 +4,8 @@ import { getConfig } from '@edx/frontend-platform';
 import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import PropTypes from 'prop-types';
 
-import {
-  DEFAULT_REDIRECT_URL,
-} from '../data/constants';
+import { RESET_PAGE } from '../data/constants';
+import { updatePathWithQueryParams } from '../data/utils';
 
 /**
  * This wrapper redirects the requester to our default redirect url if they are
@@ -25,7 +24,12 @@ const UnAuthOnlyRoute = ({ children }) => {
 
   if (isReady) {
     if (authUser && authUser.username) {
-      global.location.href = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+      const updatedPath = updatePathWithQueryParams(window.location.pathname);
+      if (updatedPath.startsWith(RESET_PAGE)) {
+        global.location.href = getConfig().LMS_BASE_URL;
+        return null;
+      }
+      global.location.href = getConfig().LMS_BASE_URL.concat(updatedPath);
       return null;
     }
 

src/common-components/data/constants.js

@@ -0,0 +1,79 @@
+export const registerFields = {
+  fields: {
+    country: {
+      name: 'country',
+      error_message: 'Select your country or region of residence',
+    },
+    honor_code: {
+      name: 'honor_code',
+      type: 'tos_and_honor_code',
+      error_message: '',
+    },
+  },
+};
+
+export const progressiveProfilingFields = {
+  extended_profile: [],
+  fields: {
+    level_of_education: {
+      name: 'level_of_education',
+      type: 'select',
+      label: 'Highest level of education completed',
+      error_message: '',
+      options: [
+        [
+          'p',
+          'Doctorate',
+        ],
+        [
+          'm',
+          "Master's or professional degree",
+        ],
+        [
+          'b',
+          "Bachelor's degree",
+        ],
+        [
+          'a',
+          'Associate degree',
+        ],
+        [
+          'hs',
+          'Secondary/high school',
+        ],
+        [
+          'jhs',
+          'Junior secondary/junior high/middle school',
+        ],
+        [
+          'none',
+          'No formal education',
+        ],
+        [
+          'other',
+          'Other education',
+        ],
+      ],
+    },
+    gender: {
+      name: 'gender',
+      type: 'select',
+      label: 'Gender',
+      error_message: '',
+      options: [
+        [
+          'm',
+          'Male',
+        ],
+        [
+          'f',
+          'Female',
+        ],
+        [
+          'o',
+          'Other/Prefer Not to Say',
+        ],
+      ],
+    },
+  },
+};

src/common-components/data/sagas.js

@@ -1,3 +1,4 @@
+import { getConfig } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 import { call, put, takeEvery } from 'redux-saga/effects';
 
@@ -7,6 +8,7 @@ import {
   getThirdPartyAuthContextSuccess,
   THIRD_PARTY_AUTH_CONTEXT,
 } from './actions';
+import { progressiveProfilingFields, registerFields } from './constants';
 import {
   getThirdPartyAuthContext,
 } from './service';
@@ -20,7 +22,16 @@ export function* fetchThirdPartyAuthContext(action) {
     } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
 
     yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
-    yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
+    // hard code country field, level of education and gender fields
+    if (getConfig().ENABLE_HARD_CODE_OPTIONAL_FIELDS) {
+      yield put(getThirdPartyAuthContextSuccess(
+        registerFields,
+        progressiveProfilingFields,
+        thirdPartyAuthContext,
+      ));
+    } else {
+      yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext));
+    }
   } catch (e) {
     yield put(getThirdPartyAuthContextFailure());
     logError(e);

src/common-components/tests/FormField.test.jsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, 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';
@@ -36,6 +37,7 @@ describe('FormGroup', () => {
 
 describe('PasswordField', () => {
   const mockStore = configureStore();
+  const IntlPasswordField = injectIntl(PasswordField);
   let props = {};
   let store = {};
 
@@ -64,7 +66,7 @@ describe('PasswordField', () => {
   });
 
   it('should show/hide password on icon click', () => {
-    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
     const passwordInput = getByLabelText('Password');
 
     const showPasswordButton = getByLabelText('Show password');
@@ -77,7 +79,7 @@ describe('PasswordField', () => {
   });
 
   it('should show password requirement tooltip on focus', async () => {
-    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
     const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
     await act(async () => {
@@ -94,7 +96,7 @@ describe('PasswordField', () => {
       ...props,
       value: '',
     };
-    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
     const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
     await act(async () => {
@@ -117,7 +119,7 @@ describe('PasswordField', () => {
   });
 
   it('should update password requirement checks', async () => {
-    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
     const passwordInput = getByLabelText('Password');
     jest.useFakeTimers();
     await act(async () => {
@@ -140,7 +142,7 @@ describe('PasswordField', () => {
   });
 
   it('should not run validations when blur is fired on password icon click', () => {
-    const { container, getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const { container, getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
     const passwordInput = container.querySelector('input[name="password"]');
 
     const passwordIcon = getByLabelText('Show password');
@@ -161,7 +163,7 @@ describe('PasswordField', () => {
       ...props,
       handleBlur: jest.fn(),
     };
-    const { container } = render(reduxWrapper(<PasswordField {...props} />));
+    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
     const passwordInput = container.querySelector('input[name="password"]');
 
     fireEvent.blur(passwordInput, {
@@ -179,7 +181,7 @@ describe('PasswordField', () => {
       ...props,
       handleErrorChange: jest.fn(),
     };
-    const { container } = render(reduxWrapper(<PasswordField {...props} />));
+    const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
     const passwordInput = container.querySelector('input[name="password"]');
 
     fireEvent.blur(passwordInput, {
@@ -202,7 +204,7 @@ describe('PasswordField', () => {
       handleErrorChange: jest.fn(),
     };
 
-    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
 
     const passwordIcon = getByLabelText('Show password');
 
@@ -222,7 +224,7 @@ describe('PasswordField', () => {
       handleErrorChange: jest.fn(),
     };
 
-    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
 
     const passwordIcon = getByLabelText('Show password');
 
@@ -246,7 +248,7 @@ describe('PasswordField', () => {
       ...props,
       handleErrorChange: jest.fn(),
     };
-    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
     const passwordField = getByLabelText('Password');
     fireEvent.blur(passwordField, {
       target: {
@@ -266,7 +268,7 @@ describe('PasswordField', () => {
       handleErrorChange: jest.fn(),
       handleBlur: jest.fn(),
     };
-    const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
+    const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
 
     const passwordIcon = getByLabelText('Show password');
 

src/common-components/tests/SocialAuthProviders.test.jsx

@@ -1,16 +1,35 @@
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
 
 import registerIcons from '../RegisterFaIcons';
 import SocialAuthProviders from '../SocialAuthProviders';
 
 registerIcons();
+const mockStore = configureStore();
 
 describe('SocialAuthProviders', () => {
   let props = {};
 
+  const initialState = {
+    register: {
+      registrationFormData: {
+        configurableFormFields: {
+          marketingEmailsOptIn: true,
+        },
+      },
+    },
+  };
+  const store = mockStore(initialState);
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <Provider store={store}>{children}</Provider>
+    </IntlProvider>
+  );
+
   const appleProvider = {
     id: 'oa2-apple-id',
     name: 'Apple',
@@ -30,11 +49,11 @@ describe('SocialAuthProviders', () => {
   it('should match social auth provider with iconImage snapshot', () => {
     props = { socialAuthProviders: [appleProvider, facebookProvider] };
 
-    const tree = renderer.create(
+    const tree = renderer.create(reduxWrapper(
       <IntlProvider locale="en">
         <SocialAuthProviders {...props} />
       </IntlProvider>,
-    ).toJSON();
+    )).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
@@ -48,11 +67,11 @@ describe('SocialAuthProviders', () => {
       }],
     };
 
-    const tree = renderer.create(
+    const tree = renderer.create(reduxWrapper(
       <IntlProvider locale="en">
         <SocialAuthProviders {...props} />
       </IntlProvider>,
-    ).toJSON();
+    )).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
@@ -66,11 +85,11 @@ describe('SocialAuthProviders', () => {
       }],
     };
 
-    const tree = renderer.create(
+    const tree = renderer.create(reduxWrapper(
       <IntlProvider locale="en">
         <SocialAuthProviders {...props} />
       </IntlProvider>,
-    ).toJSON();
+    )).toJSON();
 
     expect(tree).toMatchSnapshot();
   });

src/config/index.js

@@ -11,6 +11,7 @@ const configuration = {
   MARKETING_EMAILS_OPT_IN: process.env.MARKETING_EMAILS_OPT_IN || '',
   SHOW_CONFIGURABLE_EDX_FIELDS: process.env.SHOW_CONFIGURABLE_EDX_FIELDS || false,
   SHOW_REGISTRATION_LINKS: process.env.SHOW_REGISTRATION_LINKS !== 'false',
+  ENABLE_HARD_CODE_OPTIONAL_FIELDS: process.env.ENABLE_HARD_CODE_OPTIONAL_FIELDS || false,
   ENABLE_IMAGE_LAYOUT: process.env.ENABLE_IMAGE_LAYOUT || false,
   // Links
   ACTIVATION_EMAIL_SUPPORT_LINK: process.env.ACTIVATION_EMAIL_SUPPORT_LINK || null,
@@ -35,6 +36,7 @@ const configuration = {
   ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
   ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
   ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
+  AUTO_GENERATED_USERNAME_EXPERIMENT_ID: process.env.AUTO_GENERATED_USERNAME_EXPERIMENT_ID || '',
 };
 
 export default configuration;

src/data/constants.js

@@ -37,3 +37,4 @@ export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+
 // things like auto-enrollment upon login and registration.
 export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta'];
 export const REDIRECT = 'redirect';
+export const APP_NAME = 'authn_mfe';

src/data/segment/utils.js

@@ -0,0 +1,37 @@
+/* eslint-disable import/prefer-default-export */
+import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+import { APP_NAME } from '../constants';
+
+export const LINK_TIMEOUT = 300;
+
+/**
+ * Creates an event tracker function that sends a tracking event with the given name and options.
+ *
+ * @param {string} name - The name of the event to be tracked.
+ * @param {object} [options={}] - Additional options to be included with the event.
+ * @returns {function} - A function that, when called, sends the tracking event.
+ */
+export const createEventTracker = (name, options = {}) => () => sendTrackEvent(
+  name,
+  { ...options, app_name: APP_NAME },
+);
+
+/**
+ * Creates an event tracker function that sends a tracking event with the given name and options.
+ *
+ * @param {string} name - The name of the event to be tracked.
+ * @param {object} [options={}] - Additional options to be included with the event.
+ * @returns {function} - A function that, when called, sends the tracking event.
+ */
+export const createPageEventTracker = (name, options = null) => () => sendPageEvent(
+  name,
+  options,
+  { app_name: APP_NAME },
+);
+
+export const createLinkTracker = (tracker, href) => (e) => {
+  e.preventDefault();
+  tracker();
+  return setTimeout(() => { window.location.href = href; }, LINK_TIMEOUT);
+};

src/data/utils/cookies.js

@@ -11,3 +11,11 @@ export default function setCookie(cookieName, cookieValue, cookieExpiry) {
     cookies.set(cookieName, cookieValue, options);
   }
 }
+
+export function removeCookie(cookieName) {
+  if (cookieName) {
+    const cookies = new Cookies();
+    const options = { domain: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
+    cookies.remove(cookieName, options);
+  }
+}

src/data/utils/index.js

@@ -8,4 +8,4 @@ export {
   windowScrollTo,
 } from './dataUtils';
 export { default as AsyncActionType } from './reduxUtils';
-export { default as setCookie } from './cookies';
+export { default as setCookie, removeCookie } from './cookies';

src/forgot-password/ForgotPasswordPage.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
-import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form,
@@ -25,6 +24,10 @@ import BaseContainer from '../base-container';
 import { FormGroup } from '../common-components';
 import { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
 import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';
+import {
+  trackForgotPasswordPageEvent,
+  trackForgotPasswordPageViewed,
+} from '../tracking/trackers/forgotpassword';
 
 const ForgotPasswordPage = (props) => {
   const platformName = getConfig().SITE_NAME;
@@ -41,8 +44,8 @@ const ForgotPasswordPage = (props) => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    sendPageEvent('login_and_registration', 'reset');
-    sendTrackEvent('edx.bi.password_reset_form.viewed', { category: 'user-engagement' });
+    trackForgotPasswordPageEvent();
+    trackForgotPasswordPageViewed();
   }, []);
 
   useEffect(() => {

src/forgot-password/tests/ForgotPasswordPage.test.jsx

@@ -1,7 +1,8 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
 import { mergeConfig } from '@edx/frontend-platform';
-import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
+import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   fireEvent, render, screen,
 } from '@testing-library/react';
@@ -25,6 +26,7 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockedNavigator,
 }));
 
+const IntlForgotPasswordPage = injectIntl(ForgotPasswordPage);
 const mockStore = configureStore();
 
 const initialState = {
@@ -76,7 +78,7 @@ describe('ForgotPasswordPage', () => {
   );
 
   it('not should display need other help signing in button', () => {
-    const { queryByTestId } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
+    const { queryByTestId } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     const forgotPasswordButton = queryByTestId('forgot-password');
     expect(forgotPasswordButton).toBeNull();
   });
@@ -85,14 +87,14 @@ describe('ForgotPasswordPage', () => {
     mergeConfig({
       LOGIN_ISSUE_SUPPORT_LINK: '/support',
     });
-    render(reduxWrapper(<ForgotPasswordPage {...props} />));
+    render(reduxWrapper(<IntlForgotPasswordPage {...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(<ForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     const emailInput = screen.getByLabelText('Email');
 
@@ -113,7 +115,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(<ForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     const alertElements = container.querySelectorAll('.alert-danger');
     const validationErrors = alertElements[0].textContent;
@@ -122,7 +124,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(<ForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     const submitButton = screen.getByText('Submit');
     fireEvent.click(submitButton);
@@ -139,7 +141,7 @@ describe('ForgotPasswordPage', () => {
       forgotPassword: { status: 'forbidden' },
     });
 
-    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     const alertElements = container.querySelectorAll('.alert-danger');
     const validationErrors = alertElements[0].textContent;
@@ -147,7 +149,7 @@ describe('ForgotPasswordPage', () => {
   });
 
   it('should not display any error message on change event', () => {
-    render(reduxWrapper(<ForgotPasswordPage {...props} />));
+    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     const emailInput = screen.getByLabelText('Email');
 
@@ -170,7 +172,7 @@ describe('ForgotPasswordPage', () => {
     };
 
     store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<ForgotPasswordPage {...props} />));
+    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     const emailInput = screen.getByLabelText('Email');
 
     fireEvent.blur(emailInput);
@@ -185,7 +187,7 @@ describe('ForgotPasswordPage', () => {
       emailValidationError: validationMessage,
       email: '',
     };
-    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     const validationElement = container.querySelector('.pgn__form-text-invalid');
     expect(validationElement.textContent).toEqual(validationMessage);
   });
@@ -203,7 +205,7 @@ describe('ForgotPasswordPage', () => {
 
     store.dispatch = jest.fn(store.dispatch);
 
-    render(reduxWrapper(<ForgotPasswordPage {...props} />));
+    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     const emailInput = screen.getByLabelText('Email');
 
     fireEvent.focus(emailInput);
@@ -217,7 +219,7 @@ describe('ForgotPasswordPage', () => {
       emailValidationError: '',
       email: '',
     };
-    render(reduxWrapper(<ForgotPasswordPage {...props} />));
+    render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     const errorElement = screen.queryByTestId('email-invalid-feedback');
     expect(errorElement).toBeNull();
   });
@@ -234,7 +236,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(<ForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     const successElement = findByTextContent(container, successMessage);
 
     expect(successElement).toBeDefined();
@@ -252,7 +254,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(<ForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     const successElement = findByTextContent(container, successMessage);
 
     expect(successElement).toBeDefined();
@@ -260,7 +262,7 @@ describe('ForgotPasswordPage', () => {
   });
 
   it('should redirect onto login page', async () => {
-    const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     const navElement = container.querySelector('nav');
     const anchorElement = navElement.querySelector('a');

src/index.jsx

@@ -1,36 +1,27 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
-import React, { StrictMode } from 'react';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 import {
   APP_INIT_ERROR, APP_READY, initialize, mergeConfig, subscribe,
 } from '@edx/frontend-platform';
 import { ErrorPage } from '@edx/frontend-platform/react';
-import { createRoot } from 'react-dom/client';
 
 import configuration from './config';
 import messages from './i18n';
 import MainApp from './MainApp';
 
 subscribe(APP_READY, () => {
-  const root = createRoot(document.getElementById('root'));
-
-  root.render(
-    <StrictMode>
-      <MainApp />
-    </StrictMode>,
+  ReactDOM.render(
+    <MainApp />,
+    document.getElementById('root'),
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  const root = createRoot(document.getElementById('root'));
-
-  root.render(
-    <StrictMode>
-      <ErrorPage message={error.message} />
-    </StrictMode>,
-  );
+  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });
 
 initialize({

src/index.scss

@@ -1,2 +1,6 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
 @import "sass/style";

src/login/LoginPage.jsx

@@ -1,17 +1,25 @@
-import {
-  useCallback, useEffect, useMemo, useState,
-} from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { 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 { useIntl } from '@edx/frontend-platform/i18n';
-import { Form, StatefulButton } from '@openedx/paragon';
+import { injectIntl, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Form, StatefulButton,
+} from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import Skeleton from 'react-loading-skeleton';
 import { Link } from 'react-router-dom';
 
+import AccountActivationMessage from './AccountActivationMessage';
+import {
+  backupLoginFormBegin,
+  dismissPasswordResetBanner,
+  loginRequest,
+} from './data/actions';
+import { INVALID_FORM, TPA_AUTHENTICATION_FAILURE } from './data/constants';
+import LoginFailureMessage from './LoginFailure';
+import messages from './messages';
 import {
   FormGroup,
   InstitutionLogistration,
@@ -19,12 +27,13 @@ import {
   RedirectLogistration,
   ThirdPartyAuthAlert,
 } from '../common-components';
-import AccountActivationMessage from './AccountActivationMessage';
 import { getThirdPartyAuthContext } from '../common-components/data/actions';
 import { thirdPartyAuthContextSelector } from '../common-components/data/selectors';
 import EnterpriseSSO from '../common-components/EnterpriseSSO';
 import ThirdPartyAuth from '../common-components/ThirdPartyAuth';
-import { PENDING_STATE, RESET_PAGE } from '../data/constants';
+import {
+  DEFAULT_STATE, PENDING_STATE, RESET_PAGE,
+} from '../data/constants';
 import {
   getActivationStatus,
   getAllPossibleQueryParams,
@@ -32,72 +41,65 @@ import {
   getTpaProvider,
   updatePathWithQueryParams,
 } from '../data/utils';
+import { removeCookie } from '../data/utils/cookies';
 import ResetPasswordSuccess from '../reset-password/ResetPasswordSuccess';
-import { backupLoginFormBegin, dismissPasswordResetBanner, loginRequest } from './data/actions';
-import { INVALID_FORM, TPA_AUTHENTICATION_FAILURE } from './data/constants';
-import LoginFailureMessage from './LoginFailure';
-import messages from './messages';
+import {
+  trackForgotPasswordLinkClick, trackLoginPageViewed, trackLoginSuccess,
+} from '../tracking/trackers/login';
 
-const LoginPage = ({
-  institutionLogin,
-  handleInstitutionLogin,
-}) => {
-  const dispatch = useDispatch();
-  const backupFormState = useCallback((data) => dispatch(backupLoginFormBegin(data)), [dispatch]);
-  const getTPADataFromBackend = useCallback(() => dispatch(getThirdPartyAuthContext()), [dispatch]);
+const LoginPage = (props) => {
   const {
     backedUpFormData,
     loginErrorCode,
     loginErrorContext,
     loginResult,
     shouldBackupState,
+    thirdPartyAuthContext: {
+      providers,
+      currentProvider,
+      secondaryProviders,
+      finishAuthUrl,
+      platformName,
+      errorMessage: thirdPartyErrorMessage,
+    },
+    thirdPartyAuthApiStatus,
+    institutionLogin,
     showResetPasswordSuccessBanner,
     submitState,
-    thirdPartyAuthContext,
-    thirdPartyAuthApiStatus,
-  } = useSelector((state) => ({
-    backedUpFormData: state.login.loginFormData,
-    loginErrorCode: state.login.loginErrorCode,
-    loginErrorContext: state.login.loginErrorContext,
-    loginResult: state.login.loginResult,
-    shouldBackupState: state.login.shouldBackupState,
-    showResetPasswordSuccessBanner: state.login.showResetPasswordSuccessBanner,
-    submitState: state.login.submitState,
-    thirdPartyAuthContext: thirdPartyAuthContextSelector(state),
-    thirdPartyAuthApiStatus: state.commonComponents.thirdPartyAuthApiStatus,
-  }));
-  const {
-    providers,
-    currentProvider,
-    secondaryProviders,
-    finishAuthUrl,
-    platformName,
-    errorMessage: thirdPartyErrorMessage,
-  } = thirdPartyAuthContext;
+    // Actions
+    backupFormState,
+    handleInstitutionLogin,
+    getTPADataFromBackend,
+  } = props;
   const { formatMessage } = useIntl();
   const activationMsgType = getActivationStatus();
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
 
   const [formFields, setFormFields] = useState({ ...backedUpFormData.formFields });
-  const [errorCode, setErrorCode] = useState({
-    type: '',
-    count: 0,
-    context: {},
-  });
+  const [errorCode, setErrorCode] = useState({ type: '', count: 0, context: {} });
   const [errors, setErrors] = useState({ ...backedUpFormData.errors });
   const tpaHint = getTpaHint();
 
   useEffect(() => {
-    sendPageEvent('login_and_registration', 'login');
+    trackLoginPageViewed();
   }, []);
 
+  useEffect(() => {
+    if (loginResult.success) {
+      trackLoginSuccess();
+
+      // Remove this cookie that was set to capture marketingEmailsOptIn for the onboarding component
+      removeCookie('ssoPipelineRedirectionDone');
+    }
+  }, [loginResult]);
+
   useEffect(() => {
     const payload = { ...queryParams };
     if (tpaHint) {
       payload.tpa_hint = tpaHint;
     }
     getTPADataFromBackend(payload);
-  }, [queryParams, tpaHint, getTPADataFromBackend]);
+  }, [getTPADataFromBackend, queryParams, tpaHint]);
   /**
    * Backup the login form in redux when login page is toggled.
    */
@@ -108,7 +110,7 @@ const LoginPage = ({
         errors: { ...errors },
       });
     }
-  }, [backupFormState, shouldBackupState, formFields, errors]);
+  }, [shouldBackupState, formFields, errors, backupFormState]);
 
   useEffect(() => {
     if (loginErrorCode) {
@@ -133,10 +135,7 @@ const LoginPage = ({
   }, [thirdPartyErrorMessage]);
 
   const validateFormFields = (payload) => {
-    const {
-      emailOrUsername,
-      password,
-    } = payload;
+    const { emailOrUsername, password } = payload;
     const fieldErrors = { ...errors };
 
     if (emailOrUsername === '') {
@@ -154,18 +153,14 @@ const LoginPage = ({
   const handleSubmit = (event) => {
     event.preventDefault();
     if (showResetPasswordSuccessBanner) {
-      dispatch(dismissPasswordResetBanner());
+      props.dismissPasswordResetBanner();
     }
 
     const formData = { ...formFields };
     const validationErrors = validateFormFields(formData);
     if (validationErrors.emailOrUsername || validationErrors.password) {
       setErrors({ ...validationErrors });
-      setErrorCode(prevState => ({
-        type: INVALID_FORM,
-        count: prevState.count + 1,
-        context: {},
-      }));
+      setErrorCode(prevState => ({ type: INVALID_FORM, count: prevState.count + 1, context: {} }));
       return;
     }
 
@@ -175,35 +170,20 @@ const LoginPage = ({
       password: formData.password,
       ...queryParams,
     };
-    dispatch(loginRequest(payload));
+    props.loginRequest(payload);
   };
 
   const handleOnChange = (event) => {
-    const {
-      name,
-      value,
-    } = event.target;
-    setFormFields(prevState => ({
-      ...prevState,
-      [name]: value,
-    }));
+    const { name, value } = event.target;
+    setFormFields(prevState => ({ ...prevState, [name]: value }));
   };
 
   const handleOnFocus = (event) => {
     const { name } = event.target;
-    setErrors(prevErrors => ({
-      ...prevErrors,
-      [name]: '',
-    }));
-  };
-  const trackForgotPasswordLinkClick = () => {
-    sendTrackEvent('edx.bi.password-reset_form.toggled', { category: 'user-engagement' });
+    setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
   };
 
-  const {
-    provider,
-    skipHintedLogin,
-  } = getTpaProvider(tpaHint, providers, secondaryProviders);
+  const { provider, skipHintedLogin } = getTpaProvider(tpaHint, providers, secondaryProviders);
 
   if (tpaHint) {
     if (thirdPartyAuthApiStatus === PENDING_STATE) {
@@ -310,9 +290,88 @@ const LoginPage = ({
   );
 };
 
+const mapStateToProps = state => {
+  const loginPageState = state.login;
+  return {
+    backedUpFormData: loginPageState.loginFormData,
+    loginErrorCode: loginPageState.loginErrorCode,
+    loginErrorContext: loginPageState.loginErrorContext,
+    loginResult: loginPageState.loginResult,
+    shouldBackupState: loginPageState.shouldBackupState,
+    showResetPasswordSuccessBanner: loginPageState.showResetPasswordSuccessBanner,
+    submitState: loginPageState.submitState,
+    thirdPartyAuthContext: thirdPartyAuthContextSelector(state),
+    thirdPartyAuthApiStatus: state.commonComponents.thirdPartyAuthApiStatus,
+  };
+};
+
 LoginPage.propTypes = {
+  backedUpFormData: PropTypes.shape({
+    formFields: PropTypes.shape({}),
+    errors: PropTypes.shape({}),
+  }),
+  loginErrorCode: PropTypes.string,
+  loginErrorContext: PropTypes.shape({
+    email: PropTypes.string,
+    redirectUrl: PropTypes.string,
+    context: PropTypes.shape({}),
+  }),
+  loginResult: PropTypes.shape({
+    redirectUrl: PropTypes.string,
+    success: PropTypes.bool,
+  }),
+  shouldBackupState: PropTypes.bool,
+  showResetPasswordSuccessBanner: PropTypes.bool,
+  submitState: PropTypes.string,
+  thirdPartyAuthApiStatus: PropTypes.string,
   institutionLogin: PropTypes.bool.isRequired,
+  thirdPartyAuthContext: PropTypes.shape({
+    currentProvider: PropTypes.string,
+    errorMessage: PropTypes.string,
+    platformName: PropTypes.string,
+    providers: PropTypes.arrayOf(PropTypes.shape({})),
+    secondaryProviders: PropTypes.arrayOf(PropTypes.shape({})),
+    finishAuthUrl: PropTypes.string,
+  }),
+  // Actions
+  backupFormState: PropTypes.func.isRequired,
+  dismissPasswordResetBanner: PropTypes.func.isRequired,
+  loginRequest: PropTypes.func.isRequired,
+  getTPADataFromBackend: PropTypes.func.isRequired,
   handleInstitutionLogin: PropTypes.func.isRequired,
 };
 
-export default LoginPage;
+LoginPage.defaultProps = {
+  backedUpFormData: {
+    formFields: {
+      emailOrUsername: '', password: '',
+    },
+    errors: {
+      emailOrUsername: '', password: '',
+    },
+  },
+  loginErrorCode: null,
+  loginErrorContext: {},
+  loginResult: {},
+  shouldBackupState: false,
+  showResetPasswordSuccessBanner: false,
+  submitState: DEFAULT_STATE,
+  thirdPartyAuthApiStatus: PENDING_STATE,
+  thirdPartyAuthContext: {
+    currentProvider: null,
+    errorMessage: null,
+    finishAuthUrl: null,
+    providers: [],
+    secondaryProviders: [],
+  },
+};
+
+export default connect(
+  mapStateToProps,
+  {
+    backupFormState: backupLoginFormBegin,
+    dismissPasswordResetBanner,
+    loginRequest,
+    getTPADataFromBackend: getThirdPartyAuthContext,
+  },
+)(injectIntl(LoginPage));

src/login/tests/AccountActivationMessage.test.jsx

@@ -1,5 +1,7 @@
+import React from 'react';
+
 import { mergeConfig } from '@edx/frontend-platform';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   render, screen,
 } from '@testing-library/react';
@@ -7,6 +9,8 @@ import {
 import AccountActivationMessage from '../AccountActivationMessage';
 import { ACCOUNT_ACTIVATION_MESSAGE } from '../data/constants';
 
+const IntlAccountActivationMessage = injectIntl(AccountActivationMessage);
+
 describe('AccountActivationMessage', () => {
   beforeEach(() => {
     mergeConfig({
@@ -17,7 +21,7 @@ describe('AccountActivationMessage', () => {
   it('should match account already activated message', () => {
     render(
       <IntlProvider locale="en">
-        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
+        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
       </IntlProvider>,
     );
 
@@ -32,7 +36,7 @@ describe('AccountActivationMessage', () => {
   it('should match account activated success message', () => {
     render(
       <IntlProvider locale="en">
-        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
+        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
       </IntlProvider>,
     );
 
@@ -49,7 +53,7 @@ describe('AccountActivationMessage', () => {
   it('should match account activation error message', () => {
     render(
       <IntlProvider locale="en">
-        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
+        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
       </IntlProvider>,
     );
 
@@ -65,7 +69,7 @@ describe('AccountActivationMessage', () => {
   it('should not display anything for invalid message type', () => {
     const { container } = render(
       <IntlProvider locale="en">
-        <AccountActivationMessage messageType="invalid-message" />
+        <IntlAccountActivationMessage messageType="invalid-message" />
       </IntlProvider>,
     );
 
@@ -84,7 +88,7 @@ describe('EmailConfirmationMessage', () => {
   it('should match email already confirmed message', () => {
     render(
       <IntlProvider locale="en">
-        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
+        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
       </IntlProvider>,
     );
 
@@ -99,7 +103,7 @@ describe('EmailConfirmationMessage', () => {
   it('should match email confirmation success message', () => {
     render(
       <IntlProvider locale="en">
-        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
+        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
       </IntlProvider>,
     );
     const expectedMessage = 'Success! You have confirmed your email.Sign in to continue.';
@@ -113,7 +117,7 @@ describe('EmailConfirmationMessage', () => {
   it('should match email confirmation error message', () => {
     render(
       <IntlProvider locale="en">
-        <AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
+        <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
       </IntlProvider>,
     );
     const expectedMessage = 'Your email could not be confirmed'

src/login/tests/ChangePasswordPrompt.test.jsx

@@ -1,5 +1,7 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   fireEvent, render, screen,
 } from '@testing-library/react';
@@ -9,6 +11,7 @@ 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', () => ({
@@ -41,7 +44,7 @@ describe('ChangePasswordPromptTests', () => {
     render(
       <IntlProvider locale="en">
         <MemoryRouter>
-          <ChangePasswordPrompt {...props} />
+          <IntlChangePasswordPrompt {...props} />
         </MemoryRouter>
       </IntlProvider>,
     );
@@ -58,7 +61,7 @@ describe('ChangePasswordPromptTests', () => {
     render(
       <IntlProvider locale="en">
         <MemoryRouter>
-          <ChangePasswordPrompt {...props} />
+          <IntlChangePasswordPrompt {...props} />
         </MemoryRouter>
       </IntlProvider>,
     );

src/login/tests/LoginFailure.test.jsx

@@ -1,4 +1,6 @@
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import React from 'react';
+
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   render, screen,
 } from '@testing-library/react';
@@ -24,6 +26,8 @@ jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthService: jest.fn(),
 }));
 
+const IntlLoginFailureMessage = injectIntl(LoginFailureMessage);
+
 describe('LoginFailureMessage', () => {
   let props = {};
 
@@ -44,7 +48,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -72,7 +76,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -102,7 +106,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -128,7 +132,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -148,7 +152,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -172,7 +176,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -192,7 +196,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -212,7 +216,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -232,7 +236,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -251,7 +255,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -271,7 +275,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 
@@ -297,7 +301,7 @@ describe('LoginFailureMessage', () => {
     render(
       <IntlProvider locale="en">
         <MemoryRouter>
-          <LoginFailureMessage {...props} />
+          <IntlLoginFailureMessage {...props} />
         </MemoryRouter>
       </IntlProvider>,
     );
@@ -323,7 +327,7 @@ describe('LoginFailureMessage', () => {
     render(
       <IntlProvider locale="en">
         <MemoryRouter>
-          <LoginFailureMessage {...props} />
+          <IntlLoginFailureMessage {...props} />
         </MemoryRouter>
       </IntlProvider>,
     );
@@ -355,7 +359,7 @@ describe('LoginFailureMessage', () => {
 
     render(
       <IntlProvider locale="en">
-        <LoginFailureMessage {...props} />
+        <IntlLoginFailureMessage {...props} />
       </IntlProvider>,
     );
 

src/login/tests/LoginPage.test.jsx

@@ -1,8 +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 { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   fireEvent, render, screen, waitFor,
 } from '@testing-library/react';
@@ -10,7 +11,9 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
-import { COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE } from '../../data/constants';
+import {
+  APP_NAME, COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE,
+} from '../../data/constants';
 import { backupLoginFormBegin, dismissPasswordResetBanner, loginRequest } from '../data/actions';
 import { INTERNAL_SERVER_ERROR } from '../data/constants';
 import LoginPage from '../LoginPage';
@@ -23,6 +26,7 @@ jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthService: jest.fn(),
 }));
 
+const IntlLoginPage = injectIntl(LoginPage);
 const mockStore = configureStore();
 
 describe('LoginPage', () => {
@@ -41,14 +45,6 @@ describe('LoginPage', () => {
   const initialState = {
     login: {
       loginResult: { success: false, redirectUrl: '' },
-      loginFormData: {
-        formFields: {
-          emailOrUsername: '', password: '',
-        },
-        errors: {
-          emailOrUsername: '', password: '',
-        },
-      },
     },
     commonComponents: {
       thirdPartyAuthApiStatus: null,
@@ -94,7 +90,7 @@ describe('LoginPage', () => {
   it('should submit form for valid input', () => {
     store.dispatch = jest.fn(store.dispatch);
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
 
     fireEvent.change(screen.getByText(
       '',
@@ -115,7 +111,7 @@ describe('LoginPage', () => {
 
   it('should not dispatch loginRequest on empty form submission', () => {
     store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
 
     fireEvent.click(screen.getByText(
       '',
@@ -134,7 +130,7 @@ describe('LoginPage', () => {
     });
 
     store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     fireEvent.click(screen.getByText(
       '',
       { selector: '.btn-brand' },
@@ -148,7 +144,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(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
 
     fireEvent.change(screen.getByText(
       '',
@@ -168,7 +164,7 @@ describe('LoginPage', () => {
   });
 
   it('should show error messages for required fields on empty form submission', () => {
-    const { container } = render(reduxWrapper(<LoginPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlLoginPage {...props} />));
     fireEvent.click(screen.getByText(
       '',
       { selector: '.btn-brand' },
@@ -182,7 +178,7 @@ describe('LoginPage', () => {
   });
 
   it('should run frontend validations for emailOrUsername field on form submission', () => {
-    const { container } = render(reduxWrapper(<LoginPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlLoginPage {...props} />));
 
     fireEvent.change(screen.getByText(
       '',
@@ -201,7 +197,7 @@ describe('LoginPage', () => {
   it('should reset field related error messages on onFocus event', async () => {
     store.dispatch = jest.fn(store.dispatch);
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
 
     await act(async () => {
       // clicking submit button with empty fields to make the errors appear
@@ -230,7 +226,7 @@ describe('LoginPage', () => {
   // ******** test form buttons and links ********
 
   it('should match default button state', () => {
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(screen.getByText('Sign in')).toBeDefined();
   });
 
@@ -243,7 +239,7 @@ describe('LoginPage', () => {
       },
     });
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
 
     expect(screen.getByText(
       'pending',
@@ -251,7 +247,7 @@ describe('LoginPage', () => {
   });
 
   it('should show forgot password link', () => {
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
 
     expect(screen.getByText(
       'Forgot password',
@@ -271,7 +267,7 @@ describe('LoginPage', () => {
       },
     });
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(screen.getByText(
       '',
       { selector: `#${ssoProvider.id}` },
@@ -293,7 +289,7 @@ describe('LoginPage', () => {
       },
     });
 
-    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(queryByText('Company or school credentials')).toBeNull();
     expect(queryByText('Or sign in with:')).toBeNull();
     expect(queryByText('Institution/campus credentials')).toBeNull();
@@ -313,7 +309,7 @@ describe('LoginPage', () => {
       },
     });
 
-    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(queryByText('Company or school credentials')).toBeNull();
     expect(queryByText('Or sign in with:')).toBeNull();
   });
@@ -333,7 +329,7 @@ describe('LoginPage', () => {
       },
     });
 
-    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(queryByText('Or sign in with:')).toBeDefined();
     expect(queryByText('Company or school credentials')).toBeDefined();
     expect(queryByText('Institution/campus credentials')).toBeDefined();
@@ -358,7 +354,7 @@ describe('LoginPage', () => {
       },
     });
 
-    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(queryByText('Or sign in with:')).toBeDefined();
     expect(queryByText('Company or school credentials')).toBeNull();
     expect(queryByText('Institution/campus credentials')).toBeDefined();
@@ -386,7 +382,7 @@ describe('LoginPage', () => {
       },
     });
 
-    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(queryByText('Or sign in with:')).toBeDefined();
     expect(queryByText('Institution/campus credentials')).toBeDefined();
 
@@ -406,7 +402,7 @@ describe('LoginPage', () => {
       },
     });
 
-    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(queryByText('Or sign in with:')).toBeNull();
     expect(queryByText('Institution/campus credentials')).toBeNull();
     expect(queryByText('Company or school credentials')).toBeNull();
@@ -424,7 +420,7 @@ describe('LoginPage', () => {
       },
     });
 
-    const { queryByText } = render(reduxWrapper(<LoginPage {...props} />));
+    const { queryByText } = render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(queryByText('Or sign in with:')).toBeDefined();
     expect(queryByText('Company or school credentials')).toBeNull();
     expect(queryByText('Institution/campus credentials')).toBeDefined();
@@ -447,7 +443,7 @@ describe('LoginPage', () => {
       },
     });
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(screen.getByText(
       '',
       { selector: '#login-failure-alert' },
@@ -471,7 +467,7 @@ describe('LoginPage', () => {
                             + 'linked '}${ getConfig().SITE_NAME } account. To link your accounts, sign in now using your ${
                              getConfig().SITE_NAME } password.`;
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(screen.getByText(
       '',
       { selector: '#tpa-alert' },
@@ -490,7 +486,7 @@ describe('LoginPage', () => {
         },
       },
     });
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(screen.getByText(
       '',
       { selector: '#login-failure-alert' },
@@ -507,7 +503,7 @@ describe('LoginPage', () => {
       },
     });
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(screen.getByText(
       '',
       { selector: '#login-failure-alert' },
@@ -531,7 +527,7 @@ describe('LoginPage', () => {
 
     delete window.location;
     window.location = { href: getConfig().BASE_URL };
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(window.location.href).toBe(dashboardURL);
   });
 
@@ -558,7 +554,7 @@ describe('LoginPage', () => {
     delete window.location;
     window.location = { href: getConfig().BASE_URL };
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl);
   });
 
@@ -577,7 +573,7 @@ describe('LoginPage', () => {
     delete window.location;
     window.location = { href: getConfig().BASE_URL };
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
 
     fireEvent.click(screen.getByText(
       '',
@@ -606,7 +602,7 @@ describe('LoginPage', () => {
     delete window.location;
     window.location = { href: getConfig().BASE_URL };
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(window.location.href).toBe(getConfig().LMS_BASE_URL + finishAuthUrl);
   });
 
@@ -628,7 +624,7 @@ describe('LoginPage', () => {
     delete window.location;
     window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(screen.getByText(
       '',
       { selector: `#${ssoProvider.id}` },
@@ -655,7 +651,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(<LoginPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(container.querySelector('.react-loading-skeleton')).toBeTruthy();
   });
 
@@ -677,7 +673,7 @@ describe('LoginPage', () => {
     window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${secondaryProviders.id}` };
     secondaryProviders.iconImage = null;
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(window.location.href).toEqual(getConfig().LMS_BASE_URL + secondaryProviders.loginUrl);
   });
 
@@ -697,7 +693,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(<LoginPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(container.querySelector(`#${ssoProvider.id}`).querySelector('#provider-name').textContent).toEqual(`${ssoProvider.name}`);
 
     mergeConfig({
@@ -721,7 +717,7 @@ describe('LoginPage', () => {
     delete window.location;
     window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?tpa_hint=${ssoProvider.id}` };
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(screen.getByText(
       'Show me other ways to sign in or register',
     ).textContent).toBeDefined();
@@ -747,7 +743,7 @@ describe('LoginPage', () => {
     delete window.location;
     window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?tpa_hint=${ssoProvider.id}` };
 
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(screen.getByText(
       'Show me other ways to sign in',
     ).textContent).toBeDefined();
@@ -756,8 +752,8 @@ describe('LoginPage', () => {
   // ******** miscellaneous tests ********
 
   it('should send page event when login page is rendered', () => {
-    render(reduxWrapper(<LoginPage {...props} />));
-    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login');
+    render(reduxWrapper(<IntlLoginPage {...props} />));
+    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login', { app_name: APP_NAME });
   });
 
   it('tests that form is in invalid state when it is submitted', () => {
@@ -770,7 +766,7 @@ describe('LoginPage', () => {
     });
 
     store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(store.dispatch).toHaveBeenCalledWith(backupLoginFormBegin(
       {
         formFields: {
@@ -784,13 +780,13 @@ describe('LoginPage', () => {
   });
 
   it('should send track event when forgot password link is clicked', () => {
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     fireEvent.click(screen.getByText(
       'Forgot password',
       { selector: '#forgot-password' },
     ));
 
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.password-reset_form.toggled', { category: 'user-engagement' });
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.password-reset_form.toggled', { category: 'user-engagement', app_name: APP_NAME });
   });
 
   it('should backup the login form state when shouldBackupState is true', () => {
@@ -803,7 +799,7 @@ describe('LoginPage', () => {
     });
 
     store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<LoginPage {...props} />));
+    render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(store.dispatch).toHaveBeenCalledWith(backupLoginFormBegin(
       {
         formFields: {
@@ -832,7 +828,7 @@ describe('LoginPage', () => {
       },
     });
 
-    const { container } = render(reduxWrapper(<LoginPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlLoginPage {...props} />));
     expect(container.querySelector('input#emailOrUsername').value).toEqual('john_doe');
     expect(container.querySelector('input#password').value).toEqual('test-password');
   });

src/logistration/Logistration.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { connect } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -20,24 +20,20 @@ import {
   tpaProvidersSelector,
 } from '../common-components/data/selectors';
 import messages from '../common-components/messages';
-import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
+import { APP_NAME, LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
 import {
   getTpaHint, getTpaProvider, updatePathWithQueryParams,
 } from '../data/utils';
+import { LoginPage } from '../login';
 import { backupLoginForm } from '../login/data/actions';
-import LoginComponentSlot from '../plugin-slots/LoginComponentSlot';
 import { RegistrationPage } from '../register';
 import { backupRegistrationForm } from '../register/data/actions';
 
-const Logistration = ({
-  selectedPage,
-}) => {
+const Logistration = (props) => {
+  const { selectedPage, tpaProviders } = props;
   const tpaHint = getTpaHint();
-  const tpaProviders = useSelector(tpaProvidersSelector);
-  const dispatch = useDispatch();
   const {
-    providers,
-    secondaryProviders,
+    providers, secondaryProviders,
   } = tpaProviders;
   const { formatMessage } = useIntl();
   const [institutionLogin, setInstitutionLogin] = useState(false);
@@ -49,8 +45,7 @@ const Logistration = ({
   useEffect(() => {
     const authService = getAuthService();
     if (authService) {
-      authService.getCsrfTokenService()
-        .getCsrfToken(getConfig().LMS_BASE_URL);
+      authService.getCsrfTokenService().getCsrfToken(getConfig().LMS_BASE_URL);
     }
   });
 
@@ -61,11 +56,11 @@ const Logistration = ({
   }, [navigate, disablePublicAccountCreation]);
 
   const handleInstitutionLogin = (e) => {
-    sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
+    sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement', app_name: APP_NAME });
     if (typeof e === 'string') {
-      sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register');
+      sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register', { app_name: APP_NAME });
     } else {
-      sendPageEvent('login_and_registration', e.target.dataset.eventName);
+      sendPageEvent('login_and_registration', e.target.dataset.eventName, { app_name: APP_NAME });
     }
 
     setInstitutionLogin(!institutionLogin);
@@ -75,12 +70,12 @@ const Logistration = ({
     if (tabKey === currentTab) {
       return;
     }
-    sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' });
-    dispatch(clearThirdPartyAuthContextErrorMessage());
+    sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement', app_name: APP_NAME });
+    props.clearThirdPartyAuthContextErrorMessage();
     if (tabKey === LOGIN_PAGE) {
-      dispatch(backupRegistrationForm());
+      props.backupRegistrationForm();
     } else if (tabKey === REGISTER_PAGE) {
-      dispatch(backupLoginForm());
+      props.backupLoginForm();
     }
     setKey(tabKey);
   };
@@ -116,10 +111,7 @@ const Logistration = ({
                 {!institutionLogin && (
                   <h3 className="mb-4.5">{formatMessage(messages['logistration.sign.in'])}</h3>
                 )}
-                <LoginComponentSlot
-                  institutionLogin={institutionLogin}
-                  handleInstitutionLogin={handleInstitutionLogin}
-                />
+                <LoginPage institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
               </div>
             </>
           )
@@ -132,16 +124,12 @@ const Logistration = ({
                   </Tabs>
                 )
                 : (!isValidTpaHint() && !hideRegistrationLink && (
-                  <Tabs
-                    defaultActiveKey={selectedPage}
-                    id="controlled-tab"
-                    onSelect={(tabKey) => handleOnSelect(tabKey, selectedPage)}
-                  >
+                  <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={(tabKey) => handleOnSelect(tabKey, selectedPage)}>
                     <Tab title={formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
                     <Tab title={formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
                   </Tabs>
                 ))}
-              {key && (
+              { key && (
                 <Navigate to={updatePathWithQueryParams(key)} replace />
               )}
               <div id="main-content" className="main-content">
@@ -151,12 +139,7 @@ const Logistration = ({
                   </h3>
                 )}
                 {selectedPage === LOGIN_PAGE
-                  ? (
-                    <LoginComponentSlot
-                      institutionLogin={institutionLogin}
-                      handleInstitutionLogin={handleInstitutionLogin}
-                    />
-                  )
+                  ? <LoginPage institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
                   : (
                     <RegistrationPage
                       institutionLogin={institutionLogin}
@@ -173,10 +156,35 @@ const Logistration = ({
 
 Logistration.propTypes = {
   selectedPage: PropTypes.string,
+  backupLoginForm: PropTypes.func.isRequired,
+  backupRegistrationForm: PropTypes.func.isRequired,
+  clearThirdPartyAuthContextErrorMessage: PropTypes.func.isRequired,
+  tpaProviders: PropTypes.shape({
+    providers: PropTypes.arrayOf(PropTypes.shape({})),
+    secondaryProviders: PropTypes.arrayOf(PropTypes.shape({})),
+  }),
+};
+
+Logistration.defaultProps = {
+  tpaProviders: {
+    providers: [],
+    secondaryProviders: [],
+  },
 };
 
 Logistration.defaultProps = {
   selectedPage: REGISTER_PAGE,
 };
 
-export default Logistration;
+const mapStateToProps = state => ({
+  tpaProviders: tpaProvidersSelector(state),
+});
+
+export default connect(
+  mapStateToProps,
+  {
+    backupLoginForm,
+    backupRegistrationForm,
+    clearThirdPartyAuthContextErrorMessage,
+  },
+)(Logistration);

src/logistration/Logistration.test.jsx

@@ -1,8 +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, IntlProvider } from '@edx/frontend-platform/i18n';
+import { configure, injectIntl, 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';
@@ -10,18 +11,24 @@ import configureStore from 'redux-mock-store';
 import Logistration from './Logistration';
 import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
 import {
+  APP_NAME,
   COMPLETE_STATE, LOGIN_PAGE, REGISTER_PAGE,
 } from '../data/constants';
 import { backupLoginForm } from '../login/data/actions';
 import { backupRegistrationForm } from '../register/data/actions';
+import { NOT_INITIALIZED } from '../register/data/optimizelyExperiment/helper';
+import useAutoGeneratedUsernameExperimentVariation
+  from '../register/data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendPageEvent: jest.fn(),
   sendTrackEvent: jest.fn(),
 }));
 jest.mock('@edx/frontend-platform/auth');
+jest.mock('../register/data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
 
 const mockStore = configureStore();
+const IntlLogistration = injectIntl(Logistration);
 
 describe('Logistration', () => {
   let store = {};
@@ -48,26 +55,16 @@ describe('Logistration', () => {
           marketingEmailsOptIn: true,
         },
         formFields: {
-          name: '',
-          email: '',
-          username: '',
-          password: '',
+          name: '', email: '', username: '', password: '',
         },
         emailSuggestion: {
-          suggestion: '',
-          type: '',
+          suggestion: '', type: '',
         },
         errors: {
-          name: '',
-          email: '',
-          username: '',
-          password: '',
+          name: '', email: '', username: '', password: '',
         },
       },
-      registrationResult: {
-        success: false,
-        redirectUrl: '',
-      },
+      registrationResult: { success: false, redirectUrl: '' },
       registrationError: {},
       usernameSuggestions: [],
       validationApiRateLimited: false,
@@ -79,18 +76,7 @@ describe('Logistration', () => {
       },
     },
     login: {
-      loginResult: {
-        success: false,
-        redirectUrl: '',
-      },
-      loginFormData: {
-        formFields: {
-          emailOrUsername: '', password: '',
-        },
-        errors: {
-          emailOrUsername: '', password: '',
-        },
-      },
+      loginResult: { success: false, redirectUrl: '' },
     },
   };
 
@@ -103,6 +89,7 @@ describe('Logistration', () => {
       })),
     }));
 
+    useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
     configure({
       loggingService: { logError: jest.fn() },
       config: {
@@ -114,7 +101,7 @@ describe('Logistration', () => {
   });
 
   it('should do nothing when user clicks on the same tab (login/register) again', () => {
-    const { container } = render(reduxWrapper(<Logistration />));
+    const { container } = render(reduxWrapper(<IntlLogistration />));
     // While staying on the registration form, clicking the register tab again
     fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
 
@@ -126,14 +113,14 @@ describe('Logistration', () => {
       ALLOW_PUBLIC_ACCOUNT_CREATION: true,
     });
 
-    const { container } = render(reduxWrapper(<Logistration />));
+    const { container } = render(reduxWrapper(<IntlLogistration />));
 
     expect(container.querySelector('RegistrationPage')).toBeDefined();
   });
 
   it('should render login page', () => {
     const props = { selectedPage: LOGIN_PAGE };
-    const { container } = render(reduxWrapper(<Logistration {...props} />));
+    const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
 
     expect(container.querySelector('LoginPage')).toBeDefined();
   });
@@ -144,7 +131,7 @@ describe('Logistration', () => {
     });
 
     let props = { selectedPage: LOGIN_PAGE };
-    const { rerender } = render(reduxWrapper(<Logistration {...props} />));
+    const { rerender } = render(reduxWrapper(<IntlLogistration {...props} />));
 
     // verifying sign in heading
     expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
@@ -152,7 +139,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(<Logistration {...props} />));
+    rerender(reduxWrapper(<IntlLogistration {...props} />));
 
     // verifying register heading
     expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Register');
@@ -179,7 +166,7 @@ describe('Logistration', () => {
     });
 
     const props = { selectedPage: LOGIN_PAGE };
-    const { container } = render(reduxWrapper(<Logistration {...props} />));
+    const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
 
     // verifying sign in heading for institution login false
     expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
@@ -209,7 +196,7 @@ describe('Logistration', () => {
     });
 
     const props = { selectedPage: LOGIN_PAGE };
-    render(reduxWrapper(<Logistration {...props} />));
+    render(reduxWrapper(<IntlLogistration {...props} />));
     expect(screen.getByText('Institution/campus credentials')).toBeDefined();
 
     // on clicking "Institution/campus credentials" button, it should display institution login page
@@ -240,11 +227,11 @@ describe('Logistration', () => {
     });
 
     const props = { selectedPage: LOGIN_PAGE };
-    render(reduxWrapper(<Logistration {...props} />));
+    render(reduxWrapper(<IntlLogistration {...props} />));
     fireEvent.click(screen.getByText('Institution/campus credentials'));
 
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
-    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login');
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement', app_name: APP_NAME });
+    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login', { app_name: APP_NAME });
 
     mergeConfig({
       DISABLE_ENTERPRISE_LOGIN: '',
@@ -272,7 +259,7 @@ describe('Logistration', () => {
     delete window.location;
     window.location = { hostname: getConfig().SITE_NAME, href: getConfig().BASE_URL };
 
-    render(reduxWrapper(<Logistration />));
+    render(reduxWrapper(<IntlLogistration />));
     fireEvent.click(screen.getByText('Institution/campus credentials'));
     expect(screen.getByText('Test University')).toBeDefined();
 
@@ -283,7 +270,7 @@ describe('Logistration', () => {
 
   it('should fire action to backup registration form on tab click', () => {
     store.dispatch = jest.fn(store.dispatch);
-    const { container } = render(reduxWrapper(<Logistration />));
+    const { container } = render(reduxWrapper(<IntlLogistration />));
     fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
     expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm());
   });
@@ -291,14 +278,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(<Logistration {...props} />));
+    const { container } = render(reduxWrapper(<IntlLogistration {...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(<Logistration />));
+    const { container } = render(reduxWrapper(<IntlLogistration />));
     fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
     expect(store.dispatch).toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage());
   });

src/plugin-slots/LoginComponentSlot/README.md

@@ -1,47 +0,0 @@
-# Login Component Slot
-
-### Slot ID: `org.openedx.frontend.authn.login_component.v1`
-
-## Description
-
-This slot is used to replace/modify/hide the login component.
-
-## Example
-
-### Default content
-![Default Login Page](./default_component.png)
-
-### With a prepended message
-![Login Page with ](./component_with_prefix.png)
-
-The following `env.config.jsx` will add a message before the login component.
-
-```js
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-// Load environment variables from .env file
-const config = {
-  ...process.env,
-  pluginSlots: {
-    'org.openedx.frontend.authn.login_component.v1': {
-      keepDefault: true,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'test_plugin',
-            type: DIRECT_PLUGIN,
-            priority: 1,
-            RenderWidget: () => (
-              <h2>You're logging into TEST Instance.</h2>
-            )
-          },
-        },
-      ],
-    },
-  },
-};
-
-export default config;
-
-```

src/plugin-slots/LoginComponentSlot/index.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import PropTypes from 'prop-types';
-
-import LoginPage from '../../login/LoginPage';
-
-const LoginComponentSlot = ({
-  institutionLogin,
-  handleInstitutionLogin,
-}) => (
-  <PluginSlot
-    id="org.openedx.frontend.authn.login_component.v1"
-    pluginProps={{
-      isInstitutionLogin: institutionLogin,
-      setInstitutionLogin: handleInstitutionLogin,
-    }}
-  >
-    <LoginPage
-      institutionLogin={institutionLogin}
-      handleInstitutionLogin={handleInstitutionLogin}
-    />
-  </PluginSlot>
-);
-
-LoginComponentSlot.propTypes = {
-  institutionLogin: PropTypes.bool,
-  handleInstitutionLogin: PropTypes.func,
-};
-
-export default LoginComponentSlot;

src/progressive-profiling/ProgressiveProfiling.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 
 import { getConfig, snakeCaseObject } from '@edx/frontend-platform';
-import { identifyAuthenticatedUser, sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { identifyAuthenticatedUser } from '@edx/frontend-platform/analytics';
 import {
   AxiosJwtAuthService,
   configure as configureAuth,
@@ -39,6 +39,13 @@ import {
 import isOneTrustFunctionalCookieEnabled from '../data/oneTrust';
 import { getAllPossibleQueryParams, isHostAvailableInQueryParams } from '../data/utils';
 import { FormFieldRenderer } from '../field-renderer';
+import {
+  trackDisablePostRegistrationRecommendations,
+  trackProgressiveProfilingPageViewed,
+  trackProgressiveProfilingSkipLinkClick,
+  trackProgressiveProfilingSubmitClick,
+  trackProgressiveProfilingSupportLinkCLick,
+} from '../tracking/trackers/progressive-profiling';
 
 const ProgressiveProfiling = (props) => {
   const { formatMessage } = useIntl();
@@ -98,14 +105,13 @@ const ProgressiveProfiling = (props) => {
   useEffect(() => {
     if (authenticatedUser?.userId) {
       identifyAuthenticatedUser(authenticatedUser.userId);
-      sendPageEvent('login_and_registration', 'welcome');
+      trackProgressiveProfilingPageViewed();
     }
   }, [authenticatedUser]);
 
   useEffect(() => {
     if (!enablePostRegistrationRecommendations) {
-      sendTrackEvent(
-        'edx.bi.user.recommendations.not.enabled',
+      trackDisablePostRegistrationRecommendations(
         { functionalCookiesConsent, page: 'authn_recommendations' },
       );
       return;
@@ -149,29 +155,23 @@ const ProgressiveProfiling = (props) => {
       });
     }
     props.saveUserProfile(authenticatedUser.username, snakeCaseObject(payload));
-
-    sendTrackEvent(
-      'edx.bi.welcome.page.submit.clicked',
-      {
-        isGenderSelected: !!values.gender,
-        isYearOfBirthSelected: !!values.year_of_birth,
-        isLevelOfEducationSelected: !!values.level_of_education,
-        isWorkExperienceSelected: !!values.work_experience,
-        host: queryParams?.host || '',
-      },
-    );
+    const eventProperties = {
+      isGenderSelected: !!values.gender,
+      isYearOfBirthSelected: !!values.year_of_birth,
+      isLevelOfEducationSelected: !!values.level_of_education,
+      isWorkExperienceSelected: !!values.work_experience,
+      host: queryParams?.host || '',
+    };
+    trackProgressiveProfilingSubmitClick(eventProperties);
   };
 
   const handleSkip = (e) => {
     e.preventDefault();
     window.history.replaceState(location.state, null, '');
     setShowModal(true);
-    sendTrackEvent(
-      'edx.bi.welcome.page.skip.link.clicked',
-      {
-        host: queryParams?.host || '',
-      },
-    );
+    trackProgressiveProfilingSkipLinkClick({
+      host: queryParams?.host || '',
+    });
   };
 
   const onChangeHandler = (e) => {
@@ -242,7 +242,7 @@ const ProgressiveProfiling = (props) => {
                     destination={getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK}
                     target="_blank"
                     showLaunchIcon={false}
-                    onClick={() => (sendTrackEvent('edx.bi.welcome.page.support.link.clicked'))}
+                    onClick={() => (trackProgressiveProfilingSupportLinkCLick())}
                   >
                     {formatMessage(messages['optional.fields.information.link'])}
                   </Hyperlink>

src/progressive-profiling/tests/ProgressiveProfiling.test.jsx

@@ -1,9 +1,10 @@
+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, IntlProvider } from '@edx/frontend-platform/i18n';
+import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   fireEvent, render, screen,
 } from '@testing-library/react';
@@ -11,6 +12,7 @@ import { MemoryRouter, mockNavigate, useLocation } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
 import {
+  APP_NAME,
   AUTHN_PROGRESSIVE_PROFILING,
   COMPLETE_STATE, DEFAULT_REDIRECT_URL,
   EMBEDDED,
@@ -21,6 +23,7 @@ import {
 import { saveUserProfile } from '../data/actions';
 import ProgressiveProfiling from '../ProgressiveProfiling';
 
+const IntlProgressiveProfilingPage = injectIntl(ProgressiveProfiling);
 const mockStore = configureStore();
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -112,7 +115,7 @@ describe('ProgressiveProfilingTests', () => {
     mergeConfig({
       AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: '',
     });
-    const { queryByRole } = render(reduxWrapper(<ProgressiveProfiling />));
+    const { queryByRole } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
     const button = queryByRole('button', { name: /learn more about how we use this information/i });
 
     expect(button).toBeNull();
@@ -123,7 +126,7 @@ describe('ProgressiveProfilingTests', () => {
       AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
     });
 
-    const { getByText } = render(reduxWrapper(<ProgressiveProfiling />));
+    const { getByText } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
 
     const learnMoreButton = getByText('Learn more about how we use this information.');
 
@@ -133,7 +136,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(<ProgressiveProfiling />));
+    const { getByRole } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
 
     const skipButton = getByRole('button', { name: /skip for now/i });
     fireEvent.click(skipButton);
@@ -141,14 +144,15 @@ describe('ProgressiveProfilingTests', () => {
     const modalContentContainer = document.getElementsByClassName('.pgn__modal-content-container');
 
     expect(modalContentContainer).toBeTruthy();
+    const payload = { host: '', app_name: APP_NAME };
 
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host: '' });
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', payload);
   });
 
   // ******** test event functionality ********
 
   it('should make identify call to segment on progressive profiling page', () => {
-    render(reduxWrapper(<ProgressiveProfiling />));
+    render(reduxWrapper(<IntlProgressiveProfilingPage />));
 
     expect(identifyAuthenticatedUser).toHaveBeenCalledWith(3);
     expect(identifyAuthenticatedUser).toHaveBeenCalled();
@@ -158,12 +162,12 @@ describe('ProgressiveProfilingTests', () => {
     mergeConfig({
       AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
     });
-    render(reduxWrapper(<ProgressiveProfiling />));
+    render(reduxWrapper(<IntlProgressiveProfilingPage />));
 
     const supportLink = screen.getByRole('link', { name: /learn more about how we use this information/i });
     fireEvent.click(supportLink);
 
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.support.link.clicked');
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.support.link.clicked', { app_name: APP_NAME });
   });
 
   it('should set empty host property value for non-embedded experience', () => {
@@ -173,10 +177,11 @@ describe('ProgressiveProfilingTests', () => {
       isLevelOfEducationSelected: false,
       isWorkExperienceSelected: false,
       host: '',
+      app_name: APP_NAME,
     };
     delete window.location;
     window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
-    render(reduxWrapper(<ProgressiveProfiling />));
+    render(reduxWrapper(<IntlProgressiveProfilingPage />));
 
     const nextButton = screen.getByText('Next');
     fireEvent.click(nextButton);
@@ -192,7 +197,7 @@ describe('ProgressiveProfilingTests', () => {
       extended_profile: [{ field_name: 'company', field_value: 'test company' }],
     };
     store.dispatch = jest.fn(store.dispatch);
-    const { getByLabelText, getByText } = render(reduxWrapper(<ProgressiveProfiling />));
+    const { getByLabelText, getByText } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
 
     const genderSelect = getByLabelText('Gender');
     const companyInput = getByLabelText('Company');
@@ -214,7 +219,7 @@ describe('ProgressiveProfilingTests', () => {
       },
     });
 
-    const { container } = render(reduxWrapper(<ProgressiveProfiling />));
+    const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
     const errorElement = container.querySelector('#pp-page-errors');
 
     expect(errorElement).toBeTruthy();
@@ -230,7 +235,7 @@ describe('ProgressiveProfilingTests', () => {
       href: getConfig().BASE_URL,
     };
 
-    render(reduxWrapper(<ProgressiveProfiling />));
+    render(reduxWrapper(<IntlProgressiveProfilingPage />));
     expect(window.location.href).toEqual(DASHBOARD_URL);
   });
 
@@ -248,7 +253,7 @@ describe('ProgressiveProfilingTests', () => {
           success: true,
         },
       });
-      const { container } = render(reduxWrapper(<ProgressiveProfiling />));
+      const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
       const nextButton = container.querySelector('button.btn-brand');
       expect(nextButton.textContent).toEqual('Next');
 
@@ -275,7 +280,7 @@ describe('ProgressiveProfilingTests', () => {
         },
       });
 
-      const { container } = render(reduxWrapper(<ProgressiveProfiling />));
+      const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
       const nextButton = container.querySelector('button.btn-brand');
       expect(nextButton.textContent).toEqual('Submit');
 
@@ -309,12 +314,12 @@ describe('ProgressiveProfilingTests', () => {
         href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
         search: `?host=${host}&variant=${EMBEDDED}`,
       };
-      render(reduxWrapper(<ProgressiveProfiling />));
+      render(reduxWrapper(<IntlProgressiveProfilingPage />));
 
       const skipLinkButton = screen.getByText('Skip for now');
       fireEvent.click(skipLinkButton);
 
-      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host });
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host, app_name: APP_NAME });
     });
 
     it('should show spinner while fetching the optional fields', () => {
@@ -334,7 +339,7 @@ describe('ProgressiveProfilingTests', () => {
         },
       });
 
-      const { container } = render(reduxWrapper(<ProgressiveProfiling />));
+      const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
 
       const tpaSpinnerElement = container.querySelector('#tpa-spinner');
       expect(tpaSpinnerElement).toBeTruthy();
@@ -347,13 +352,14 @@ describe('ProgressiveProfilingTests', () => {
         isLevelOfEducationSelected: false,
         isWorkExperienceSelected: false,
         host: 'http://example.com',
+        app_name: APP_NAME,
       };
       delete window.location;
       window.location = {
         href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
         search: `?host=${host}`,
       };
-      render(reduxWrapper(<ProgressiveProfiling />));
+      render(reduxWrapper(<IntlProgressiveProfilingPage />));
       const submitButton = screen.getByText('Next');
       fireEvent.click(submitButton);
 
@@ -368,7 +374,7 @@ describe('ProgressiveProfilingTests', () => {
         search: `?variant=${EMBEDDED}&host=${host}`,
       };
 
-      const { container } = render(reduxWrapper(<ProgressiveProfiling />));
+      const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
 
       const genderField = container.querySelector('#gender');
       expect(genderField).toBeTruthy();
@@ -389,7 +395,7 @@ describe('ProgressiveProfilingTests', () => {
         },
       });
 
-      render(reduxWrapper(<ProgressiveProfiling />));
+      render(reduxWrapper(<IntlProgressiveProfilingPage />));
       expect(window.location.href).toBe(DASHBOARD_URL);
     });
 
@@ -417,7 +423,7 @@ describe('ProgressiveProfilingTests', () => {
         },
       });
 
-      render(reduxWrapper(<ProgressiveProfiling />));
+      render(reduxWrapper(<IntlProgressiveProfilingPage />));
       const submitButton = screen.getByText('Submit');
       fireEvent.click(submitButton);
       expect(window.location.href).toBe(redirectUrl);

src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx

@@ -1,9 +1,13 @@
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import React from 'react';
+
+import { injectIntl, 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(),
@@ -32,7 +36,7 @@ describe('RecommendationsPageTests', () => {
   });
 
   it('should render recommendations when recommendations are not loading', () => {
-    const { container } = render(reduxWrapper(<SmallLayout {...props} />));
+    const { container } = render(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));
 
     const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
 
@@ -44,7 +48,7 @@ describe('RecommendationsPageTests', () => {
       ...props,
       isLoading: true,
     };
-    const { container } = render(reduxWrapper(<SmallLayout {...props} />));
+    const { container } = render(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));
 
     const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
 

src/recommendations/data/tests/hooks.test.jsx

@@ -1,12 +1,10 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import algoliasearchHelper from 'algoliasearch-helper';
 
 import mockedRecommendedProducts from './mockedData';
+import CreateAlgoliaSearchHelperMock from './test_utils/test_utils';
 import isOneTrustFunctionalCookieEnabled from '../../../data/oneTrust';
 import useAlgoliaRecommendations from '../hooks/useAlgoliaRecommendations';
-import CreateAlgoliaSearchHelperMock from './test_utils/test_utils';
 
 jest.mock('algoliasearch-helper');
 
@@ -19,23 +17,6 @@ jest.mock('../../../data/algolia', () => ({
 
 jest.mock('../algoliaResultsParser', () => jest.fn((course) => course));
 
-const renderHook = (hookCallback) => {
-  const result = {
-    current: null,
-  };
-
-  const Component = () => {
-    const val = hookCallback();
-    React.useEffect(() => {
-      result.current = val;
-    });
-    return null;
-  };
-
-  render(<Component />);
-  return { result };
-};
-
 describe('useAlgoliaRecommendations Tests', () => {
   const MockSearchHelperWithData = new CreateAlgoliaSearchHelperMock(mockedRecommendedProducts);
   const MockSearchHelperWithoutData = new CreateAlgoliaSearchHelperMock();
@@ -47,10 +28,8 @@ describe('useAlgoliaRecommendations Tests', () => {
       () => useAlgoliaRecommendations('PK', 'Introductory'),
     );
 
-    expect(result.current.recommendations)
-      .toEqual(mockedRecommendedProducts);
-    expect(result.current.isLoading)
-      .toBe(false);
+    expect(result.current.recommendations).toEqual(mockedRecommendedProducts);
+    expect(result.current.isLoading).toBe(false);
   });
 
   it('should not fetch recommendations if functional cookies are not set', async () => {
@@ -60,10 +39,8 @@ describe('useAlgoliaRecommendations Tests', () => {
       () => useAlgoliaRecommendations('PK', 'Introductory'),
     );
 
-    expect(result.current.recommendations)
-      .toEqual([]);
-    expect(result.current.isLoading)
-      .toBe(false);
+    expect(result.current.recommendations).toEqual([]);
+    expect(result.current.isLoading).toBe(false);
   });
 
   it('should return empty list if no recommendations returned from Algolia', async () => {
@@ -73,9 +50,7 @@ describe('useAlgoliaRecommendations Tests', () => {
       () => useAlgoliaRecommendations('PK', 'Introductory'),
     );
 
-    expect(result.current.recommendations)
-      .toEqual([]);
-    expect(result.current.isLoading)
-      .toBe(false);
+    expect(result.current.recommendations).toEqual([]);
+    expect(result.current.isLoading).toBe(false);
   });
 });

src/recommendations/tests/RecommendationsList.test.jsx

@@ -1,12 +1,14 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, 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', () => {
@@ -23,7 +25,7 @@ describe('RecommendationsListTests', () => {
       userId: 1234567,
     };
 
-    const { container } = render(reduxWrapper(<RecommendationList {...props} />));
+    const { container } = render(reduxWrapper(<IntlRecommendationList {...props} />));
 
     const recommendationCards = container.querySelectorAll('.recommendation-card');
     expect(recommendationCards.length).toEqual(mockedProductData.length);
@@ -35,7 +37,7 @@ describe('RecommendationsListTests', () => {
       userId: 1234567,
     };
 
-    const { getByText } = render(reduxWrapper(<RecommendationList {...props} />));
+    const { getByText } = render(reduxWrapper(<IntlRecommendationList {...props} />));
 
     const firstFooterContent = getByText('1 Course');
     const secondFooterContent = getByText('2 Courses');

src/recommendations/tests/RecommendationsPage.test.jsx

@@ -1,8 +1,9 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { useMediaQuery } from '@openedx/paragon';
 import { fireEvent, render } from '@testing-library/react';
 import { useLocation } from 'react-router-dom';
@@ -15,6 +16,7 @@ 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', () => ({
@@ -75,7 +77,7 @@ describe('RecommendationsPageTests', () => {
   });
 
   it('should redirect to dashboard if user is not coming from registration workflow', () => {
-    render(reduxWrapper(<RecommendationsPage />));
+    render(reduxWrapper(<IntlRecommendationsPage />));
     expect(window.location.href).toEqual(dashboardUrl);
   });
 
@@ -84,14 +86,14 @@ describe('RecommendationsPageTests', () => {
       recommendations: [],
       isLoading: false,
     });
-    render(reduxWrapper(<RecommendationsPage />));
+    render(reduxWrapper(<IntlRecommendationsPage />));
     expect(window.location.href).toEqual(dashboardUrl);
   });
 
   it('should redirect user if they click "Skip for now" button', () => {
     mockUseLocation();
     jest.useFakeTimers();
-    const { container } = render(reduxWrapper(<RecommendationsPage />));
+    const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
     const skipButton = container.querySelector('.pgn__stateful-btn-state-default');
     fireEvent.click(skipButton);
     jest.advanceTimersByTime(300);
@@ -101,7 +103,7 @@ describe('RecommendationsPageTests', () => {
   it('should display recommendations small layout for small screen', () => {
     mockUseLocation();
     useMediaQuery.mockReturnValue(true);
-    const { container } = render(reduxWrapper(<RecommendationsPage />));
+    const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
 
     const recommendationsSmallLayout = container.querySelector('#recommendations-small-layout');
     const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -113,7 +115,7 @@ describe('RecommendationsPageTests', () => {
   it('should display recommendations large layout for large screen', () => {
     mockUseLocation();
     useMediaQuery.mockReturnValue(false);
-    const { container } = render(reduxWrapper(<RecommendationsPage />));
+    const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
 
     const pgnCollapsible = container.querySelector('.pgn_collapsible');
     const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
@@ -129,7 +131,7 @@ describe('RecommendationsPageTests', () => {
       recommendations: [],
       isLoading: true,
     });
-    const { container } = render(reduxWrapper(<RecommendationsPage />));
+    const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
 
     const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
 
@@ -143,7 +145,7 @@ describe('RecommendationsPageTests', () => {
       recommendations: [],
       isLoading: true,
     });
-    const { container } = render(reduxWrapper(<RecommendationsPage />));
+    const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
 
     const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
 
@@ -158,7 +160,7 @@ describe('RecommendationsPageTests', () => {
     });
 
     useMediaQuery.mockReturnValue(false);
-    render(reduxWrapper(<RecommendationsPage />));
+    render(reduxWrapper(<IntlRecommendationsPage />));
 
     expect(sendTrackEvent).toBeCalled();
     expect(sendTrackEvent).toHaveBeenCalledWith(

src/recommendations/track.js

@@ -15,7 +15,7 @@ const generateProductKey = (product) => (
 export const getProductMapping = (recommendedProducts) => recommendedProducts.map((product) => ({
   product_key: generateProductKey(product),
   product_line: product.cardType,
-  product_source: product.productSource.name,
+  product_source: product?.productSource?.name,
 }));
 
 export const trackRecommendationClick = (product, position, userId) => {
@@ -25,7 +25,7 @@ export const trackRecommendationClick = (product, position, userId) => {
     recommendation_type: product.recommendationType,
     product_key: generateProductKey(product),
     product_line: product.cardType,
-    product_source: product.productSource.name,
+    product_source: product?.productSource?.name,
     user_id: userId,
   });
 

src/register/RegistrationFields/CountryField/CountryField.test.jsx

@@ -1,7 +1,8 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
 import { mergeConfig } from '@edx/frontend-platform';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, 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,6 +10,7 @@ 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', () => {
@@ -80,7 +82,7 @@ describe('CountryField', () => {
     };
 
     it('should run country field validation when onBlur is fired', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
       const countryInput = container.querySelector('input[name="country"]');
 
       fireEvent.blur(countryInput, {
@@ -95,7 +97,7 @@ describe('CountryField', () => {
     });
 
     it('should run country field validation when country name is invalid', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
       const countryInput = container.querySelector('input[name="country"]');
 
       fireEvent.blur(countryInput, {
@@ -110,7 +112,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(<CountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
       const countryInput = container.querySelector('input[name="country"]');
       const dropdownArrowIcon = container.querySelector('.btn-icon.pgn__form-autosuggest__icon-button');
 
@@ -123,7 +125,7 @@ describe('CountryField', () => {
     });
 
     it('should update errors for frontend validations', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
       const countryInput = container.querySelector('input[name="country"]');
 
       fireEvent.blur(countryInput, { target: { value: '', name: 'country' } });
@@ -133,7 +135,7 @@ describe('CountryField', () => {
     });
 
     it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
       const countryInput = container.querySelector('input[name="country"]');
 
       fireEvent.focus(countryInput);
@@ -151,7 +153,7 @@ describe('CountryField', () => {
         },
       });
 
-      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
 
       container.querySelector('input[name="country"]');
       expect(props.onChangeHandler).toHaveBeenCalledTimes(1);
@@ -162,7 +164,7 @@ describe('CountryField', () => {
     });
 
     it('should set option on dropdown menu item click', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
 
       const dropdownButton = container.querySelector('.pgn__form-autosuggest__icon-button');
       fireEvent.click(dropdownButton);
@@ -179,7 +181,7 @@ describe('CountryField', () => {
 
     it('should set value on change', () => {
       const { container } = render(
-        routerWrapper(reduxWrapper(<CountryField {...props} />)),
+        routerWrapper(reduxWrapper(<IntlCountryField {...props} />)),
       );
 
       const countryInput = container.querySelector('input[name="country"]');
@@ -198,7 +200,7 @@ describe('CountryField', () => {
         errorMessage: 'country error message',
       };
 
-      const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
 
       const feedbackElement = container.querySelector('div[feedback-for="country"]');
       expect(feedbackElement).toBeTruthy();

src/register/RegistrationFields/EmailField/EmailField.test.jsx

@@ -1,7 +1,8 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, 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,6 +10,7 @@ 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', () => {
@@ -78,7 +80,7 @@ describe('EmailField', () => {
     };
 
     it('should run email field validation when onBlur is fired', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
 
       const emailInput = container.querySelector('input#email');
       fireEvent.blur(emailInput, { target: { value: '', name: 'email' } });
@@ -90,7 +92,7 @@ describe('EmailField', () => {
     });
 
     it('should update errors for frontend validations', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
 
       const emailInput = container.querySelector('input#email');
       fireEvent.blur(emailInput, { target: { value: 'ab', name: 'email' } });
@@ -103,7 +105,7 @@ describe('EmailField', () => {
     });
 
     it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
 
       const emailInput = container.querySelector('input#email');
       fireEvent.focus(emailInput, { target: { value: '', name: 'email' } });
@@ -117,7 +119,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(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
 
       // Enter a valid email so that frontend validations are passed
       const emailInput = container.querySelector('input#email');
@@ -127,7 +129,7 @@ describe('EmailField', () => {
     });
 
     it('should give email suggestions for common service provider domain typos', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
 
       const emailInput = container.querySelector('input#email');
       fireEvent.blur(emailInput, { target: { value: 'john@yopmail.com', name: 'email' } });
@@ -137,7 +139,7 @@ describe('EmailField', () => {
     });
 
     it('should be able to click on email suggestions and set it as value', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
 
       const emailInput = container.querySelector('input#email');
       fireEvent.blur(emailInput, { target: { value: 'john@yopmail.com', name: 'email' } });
@@ -152,7 +154,7 @@ describe('EmailField', () => {
     });
 
     it('should give error for common top level domain mistakes', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
 
       const emailInput = container.querySelector('input#email');
       fireEvent.blur(emailInput, { target: { value: 'john@gmail.mistake', name: 'email' } });
@@ -162,7 +164,7 @@ describe('EmailField', () => {
     });
 
     it('should give error and suggestion for invalid email', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
 
       const emailInput = container.querySelector('input#email');
       fireEvent.blur(emailInput, { target: { value: 'john@gmail', name: 'email' } });
@@ -192,7 +194,7 @@ describe('EmailField', () => {
 
       store.dispatch = jest.fn(store.dispatch);
 
-      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
 
       const emailInput = container.querySelector('input#email');
       fireEvent.focus(emailInput, { target: { value: 'a@gmail.com', name: 'email' } });
@@ -201,7 +203,7 @@ describe('EmailField', () => {
     });
 
     it('should clear email suggestions when close icon is clicked', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
 
       const emailInput = container.querySelector('input#email');
       fireEvent.blur(emailInput, { target: { value: 'john@gmail.mistake', name: 'email' } });
@@ -222,7 +224,7 @@ describe('EmailField', () => {
         confirmEmailValue: 'confirmEmail@yopmail.com',
       };
 
-      const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
       const emailInput = container.querySelector('input#email');
       fireEvent.blur(emailInput, { target: { value: 'differentEmail@yopmail.com', name: 'email' } });
 

src/register/RegistrationFields/HonorCodeField/HonorCode.test.jsx

@@ -1,9 +1,13 @@
+import React from 'react';
+
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, 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',
@@ -24,7 +28,7 @@ describe('HonorCodeTest', () => {
     const errorMessage = `You must agree to the ${getConfig().SITE_NAME} Honor Code`;
     const { container } = render(
       <IntlProvider locale="en">
-        <HonorCode
+        <IntlHonorCode
           errorMessage={errorMessage}
           onChangeHandler={changeHandler}
         />
@@ -39,7 +43,7 @@ describe('HonorCodeTest', () => {
     const expectedMsg = 'I agree to the Your Platform Name Here\u00a0Honor Codein a new tab';
     const { container } = render(
       <IntlProvider locale="en">
-        <HonorCode onChangeHandler={changeHandler} />
+        <IntlHonorCode onChangeHandler={changeHandler} />
       </IntlProvider>,
     );
 
@@ -52,7 +56,7 @@ describe('HonorCodeTest', () => {
   it('should render Terms of Service and Honor code field', () => {
     const { container } = render(
       <IntlProvider locale="en">
-        <HonorCode fieldType="tos_and_honor_code" onChangeHandler={changeHandler} />
+        <IntlHonorCode 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 '

src/register/RegistrationFields/NameField/NameField.test.jsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, 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';
@@ -8,6 +9,7 @@ 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', () => {
@@ -67,7 +69,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(<NameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
       const nameInput = container.querySelector('input#name');
       fireEvent.blur(nameInput, { target: { value: '', name: 'name' } });
@@ -80,7 +82,7 @@ describe('NameField', () => {
     });
 
     it('should update errors for frontend validations', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
       const nameInput = container.querySelector('input#name');
       fireEvent.blur(nameInput, { target: { value: 'https://invalid-name.com', name: 'name' } });
@@ -93,7 +95,7 @@ describe('NameField', () => {
     });
 
     it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
       const nameInput = container.querySelector('input#name');
       fireEvent.focus(nameInput, { target: { value: '', name: 'name' } });
@@ -111,7 +113,7 @@ describe('NameField', () => {
         ...props,
         shouldFetchUsernameSuggestions: true,
       };
-      const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
       const nameInput = container.querySelector('input#name');
       // Enter a valid name so that frontend validations are passed
@@ -133,7 +135,7 @@ describe('NameField', () => {
       });
 
       store.dispatch = jest.fn(store.dispatch);
-      const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
       const nameInput = container.querySelector('input#name');
 

src/register/RegistrationFields/NameField/validator.js

@@ -11,7 +11,7 @@ export const INVALID_NAME_REGEX = /https?:\/\/(?:[-\w.]|(?:%[\da-fA-F]{2}))*/g;
 
 const validateName = (value, formatMessage) => {
   let fieldError = '';
-  if (!value.trim()) {
+  if (!value || (value && !value.trim())) {
     fieldError = formatMessage(messages['empty.name.field.error']);
   } else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {
     fieldError = formatMessage(messages['name.validation.message']);

src/register/RegistrationFields/TermsOfServiceField/TermsOfService.test.jsx

@@ -1,9 +1,13 @@
+import React from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, 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;
 
@@ -19,7 +23,7 @@ describe('TermsOfServiceTest', () => {
     const errorMessage = `You must agree to the ${getConfig().SITE_NAME} Terms of Service`;
     const { container } = render(
       <IntlProvider locale="en">
-        <TermsOfService errorMessage={errorMessage} onChangeHandler={changeHandler} />
+        <IntlTermsOfService errorMessage={errorMessage} onChangeHandler={changeHandler} />
       </IntlProvider>,
     );
     const errorElement = container.querySelector('.form-text-size');
@@ -29,7 +33,7 @@ describe('TermsOfServiceTest', () => {
   it('should render Terms of Service field', () => {
     const { container } = render(
       <IntlProvider locale="en">
-        <TermsOfService onChangeHandler={changeHandler} />
+        <IntlTermsOfService onChangeHandler={changeHandler} />
       </IntlProvider>,
     );
 
@@ -44,7 +48,7 @@ describe('TermsOfServiceTest', () => {
   it('should change value when Terms of Service field is checked', () => {
     const { container } = render(
       <IntlProvider locale="en">
-        <TermsOfService onChangeHandler={changeHandler} />
+        <IntlTermsOfService onChangeHandler={changeHandler} />
       </IntlProvider>,
     );
     const field = container.querySelector('input#tos');

src/register/RegistrationFields/UsernameField/UsernameField.jsx

@@ -101,7 +101,7 @@ const UsernameField = (props) => {
   };
 
   const suggestedUsernames = () => (
-    <div className={className} role="listbox">
+    <div className={className}>
       <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,9 +112,7 @@ 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>
@@ -125,7 +123,7 @@ const UsernameField = (props) => {
   );
 
   if (usernameSuggestions.length > 0 && errorMessage && value === ' ') {
-    className = 'username-suggestions';
+    className = 'username-suggestions__error';
     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 === ' ') {
@@ -136,15 +134,14 @@ const UsernameField = (props) => {
     suggestedUsernameDiv = suggestedUsernames();
   }
   return (
-    <div className="username__form-group-wrapper">
+    <FormGroup
+      {...props}
+      handleChange={handleOnChange}
+      handleFocus={handleOnFocus}
+      handleBlur={handleOnBlur}
+    >
       {suggestedUsernameDiv}
-      <FormGroup
-        {...props}
-        handleChange={handleOnChange}
-        handleFocus={handleOnFocus}
-        handleBlur={handleOnBlur}
-      />
-    </div>
+    </FormGroup>
   );
 };
 

src/register/RegistrationFields/UsernameField/UsernameField.test.jsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, 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';
@@ -8,6 +9,7 @@ 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', () => {
@@ -71,7 +73,7 @@ describe('UsernameField', () => {
     };
 
     it('should run username field validation when onBlur is fired', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
 
       const usernameField = container.querySelector('input#username');
       fireEvent.blur(usernameField, { target: { value: '', name: 'username' } });
@@ -84,7 +86,7 @@ describe('UsernameField', () => {
     });
 
     it('should update errors for frontend validations', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
 
       const usernameField = container.querySelector('input#username');
       fireEvent.blur(usernameField, { target: { value: 'user#', name: 'username' } });
@@ -97,7 +99,7 @@ describe('UsernameField', () => {
     });
 
     it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
 
       const usernameField = container.querySelector('input#username');
       fireEvent.focus(usernameField, { target: { value: '', name: 'username' } });
@@ -110,7 +112,7 @@ describe('UsernameField', () => {
     });
 
     it('should remove space from field on focus if space exists', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
 
       const usernameField = container.querySelector('input#username');
       fireEvent.focus(usernameField, { target: { value: ' ', name: 'username' } });
@@ -123,7 +125,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(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
 
       const usernameField = container.querySelector('input#username');
       // Enter a valid username so that frontend validations are passed
@@ -133,7 +135,7 @@ describe('UsernameField', () => {
     });
 
     it('should remove space from the start of username on change', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
       const usernameField = container.querySelector('input#username');
       fireEvent.change(usernameField, { target: { value: ' test-user', name: 'username' } });
 
@@ -144,7 +146,7 @@ describe('UsernameField', () => {
     });
 
     it('should not set username if it is more than 30 character long', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
 
       const usernameField = container.querySelector('input#username');
       fireEvent.change(usernameField, { target: { value: 'why_this_is_not_valid_username_', name: 'username' } });
@@ -155,7 +157,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(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
 
       const usernameField = container.querySelector('input#username');
       fireEvent.focus(usernameField);
@@ -177,7 +179,7 @@ describe('UsernameField', () => {
         errorMessage: 'It looks like this username is already taken',
       };
 
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
       const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
       expect(usernameSuggestions.length).toEqual(3);
     });
@@ -196,7 +198,7 @@ describe('UsernameField', () => {
         value: ' ',
       };
 
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
       const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
       expect(usernameSuggestions.length).toEqual(3);
     });
@@ -216,7 +218,7 @@ describe('UsernameField', () => {
         errorMessage: 'username error',
       };
 
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
       const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
       expect(usernameSuggestions.length).toEqual(3);
     });
@@ -230,7 +232,7 @@ describe('UsernameField', () => {
         },
       });
 
-      render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
       expect(props.handleChange).toHaveBeenCalledTimes(1);
       expect(props.handleChange).toHaveBeenCalledWith(
         { target: { name: 'username', value: ' ' } },
@@ -251,7 +253,7 @@ describe('UsernameField', () => {
         value: ' ',
       };
 
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
       const usernameSuggestion = container.querySelector('.username-suggestions--chip');
       fireEvent.click(usernameSuggestion);
       expect(props.handleChange).toHaveBeenCalledTimes(1);
@@ -275,7 +277,7 @@ describe('UsernameField', () => {
         value: ' ',
       };
 
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
       let closeButton = container.querySelector('button.username-suggestions__close__button');
       fireEvent.click(closeButton);
       expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
@@ -285,7 +287,7 @@ describe('UsernameField', () => {
         errorMessage: 'username error',
       };
 
-      render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
       closeButton = container.querySelector('button.username-suggestions__close__button');
       fireEvent.click(closeButton);
       expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
@@ -307,7 +309,7 @@ describe('UsernameField', () => {
 
       store.dispatch = jest.fn(store.dispatch);
 
-      const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />)));
 
       const usernameField = container.querySelector('input#username');
       fireEvent.focus(usernameField, { target: { value: 'test', name: 'username' } });

src/register/RegistrationPage.jsx

@@ -4,7 +4,6 @@ import React, {
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
-import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Form, Spinner, StatefulButton } from '@openedx/paragon';
 import classNames from 'classnames';
@@ -18,6 +17,7 @@ import {
   backupRegistrationFormBegin,
   clearRegistrationBackendError,
   registerNewUser,
+  setAutoGeneratedUsernameExperimentData,
   setEmailSuggestionInStore,
   setUserPipelineDataLoaded,
 } from './data/actions';
@@ -25,6 +25,8 @@ import {
   FORM_SUBMISSION_ERROR,
   TPA_AUTHENTICATION_FAILURE,
 } from './data/constants';
+import { AUTO_GENERATED_USERNAME_REGISTRATION_EXP_VARIATION, NOT_INITIALIZED } from './data/optimizelyExperiment/helper';
+import useAutoGeneratedUsernameExperimentVariation from './data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation';
 import getBackendValidations from './data/selectors';
 import {
   isFormValid, prepareRegistrationPayload,
@@ -41,11 +43,12 @@ import { getThirdPartyAuthContext as getRegistrationDataFromBackend } from '../c
 import EnterpriseSSO from '../common-components/EnterpriseSSO';
 import ThirdPartyAuth from '../common-components/ThirdPartyAuth';
 import {
-  COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
+  APP_NAME, COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
 } from '../data/constants';
 import {
-  getAllPossibleQueryParams, getTpaHint, getTpaProvider, isHostAvailableInQueryParams, setCookie,
+  getAllPossibleQueryParams, getTpaHint, getTpaProvider, isHostAvailableInQueryParams, removeCookie, setCookie,
 } from '../data/utils';
+import { trackRegistrationPageViewed, trackRegistrationSuccess } from '../tracking/trackers/register';
 
 /**
  * Main Registration Page component
@@ -68,6 +71,7 @@ const RegistrationPage = (props) => {
   } = props;
 
   const backedUpFormData = useSelector(state => state.register.registrationFormData);
+  const initExpVariation = useSelector(state => state.register.autoGeneratedUsernameExperimentVariation);
   const registrationError = useSelector(state => state.register.registrationError);
   const registrationErrorCode = registrationError?.errorCode;
   const registrationResult = useSelector(state => state.register.registrationResult);
@@ -103,6 +107,12 @@ const RegistrationPage = (props) => {
     ? formatMessage(messages['create.account.cta.button'], { label: cta })
     : formatMessage(messages['create.account.for.free.button']);
 
+  const autoGeneratedUsernameExpVariation = useAutoGeneratedUsernameExperimentVariation(
+    initExpVariation, registrationEmbedded, tpaHint, currentProvider, thirdPartyAuthApiStatus,
+  );
+
+  const hideUsernameField = flags.autoGeneratedUsernameEnabled
+      || autoGeneratedUsernameExpVariation === AUTO_GENERATED_USERNAME_REGISTRATION_EXP_VARIATION;
   /**
    * Set the userPipelineDetails data in formFields for only first time
    */
@@ -128,7 +138,7 @@ const RegistrationPage = (props) => {
 
   useEffect(() => {
     if (!formStartTime) {
-      sendPageEvent('login_and_registration', 'register');
+      trackRegistrationPageViewed();
       const payload = { ...queryParams, is_register_page: true };
       if (tpaHint) {
         payload.tpa_hint = tpaHint;
@@ -149,8 +159,10 @@ const RegistrationPage = (props) => {
         formFields: { ...formFields },
         errors: { ...errors },
       }));
+      dispatch(setAutoGeneratedUsernameExperimentData(autoGeneratedUsernameExpVariation));
     }
-  }, [shouldBackupState, configurableFormFields, formFields, errors, dispatch, backedUpFormData]);
+  }, [shouldBackupState, configurableFormFields, // eslint-disable-line react-hooks/exhaustive-deps
+    formFields, errors, dispatch, backedUpFormData]);
 
   useEffect(() => {
     if (backendValidations) {
@@ -171,10 +183,15 @@ const RegistrationPage = (props) => {
   useEffect(() => {
     if (registrationResult.success) {
       // This event is used by GTM
-      sendTrackEvent('edx.bi.user.account.registered.client', {});
+      trackRegistrationSuccess();
 
       // This is used by the "User Retention Rate Event" on GTM
       setCookie(getConfig().USER_RETENTION_COOKIE_NAME, true);
+
+      // Remove marketingEmailsOptIn cookie that was set on SSO registration flow
+      removeCookie('marketingEmailsOptIn');
+      // Remove this cookie that was set to capture marketingEmailsOptIn for the onboarding component
+      removeCookie('ssoPipelineRedirectionDone');
     }
   }, [registrationResult]);
 
@@ -210,13 +227,13 @@ const RegistrationPage = (props) => {
 
   const registerUser = () => {
     const totalRegistrationTime = (Date.now() - formStartTime) / 1000;
-    let payload = { ...formFields };
+    let payload = { ...formFields, app_name: APP_NAME };
 
     if (currentProvider) {
       delete payload.password;
       payload.social_auth_provider = currentProvider;
     }
-    if (flags.autoGeneratedUsernameEnabled) {
+    if (hideUsernameField) {
       delete payload.username;
     }
 
@@ -286,106 +303,109 @@ const RegistrationPage = (props) => {
             getConfig().ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN && !!Object.keys(optionalFields.fields).length
           }
         />
-        {autoSubmitRegForm && !errorCode.type ? (
-          <div className="mw-xs mt-5 text-center">
-            <Spinner animation="border" variant="primary" id="tpa-spinner" />
-          </div>
-        ) : (
-          <div
-            className={classNames(
-              'mw-xs mt-3',
-              { 'w-100 m-auto pt-4 main-content': registrationEmbedded },
-            )}
-          >
-            <ThirdPartyAuthAlert
-              currentProvider={currentProvider}
-              platformName={platformName}
-              referrer={REGISTER_PAGE}
-            />
-            <RegistrationFailure
-              errorCode={errorCode.type}
-              failureCount={errorCode.count}
-              context={{ provider: currentProvider, errorMessage: thirdPartyAuthErrorMessage }}
-            />
-            <Form id="registration-form" name="registration-form">
-              <NameField
-                name="name"
-                value={formFields.name}
-                shouldFetchUsernameSuggestions={!formFields.username.trim()}
-                handleChange={handleOnChange}
-                handleErrorChange={handleErrorChange}
-                errorMessage={errors.name}
-                helpText={[formatMessage(messages['help.text.name'])]}
-                floatingLabel={formatMessage(messages['registration.fullname.label'])}
+        {(autoSubmitRegForm && !errorCode.type)
+        || (!autoGeneratedUsernameExpVariation && !(
+          autoGeneratedUsernameExpVariation === NOT_INITIALIZED
+          || registrationEmbedded || !!tpaHint || !!currentProvider))
+          ? (
+            <div className="mw-xs mt-5 text-center">
+              <Spinner animation="border" variant="primary" id="tpa-spinner" />
+            </div>
+          ) : (
+            <div
+              className={classNames(
+                'mw-xs mt-3',
+                { 'w-100 m-auto pt-4 main-content': registrationEmbedded },
+              )}
+            >
+              <ThirdPartyAuthAlert
+                currentProvider={currentProvider}
+                platformName={platformName}
+                referrer={REGISTER_PAGE}
               />
-              <EmailField
-                name="email"
-                value={formFields.email}
-                confirmEmailValue={configurableFormFields?.confirm_email}
-                handleErrorChange={handleErrorChange}
-                handleChange={handleOnChange}
-                errorMessage={errors.email}
-                helpText={[formatMessage(messages['help.text.email'])]}
-                floatingLabel={formatMessage(messages['registration.email.label'])}
+              <RegistrationFailure
+                errorCode={errorCode.type}
+                failureCount={errorCode.count}
+                context={{ provider: currentProvider, errorMessage: thirdPartyAuthErrorMessage }}
               />
-              {!flags.autoGeneratedUsernameEnabled && (
-                <UsernameField
-                  name="username"
-                  spellCheck="false"
-                  value={formFields.username}
+              <Form id="registration-form" name="registration-form">
+                <NameField
+                  name="name"
+                  value={formFields.name}
+                  shouldFetchUsernameSuggestions={!formFields.username.trim()}
                   handleChange={handleOnChange}
                   handleErrorChange={handleErrorChange}
-                  errorMessage={errors.username}
-                  helpText={[formatMessage(messages['help.text.username.1']), formatMessage(messages['help.text.username.2'])]}
-                  floatingLabel={formatMessage(messages['registration.username.label'])}
+                  errorMessage={errors.name}
+                  helpText={[formatMessage(messages['help.text.name'])]}
+                  floatingLabel={formatMessage(messages['registration.fullname.label'])}
                 />
-              )}
-              {!currentProvider && (
-                <PasswordField
-                  name="password"
-                  value={formFields.password}
-                  handleChange={handleOnChange}
+                <EmailField
+                  name="email"
+                  value={formFields.email}
+                  confirmEmailValue={configurableFormFields?.confirm_email}
                   handleErrorChange={handleErrorChange}
-                  errorMessage={errors.password}
-                  floatingLabel={formatMessage(messages['registration.password.label'])}
+                  handleChange={handleOnChange}
+                  errorMessage={errors.email}
+                  helpText={[formatMessage(messages['help.text.email'])]}
+                  floatingLabel={formatMessage(messages['registration.email.label'])}
                 />
-              )}
-              <ConfigurableRegistrationForm
-                email={formFields.email}
-                fieldErrors={errors}
-                formFields={configurableFormFields}
-                setFieldErrors={registrationEmbedded ? setTemporaryErrors : setErrors}
-                setFormFields={setConfigurableFormFields}
-                autoSubmitRegisterForm={autoSubmitRegForm}
-                fieldDescriptions={fieldDescriptions}
-              />
-              <StatefulButton
-                id="register-user"
-                name="register-user"
-                type="submit"
-                variant="brand"
-                className="register-button mt-4 mb-4"
-                state={submitState}
-                labels={{
-                  default: buttonLabel,
-                  pending: '',
-                }}
-                onClick={handleSubmit}
-                onMouseDown={(e) => e.preventDefault()}
-              />
-              {!registrationEmbedded && (
-                <ThirdPartyAuth
-                  currentProvider={currentProvider}
-                  providers={providers}
-                  secondaryProviders={secondaryProviders}
-                  handleInstitutionLogin={handleInstitutionLogin}
-                  thirdPartyAuthApiStatus={thirdPartyAuthApiStatus}
+                {!hideUsernameField && (
+                  <UsernameField
+                    name="username"
+                    spellCheck="false"
+                    value={formFields.username}
+                    handleChange={handleOnChange}
+                    handleErrorChange={handleErrorChange}
+                    errorMessage={errors.username}
+                    helpText={[formatMessage(messages['help.text.username.1']), formatMessage(messages['help.text.username.2'])]}
+                    floatingLabel={formatMessage(messages['registration.username.label'])}
+                  />
+                )}
+                {!currentProvider && (
+                  <PasswordField
+                    name="password"
+                    value={formFields.password}
+                    handleChange={handleOnChange}
+                    handleErrorChange={handleErrorChange}
+                    errorMessage={errors.password}
+                    floatingLabel={formatMessage(messages['registration.password.label'])}
+                  />
+                )}
+                <ConfigurableRegistrationForm
+                  email={formFields.email}
+                  fieldErrors={errors}
+                  formFields={configurableFormFields}
+                  setFieldErrors={registrationEmbedded ? setTemporaryErrors : setErrors}
+                  setFormFields={setConfigurableFormFields}
+                  autoSubmitRegisterForm={autoSubmitRegForm}
+                  fieldDescriptions={fieldDescriptions}
                 />
-              )}
-            </Form>
-          </div>
-        )}
-
+                <StatefulButton
+                  id="register-user"
+                  name="register-user"
+                  type="submit"
+                  variant="brand"
+                  className="register-button mt-4 mb-4"
+                  state={submitState}
+                  labels={{
+                    default: buttonLabel,
+                    pending: '',
+                  }}
+                  onClick={handleSubmit}
+                  onMouseDown={(e) => e.preventDefault()}
+                />
+                {!registrationEmbedded && (
+                  <ThirdPartyAuth
+                    currentProvider={currentProvider}
+                    providers={providers}
+                    secondaryProviders={secondaryProviders}
+                    handleInstitutionLogin={handleInstitutionLogin}
+                    thirdPartyAuthApiStatus={thirdPartyAuthApiStatus}
+                  />
+                )}
+              </Form>
+            </div>
+          )}
       </>
     );
   };

src/register/RegistrationPage.test.jsx

@@ -1,9 +1,10 @@
+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, IntlProvider,
+  configure, getLocale, injectIntl, IntlProvider,
 } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { mockNavigate, BrowserRouter as Router } from 'react-router-dom';
@@ -16,9 +17,12 @@ import {
   setUserPipelineDataLoaded,
 } from './data/actions';
 import { INTERNAL_SERVER_ERROR } from './data/constants';
+import { NOT_INITIALIZED } from './data/optimizelyExperiment/helper';
+import useAutoGeneratedUsernameExperimentVariation
+  from './data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation';
 import RegistrationPage from './RegistrationPage';
 import {
-  AUTHN_PROGRESSIVE_PROFILING, COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
+  APP_NAME, AUTHN_PROGRESSIVE_PROFILING, COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
 } from '../data/constants';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -29,7 +33,9 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
   getLocale: jest.fn(),
 }));
+jest.mock('./data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
 
+const IntlRegistrationPage = injectIntl(RegistrationPage);
 const mockStore = configureStore();
 
 jest.mock('react-router-dom', () => {
@@ -126,6 +132,7 @@ describe('RegistrationPage', () => {
       institutionLogin: false,
     };
     window.location = { search: '' };
+    useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
   });
 
   afterEach(() => {
@@ -183,10 +190,11 @@ describe('RegistrationPage', () => {
         honor_code: true,
         total_registration_time: 0,
         next: '/course/demo-course-url',
+        app_name: APP_NAME,
       };
 
       store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       populateRequiredFields(getByLabelText, payload);
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
@@ -205,6 +213,7 @@ describe('RegistrationPage', () => {
         honor_code: true,
         social_auth_provider: 'Apple',
         total_registration_time: 0,
+        app_name: APP_NAME,
       };
 
       store = mockStore({
@@ -218,7 +227,7 @@ describe('RegistrationPage', () => {
         },
       });
       store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
 
       populateRequiredFields(getByLabelText, formPayload, true);
       const button = container.querySelector('button.btn-brand');
@@ -241,7 +250,7 @@ describe('RegistrationPage', () => {
       };
 
       store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       populateRequiredFields(getByLabelText, formPayload, true);
 
       const button = container.querySelector('button.btn-brand');
@@ -266,7 +275,7 @@ describe('RegistrationPage', () => {
       };
 
       store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       populateRequiredFields(getByLabelText, formPayload, true);
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
@@ -290,10 +299,11 @@ describe('RegistrationPage', () => {
         honor_code: true,
         total_registration_time: 0,
         marketing_emails_opt_in: true,
+        app_name: APP_NAME,
       };
 
       store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       populateRequiredFields(getByLabelText, payload);
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
@@ -316,10 +326,11 @@ describe('RegistrationPage', () => {
         country: 'Pakistan',
         honor_code: true,
         total_registration_time: 0,
+        app_name: APP_NAME,
       };
 
       store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       populateRequiredFields(getByLabelText, payload, false, true);
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
@@ -334,7 +345,7 @@ describe('RegistrationPage', () => {
         ENABLE_AUTO_GENERATED_USERNAME: true,
       });
 
-      const { queryByLabelText } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { queryByLabelText } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       expect(queryByLabelText('Username')).toBeNull();
 
       mergeConfig({
@@ -345,7 +356,7 @@ describe('RegistrationPage', () => {
     it('should not dispatch registerNewUser on empty form Submission', () => {
       store.dispatch = jest.fn(store.dispatch);
 
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
 
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
@@ -356,7 +367,7 @@ describe('RegistrationPage', () => {
     // ******** test registration form validations ********
 
     it('should show error messages for required fields on empty form submission', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
 
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
@@ -384,7 +395,7 @@ describe('RegistrationPage', () => {
           },
         },
       });
-      const { container } = render(routerWrapper(reduxWrapper(<IntlProvider locale="en"><RegistrationPage {...props} /></IntlProvider>)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlProvider locale="en"><IntlRegistrationPage {...props} /></IntlProvider>)));
       const usernameFeedback = container.querySelector('div[feedback-for="username"]');
       const emailFeedback = container.querySelector('div[feedback-for="email"]');
 
@@ -393,7 +404,7 @@ describe('RegistrationPage', () => {
     });
 
     it('should clear error on focus', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
 
       const submitButton = container.querySelector('button.btn-brand');
       fireEvent.click(submitButton);
@@ -422,7 +433,7 @@ describe('RegistrationPage', () => {
       store.dispatch = jest.fn(store.dispatch);
 
       const { container } = render(routerWrapper(reduxWrapper(
-        <RegistrationPage {...props} />,
+        <IntlRegistrationPage {...props} />,
       )));
 
       const emailInput = container.querySelector('input#email');
@@ -433,7 +444,7 @@ describe('RegistrationPage', () => {
     // ******** test form buttons and fields ********
 
     it('should match default button state', () => {
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const button = container.querySelector('button[type="submit"] span');
       expect(button.textContent).toEqual('Create an account for free');
     });
@@ -447,7 +458,7 @@ describe('RegistrationPage', () => {
         },
       });
 
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
 
       const button = container.querySelector('button[type="submit"] span.sr-only');
       expect(button.textContent).toEqual('pending');
@@ -458,7 +469,7 @@ describe('RegistrationPage', () => {
         MARKETING_EMAILS_OPT_IN: 'true',
       });
 
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const checkboxDivs = container.querySelectorAll('div.form-field--checkbox');
       expect(checkboxDivs.length).toEqual(1);
 
@@ -471,7 +482,7 @@ describe('RegistrationPage', () => {
       const buttonLabel = 'Register';
       delete window.location;
       window.location = { href: getConfig().BASE_URL, search: `?cta=${buttonLabel}` };
-      const { container } = render(reduxWrapper(<RegistrationPage {...props} />));
+      const { container } = render(reduxWrapper(<IntlRegistrationPage {...props} />));
       const button = container.querySelector('button[type="submit"] span');
 
       const buttonText = button.textContent;
@@ -490,7 +501,7 @@ describe('RegistrationPage', () => {
         },
       });
 
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       expect(document.cookie).toMatch(`${getConfig().USER_RETENTION_COOKIE_NAME}=true`);
     });
 
@@ -508,7 +519,7 @@ describe('RegistrationPage', () => {
       });
       delete window.location;
       window.location = { href: getConfig().BASE_URL };
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       expect(window.location.href).toBe(dashboardURL);
     });
 
@@ -535,7 +546,7 @@ describe('RegistrationPage', () => {
       });
       delete window.location;
       window.location = { href: getConfig().BASE_URL };
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       expect(window.location.href).toBe(dashboardUrl);
     });
 
@@ -566,7 +577,7 @@ describe('RegistrationPage', () => {
 
       render(reduxWrapper(
         <Router>
-          <RegistrationPage {...props} />
+          <IntlRegistrationPage {...props} />
         </Router>,
       ));
       expect(mockNavigate).toHaveBeenCalledWith(AUTHN_PROGRESSIVE_PROFILING);
@@ -584,13 +595,13 @@ describe('RegistrationPage', () => {
       });
 
       store.dispatch = jest.fn(store.dispatch);
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationFormBegin({ ...registrationFormData }));
     });
 
     it('should send page event when register page is rendered', () => {
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
-      expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register');
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register', { app_name: APP_NAME });
     });
 
     it('should send track event when user has successfully registered', () => {
@@ -607,8 +618,8 @@ describe('RegistrationPage', () => {
 
       delete window.location;
       window.location = { href: getConfig().BASE_URL };
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
-      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.user.account.registered.client', {});
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.user.account.registered.client', { app_name: APP_NAME });
     });
 
     it('should populate form with pipeline user details', () => {
@@ -633,7 +644,7 @@ describe('RegistrationPage', () => {
       store.dispatch = jest.fn(store.dispatch);
       const { container } = render(reduxWrapper(
         <Router>
-          <RegistrationPage {...props} />
+          <IntlRegistrationPage {...props} />
         </Router>,
       ));
 
@@ -656,7 +667,7 @@ describe('RegistrationPage', () => {
         },
       });
 
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...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.',
@@ -683,7 +694,7 @@ describe('RegistrationPage', () => {
         },
       });
 
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
 
       const fullNameInput = container.querySelector('input#name');
       const usernameInput = container.querySelector('input#username');
@@ -729,14 +740,14 @@ describe('RegistrationPage', () => {
           },
         },
       });
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...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(<RegistrationPage {...props} />));
+      const { container } = render(reduxWrapper(<IntlRegistrationPage {...props} />));
 
       const usernameInput = container.querySelector('input#username');
       fireEvent.blur(usernameInput, { target: { value: '', name: 'username' } });
@@ -764,7 +775,7 @@ describe('RegistrationPage', () => {
         },
       });
       const { container } = render(routerWrapper(reduxWrapper(
-        <RegistrationPage {...props} />),
+        <IntlRegistrationPage {...props} />),
       ));
 
       const usernameFeedback = container.querySelector('div[feedback-for="username"]');
@@ -781,7 +792,7 @@ describe('RegistrationPage', () => {
         search: '?host=http://localhost/host-website',
       };
 
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const submitButton = container.querySelector('button.btn-brand');
       fireEvent.click(submitButton);
 
@@ -822,7 +833,7 @@ describe('RegistrationPage', () => {
       });
       store.dispatch = jest.fn(store.dispatch);
 
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const spinnerElement = container.querySelector('#tpa-spinner');
       const registrationFormElement = container.querySelector('#registration-form');
 
@@ -873,7 +884,7 @@ describe('RegistrationPage', () => {
       });
       store.dispatch = jest.fn(store.dispatch);
 
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({
         name: 'John Doe',
         username: 'john_doe',
@@ -881,6 +892,7 @@ describe('RegistrationPage', () => {
         country: 'PK',
         social_auth_provider: 'Apple',
         total_registration_time: 0,
+        app_name: APP_NAME,
       }));
     });
   });

src/register/components/ConfigurableRegistrationForm.jsx

@@ -1,10 +1,12 @@
 import React, { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getCountryList, getLocale, useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 
 import { FormFieldRenderer } from '../../field-renderer';
+import { backupRegistrationFormBegin } from '../data/actions';
 import { FIELDS } from '../data/constants';
 import messages from '../messages';
 import { CountryField, HonorCode, TermsOfService } from '../RegistrationFields';
@@ -32,12 +34,16 @@ const ConfigurableRegistrationForm = (props) => {
     setFormFields,
     autoSubmitRegistrationForm,
   } = props;
+  const dispatch = useDispatch();
 
   /** The reason for adding the entry 'United States' is that Chrome browser aut-fill the form with the 'Unites
   States' instead of 'United States of America' which does not exist in country dropdown list and gets the user
   confused and unable to create an account. So we added the United States entry in the dropdown list.
  */
-  const countryList = useMemo(() => getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]), []);
+
+  const countryList = useMemo(() => (
+    getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]).filter(country => country.code !== 'RU')
+  ), []);
 
   let showTermsOfServiceAndHonorCode = false;
   let showCountryField = false;
@@ -50,6 +56,8 @@ const ConfigurableRegistrationForm = (props) => {
     showMarketingEmailOptInCheckbox: getConfig().MARKETING_EMAILS_OPT_IN,
   };
 
+  const backedUpFormData = useSelector(state => state.register.registrationFormData);
+
   /**
    * If auto submitting register form, we will check tos and honor code fields if they exist for feature parity.
    */
@@ -90,6 +98,16 @@ const ConfigurableRegistrationForm = (props) => {
         setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
       }
     }
+    // setting marketingEmailsOptIn state for SSO authentication flow for register API call
+    if (name === 'marketingEmailsOptIn') {
+      dispatch(backupRegistrationFormBegin({
+        ...backedUpFormData,
+        configurableFormFields: {
+          ...backedUpFormData.configurableFormFields,
+          [name]: value,
+        },
+      }));
+    }
     setFormFields(prevState => ({ ...prevState, [name]: value }));
   };
 

src/register/components/RegistrationFailure.jsx

@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import { windowScrollTo } from '../../data/utils';
 import {
   FORBIDDEN_REQUEST,
-  FORBIDDEN_USERNAME,
   INTERNAL_SERVER_ERROR,
   TPA_AUTHENTICATION_FAILURE,
   TPA_SESSION_EXPIRED,
@@ -49,9 +48,6 @@ 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;

src/register/components/tests/ConfigurableRegistrationForm.test.jsx

@@ -1,15 +1,20 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
 import { mergeConfig } from '@edx/frontend-platform';
 import {
-  getLocale, IntlProvider,
+  getLocale, injectIntl, 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';
 
+import { APP_NAME } from '../../../data/constants';
 import { registerNewUser } from '../../data/actions';
 import { FIELDS } from '../../data/constants';
+import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
+import useAutoGeneratedUsernameExperimentVariation
+  from '../../data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation';
 import RegistrationPage from '../../RegistrationPage';
 import ConfigurableRegistrationForm from '../ConfigurableRegistrationForm';
 
@@ -21,7 +26,10 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
   getLocale: jest.fn(),
 }));
+jest.mock('../../data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
 
+const IntlConfigurableRegistrationForm = injectIntl(ConfigurableRegistrationForm);
+const IntlRegistrationPage = injectIntl(RegistrationPage);
 const mockStore = configureStore();
 
 jest.mock('react-router-dom', () => {
@@ -118,6 +126,7 @@ describe('ConfigurableRegistrationForm', () => {
     };
     window.location = { search: '' };
     getLocale.mockImplementationOnce(() => ('en-us'));
+    useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
   });
 
   afterEach(() => {
@@ -155,7 +164,7 @@ describe('ConfigurableRegistrationForm', () => {
       };
 
       render(routerWrapper(reduxWrapper(
-        <ConfigurableRegistrationForm {...props} />,
+        <IntlConfigurableRegistrationForm {...props} />,
       )));
 
       expect(document.querySelector('#profession')).toBeTruthy();
@@ -185,7 +194,7 @@ describe('ConfigurableRegistrationForm', () => {
       };
 
       render(routerWrapper(reduxWrapper(
-        <ConfigurableRegistrationForm {...props} />,
+        <IntlConfigurableRegistrationForm {...props} />,
       )));
 
       expect(props.setFormFields).toHaveBeenCalledTimes(2);
@@ -212,7 +221,7 @@ describe('ConfigurableRegistrationForm', () => {
           },
         },
       });
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       expect(document.querySelector('#profession')).toBeTruthy();
       expect(document.querySelector('#tos')).toBeTruthy();
     });
@@ -246,7 +255,7 @@ describe('ConfigurableRegistrationForm', () => {
       };
 
       store.dispatch = jest.fn(store.dispatch);
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
 
       populateRequiredFields(getByLabelText, payload);
 
@@ -257,7 +266,7 @@ describe('ConfigurableRegistrationForm', () => {
 
       fireEvent.click(submitButton);
 
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK', app_name: APP_NAME }));
     });
 
     it('should show error messages for required fields on empty form submission', () => {
@@ -281,7 +290,7 @@ describe('ConfigurableRegistrationForm', () => {
         },
       });
 
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const submitButton = container.querySelector('button.btn-brand');
 
       fireEvent.click(submitButton);
@@ -307,7 +316,7 @@ describe('ConfigurableRegistrationForm', () => {
           },
         },
       });
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const countryInput = container.querySelector('input[name="country"]');
       fireEvent.change(countryInput, { target: { value: 'Pak', name: 'country' } });
       fireEvent.blur(countryInput, { target: { value: 'Pak', name: 'country' } });
@@ -332,7 +341,7 @@ describe('ConfigurableRegistrationForm', () => {
           },
         },
       });
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
 
       const emailInput = getByLabelText('Email');
       const confirmEmailInput = getByLabelText('Confirm Email');
@@ -368,7 +377,7 @@ describe('ConfigurableRegistrationForm', () => {
           },
         },
       });
-      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
 
       populateRequiredFields(getByLabelText, formPayload, true);
       fireEvent.change(
@@ -403,7 +412,7 @@ describe('ConfigurableRegistrationForm', () => {
       });
 
       const { getByLabelText, container } = render(
-        routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
       );
 
       const professionInput = getByLabelText('Profession');

src/register/components/tests/RegistrationFailure.test.jsx

@@ -1,8 +1,9 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
 import { mergeConfig } from '@edx/frontend-platform';
 import {
-  configure, getLocale, IntlProvider,
+  configure, getLocale, injectIntl, IntlProvider,
 } from '@edx/frontend-platform/i18n';
 import { render, screen } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -11,6 +12,9 @@ import configureStore from 'redux-mock-store';
 import {
   FORBIDDEN_REQUEST, INTERNAL_SERVER_ERROR, TPA_AUTHENTICATION_FAILURE, TPA_SESSION_EXPIRED,
 } from '../../data/constants';
+import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
+import useAutoGeneratedUsernameExperimentVariation
+  from '../../data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation';
 import RegistrationPage from '../../RegistrationPage';
 import RegistrationFailureMessage from '../RegistrationFailure';
 
@@ -22,7 +26,10 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
   getLocale: jest.fn(),
 }));
+jest.mock('../../data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
 
+const IntlRegistrationPage = injectIntl(RegistrationPage);
+const IntlRegistrationFailure = injectIntl(RegistrationFailureMessage);
 const mockStore = configureStore();
 
 jest.mock('react-router-dom', () => {
@@ -118,6 +125,7 @@ describe('RegistrationFailure', () => {
       institutionLogin: false,
     };
     window.location = { search: '' };
+    useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
   });
 
   afterEach(() => {
@@ -134,7 +142,7 @@ describe('RegistrationFailure', () => {
         failureCount: 0,
       };
 
-      const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));
+      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
 
       const alertHeading = container.querySelectorAll('div.alert-heading');
       expect(alertHeading.length).toEqual(1);
@@ -150,7 +158,7 @@ describe('RegistrationFailure', () => {
         failureCount: 0,
       };
 
-      const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));
+      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
 
       const alertHeading = container.querySelectorAll('div.alert-heading');
       expect(alertHeading.length).toEqual(1);
@@ -169,7 +177,7 @@ describe('RegistrationFailure', () => {
         failureCount: 0,
       };
 
-      const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));
+      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
 
       const alertHeading = container.querySelectorAll('div.alert-heading');
       expect(alertHeading.length).toEqual(1);
@@ -188,7 +196,7 @@ describe('RegistrationFailure', () => {
         failureCount: 0,
       };
 
-      const { container } = render(reduxWrapper(<RegistrationFailureMessage {...props} />));
+      const { container } = render(reduxWrapper(<IntlRegistrationFailure {...props} />));
 
       const alertHeading = container.querySelectorAll('div.alert-heading');
       expect(alertHeading.length).toEqual(1);
@@ -208,7 +216,7 @@ describe('RegistrationFailure', () => {
         },
       });
 
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const validationError = screen.queryByText('An error has occurred. Try refreshing the page, or check your internet connection.');
 
       expect(validationError).not.toBeNull();

src/register/components/tests/ThirdPartyAuth.test.jsx

@@ -1,8 +1,9 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import {
-  configure, getLocale, IntlProvider,
+  configure, getLocale, injectIntl, IntlProvider,
 } from '@edx/frontend-platform/i18n';
 import { fireEvent, render } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -11,6 +12,9 @@ import configureStore from 'redux-mock-store';
 import {
   COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
 } from '../../../data/constants';
+import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
+import useAutoGeneratedUsernameExperimentVariation
+  from '../../data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation';
 import RegistrationPage from '../../RegistrationPage';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -21,7 +25,9 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
   getLocale: jest.fn(),
 }));
+jest.mock('../../data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
 
+const IntlRegistrationPage = injectIntl(RegistrationPage);
 const mockStore = configureStore();
 
 jest.mock('react-router-dom', () => {
@@ -118,6 +124,7 @@ describe('ThirdPartyAuth', () => {
       institutionLogin: false,
     };
     window.location = { search: '' };
+    useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
   });
 
   afterEach(() => {
@@ -155,7 +162,7 @@ describe('ThirdPartyAuth', () => {
       });
 
       const { queryByLabelText } = render(
-        routerWrapper(reduxWrapper(<RegistrationPage {...props} />, { store })),
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />, { store })),
       );
 
       const passwordField = queryByLabelText('Password');
@@ -180,7 +187,7 @@ describe('ThirdPartyAuth', () => {
       window.location = { href: getConfig().BASE_URL.concat(LOGIN_PAGE), search: `?next=/dashboard&tpa_hint=${ssoProvider.id}` };
 
       const { container } = render(
-        routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
       );
       const tpaButton = container.querySelector(`button#${ssoProvider.id}`);
 
@@ -205,7 +212,7 @@ describe('ThirdPartyAuth', () => {
         search: `?next=/dashboard&tpa_hint=${ssoProvider.id}`,
       };
 
-      const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const skeletonElement = container.querySelector('.react-loading-skeleton');
 
       expect(skeletonElement).toBeTruthy();
@@ -229,7 +236,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(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const iconElement = container.querySelector(`button#${ssoProvider.id} div span.pgn__icon`);
 
       expect(iconElement).toBeTruthy();
@@ -252,7 +259,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(<RegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       expect(window.location.href).toEqual(getConfig().LMS_BASE_URL + secondaryProviders.registerUrl);
     });
 
@@ -273,7 +280,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(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const providerButton = container.querySelector(`button#${ssoProvider.id} span#provider-name`);
 
       expect(providerButton.textContent).toEqual(expectedMessage);
@@ -292,7 +299,7 @@ describe('ThirdPartyAuth', () => {
       });
 
       const { container } = render(
-        routerWrapper(reduxWrapper(<RegistrationPage {...props} />, { store })),
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />, { store })),
       );
 
       const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`);
@@ -313,7 +320,7 @@ describe('ThirdPartyAuth', () => {
       });
 
       const { container } = render(
-        routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
       );
 
       const buttonsWithId = container.querySelectorAll(`button#${ssoProvider.id}`);
@@ -327,7 +334,7 @@ describe('ThirdPartyAuth', () => {
         institutionLogin: true,
       };
 
-      const { getByText } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      const { getByText } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const headingElement = getByText('Register with institution/campus credentials');
       expect(headingElement).toBeTruthy();
     });
@@ -352,7 +359,7 @@ describe('ThirdPartyAuth', () => {
       window.location = { href: getConfig().BASE_URL };
 
       const { container } = render(
-        routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
       );
 
       const ssoButton = container.querySelector('button#oa2-apple-id');
@@ -383,7 +390,7 @@ describe('ThirdPartyAuth', () => {
       delete window.location;
       window.location = { href: getConfig().BASE_URL };
 
-      render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl);
     });
 
@@ -404,7 +411,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(<RegistrationPage {...props} />)));
+      const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const tpaAlert = container.querySelector('#tpa-alert p');
       expect(tpaAlert.textContent).toEqual(expectedMessage);
     });
@@ -435,7 +442,7 @@ describe('ThirdPartyAuth', () => {
       store.dispatch = jest.fn(store.dispatch);
 
       const { container } = render(
-        routerWrapper(reduxWrapper(<RegistrationPage {...props} />)),
+        routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)),
       );
 
       const alertHeading = container.querySelector('div.alert-heading');

src/register/data/actions.js

@@ -8,7 +8,7 @@ export const REGISTRATION_CLEAR_BACKEND_ERROR = 'REGISTRATION_CLEAR_BACKEND_ERRO
 export const REGISTER_SET_COUNTRY_CODE = 'REGISTER_SET_COUNTRY_CODE';
 export const REGISTER_SET_USER_PIPELINE_DATA_LOADED = 'REGISTER_SET_USER_PIPELINE_DATA_LOADED';
 export const REGISTER_SET_EMAIL_SUGGESTIONS = 'REGISTER_SET_EMAIL_SUGGESTIONS';
-
+export const REGISTER_SET_AUTO_GENERATED_USERNAME_REGISTRATION_EXP_DATA = 'REGISTER_SET_AUTO_GENERATED_USERNAME_REGISTRATION_EXP_DATA';
 // Backup registration form
 export const backupRegistrationForm = () => ({
   type: BACKUP_REGISTRATION_DATA.BASE,
@@ -83,3 +83,9 @@ export const setUserPipelineDataLoaded = (value) => ({
   type: REGISTER_SET_USER_PIPELINE_DATA_LOADED,
   payload: { value },
 });
+
+// Auto Generated Username Registration Experiment Actions
+export const setAutoGeneratedUsernameExperimentData = (autoGeneratedRegExpVariation) => ({
+  type: REGISTER_SET_AUTO_GENERATED_USERNAME_REGISTRATION_EXP_DATA,
+  payload: { autoGeneratedRegExpVariation },
+});

src/register/data/constants.js

@@ -11,4 +11,3 @@ 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';

src/register/data/optimizelyExperiment/helper.js

@@ -0,0 +1,30 @@
+/**
+ * This file contains data for auto generated username Optimizely experiment
+ */
+import { getConfig } from '@edx/frontend-platform';
+
+export const NOT_INITIALIZED = 'experiment-not-initialized';
+export const CONTROL = 'control-registration-page';
+export const AUTO_GENERATED_USERNAME_REGISTRATION_EXP_VARIATION = 'auto-generated-username-register-page';
+const AUTO_GENERATED_USERNAME_EXP_PAGE = 'targeting_for_auto_generated_username_page';
+
+export function getAutoGeneratedUsernameExperimentVariation() {
+  try {
+    if (window.optimizely
+        && window.optimizely.get('data').experiments[getConfig().AUTO_GENERATED_USERNAME_EXPERIMENT_ID]) {
+      const selectedVariant = window.optimizely.get('state').getVariationMap()[
+        getConfig().AUTO_GENERATED_USERNAME_EXPERIMENT_ID
+      ];
+      return selectedVariant?.name;
+    }
+  } catch (e) { /* empty */ }
+  return '';
+}
+
+export function activateAutoGeneratedUsernameExperiment() {
+  window.optimizely = window.optimizely || [];
+  window.optimizely.push({
+    type: 'page',
+    pageName: AUTO_GENERATED_USERNAME_EXP_PAGE,
+  });
+}

src/register/data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation.js

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+
+import {
+  activateAutoGeneratedUsernameExperiment,
+  getAutoGeneratedUsernameExperimentVariation,
+  NOT_INITIALIZED,
+} from './helper';
+import { COMPLETE_STATE } from '../../../data/constants';
+
+/**
+ * This hook returns activates multi step registration experiment and returns the experiment
+ * variation for the user.
+ */
+const useAutoGeneratedUsernameExperimentVariation = (
+  initExpVariation,
+  registrationEmbedded,
+  tpaHint,
+  currentProvider,
+  thirdPartyAuthApiStatus,
+) => {
+  const [variation, setVariation] = useState(initExpVariation);
+  useEffect(() => {
+    if (initExpVariation || registrationEmbedded || !!tpaHint || !!currentProvider
+        || thirdPartyAuthApiStatus !== COMPLETE_STATE) {
+      return variation;
+    }
+
+    const getVariation = () => {
+      const expVariation = getAutoGeneratedUsernameExperimentVariation();
+      if (expVariation) {
+        setVariation(expVariation);
+      } else {
+        // This is to handle the case when user dont get variation for some reason, the register page
+        // shows unlimited spinner.
+        setVariation(NOT_INITIALIZED);
+      }
+    };
+
+    activateAutoGeneratedUsernameExperiment();
+
+    const timer = setTimeout(getVariation, 300);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [ // eslint-disable-line react-hooks/exhaustive-deps
+    initExpVariation, currentProvider, registrationEmbedded, thirdPartyAuthApiStatus, tpaHint,
+  ]);
+
+  return variation;
+};
+
+export default useAutoGeneratedUsernameExperimentVariation;

src/register/data/reducers.js

@@ -3,6 +3,7 @@ import {
   REGISTER_CLEAR_USERNAME_SUGGESTIONS,
   REGISTER_FORM_VALIDATIONS,
   REGISTER_NEW_USER,
+  REGISTER_SET_AUTO_GENERATED_USERNAME_REGISTRATION_EXP_DATA,
   REGISTER_SET_COUNTRY_CODE,
   REGISTER_SET_EMAIL_SUGGESTIONS,
   REGISTER_SET_USER_PIPELINE_DATA_LOADED,
@@ -39,6 +40,7 @@ export const defaultState = {
   usernameSuggestions: [],
   validationApiRateLimited: false,
   shouldBackupState: false,
+  autoGeneratedUsernameExperimentVariation: '',
 };
 
 const reducer = (state = defaultState, action = {}) => {
@@ -55,6 +57,12 @@ const reducer = (state = defaultState, action = {}) => {
         registrationFormData: { ...action.payload },
         userPipelineDataLoaded: state.userPipelineDataLoaded,
       };
+    case REGISTER_SET_AUTO_GENERATED_USERNAME_REGISTRATION_EXP_DATA: {
+      return {
+        ...state,
+        autoGeneratedUsernameExperimentVariation: action.payload.autoGeneratedRegExpVariation,
+      };
+    }
     case REGISTER_NEW_USER.BEGIN:
       return {
         ...state,

src/register/data/sagas.js

@@ -1,14 +1,11 @@
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError, logInfo } from '@edx/frontend-platform/logging';
-import {
-  call, put, race, take, takeEvery,
-} from 'redux-saga/effects';
+import { call, put, takeEvery } from 'redux-saga/effects';
 
 import {
   fetchRealtimeValidationsBegin,
   fetchRealtimeValidationsFailure,
   fetchRealtimeValidationsSuccess,
-  REGISTER_CLEAR_USERNAME_SUGGESTIONS,
   REGISTER_FORM_VALIDATIONS,
   REGISTER_NEW_USER,
   registerNewUserBegin,
@@ -44,15 +41,9 @@ export function* handleNewUserRegistration(action) {
 export function* fetchRealtimeValidations(action) {
   try {
     yield put(fetchRealtimeValidationsBegin());
+    const { fieldValidations } = yield call(getFieldsValidations, action.payload.formPayload);
 
-    const { response } = yield race({
-      response: call(getFieldsValidations, action.payload.formPayload),
-      cancel: take(REGISTER_CLEAR_USERNAME_SUGGESTIONS),
-    });
-
-    if (response) {
-      yield put(fetchRealtimeValidationsSuccess(camelCaseObject(response.fieldValidations)));
-    }
+    yield put(fetchRealtimeValidationsSuccess(camelCaseObject(fieldValidations)));
   } catch (e) {
     if (e.response && e.response.status === 403) {
       yield put(fetchRealtimeValidationsFailure());

src/register/data/tests/reducers.test.js

@@ -38,6 +38,7 @@ describe('Registration Reducer Tests', () => {
     usernameSuggestions: [],
     validationApiRateLimited: false,
     shouldBackupState: false,
+    autoGeneratedUsernameExperimentVariation: '',
   };
 
   it('should return the initial state', () => {

src/register/data/utils.js

@@ -43,39 +43,31 @@ export const isFormValid = (
   Object.keys(payload).forEach(key => {
     switch (key) {
     case 'name':
-      if (!fieldErrors.name) {
-        fieldErrors.name = validateName(payload.name, formatMessage);
-      }
+      fieldErrors.name = validateName(payload.name, formatMessage);
       if (fieldErrors.name) { isValid = false; }
       break;
     case 'email': {
-      if (!fieldErrors.email) {
-        const {
-          fieldError, confirmEmailError, suggestion,
-        } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
-        if (fieldError) {
-          fieldErrors.email = fieldError;
-          isValid = false;
-        }
-        if (confirmEmailError) {
-          fieldErrors.confirm_email = confirmEmailError;
-          isValid = false;
-        }
-        emailSuggestion = suggestion;
+      const {
+        fieldError, confirmEmailError, suggestion,
+      } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
+      if (fieldError) {
+        fieldErrors.email = fieldError;
+        isValid = false;
       }
+      if (confirmEmailError) {
+        fieldErrors.confirm_email = confirmEmailError;
+        isValid = false;
+      }
+      emailSuggestion = suggestion;
       if (fieldErrors.email) { isValid = false; }
       break;
     }
     case 'username':
-      if (!fieldErrors.username) {
-        fieldErrors.username = validateUsername(payload.username, formatMessage);
-      }
+      fieldErrors.username = validateUsername(payload.username, formatMessage);
       if (fieldErrors.username) { isValid = false; }
       break;
     case 'password':
-      if (!fieldErrors.password) {
-        fieldErrors.password = validatePasswordField(payload.password, formatMessage);
-      }
+      fieldErrors.password = validatePasswordField(payload.password, formatMessage);
       if (fieldErrors.password) { isValid = false; }
       break;
     default:

src/register/messages.jsx

@@ -162,11 +162,6 @@ 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. '

src/reset-password/ResetPasswordPage.jsx

@@ -18,7 +18,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { resetPassword, validateToken } from './data/actions';
 import {
-  FORM_SUBMISSION_ERROR, PASSWORD_RESET_ERROR, PASSWORD_VALIDATION_ERROR, TOKEN_STATE,
+  FORM_SUBMISSION_ERROR, PASSWORD_RESET_ERROR, PASSWORD_VALIDATION_ERROR, SUCCESS, TOKEN_STATE,
 } from './data/constants';
 import { resetPasswordResultSelector } from './data/selectors';
 import { validatePassword } from './data/service';
@@ -30,6 +30,7 @@ import {
   LETTER_REGEX, LOGIN_PAGE, NUMBER_REGEX, RESET_PAGE,
 } from '../data/constants';
 import { getAllPossibleQueryParams, updatePathWithQueryParams, windowScrollTo } from '../data/utils';
+import { trackPasswordResetSuccess, trackResetPasswordPageViewed } from '../tracking/trackers/reset-password';
 
 const ResetPasswordPage = (props) => {
   const { formatMessage } = useIntl();
@@ -42,6 +43,15 @@ const ResetPasswordPage = (props) => {
   const { token } = useParams();
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (props.status === TOKEN_STATE.VALID) {
+      trackResetPasswordPageViewed();
+    }
+    if (props.status === SUCCESS) {
+      trackPasswordResetSuccess();
+    }
+  }, [props.status]);
+
   useEffect(() => {
     if (props.status !== TOKEN_STATE.PENDING && props.status !== PASSWORD_RESET_ERROR) {
       setErrorCode(props.status);
@@ -139,7 +149,7 @@ const ResetPasswordPage = (props) => {
     }
   } else if (props.status === PASSWORD_RESET_ERROR) {
     navigate(updatePathWithQueryParams(RESET_PAGE));
-  } else if (props.status === 'success') {
+  } else if (props.status === SUCCESS) {
     navigate(updatePathWithQueryParams(LOGIN_PAGE));
   } else {
     return (

src/reset-password/tests/ResetPasswordPage.test.jsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { Provider } from 'react-redux';
 
-import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
+import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   fireEvent, render, screen,
 } from '@testing-library/react';
@@ -18,6 +19,11 @@ import ResetPasswordPage from '../ResetPasswordPage';
 const mockedNavigator = jest.fn();
 const token = '1c-bmjdkc-5e60e084cf8113048ca7';
 
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendPageEvent: jest.fn(),
+  sendTrackEvent: jest.fn(),
+}));
+
 jest.mock('@edx/frontend-platform/auth');
 jest.mock('react-router-dom', () => ({
   ...(jest.requireActual('react-router-dom')),
@@ -25,6 +31,7 @@ jest.mock('react-router-dom', () => ({
   useParams: jest.fn().mockReturnValue({ token }),
 }));
 
+const IntlResetPasswordPage = injectIntl(ResetPasswordPage);
 const mockStore = configureStore();
 
 describe('ResetPasswordPage', () => {
@@ -93,7 +100,7 @@ describe('ResetPasswordPage', () => {
     }));
 
     store.dispatch = jest.fn(store.dispatch);
-    render(reduxWrapper(<ResetPasswordPage {...props} />));
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
     const newPasswordInput = screen.getByLabelText('New password');
     const confirmPasswordInput = screen.getByLabelText('Confirm password');
 
@@ -118,7 +125,7 @@ describe('ResetPasswordPage', () => {
         status: TOKEN_STATE.VALID,
       },
     });
-    render(reduxWrapper(<ResetPasswordPage {...props} />));
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
     const resetPasswordButton = screen.getByRole('button', { name: /Reset password/i, id: 'submit-new-password' });
     fireEvent.click(resetPasswordButton);
 
@@ -142,7 +149,7 @@ describe('ResetPasswordPage', () => {
         status: TOKEN_STATE.VALID,
       },
     });
-    render(reduxWrapper(<ResetPasswordPage {...props} />));
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
     const confirmPasswordInput = screen.getByLabelText('Confirm password');
     fireEvent.change(confirmPasswordInput, { target: { value: 'password-mismatch' } });
 
@@ -161,7 +168,7 @@ describe('ResetPasswordPage', () => {
       },
     });
 
-    const { container } = render(reduxWrapper(<ResetPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
 
     const alertElements = container.querySelectorAll('.alert-danger');
     const rateLimitError = alertElements[0].textContent;
@@ -177,7 +184,7 @@ describe('ResetPasswordPage', () => {
       },
     });
 
-    const { container } = render(reduxWrapper(<ResetPasswordPage {...props} />));
+    const { container } = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
     const alertElements = container.querySelectorAll('.alert-danger');
     const internalServerError = alertElements[0].textContent;
     expect(internalServerError).toBe(validationMessage);
@@ -186,7 +193,7 @@ describe('ResetPasswordPage', () => {
   // ******** miscellaneous tests ********
 
   it('should call validation on password field when blur event fires', () => {
-    const resetPasswordPage = render(reduxWrapper(<ResetPasswordPage {...props} />));
+    const resetPasswordPage = render(reduxWrapper(<IntlResetPasswordPage {...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';
@@ -205,7 +212,7 @@ describe('ResetPasswordPage', () => {
       TOKEN_STATE.PENDING,
     };
 
-    render(reduxWrapper(<ResetPasswordPage {...props} />));
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
 
     expect(store.dispatch).toHaveBeenCalledWith(validateToken(token));
   });
@@ -214,19 +221,19 @@ describe('ResetPasswordPage', () => {
       status:
       PASSWORD_RESET_ERROR,
     };
-    render(reduxWrapper(<ResetPasswordPage {...props} />));
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
     expect(mockedNavigator).toHaveBeenCalledWith(RESET_PAGE);
   });
   it('should redirect the user to root url of the application ', async () => {
     props = {
       status: SUCCESS,
     };
-    render(reduxWrapper(<ResetPasswordPage {...props} />));
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
     expect(mockedNavigator).toHaveBeenCalledWith(LOGIN_PAGE);
   });
 
   it('shows spinner during token validation', () => {
-    render(reduxWrapper(<ResetPasswordPage {...props} />));
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
     const spinnerElement = document.getElementsByClassName('div.spinner-header');
 
     expect(spinnerElement).toBeTruthy();
@@ -235,7 +242,7 @@ describe('ResetPasswordPage', () => {
   // ******** redirection tests ********
 
   it('by clicking on sign in tab should redirect onto login page', async () => {
-    const { getByText } = render(reduxWrapper(<ResetPasswordPage {...props} />));
+    const { getByText } = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
 
     const signInTab = getByText('Sign in');
 

src/sass/_base_component.scss

@@ -2,19 +2,19 @@
 .layout {
   display: flex;
 
-  @media (--pgn-size-breakpoint-max-width-lg) {
+  @include media-breakpoint-down('lg') {
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
 
-  @media (--pgn-size-breakpoint-min-width-xl) {
+  @include media-breakpoint-up('xl') {
     justify-content: space-between;
   }
 }
 
 .content {
-  @media (--pgn-size-breakpoint-min-width-xl) {
+  @include media-breakpoint-up('xl') {
     display: flex;
     justify-content: center;
     width: 50vw;
@@ -47,7 +47,7 @@
   font-weight: 700;
   line-height: 1;
 
-  @media (--pgn-size-breakpoint-max-width-xl) {
+  @include media-breakpoint-down('xl') {
     font-size: 3.75rem;
   }
 
@@ -60,7 +60,7 @@
   margin-bottom: 0.5rem;
   font-weight: 700;
 
-  @media (-pgn-size-breakpoint-max-width-xl) {
+  @include media-breakpoint-down('xl') {
     font-size: 1.375rem;
     line-height: 1.75rem;
   }
@@ -72,7 +72,7 @@
 }
 
 .large-screen-left-container {
-  @media (-pgn-size-breakpoint-max-width-xl) {
+  @include media-breakpoint-down('xl') {
     flex: 0 0 25%;
     max-width: 25%;
   }
@@ -87,43 +87,43 @@
   height: 0.25rem;
   background-image: linear-gradient(
     102.02deg,
-    var(--pgn-color-brand-700),
-    var(--pgn-color-brand-700) 20%,
-    var(--pgn-color-brand-base) 20%,
+    $brand-700,
+    $brand-700 20%,
+    $brand 20%,
   );
   background-repeat: no-repeat;
 }
 
-@media (--pgn-size-breakpoint-min-width-md) and (--pgn-size-breakpoint-max-width-md) {
+@include media-breakpoint-only('md') {
   .medium-screen-top-stripe {
     display: flex;
     height: 0.5rem;
     background-image: linear-gradient(
       102.02deg,
-      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%,
+      $brand-700,
+      $brand-700 10%,
+      $brand 10%,
+      $brand 90%,
+      $primary-700 90%,
+      $primary-700 100%,
     );
     background-repeat: no-repeat;
   }
 }
 
-@media (--pgn-size-breakpoint-min-width-lg) and (--pgn-size-breakpoint-max-width-lg){
+@include media-breakpoint-only('lg') {
   .medium-screen-top-stripe {
     display: flex;
     height: 0.5rem;
     background-image: linear-gradient(
       102.02deg,
-      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%
+      $brand-700 10%,
+      $brand 10%,
+      $brand 65%,
+      $primary-700 65%,
+      $primary-700 75%,
+      $accent-a 75%,
+      $accent-a 75%
     );
     background-repeat: no-repeat;
   }
@@ -131,20 +131,20 @@
 
 .extra-large-screen-top-stripe { display: none; }
 
-@media (--pgn-size-breakpoint-min-width-xl) {
+@include media-breakpoint-up('xl') {
  .extra-large-screen-top-stripe {
    display: flex;
    height: 0.5rem;
    background-image: linear-gradient(
      102.02deg,
-     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%,
+     $brand-700 10%,
+     $brand 10%,
+     $brand 45%,
+     $primary-700 45%,
+     $primary-700 55%,
+     $accent-a 55%,
+     $accent-a 75%,
+     $info-200 75%,
   );
    background-repeat: no-repeat;
  }
@@ -152,24 +152,24 @@
 
 .large-screen-svg-light,
 .large-screen-svg-primary {
-  fill: var(--pgn-color-light-200);
+  fill: $light-200;
   overflow: hidden;
   position: absolute;
 }
 
 .large-screen-svg-primary {
-  fill: var(--pgn-color-primary-400);
+  fill: $primary-400;
 }
 
 .medium-screen-svg-light,
 .medium-screen-svg-primary {
-  fill: var(--pgn-color-light-200);
+  fill: $light-200;
   overflow: inherit;
   position: absolute;
 }
 
 .medium-screen-svg-primary {
-  fill: var(--pgn-color-primary-400);
+  fill: $primary-400;
 }
 
 [dir=rtl]{
@@ -184,20 +184,20 @@
 .small-yellow-line {
   width: 80px;
   height: 0;
-  border: 2px solid var(--pgn-color-accent-b);
+  border: 2px solid $accent-b;
   transform: rotate(102.02deg);
 }
 
 .medium-yellow-line {
   width: 120px;
   height: 0;
-  border: 3px solid var(--pgn-color-accent-b);
+  border: 3px solid $accent-b;
   transform: rotate(102.02deg);
 }
 
 .large-yellow-line {
   width: 240px;
   height: 0;
-  border: 3px solid var(--pgn-color-accent-b);
+  border: 3px solid $accent-b;
   transform: rotate(102.02deg);
 }

src/sass/_progressive_profiling_page.scss

@@ -11,7 +11,7 @@
     margin-bottom: 0.5rem;
     font-weight: 700;
 
-    @media (--pgn-size-breakpoint-max-width-md) {
+    @include media-breakpoint-down('md') {
       line-height: 1.5rem;
       font-size: 1.125rem;
     }

src/sass/_recommendations_card_base.scss

@@ -64,52 +64,52 @@ $header-height: 104px;
   }
 
   &.light {
-    background-color: var(--pgn-color-white);
+    background-color: $white;
 
     .title {
-      color: var(--pgn-color-black);
+      color: $black;
     }
 
     .subtitle {
-      color: var(--pgn-color-gray-700);
+      color: $gray-700;
     }
 
     .badge {
-      background-color: var(--pgn-color-light-500);
-      color: var(--pgn-color-black);
+      background-color: $light-500;
+      color: $black;
     }
 
     .footer-content {
-      color: var(--pgn-color-gray-700);
+      color: $gray-700;
     }
   }
 
   &.dark {
-    background-color: var(--pgn-color-primary-500);
+    background-color: $primary-500;
 
     .pgn__card-header-title-md {
-      color: var(--pgn-color-white);
+      color: $white;
     }
 
     .pgn__card-header-subtitle-md {
-      color: var(--pgn-color-light-200);
+      color: $light-200;
     }
 
     .title {
-      color: var(--pgn-color-white);
+      color: $white;
     }
 
     .subtitle {
-      color: var(--pgn-color-light-200);
+      color: $light-200;
     }
 
     .badge {
-      background-color: var(--pgn-color-dark-200);
-      color: var(--pgn-color-white);
+      background-color: $dark-200;
+      color: $white;
     }
 
     .footer-content {
-      color: var(--pgn-color-light-200);
+      color: $light-200;
     }
   }
 }

src/sass/_recommendations_page.scss

@@ -3,7 +3,7 @@ $card-gap: 24px;
 .recommendations-container__card-list {
   gap: $card-gap $card-gap;
 
-  @media (-pgn-size-breakpoint-max-width-sm) {
+  @include media-breakpoint-down(sm) {
     margin-bottom: 0 !important;
   }
 
@@ -11,15 +11,15 @@ $card-gap: 24px;
     flex: 0 1 100%;
     cursor: pointer;
 
-    @media (--pgn-size-breakpoint-min-width-sm) {
+    @include media-breakpoint-up(sm) {
       flex: 0 1 calc(50% - #{$card-gap - 12});
     }
 
-    @media (--pgn-size-breakpoint-min-width-md) {
+    @include media-breakpoint-up(md) {
       flex: 0 1 calc(33.333% - #{$card-gap - 8});
     }
 
-    @media (--pgn-size-breakpoint-min-width-lg) {
+    @include media-breakpoint-up(lg) {
       flex: 0 1 calc(25% - #{$card-gap - 6});
     }
   }

src/sass/_registration.scss

@@ -23,21 +23,21 @@
   }
 
   .alert-link  {
-    color: var(--pgn-color-primary-base) !important;
+    color: $primary !important;
 
     &:hover {
       text-decoration: underline;
-      color: var(--pgn-color-info-700) !important;
+      color: $info-700 !important;
     }
   }
 }
 
 .email-suggestion-alert-warning {
-  color: var(--pgn-color-info-500) !important;
+  color: $info-500 !important;
 
   &:hover {
     text-decoration: underline;
-    color: var(--pgn-color-info-700) !important;
+    color: $info-700 !important;
   }
 }
 
@@ -56,7 +56,7 @@
   line-height: 24px;
   font-size: 12px;
   font-weight: normal;
-  color: var(--pgn-color-primary-700);
+  color: $primary-700;
 }
 
 .username-suggestion--label {
@@ -65,15 +65,10 @@
   margin-right: 0.25rem;
 }
 
-.username__form-group-wrapper {
-  position: relative;
-}
-
 .username-suggestions {
-  position: absolute;
-  inset: 0;
-  padding-left: 15px;
-  z-index: 100;
+  position: relative;
+  margin-top: -2.5rem;
+  margin-left: 15px;
 }
 
 .username-suggestions__close__button {
@@ -81,6 +76,13 @@
   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;
@@ -97,7 +99,7 @@
   }
 }
 
-@media (--pgn-size-breakpoint-max-width-sm) {
+@media (max-width: map-get($grid-breakpoints, "sm")) {
   .username-scroll-suggested--form-field {
     width: 15rem;
   }

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 {
-  padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important;
+  @extend .pt-4;
   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: var(--pgn-color-info-300) !important;
+  color: $info-300 !important;
 
   &:hover {
-    color: var(--pgn-color-info-500) !important;
+    color: $info-500 !important;
   }
 }
 
 .form-control {
-  background-color: var(--pgn-color-white) !important;
+  background-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: var(--pgn-color-white);
-  border: 1px solid var(--pgn-color-primary-base);
+  background-color: $white;
+  border: 1px solid $primary;
   width: 224px;
   height: 36px;
-  color: var(--pgn-color-primary-base);
+  color: $primary;
 
   .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: var(--pgn-color-primary-base);
-  color: var(--pgn-color-white);
+  background-color: $primary;
+  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: var(--pgn-color-white);
+  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: var(--pgn-color-white);
+    color: $white;
   }
 }
 
 .btn-oa2-google-oauth2 {
-  color: var(--pgn-color-white);
+  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: var(--pgn-color-white);
+    color: $white;
   }
 }
 
 .btn-oa2-apple-id {
-  color: var(--pgn-color-white);
+  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: var(--pgn-color-white);
+    color: $white;
   }
 }
 
 .btn-oa2-azuread-oauth2 {
-  color: var(--pgn-color-white);
+  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: var(--pgn-color-white);
+    color: $white;
   }
 }
 
@@ -214,8 +214,9 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .institute-icon {
-  margin: calc(var(--pgn-spacing-spacer-base) * 0.25) !important;
-  color: var(--pgn-color-gray-base) !important;
+  @extend .mr-1;
+  @extend .text-gray;
+
   display: inline-block;
   margin-bottom: 0.25rem;
   height: 18px;
@@ -231,7 +232,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
 }
 
 .invalid-feedback {
-  color: var(--pgn-color-red);
+  color: $red;
 }
 
 .full-vertical-height {
@@ -289,22 +290,22 @@ select.form-control {
 
 #password-requirement-left {
   opacity: 1;
-  font-size: var(--pgn-typography-font-size-xs) !important;
+  @extend .x-small;
   filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
   right: 0.2rem !important;
   .tooltip-inner {
-    background: var(--pgn-color-white);
+    background: $white;
     display: block;
-    color: var(--pgn-color-gray-500);
+    color: $gray-500;
   }
   .arrow::before {
-    border-left-color: var(--pgn-color-white);
+    border-left-color: $white;
   }
 }
 
 #password-requirement-top {
-  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;
+  @extend .x-small;
+  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
   opacity: 1;
   width: 90%;
   bottom: 10px !important;
@@ -313,30 +314,30 @@ select.form-control {
 
   .tooltip-inner {
     min-width: 464px !important;
-    background: var(--pgn-color-white);
+    background: $white;
     display: block;
-    color: var(--pgn-color-gray-500);
+    color: $gray-500;
   }
   .arrow::before {
-    border-top-color: var(--pgn-color-white);
+    border-top-color: $white;
   }
 
 }
 
 .yellow-border {
-  border: 2px solid var(--pgn-color-accent-b);
+  border: 2px solid $accent-b;
 }
 
 .institutions__heading {
-  color: var(--pgn-color-primary-700);
+  color: $primary-700;
 }
 
 .logistration-button {
-  color: var(--pgn-color-gray-700);
+  color: $gray-700;
 }
 
 .logistration-button:hover{
-  color: var(--pgn-color-gray-700);
+  color: $gray-700;
   text-decoration: none;
 }
 
@@ -351,7 +352,7 @@ select.form-control {
   width: 2.3rem;
 }
 .has-floating-label {
-  color: var(--pgn-color-gray-500);
+  color: $gray-500;
 }
 
 .pgn__form-control-floating-label .pgn__form-control-floating-label-content {
@@ -365,7 +366,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: var(--pgn-color-primary-700);
+    color: $primary-700;
 }
 
 .form-group__form-field .form-control:not([value='']):not(:focus) ~
@@ -443,14 +444,14 @@ select.form-control {
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--pgn-color-light-200);
+  background-color: $light-200;
 }
 
 .institutions--provider-link {
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 1.5rem;
-  color: var(--pgn-color-primary-700)
+  color: $primary-700
 }
 
 .pgn__form-control-decorator-trailing {

src/tracking/trackers/forgotpassword.js

@@ -0,0 +1,22 @@
+import { createEventTracker, createPageEventTracker } from '../../data/segment/utils';
+
+export const eventNames = {
+  loginAndRegistration: 'login_and_registration',
+  forgotPasswordPageViewed: 'edx.bi.password_reset_form.viewed',
+};
+
+export const categories = {
+  userEngagement: 'user-engagement',
+};
+
+// Event tracker for forgot password page viewed
+export const trackForgotPasswordPageViewed = () => createEventTracker(
+  eventNames.forgotPasswordPageViewed,
+  {
+    category: categories.userEngagement,
+  },
+)();
+
+export const trackForgotPasswordPageEvent = () => {
+  createPageEventTracker(eventNames.loginAndRegistration, 'forgot-password')();
+};

src/tracking/trackers/login.js

@@ -0,0 +1,29 @@
+import { createEventTracker, createPageEventTracker } from '../../data/segment/utils';
+
+export const eventNames = {
+  forgotPasswordLinkClicked: 'edx.bi.password-reset_form.toggled',
+  loginAndRegistration: 'login_and_registration',
+  registerFormToggled: 'edx.bi.register_form.toggled',
+  loginSuccess: 'edx.bi.user.account.authenticated.client',
+};
+
+export const categories = {
+  userEngagement: 'user-engagement',
+};
+
+// Event tracker for Forgot Password link click
+export const trackForgotPasswordLinkClick = () => createEventTracker(
+  eventNames.forgotPasswordLinkClicked,
+  { category: categories.userEngagement },
+)();
+
+// Tracks the login page event.
+export const trackLoginPageViewed = () => {
+  createPageEventTracker(eventNames.loginAndRegistration, 'login')();
+};
+
+// Tracks the login sucess event.
+export const trackLoginSuccess = () => createEventTracker(
+  eventNames.loginSuccess,
+  {},
+)();

src/tracking/trackers/progressive-profiling.js

@@ -0,0 +1,37 @@
+import { createEventTracker, createPageEventTracker } from '../../data/segment/utils';
+
+export const eventNames = {
+  progressiveProfilingSubmitClick: 'edx.bi.welcome.page.submit.clicked',
+  progressiveProfilingSkipLinkClick: 'edx.bi.welcome.page.skip.link.clicked',
+  disablePostRegistrationRecommendations: 'edx.bi.user.recommendations.not.enabled',
+  progressiveProfilingSupportLinkCLick: 'edx.bi.welcome.page.support.link.clicked',
+  loginAndRegistration: 'login_and_registration',
+};
+
+// Event link tracker for Progressive profiling skip button click
+export const trackProgressiveProfilingSkipLinkClick = evenProperties => createEventTracker(
+  eventNames.progressiveProfilingSkipLinkClick, { ...evenProperties },
+)();
+
+// Event tracker for progressive profiling submit button click
+export const trackProgressiveProfilingSubmitClick = (evenProperties) => createEventTracker(
+  eventNames.progressiveProfilingSubmitClick,
+  { ...evenProperties },
+)();
+
+// Event tracker for progressive profiling submit button click
+export const trackDisablePostRegistrationRecommendations = (evenProperties) => createEventTracker(
+  eventNames.disablePostRegistrationRecommendations,
+  { ...evenProperties },
+)();
+
+// Tracks the progressive profiling page event.
+export const trackProgressiveProfilingPageViewed = () => {
+  createPageEventTracker(eventNames.loginAndRegistration, 'welcome')();
+};
+
+// Tracks the progressive profiling spport link click.
+export const trackProgressiveProfilingSupportLinkCLick = () => createEventTracker(
+  eventNames.progressiveProfilingSupportLinkCLick,
+  {},
+)();

src/tracking/trackers/register.js

@@ -0,0 +1,22 @@
+import { createEventTracker, createPageEventTracker } from '../../data/segment/utils';
+
+export const eventNames = {
+  loginAndRegistration: 'login_and_registration',
+  registrationSuccess: 'edx.bi.user.account.registered.client',
+  loginFormToggled: 'edx.bi.login_form.toggled',
+};
+
+export const categories = {
+  userEngagement: 'user-engagement',
+};
+
+// Event tracker for successful registration
+export const trackRegistrationSuccess = () => createEventTracker(
+  eventNames.registrationSuccess,
+  {},
+)();
+
+// Tracks the progressive profiling page event.
+export const trackRegistrationPageViewed = () => {
+  createPageEventTracker(eventNames.loginAndRegistration, 'register')();
+};

src/tracking/trackers/reset-password.js

@@ -0,0 +1,14 @@
+import { createEventTracker, createPageEventTracker } from '../../data/segment/utils';
+
+export const eventNames = {
+  loginAndRegistration: 'login_and_registration',
+  resetPasswordSuccess: 'edx.bi.user.password.reset.success',
+};
+
+export const trackResetPasswordPageViewed = () => {
+  createPageEventTracker(eventNames.loginAndRegistration, 'reset-password')();
+};
+
+export const trackPasswordResetSuccess = () => {
+  createEventTracker(eventNames.resetPasswordSuccess, {})();
+};

src/tracking/trackers/tests/forgot-password.test.jsx

@@ -0,0 +1,37 @@
+import { createEventTracker, createPageEventTracker } from '../../../data/segment/utils';
+import {
+  categories,
+  eventNames,
+  trackForgotPasswordPageEvent,
+  trackForgotPasswordPageViewed,
+} from '../forgotpassword';
+
+// Mock createEventTracker function
+jest.mock('../../../data/segment/utils', () => ({
+  createEventTracker: jest.fn().mockImplementation(() => jest.fn()),
+  createPageEventTracker: jest.fn().mockImplementation(() => jest.fn()),
+}));
+
+describe('Tracking Functions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fire trackForgotPasswordPageEvent', () => {
+    trackForgotPasswordPageEvent();
+
+    expect(createPageEventTracker).toHaveBeenCalledWith(
+      eventNames.loginAndRegistration,
+      'forgot-password',
+    );
+  });
+
+  it('should fire forgotPasswordPageViewedEvent', () => {
+    trackForgotPasswordPageViewed();
+
+    expect(createEventTracker).toHaveBeenCalledWith(
+      eventNames.forgotPasswordPageViewed,
+      { category: categories.userEngagement },
+    );
+  });
+});

src/tracking/trackers/tests/login.test.jsx

@@ -0,0 +1,37 @@
+import { createEventTracker, createPageEventTracker } from '../../../data/segment/utils';
+import {
+  categories,
+  eventNames,
+  trackForgotPasswordLinkClick,
+  trackLoginPageViewed,
+} from '../login';
+
+// Mock createEventTracker function
+jest.mock('../../../data/segment/utils', () => ({
+  createEventTracker: jest.fn().mockImplementation(() => jest.fn()),
+  createPageEventTracker: jest.fn().mockImplementation(() => jest.fn()),
+}));
+
+describe('Tracking Functions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('trackForgotPasswordLinkClick function', () => {
+    trackForgotPasswordLinkClick();
+
+    expect(createEventTracker).toHaveBeenCalledWith(
+      eventNames.forgotPasswordLinkClicked,
+      { category: categories.userEngagement },
+    );
+  });
+
+  it('trackLoginPageEvent function', () => {
+    trackLoginPageViewed();
+
+    expect(createPageEventTracker).toHaveBeenCalledWith(
+      eventNames.loginAndRegistration,
+      'login',
+    );
+  });
+});

src/tracking/trackers/tests/progressive-profiling.test.jsx

@@ -0,0 +1,37 @@
+import { createEventTracker, createPageEventTracker } from '../../../data/segment/utils';
+import {
+  eventNames,
+  trackProgressiveProfilingPageViewed,
+  trackProgressiveProfilingSkipLinkClick,
+} from '../progressive-profiling';
+
+// Mock createEventTracker function
+jest.mock('../../../data/segment/utils', () => ({
+  createEventTracker: jest.fn().mockImplementation(() => jest.fn()),
+  createPageEventTracker: jest.fn().mockImplementation(() => jest.fn()),
+  createLinkTracker: jest.fn().mockImplementation(() => jest.fn()),
+}));
+
+describe('Tracking Functions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fire trackProgressiveProfilingSkipLinkClickEvent', () => {
+    trackProgressiveProfilingSkipLinkClick();
+
+    expect(createEventTracker).toHaveBeenCalledWith(
+      eventNames.progressiveProfilingSkipLinkClick,
+      {},
+    );
+  });
+
+  it('should fire trackProgressiveProfilingPageEvent', () => {
+    trackProgressiveProfilingPageViewed();
+
+    expect(createPageEventTracker).toHaveBeenCalledWith(
+      eventNames.loginAndRegistration,
+      'welcome',
+    );
+  });
+});

src/tracking/trackers/tests/register.test.jsx

@@ -0,0 +1,36 @@
+import { createEventTracker, createPageEventTracker } from '../../../data/segment/utils';
+import {
+  eventNames,
+  trackRegistrationPageViewed,
+  trackRegistrationSuccess,
+} from '../register';
+
+// Mock createEventTracker function
+jest.mock('../../../data/segment/utils', () => ({
+  createEventTracker: jest.fn().mockImplementation(() => jest.fn()),
+  createPageEventTracker: jest.fn().mockImplementation(() => jest.fn()),
+}));
+
+describe('Tracking Functions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fire registrationSuccessEvent', () => {
+    trackRegistrationSuccess();
+
+    expect(createEventTracker).toHaveBeenCalledWith(
+      eventNames.registrationSuccess,
+      {},
+    );
+  });
+
+  it('should fire trackRegistrationPageEvent', () => {
+    trackRegistrationPageViewed();
+
+    expect(createPageEventTracker).toHaveBeenCalledWith(
+      eventNames.loginAndRegistration,
+      'register',
+    );
+  });
+});

src/tracking/trackers/tests/reset-password.test.jsx

@@ -0,0 +1,26 @@
+import { createPageEventTracker } from '../../../data/segment/utils';
+import {
+  eventNames,
+  trackResetPasswordPageViewed,
+} from '../reset-password';
+
+// Mock createEventTracker function
+jest.mock('../../../data/segment/utils', () => ({
+  createEventTracker: jest.fn().mockImplementation(() => jest.fn()),
+  createPageEventTracker: jest.fn().mockImplementation(() => jest.fn()),
+}));
+
+describe('Tracking Functions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fire trackResettPasswordPageEvent', () => {
+    trackResetPasswordPageViewed();
+
+    expect(createPageEventTracker).toHaveBeenCalledWith(
+      eventNames.loginAndRegistration,
+      'reset-password',
+    );
+  });
+});