fix: added checks both standard and vendor-prefixed autofill

chore: rebase 2u-main

.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

.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'

.env.test

@@ -18,3 +18,5 @@ SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+COHESION_WRITE_KEY=''
+COHESION_SOURCE_KEY=''

.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-lock.json

@@ -16,6 +16,7 @@
         "@fortawesome/free-brands-svg-icons": "6.7.1",
         "@fortawesome/free-solid-svg-icons": "6.7.1",
         "@fortawesome/react-fontawesome": "0.2.2",
+        "@openedx/frontend-plugin-framework": "^1.3.0",
         "@openedx/paragon": "^22.1.1",
         "@optimizely/react-sdk": "^2.9.1",
         "@redux-devtools/extension": "3.3.0",
@@ -31,6 +32,7 @@
         "query-string": "7.1.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-error-boundary": "^4.0.13",
         "react-helmet": "6.1.0",
         "react-loading-skeleton": "3.5.0",
         "react-redux": "7.2.9",
@@ -3451,6 +3453,37 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@openedx/frontend-plugin-framework": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.3.0.tgz",
+      "integrity": "sha512-qLtX/4HIuWXiIhBdtBuL6mPVbV2un0rsFYx3I5+3tIUf7+T7WRq81a6JHU5QGyAmZy9dfiv7QwbqwiEQOVXVuQ==",
+      "dependencies": {
+        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+        "classnames": "^2.3.2",
+        "core-js": "3.37.1",
+        "react-redux": "7.2.9",
+        "redux": "4.2.1",
+        "regenerator-runtime": "0.14.1"
+      },
+      "peerDependencies": {
+        "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
+        "@openedx/paragon": "^21.0.0 || ^22.0.0",
+        "prop-types": "^15.8.0",
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0",
+        "react-error-boundary": "^4.0.11"
+      }
+    },
+    "node_modules/@openedx/frontend-plugin-framework/node_modules/core-js": {
+      "version": "3.37.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz",
+      "integrity": "sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/@openedx/paragon": {
       "version": "22.10.0",
       "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.10.0.tgz",
@@ -4127,6 +4160,21 @@
         }
       }
     },
+    "node_modules/@testing-library/react-hooks/node_modules/react-error-boundary": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+      "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "license": "MIT",
@@ -13460,15 +13508,12 @@
       }
     },
     "node_modules/react-error-boundary": {
-      "version": "3.1.4",
-      "license": "MIT",
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
+      "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
-      "engines": {
-        "node": ">=10",
-        "npm": ">=6"
-      },
       "peerDependencies": {
         "react": ">=16.13.1"
       }

package.json

@@ -39,6 +39,7 @@
     "@fortawesome/free-brands-svg-icons": "6.7.1",
     "@fortawesome/free-solid-svg-icons": "6.7.1",
     "@fortawesome/react-fontawesome": "0.2.2",
+    "@openedx/frontend-plugin-framework": "^1.3.0",
     "@openedx/paragon": "^22.1.1",
     "@optimizely/react-sdk": "^2.9.1",
     "@redux-devtools/extension": "3.3.0",
@@ -54,6 +55,7 @@
     "query-string": "7.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-error-boundary": "^4.0.13",
     "react-helmet": "6.1.0",
     "react-loading-skeleton": "3.5.0",
     "react-redux": "7.2.9",

public/index.html

@@ -1,25 +1,30 @@
-<!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>    
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon"/>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.4.4/iframeResizer.contentWindow.min.js"
-              integrity="sha512-IWwZFBvHzN41wNI6etRLLuLrDDj/6AwJcPt7cmKJAzluYTIHHQ1PF8wh0rSy05jxEvvjflVvH2MxeV6riyEEXg=="
-              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>
-      <% } %>
+    <title>
+      <%= (process.env.SITE_NAME && process.env.SITE_NAME !='null' ) ?
+      'Authentication | ' + process.env.SITE_NAME : 'Authentication' %>
+    </title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="shortcut icon"
+      href="<%=htmlWebpackPlugin.options.FAVICON_URL%>"
+      type="image/x-icon"
+    />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.4.4/iframeResizer.contentWindow.min.js"
+      integrity="sha512-IWwZFBvHzN41wNI6etRLLuLrDDj/6AwJcPt7cmKJAzluYTIHHQ1PF8wh0rSy05jxEvvjflVvH2MxeV6riyEEXg=="
+      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>

