feat: add rename register experiment details (#464)

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

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

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}

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