Split phone number step to reduce bundle for other registration pages

src/components/registration/phone-number-step.jsx

@@ -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;

src/components/registration/steps.jsx

@@ -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;

src/views/teacherregistration/teacherregistration.jsx

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