From 2a6668cef362760600469d99222e17cc6d5afe4d Mon Sep 17 00:00:00 2001 From: Syed Sajjad Hussain Shah <52817156+syedsajjadkazmii@users.noreply.github.com> Date: Wed, 21 Jun 2023 15:36:58 +0500 Subject: [PATCH] feat: fire identify call and register event (#951) VAN-1499 --- .../ProgressiveProfiling.jsx | 7 ++--- .../tests/ProgressiveProfiling.test.jsx | 10 +----- src/register/RegistrationPage.jsx | 31 ++++++++++++++++--- src/register/data/actions.js | 4 +-- src/register/data/sagas.js | 3 +- src/register/data/service.js | 1 + src/register/tests/RegistrationPage.test.jsx | 1 + 7 files changed, 37 insertions(+), 20 deletions(-) diff --git a/src/progressive-profiling/ProgressiveProfiling.jsx b/src/progressive-profiling/ProgressiveProfiling.jsx index f40c17c5..3c7ecce3 100644 --- a/src/progressive-profiling/ProgressiveProfiling.jsx +++ b/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) { diff --git a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx index adf9e61f..ccd219fb 100644 --- a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx +++ b/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 = { diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index 8e78b3ba..306ad24c 100644 --- a/src/register/RegistrationPage.jsx +++ b/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, diff --git a/src/register/data/actions.js b/src/register/data/actions.js index ce7a4bff..81d00190 100644 --- a/src/register/data/actions.js +++ b/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 }, }); diff --git a/src/register/data/sagas.js b/src/register/data/sagas.js index 09a1b12e..b38d3d11 100644 --- a/src/register/data/sagas.js +++ b/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]; diff --git a/src/register/data/service.js b/src/register/data/service.js index 36229016..05235763 100644 --- a/src/register/data/service.js +++ b/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, }; } diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx index b50c730a..bdf0416e 100644 --- a/src/register/tests/RegistrationPage.test.jsx +++ b/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'),