feat: VAN-876 - Rename register experiment with improved metrics (#537)

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;
 }

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 && (
                 <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={handleOnSelect}>
-                  <Tab
-                    title={registerRenameExpVariation === 'variation1' ? (
-                      intl.formatMessage(messages['register.for.free'])
-                    ) : intl.formatMessage(messages['logistration.register'])}
-                    eventKey={REGISTER_PAGE}
-                  />
+                  <Tab title={intl.formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
                   <Tab title={intl.formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
                 </Tabs>
               )}

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.',

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'];

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 {
             <StatefulButton
               type="submit"
               variant="brand"
-              className="stateful-button-width mt-4 mb-4"
+              className={classNames(
+                'mt-4 mb-4',
+                { 'stateful-button-variation1-width': this.state.registerRenameExpVariation === 'variation1' },
+                { 'stateful-button-width': !this.state.registerRenameExpVariation === 'variation1' },
+              )}
               state={submitState}
               labels={{
-                default: this.state.registerRenameExpVariation === 'variation2' ? (
-                  intl.formatMessage(messages['register.for.free.button'])
+                default: this.state.registerRenameExpVariation === 'variation1' ? (
+                  intl.formatMessage(messages['create.account.for.free.button'])
                 ) : intl.formatMessage(messages['create.account.button']),
                 pending: '',
               }}

src/register/messages.jsx

@@ -64,9 +64,9 @@ const messages = defineMessages({
     defaultMessage: 'Create an account',
     description: 'Button label that appears on register page',
   },
-  'register.for.free.button': {
-    id: 'register.for.free.button',
-    defaultMessage: 'Register for free',
+  'create.account.for.free.button': {
+    id: 'create.account.for.free.button',
+    defaultMessage: 'Create an account for free',
     description: 'Label text for registration form submission button',
   },
   'create.an.account.btn.pending.state': {