fix: restore missing Segment analytics events in Authn MFE

src/data/constants.js

@@ -9,7 +9,7 @@ export const RECOMMENDATIONS = '/recommendations';
 export const PASSWORD_RESET_CONFIRM = '/password_reset_confirm/:token/';
 export const PAGE_NOT_FOUND = '/notfound';
 export const ENTERPRISE_LOGIN_URL = '/enterprise/login';
-export const APP_NAME = 'authn';
+export const APP_NAME = 'authn_mfe';
 
 // Constants
 export const SUPPORTED_ICON_CLASSES = ['apple', 'facebook', 'google', 'microsoft'];

src/login/LoginPage.jsx

@@ -1,17 +1,20 @@
 import {
   useCallback, useEffect, useMemo, useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-
+import {
+  trackForgotPasswordLinkClick, trackLoginPageViewed, trackLoginSuccess,
+} from '../tracking/trackers/login';
+import { setCohesionEventStates } from '../cohesion/data/actions';
+import { ELEMENT_NAME, ELEMENT_TEXT, ELEMENT_TYPES, PAGE_TYPES } from '../cohesion/constants';
 import { getConfig } from '@edx/frontend-platform';
-import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Form, StatefulButton } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import Skeleton from 'react-loading-skeleton';
 import { Link } from 'react-router-dom';
-
+import { removeCookie } from '../data/utils/cookies';
 import {
   FormGroup,
   InstitutionLogistration,
@@ -20,7 +23,7 @@
   ThirdPartyAuthAlert,
 } from '../common-components';
 import AccountActivationMessage from './AccountActivationMessage';
 import { getThirdPartyAuthContext } from '../common-components/data/actions';
 import { thirdPartyAuthContextSelector } from '../common-components/data/selectors';
 import EnterpriseSSO from '../common-components/EnterpriseSSO';
 import ThirdPartyAuth from '../common-components/ThirdPartyAuth';
@@ -96,7 +99,7 @@
   const tpaHint = getTpaHint();
 
   useEffect(() => {
-    sendPageEvent('login_and_registration', 'login');
+    trackLoginPageViewed();
   }, []);
 
   useEffect(() => {
@@ -140,6 +143,13 @@
     }
   }, [thirdPartyErrorMessage]);
 
+  useEffect(() => {
+    if (loginResult.success) {
+      trackLoginSuccess();
+      removeCookie('ssoPipelineRedirectionDone');
+    }
+  }, [loginResult]);
+
   const validateFormFields = (payload) => {
     const {
       emailOrUsername,
@@ -183,6 +193,13 @@
       password: formData.password,
       ...queryParams,
     };
+    const eventData = {
+      pageType: PAGE_TYPES.SIGN_IN,
+      elementType: ELEMENT_TYPES.BUTTON,
+      webElementText: ELEMENT_TEXT.SIGN_IN,
+      webElementName: ELEMENT_NAME.SIGN_IN,
+    };
+    dispatch(setCohesionEventStates(eventData));
     dispatch(loginRequest(payload));
   };
 
@@ -204,9 +221,6 @@
       [name]: '',
     }));
   };
-  const trackForgotPasswordLinkClick = () => {
-    sendTrackEvent('edx.bi.password-reset_form.toggled', { category: 'user-engagement' });
-  };
 
   const {
     provider,
@@ -246,6 +260,7 @@
         success={loginResult.success}
         redirectUrl={loginResult.redirectUrl}
         finishAuthUrl={finishAuthUrl}
+        currectProvider={currentProvider}
       />
       <div className="mw-xs mt-3 mb-2">
         <LoginFailureMessage

src/logistration/Logistration.jsx

@@ -21,7 +21,7 @@ import {
   tpaProvidersSelector,
 } from '../common-components/data/selectors';
 import messages from '../common-components/messages';
-import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
+import { LOGIN_PAGE, REGISTER_PAGE, APP_NAME } from '../data/constants';
 import {
   getTpaHint, getTpaProvider, updatePathWithQueryParams,
 } from '../data/utils';
@@ -63,7 +63,7 @@ const Logistration = ({
       authService.getCsrfTokenService()
         .getCsrfToken(getConfig().LMS_BASE_URL);
     }
-  });
+  }, []);
 
   useEffect(() => {
     if (disablePublicAccountCreation) {
@@ -72,7 +72,7 @@ const Logistration = ({
   }, [navigate, disablePublicAccountCreation]);
 
   const handleInstitutionLogin = (e) => {
-    sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
+    sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement', app_name: APP_NAME });
     if (typeof e === 'string') {
       sendPageEvent('login_and_registration', e === '/login' ? 'login' : 'register');
     } else {
@@ -86,7 +86,7 @@ const Logistration = ({
     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 });
     dispatch(clearThirdPartyAuthContextErrorMessage());
     if (tabKey === LOGIN_PAGE) {
       dispatch(backupRegistrationForm());