Add optimizely progressive profiling 1 experiment (#306)

src/common-components/RedirectLogistration.jsx

@@ -1,10 +1,16 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
+import { Redirect } from 'react-router-dom';
 
 import { getConfig } from '@edx/frontend-platform';
 
+import { WELCOME_PAGE } from '../data/constants';
+
 function RedirectLogistration(props) {
-  const { finishAuthUrl, redirectUrl, success } = props;
+  const {
+    finishAuthUrl, redirectUrl, redirectToWelcomePage, success,
+  } = props;
 
   if (success) {
     // If we're in a third party auth pipeline, we must complete the pipeline
@@ -13,6 +19,9 @@ function RedirectLogistration(props) {
     // enterprise selection page and then complete the auth workflow
     if (finishAuthUrl && !redirectUrl.includes(finishAuthUrl)) {
       window.location.href = getConfig().LMS_BASE_URL + finishAuthUrl;
+    } else if (redirectToWelcomePage) {
+      const welcomeProps = { redirectUrl, success };
+      return <Redirect to={WELCOME_PAGE} registrationResult={welcomeProps} />;
     } else {
       // use this component to redirect WelcomePage after successful registration
       // return <Redirect to={WELCOME_PAGE} />;
@@ -26,12 +35,14 @@ RedirectLogistration.defaultProps = {
   finishAuthUrl: null,
   success: false,
   redirectUrl: '',
+  redirectToWelcomePage: false,
 };
 
 RedirectLogistration.propTypes = {
   finishAuthUrl: PropTypes.string,
   success: PropTypes.bool,
   redirectUrl: PropTypes.string,
+  redirectToWelcomePage: PropTypes.bool,
 };
 
 export default RedirectLogistration;

src/register/RegistrationPage.jsx

@@ -153,11 +153,22 @@ class RegistrationPage extends React.Component {
     return (
       <OptionalFields
         values={values}
-        onChangeHandler={(fieldName, value) => { this.setState({ [fieldName]: value }); }}
+        onChangeHandler={(fieldName, value) => this.optionalFieldOnChange(fieldName, value)}
       />
     );
   }
 
+  optionalFieldOnChange = (fieldName, value) => {
+    this.setState({ [fieldName]: value });
+    if (value) {
+      window.optimizely = window.optimizely || [];
+      window.optimizely.push({
+        type: 'event',
+        eventName: `van_504_${fieldName}`,
+      });
+    }
+  }
+
   handleInstitutionLogin = () => {
     this.setState(prevState => ({ institutionLogin: !prevState.institutionLogin }));
   }
@@ -447,11 +458,13 @@ class RegistrationPage extends React.Component {
     if (this.props.registrationResult.success) {
       setSurveyCookie('register');
       // Fire optimizely event
-      window.optimizely = window.optimizely || [];
-      window.optimizely.push({
-        type: 'event',
-        eventName: 'user_registered_successfully',
-      });
+      if (this.state.optimizelyExperimentName !== 'progressive_profiling_phase1') {
+        window.optimizely = window.optimizely || [];
+        window.optimizely.push({
+          type: 'event',
+          eventName: 'van_504_conversion_rate',
+        });
+      }
     }
 
     return (
@@ -465,6 +478,7 @@ class RegistrationPage extends React.Component {
           success={this.props.registrationResult.success}
           redirectUrl={this.props.registrationResult.redirectUrl}
           finishAuthUrl={finishAuthUrl}
+          redirectToWelcomePage={this.state.optimizelyExperimentName === 'progressive_profiling_phase1'}
         />
         <div className="d-flex justify-content-center m-4">
           <div className="d-flex flex-column">
@@ -593,7 +607,7 @@ class RegistrationPage extends React.Component {
                     }}
                   />
                 </div>
-                {getConfig().REGISTRATION_OPTIONAL_FIELDS && this.state.optimizelyExperimentName !== 'hide_optional_fields' ? (
+                {getConfig().REGISTRATION_OPTIONAL_FIELDS && this.state.optimizelyExperimentName !== 'progressive_profiling_phase1' ? (
                   <AuthnValidationFormGroup
                     label={intl.formatMessage(messages['support.education.research'])}
                     for="optional"

src/register/tests/RegistrationPage.test.jsx

@@ -127,10 +127,10 @@ describe('RegistrationPageTests', () => {
   });
 
   it('should not show optional field check when optimizely experiment is set', () => {
-    window.optimizelyExperimentName = 'hide_optional_fields';
+    window.optimizelyExperimentName = 'progressive_profiling_phase1';
 
     const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
-    expect(registrationPage.find('RegistrationPage').state('optimizelyExperimentName')).toEqual('hide_optional_fields');
+    expect(registrationPage.find('RegistrationPage').state('optimizelyExperimentName')).toEqual('progressive_profiling_phase1');
     expect(registrationPage.find('#optional').length).toEqual(0);
 
     delete window.optimizelyExperimentName;

src/welcome/WelcomePage.jsx

@@ -61,8 +61,17 @@ const WelcomePage = (props) => {
     })),
   });
 
+  const fireOptimizelyEvent = () => {
+    window.optimizely = window.optimizely || [];
+    window.optimizely.push({
+      type: 'event',
+      eventName: 'van_504_conversion_rate',
+    });
+  };
+
   const handleSubmit = (e) => {
     e.preventDefault();
+    fireOptimizelyEvent();
     if (registrationResult.success) {
       window.location.href = registrationResult.redirectUrl;
     }
@@ -71,11 +80,20 @@ const WelcomePage = (props) => {
 
   const handleSkip = (e) => {
     e.preventDefault();
+    fireOptimizelyEvent();
     window.location.href = registrationResult.redirectUrl;
     return null;
   };
+
   const onChangeHandler = (e) => {
     setValues({ ...values, [e.target.name]: e.target.value });
+    if (e.target.value) {
+      window.optimizely = window.optimizely || [];
+      window.optimizely.push({
+        type: 'event',
+        eventName: `van_504_${e.target.name}`,
+      });
+    }
   };
 
   return (