src/MainApp.jsx

@@ -6,7 +6,7 @@ import { Helmet } from 'react-helmet';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import {
-  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
+  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute,
 } from './common-components';
 import configureStore from './data/configureStore';
 import {
@@ -22,21 +22,90 @@ 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';
 import { ResetPasswordPage } from './reset-password';
 
 import './index.scss';
+import './cohesion/cohesion.scss';
 
 registerIcons();
 
 const MainApp = () => (
   <AppProvider store={configureStore()}>
     <Helmet>
+      {/* Cohesion Snippet */}
+      <script>
+        {`!function (co, h, e, s, i, o, n) {
+        var d = 'documentElement'; var a = 'className'; h[d][a] += ' preampjs fusejs';
+        n.k = e; co._Cohesion = n; co._Preamp = { k: s, start: new Date }; co._Fuse = { k: i }; co._Tagular = { k: o };
+        [e, s, i, o].map(function (x) { co[x] = co[x] || function () { (co[x].q = co[x].q || []).push([].slice.call(arguments)) } });
+        var b = function () { var u = h[d][a]; h[d][a] = u.replace(/ ?preampjs| ?fusejs/g, '') };
+        h.addEventListener('DOMContentLoaded', function () {
+            co.setTimeout(b, 3e3);
+            co._Preamp.docReady = co._Fuse.docReady = !0
+        }); var z = h.createElement('script');
+        z.async = 1; z.src = 'https://beam.edx.org/cohesion/cohesion-latest.min.js';
+        z.onerror = function () { var ce = 'error',f = 'function'; for (var o of co[e].q || []) o[0] === ce && typeof o[1] == f && o[1](); co[e] = function (n, cb) { n === ce && typeof cb == f && cb() }; b() };
+        h.head.appendChild(z);
+      }
+      (window, document, 'cohesion', 'preamp', 'fuse', 'tagular', {
+        tagular: {
+          apiHost: 'https://beam.edx.org/v2/t',
+          writeKey: "${process.env.COHESION_WRITE_KEY}",
+          sourceKey: "${process.env.COHESION_SOURCE_KEY}",
+          cookieDomain: 'edx.org',
+          domainWhitelist: ["edx.org"],
+          apiVersion: 'v2/t',
+          multiparty: true,
+          useBeacon: true,
+        },
+        consent: {
+          onetrust: {
+              enabled: true,
+              optIn: true
+          },
+          required: true,
+          domain: '.edx.org',
+        },
+      });`}
+      </script>
+
+      {/* Stitch Cohesion and Segment IDs */}
+      <script>
+        {`cohesion("tagular:ready", function () {
+            window.analytics.ready(function () {
+              const cohesionAnonymId = window.tagular("getAliasSet")["anonymousId"];
+              const segmentAnonymId = window.analytics.user().anonymousId();
+              const segmentUserId = window.analytics.user().id();
+              window.analytics.identify(segmentUserId, {
+                cohesion_anonymous_id: cohesionAnonymId,
+              });
+              window.tagular("beam", {
+                "@type": "core.Identify.v1",
+                traits: {},
+                externalIds: [
+                  {
+                    id: segmentAnonymId,
+                    type: "segment_anonymous_id",
+                    collection: "users",
+                    encoding: "none",
+                  },
+                  {
+                    id: cohesionAnonymId,
+                    type: "cohesion_anonymous_id",
+                    collection: "users",
+                    encoding: "none",
+                  },
+                ],
+              });
+            });
+          });`}
+      </script>
       <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
     </Helmet>
-    {getConfig().ZENDESK_KEY && <Zendesk />}
     <Routes>
       <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
       <Route
@@ -57,6 +126,7 @@ const MainApp = () => (
       <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
       <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
     </Routes>
+    <MainAppSlot />
   </AppProvider>
 );
 

src/cohesion/cohesion.scss

@@ -0,0 +1,4 @@
+.preampjs [data-preamp],
+.fusejs [data-fuse] {
+  opacity: 0 !important;
+}

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/FormGroup.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import {
   Form, TransitionReplace,
@@ -7,6 +7,38 @@ import PropTypes from 'prop-types';
 
 const FormGroup = (props) => {
   const [hasFocus, setHasFocus] = useState(false);
+  const [isAutoFill, setIsAutoFill] = useState(false);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    const checkAutoFill = () => {
+      if (inputRef.current) {
+        // Check both standard and vendor-prefixed autofill
+        const isAutoFillField = inputRef.current.matches(
+          ':autofill, :-webkit-autofill',
+        );
+        setIsAutoFill(isAutoFillField);
+      }
+    };
+    const observer = new MutationObserver(checkAutoFill);
+    if (inputRef.current) {
+      // Check immediately on mount
+      checkAutoFill();
+
+      // Configure observer to watch style changes only
+      observer.observe(inputRef.current, {
+        attributes: true,
+        attributeFilter: ['style'], // Autofill often changes styles
+      });
+      // Fallback check for browser timing issues
+      const timeoutId = setTimeout(checkAutoFill, 100);
+      return () => {
+        observer.disconnect();
+        clearTimeout(timeoutId);
+      };
+    }
+    return () => observer.disconnect();
+  }, []);
 
   const handleFocus = (e) => {
     setHasFocus(true);
@@ -23,6 +55,7 @@ const FormGroup = (props) => {
   return (
     <Form.Group controlId={props.name} className={props.className} isInvalid={props.errorMessage !== ''}>
       <Form.Control
+        ref={inputRef}
         as={props.as}
         readOnly={props.readOnly}
         type={props.type}
@@ -39,6 +72,7 @@ const FormGroup = (props) => {
         controlClassName={props.borderClass}
         trailingElement={props.trailingElement}
         floatingLabel={props.floatingLabel}
+        isAutoFill={isAutoFill}
       >
         {props.options ? props.options() : null}
       </Form.Control>

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) => {
         />
       );
     }
-
-    window.location.href = finalRedirectUrl;
+    redirectWithDelay(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/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 {
-  DEFAULT_REDIRECT_URL,
-} from '../data/constants';
+import { RESET_PAGE } from '../data/constants';
+import { updatePathWithQueryParams } from '../data/utils';
 
 /**
  * This wrapper redirects the requester to our default redirect url if they are
@@ -25,7 +24,12 @@ const UnAuthOnlyRoute = ({ children }) => {
 
   if (isReady) {
     if (authUser && authUser.username) {
-      global.location.href = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+      const updatedPath = updatePathWithQueryParams(window.location.pathname);
+      if (updatedPath.startsWith(RESET_PAGE)) {
+        global.location.href = getConfig().LMS_BASE_URL;
+        return null;
+      }
+      global.location.href = getConfig().LMS_BASE_URL.concat(updatedPath);
       return null;
     }
 

src/common-components/data/constants.js

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

src/common-components/data/sagas.js

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

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

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

src/config/index.js

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

src/data/constants.js

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

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

src/index.jsx

@@ -12,6 +12,7 @@ import { ErrorPage } from '@edx/frontend-platform/react';
 import configuration from './config';
 import messages from './i18n';
 import MainApp from './MainApp';
+import './cohesion/cohesion.scss';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(

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 = (
-        <Alert.Link href={getConfig().ACTIVATION_EMAIL_SUPPORT_LINK}>
-          {formatMessage(messages['account.activation.support.link'])}
-        </Alert.Link>
+      const supportEmail = (
+        <Hyperlink isInline destination={`mailto:${getConfig().INFO_EMAIL}`}>{getConfig().INFO_EMAIL}</Hyperlink>
       );
 
       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 React, { 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 { injectIntl, 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 {
-  DEFAULT_STATE, PENDING_STATE, RESET_PAGE,
-} from '../data/constants';
+import { 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

@@ -58,7 +58,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(
       '',
@@ -121,7 +121,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,18 +1,30 @@
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, 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 IntlChangePasswordPrompt = injectIntl(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')),
@@ -21,8 +33,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 => ({
@@ -31,38 +49,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>
-          <IntlChangePasswordPrompt {...props} />
-        </MemoryRouter>
+        <Provider store={store}>
+          <MemoryRouter>
+            <IntlChangePasswordPrompt {...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>
-          <IntlChangePasswordPrompt {...props} />
-        </MemoryRouter>
+        <Provider store={store}>
+          <MemoryRouter>
+            <IntlChangePasswordPrompt {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );
 

src/login/tests/LoginFailure.test.jsx

@@ -1,10 +1,12 @@
 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,
@@ -25,13 +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 => ({
@@ -298,11 +314,19 @@ describe('LoginFailureMessage', () => {
       errorCount: 0,
     };
 
+    store = mockStore({
+      ...initialState,
+      cohesion: {
+        eventData,
+      },
+    });
     render(
       <IntlProvider locale="en">
-        <MemoryRouter>
-          <IntlLoginFailureMessage {...props} />
-        </MemoryRouter>
+        <Provider store={store}>
+          <MemoryRouter>
+            <IntlLoginFailureMessage {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );
 
@@ -323,12 +347,20 @@ describe('LoginFailureMessage', () => {
       errorCode: REQUIRE_PASSWORD_CHANGE,
       errorCount: 0,
     };
+    store = mockStore({
+      ...initialState,
+      cohesion: {
+        eventData,
+      },
+    });
 
     render(
       <IntlProvider locale="en">
-        <MemoryRouter>
-          <IntlLoginFailureMessage {...props} />
-        </MemoryRouter>
+        <Provider store={store}>
+          <MemoryRouter>
+            <IntlLoginFailureMessage {...props} />
+          </MemoryRouter>
+        </Provider>
       </IntlProvider>,
     );
 

src/login/tests/LoginPage.test.jsx

@@ -11,7 +11,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';
@@ -23,6 +26,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthService: jest.fn(),
 }));
+mockTagular();
 
 const IntlLoginPage = injectIntl(LoginPage);
 const mockStore = configureStore();
@@ -56,6 +60,7 @@ describe('LoginPage', () => {
     register: {
       validationApiRateLimited: false,
     },
+    cohesion: { eventData: {} },
   };
 
   const secondaryProviders = {
@@ -510,7 +515,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,
@@ -526,10 +531,12 @@ describe('LoginPage', () => {
     delete window.location;
     window.location = { href: getConfig().BASE_URL };
     render(reduxWrapper(<IntlLoginPage {...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,
@@ -553,10 +560,12 @@ describe('LoginPage', () => {
     window.location = { href: getConfig().BASE_URL };
 
     render(reduxWrapper(<IntlLoginPage {...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: {
@@ -577,10 +586,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,
@@ -601,7 +612,9 @@ describe('LoginPage', () => {
     window.location = { href: getConfig().BASE_URL };
 
     render(reduxWrapper(<IntlLoginPage {...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 ********
@@ -751,7 +764,7 @@ describe('LoginPage', () => {
 
   it('should send page event when login page is rendered', () => {
     render(reduxWrapper(<IntlLoginPage {...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', () => {
@@ -784,7 +797,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,7 @@ 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

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

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(
-        'edx.bi.user.recommendations.not.enabled',
+      trackDisablePostRegistrationRecommendations(
         { functionalCookiesConsent, page: 'authn_recommendations' },
       );
       return;
@@ -149,29 +155,23 @@ const ProgressiveProfiling = (props) => {
       });
     }
     props.saveUserProfile(authenticatedUser.username, snakeCaseObject(payload));
-
-    sendTrackEvent(
-      'edx.bi.welcome.page.submit.clicked',
-      {
-        isGenderSelected: !!values.gender,
-        isYearOfBirthSelected: !!values.year_of_birth,
-        isLevelOfEducationSelected: !!values.level_of_education,
-        isWorkExperienceSelected: !!values.work_experience,
-        host: queryParams?.host || '',
-      },
-    );
+    const eventProperties = {
+      isGenderSelected: !!values.gender,
+      isYearOfBirthSelected: !!values.year_of_birth,
+      isLevelOfEducationSelected: !!values.level_of_education,
+      isWorkExperienceSelected: !!values.work_experience,
+      host: queryParams?.host || '',
+    };
+    trackProgressiveProfilingSubmitClick(eventProperties);
   };
 
   const handleSkip = (e) => {
     e.preventDefault();
     window.history.replaceState(location.state, null, '');
     setShowModal(true);
-    sendTrackEvent(
-      'edx.bi.welcome.page.skip.link.clicked',
-      {
-        host: queryParams?.host || '',
-      },
-    );
+    trackProgressiveProfilingSkipLinkClick({
+      host: queryParams?.host || '',
+    });
   };
 
   const onChangeHandler = (e) => {
@@ -242,7 +242,7 @@ const ProgressiveProfiling = (props) => {
                     destination={getConfig().AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK}
                     target="_blank"
                     showLaunchIcon={false}
-                    onClick={() => (sendTrackEvent('edx.bi.welcome.page.support.link.clicked'))}
+                    onClick={() => (trackProgressiveProfilingSupportLinkCLick())}
                   >
                     {formatMessage(messages['optional.fields.information.link'])}
                   </Hyperlink>

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

@@ -6,12 +6,14 @@ import { identifyAuthenticatedUser, sendTrackEvent } from '@edx/frontend-platfor
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { configure, injectIntl, 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,
@@ -24,6 +26,7 @@ import ProgressiveProfiling from '../ProgressiveProfiling';
 
 const IntlProgressiveProfilingPage = injectIntl(ProgressiveProfiling);
 const mockStore = configureStore();
+mockTagular();
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendPageEvent: jest.fn(),
@@ -54,6 +57,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 = {};
 
@@ -143,8 +153,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 ********
@@ -165,7 +176,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', () => {
@@ -175,6 +186,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) };
@@ -249,6 +261,9 @@ describe('ProgressiveProfilingTests', () => {
           ...initialState.welcomePage,
           success: true,
         },
+        cohesion: {
+          eventData,
+        },
       });
       const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
       const nextButton = container.querySelector('button.btn-brand');
@@ -275,13 +290,18 @@ describe('ProgressiveProfilingTests', () => {
           ...initialState.welcomePage,
           success: true,
         },
+        cohesion: {
+          eventData,
+        },
       });
 
       const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
       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 });
     });
   });
 
@@ -316,7 +336,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', () => {
@@ -349,6 +369,7 @@ describe('ProgressiveProfilingTests', () => {
         isLevelOfEducationSelected: false,
         isWorkExperienceSelected: false,
         host: 'http://example.com',
+        app_name: APP_NAME,
       };
       delete window.location;
       window.location = {
@@ -395,7 +416,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 = {
@@ -417,12 +438,17 @@ describe('ProgressiveProfilingTests', () => {
           ...initialState.welcomePage,
           success: true,
         },
+        cohesion: {
+          eventData,
+        },
       });
 
       render(reduxWrapper(<IntlProgressiveProfilingPage />));
       const submitButton = screen.getByText('Submit');
       fireEvent.click(submitButton);
-      expect(window.location.href).toBe(redirectUrl);
+      await waitFor(() => {
+        expect(window.location.href).toBe(redirectUrl);
+      }, { timeout: 1100 });
     });
   });
 });