From 99850574fbdabd1dfcd920f1dc53d1022f6916b4 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
 <52817156+syedsajjadkazmii@users.noreply.github.com>
Date: Thu, 18 Apr 2024 11:04:28 +0500
Subject: [PATCH] feat: add multi step registration eventing (#1226)

* feat: implement multi step registration experiment

* feat: add multi step registration eventing
---
 src/common-components/SocialAuthProviders.jsx | 14 ++++-
 src/common-components/ThirdPartyAuth.jsx      |  4 ++
 .../data/optimizelyExperiment/track.js        | 56 +++++++++++++++++++
 ...ltiStepRegistrationExperimentVariation.jsx |  2 +
 4 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/register/data/optimizelyExperiment/track.js

diff --git a/src/common-components/SocialAuthProviders.jsx b/src/common-components/SocialAuthProviders.jsx
index abe06da7..5cdb04e0 100644
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -9,14 +9,24 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
+import { CONTROL, MULTI_STEP_REGISTRATION_EXP_VARIATION } from '../register/data/optimizelyExperiment/helper';
+import { trackMultiStepRegistrationSSOBtnClicked } from '../register/data/optimizelyExperiment/track';
 
 const SocialAuthProviders = (props) => {
   const { formatMessage } = useIntl();
-  const { referrer, socialAuthProviders } = props;
+  const {
+    referrer,
+    socialAuthProviders,
+    multiStepRegistrationExpVariation,
+  } = props;
 
   function handleSubmit(e) {
     e.preventDefault();
 
+    if (multiStepRegistrationExpVariation === CONTROL
+        || multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
+      trackMultiStepRegistrationSSOBtnClicked(multiStepRegistrationExpVariation);
+    }
     const url = e.currentTarget.dataset.providerUrl;
     window.location.href = getConfig().LMS_BASE_URL + url;
   }
@@ -60,6 +70,7 @@ const SocialAuthProviders = (props) => {
 SocialAuthProviders.defaultProps = {
   referrer: LOGIN_PAGE,
   socialAuthProviders: [],
+  multiStepRegistrationExpVariation: '',
 };
 
 SocialAuthProviders.propTypes = {
@@ -73,6 +84,7 @@ SocialAuthProviders.propTypes = {
     registerUrl: PropTypes.string,
     skipRegistrationForm: PropTypes.bool,
   })),
+  multiStepRegistrationExpVariation: PropTypes.string,
 };
 
 export default SocialAuthProviders;
diff --git a/src/common-components/ThirdPartyAuth.jsx b/src/common-components/ThirdPartyAuth.jsx
index 7dcef3e1..406c8cf8 100644
--- a/src/common-components/ThirdPartyAuth.jsx
+++ b/src/common-components/ThirdPartyAuth.jsx
@@ -32,6 +32,7 @@ const ThirdPartyAuth = (props) => {
     handleInstitutionLogin,
     thirdPartyAuthApiStatus,
     isLoginPage,
+    multiStepRegistrationExpVariation,
   } = props;
   const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
   const isSocialAuthActive = !!providers.length && !currentProvider;
@@ -79,6 +80,7 @@ const ThirdPartyAuth = (props) => {
               <SocialAuthProviders
                 socialAuthProviders={providers}
                 referrer={isLoginPage ? LOGIN_PAGE : REGISTER_PAGE}
+                multiStepRegistrationExpVariation={multiStepRegistrationExpVariation}
               />
             </div>
           )}
@@ -94,6 +96,7 @@ ThirdPartyAuth.defaultProps = {
   secondaryProviders: [],
   thirdPartyAuthApiStatus: PENDING_STATE,
   isLoginPage: false,
+  multiStepRegistrationExpVariation: '',
 };
 
 ThirdPartyAuth.propTypes = {
@@ -121,6 +124,7 @@ ThirdPartyAuth.propTypes = {
   ),
   thirdPartyAuthApiStatus: PropTypes.string,
   isLoginPage: PropTypes.bool,
+  multiStepRegistrationExpVariation: PropTypes.string,
 };
 
 export default ThirdPartyAuth;
diff --git a/src/register/data/optimizelyExperiment/track.js b/src/register/data/optimizelyExperiment/track.js
new file mode 100644
index 00000000..8db71809
--- /dev/null
+++ b/src/register/data/optimizelyExperiment/track.js
@@ -0,0 +1,56 @@
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+export const eventNames = {
+  multiStepRegistrationStep1Viewed: 'edx.bi.user.multistepregistration.step1.viewed',
+  multiStepRegistrationStep2Viewed: 'edx.bi.user.multistepregistration.step2.viewed',
+  multiStepRegistrationStep3Viewed: 'edx.bi.user.multistepregistration.step3.viewed',
+  multiStepRegistrationStep1SubmitBtnClicked: 'edx.bi.user.registration.step1.submit.click',
+  multiStepRegistrationStep2SubmitBtnClicked: 'edx.bi.user.registration.step2.submit.click',
+  multiStepRegistrationStep3SubmitBtnClicked: 'edx.bi.user.registration.step3.submit.click',
+  multiStepRegistrationFormSubmitBtnClicked: 'edx.bi.user.registration.form.submit.click',
+  multiStepRegistrationSSOBtnClicked: 'edx.bi.user.registration.sso.btn.click',
+};
+
+export const trackMultiStepRegistrationStep1Viewed = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep1Viewed, {
+    variation: expVariation,
+  });
+};
+
+export const trackMultiStepRegistrationStep2Viewed = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep2Viewed, {
+    variation: expVariation,
+  });
+};
+
+export const trackMultiStepRegistrationStep3Viewed = () => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep3Viewed, {});
+};
+
+export const trackMultiStepRegistrationStep1SubmitBtnClicked = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep1SubmitBtnClicked, {
+    variation: expVariation,
+  });
+};
+
+export const trackMultiStepRegistrationStep2SubmitBtnClicked = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep2SubmitBtnClicked, {
+    variation: expVariation,
+  });
+};
+
+export const trackMultiStepRegistrationStep3SubmitBtnClicked = () => {
+  sendTrackEvent(eventNames.multiStepRegistrationStep3SubmitBtnClicked, {});
+};
+
+export const trackMultiStepRegistrationFormSubmitBtnClicked = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationFormSubmitBtnClicked, {
+    variation: expVariation,
+  });
+};
+
+export const trackMultiStepRegistrationSSOBtnClicked = (expVariation) => {
+  sendTrackEvent(eventNames.multiStepRegistrationSSOBtnClicked, {
+    variation: expVariation,
+  });
+};
diff --git a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
index 692101b7..97d0a233 100644
--- a/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
+++ b/src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
@@ -5,6 +5,7 @@ import {
   getMultiStepRegistrationExperimentVariation,
   NOT_INITIALIZED,
 } from './helper';
+import { trackMultiStepRegistrationStep1Viewed } from './track';
 import { COMPLETE_STATE } from '../../../data/constants';
 
 /**
@@ -30,6 +31,7 @@ const useMultiStepRegistrationExperimentVariation = (
       const expVariation = getMultiStepRegistrationExperimentVariation();
       if (expVariation) {
         setVariation(expVariation);
+        trackMultiStepRegistrationStep1Viewed(expVariation);
       } else {
         // This is to handle the case when user dont get variation for some reason, the register page
         // shows unlimited spinner.