fix: triggered login event on success (#1331)

* fix: triggered login event on success

* fix: fixed failing test cases

---------

Co-authored-by: ayeshoali <ayeshoali@gmail.com>

src/common-components/RedirectLogistration.jsx

@@ -1,7 +1,10 @@
+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';
@@ -21,9 +24,12 @@ const RedirectLogistration = (props) => {
     registrationEmbedded,
     host,
   } = props;
+  const cohesionEventData = useSelector(state => state.cohesion.eventData);
   let finalRedirectUrl = '';
 
   if (success) {
+    // This event is used by cohestion upon successful login
+    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

src/login/LoginPage.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { connect, useDispatch, useSelector } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, useIntl } from '@edx/frontend-platform/i18n';
@@ -24,7 +24,6 @@ import {
   ELEMENT_NAME, ELEMENT_TEXT, ELEMENT_TYPES, PAGE_TYPES,
 } from '../cohesion/constants';
 import { setCohesionEventStates } from '../cohesion/data/actions';
-import trackCohesionEvent from '../cohesion/trackers';
 import {
   FormGroup,
   InstitutionLogistration,
@@ -78,7 +77,6 @@ const LoginPage = (props) => {
   const dispatch = useDispatch();
   const activationMsgType = getActivationStatus();
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
-  const cohesionEventData = useSelector(state => state.cohesion.eventData);
 
   const [formFields, setFormFields] = useState({ ...backedUpFormData.formFields });
   const [errorCode, setErrorCode] = useState({ type: '', count: 0, context: {} });
@@ -92,13 +90,10 @@ const LoginPage = (props) => {
   useEffect(() => {
     if (loginResult.success) {
       trackLoginSuccess();
-      // This event is used by cohestion upon successful login
-      trackCohesionEvent(cohesionEventData);
-
       // Remove this cookie that was set to capture marketingEmailsOptIn for the onboarding component
       removeCookie('ssoPipelineRedirectionDone');
     }
-  }, [loginResult, cohesionEventData]);
+  }, [loginResult]);
 
   useEffect(() => {
     const payload = { ...queryParams };

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

@@ -11,6 +11,7 @@ import {
 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,
@@ -25,6 +26,7 @@ import ProgressiveProfiling from '../ProgressiveProfiling';
 
 const IntlProgressiveProfilingPage = injectIntl(ProgressiveProfiling);
 const mockStore = configureStore();
+mockTagular();
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendPageEvent: jest.fn(),
@@ -55,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 = {};
 
@@ -252,6 +261,9 @@ describe('ProgressiveProfilingTests', () => {
           ...initialState.welcomePage,
           success: true,
         },
+        cohesion: {
+          eventData,
+        },
       });
       const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
       const nextButton = container.querySelector('button.btn-brand');
@@ -278,6 +290,9 @@ describe('ProgressiveProfilingTests', () => {
           ...initialState.welcomePage,
           success: true,
         },
+        cohesion: {
+          eventData,
+        },
       });
 
       const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
@@ -421,6 +436,9 @@ describe('ProgressiveProfilingTests', () => {
           ...initialState.welcomePage,
           success: true,
         },
+        cohesion: {
+          eventData,
+        },
       });
 
       render(reduxWrapper(<IntlProgressiveProfilingPage />));