Merge pull request #1571 from openedx/aansari/INF-2127

feat: added captcha v3 on registration

.env

@@ -16,6 +16,9 @@ SITE_NAME=null
 INFO_EMAIL=''
 # ***** Cookies *****
 USER_RETENTION_COOKIE_NAME=null
+# ***** Cohesion Keys *****
+COHESION_WRITE_KEY=''
+COHESION_SOURCE_KEY=''
 # ***** Links *****
 LOGIN_ISSUE_SUPPORT_LINK=''
 AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK=null
@@ -43,3 +46,4 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 # Fallback in local style files
 PARAGON_THEME_URLS={}
+RECAPTCHA_SITE_KEY_WEB=''

.env.development

@@ -25,6 +25,9 @@ ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='true'
 # ***** Cookies *****
 SESSION_COOKIE_DOMAIN='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
+# ***** Cohesion Keys *****
+COHESION_WRITE_KEY=''
+COHESION_SOURCE_KEY=''
 # ***** Links *****
 LOGIN_ISSUE_SUPPORT_LINK='http://localhost:18000/login-issue-support-url'
 TOS_AND_HONOR_CODE='http://localhost:18000/honor'
@@ -43,3 +46,4 @@ ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
 # Fallback in local style files
 PARAGON_THEME_URLS={}
+RECAPTCHA_SITE_KEY_WEB=''

.env.test

@@ -18,4 +18,7 @@ SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+COHESION_WRITE_KEY=''
+COHESION_SOURCE_KEY=''
 PARAGON_THEME_URLS={}
+RECAPTCHA_SITE_KEY_WEB=''

.eslintrc.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@openedx/frontend-build');
 
