Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

revert: multistep registration experiment

Browse Source 
revert multistep registration experiment changes

VAN-1930
This commit is contained in:
mubbsharanwar
2024-05-06 15:57:54 +05:00
parent f8290adab5
commit a90ebb7d4d
23 changed files with 38 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/common-components/SocialAuthProviders.jsx
View File

@@ -9,24 +9,14 @@ import PropTypes from 'prop-types';
import messages from './messages';
import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';
import { CONTROL, MULTI_STEP_REGISTRATION_EXP_VARIATION } from '../register/data/optimizelyExperiment/helper';
import { trackMultiStepRegistrationSSOBtnClicked } from '../register/data/optimizelyExperiment/track';
const SocialAuthProviders = (props) => {
const { formatMessage } = useIntl();
const {
referrer,
socialAuthProviders,
multiStepRegistrationExpVariation,
} = props;
const { referrer, socialAuthProviders } = props;
function handleSubmit(e) {
e.preventDefault();
if (multiStepRegistrationExpVariation === CONTROL
|| multiStepRegistrationExpVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION) {
trackMultiStepRegistrationSSOBtnClicked(multiStepRegistrationExpVariation);
}
const url = e.currentTarget.dataset.providerUrl;
window.location.href = getConfig().LMS_BASE_URL + url;
}
@@ -70,7 +60,6 @@ const SocialAuthProviders = (props) => {
SocialAuthProviders.defaultProps = {
referrer: LOGIN_PAGE,
socialAuthProviders: [],
multiStepRegistrationExpVariation: '',
};
SocialAuthProviders.propTypes = {
@@ -84,7 +73,6 @@ SocialAuthProviders.propTypes = {
registerUrl: PropTypes.string,
skipRegistrationForm: PropTypes.bool,
})),
multiStepRegistrationExpVariation: PropTypes.string,
};
export default SocialAuthProviders;

4
src/common-components/ThirdPartyAuth.jsx
View File

@@ -32,7 +32,6 @@ const ThirdPartyAuth = (props) => {
handleInstitutionLogin,
thirdPartyAuthApiStatus,
isLoginPage,
multiStepRegistrationExpVariation,
} = props;
const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
const isSocialAuthActive = !!providers.length && !currentProvider;
@@ -80,7 +79,6 @@ const ThirdPartyAuth = (props) => {
<SocialAuthProviders
socialAuthProviders={providers}
referrer={isLoginPage ? LOGIN_PAGE : REGISTER_PAGE}
multiStepRegistrationExpVariation={multiStepRegistrationExpVariation}
/>
</div>
)}
@@ -96,7 +94,6 @@ ThirdPartyAuth.defaultProps = {
secondaryProviders: [],
thirdPartyAuthApiStatus: PENDING_STATE,
isLoginPage: false,
multiStepRegistrationExpVariation: '',
};
ThirdPartyAuth.propTypes = {
@@ -124,7 +121,6 @@ ThirdPartyAuth.propTypes = {
),
thirdPartyAuthApiStatus: PropTypes.string,
isLoginPage: PropTypes.bool,
multiStepRegistrationExpVariation: PropTypes.string,
};
export default ThirdPartyAuth;

6
src/common-components/messages.jsx
View File

@@ -132,12 +132,6 @@ const messages = defineMessages({
defaultMessage: 'Company or school credentials',
description: 'Company or school login link text.',
},
// multi step registration experiment messages
'tab.back.btn.text': {
id: 'tab.back.btn.text',
defaultMessage: 'Back',
description: 'Tab back button text',
},
});
export default messages;

2
src/config/index.js
View File

@@ -35,8 +35,6 @@ const configuration = {
ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
// Multi Step Registration Experiment
MULTI_STEP_REGISTRATION_EXPERIMENT_ID: process.env.MULTI_STEP_REGISTRATION_EXPERIMENT_ID || '',
};
export default configuration;

