From a5e7a3a592aedecb2f6c539a499decaae6e6b3d4 Mon Sep 17 00:00:00 2001
From: Zainab Amir <zainab.amir@arbisoft.com>
Date: Wed, 10 Nov 2021 10:45:06 +0500
Subject: [PATCH] feat: add rename register experiment details (#464)

---
 src/common-components/Logistration.jsx | 20 ++++++++++++++++++--
 src/common-components/messages.jsx     |  5 +++++
 src/register/RegistrationPage.jsx      | 12 ++++++++++--
 src/register/messages.jsx              |  5 +++++
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/common-components/Logistration.jsx b/src/common-components/Logistration.jsx
index 48600c6a..e3db1391 100644
--- a/src/common-components/Logistration.jsx
+++ b/src/common-components/Logistration.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
 
@@ -24,6 +24,17 @@ 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 handleInstitutionLogin = (e) => {
     sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
     if (typeof e === 'string') {
@@ -64,7 +75,12 @@ const Logistration = (props) => {
             <>
               {!tpa && (
                 <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={handleOnSelect}>
-                  <Tab title={intl.formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
+                  <Tab
+                    title={registerRenameExpVariation === 'variation1' ? (
+                      intl.formatMessage(messages['register.for.free'])
+                    ) : intl.formatMessage(messages['logistration.register'])}
+                    eventKey={REGISTER_PAGE}
+                  />
                   <Tab title={intl.formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
                 </Tabs>
               )}
diff --git a/src/common-components/messages.jsx b/src/common-components/messages.jsx
index 6541059d..c9d14593 100644
--- a/src/common-components/messages.jsx
+++ b/src/common-components/messages.jsx
@@ -34,6 +34,11 @@ 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/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 259d6d04..8aa731db 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -81,6 +81,8 @@ class RegistrationPage extends React.Component {
       optimizelyExperimentName: '', // eslint-disable-line react/no-unused-state
       readOnly: true,
       validatePassword: false,
+      // TODO: Remove after VAN-704 is complete
+      registerRenameExpVariation: '',
     };
   }
 
@@ -167,12 +169,16 @@ class RegistrationPage extends React.Component {
   }
 
   getExperiments = () => {
-    const { experimentName } = window;
+    const { experimentName, renameRegisterExperiment } = window;
 
     if (experimentName) {
       // eslint-disable-next-line react/no-unused-state
       this.setState({ optimizelyExperimentName: experimentName });
     }
+
+    if (renameRegisterExperiment) {
+      this.setState({ registerRenameExpVariation: renameRegisterExperiment });
+    }
   };
 
   getOptionalFields() {
@@ -712,7 +718,9 @@ class RegistrationPage extends React.Component {
               className="stateful-button-width mt-4 mb-4"
               state={submitState}
               labels={{
-                default: intl.formatMessage(messages['create.account.button']),
+                default: this.state.registerRenameExpVariation === 'variation2' ? (
+                  intl.formatMessage(messages['register.for.free.button'])
+                ) : intl.formatMessage(messages['create.account.button']),
                 pending: '',
               }}
               onClick={this.handleSubmit}
diff --git a/src/register/messages.jsx b/src/register/messages.jsx
index 93e134e1..9e44a1b2 100644
--- a/src/register/messages.jsx
+++ b/src/register/messages.jsx
@@ -64,6 +64,11 @@ 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',
+    description: 'Label text for registration form submission button',
+  },
   'create.an.account.btn.pending.state': {
     id: 'create.an.account.btn.pending.state',
     defaultMessage: 'Loading',