mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-28 10:07:59 -05:00
Split phone number step to reduce bundle for other registration pages
This commit is contained in:
Paul Kaplan
parent
da2ca40ccf
commit
0353135cc4
3 changed files with 109 additions and 90 deletions
107
src/components/registration/phone-number-step.jsx
Normal file
107
src/components/registration/phone-number-step.jsx
Normal 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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue