Merge pull request #3161 from benjiwheeler/join-flow-country-step

Add join flow country step

src/components/formik-forms/formik-select.jsx

@@ -17,6 +17,7 @@ const FormikSelect = ({
 }) => {
     const optionsList = options.map((item, index) => (
         <option
+            disabled={item.disabled}
             key={index}
             value={item.value}
         >

src/components/join-flow/country-step.jsx

@@ -0,0 +1,111 @@
+const bindAll = require('lodash.bindall');
+const classNames = require('classnames');
+const React = require('react');
+const PropTypes = require('prop-types');
+import {Formik} from 'formik';
+const {injectIntl, intlShape} = require('react-intl');
+
+const countryData = require('../../lib/country-data');
+const FormikSelect = require('../../components/formik-forms/formik-select.jsx');
+const JoinFlowStep = require('./join-flow-step.jsx');
+
+require('./join-flow-steps.scss');
+
+class CountryStep extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleValidSubmit',
+            'validateForm',
+            'validateSelect'
+        ]);
+        this.countryOptions = [];
+    }
+    componentDidMount () {
+        this.setCountryOptions();
+    }
+    setCountryOptions () {
+        if (this.countryOptions.length === 0) {
+            this.countryOptions = [...countryData.registrationCountryOptions];
+            this.countryOptions.unshift({
+                disabled: true,
+                label: this.props.intl.formatMessage({id: 'registration.selectCountry'}),
+                value: 'null'
+            });
+        }
+    }
+    validateSelect (selection) {
+        if (selection === 'null') {
+            return this.props.intl.formatMessage({id: 'form.validationRequired'});
+        }
+        return null;
+    }
+    validateForm () {
+        return {};
+    }
+    handleValidSubmit (formData, formikBag) {
+        formikBag.setSubmitting(false);
+        this.props.onNextStep(formData);
+    }
+    render () {
+        this.setCountryOptions();
+        return (
+            <Formik
+                initialValues={{
+                    country: 'null'
+                }}
+                validate={this.validateForm}
+                validateOnBlur={false}
+                validateOnChange={false}
+                onSubmit={this.handleValidSubmit}
+            >
+                {props => {
+                    const {
+                        errors,
+                        handleSubmit,
+                        isSubmitting
+                    } = props;
+                    return (
+                        <JoinFlowStep
+                            description={this.props.intl.formatMessage({id: 'registration.countryStepDescription'})}
+                            headerImgSrc="/images/hoc/getting-started.jpg"
+                            title={this.props.intl.formatMessage({id: 'general.joinScratch'})}
+                            waiting={isSubmitting}
+                            onSubmit={handleSubmit}
+                        >
+                            <div
+                                className={classNames(
+                                    'col-sm-9',
+                                    'row'
+                                )}
+                            >
+                                <FormikSelect
+                                    className={classNames(
+                                        'join-flow-select',
+                                        'join-flow-select-country',
+                                        {fail: errors.country}
+                                    )}
+                                    error={errors.country}
+                                    id="country"
+                                    name="country"
+                                    options={this.countryOptions}
+                                    validate={this.validateSelect}
+                                    validationClassName="validation-full-width-input"
+                                />
+                            </div>
+                        </JoinFlowStep>
+                    );
+                }}
+            </Formik>
+        );
+    }
+}
+
+CountryStep.propTypes = {
+    intl: intlShape,
+    onNextStep: PropTypes.func
+};
+
+const IntlCountryStep = injectIntl(CountryStep);
+
+module.exports = IntlCountryStep;

src/components/join-flow/join-flow-steps.scss

@@ -47,12 +47,14 @@
     }
 }
 
-.select .join-flow-select {
+.select .join-flow-select-month {
     width: 9.125rem;
+    margin-right: .5rem;
 }
 
-.join-flow-select-month {
-    margin-right: .5rem;
+.select .join-flow-select-country {
+    width: 100%;
+    margin: 0 auto;
 }
 
 .join-flow-password-section {

src/components/join-flow/join-flow.jsx

@@ -10,6 +10,7 @@ const Progression = require('../progression/progression.jsx');
 const UsernameStep = require('./username-step.jsx');
 const BirthDateStep = require('./birthdate-step.jsx');
 const GenderStep = require('./gender-step.jsx');
+const CountryStep = require('./country-step.jsx');
 const EmailStep = require('./email-step.jsx');
 const WelcomeStep = require('./welcome-step.jsx');
 
@@ -42,6 +43,7 @@ class JoinFlow extends React.Component {
                     <UsernameStep onNextStep={this.handleAdvanceStep} />
                     <BirthDateStep onNextStep={this.handleAdvanceStep} />
                     <GenderStep onNextStep={this.handleAdvanceStep} />
+                    <CountryStep onNextStep={this.handleAdvanceStep} />
                     <EmailStep onNextStep={this.handleAdvanceStep} />
                     <WelcomeStep
                         email={this.state.formData.email}