feat: record opt in/out (#445)

add opt field in register form and record it for marketing emails.

VAN-738

.env

@@ -24,3 +24,4 @@ INFO_EMAIL=''
 DISABLE_ENTERPRISE_LOGIN=''
 REGISTER_CONVERSION_COOKIE_NAME=null
 ENABLE_PROGRESSIVE_PROFILING=''
+MARKETING_EMAILS_OPT_IN='false'

.env.test

@@ -22,3 +22,4 @@ USER_SURVEY_COOKIE_NAME='openedx-user-survey-type'
 WELCOME_PAGE_SUPPORT_LINK='http://localhost:1999/welcome'
 DISABLE_ENTERPRISE_LOGIN=''
 REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
+MARKETING_EMAILS_OPT_IN='false'

src/_style.scss

@@ -838,3 +838,12 @@ select.form-control {
   line-height: 1.5rem;
   color: $primary-700
 }
+
+.opt-checkbox {
+  .pgn__form-label {
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+  }
+  margin-top: 1rem;
+  margin-left: 3px;
+}

src/index.jsx

@@ -39,6 +39,7 @@ initialize({
         INFO_EMAIL: process.env.INFO_EMAIL || '',
         REGISTER_CONVERSION_COOKIE_NAME: process.env.REGISTER_CONVERSION_COOKIE_NAME || null,
         ENABLE_PROGRESSIVE_PROFILING: process.env.ENABLE_PROGRESSIVE_PROFILING || false,
+        MARKETING_EMAILS_OPT_IN: process.env.MARKETING_EMAILS_OPT_IN || 'false',
       });
     },
   },

src/register/RegistrationPage.jsx

@@ -61,6 +61,7 @@ class RegistrationPage extends React.Component {
       name: '',
       password: '',
       username: '',
+      marketingOptIn: true,
       errors: {
         email: '',
         name: '',
@@ -197,6 +198,10 @@ class RegistrationPage extends React.Component {
       is_authn_mfe: true,
     };
 
+    if (getConfig().MARKETING_EMAILS_OPT_IN === 'true' && this.state.optimizelyExperimentName === 'marketing_opt_in') {
+      payload.marketing_emails_opt_in = this.state.marketingOptIn;
+    }
+
     if (this.props.thirdPartyAuthContext.currentProvider) {
       payload.social_auth_provider = this.props.thirdPartyAuthContext.currentProvider;
     } else {
@@ -613,6 +618,17 @@ class RegistrationPage extends React.Component {
               errorCode={this.state.errorCode}
               readOnly={this.state.readOnly}
             />
+            {(getConfig().MARKETING_EMAILS_OPT_IN === 'true' && this.state.optimizelyExperimentName === 'marketing_opt_in')
+            && (
+              <Form.Checkbox
+                className="opt-checkbox"
+                name="marketing_emails_opt_in"
+                checked={this.state.marketingOptIn}
+                onChange={(e) => this.setState({ marketingOptIn: e.target.checked })}
+              >
+                {intl.formatMessage(messages['registration.opt.in.label'])}
+              </Form.Checkbox>
+            )}
             <div id="honor-code" className="micro text-muted mt-4">
               <FormattedMessage
                 id="register.page.terms.of.service.and.honor.code"

src/register/data/sagas.js

@@ -1,6 +1,6 @@
 import { call, put, takeEvery } from 'redux-saga/effects';
 
-import { camelCaseObject } from '@edx/frontend-platform';
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { logError, logInfo } from '@edx/frontend-platform/logging';
 
 // Actions
@@ -24,7 +24,14 @@ export function* handleNewUserRegistration(action) {
     yield put(registerNewUserBegin());
 
     const { redirectUrl, success } = yield call(registerRequest, action.payload.registrationInfo);
-
+    const { experimentName } = window;
+    if (getConfig().MARKETING_EMAILS_OPT_IN === 'true'
+      && success && experimentName && experimentName === 'marketing_opt_in') {
+      window.optimizely.push({
+        type: 'event',
+        eventName: `marketing-emails-opt-${action.payload.registrationInfo.opt === true ? 'in' : 'out'}`,
+      });
+    }
     yield put(registerNewUserSuccess(
       redirectUrl,
       success,

src/register/messages.jsx

@@ -32,6 +32,11 @@ const messages = defineMessages({
     defaultMessage: 'Country/Region',
     description: 'Placeholder for the country options dropdown.',
   },
+  'registration.opt.in.label': {
+    id: 'registration.opt.in.label',
+    defaultMessage: 'You will be receive marketing emails by checking it',
+    description: 'You will be receive marketing emails by checking it',
+  },
   // Help text
   'help.text.name': {
     id: 'help.text.name',