From 14e89575d1daed2a10f5b4793eb850161b165d8e Mon Sep 17 00:00:00 2001
From: Mubbshar Anwar <78487564+mubbsharanwar@users.noreply.github.com>
Date: Fri, 8 Oct 2021 19:00:18 +0500
Subject: [PATCH] feat: record opt in/out (#445)

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

VAN-738
---
 .env                              |  1 +
 .env.test                         |  1 +
 src/_style.scss                   |  9 +++++++++
 src/index.jsx                     |  1 +
 src/register/RegistrationPage.jsx | 16 ++++++++++++++++
 src/register/data/sagas.js        | 11 +++++++++--
 src/register/messages.jsx         |  5 +++++
 7 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/.env b/.env
index ba6be3ee..52b7e365 100644
--- a/.env
+++ b/.env
@@ -24,3 +24,4 @@ INFO_EMAIL=''
 DISABLE_ENTERPRISE_LOGIN=''
 REGISTER_CONVERSION_COOKIE_NAME=null
 ENABLE_PROGRESSIVE_PROFILING=''
+MARKETING_EMAILS_OPT_IN='false'
diff --git a/.env.test b/.env.test
index 9c278bd0..ed5cd020 100644
--- a/.env.test
+++ b/.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'
diff --git a/src/_style.scss b/src/_style.scss
index f7a04414..01c6f01c 100644
--- a/src/_style.scss
+++ b/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;
+}
diff --git a/src/index.jsx b/src/index.jsx
index ee0f133f..a5948e4f 100755
--- a/src/index.jsx
+++ b/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',
       });
     },
   },
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 0f822daf..b341615c 100644
--- a/src/register/RegistrationPage.jsx
+++ b/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"
diff --git a/src/register/data/sagas.js b/src/register/data/sagas.js
index d017f52b..8a029bdc 100644
--- a/src/register/data/sagas.js
+++ b/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,
diff --git a/src/register/messages.jsx b/src/register/messages.jsx
index f9ffcf3b..2d9b372b 100644
--- a/src/register/messages.jsx
+++ b/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',