From a435626ae13e4129755c7b4f305c4769c77f439f Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 29 Jul 2019 22:29:04 -0400
Subject: [PATCH] added stubs for email step, welcome step

---
 src/components/join-flow/email-step.jsx   | 63 +++++++++++++++++++++
 src/components/join-flow/join-flow.jsx    |  7 +++
 src/components/join-flow/welcome-step.jsx | 69 +++++++++++++++++++++++
 src/l10n.json                             |  4 ++
 4 files changed, 143 insertions(+)
 create mode 100644 src/components/join-flow/email-step.jsx
 create mode 100644 src/components/join-flow/welcome-step.jsx

diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx
new file mode 100644
index 000000000..aade0a4c0
--- /dev/null
+++ b/src/components/join-flow/email-step.jsx
@@ -0,0 +1,63 @@
+const bindAll = require('lodash.bindall');
+const React = require('react');
+const PropTypes = require('prop-types');
+import {Formik} from 'formik';
+const {injectIntl, intlShape} = require('react-intl');
+
+const JoinFlowStep = require('./join-flow-step.jsx');
+
+require('./join-flow-steps.scss');
+
+class EmailStep extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleValidSubmit',
+            'validateForm'
+        ]);
+    }
+    validateForm () {
+        return {};
+    }
+    handleValidSubmit (formData, formikBag) {
+        formikBag.setSubmitting(false);
+        this.props.onNextStep(formData);
+    }
+    render () {
+        return (
+            <Formik
+                initialValues={{
+                    birth_month: 'null',
+                    birth_year: 'null'
+                }}
+                validate={this.validateForm}
+                validateOnBlur={false}
+                validateOnChange={false}
+                onSubmit={this.handleValidSubmit}
+            >
+                {props => {
+                    const {
+                        handleSubmit,
+                        isSubmitting
+                    } = props;
+                    return (
+                        <JoinFlowStep
+                            description={this.props.intl.formatMessage({id: 'registration.emailStepDescription'})}
+                            headerImgSrc="/images/hoc/getting-started.jpg"
+                            title={this.props.intl.formatMessage({id: 'registration.emailStepTitle'})}
+                            waiting={isSubmitting}
+                            onSubmit={handleSubmit}
+                        />
+                    );
+                }}
+            </Formik>
+        );
+    }
+}
+
+EmailStep.propTypes = {
+    intl: intlShape,
+    onNextStep: PropTypes.func
+};
+
+module.exports = injectIntl(EmailStep);
diff --git a/src/components/join-flow/join-flow.jsx b/src/components/join-flow/join-flow.jsx
index efa663abd..8fba007f1 100644
--- a/src/components/join-flow/join-flow.jsx
+++ b/src/components/join-flow/join-flow.jsx
@@ -9,6 +9,8 @@ const intlShape = require('../../lib/intl.jsx').intlShape;
 const Progression = require('../progression/progression.jsx');
 const UsernameStep = require('./username-step.jsx');
 const BirthDateStep = require('./birthdate-step.jsx');
+const EmailStep = require('./email-step.jsx');
+const WelcomeStep = require('./welcome-step.jsx');
 
 /*
 eslint-disable react/prefer-stateless-function, react/no-unused-prop-types, no-useless-constructor
@@ -38,6 +40,11 @@ class JoinFlow extends React.Component {
                 <Progression step={this.state.step}>
                     <UsernameStep onNextStep={this.handleAdvanceStep} />
                     <BirthDateStep onNextStep={this.handleAdvanceStep} />
+                    <EmailStep onNextStep={this.handleAdvanceStep} />
+                    <WelcomeStep
+                        username={this.state.formData.username}
+                        onNextStep={this.handleAdvanceStep}
+                    />
                 </Progression>
             </React.Fragment>
         );
diff --git a/src/components/join-flow/welcome-step.jsx b/src/components/join-flow/welcome-step.jsx
new file mode 100644
index 000000000..4f2220e62
--- /dev/null
+++ b/src/components/join-flow/welcome-step.jsx
@@ -0,0 +1,69 @@
+const bindAll = require('lodash.bindall');
+const React = require('react');
+const PropTypes = require('prop-types');
+import {Formik} from 'formik';
+const {injectIntl, intlShape} = require('react-intl');
+
+const JoinFlowStep = require('./join-flow-step.jsx');
+
+require('./join-flow-steps.scss');
+
+class WelcomeStep extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleValidSubmit',
+            'validateForm'
+        ]);
+    }
+    validateForm () {
+        return {};
+    }
+    handleValidSubmit (formData, formikBag) {
+        formikBag.setSubmitting(false);
+        this.props.onNextStep(formData);
+    }
+    render () {
+        return (
+            <Formik
+                initialValues={{
+                    birth_month: 'null',
+                    birth_year: 'null'
+                }}
+                validate={this.validateForm}
+                validateOnBlur={false}
+                validateOnChange={false}
+                onSubmit={this.handleValidSubmit}
+            >
+                {props => {
+                    const {
+                        handleSubmit,
+                        isSubmitting
+                    } = props;
+                    return (
+                        <JoinFlowStep
+                            description={this.props.intl.formatMessage({
+                                id: 'registration.welcomeStepDescriptionNonEducator'
+                            })}
+                            headerImgSrc="/images/hoc/getting-started.jpg"
+                            title={`${this.props.intl.formatMessage(
+                                {id: 'registration.welcomeStepTitleNonEducator'},
+                                {username: this.props.username}
+                            )}`}
+                            waiting={isSubmitting}
+                            onSubmit={handleSubmit}
+                        />
+                    );
+                }}
+            </Formik>
+        );
+    }
+}
+
+WelcomeStep.propTypes = {
+    intl: intlShape,
+    onNextStep: PropTypes.func,
+    username: PropTypes.string
+};
+
+module.exports = injectIntl(WelcomeStep);
diff --git a/src/l10n.json b/src/l10n.json
index b0853e981..7b5c693e5 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -152,6 +152,8 @@
     "registration.confirmYourEmail": "Confirm Your Email",
     "registration.confirmYourEmailDescription": "If you haven't already, please click the link in the confirmation email sent to:",
     "registration.createUsername": "Create a username",
+    "registration.emailStepTitle": "What's your email?",
+    "registration.emailStepDescription": "We need this to finish creating your account. Scratch will always keep this information private.",
     "registration.goToClass": "Go to Class",
     "registration.invitedBy": "invited by",
     "registration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account",
@@ -190,8 +192,10 @@
     "registration.waitForApproval": "Wait for Approval",
     "registration.waitForApprovalDescription": "You can log into your Scratch Account now, but the features specific to Teachers are not yet available. Your information is being reviewed. Please be patient, the approval process can take up to one day. You will receive an email indicating your account has been upgraded once your account has been approved.",
     "registration.welcomeStepDescription": "You have successfully set up a Scratch account! You are now a member of the class:",
+    "registration.welcomeStepDescriptionNonEducator": "You’re now logged in! You can start exploring and creating projects.",
     "registration.welcomeStepPrompt": "To get started, click on the button below.",
     "registration.welcomeStepTitle": "Hurray! Welcome to Scratch!",
+    "registration.welcomeStepTitleNonEducator": "Welcome to Scratch, {username}!",
 
     "thumbnail.by": "by",
     "report.error": "Something went wrong when trying to send your message. Please try again.",