From 182fb34a03e00fef59efb102d38c3287d1f67291 Mon Sep 17 00:00:00 2001 From: Shafqat Farhan Date: Wed, 9 Mar 2022 16:18:51 +0500 Subject: [PATCH] feat: VAN-876 - Rename register experiment with improved metrics (#537) --- src/_style.scss | 4 ++++ src/common-components/Logistration.jsx | 15 +----------- src/common-components/messages.jsx | 5 ---- src/data/constants.js | 2 +- src/register/RegistrationPage.jsx | 32 ++++++++++++++++++++------ src/register/messages.jsx | 6 ++--- 6 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/_style.scss b/src/_style.scss index 45c120f6..3cdefa60 100644 --- a/src/_style.scss +++ b/src/_style.scss @@ -37,6 +37,10 @@ $accent-a-light: #c9f2f5; width: 12rem; } +.stateful-button-variation1-width { + width: 16.4rem; +} + .login-button-width { width: 6rem; } diff --git a/src/common-components/Logistration.jsx b/src/common-components/Logistration.jsx index e422ed23..65f5a2c1 100644 --- a/src/common-components/Logistration.jsx +++ b/src/common-components/Logistration.jsx @@ -26,15 +26,7 @@ const Logistration = (props) => { const [institutionLogin, setInstitutionLogin] = useState(false); const [key, setKey] = useState(''); - // TODO: Remove after VAN-704 is complete - const [registerRenameExpVariation, setRegisterRenameExpVariation] = useState(''); - useEffect(() => { - const { renameRegisterExperiment } = window; - - if (renameRegisterExperiment) { - setRegisterRenameExpVariation(renameRegisterExperiment); - } const authService = getAuthService(); if (authService) { authService.getCsrfTokenService().getCsrfToken(getConfig().LMS_BASE_URL); @@ -81,12 +73,7 @@ const Logistration = (props) => { <> {!tpa && ( - + )} diff --git a/src/common-components/messages.jsx b/src/common-components/messages.jsx index c9d14593..6541059d 100644 --- a/src/common-components/messages.jsx +++ b/src/common-components/messages.jsx @@ -34,11 +34,6 @@ const messages = defineMessages({ defaultMessage: 'Register', description: 'Text that appears on the tab to switch between login and register', }, - 'register.for.free': { - id: 'register.for.free', - defaultMessage: 'Register for free', - description: 'Text that appears on the tab to switch between login and registration forms', - }, 'internal.server.error.message': { id: 'internal.server.error.message', defaultMessage: 'An error has occurred. Try refreshing the page, or check your internet connection.', diff --git a/src/data/constants.js b/src/data/constants.js index 9e634ad7..48a73a83 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -32,4 +32,4 @@ export const VALID_NAME_REGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1, // Query string parameters that can be passed to LMS to manage // things like auto-enrollment upon login and registration. -export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'save_for_later']; +export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'save_for_later', 'register_for_free']; diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index d14003c1..6509164f 100644 --- a/src/register/RegistrationPage.jsx +++ b/src/register/RegistrationPage.jsx @@ -4,6 +4,7 @@ import { connect } from 'react-redux'; import Skeleton from 'react-loading-skeleton'; import { Helmet } from 'react-helmet'; import PropTypes, { string } from 'prop-types'; +import classNames from 'classnames'; import { getConfig } from '@edx/frontend-platform'; import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics'; @@ -72,15 +73,16 @@ class RegistrationPage extends React.Component { failureCount: 0, startTime: Date.now(), totalRegistrationTime: 0, - optimizelyExperimentName: '', // eslint-disable-line react/no-unused-state + optimizelyExperimentName: '', readOnly: true, validatePassword: false, - // TODO: Remove after VAN-704 is complete + // TODO: Remove after VAN-876 experimentation is complete. registerRenameExpVariation: '', }; } componentDidMount() { + const payload = { ...this.queryParams }; window.optimizely = window.optimizely || []; window.optimizely.push({ type: 'page', @@ -88,7 +90,12 @@ class RegistrationPage extends React.Component { isActive: true, }); - const payload = { ...this.queryParams }; + if (payload.register_for_free === 'true') { + window.optimizely.push({ + type: 'event', + eventName: 'van-876-authn-registration-page', + }); + } if (payload.save_for_later === 'true') { sendTrackEvent('edx.bi.user.saveforlater.course.enroll.clicked', { category: 'save-for-later' }); @@ -170,7 +177,6 @@ class RegistrationPage extends React.Component { const { experimentName, renameRegisterExperiment } = window; if (experimentName) { - // eslint-disable-next-line react/no-unused-state this.setState({ optimizelyExperimentName: experimentName }); } @@ -517,6 +523,7 @@ class RegistrationPage extends React.Component { setSurveyCookie('register'); setCookie(getConfig().REGISTER_CONVERSION_COOKIE_NAME, true); setCookie('authn-returning-user'); + const payload = { ...this.queryParams }; // Fire optimizely events window.optimizely = window.optimizely || []; @@ -527,6 +534,13 @@ class RegistrationPage extends React.Component { value: this.state.totalRegistrationTime, }, }); + + if (payload.register_for_free === 'true') { + window.optimizely.push({ + type: 'event', + eventName: 'van-876-authn-register-for-free-conversion', + }); + } } return ( @@ -659,11 +673,15 @@ class RegistrationPage extends React.Component {