feat: fire identify call and register event (#951)

VAN-1499

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 { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
   AxiosJwtAuthService,
   configure as configureAuth,
@@ -105,11 +105,10 @@ const ProgressiveProfiling = (props) => {
   }, [registrationEmbedded, welcomePageContext]);
 
   useEffect(() => {
-    if (canViewWelcomePage && authenticatedUser?.userId) {
-      identifyAuthenticatedUser(authenticatedUser.userId);
+    if (canViewWelcomePage) {
       sendPageEvent('login_and_registration', 'welcome');
     }
-  }, [authenticatedUser, canViewWelcomePage]);
+  }, [canViewWelcomePage]);
 
   useEffect(() => {
     if (registrationResult.redirectUrl && authenticatedUser?.userId) {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
-import { identifyAuthenticatedUser, sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
@@ -27,7 +27,6 @@ const mockStore = configureStore();
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendPageEvent: jest.fn(),
   sendTrackEvent: jest.fn(),
-  identifyAuthenticatedUser: jest.fn(),
 }));
 jest.mock('@edx/frontend-platform/auth', () => ({
   configure: jest.fn(),
@@ -134,13 +133,6 @@ describe('ProgressiveProfilingTests', () => {
     expect(progressiveProfilingPage.find('a.pgn__hyperlink').text()).toEqual('Learn more about how we use this information.');
   });
 
-  it('should make identify call to segment on progressive profiling page', async () => {
-    getAuthenticatedUser.mockReturnValue({ userId: 3, username: 'abc123' });
-    await getProgressiveProfilingPage();
-    expect(identifyAuthenticatedUser).toHaveBeenCalledWith(3);
-    expect(identifyAuthenticatedUser).toHaveBeenCalled();
-  });
-
   it('should submit user profile details on form submission', async () => {
     getAuthenticatedUser.mockReturnValue({ userId: 3, username: 'abc123' });
     const formPayload = {

src/register/RegistrationPage.jsx

@@ -4,7 +4,7 @@ import React, {
 import { connect } from 'react-redux';
 
 import { getConfig, snakeCaseObject } from '@edx/frontend-platform';
-import { sendPageEvent } from '@edx/frontend-platform/analytics';
+import { identifyAuthenticatedUser, sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
   getCountryList, getLocale, useIntl,
 } from '@edx/frontend-platform/i18n';
@@ -235,8 +235,30 @@ const RegistrationPage = (props) => {
       window.dataLayer.push({
         event: 'ImpactRegistrationEvent',
       });
+
+      // preparing identify call traits
+      const traits = { ...formFields };
+      delete traits.password;
+      traits.country = configurableFormFields?.country?.countryCode;
+      traits.is_marketable = configurableFormFields.marketingEmailsOptIn;
+      traits.email_subscribe = configurableFormFields.marketingEmailsOptIn ? 'subscribed' : 'unsubscribed';
+      identifyAuthenticatedUser(registrationResult.userId, traits);
+
+      // preparing register event properties
+      const properties = {
+        category: 'conversion',
+        email: formFields.email,
+        label: queryParams?.course_id || null,
+        provider: currentProvider?.name || null,
+        host: queryParams?.host || '',
+        marketing_emails_opt_in: configurableFormFields.marketingEmailsOptIn,
+      };
+      sendTrackEvent(
+        'edx.bi.user.account.registered.client',
+        properties,
+      );
     }
-  }, [registrationResult]);
+  }, [registrationResult]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const validateInput = (fieldName, value, payload, shouldValidateFromBackend, setError = true) => {
     let fieldError = '';
@@ -312,7 +334,7 @@ const RegistrationPage = (props) => {
         break;
       default:
         if (flags.showConfigurableRegistrationFields) {
-          if (!value && fieldDescriptions[fieldName].error_message) {
+          if (!value && fieldDescriptions[fieldName]?.error_message) {
             fieldError = fieldDescriptions[fieldName].error_message;
           } else if (fieldName === 'confirm_email' && formFields.email && value !== formFields.email) {
             fieldError = formatMessage(messages['email.do.not.match']);
@@ -468,7 +490,7 @@ const RegistrationPage = (props) => {
     const { fieldError: focusedFieldError, countryFieldCode } = focusedField ? (
       validateInput(
         focusedField,
-        (focusedField in fieldDescriptions || focusedField === 'country') ? (
+        (focusedField in fieldDescriptions || ['country', 'marketingEmailsOptIn'].includes(focusedField)) ? (
           configurableFormFields[focusedField]
         ) : formFields[focusedField],
         payload,
@@ -710,6 +732,7 @@ RegistrationPage.propTypes = {
   registrationResult: PropTypes.shape({
     redirectUrl: PropTypes.string,
     success: PropTypes.bool,
+    userId: PropTypes.number,
   }),
   shouldBackupState: PropTypes.bool,
   submitState: PropTypes.string,

src/register/data/actions.js

@@ -47,9 +47,9 @@ export const registerNewUserBegin = () => ({
   type: REGISTER_NEW_USER.BEGIN,
 });
 
-export const registerNewUserSuccess = (redirectUrl, success) => ({
+export const registerNewUserSuccess = (redirectUrl, success, userId) => ({
   type: REGISTER_NEW_USER.SUCCESS,
-  payload: { redirectUrl, success },
+  payload: { redirectUrl, success, userId },
 
 });
 

src/register/data/sagas.js

@@ -19,11 +19,12 @@ export function* handleNewUserRegistration(action) {
   try {
     yield put(registerNewUserBegin());
 
-    const { redirectUrl, success } = yield call(registerRequest, action.payload.registrationInfo);
+    const { redirectUrl, success, userId } = yield call(registerRequest, action.payload.registrationInfo);
 
     yield put(registerNewUserSuccess(
       redirectUrl,
       success,
+      userId,
     ));
   } catch (e) {
     const statusCodes = [400, 403, 409];

src/register/data/service.js

@@ -21,6 +21,7 @@ export async function registerRequest(registrationInformation) {
   return {
     redirectUrl: data.redirect_url || `${getConfig().LMS_BASE_URL}/dashboard`,
     success: data.success || false,
+    userId: data?.user_id,
   };
 }
 

src/register/tests/RegistrationPage.test.jsx

@@ -31,6 +31,7 @@ import RegistrationPage from '../RegistrationPage';
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendPageEvent: jest.fn(),
   sendTrackEvent: jest.fn(),
+  identifyAuthenticatedUser: jest.fn(),
 }));
 jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),