55
src/logistration/Logistration.jsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { connect, useDispatch, useSelector } from 'react-redux';
import { connect } from 'react-redux';
import { getConfig } from '@edx/frontend-platform';
import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -7,11 +7,10 @@ import { getAuthService } from '@edx/frontend-platform/auth';
import { useIntl } from '@edx/frontend-platform/i18n';
import {
Icon,
IconButton,
Tab,
Tabs,
} from '@openedx/paragon';
import { ArrowBackIos, ChevronLeft } from '@openedx/paragon/icons';
import { ChevronLeft } from '@openedx/paragon/icons';
import PropTypes from 'prop-types';
import { Navigate, useNavigate } from 'react-router-dom';
@@ -28,11 +27,7 @@ import {
import { LoginPage } from '../login';
import { backupLoginForm } from '../login/data/actions';
import { RegistrationPage } from '../register';
import { backupRegistrationForm, setMultiStepRegistrationExpData } from '../register/data/actions';
import {
FIRST_STEP,
getMultiStepRegistrationPreviousStep,
} from '../register/data/optimizelyExperiment/helper';
import { backupRegistrationForm } from '../register/data/actions';
const Logistration = (props) => {
const { selectedPage, tpaProviders } = props;
@@ -47,10 +42,6 @@ const Logistration = (props) => {
const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
const hideRegistrationLink = getConfig().SHOW_REGISTRATION_LINKS === false;
const dispatch = useDispatch();
const multiStepRegExpVariation = useSelector(state => state.register.multiStepRegExpVariation);
const multiStepRegistrationPageStep = useSelector(state => state.register.multiStepRegistrationPageStep);
useEffect(() => {
const authService = getAuthService();
if (authService) {
@@ -100,39 +91,6 @@ const Logistration = (props) => {
</div>
);
/**
* Temporary function created to resolve the complexity in tabs conditioning for multi-step
* registration experiment
*/
const getTabs = () => {
if (multiStepRegistrationPageStep !== FIRST_STEP) {
const prevStep = getMultiStepRegistrationPreviousStep(multiStepRegistrationPageStep);
return (
<div>
<IconButton
key="primary"
src={ArrowBackIos}
iconAs={Icon}
alt="Back"
onClick={() => {
dispatch(setMultiStepRegistrationExpData(multiStepRegExpVariation, prevStep));
}}
variant="primary"
size="inline"
className="mr-1"
/>
{formatMessage(messages['tab.back.btn.text'])}
</div>
);
}
return (
<Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={(tabKey) => handleOnSelect(tabKey, selectedPage)}>
<Tab title={formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
<Tab title={formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
</Tabs>
);
};
const isValidTpaHint = () => {
const { provider } = getTpaProvider(tpaHint, providers, secondaryProviders);
return !!provider;
@@ -165,7 +123,12 @@ const Logistration = (props) => {
<Tab title={tabTitle} eventKey={selectedPage === LOGIN_PAGE ? LOGIN_PAGE : REGISTER_PAGE} />
</Tabs>
)
: (!isValidTpaHint() && !hideRegistrationLink && getTabs())}
: (!isValidTpaHint() && !hideRegistrationLink && (
<Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={(tabKey) => handleOnSelect(tabKey, selectedPage)}>
<Tab title={formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
<Tab title={formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
</Tabs>
))}
{ key && (
<Navigate to={updatePathWithQueryParams(key)} replace />
)}

7
src/logistration/Logistration.test.jsx
View File

@@ -15,16 +15,12 @@ import {
} from '../data/constants';
import { backupLoginForm } from '../login/data/actions';
import { backupRegistrationForm } from '../register/data/actions';
import { FIRST_STEP, NOT_INITIALIZED } from '../register/data/optimizelyExperiment/helper';
import useMultiStepRegistrationExperimentVariation
from '../register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
jest.mock('@edx/frontend-platform/analytics', () => ({
sendPageEvent: jest.fn(),
sendTrackEvent: jest.fn(),
}));
jest.mock('@edx/frontend-platform/auth');
jest.mock('../register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const mockStore = configureStore();
const IntlLogistration = injectIntl(Logistration);
@@ -67,8 +63,6 @@ describe('Logistration', () => {
registrationError: {},
usernameSuggestions: [],
validationApiRateLimited: false,
multiStepRegExpVariation: '',
multiStepRegistrationPageStep: FIRST_STEP,
},
commonComponents: {
thirdPartyAuthContext: {
@@ -89,7 +83,6 @@ describe('Logistration', () => {
username: 'test-user',
})),
}));
useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
configure({
loggingService: { logError: jest.fn() },

2
src/register/RegistrationPage.jsx
View File

@@ -176,7 +176,7 @@ const RegistrationPage = (props) => {
// This is used by the "User Retention Rate Event" on GTM
setCookie(getConfig().USER_RETENTION_COOKIE_NAME, true);
}
}, [registrationResult]); // eslint-disable-line react-hooks/exhaustive-deps
}, [registrationResult]);
const handleOnChange = (event) => {
const { name } = event.target;

5
src/register/RegistrationPage.test.jsx
View File

@@ -17,9 +17,6 @@ import {
setUserPipelineDataLoaded,
} from './data/actions';
import { INTERNAL_SERVER_ERROR } from './data/constants';
import { NOT_INITIALIZED } from './data/optimizelyExperiment/helper';
import useMultiStepRegistrationExperimentVariation
from './data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from './RegistrationPage';
import {
AUTHN_PROGRESSIVE_PROFILING, COMPLETE_STATE, PENDING_STATE, REGISTER_PAGE,
@@ -33,7 +30,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
jest.mock('./data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore();
@@ -132,7 +128,6 @@ describe('RegistrationPage', () => {
institutionLogin: false,
};
window.location = { search: '' };
useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {

24
src/register/components/ConfigurableRegistrationForm.jsx
View File

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
import { FormFieldRenderer } from '../../field-renderer';
import { FIELDS } from '../data/constants';
import { FIRST_STEP, shouldDisplayFieldInExperiment } from '../data/optimizelyExperiment/helper';
import messages from '../messages';
import { CountryField, HonorCode, TermsOfService } from '../RegistrationFields';
@@ -32,8 +31,6 @@ const ConfigurableRegistrationForm = (props) => {
setFieldErrors,
setFormFields,
autoSubmitRegistrationForm,
multiStepRegistrationExpVariation,
multiStepRegistrationPageStep,
} = props;
/** The reason for adding the entry 'United States' is that Chrome browser aut-fill the form with the 'Unites
@@ -112,9 +109,7 @@ const ConfigurableRegistrationForm = (props) => {
setFieldErrors(prevErrors => ({ ...prevErrors, [name]: '' }));
};
if (flags.showConfigurableRegistrationFields && shouldDisplayFieldInExperiment(
'other_fields', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
)) {
if (flags.showConfigurableRegistrationFields) {
Object.keys(fieldDescriptions).forEach(fieldName => {
const fieldData = fieldDescriptions[fieldName];
switch (fieldData.name) {
@@ -166,9 +161,7 @@ const ConfigurableRegistrationForm = (props) => {
});
}
if ((flags.showConfigurableEdxFields || showCountryField) && shouldDisplayFieldInExperiment(
'country', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
)) {
if (flags.showConfigurableEdxFields || showCountryField) {
formFieldDescriptions.push(
<span key="country">
<CountryField
@@ -184,9 +177,7 @@ const ConfigurableRegistrationForm = (props) => {
);
}
if (flags.showMarketingEmailOptInCheckbox && shouldDisplayFieldInExperiment(
'marketing_email_opt_in', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
)) {
if (flags.showMarketingEmailOptInCheckbox) {
formFieldDescriptions.push(
<span key="marketing_email_opt_in">
<FormFieldRenderer
@@ -205,10 +196,7 @@ const ConfigurableRegistrationForm = (props) => {
);
}
if ((flags.showConfigurableEdxFields || showTermsOfServiceAndHonorCode)
&& shouldDisplayFieldInExperiment(
'honor_code', multiStepRegistrationExpVariation, multiStepRegistrationPageStep,
)) {
if (flags.showConfigurableEdxFields || showTermsOfServiceAndHonorCode) {
formFieldDescriptions.push(
<span key="honor_code">
<HonorCode fieldType="tos_and_honor_code" onChangeHandler={handleOnChange} value={formFields.honor_code} />
@@ -243,15 +231,11 @@ ConfigurableRegistrationForm.propTypes = {
setFieldErrors: PropTypes.func.isRequired,
setFormFields: PropTypes.func.isRequired,
autoSubmitRegistrationForm: PropTypes.bool,
multiStepRegistrationExpVariation: PropTypes.string,
multiStepRegistrationPageStep: PropTypes.string,
};
ConfigurableRegistrationForm.defaultProps = {
fieldDescriptions: {},
autoSubmitRegistrationForm: false,
multiStepRegistrationExpVariation: '',
multiStepRegistrationPageStep: FIRST_STEP,
};
export default ConfigurableRegistrationForm;

11
src/register/components/RegistrationFailure.jsx
View File

@@ -13,13 +13,12 @@ import {
TPA_AUTHENTICATION_FAILURE,
TPA_SESSION_EXPIRED,
} from '../data/constants';
import { FIRST_STEP } from '../data/optimizelyExperiment/helper';
import messages from '../messages';
const RegistrationFailureMessage = (props) => {
const { formatMessage } = useIntl();
const {
context, errorCode, failureCount, multiStepRegistrationPageStep,
context, errorCode, failureCount,
} = props;
useEffect(() => {
@@ -50,11 +49,7 @@ const RegistrationFailureMessage = (props) => {
errorMessage = formatMessage(messages['registration.tpa.session.expired'], { provider: context.provider });
break;
default:
if (multiStepRegistrationPageStep !== FIRST_STEP) {
errorMessage = formatMessage(messages['multistep.registration.form.submission.error']);
} else {
errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
}
errorMessage = formatMessage(messages['registration.empty.form.submission.error']);
break;
}
@@ -70,7 +65,6 @@ RegistrationFailureMessage.defaultProps = {
context: {
errorMessage: null,
},
multiStepRegistrationPageStep: FIRST_STEP,
};
RegistrationFailureMessage.propTypes = {
@@ -80,7 +74,6 @@ RegistrationFailureMessage.propTypes = {
}),
errorCode: PropTypes.string.isRequired,
failureCount: PropTypes.number.isRequired,
multiStepRegistrationPageStep: PropTypes.string,
};
export default RegistrationFailureMessage;

8
src/register/components/tests/ConfigurableRegistrationForm.test.jsx
View File

@@ -11,9 +11,6 @@ import configureStore from 'redux-mock-store';
import { registerNewUser } from '../../data/actions';
import { FIELDS } from '../../data/constants';
import { FIRST_STEP, NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
import useMultiStepRegistrationExperimentVariation
from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
import ConfigurableRegistrationForm from '../ConfigurableRegistrationForm';
@@ -25,7 +22,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlConfigurableRegistrationForm = injectIntl(ConfigurableRegistrationForm);
const IntlRegistrationPage = injectIntl(RegistrationPage);
@@ -97,9 +93,6 @@ describe('ConfigurableRegistrationForm', () => {
registrationError: {},
registrationFormData,
usernameSuggestions: [],
multiStepRegistrationPageStep: FIRST_STEP,
multiStepRegExpVariation: '',
isValidatingMultiStepRegistrationPage: false,
},
commonComponents: {
thirdPartyAuthApiStatus: null,
@@ -128,7 +121,6 @@ describe('ConfigurableRegistrationForm', () => {
};
window.location = { search: '' };
getLocale.mockImplementationOnce(() => ('en-us'));
useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {

5
src/register/components/tests/RegistrationFailure.test.jsx
View File

@@ -12,9 +12,6 @@ import configureStore from 'redux-mock-store';
import {
FORBIDDEN_REQUEST, INTERNAL_SERVER_ERROR, TPA_AUTHENTICATION_FAILURE, TPA_SESSION_EXPIRED,
} from '../../data/constants';
import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
import useMultiStepRegistrationExperimentVariation
from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
import RegistrationFailureMessage from '../RegistrationFailure';
@@ -26,7 +23,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const IntlRegistrationFailure = injectIntl(RegistrationFailureMessage);
@@ -125,7 +121,6 @@ describe('RegistrationFailure', () => {
institutionLogin: false,
};
window.location = { search: '' };
useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {

5
src/register/components/tests/ThirdPartyAuth.test.jsx
View File

@@ -12,9 +12,6 @@ import configureStore from 'redux-mock-store';
import {
COMPLETE_STATE, LOGIN_PAGE, PENDING_STATE, REGISTER_PAGE,
} from '../../../data/constants';
import { NOT_INITIALIZED } from '../../data/optimizelyExperiment/helper';
import useMultiStepRegistrationExperimentVariation
from '../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation';
import RegistrationPage from '../../RegistrationPage';
jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -25,7 +22,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
...jest.requireActual('@edx/frontend-platform/i18n'),
getLocale: jest.fn(),
}));
jest.mock('../../data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation', () => jest.fn());
const IntlRegistrationPage = injectIntl(RegistrationPage);
const mockStore = configureStore();
@@ -124,7 +120,6 @@ describe('ThirdPartyAuth', () => {
institutionLogin: false,
};
window.location = { search: '' };
useMultiStepRegistrationExperimentVariation.mockReturnValue(NOT_INITIALIZED);
});
afterEach(() => {

21
src/register/data/actions.js
View File

@@ -8,8 +8,6 @@ export const REGISTRATION_CLEAR_BACKEND_ERROR = 'REGISTRATION_CLEAR_BACKEND_ERRO
export const REGISTER_SET_COUNTRY_CODE = 'REGISTER_SET_COUNTRY_CODE';
export const REGISTER_SET_USER_PIPELINE_DATA_LOADED = 'REGISTER_SET_USER_PIPELINE_DATA_LOADED';
export const REGISTER_SET_EMAIL_SUGGESTIONS = 'REGISTER_SET_EMAIL_SUGGESTIONS';
export const REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA = 'REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA';
// Backup registration form
export const backupRegistrationForm = () => ({
type: BACKUP_REGISTRATION_DATA.BASE,
@@ -21,19 +19,18 @@ export const backupRegistrationFormBegin = (data) => ({
});
// Validate fields from the backend
export const fetchRealtimeValidations = (formPayload, isValidatingMultiStepRegistrationPage) => ({
export const fetchRealtimeValidations = (formPayload) => ({
type: REGISTER_FORM_VALIDATIONS.BASE,
payload: { formPayload, isValidatingMultiStepRegistrationPage },
payload: { formPayload },
});
export const fetchRealtimeValidationsBegin = (isValidatingMultiStepRegistrationPage) => ({
export const fetchRealtimeValidationsBegin = () => ({
type: REGISTER_FORM_VALIDATIONS.BEGIN,
payload: { isValidatingMultiStepRegistrationPage },
});
export const fetchRealtimeValidationsSuccess = (validations, isValidatingMultiStepRegistrationPage) => ({
export const fetchRealtimeValidationsSuccess = (validations) => ({
type: REGISTER_FORM_VALIDATIONS.SUCCESS,
payload: { validations, isValidatingMultiStepRegistrationPage },
payload: { validations },
});
export const fetchRealtimeValidationsFailure = () => ({
@@ -85,11 +82,3 @@ export const setUserPipelineDataLoaded = (value) => ({
type: REGISTER_SET_USER_PIPELINE_DATA_LOADED,
payload: { value },
});
// Multi Step Registration Experiment Actions
export const setMultiStepRegistrationExpData = (
multiStepRegExpVariation, multiStepRegistrationPageStep, isValidatingMultiStepRegistrationPage,
) => ({
type: REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA,
payload: { multiStepRegExpVariation, multiStepRegistrationPageStep, isValidatingMultiStepRegistrationPage },
});

113
src/register/data/optimizelyExperiment/helper.js
View File

@@ -1,113 +0,0 @@
/**
* This file contains data for Multi Step Registration Optimizely experiment
*/
import { getConfig } from '@edx/frontend-platform';
import messages from '../../messages';
export const NOT_INITIALIZED = 'experiment-not-initialized';
export const CONTROL = 'control-registration-page';
export const MULTI_STEP_REGISTRATION_EXP_VARIATION = 'multi-step-registration-page';
export const FIRST_STEP = 'first-step';
export const SECOND_STEP = 'second-step';
export const THIRD_STEP = 'third-step';
export const CONTROL_REGISTER_PAGE_FIRST_STEP_FIELDS = ['name', 'email', 'password', 'marketing_email_opt_in', 'ThirdPartyAuth'];
export const CONTROL_REGISTER_PAGE_SECOND_STEP_FIELDS = ['username', 'country'];
export const CONTROL_REGISTER_PAGE_COMMON_FIELDS = ['tos_and_honor_code', 'honor_code'];
export const MULTI_STEP_REGISTER_PAGE_FIRST_STEP_FIELDS = ['email', 'marketing_email_opt_in', 'ThirdPartyAuth'];
export const MULTI_STEP_REGISTER_PAGE_SECOND_STEP_FIELDS = ['name', 'password'];
export const MULTI_STEP_REGISTER_PAGE_THIRD_STEP_FIELDS = ['username', 'country'];
export const MULTI_STEP_REGISTER_PAGE_COMMON_FIELDS = ['tos_and_honor_code', 'honor_code'];
const MULTI_STEP_REGISTRATION_EXP_PAGE = 'authn_register_page';
export function getMultiStepRegistrationExperimentVariation() {
try {
if (window.optimizely
&& window.optimizely.get('data').experiments[getConfig().MULTI_STEP_REGISTRATION_EXPERIMENT_ID]) {
const selectedVariant = window.optimizely.get('state').getVariationMap()[
getConfig().MULTI_STEP_REGISTRATION_EXPERIMENT_ID
];
return selectedVariant?.name;
}
} catch (e) { /* empty */ }
return '';
}
export function activateMultiStepRegistrationExperiment() {
window.optimizely = window.optimizely || [];
window.optimizely.push({
type: 'page',
pageName: MULTI_STEP_REGISTRATION_EXP_PAGE,
});
}
/**
* We want to display username and honor_code fields in second page if user is in multi-step
* registration page experiment
*/
export const shouldDisplayFieldInExperiment = (fieldName, expVariation, registerPageStep) => (
!expVariation || expVariation === NOT_INITIALIZED
|| (expVariation === CONTROL
&& (
CONTROL_REGISTER_PAGE_COMMON_FIELDS.includes(fieldName)
|| (registerPageStep === FIRST_STEP && CONTROL_REGISTER_PAGE_FIRST_STEP_FIELDS.includes(fieldName))
|| (registerPageStep === SECOND_STEP && CONTROL_REGISTER_PAGE_SECOND_STEP_FIELDS.includes(fieldName))
))
|| (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION
&& (
MULTI_STEP_REGISTER_PAGE_COMMON_FIELDS.includes(fieldName)
|| (registerPageStep === FIRST_STEP && MULTI_STEP_REGISTER_PAGE_FIRST_STEP_FIELDS.includes(fieldName))
|| (registerPageStep === SECOND_STEP && MULTI_STEP_REGISTER_PAGE_SECOND_STEP_FIELDS.includes(fieldName))
|| (registerPageStep === THIRD_STEP && MULTI_STEP_REGISTER_PAGE_THIRD_STEP_FIELDS.includes(fieldName))
))
);
export const getRegisterButtonLabelInExperiment = (
existingButtonLabel, expVariation, registerPageStep, formatMessage,
) => {
if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
return formatMessage(messages['multistep.registration.exp.continue.button']);
}
return existingButtonLabel;
};
export const getRegisterButtonClassInExperiment = (expVariation, registerPageStep) => {
if (expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep === FIRST_STEP) {
return 'continue-button';
}
return 'register-button';
};
export const getRegisterButtonSubmitStateInExperiment = (
registerSubmitState, validationsSubmitState, expVariation, registerPageStep,
) => {
if ((expVariation === MULTI_STEP_REGISTRATION_EXP_VARIATION && registerPageStep !== THIRD_STEP)
|| (expVariation === CONTROL && registerPageStep !== SECOND_STEP)) {
return validationsSubmitState;
}
return registerSubmitState;
};
export const getMultiStepRegistrationPreviousStep = (currentStep) => {
if (currentStep === THIRD_STEP) {
return SECOND_STEP;
}
if (currentStep === SECOND_STEP) {
return FIRST_STEP;
}
return currentStep;
};
export const getMultiStepRegistrationNextStep = (currentStep) => {
if (currentStep === FIRST_STEP) {
return SECOND_STEP;
}
if (currentStep === SECOND_STEP) {
return THIRD_STEP;
}
return currentStep;
};

57
src/register/data/optimizelyExperiment/track.js
View File

@@ -1,57 +0,0 @@
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
export const eventNames = {
multiStepRegistrationStep1Viewed: 'edx.bi.user.multistepregistration.step1.viewed',
multiStepRegistrationStep2Viewed: 'edx.bi.user.multistepregistration.step2.viewed',
multiStepRegistrationStep3Viewed: 'edx.bi.user.multistepregistration.step3.viewed',
multiStepRegistrationStep1SubmitBtnClicked: 'edx.bi.user.registration.step1.submit.click',
multiStepRegistrationStep2SubmitBtnClicked: 'edx.bi.user.registration.step2.submit.click',
multiStepRegistrationStep3SubmitBtnClicked: 'edx.bi.user.registration.step3.submit.click',
multiStepRegistrationFormSubmitBtnClicked: 'edx.bi.user.registration.form.submit.click',
multiStepRegistrationSSOBtnClicked: 'edx.bi.user.registration.sso.btn.click',
};
export const trackMultiStepRegistrationStep1Viewed = (expVariation) => {
sendTrackEvent(eventNames.multiStepRegistrationStep1Viewed, {
variation: expVariation,
});
};
export const trackMultiStepRegistrationStep2Viewed = (expVariation, isMarketingLead) => {
sendTrackEvent(eventNames.multiStepRegistrationStep2Viewed, {
variation: expVariation,
is_marketing_lead: isMarketingLead,
});
};
export const trackMultiStepRegistrationStep3Viewed = () => {
sendTrackEvent(eventNames.multiStepRegistrationStep3Viewed, {});
};
export const trackMultiStepRegistrationStep1SubmitBtnClicked = (expVariation) => {
sendTrackEvent(eventNames.multiStepRegistrationStep1SubmitBtnClicked, {
variation: expVariation,
});
};
export const trackMultiStepRegistrationStep2SubmitBtnClicked = (expVariation) => {
sendTrackEvent(eventNames.multiStepRegistrationStep2SubmitBtnClicked, {
variation: expVariation,
});
};
export const trackMultiStepRegistrationStep3SubmitBtnClicked = () => {
sendTrackEvent(eventNames.multiStepRegistrationStep3SubmitBtnClicked, {});
};
export const trackMultiStepRegistrationFormSubmitBtnClicked = (expVariation) => {
sendTrackEvent(eventNames.multiStepRegistrationFormSubmitBtnClicked, {
variation: expVariation,
});
};
export const trackMultiStepRegistrationSSOBtnClicked = (expVariation) => {
sendTrackEvent(eventNames.multiStepRegistrationSSOBtnClicked, {
variation: expVariation,
});
};

56
src/register/data/optimizelyExperiment/useMultiStepRegistrationExperimentVariation.jsx
View File

@@ -1,56 +0,0 @@
import { useEffect, useState } from 'react';
import {
activateMultiStepRegistrationExperiment,
getMultiStepRegistrationExperimentVariation,
NOT_INITIALIZED,
} from './helper';
import { trackMultiStepRegistrationStep1Viewed } from './track';
import { COMPLETE_STATE } from '../../../data/constants';
/**
* This hook returns activates multi step registration experiment and returns the experiment
* variation for the user.
*/
const useMultiStepRegistrationExperimentVariation = (
initExpVariation,
registrationEmbedded,
tpaHint,
currentProvider,
thirdPartyAuthApiStatus,
) => {
const [variation, setVariation] = useState(initExpVariation);
useEffect(() => {
if (initExpVariation || registrationEmbedded || !!tpaHint || !!currentProvider
|| thirdPartyAuthApiStatus !== COMPLETE_STATE) {
return variation;
}
const getVariation = () => {
const expVariation = getMultiStepRegistrationExperimentVariation();
if (expVariation) {
setVariation(expVariation);
trackMultiStepRegistrationStep1Viewed(expVariation);
} else {
// This is to handle the case when user dont get variation for some reason, the register page
// shows unlimited spinner.
setVariation(NOT_INITIALIZED);
}
};
activateMultiStepRegistrationExperiment();
const timer = setTimeout(getVariation, 300);
return () => {
clearTimeout(timer);
};
}, [ // eslint-disable-line react-hooks/exhaustive-deps
currentProvider, initExpVariation, registrationEmbedded, thirdPartyAuthApiStatus, tpaHint,
]);
return variation;
};
export default useMultiStepRegistrationExperimentVariation;

25
src/register/data/reducers.js
View File

@@ -5,11 +5,9 @@ import {
REGISTER_NEW_USER,
REGISTER_SET_COUNTRY_CODE,
REGISTER_SET_EMAIL_SUGGESTIONS,
REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA,
REGISTER_SET_USER_PIPELINE_DATA_LOADED,
REGISTRATION_CLEAR_BACKEND_ERROR,
} from './actions';
import { FIRST_STEP } from './optimizelyExperiment/helper';
import {
DEFAULT_STATE,
PENDING_STATE,
@@ -37,14 +35,10 @@ export const defaultState = {
},
validations: null,
submitState: DEFAULT_STATE,
validationsSubmitState: DEFAULT_STATE,
userPipelineDataLoaded: false,
usernameSuggestions: [],
validationApiRateLimited: false,
shouldBackupState: false,
multiStepRegExpVariation: '',
multiStepRegistrationPageStep: FIRST_STEP,
isValidatingMultiStepRegistrationPage: false,
};
const reducer = (state = defaultState, action = {}) => {
@@ -91,22 +85,12 @@ const reducer = (state = defaultState, action = {}) => {
registrationError: { ...registrationErrorTemp },
};
}
case REGISTER_FORM_VALIDATIONS.BEGIN: {
return {
...state,
validationsSubmitState: action.payload?.isValidatingMultiStepRegistrationPage
? PENDING_STATE
: state.validationsSubmitState,
};
}
case REGISTER_FORM_VALIDATIONS.SUCCESS: {
const { usernameSuggestions, ...validationWithoutUsernameSuggestions } = action.payload.validations;
return {
...state,
validations: validationWithoutUsernameSuggestions,
isValidatingMultiStepRegistrationPage: !!action.payload?.isValidatingMultiStepRegistrationPage,
usernameSuggestions: usernameSuggestions || state.usernameSuggestions,
validationsSubmitState: DEFAULT_STATE,
};
}
case REGISTER_FORM_VALIDATIONS.FAILURE:
@@ -114,7 +98,6 @@ const reducer = (state = defaultState, action = {}) => {
...state,
validationApiRateLimited: true,
validations: null,
validationsSubmitState: DEFAULT_STATE,
};
case REGISTER_CLEAR_USERNAME_SUGGESTIONS:
return {
@@ -146,14 +129,6 @@ const reducer = (state = defaultState, action = {}) => {
emailSuggestion: action.payload.emailSuggestion,
},
};
case REGISTER_SET_MULTI_STEP_REGISTRATION_EXP_DATA: {
return {
...state,
multiStepRegExpVariation: action.payload.multiStepRegExpVariation,
multiStepRegistrationPageStep: action.payload.multiStepRegistrationPageStep,
isValidatingMultiStepRegistrationPage: !!action.payload?.isValidatingMultiStepRegistrationPage,
};
}
default:
return {
...state,

7
src/register/data/sagas.js
View File

@@ -40,13 +40,10 @@ export function* handleNewUserRegistration(action) {
export function* fetchRealtimeValidations(action) {
try {
yield put(fetchRealtimeValidationsBegin(action.payload?.isValidatingMultiStepRegistrationPage));
yield put(fetchRealtimeValidationsBegin());
const { fieldValidations } = yield call(getFieldsValidations, action.payload.formPayload);
yield put(fetchRealtimeValidationsSuccess(
camelCaseObject(fieldValidations),
action.payload?.isValidatingMultiStepRegistrationPage,
));
yield put(fetchRealtimeValidationsSuccess(camelCaseObject(fieldValidations)));
} catch (e) {
if (e.response && e.response.status === 403) {
yield put(fetchRealtimeValidationsFailure());

5
src/register/data/tests/reducers.test.js
View File

@@ -11,7 +11,6 @@ import {
REGISTER_SET_USER_PIPELINE_DATA_LOADED,
REGISTRATION_CLEAR_BACKEND_ERROR,
} from '../actions';
import { FIRST_STEP } from '../optimizelyExperiment/helper';
import reducer from '../reducers';
describe('Registration Reducer Tests', () => {
@@ -35,14 +34,10 @@ describe('Registration Reducer Tests', () => {
},
validations: null,
submitState: DEFAULT_STATE,
validationsSubmitState: DEFAULT_STATE,
userPipelineDataLoaded: false,
usernameSuggestions: [],
validationApiRateLimited: false,
shouldBackupState: false,
multiStepRegExpVariation: '',
multiStepRegistrationPageStep: FIRST_STEP,
isValidatingMultiStepRegistrationPage: false,
};
it('should return the initial state', () => {

36
src/register/data/utils.js
View File

@@ -43,39 +43,31 @@ export const isFormValid = (
Object.keys(payload).forEach(key => {
switch (key) {
case 'name':
if (!fieldErrors.name) {
fieldErrors.name = validateName(payload.name, formatMessage);
}
fieldErrors.name = validateName(payload.name, formatMessage);
if (fieldErrors.name) { isValid = false; }
break;
case 'email': {
if (!fieldErrors.email) {
const {
fieldError, confirmEmailError, suggestion,
} = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
if (fieldError) {
fieldErrors.email = fieldError;
isValid = false;
}
if (confirmEmailError) {
fieldErrors.confirm_email = confirmEmailError;
isValid = false;
}
emailSuggestion = suggestion;
const {
fieldError, confirmEmailError, suggestion,
} = validateEmail(payload.email, configurableFormFields?.confirm_email, formatMessage);
if (fieldError) {
fieldErrors.email = fieldError;
isValid = false;
}
if (confirmEmailError) {
fieldErrors.confirm_email = confirmEmailError;
isValid = false;
}
emailSuggestion = suggestion;
if (fieldErrors.email) { isValid = false; }
break;
}
case 'username':
if (!fieldErrors.username) {
fieldErrors.username = validateUsername(payload.username, formatMessage);
}
fieldErrors.username = validateUsername(payload.username, formatMessage);
if (fieldErrors.username) { isValid = false; }
break;
case 'password':
if (!fieldErrors.password) {
fieldErrors.password = validatePasswordField(payload.password, formatMessage);
}
fieldErrors.password = validatePasswordField(payload.password, formatMessage);
if (fieldErrors.password) { isValid = false; }
break;
default:

23
src/register/messages.jsx
View File

@@ -201,29 +201,6 @@ const messages = defineMessages({
defaultMessage: 'Did you mean',
description: 'Did you mean alert suggestion',
},
// MultiStep Registration experiment
'multistep.registration.exp.continue.button': {
id: 'multistep.registration.exp.continue.button',
defaultMessage: 'Continue',
description: 'Label text for multistep registration page second step',
},
'multistep.registration.username.second.step.guideline.content': {
id: 'multistep.registration.username.second.step.guideline.content',
defaultMessage: 'Finish Registration',
description: 'Guideline content for username field in multi-step registration experiment step 2',
},
'multistep.registration.username.third.step.guideline.content': {
id: 'multistep.registration.username.third.step.guideline.content',
defaultMessage: 'To finalize your registration, please confirm your country of residence '
+ 'and create a public username that will identify you in your course communication forums. '
+ 'The username cannot be changed.',
description: 'Guideline content for username field in multi-step registration experiment step 2',
},
'multistep.registration.form.submission.error': {
id: 'multistep.registration.form.submission.error',
defaultMessage: 'Please check your responses for this and the previous step and try again.',
description: 'Error message that appears on top of the form when invalid form is submitted',
},
});
export default messages;

4
src/sass/_registration.scss
View File

@@ -2,10 +2,6 @@
min-width: 14.4rem;
}
.continue-button {
min-width: 7rem;
}
.pgn__form-autosuggest__wrapper > .pgn__form-group {
margin-bottom: 0 !important;
}