-module.exports = createConfig('eslint', {
+const config = createConfig('eslint', {
   rules: {
     // Temporarily update the 'indent', 'template-curly-spacing' and
     // 'no-multiple-empty-lines' rules since they are causing eslint
@@ -50,3 +50,14 @@ module.exports = createConfig('eslint', {
     'function-paren-newline': 'off',
   },
 });
+
+config.settings = {
+  'import/resolver': {
+    node: {
+      paths: ['src', 'node_modules'],
+      extensions: ['.js', '.jsx'],
+    },
+  },
+};
+
+module.exports = config;

example.env.config.js

@@ -0,0 +1,60 @@
+/*
+Authn MFE is now able to handle JS-based configuration!
+
+For the time being, the `.env.*` files are still made available when cloning down this repo or pulling from
+the master branch. To switch to using `env.config.js`, make a copy of `example.env.config.js` and configure as needed.
+
+For testing with Jest Snapshot, there is a mock in `/src/setupTest.jsx` for `getConfig` that will need to be
+uncommented.
+
+Note: having both .env and env.config.js files will follow a predictable order, in which non-empty values in the
+JS-based config will overwrite the .env environment variables.
+
+frontend-platform's getConfig loads configuration in the following sequence:
+- .env file config
+- optional handlers (commonly used to merge MFE-specific config in via additional process.env variables)
+- env.config.js file config
+- runtime config
+*/
+
+module.exports = {
+  NODE_ENV: 'development',
+  NODE_PATH: './src',
+  PORT: 1999,
+  ACCESS_TOKEN_COOKIE_NAME: 'edx-jwt-cookie-header-payload',
+  BASE_URL: 'http://localhost:1999',
+  CREDENTIALS_BASE_URL: 'http://localhost:18150',
+  CSRF_TOKEN_API_PATH: '/csrf/api/v1/token',
+  ECOMMERCE_BASE_URL: 'http://localhost:18130',
+  LANGUAGE_PREFERENCE_COOKIE_NAME: 'openedx-language-preference',
+  LMS_BASE_URL: 'http://localhost:18000',
+  LOGIN_URL: 'http://localhost:1999/login',
+  LOGOUT_URL: 'http://localhost:18000/logout',
+  LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
+  LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
+  LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
+  FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
+  MARKETING_SITE_BASE_URL: 'http://localhost:18000',
+  ORDER_HISTORY_URL: 'http://localhost:1996/orders',
+  REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://localhost:18000/login_refresh',
+  SEGMENT_KEY: '',
+  SITE_NAME: 'Your Platform Name Here',
+  INFO_EMAIL: 'info@example.com',
+  ENABLE_DYNAMIC_REGISTRATION_FIELDS: 'true',
+  ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: 'true',
+  SESSION_COOKIE_DOMAIN: 'localhost',
+  USER_INFO_COOKIE_NAME: 'edx-user-info',
+  LOGIN_ISSUE_SUPPORT_LINK: 'http://localhost:18000/login-issue-support-url',
+  TOS_AND_HONOR_CODE: 'http://localhost:18000/honor',
+  TOS_LINK: 'http://localhost:18000/tos',
+  PRIVACY_POLICY: 'http://localhost:18000/privacy',
+  AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/welcome',
+  BANNER_IMAGE_LARGE: '',
+  BANNER_IMAGE_MEDIUM: '',
+  BANNER_IMAGE_SMALL: '',
+  BANNER_IMAGE_EXTRA_SMALL: '',
+  APP_ID: '',
+  MFE_CONFIG_API_URL: '',
+  ZENDESK_KEY: '',
+  ZENDESK_LOGO_URL: '',
+};

package.json

@@ -35,6 +35,7 @@
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@openedx/frontend-plugin-framework": "^1.3.0",
     "@fortawesome/react-fontawesome": "0.2.6",
     "@openedx/paragon": "^23.4.2",
     "@optimizely/react-sdk": "^2.9.1",
@@ -48,8 +49,10 @@
     "form-urlencoded": "6.1.6",
     "prop-types": "15.8.1",
     "query-string": "7.1.3",
+    "react-error-boundary": "^4.0.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-google-recaptcha-v3": "^1.11.0",
     "react-helmet": "6.1.0",
     "react-loading-skeleton": "3.5.0",
     "react-redux": "7.2.9",
@@ -69,6 +72,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
     "@edx/reactifex": "1.1.0",
+    "copy-webpack-plugin": "^11.0.0",
     "@openedx/frontend-build": "^14.6.2",
     "babel-plugin-formatjs": "10.5.39",
     "eslint-plugin-import": "2.32.0",

public/index.html

@@ -1,25 +1,32 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en-us">
   <head>
-      <title><%= (process.env.SITE_NAME && process.env.SITE_NAME != 'null') ? 'Authentication | ' + process.env.SITE_NAME : 'Authentication' %></title>    
+    <title>
-      <meta charset="utf-8">
+      <%= (process.env.SITE_NAME && process.env.SITE_NAME !='null' ) ?
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      'Authentication | ' + process.env.SITE_NAME : 'Authentication' %>
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon"/>
+    </title>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.4.4/iframeResizer.contentWindow.min.js"
+    <meta charset="utf-8" />
-              integrity="sha512-IWwZFBvHzN41wNI6etRLLuLrDDj/6AwJcPt7cmKJAzluYTIHHQ1PF8wh0rSy05jxEvvjflVvH2MxeV6riyEEXg=="
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-              crossorigin="anonymous"
+    <meta name="robots" content="noindex, nofollow" />
-              referrerpolicy="no-referrer">
+    <link
-      </script>
+      rel="shortcut icon"
-      <% if (process.env.OPTIMIZELY_URL) { %>
+      href="<%=htmlWebpackPlugin.options.FAVICON_URL%>"
-        <script
+      type="image/x-icon"
-          src="<%= process.env.OPTIMIZELY_URL %>"
+    />
-        ></script>
+    <script defer src="https://www.edx.org/beam-wrapper.js" ></script>
-      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
+    <script
-        <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.4.4/iframeResizer.contentWindow.min.js"
-          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
+      integrity="sha512-IWwZFBvHzN41wNI6etRLLuLrDDj/6AwJcPt7cmKJAzluYTIHHQ1PF8wh0rSy05jxEvvjflVvH2MxeV6riyEEXg=="
-        ></script>
+      crossorigin="anonymous"
-      <% } %>
+      referrerpolicy="no-referrer"
+    ></script>
+    <% if (process.env.OPTIMIZELY_URL) { %>
+    <script src="<%= process.env.OPTIMIZELY_URL %>"></script>
+    <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
+    <script src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"></script>
+    <% } %>
   </head>
+
   <body>
     <div id="root"></div>
   </body>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

src/MainApp.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
 import { Helmet } from 'react-helmet';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import {
-  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
+  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, RouteTracker, UnAuthOnlyRoute,
 } from './common-components';
 import configureStore from './data/configureStore';
 import {
@@ -22,6 +23,7 @@ import {
 import { updatePathWithQueryParams } from './data/utils';
 import { ForgotPasswordPage } from './forgot-password';
 import Logistration from './logistration/Logistration';
+import MainAppSlot from './plugin-slots/MainAppSlot';
 import { ProgressiveProfiling } from './progressive-profiling';
 import { RecommendationsPage } from './recommendations';
 import { RegistrationPage } from './register';
@@ -31,33 +33,43 @@ import './index.scss';
 
 registerIcons();
 
-const MainApp = () => (
+const MainApp = () => {
-  <AppProvider store={configureStore()}>
+  const recaptchaKey = getConfig().RECAPTCHA_SITE_KEY_WEB;
-    <Helmet>
+
-      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+  return (
-    </Helmet>
+    <GoogleReCaptchaProvider
-    {getConfig().ZENDESK_KEY && <Zendesk />}
+      reCaptchaKey={recaptchaKey}
-    <Routes>
+      useEnterprise
-      <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
+    >
-      <Route
+      <AppProvider store={configureStore()}>
-        path={REGISTER_EMBEDDED_PAGE}
+        <Helmet>
-        element={<EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>}
+          <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-      />
+        </Helmet>
-      <Route
+        <Routes>
-        path={LOGIN_PAGE}
+          <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
-        element={
+          <Route
-          <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
+            path={REGISTER_EMBEDDED_PAGE}
-        }
+            element={<EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>}
-      />
+          />
-      <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><Logistration /></UnAuthOnlyRoute>} />
+          <Route
-      <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
+            path={LOGIN_PAGE}
-      <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
+            element={
-      <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
+              <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
-      <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
+            }
-      <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
+          />
-      <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
+          <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><Logistration /></UnAuthOnlyRoute>} />
-    </Routes>
+          <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
-  </AppProvider>
+          <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
-);
+          <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
+          <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
+          <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
+          <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
+        </Routes>
+        <RouteTracker />
+        <MainAppSlot />
+      </AppProvider>
+    </GoogleReCaptchaProvider>
+  );
+};
 
 export default MainApp;

src/cohesion/constants.js

@@ -0,0 +1,22 @@
+export const PAGE_TYPES = {
+  ACCOUNT_CREATION: 'account-creation',
+  SIGN_IN: 'sign-in',
+};
+
+export const ELEMENT_TYPES = {
+  BUTTON: 'BUTTON',
+};
+
+export const EVENT_TYPES = { ElementClicked: 'redventures.usertracking.v3.ElementClicked' };
+
+export const ELEMENT_TEXT = {
+  CREATE_ACCOUNT: 'create-account',
+  OPT_IN_TEXT: 'I agree that edx may send me marketing messages',
+  SIGN_IN: 'Sign In',
+};
+
+export const ELEMENT_NAME = {
+  SIGN_IN: PAGE_TYPES.SIGN_IN,
+  OPT_OUT: 'opt-out',
+  CREATE_ACCOUNT: 'Create an account for free',
+};

src/cohesion/data/actions.js

@@ -0,0 +1,6 @@
+export const SET_COHESION_EVENT_ELEMENT_STATES = 'SET_COHESION_EVENT_ELEMENT_STATES';
+
+export const setCohesionEventStates = (eventData) => ({
+  type: SET_COHESION_EVENT_ELEMENT_STATES,
+  payload: eventData,
+});

src/cohesion/data/reducers.js

@@ -0,0 +1,17 @@
+import { SET_COHESION_EVENT_ELEMENT_STATES } from './actions';
+
+export const storeName = 'cohesion';
+
+export const defaultState = {
+  eventData: {},
+};
+
+export const reducer = (state = defaultState, action = {}) => {
+  if (action.type === SET_COHESION_EVENT_ELEMENT_STATES) {
+    return {
+      ...state,
+      eventData: action.payload,
+    };
+  }
+  return state;
+};

src/cohesion/trackers.js

@@ -0,0 +1,24 @@
+import { EVENT_TYPES } from './constants';
+
+/**
+ * Tracks cohesion events by setting the page type and tracking a click event.
+ *
+ * @param {string} pageType - The type of page where the event occurred.
+ * @param {string} elementType - The type of the web element (e.g., 'BUTTON', 'LINK').
+ * @param {string} webElementText - The text content of the web element.
+ * @param {string} webElementName - The name of the web element.
+ */
+const trackCohesionEvent = (eventData) => {
+  window.chsn_pageType = eventData.pageType;
+  const webElement = {
+    elementType: eventData.elementType,
+    text: eventData.webElementText,
+    name: eventData.webElementName,
+  };
+  window.tagular?.('beam', {
+    '@type': EVENT_TYPES.ElementClicked,
+    webElement,
+  });
+};
+
+export default trackCohesionEvent;

src/cohesion/utils.js

@@ -0,0 +1,6 @@
+const mockTagular = () => {
+  const getTagular = jest.fn();
+  window.tagular = getTagular;
+};
+
+export default mockTagular;

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

@@ -1,11 +1,15 @@
+import { useSelector } from 'react-redux';
+
 import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
 import { Navigate } from 'react-router-dom';
 
+import trackCohesionEvent from '../cohesion/trackers';
 import {
   AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS, REDIRECT,
 } from '../data/constants';
-import { setCookie } from '../data/utils';
+import setCookie from '../data/utils/cookies';
+import { redirectWithDelay } from '../data/utils/dataUtils';
 
 const RedirectLogistration = (props) => {
   const {
@@ -20,10 +24,16 @@ const RedirectLogistration = (props) => {
     userId,
     registrationEmbedded,
     host,
+    currectProvider,
   } = props;
+  const cohesionEventData = useSelector(state => state.cohesion.eventData);
   let finalRedirectUrl = '';
 
   if (success) {
+    // This event is used by cohesion upon successful login and registration
+    if (!currectProvider) {
+      trackCohesionEvent(cohesionEventData);
+    }
     // If we're in a third party auth pipeline, we must complete the pipeline
     // once user has successfully logged in. Otherwise, redirect to the specified redirect url.
     // Note: For multiple enterprise use case, we need to make sure that user first visits the
@@ -75,8 +85,7 @@ const RedirectLogistration = (props) => {
         />
       );
     }
-
+    redirectWithDelay(finalRedirectUrl);
-    window.location.href = finalRedirectUrl;
   }
 
   return null;
@@ -94,6 +103,7 @@ RedirectLogistration.defaultProps = {
   userId: null,
   registrationEmbedded: false,
   host: '',
+  currectProvider: '',
 };
 
 RedirectLogistration.propTypes = {
@@ -108,6 +118,7 @@ RedirectLogistration.propTypes = {
   userId: PropTypes.number,
   registrationEmbedded: PropTypes.bool,
   host: PropTypes.string,
+  currectProvider: PropTypes.string,
 };
 
 export default RedirectLogistration;

src/common-components/RouteTracker.jsx

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+import { useLocation } from 'react-router-dom';
+
+const RouteTracker = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    window.tagular?.('pageView');
+  }, [location]);
+
+  return null;
+};
+
+export default RouteTracker;

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,17 +9,35 @@ 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 { ELEMENT_TYPES, PAGE_TYPES } from '../cohesion/constants';
+import trackCohesionEvent from '../cohesion/trackers';
+import {
+  LOGIN_PAGE, REGISTER_PAGE, SUPPORTED_ICON_CLASSES,
+} from '../data/constants';
+import { setCookie } from '../data/utils';
+import { redirectWithDelay } from '../data/utils/dataUtils';
 
 const SocialAuthProviders = (props) => {
   const { formatMessage } = useIntl();
   const { referrer, socialAuthProviders } = props;
+  const registrationFields = useSelector(state => state.register.registrationFormData);
 
-  function handleSubmit(e) {
+  function handleSubmit(e, providerName) {
     e.preventDefault();
+    const eventData = {
+      pageType: referrer === LOGIN_PAGE ? PAGE_TYPES.SIGN_IN : PAGE_TYPES.ACCOUNT_CREATION,
+      elementType: ELEMENT_TYPES.BUTTON,
+      webElementText: providerName,
+      webElementName: providerName.toLowerCase(),
+    };
+    // This event is used by cohesion upon successful login
+    trackCohesionEvent(eventData);
 
+    if (referrer === REGISTER_PAGE) {
+      setCookie('marketingEmailsOptIn', registrationFields?.configurableFormFields?.marketingEmailsOptIn);
+    }
     const url = e.currentTarget.dataset.providerUrl;
-    window.location.href = getConfig().LMS_BASE_URL + url;
+    redirectWithDelay(getConfig().LMS_BASE_URL + url);
   }
 
   const socialAuth = socialAuthProviders.map((provider, index) => (
@@ -28,7 +47,7 @@ const SocialAuthProviders = (props) => {
       type="button"
       className={`btn-social btn-${provider.id} ${index % 2 === 0 ? 'mr-3' : ''}`}
       data-provider-url={referrer === LOGIN_PAGE ? provider.loginUrl : provider.registerUrl}
-      onClick={handleSubmit}
+      onClick={(event) => handleSubmit(event, provider?.name)}
     >
       {provider.iconImage ? (
         <div aria-hidden="true">

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 {
+import { RESET_PAGE } from '../data/constants';
-  DEFAULT_REDIRECT_URL,
+import { updatePathWithQueryParams } from '../data/utils';
-} from '../data/constants';
 
 /**
  * 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/actions.js

@@ -13,9 +13,15 @@ export const getThirdPartyAuthContextBegin = () => ({
   type: THIRD_PARTY_AUTH_CONTEXT.BEGIN,
 });
 
-export const getThirdPartyAuthContextSuccess = (fieldDescriptions, optionalFields, thirdPartyAuthContext) => ({
+export const getThirdPartyAuthContextSuccess = (
+  fieldDescriptions,
+  optionalFields,
+  thirdPartyAuthContext,
+  countriesCodesList) => ({
   type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
-  payload: { fieldDescriptions, optionalFields, thirdPartyAuthContext },
+  payload: {
+    fieldDescriptions, optionalFields, thirdPartyAuthContext, countriesCodesList,
+  },
 });
 
 export const getThirdPartyAuthContextFailure = () => ({

src/common-components/data/constants.js

@@ -0,0 +1,83 @@
+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',
+        ],
+      ],
+    },
+  },
+};
+
+export const FIELD_LABELS = {
+  COUNTRY: 'country',
+};

src/common-components/data/reducers.js

@@ -35,6 +35,7 @@ const reducer = (state = defaultState, action = {}) => {
         optionalFields: action.payload.optionalFields,
         thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
         thirdPartyAuthApiStatus: COMPLETE_STATE,
+        countriesCodesList: action.payload.countriesCodesList,
       };
     }
     case THIRD_PARTY_AUTH_CONTEXT.FAILURE:

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,7 +8,9 @@ import {
   getThirdPartyAuthContextSuccess,
   THIRD_PARTY_AUTH_CONTEXT,
 } from './actions';
+import { progressiveProfilingFields, registerFields } from './constants';
 import {
+  getCountryList,
   getThirdPartyAuthContext,
 } from './service';
 import { setCountryFromThirdPartyAuthContext } from '../../register/data/actions';
@@ -18,9 +21,25 @@ export function* fetchThirdPartyAuthContext(action) {
     const {
       fieldDescriptions, optionalFields, thirdPartyAuthContext,
     } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
+    const countriesCodesList = (yield call(getCountryList)) || [];
 
     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,
+        countriesCodesList,
+      ));
+    } else {
+      yield put(getThirdPartyAuthContextSuccess(
+        fieldDescriptions,
+        optionalFields,
+        thirdPartyAuthContext,
+        countriesCodesList,
+      ));
+    }
   } catch (e) {
     yield put(getThirdPartyAuthContextFailure());
     logError(e);

src/common-components/data/service.js

@@ -1,5 +1,8 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { logError } from '@edx/frontend-platform/logging';
+
+import { FIELD_LABELS } from './constants';
 
 // eslint-disable-next-line import/prefer-default-export
 export async function getThirdPartyAuthContext(urlParams) {
@@ -23,3 +26,28 @@ export async function getThirdPartyAuthContext(urlParams) {
     thirdPartyAuthContext: data.contextData || {},
   };
 }
+
+function extractCountryList(data) {
+  return data?.fields
+    .find(({ name }) => name === FIELD_LABELS.COUNTRY)
+    ?.options?.map(({ value }) => (value)) || [];
+}
+
+export async function getCountryList() {
+  try {
+    const requestConfig = {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      isPublic: true,
+    };
+
+    const { data } = await getAuthenticatedHttpClient()
+      .get(
+      `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`,
+      requestConfig,
+      );
+    return extractCountryList(data);
+  } catch (e) {
+    logError(e);
+    return [];
+  }
+}

src/common-components/data/tests/sagas.test.js

@@ -8,6 +8,11 @@ import * as api from '../service';
 
 const { loggingService } = initializeMockLogging();
 
+jest.mock('../service', () => ({
+  getCountryList: jest.fn(),
+  getThirdPartyAuthContext: jest.fn(),
+}));
+
 describe('fetchThirdPartyAuthContext', () => {
   const params = {
     payload: { urlParams: {} },
@@ -31,6 +36,7 @@ describe('fetchThirdPartyAuthContext', () => {
         thirdPartyAuthContext: data,
         fieldDescriptions: {},
         optionalFields: {},
+        countriesCodesList: [],
       }));
 
     const dispatched = [];
@@ -44,7 +50,7 @@ describe('fetchThirdPartyAuthContext', () => {
     expect(dispatched).toEqual([
       actions.getThirdPartyAuthContextBegin(),
       setCountryFromThirdPartyAuthContext(),
-      actions.getThirdPartyAuthContextSuccess({}, {}, data),
+      actions.getThirdPartyAuthContextSuccess({}, {}, data, []),
     ]);
     getThirdPartyAuthContext.mockClear();
   });

src/common-components/index.jsx

@@ -2,6 +2,7 @@ export { default as RedirectLogistration } from './RedirectLogistration';
 export { default as registerIcons } from './RegisterFaIcons';
 export { default as EmbeddedRegistrationRoute } from './EmbeddedRegistrationRoute';
 export { default as UnAuthOnlyRoute } from './UnAuthOnlyRoute';
+export { default as RouteTracker } from './RouteTracker';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as SocialAuthProviders } from './SocialAuthProviders';
 export { default as ThirdPartyAuthAlert } from './ThirdPartyAuthAlert';

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,8 @@ 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 || '',
+  RECAPTCHA_SITE_KEY_WEB: process.env.RECAPTCHA_SITE_KEY_WEB || '',
 };
 
 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/reducers.js

@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
 
+import { reducer as cohesionReducer, storeName as cohesionStoreName } from '../cohesion/data/reducers';
 import {
   reducer as commonComponentsReducer,
   storeName as commonComponentsStoreName,
@@ -31,6 +32,7 @@ const createRootReducer = () => combineReducers({
   [commonComponentsStoreName]: commonComponentsReducer,
   [forgotPasswordStoreName]: forgotPasswordReducer,
   [resetPasswordStoreName]: resetPasswordReducer,
+  [cohesionStoreName]: cohesionReducer,
   [authnProgressiveProfilingStoreName]: authnProgressiveProfilingReducers,
 });
 export default createRootReducer;

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/dataUtils.js

@@ -81,3 +81,9 @@ export const isHostAvailableInQueryParams = () => {
   const queryParams = getAllPossibleQueryParams();
   return 'host' in queryParams;
 };
+
+export const redirectWithDelay = (redirectUrl) => {
+  setTimeout(() => {
+    window.location.href = redirectUrl;
+  }, 1000);
+};

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');
+    trackForgotPasswordPageEvent();
-    sendTrackEvent('edx.bi.password_reset_form.viewed', { category: 'user-engagement' });
+    trackForgotPasswordPageViewed();
   }, []);
 
   useEffect(() => {

src/login/AccountActivationMessage.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@openedx/paragon';
+import { Alert, Hyperlink } from '@openedx/paragon';
 import { CheckCircle, Error } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
@@ -36,19 +36,17 @@ const AccountActivationMessage = ({ messageType }) => {
       break;
     }
     case ACCOUNT_ACTIVATION_MESSAGE.ERROR: {
-      const supportLink = (
+      const supportEmail = (
-        <Alert.Link href={getConfig().ACTIVATION_EMAIL_SUPPORT_LINK}>
+        <Hyperlink isInline destination={`mailto:${getConfig().INFO_EMAIL}`}>{getConfig().INFO_EMAIL}</Hyperlink>
-          {formatMessage(messages['account.activation.support.link'])}
-        </Alert.Link>
       );
 
       heading = formatMessage(messages[`account.${activationOrConfirmation}.error.message.title`]);
       activationMessage = (
         <FormattedMessage
           id="account.activation.error.message"
-          defaultMessage="Something went wrong, please {supportLink} to resolve this issue."
+          defaultMessage="Something went wrong, please contact {supportEmail} to resolve this issue."
           description="Account activation error message"
-          values={{ supportLink }}
+          values={{ supportEmail }}
         />
       );
       break;

src/login/ChangePasswordPrompt.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -10,19 +11,23 @@ import PropTypes from 'prop-types';
 import { Link, useNavigate } from 'react-router-dom';
 
 import messages from './messages';
+import trackCohesionEvent from '../cohesion/trackers';
 import { DEFAULT_REDIRECT_URL, RESET_PAGE } from '../data/constants';
 import { updatePathWithQueryParams } from '../data/utils';
+import { redirectWithDelay } from '../data/utils/dataUtils';
 import useMobileResponsive from '../data/utils/useMobileResponsive';
 
 const ChangePasswordPrompt = ({ variant, redirectUrl }) => {
   const isMobileView = useMobileResponsive();
   const [redirectToResetPasswordPage, setRedirectToResetPasswordPage] = useState(false);
+  const cohesionEventData = useSelector(state => state.cohesion.eventData);
   const handlers = {
     handleToggleOff: () => {
       if (variant === 'block') {
         setRedirectToResetPasswordPage(true);
       } else {
-        window.location.href = redirectUrl || getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+        trackCohesionEvent(cohesionEventData);
+        redirectWithDelay(redirectUrl || getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL));
       }
     },
   };

src/login/LoginPage.jsx

@@ -1,8 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch } 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,
@@ -21,6 +20,10 @@ import {
 import { INVALID_FORM, TPA_AUTHENTICATION_FAILURE } from './data/constants';
 import LoginFailureMessage from './LoginFailure';
 import messages from './messages';
+import {
+  ELEMENT_NAME, ELEMENT_TEXT, ELEMENT_TYPES, PAGE_TYPES,
+} from '../cohesion/constants';
+import { setCohesionEventStates } from '../cohesion/data/actions';
 import {
   FormGroup,
   InstitutionLogistration,
@@ -32,9 +35,7 @@ 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 {
+import { DEFAULT_STATE, PENDING_STATE, RESET_PAGE } from '../data/constants';
-  DEFAULT_STATE, PENDING_STATE, RESET_PAGE,
-} from '../data/constants';
 import {
   getActivationStatus,
   getAllPossibleQueryParams,
@@ -42,7 +43,11 @@ import {
   getTpaProvider,
   updatePathWithQueryParams,
 } from '../data/utils';
+import { removeCookie } from '../data/utils/cookies';
 import ResetPasswordSuccess from '../reset-password/ResetPasswordSuccess';
+import {
+  trackForgotPasswordLinkClick, trackLoginPageViewed, trackLoginSuccess,
+} from '../tracking/trackers/login';
 
 const LoginPage = (props) => {
   const {
@@ -69,6 +74,7 @@ const LoginPage = (props) => {
     getTPADataFromBackend,
   } = props;
   const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
   const activationMsgType = getActivationStatus();
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
 
@@ -78,9 +84,17 @@ const LoginPage = (props) => {
   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) {
@@ -140,6 +154,15 @@ const LoginPage = (props) => {
 
   const handleSubmit = (event) => {
     event.preventDefault();
+    const eventData = {
+      pageType: PAGE_TYPES.SIGN_IN,
+      elementType: ELEMENT_TYPES.BUTTON,
+      webElementText: ELEMENT_TEXT.SIGN_IN,
+      webElementName: ELEMENT_NAME.SIGN_IN,
+    };
+
+    dispatch(setCohesionEventStates(eventData));
+
     if (showResetPasswordSuccessBanner) {
       props.dismissPasswordResetBanner();
     }
@@ -170,9 +193,6 @@ const LoginPage = (props) => {
     const { name } = event.target;
     setErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
   };
-  const trackForgotPasswordLinkClick = () => {
-    sendTrackEvent('edx.bi.password-reset_form.toggled', { category: 'user-engagement' });
-  };
 
   const { provider, skipHintedLogin } = getTpaProvider(tpaHint, providers, secondaryProviders);
 
@@ -208,6 +228,7 @@ const LoginPage = (props) => {
         success={loginResult.success}
         redirectUrl={loginResult.redirectUrl}
         finishAuthUrl={finishAuthUrl}
+        currentProvider={currentProvider}
       />
       <div className="mw-xs mt-3 mb-2">
         <LoginFailureMessage

src/login/messages.jsx

@@ -95,11 +95,6 @@ const messages = defineMessages({
     defaultMessage: 'Your account could not be activated',
     description: 'Account Activation error message title',
   },
-  'account.activation.support.link': {
-    id: 'account.activation.support.link',
-    defaultMessage: 'contact support',
-    description: 'Link text used in account activation error message to go to learner help center',
-  },
   // Email Confirmation Strings
   'account.confirmation.success.message.title': {
     id: 'account.confirmation.success.message.title',

src/login/tests/AccountActivationMessage.test.jsx

@@ -54,7 +54,7 @@ describe('AccountActivationMessage', () => {
     );
 
     const expectedMessage = 'Your account could not be activated'
-                            + 'Something went wrong, please contact support to resolve this issue.';
+                            + 'Something went wrong, please contact  to resolve this issue.';
 
     expect(screen.getByText(
       '',
@@ -117,7 +117,7 @@ describe('EmailConfirmationMessage', () => {
       </IntlProvider>,
     );
     const expectedMessage = 'Your email could not be confirmed'
-                            + 'Something went wrong, please contact support to resolve this issue.';
+                            + 'Something went wrong, please contact  to resolve this issue.';
     expect(screen.getByText(
       '',
       { selector: '#account-activation-message' },

src/login/tests/ChangePasswordPrompt.test.jsx

@@ -1,15 +1,29 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
 import { getConfig } from '@edx/frontend-platform';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
-  fireEvent, render, screen,
+  fireEvent, render, screen, waitFor,
 } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
 
+import mockTagular from '../../cohesion/utils';
 import { RESET_PAGE } from '../../data/constants';
 import ChangePasswordPrompt from '../ChangePasswordPrompt';
 
 const mockedNavigator = jest.fn();
+const mockStore = configureStore();
+mockTagular();
+
+const eventData = {
+  pageType: 'test-page',
+  elementType: 'test-element-type',
+  webElementText: 'test-element-text',
+  webElementName: 'test-element-name',
+};
 
 jest.mock('react-router-dom', () => ({
   ...(jest.requireActual('react-router-dom')),
@@ -18,8 +32,14 @@ jest.mock('react-router-dom', () => ({
 
 describe('ChangePasswordPromptTests', () => {
   let props = {};
+  let store = {};
+
+  const initialState = {
+    cohesion: { eventData: {} },
+  };
 
   beforeAll(() => {
+    store = mockStore(initialState);
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
       value: jest.fn().mockImplementation(query => ({
@@ -28,38 +48,56 @@ describe('ChangePasswordPromptTests', () => {
     });
   });
 
-  it('[nudge modal] should redirect to next url when user clicks close button', () => {
+  it('[nudge modal] should redirect to next url when user clicks close button', async () => {
     const dashboardUrl = getConfig().BASE_URL.concat('/dashboard');
     props = {
       variant: 'nudge',
       redirectUrl: dashboardUrl,
     };
 
+    store = mockStore({
+      ...initialState,
+      cohesion: {
+        eventData,
+      },
+    });
+
     delete window.location;
     window.location = { href: getConfig().BASE_URL };
 
     render(
       <IntlProvider locale="en">
-        <MemoryRouter>
+        <Provider store={store}>
-          <ChangePasswordPrompt {...props} />
+          <MemoryRouter>
-        </MemoryRouter>
+            <ChangePasswordPrompt {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );
 
     fireEvent.click(screen.getByText('Close'));
-    expect(window.location.href).toBe(dashboardUrl);
+    await waitFor(() => {
+      expect(window.location.href).toBe(dashboardUrl);
+    }, { timeout: 1100 });
   });
 
   it('[block modal] should redirect to reset password page when user clicks outside modal', async () => {
     props = {
       variant: 'block',
     };
-
+    store = mockStore({
+      ...initialState,
+      cohesion: {
+        eventData,
+      },
+    });
     render(
       <IntlProvider locale="en">
-        <MemoryRouter>
+        <Provider store={store}>
-          <ChangePasswordPrompt {...props} />
+          <MemoryRouter>
-        </MemoryRouter>
+            <ChangePasswordPrompt {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );
 

src/login/tests/LoginFailure.test.jsx

@@ -1,8 +1,12 @@
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   render, screen,
 } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
 
 import {
   ACCOUNT_LOCKED_OUT,
@@ -23,11 +27,27 @@ import LoginFailureMessage from '../LoginFailure';
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthService: jest.fn(),
 }));
+const mockStore = configureStore();
+
+const IntlLoginFailureMessage = injectIntl(LoginFailureMessage);
+
+const eventData = {
+  pageType: 'test-page',
+  elementType: 'test-element-type',
+  webElementText: 'test-element-text',
+  webElementName: 'test-element-name',
+};
 
 describe('LoginFailureMessage', () => {
   let props = {};
+  let store = {};
+
+  const initialState = {
+    cohesion: { eventData: {} },
+  };
 
   beforeAll(() => {
+    store = mockStore(initialState);
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
       value: jest.fn().mockImplementation(query => ({
@@ -294,11 +314,19 @@ describe('LoginFailureMessage', () => {
       errorCount: 0,
     };
 
+    store = mockStore({
+      ...initialState,
+      cohesion: {
+        eventData,
+      },
+    });
     render(
       <IntlProvider locale="en">
-        <MemoryRouter>
+        <Provider store={store}>
-          <LoginFailureMessage {...props} />
+          <MemoryRouter>
-        </MemoryRouter>
+            <IntlLoginFailureMessage {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );
 
@@ -319,12 +347,20 @@ describe('LoginFailureMessage', () => {
       errorCode: REQUIRE_PASSWORD_CHANGE,
       errorCount: 0,
     };
+    store = mockStore({
+      ...initialState,
+      cohesion: {
+        eventData,
+      },
+    });
 
     render(
       <IntlProvider locale="en">
-        <MemoryRouter>
+        <Provider store={store}>
-          <LoginFailureMessage {...props} />
+          <MemoryRouter>
-        </MemoryRouter>
+            <IntlLoginFailureMessage {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );
 

src/login/tests/LoginPage.test.jsx

@@ -10,7 +10,10 @@ 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 mockTagular from '../../cohesion/utils';
+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';
@@ -22,6 +25,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthService: jest.fn(),
 }));
+mockTagular();
 
 const mockStore = configureStore();
 
@@ -54,6 +58,7 @@ describe('LoginPage', () => {
     register: {
       validationApiRateLimited: false,
     },
+    cohesion: { eventData: {} },
   };
 
   const secondaryProviders = {
@@ -508,7 +513,7 @@ describe('LoginPage', () => {
 
   // ******** test redirection ********
 
-  it('should redirect to url returned by login endpoint after successful authentication', () => {
+  it('should redirect to url returned by login endpoint after successful authentication', async () => {
     const dashboardURL = 'https://test.com/testing-dashboard/';
     store = mockStore({
       ...initialState,
@@ -524,10 +529,12 @@ describe('LoginPage', () => {
     delete window.location;
     window.location = { href: getConfig().BASE_URL };
     render(reduxWrapper(<LoginPage {...props} />));
-    expect(window.location.href).toBe(dashboardURL);
+    await waitFor(() => {
+      expect(window.location.href).toBe(dashboardURL);
+    }, { timeout: 1100 });
   });
 
-  it('should redirect to finishAuthUrl upon successful login via SSO', () => {
+  it('should redirect to finishAuthUrl upon successful login via SSO', async () => {
     const authCompleteUrl = '/auth/complete/google-oauth2/';
     store = mockStore({
       ...initialState,
@@ -551,10 +558,12 @@ describe('LoginPage', () => {
     window.location = { href: getConfig().BASE_URL };
 
     render(reduxWrapper(<LoginPage {...props} />));
-    expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl);
+    await waitFor(() => {
+      expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl);
+    }, { timeout: 1100 });
   });
 
-  it('should redirect to social auth provider url on SSO button click', () => {
+  it('should redirect to social auth provider url on SSO button click', async () => {
     store = mockStore({
       ...initialState,
       commonComponents: {
@@ -575,10 +584,12 @@ describe('LoginPage', () => {
       '',
       { selector: '#oa2-apple-id' },
     ));
-    expect(window.location.href).toBe(getConfig().LMS_BASE_URL + ssoProvider.loginUrl);
+    await waitFor(() => {
+      expect(window.location.href).toBe(getConfig().LMS_BASE_URL + ssoProvider.loginUrl);
+    }, { timeout: 1100 });
   });
 
-  it('should redirect to finishAuthUrl upon successful authentication via SSO', () => {
+  it('should redirect to finishAuthUrl upon successful authentication via SSO', async () => {
     const finishAuthUrl = '/auth/complete/google-oauth2/';
     store = mockStore({
       ...initialState,
@@ -599,7 +610,9 @@ describe('LoginPage', () => {
     window.location = { href: getConfig().BASE_URL };
 
     render(reduxWrapper(<LoginPage {...props} />));
-    expect(window.location.href).toBe(getConfig().LMS_BASE_URL + finishAuthUrl);
+    await waitFor(() => {
+      expect(window.location.href).toBe(getConfig().LMS_BASE_URL + finishAuthUrl);
+    }, { timeout: 1100 });
   });
 
   // ******** test hinted third party auth ********
@@ -749,7 +762,7 @@ describe('LoginPage', () => {
 
   it('should send page event when login page is rendered', () => {
     render(reduxWrapper(<LoginPage {...props} />));
-    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login');
+    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'login', { app_name: APP_NAME });
   });
 
   it('tests that form is in invalid state when it is submitted', () => {
@@ -782,7 +795,7 @@ describe('LoginPage', () => {
       { 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', () => {

src/logistration/Logistration.jsx

@@ -20,7 +20,7 @@ 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';
@@ -56,11 +56,11 @@ const Logistration = (props) => {
   }, [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);
@@ -70,7 +70,8 @@ const Logistration = (props) => {
     if (tabKey === currentTab) {
       return;
     }
-    sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' });
+
+    sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement', app_name: APP_NAME });
     props.clearThirdPartyAuthContextErrorMessage();
     if (tabKey === LOGIN_PAGE) {
       props.backupRegistrationForm();

src/logistration/Logistration.test.jsx

@@ -10,16 +10,21 @@ 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();
 
@@ -62,6 +67,7 @@ describe('Logistration', () => {
       usernameSuggestions: [],
       validationApiRateLimited: false,
     },
+    cohesion: { eventData: {} },
     commonComponents: {
       thirdPartyAuthContext: {
         providers: [],
@@ -82,6 +88,7 @@ describe('Logistration', () => {
       })),
     }));
 
+    useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
     configure({
       loggingService: { logError: jest.fn() },
       config: {
@@ -222,8 +229,8 @@ describe('Logistration', () => {
     render(reduxWrapper(<Logistration {...props} />));
     fireEvent.click(screen.getByText('Institution/campus credentials'));
 
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement', app_name: APP_NAME });
-    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login');
+    expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'institution_login', { app_name: APP_NAME });
 
     mergeConfig({
       DISABLE_ENTERPRISE_LOGIN: '',

src/plugin-slots/MainAppSlot/MainAppSlot.test.jsx

@@ -0,0 +1,29 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { render } from '@testing-library/react';
+
+import MainAppSlot from './index';
+
+jest.mock('@openedx/frontend-plugin-framework', () => ({
+  PluginSlot: jest.fn(() => null),
+}));
+
+describe('MainAppSlot', () => {
+  it('renders without crashing', () => {
+    render(<MainAppSlot />);
+  });
+
+  it('renders a PluginSlot component', () => {
+    render(<MainAppSlot />);
+    expect(PluginSlot).toHaveBeenCalled();
+  });
+
+  it('passes the correct id prop to PluginSlot', () => {
+    render(<MainAppSlot />);
+    expect(PluginSlot).toHaveBeenCalledWith({ id: 'main_app_slot' }, {});
+  });
+
+  it('does not render any children', () => {
+    const { container } = render(<MainAppSlot />);
+    expect(container.firstChild).toBeNull();
+  });
+});

src/plugin-slots/MainAppSlot/README.md

@@ -0,0 +1,41 @@
+# Main App Slot
+
+### Slot ID: `main_app_slot`
+
+## Description
+
+This slot is used for adding content at the root level.
+
+## Example
+
+The following `env.config.jsx` will render a component at the MFE root level.
+
+![Screenshot of Content added after the Main App Slot](./images/main_app_slot.png)
+
+```js
+import {
+  DIRECT_PLUGIN,
+  PLUGIN_OPERATIONS,
+} from "@openedx/frontend-plugin-framework";
+import { ExampleComponent } from "@openedx/frontend-plugin-example";
+
+const config = {
+  pluginSlots: {
+    main_app_slot: {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: "example-component",
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: ExampleComponent,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
+```

src/plugin-slots/MainAppSlot/index.jsx

@@ -0,0 +1,7 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+const MainAppSlot = () => (
+  <PluginSlot id="main_app_slot" />
+);
+
+export default MainAppSlot;

src/plugin-slots/README.md

@@ -0,0 +1,3 @@
+# `frontend-app-authn` Plugin Slots
+
+- [`main_app_slot`](./MainAppSlot/)

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(
+      trackDisablePostRegistrationRecommendations(
-        'edx.bi.user.recommendations.not.enabled',
         { functionalCookiesConsent, page: 'authn_recommendations' },
       );
       return;
@@ -149,29 +155,23 @@ const ProgressiveProfiling = (props) => {
       });
     }
     props.saveUserProfile(authenticatedUser.username, snakeCaseObject(payload));
-
+    const eventProperties = {
-    sendTrackEvent(
+      isGenderSelected: !!values.gender,
-      'edx.bi.welcome.page.submit.clicked',
+      isYearOfBirthSelected: !!values.year_of_birth,
-      {
+      isLevelOfEducationSelected: !!values.level_of_education,
-        isGenderSelected: !!values.gender,
+      isWorkExperienceSelected: !!values.work_experience,
-        isYearOfBirthSelected: !!values.year_of_birth,
+      host: queryParams?.host || '',
-        isLevelOfEducationSelected: !!values.level_of_education,
+    };
-        isWorkExperienceSelected: !!values.work_experience,
+    trackProgressiveProfilingSubmitClick(eventProperties);
-        host: queryParams?.host || '',
-      },
-    );
   };
 
   const handleSkip = (e) => {
     e.preventDefault();
     window.history.replaceState(location.state, null, '');
     setShowModal(true);
-    sendTrackEvent(
+    trackProgressiveProfilingSkipLinkClick({
-      'edx.bi.welcome.page.skip.link.clicked',
+      host: queryParams?.host || '',
-      {
+    });
-        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

@@ -5,12 +5,14 @@ import { identifyAuthenticatedUser, sendTrackEvent } from '@edx/frontend-platfor
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
 import {
-  fireEvent, render, screen,
+  fireEvent, render, screen, waitFor,
 } from '@testing-library/react';
 import { MemoryRouter, mockNavigate, useLocation } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
+import mockTagular from '../../cohesion/utils';
 import {
+  APP_NAME,
   AUTHN_PROGRESSIVE_PROFILING,
   COMPLETE_STATE, DEFAULT_REDIRECT_URL,
   EMBEDDED,
@@ -22,6 +24,7 @@ import { saveUserProfile } from '../data/actions';
 import ProgressiveProfiling from '../ProgressiveProfiling';
 
 const mockStore = configureStore();
+mockTagular();
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendPageEvent: jest.fn(),
@@ -52,6 +55,13 @@ jest.mock('react-router-dom', () => {
   };
 });
 
+const eventData = {
+  pageType: 'test-page',
+  elementType: 'test-element-type',
+  webElementText: 'test-element-text',
+  webElementName: 'test-element-name',
+};
+
 describe('ProgressiveProfilingTests', () => {
   let store = {};
 
@@ -141,8 +151,9 @@ 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 ********
@@ -163,7 +174,7 @@ describe('ProgressiveProfilingTests', () => {
     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,6 +184,7 @@ describe('ProgressiveProfilingTests', () => {
       isLevelOfEducationSelected: false,
       isWorkExperienceSelected: false,
       host: '',
+      app_name: APP_NAME,
     };
     delete window.location;
     window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
@@ -247,6 +259,9 @@ describe('ProgressiveProfilingTests', () => {
           ...initialState.welcomePage,
           success: true,
         },
+        cohesion: {
+          eventData,
+        },
       });
       const { container } = render(reduxWrapper(<ProgressiveProfiling />));
       const nextButton = container.querySelector('button.btn-brand');
@@ -273,13 +288,18 @@ describe('ProgressiveProfilingTests', () => {
           ...initialState.welcomePage,
           success: true,
         },
+        cohesion: {
+          eventData,
+        },
       });
 
       const { container } = render(reduxWrapper(<ProgressiveProfiling />));
       const nextButton = container.querySelector('button.btn-brand');
       expect(nextButton.textContent).toEqual('Submit');
 
-      expect(window.location.href).toEqual(redirectUrl);
+      await waitFor(() => {
+        expect(window.location.href).toEqual(redirectUrl);
+      }, { timeout: 1100 });
     });
   });
 
@@ -314,7 +334,7 @@ describe('ProgressiveProfilingTests', () => {
       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', () => {
@@ -347,6 +367,7 @@ describe('ProgressiveProfilingTests', () => {
         isLevelOfEducationSelected: false,
         isWorkExperienceSelected: false,
         host: 'http://example.com',
+        app_name: APP_NAME,
       };
       delete window.location;
       window.location = {
@@ -393,7 +414,7 @@ describe('ProgressiveProfilingTests', () => {
       expect(window.location.href).toBe(DASHBOARD_URL);
     });
 
-    it('should redirect to provided redirect url', () => {
+    it('should redirect to provided redirect url', async () => {
       const redirectUrl = 'https://redirect-test.com';
       delete window.location;
       window.location = {
@@ -415,12 +436,17 @@ describe('ProgressiveProfilingTests', () => {
           ...initialState.welcomePage,
           success: true,
         },
+        cohesion: {
+          eventData,
+        },
       });
 
       render(reduxWrapper(<ProgressiveProfiling />));
       const submitButton = screen.getByText('Submit');
       fireEvent.click(submitButton);
-      expect(window.location.href).toBe(redirectUrl);
+      await waitFor(() => {
+        expect(window.location.href).toBe(redirectUrl);
+      }, { timeout: 1100 });
     });
   });
 });

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/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/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';
@@ -12,12 +11,19 @@ import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import Skeleton from 'react-loading-skeleton';
 
+import {
+  InstitutionLogistration,
+  PasswordField,
+  RedirectLogistration,
+  ThirdPartyAuthAlert,
+} from '../common-components';
 import ConfigurableRegistrationForm from './components/ConfigurableRegistrationForm';
 import RegistrationFailure from './components/RegistrationFailure';
 import {
   backupRegistrationFormBegin,
   clearRegistrationBackendError,
   registerNewUser,
+  setAutoGeneratedUsernameExperimentData,
   setEmailSuggestionInStore,
   setUserPipelineDataLoaded,
 } from './data/actions';
@@ -25,6 +31,9 @@ import {
   FORM_SUBMISSION_ERROR,
   TPA_AUTHENTICATION_FAILURE,
 } from './data/constants';
+import useRecaptchaSubmission from './data/hooks';
+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,
@@ -32,21 +41,20 @@ import {
 import messages from './messages';
 import { EmailField, NameField, UsernameField } from './RegistrationFields';
 import {
-  InstitutionLogistration,
+  ELEMENT_NAME, ELEMENT_TEXT, ELEMENT_TYPES, PAGE_TYPES,
-  PasswordField,
+} from '../cohesion/constants';
-  RedirectLogistration,
+import { setCohesionEventStates } from '../cohesion/data/actions';
-  ThirdPartyAuthAlert,
-} from '../common-components';
 import { getThirdPartyAuthContext as getRegistrationDataFromBackend } from '../common-components/data/actions';
 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
  */
@@ -54,6 +62,7 @@ const RegistrationPage = (props) => {
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
 
+  const { executeWithFallback } = useRecaptchaSubmission('submit_registration_form');
   const registrationEmbedded = isHostAvailableInQueryParams();
   const platformName = getConfig().SITE_NAME;
   const flags = {
@@ -68,6 +77,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);
@@ -85,6 +95,7 @@ const RegistrationPage = (props) => {
   const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers);
   const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
   const pipelineUserDetails = useSelector(state => state.commonComponents.thirdPartyAuthContext.pipelineUserDetails);
+  const countriesCodesList = useSelector(state => state.commonComponents.countriesCodesList);
 
   const backendValidations = useSelector(getBackendValidations);
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
@@ -103,6 +114,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 +145,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 +166,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 +190,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]);
 
@@ -208,15 +232,15 @@ const RegistrationPage = (props) => {
     }
   };
 
-  const registerUser = () => {
+  const registerUser = async () => {
     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;
     }
 
@@ -228,7 +252,7 @@ const RegistrationPage = (props) => {
       fieldDescriptions,
       formatMessage,
     );
-    setErrors({ ...fieldErrors });
+    setErrors({ ...fieldErrors, captchaError: '' });
     dispatch(setEmailSuggestionInStore(emailSuggestion));
 
     // returning if not valid
@@ -237,20 +261,41 @@ const RegistrationPage = (props) => {
       return;
     }
 
-    // Preparing payload for submission
+    let recaptchaToken = null;
+    try {
+      recaptchaToken = await executeWithFallback();
+    } catch (err) {
+      setErrors(prev => ({
+        ...prev,
+        captchaError: err.message,
+      }));
+      return;
+    }
+
     payload = prepareRegistrationPayload(
       payload,
       configurableFormFields,
       flags.showMarketingEmailOptInCheckbox,
       totalRegistrationTime,
-      queryParams);
+      queryParams,
+    );
+    if (recaptchaToken) {
+      payload = { ...payload, captcha_token: recaptchaToken };
+    }
 
-    // making register call
     dispatch(registerNewUser(payload));
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
+    const eventData = {
+      pageType: PAGE_TYPES.ACCOUNT_CREATION,
+      elementType: ELEMENT_TYPES.BUTTON,
+      webElementText: ELEMENT_TEXT.CREATE_ACCOUNT,
+      webElementName: ELEMENT_NAME.CREATE_ACCOUNT,
+    };
+
+    dispatch(setCohesionEventStates(eventData));
     registerUser();
   };
 
@@ -285,107 +330,117 @@ const RegistrationPage = (props) => {
           redirectToProgressiveProfilingPage={
             getConfig().ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN && !!Object.keys(optionalFields.fields).length
           }
+          currentProvider={currentProvider}
         />
-        {autoSubmitRegForm && !errorCode.type ? (
+        {(autoSubmitRegForm && !errorCode.type)
-          <div className="mw-xs mt-5 text-center">
+        || (!autoGeneratedUsernameExpVariation && !(
-            <Spinner animation="border" variant="primary" id="tpa-spinner" />
+          autoGeneratedUsernameExpVariation === NOT_INITIALIZED
-          </div>
+          || registrationEmbedded || !!tpaHint || !!currentProvider))
-        ) : (
+          ? (
-          <div
+            <div className="mw-xs mt-5 text-center">
-            className={classNames(
+              <Spinner animation="border" variant="primary" id="tpa-spinner" />
-              'mw-xs mt-3',
+            </div>
-              { 'w-100 m-auto pt-4 main-content': registrationEmbedded },
+          ) : (
-            )}
+            <div
-          >
+              className={classNames(
-            <ThirdPartyAuthAlert
+                'mw-xs mt-3',
-              currentProvider={currentProvider}
+                { 'w-100 m-auto pt-4 main-content': registrationEmbedded },
-              platformName={platformName}
+              )}
-              referrer={REGISTER_PAGE}
+            >
-            />
+              <ThirdPartyAuthAlert
-            <RegistrationFailure
+                currentProvider={currentProvider}
-              errorCode={errorCode.type}
+                platformName={platformName}
-              failureCount={errorCode.count}
+                referrer={REGISTER_PAGE}
-              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'])}
               />
-              <EmailField
+              <RegistrationFailure
-                name="email"
+                errorCode={errorCode.type}
-                value={formFields.email}
+                failureCount={errorCode.count}
-                confirmEmailValue={configurableFormFields?.confirm_email}
+                context={{ provider: currentProvider, errorMessage: thirdPartyAuthErrorMessage }}
-                handleErrorChange={handleErrorChange}
-                handleChange={handleOnChange}
-                errorMessage={errors.email}
-                helpText={[formatMessage(messages['help.text.email'])]}
-                floatingLabel={formatMessage(messages['registration.email.label'])}
               />
-              {!flags.autoGeneratedUsernameEnabled && (
+              <Form id="registration-form" name="registration-form">
-                <UsernameField
+                <NameField
-                  name="username"
+                  name="name"
-                  spellCheck="false"
+                  value={formFields.name}
-                  value={formFields.username}
+                  shouldFetchUsernameSuggestions={!formFields.username.trim()}
                   handleChange={handleOnChange}
                   handleErrorChange={handleErrorChange}
-                  errorMessage={errors.username}
+                  errorMessage={errors.name}
-                  helpText={[formatMessage(messages['help.text.username.1']), formatMessage(messages['help.text.username.2'])]}
+                  helpText={[formatMessage(messages['help.text.name'])]}
-                  floatingLabel={formatMessage(messages['registration.username.label'])}
+                  floatingLabel={formatMessage(messages['registration.fullname.label'])}
                 />
-              )}
+                <EmailField
-              {!currentProvider && (
+                  name="email"
-                <PasswordField
+                  value={formFields.email}
-                  name="password"
+                  confirmEmailValue={configurableFormFields?.confirm_email}
-                  value={formFields.password}
-                  handleChange={handleOnChange}
                   handleErrorChange={handleErrorChange}
-                  errorMessage={errors.password}
+                  handleChange={handleOnChange}
-                  floatingLabel={formatMessage(messages['registration.password.label'])}
+                  errorMessage={errors.email}
+                  helpText={[formatMessage(messages['help.text.email'])]}
+                  floatingLabel={formatMessage(messages['registration.email.label'])}
                 />
-              )}
+                {!hideUsernameField && (
-              <ConfigurableRegistrationForm
+                  <UsernameField
-                email={formFields.email}
+                    name="username"
-                fieldErrors={errors}
+                    spellCheck="false"
-                formFields={configurableFormFields}
+                    value={formFields.username}
-                setFieldErrors={registrationEmbedded ? setTemporaryErrors : setErrors}
+                    handleChange={handleOnChange}
-                setFormFields={setConfigurableFormFields}
+                    handleErrorChange={handleErrorChange}
-                autoSubmitRegisterForm={autoSubmitRegForm}
+                    errorMessage={errors.username}
-                fieldDescriptions={fieldDescriptions}
+                    helpText={[formatMessage(messages['help.text.username.1']), formatMessage(messages['help.text.username.2'])]}
-              />
+                    floatingLabel={formatMessage(messages['registration.username.label'])}
-              <StatefulButton
+                  />
-                id="register-user"
+                )}
-                name="register-user"
+                {!currentProvider && (
-                type="submit"
+                  <PasswordField
-                variant="brand"
+                    name="password"
-                className="register-button mt-4 mb-4"
+                    value={formFields.password}
-                state={submitState}
+                    handleChange={handleOnChange}
-                labels={{
+                    handleErrorChange={handleErrorChange}
-                  default: buttonLabel,
+                    errorMessage={errors.password}
-                  pending: '',
+                    floatingLabel={formatMessage(messages['registration.password.label'])}
-                }}
+                  />
-                onClick={handleSubmit}
+                )}
-                onMouseDown={(e) => e.preventDefault()}
+                <ConfigurableRegistrationForm
-              />
+                  email={formFields.email}
-              {!registrationEmbedded && (
+                  fieldErrors={errors}
-                <ThirdPartyAuth
+                  formFields={configurableFormFields}
-                  currentProvider={currentProvider}
+                  setFieldErrors={registrationEmbedded ? setTemporaryErrors : setErrors}
-                  providers={providers}
+                  setFormFields={setConfigurableFormFields}
-                  secondaryProviders={secondaryProviders}
+                  autoSubmitRegisterForm={autoSubmitRegForm}
-                  handleInstitutionLogin={handleInstitutionLogin}
+                  fieldDescriptions={fieldDescriptions}
-                  thirdPartyAuthApiStatus={thirdPartyAuthApiStatus}
+                  countriesCodesList={countriesCodesList}
                 />
-              )}
+                {errors?.captchaError && (
-            </Form>
+                  <div className="mt-3 pgn__form-text-invalid pgn__form-text">
-          </div>
+                    {errors.captchaError}
-        )}
+                  </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

@@ -5,7 +5,7 @@ import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'
 import {
   configure, getLocale, IntlProvider,
 } from '@edx/frontend-platform/i18n';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { mockNavigate, BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
@@ -16,9 +16,14 @@ import {
   setUserPipelineDataLoaded,
 } from './data/actions';
 import { INTERNAL_SERVER_ERROR } from './data/constants';
+import mockTagular from '../cohesion/utils';
+import useRecaptchaSubmission from './data/hooks';
+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,8 +34,16 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
   getLocale: jest.fn(),
 }));
+jest.mock('./data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
+jest.mock('./data/hooks', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    executeWithFallback: jest.fn(),
+  })),
+}));
 
 const mockStore = configureStore();
+mockTagular();
 
 jest.mock('react-router-dom', () => {
   const mockNavigation = jest.fn();
@@ -100,6 +113,7 @@ describe('RegistrationPage', () => {
       usernameSuggestions: [],
 
     },
+    cohesion: { eventData: {} },
     commonComponents: {
       thirdPartyAuthApiStatus: null,
       thirdPartyAuthContext,
@@ -126,6 +140,12 @@ describe('RegistrationPage', () => {
       institutionLogin: false,
     };
     window.location = { search: '' };
+    useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
+    useRecaptchaSubmission.mockReturnValue({
+      executeWithFallback: jest.fn().mockResolvedValue(null),
+      isReady: true,
+      isLoading: false,
+    });
   });
 
   afterEach(() => {
@@ -167,7 +187,7 @@ describe('RegistrationPage', () => {
 
     // ******** test registration form submission ********
 
-    it('should submit form for valid input', () => {
+    it('should submit form for valid input', async () => {
       getLocale.mockImplementation(() => ('en-us'));
       jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
 
@@ -183,6 +203,7 @@ describe('RegistrationPage', () => {
         honor_code: true,
         total_registration_time: 0,
         next: '/course/demo-course-url',
+        app_name: APP_NAME,
       };
 
       store.dispatch = jest.fn(store.dispatch);
@@ -191,10 +212,12 @@ describe('RegistrationPage', () => {
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
 
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+      await waitFor(() => {
+        expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+      });
     });
 
-    it('should submit form without password field when current provider is present', () => {
+    it('should submit form without password field when current provider is present', async () => {
       jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
 
       const formPayload = {
@@ -205,6 +228,7 @@ describe('RegistrationPage', () => {
         honor_code: true,
         social_auth_provider: 'Apple',
         total_registration_time: 0,
+        app_name: APP_NAME,
       };
 
       store = mockStore({
@@ -223,7 +247,9 @@ describe('RegistrationPage', () => {
       populateRequiredFields(getByLabelText, formPayload, true);
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...formPayload, country: 'PK' }));
+      await waitFor(() => {
+        expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...formPayload, country: 'PK' }));
+      });
     });
 
     it('should display an error when form is submitted with an invalid email', () => {
@@ -274,7 +300,7 @@ describe('RegistrationPage', () => {
       expect(validationErrors.textContent).toContain(usernameError);
     });
 
-    it('should submit form with marketing email opt in value', () => {
+    it('should submit form with marketing email opt in value', async () => {
       mergeConfig({
         MARKETING_EMAILS_OPT_IN: 'true',
       });
@@ -290,6 +316,7 @@ describe('RegistrationPage', () => {
         honor_code: true,
         total_registration_time: 0,
         marketing_emails_opt_in: true,
+        app_name: APP_NAME,
       };
 
       store.dispatch = jest.fn(store.dispatch);
@@ -297,14 +324,16 @@ describe('RegistrationPage', () => {
       populateRequiredFields(getByLabelText, payload);
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+      await waitFor(() => {
+        expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+      });
 
       mergeConfig({
         MARKETING_EMAILS_OPT_IN: '',
       });
     });
 
-    it('should submit form without UsernameField when autoGeneratedUsernameEnabled is true', () => {
+    it('should submit form without UsernameField when autoGeneratedUsernameEnabled is true', async () => {
       mergeConfig({
         ENABLE_AUTO_GENERATED_USERNAME: true,
       });
@@ -316,6 +345,7 @@ describe('RegistrationPage', () => {
         country: 'Pakistan',
         honor_code: true,
         total_registration_time: 0,
+        app_name: APP_NAME,
       };
 
       store.dispatch = jest.fn(store.dispatch);
@@ -323,7 +353,9 @@ describe('RegistrationPage', () => {
       populateRequiredFields(getByLabelText, payload, false, true);
       const button = container.querySelector('button.btn-brand');
       fireEvent.click(button);
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+      await waitFor(() => {
+        expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+      });
       mergeConfig({
         ENABLE_AUTO_GENERATED_USERNAME: false,
       });
@@ -355,6 +387,124 @@ describe('RegistrationPage', () => {
 
     // ******** test registration form validations ********
 
+    it('should submit form with valid reCAPTCHA token', async () => {
+      getLocale.mockImplementation(() => ('en-us'));
+      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
+
+      useRecaptchaSubmission.mockReturnValue({
+        executeWithFallback: jest.fn().mockResolvedValue('mock-recaptcha-token'),
+        isReady: true,
+        isLoading: false,
+      });
+
+      const payload = {
+        name: 'John Doe',
+        username: 'john_doe',
+        email: 'john.doe@gmail.com',
+        password: 'password1',
+        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} />)));
+      populateRequiredFields(getByLabelText, payload);
+
+      const button = container.querySelector('button.btn-brand');
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        const actions = store.dispatch.mock.calls.map(call => call[0]);
+        const registerAction = actions.find(a => a.type === registerNewUser().type);
+
+        expect(registerAction).toBeTruthy();
+        expect(registerAction.payload).toMatchObject({
+          registrationInfo: {
+            ...payload,
+            country: 'PK',
+            captcha_token: 'mock-recaptcha-token',
+          },
+        });
+      });
+    });
+
+    it('should display error when reCAPTCHA verification fails', async () => {
+      getLocale.mockImplementation(() => ('en-us'));
+      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
+
+      useRecaptchaSubmission.mockReturnValue({
+        executeWithFallback: jest.fn().mockRejectedValue(new Error('CAPTCHA verification failed.')),
+        isReady: true,
+        isLoading: false,
+      });
+
+      const payload = {
+        name: 'John Doe',
+        username: 'john_doe',
+        email: 'john.doe@gmail.com',
+        password: 'password1',
+        country: 'Pakistan',
+        honor_code: true,
+        total_registration_time: 0,
+      };
+
+      store.dispatch = jest.fn(store.dispatch);
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
+      populateRequiredFields(getByLabelText, payload);
+
+      const button = container.querySelector('button.btn-brand');
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        const captchaError = container.querySelector('.pgn__form-text-invalid');
+        expect(captchaError.textContent).toContain('CAPTCHA verification failed.');
+      });
+
+      expect(store.dispatch).not.toHaveBeenCalledWith(expect.objectContaining({
+        type: registerNewUser().type,
+      }));
+    });
+
+    it('should submit without reCAPTCHA token if reCAPTCHA is disabled', async () => {
+      getLocale.mockImplementation(() => ('en-us'));
+      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
+
+      useRecaptchaSubmission.mockReturnValue({
+        executeWithFallback: jest.fn().mockResolvedValue(null),
+        isReady: true,
+        isLoading: false,
+      });
+
+      const payload = {
+        name: 'John Doe',
+        username: 'john_doe',
+        email: 'john.doe@gmail.com',
+        password: 'password1',
+        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} />)));
+      populateRequiredFields(getByLabelText, payload);
+
+      const button = container.querySelector('button.btn-brand');
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(store.dispatch).toHaveBeenCalledWith(
+          registerNewUser({
+            ...payload,
+            country: 'PK',
+          }),
+        );
+      });
+    });
+
     it('should show error messages for required fields on empty form submission', () => {
       const { container } = render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
 
@@ -494,7 +644,7 @@ describe('RegistrationPage', () => {
       expect(document.cookie).toMatch(`${getConfig().USER_RETENTION_COOKIE_NAME}=true`);
     });
 
-    it('should redirect to url returned in registration result after successful account creation', () => {
+    it('should redirect to url returned in registration result after successful account creation', async () => {
       const dashboardURL = 'https://test.com/testing-dashboard/';
       store = mockStore({
         ...initialState,
@@ -509,10 +659,12 @@ describe('RegistrationPage', () => {
       delete window.location;
       window.location = { href: getConfig().BASE_URL };
       render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
-      expect(window.location.href).toBe(dashboardURL);
+      await waitFor(() => {
+        expect(window.location.href).toBe(dashboardURL);
+      }, { timeout: 1100 });
     });
 
-    it('should redirect to dashboard if features flags are configured but no optional fields are configured', () => {
+    it('should redirect to dashboard if features flags are configured but no optional fields are configured', async () => {
       mergeConfig({
         ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: true,
       });
@@ -536,7 +688,9 @@ describe('RegistrationPage', () => {
       delete window.location;
       window.location = { href: getConfig().BASE_URL };
       render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
-      expect(window.location.href).toBe(dashboardUrl);
+      await waitFor(() => {
+        expect(window.location.href).toBe(dashboardUrl);
+      }, { timeout: 1100 });
     });
 
     it('should redirect to progressive profiling page if optional fields are configured', () => {
@@ -590,7 +744,7 @@ describe('RegistrationPage', () => {
 
     it('should send page event when register page is rendered', () => {
       render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
-      expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register');
+      expect(sendPageEvent).toHaveBeenCalledWith('login_and_registration', 'register', { app_name: APP_NAME });
     });
 
     it('should send track event when user has successfully registered', () => {
@@ -608,7 +762,7 @@ 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', {});
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.user.account.registered.client', { app_name: APP_NAME });
     });
 
     it('should populate form with pipeline user details', () => {
@@ -830,7 +984,7 @@ describe('RegistrationPage', () => {
       expect(registrationFormElement).toBeFalsy();
     });
 
-    it('should auto register if autoSubmitRegForm is true and pipeline details are loaded', () => {
+    it('should auto register if autoSubmitRegForm is true and pipeline details are loaded', async () => {
       jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
       getLocale.mockImplementation(() => ('en-us'));
 
@@ -874,14 +1028,17 @@ describe('RegistrationPage', () => {
       store.dispatch = jest.fn(store.dispatch);
 
       render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({
+      await waitFor(() => {
-        name: 'John Doe',
+        expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({
-        username: 'john_doe',
+          name: 'John Doe',
-        email: 'john.doe@example.com',
+          username: 'john_doe',
-        country: 'PK',
+          email: 'john.doe@example.com',
-        social_auth_provider: 'Apple',
+          country: 'PK',
-        total_registration_time: 0,
+          social_auth_provider: 'Apple',
-      }));
+          total_registration_time: 0,
+          app_name: APP_NAME,
+        }));
+      });
     });
   });
 });

src/register/components/ConfigurableRegistrationForm.jsx

@@ -1,10 +1,16 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, 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 {
+  ELEMENT_NAME, ELEMENT_TEXT, ELEMENT_TYPES, PAGE_TYPES,
+} from '../../cohesion/constants';
+import trackCohesionEvent from '../../cohesion/trackers';
 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';
@@ -31,13 +37,14 @@ const ConfigurableRegistrationForm = (props) => {
     setFieldErrors,
     setFormFields,
     autoSubmitRegistrationForm,
+    countriesCodesList,
   } = 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' }]), []);
 
   let showTermsOfServiceAndHonorCode = false;
   let showCountryField = false;
@@ -50,6 +57,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.
    */
@@ -70,6 +79,16 @@ const ConfigurableRegistrationForm = (props) => {
     }
   }, [autoSubmitRegistrationForm]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const removeDisabledCountries = useCallback((countryList) => {
+    if (!countriesCodesList.length) {
+      return countryList;
+    }
+    return countryList.filter(({ code }) => countriesCodesList.find(x => x === code));
+  }, [countriesCodesList]);
+
+  const countryList = useMemo(() => removeDisabledCountries(
+    getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }])), [removeDisabledCountries]);
+
   const handleErrorChange = (fieldName, error) => {
     if (fieldName) {
       setFieldErrors(prevErrors => ({
@@ -90,6 +109,25 @@ const ConfigurableRegistrationForm = (props) => {
         setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
       }
     }
+    // setting marketingEmailsOptIn state for SSO authentication flow for register API call
+    if (name === 'marketingEmailsOptIn') {
+      if (!value) {
+        const cohesionEventData = {
+          pageType: PAGE_TYPES.ACCOUNT_CREATION,
+          elementType: ELEMENT_TYPES.BUTTON,
+          webElementText: ELEMENT_TEXT.OPT_IN_TEXT,
+          webElementName: ELEMENT_NAME.OPT_OUT,
+        };
+        trackCohesionEvent(cohesionEventData);
+      }
+      dispatch(backupRegistrationFormBegin({
+        ...backedUpFormData,
+        configurableFormFields: {
+          ...backedUpFormData.configurableFormFields,
+          [name]: value,
+        },
+      }));
+    }
     setFormFields(prevState => ({ ...prevState, [name]: value }));
   };
 
@@ -231,11 +269,16 @@ ConfigurableRegistrationForm.propTypes = {
   setFieldErrors: PropTypes.func.isRequired,
   setFormFields: PropTypes.func.isRequired,
   autoSubmitRegistrationForm: PropTypes.bool,
+  countriesCodesList: PropTypes.arrayOf(PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  })),
 };
 
 ConfigurableRegistrationForm.defaultProps = {
   fieldDescriptions: {},
   autoSubmitRegistrationForm: false,
+  countriesCodesList: [],
 };
 
 export default ConfigurableRegistrationForm;

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

@@ -4,12 +4,16 @@ import { mergeConfig } from '@edx/frontend-platform';
 import {
   getLocale, IntlProvider,
 } from '@edx/frontend-platform/i18n';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitFor } 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,6 +25,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
   getLocale: jest.fn(),
 }));
+jest.mock('../../data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
 
 const mockStore = configureStore();
 
@@ -91,6 +96,7 @@ describe('ConfigurableRegistrationForm', () => {
       registrationFormData,
       usernameSuggestions: [],
     },
+    cohesion: { eventData: {} },
     commonComponents: {
       thirdPartyAuthApiStatus: null,
       thirdPartyAuthContext,
@@ -118,6 +124,7 @@ describe('ConfigurableRegistrationForm', () => {
     };
     window.location = { search: '' };
     getLocale.mockImplementationOnce(() => ('en-us'));
+    useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
   });
 
   afterEach(() => {
@@ -182,6 +189,7 @@ describe('ConfigurableRegistrationForm', () => {
           },
         },
         autoSubmitRegistrationForm: true,
+        countriesCodesList: [{ code: 'AX', name: 'Åland Islands' }, { code: 'AL', name: 'Albania' }],
       };
 
       render(routerWrapper(reduxWrapper(
@@ -217,7 +225,7 @@ describe('ConfigurableRegistrationForm', () => {
       expect(document.querySelector('#tos')).toBeTruthy();
     });
 
-    it('should submit form with fields returned by backend in payload', () => {
+    it('should submit form with fields returned by backend in payload', async () => {
       mergeConfig({
         SHOW_CONFIGURABLE_EDX_FIELDS: true,
       });
@@ -257,7 +265,9 @@ describe('ConfigurableRegistrationForm', () => {
 
       fireEvent.click(submitButton);
 
-      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+      await waitFor(() => {
+        expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK', app_name: APP_NAME }));
+      });
     });
 
     it('should show error messages for required fields on empty form submission', () => {

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

@@ -11,6 +11,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,6 +25,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
   getLocale: jest.fn(),
 }));
+jest.mock('../../data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
 
 const mockStore = configureStore();
 
@@ -92,6 +96,7 @@ describe('RegistrationFailure', () => {
       registrationFormData,
       usernameSuggestions: [],
     },
+    cohesion: { eventData: {} },
     commonComponents: {
       thirdPartyAuthApiStatus: null,
       thirdPartyAuthContext,
@@ -118,6 +123,7 @@ describe('RegistrationFailure', () => {
       institutionLogin: false,
     };
     window.location = { search: '' };
+    useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
   });
 
   afterEach(() => {

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

@@ -4,13 +4,17 @@ import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import {
   configure, getLocale, IntlProvider,
 } from '@edx/frontend-platform/i18n';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
+import mockTagular from '../../../cohesion/utils';
 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,6 +25,8 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
   getLocale: jest.fn(),
 }));
+jest.mock('../../data/optimizelyExperiment/useAutoGeneratedUsernameExperimentVariation', () => jest.fn());
+mockTagular();
 
 const mockStore = configureStore();
 
@@ -92,6 +98,7 @@ describe('ThirdPartyAuth', () => {
       registrationFormData,
       usernameSuggestions: [],
     },
+    cohesion: { eventData: {} },
     commonComponents: {
       thirdPartyAuthApiStatus: null,
       thirdPartyAuthContext,
@@ -118,6 +125,7 @@ describe('ThirdPartyAuth', () => {
       institutionLogin: false,
     };
     window.location = { search: '' };
+    useAutoGeneratedUsernameExperimentVariation.mockReturnValue(NOT_INITIALIZED);
   });
 
   afterEach(() => {
@@ -332,7 +340,7 @@ describe('ThirdPartyAuth', () => {
       expect(headingElement).toBeTruthy();
     });
 
-    it('should redirect to social auth provider url on SSO button click', () => {
+    it('should redirect to social auth provider url on SSO button click', async () => {
       const registerUrl = '/auth/login/apple-id/?auth_entry=register&next=/dashboard';
       store = mockStore({
         ...initialState,
@@ -358,10 +366,12 @@ describe('ThirdPartyAuth', () => {
       const ssoButton = container.querySelector('button#oa2-apple-id');
       fireEvent.click(ssoButton);
 
-      expect(window.location.href).toBe(getConfig().LMS_BASE_URL + registerUrl);
+      await waitFor(() => {
+        expect(window.location.href).toBe(getConfig().LMS_BASE_URL + registerUrl);
+      }, { timeout: 1100 });
     });
 
-    it('should redirect to finishAuthUrl upon successful registration via SSO', () => {
+    it('should redirect to finishAuthUrl upon successful registration via SSO', async () => {
       const authCompleteUrl = '/auth/complete/google-oauth2/';
       store = mockStore({
         ...initialState,
@@ -384,7 +394,9 @@ describe('ThirdPartyAuth', () => {
       window.location = { href: getConfig().BASE_URL };
 
       render(routerWrapper(reduxWrapper(<RegistrationPage {...props} />)));
-      expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl);
+      await waitFor(() => {
+        expect(window.location.href).toBe(getConfig().LMS_BASE_URL + authCompleteUrl);
+      }, { timeout: 1100 });
     });
 
     // ******** test alert messages ********

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/hooks.js

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
+
+import messages from '../messages';
+
+const useRecaptchaSubmission = (actionName = 'submit') => {
+  const { formatMessage } = useIntl();
+  const { executeRecaptcha } = useGoogleReCaptcha();
+  const recaptchaKey = getConfig().RECAPTCHA_SITE_KEY_WEB;
+
+  const isReady = !!executeRecaptcha || !recaptchaKey;
+
+  const executeWithFallback = useCallback(async () => {
+    if (executeRecaptcha && recaptchaKey) {
+      const token = await executeRecaptcha(actionName);
+      if (!token) {
+        throw new Error(formatMessage(messages['registration.captcha.verification.label']));
+      }
+      return token;
+    }
+
+    // Fallback: no reCAPTCHA or not ready
+    if (recaptchaKey) {
+      // eslint-disable-next-line no-console
+      console.warn(`reCAPTCHA not ready for action: ${actionName}. Proceeding without token.`);
+    }
+    return null;
+  }, [executeRecaptcha, recaptchaKey, actionName, formatMessage]);
+
+  return {
+    executeWithFallback,
+    isReady,
+    isLoading: recaptchaKey && !executeRecaptcha,
+  };
+};
+
+export default useRecaptchaSubmission;

src/register/data/hooks.test.jsx

@@ -0,0 +1,90 @@
+import { getConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderHook } from '@testing-library/react';
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
+
+import useRecaptchaSubmission from './hooks';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+
+jest.mock('react-google-recaptcha-v3', () => ({
+  useGoogleReCaptcha: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({ formatMessage: (msg) => msg.defaultMessage || msg }),
+}));
+
+describe('useRecaptchaSubmission', () => {
+  beforeEach(() => {
+    getConfig.mockReturnValue({ RECAPTCHA_SITE_KEY_WEB: 'test-key' });
+    useGoogleReCaptcha.mockReturnValue({ executeRecaptcha: jest.fn() });
+  });
+
+  it('should throw error if reCAPTCHA returns empty token', async () => {
+    useGoogleReCaptcha.mockReturnValue({
+      executeRecaptcha: jest.fn().mockResolvedValue(null),
+    });
+
+    const { result } = renderHook(() => useRecaptchaSubmission('test_action'), {
+      wrapper: ({ children }) => <IntlProvider locale="en">{children}</IntlProvider>,
+    });
+
+    await expect(result.current.executeWithFallback()).rejects.toThrow(
+      'CAPTCHA verification failed.',
+    );
+  });
+
+  it('should warn and return null if reCAPTCHA key exists but executeRecaptcha is not ready', async () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+
+    useGoogleReCaptcha.mockReturnValue({
+      executeRecaptcha: undefined,
+    });
+
+    const { result } = renderHook(() => useRecaptchaSubmission('test_action'), {
+      wrapper: ({ children }) => <IntlProvider locale="en">{children}</IntlProvider>,
+    });
+
+    const token = await result.current.executeWithFallback();
+
+    expect(token).toBeNull();
+    expect(warnSpy).toHaveBeenCalledWith(
+      'reCAPTCHA not ready for action: test_action. Proceeding without token.',
+    );
+
+    warnSpy.mockRestore();
+  });
+
+  it('should handle undefined RECAPTCHA_SITE_KEY_WEB gracefully', async () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+
+    getConfig.mockReturnValue({ RECAPTCHA_SITE_KEY_WEB: undefined });
+
+    const { result } = renderHook(() => useRecaptchaSubmission('test_action'), {
+      wrapper: ({ children }) => <IntlProvider locale="en">{children}</IntlProvider>,
+    });
+
+    const token = await result.current.executeWithFallback();
+
+    expect(token).toBeNull();
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it('should return token if reCAPTCHA succeeds', async () => {
+    useGoogleReCaptcha.mockReturnValue({
+      executeRecaptcha: jest.fn().mockResolvedValue('valid-token'),
+    });
+
+    const { result } = renderHook(() => useRecaptchaSubmission('test_action'), {
+      wrapper: ({ children }) => <IntlProvider locale="en">{children}</IntlProvider>,
+    });
+
+    const token = await result.current.executeWithFallback();
+    expect(token).toBe('valid-token');
+  });
+});

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,54 @@
+/* eslint-disable consistent-return */
+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;
+    }
+
+    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/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 {
-        const {
+        fieldError, confirmEmailError, suggestion,
-          fieldError, confirmEmailError, suggestion,
+      } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
-        } = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
+      if (fieldError) {
-        if (fieldError) {
+        fieldErrors.email = fieldError;
-          fieldErrors.email = fieldError;
+        isValid = false;
-          isValid = false;
-        }
-        if (confirmEmailError) {
-          fieldErrors.confirm_email = confirmEmailError;
-          isValid = false;
-        }
-        emailSuggestion = suggestion;
       }
+      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

@@ -206,6 +206,11 @@ const messages = defineMessages({
     defaultMessage: 'Did you mean',
     description: 'Did you mean alert suggestion',
   },
+  'registration.captcha.verification.label': {
+    id: 'registration.captcha.verification.label',
+    defaultMessage: 'CAPTCHA verification failed.',
+    description: 'CAPTCHA verification failed',
+  },
 });
 
 export default messages;

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

@@ -18,6 +18,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')),

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',
+    );
+  });
+});

webpack.dev.config.js

@@ -0,0 +1,26 @@
+const path = require('path');
+
+const { createConfig } = require('@openedx/frontend-build');
+const CopyPlugin = require('copy-webpack-plugin');
+
+const config = createConfig('webpack-dev');
+
+config.resolve.modules = [
+  path.resolve(__dirname, './src'),
+  'node_modules',
+];
+
+config.module.rules[0].exclude = /node_modules\/(?!(fastest-levenshtein|@edx))/;
+
+config.plugins.push(
+  new CopyPlugin({
+    patterns: [
+      {
+        from: path.resolve(__dirname, './public/robots.txt'),
+        to: path.resolve(__dirname, './dist/robots.txt'),
+      },
+    ],
+  }),
+);
+
+module.exports = config;

webpack.prod.config.js

@@ -1,7 +1,26 @@
+const path = require('path');
+
 const { createConfig } = require('@openedx/frontend-build');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const config = createConfig('webpack-prod');
 
+config.resolve.modules = [
+  path.resolve(__dirname, './src'),
+  'node_modules',
+];
+
 config.module.rules[0].exclude = /node_modules\/(?!(fastest-levenshtein|@edx))/;
 
+config.plugins.push(
+  new CopyPlugin({
+    patterns: [
+      {
+        from: path.resolve(__dirname, './public/robots.txt'),
+        to: path.resolve(__dirname, './dist/robots.txt'),
+      },
+    ],
+  }),
+);
+
 module.exports = config;