From bef6063373040b1e7eab30f792dffc8035b9d71f Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Thu, 1 Aug 2019 16:27:54 -0400
Subject: [PATCH] add instructions text to join flow welcome step

---
 src/components/join-flow/join-flow-steps.scss |  8 ++++++++
 src/components/join-flow/join-flow.jsx        |  1 +
 src/components/join-flow/welcome-step.jsx     | 13 ++++++++++++-
 src/l10n.json                                 |  1 +
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss
index 64bfa562d..26bb11d7a 100644
--- a/src/components/join-flow/join-flow-steps.scss
+++ b/src/components/join-flow/join-flow-steps.scss
@@ -18,6 +18,14 @@
     margin-bottom: .5rem;
 }
 
+.join-flow-instructions {
+    font-size: .875rem;
+    font-weight: bold;
+    line-height: 1.37500rem;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
 .validation-full-width-input {
     transform: translate(21.5625rem, 0);
 }
diff --git a/src/components/join-flow/join-flow.jsx b/src/components/join-flow/join-flow.jsx
index 8fba007f1..80fb1bb05 100644
--- a/src/components/join-flow/join-flow.jsx
+++ b/src/components/join-flow/join-flow.jsx
@@ -42,6 +42,7 @@ class JoinFlow extends React.Component {
                     <BirthDateStep onNextStep={this.handleAdvanceStep} />
                     <EmailStep onNextStep={this.handleAdvanceStep} />
                     <WelcomeStep
+                        email={this.state.formData.email}
                         username={this.state.formData.username}
                         onNextStep={this.handleAdvanceStep}
                     />
diff --git a/src/components/join-flow/welcome-step.jsx b/src/components/join-flow/welcome-step.jsx
index 414693b51..aba6b9abb 100644
--- a/src/components/join-flow/welcome-step.jsx
+++ b/src/components/join-flow/welcome-step.jsx
@@ -2,6 +2,7 @@ const bindAll = require('lodash.bindall');
 const React = require('react');
 const PropTypes = require('prop-types');
 import {Formik} from 'formik';
+const FormattedMessage = require('react-intl').FormattedMessage;
 const {injectIntl, intlShape} = require('react-intl');
 
 const JoinFlowStep = require('./join-flow-step.jsx');
@@ -50,7 +51,16 @@ class WelcomeStep extends React.Component {
                             )}`}
                             waiting={isSubmitting}
                             onSubmit={handleSubmit}
-                        />
+                        >
+                            <div className="join-flow-instructions">
+                                <FormattedMessage
+                                    id="registration.welcomeStepInstructions"
+                                    values={{
+                                        email: this.props.email
+                                    }}
+                                />
+                            </div>
+                        </JoinFlowStep>
                     );
                 }}
             </Formik>
@@ -59,6 +69,7 @@ class WelcomeStep extends React.Component {
 }
 
 WelcomeStep.propTypes = {
+    email: PropTypes.string,
     intl: intlShape,
     onNextStep: PropTypes.func,
     username: PropTypes.string
diff --git a/src/l10n.json b/src/l10n.json
index 7b5c693e5..fd4d51e0d 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -193,6 +193,7 @@
     "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.welcomeStepInstructions": "Want to share and comment? Click the link on the email we sent to {email}.",
     "registration.welcomeStepPrompt": "To get started, click on the button below.",
     "registration.welcomeStepTitle": "Hurray! Welcome to Scratch!",
     "registration.welcomeStepTitleNonEducator": "Welcome to Scratch, {username}!",