scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-28 10:07:59 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Split phone number step to reduce bundle for other registration pages

Browse source
This commit is contained in:
Paul Kaplan 2021-02-26 10:31:03 -05:00
parent da2ca40ccf
commit 0353135cc4
3 changed files with 109 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
src/components/registration/phone-number-step.jsx Normal file
View file

@ -0,0 +1,107 @@
/* eslint-disable react/no-multi-comp */
const bindAll = require('lodash.bindall');
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const PropTypes = require('prop-types');
const React = require('react');
const intl = require('../../lib/intl.jsx');
const Card = require('../../components/card/card.jsx');
const Checkbox = require('../../components/forms/checkbox.jsx');
const Form = require('../../components/forms/form.jsx');
const PhoneInput = require('../../components/forms/phone-input.jsx');
const Slide = require('../../components/slide/slide.jsx');
const StepNavigation = require('../../components/stepnavigation/stepnavigation.jsx');
const Tooltip = require('../../components/tooltip/tooltip.jsx');
require('./steps.scss');
/*
* This step is separate from the other steps because it includes a large library
* for phone number validation.
*/
class PhoneNumberStep extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'handleValidSubmit'
]);
}
handleValidSubmit(formData, reset, invalidate) {
if (!formData.phone || formData.phone.national_number === '+') {
return invalidate({
phone: this.props.intl.formatMessage({id: 'form.validationRequired'})
});
}
return this.props.onNextStep(formData);
}
render() {
return (
<Slide className="registration-step phone-step">
<h2>
<intl.FormattedMessage id="teacherRegistration.phoneNumber" />
</h2>
<p className="description">
<intl.FormattedMessage id="teacherRegistration.phoneStepDescription" />
<Tooltip
tipContent={
this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
}
title={'?'}
/>
</p>
<Card>
<Form onValidSubmit={this.handleValidSubmit}>
<PhoneInput
required
defaultCountry={this.props.defaultCountry}
label={
this.props.intl.formatMessage({id: 'teacherRegistration.phoneNumber'})
}
name="phone"
/>
<Checkbox
name="phoneConsent"
required="isFalse"
validationErrors={{
isFalse: this.props.intl.formatMessage({
id: 'teacherRegistration.validationPhoneConsent'
})
}}
valueLabel={
this.props.intl.formatMessage({id: 'teacherRegistration.phoneConsent'})
}
/>
<NextStepButton
text={<intl.FormattedMessage id="registration.nextStep" />}
waiting={this.props.waiting}
/>
</Form>
</Card>
<StepNavigation
active={this.props.activeStep}
steps={this.props.totalSteps - 1}
/>
</Slide>
);
}
}
PhoneNumberStep.propTypes = {
activeStep: PropTypes.number,
defaultCountry: PropTypes.string,
intl: intlShape,
onNextStep: PropTypes.func,
totalSteps: PropTypes.number,
waiting: PropTypes.bool
};
PhoneNumberStep.defaultProps = {
defaultCountry: DEFAULT_COUNTRY,
waiting: false
};
const IntlPhoneNumberStep = injectIntl(PhoneNumberStep);
module.exports = IntlPhoneNumberStep;

89
src/components/registration/steps.jsx
View file

@ -20,7 +20,6 @@ const CheckboxGroup = require('../../components/forms/checkbox-group.jsx');
const Form = require('../../components/forms/form.jsx');
const GeneralError = require('../../components/forms/general-error.jsx');
const Input = require('../../components/forms/input.jsx');
const PhoneInput = require('../../components/forms/phone-input.jsx');
const RadioGroup = require('../../components/forms/radio-group.jsx');
const Select = require('../../components/forms/select.jsx');
const Slide = require('../../components/slide/slide.jsx');
@ -703,93 +702,6 @@ NameStep.defaultProps = {
const IntlNameStep = injectIntl(NameStep);
/*
* PHONE NUMBER STEP
*/
class PhoneNumberStep extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'handleValidSubmit'
]);
}
handleValidSubmit (formData, reset, invalidate) {
if (!formData.phone || formData.phone.national_number === '+') {
return invalidate({
phone: this.props.intl.formatMessage({id: 'form.validationRequired'})
});
}
return this.props.onNextStep(formData);
}
render () {
return (
<Slide className="registration-step phone-step">
<h2>
<intl.FormattedMessage id="teacherRegistration.phoneNumber" />
</h2>
<p className="description">
<intl.FormattedMessage id="teacherRegistration.phoneStepDescription" />
<Tooltip
tipContent={
this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
}
title={'?'}
/>
</p>
<Card>
<Form onValidSubmit={this.handleValidSubmit}>
<PhoneInput
required
defaultCountry={this.props.defaultCountry}
label={
this.props.intl.formatMessage({id: 'teacherRegistration.phoneNumber'})
}
name="phone"
/>
<Checkbox
name="phoneConsent"
required="isFalse"
validationErrors={{
isFalse: this.props.intl.formatMessage({
id: 'teacherRegistration.validationPhoneConsent'
})
}}
valueLabel={
this.props.intl.formatMessage({id: 'teacherRegistration.phoneConsent'})
}
/>
<NextStepButton
text={<intl.FormattedMessage id="registration.nextStep" />}
waiting={this.props.waiting}
/>
</Form>
</Card>
<StepNavigation
active={this.props.activeStep}
steps={this.props.totalSteps - 1}
/>
</Slide>
);
}
}
PhoneNumberStep.propTypes = {
activeStep: PropTypes.number,
defaultCountry: PropTypes.string,
intl: intlShape,
onNextStep: PropTypes.func,
totalSteps: PropTypes.number,
waiting: PropTypes.bool
};
PhoneNumberStep.defaultProps = {
defaultCountry: DEFAULT_COUNTRY,
waiting: false
};
const IntlPhoneNumberStep = injectIntl(PhoneNumberStep);
/*
* ORGANIZATION STEP
*/
@ -1670,7 +1582,6 @@ module.exports.UsernameStep = IntlUsernameStep;
module.exports.ChoosePasswordStep = IntlChoosePasswordStep;
module.exports.DemographicsStep = IntlDemographicsStep;
module.exports.NameStep = IntlNameStep;
module.exports.PhoneNumberStep = IntlPhoneNumberStep;
module.exports.OrganizationStep = IntlOrganizationStep;
module.exports.AddressStep = IntlAddressStep;
module.exports.UseScratchStep = IntlUseScratchStep;

3
src/views/teacherregistration/teacherregistration.jsx
View file

@ -12,6 +12,7 @@ const sessionActions = require('../../redux/session.js');
const Deck = require('../../components/deck/deck.jsx');
const Progression = require('../../components/progression/progression.jsx');
const Steps = require('../../components/registration/steps.jsx');
const PhoneNumberStep = require('../../components/registration/phone-number-step.jsx');
const render = require('../../lib/render.jsx');
@ -119,7 +120,7 @@ class TeacherRegistration extends React.Component {
waiting={this.state.waiting}
onNextStep={this.handleAdvanceStep}
/>
<Steps.PhoneNumberStep
<PhoneNumberStep
defaultCountry={this.state.formData.countryCode}
waiting={this.state.waiting}
onNextStep={this.handleAdvanceStep}