Merge pull request #3239 from benjiwheeler/join-flow-confirm-text

Add ToS footer to email step, make next button Create Account

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

@@ -5,6 +5,7 @@ const PropTypes = require('prop-types');
 import {Formik} from 'formik';
 const {injectIntl, intlShape} = require('react-intl');
 const emailValidator = require('email-validator');
+const FormattedMessage = require('react-intl').FormattedMessage;
 
 const JoinFlowStep = require('./join-flow-step.jsx');
 const FormikInput = require('../../components/formik-forms/formik-input.jsx');
@@ -55,8 +56,25 @@ class EmailStep extends React.Component {
                     return (
                         <JoinFlowStep
                             description={this.props.intl.formatMessage({id: 'registration.emailStepDescription'})}
+                            footerContent={(
+                                <FormattedMessage
+                                    id="registration.acceptTermsOfUse"
+                                    values={{
+                                        touLink: (
+                                            <a
+                                                className="join-flow-link"
+                                                href="/terms_of_use"
+                                                target="_blank"
+                                            >
+                                                <FormattedMessage id="general.termsOfUse" />
+                                            </a>
+                                        )
+                                    }}
+                                />
+                            )}
                             headerImgSrc="/images/hoc/getting-started.jpg"
                             innerContentClassName="modal-inner-content-email"
+                            nextButton={this.props.intl.formatMessage({id: 'registration.createAccount'})}
                             title={this.props.intl.formatMessage({id: 'registration.emailStepTitle'})}
                             waiting={isSubmitting}
                             onSubmit={handleSubmit}

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

@@ -13,6 +13,7 @@ const JoinFlowStep = ({
     children,
     className,
     description,
+    footerContent,
     headerImgSrc,
     infoMessage,
     innerContentClassName,
@@ -52,6 +53,11 @@ const JoinFlowStep = ({
                 {children}
             </ModalInnerContent>
         </div>
+        {footerContent && (
+            <div className="join-flow-footer-message">
+                {footerContent}
+            </div>
+        )}
         <NextStepButton
             content={nextButton}
             waiting={waiting}
@@ -63,6 +69,7 @@ JoinFlowStep.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     description: PropTypes.string,
+    footerContent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     headerImgSrc: PropTypes.string,
     infoMessage: PropTypes.string,
     innerContentClassName: PropTypes.string,

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

@@ -33,3 +33,13 @@
     border-top-left-radius: 1rem;
     border-top-right-radius: 1rem;
 }
+
+.join-flow-footer-message {
+    width: 100%;
+    padding: 1.125rem 1.5rem 1.125rem;
+    background-color: $ui-blue-25percent;
+    font-size: .75rem;
+    font-weight: 600;
+    text-align: center;
+    color: $ui-blue;
+}

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

@@ -101,3 +101,7 @@
 .modal-inner-content-email {
     padding-top: 2.9rem;
 }
+
+a.join-flow-link:link, a.join-flow-link:visited, a.join-flow-link:active {
+    text-decoration: underline;
+}

src/l10n.json

@@ -158,6 +158,7 @@
     "registration.classroomInviteNewStudentStepDescription": "Your teacher has invited you to join a class:",
     "registration.confirmYourEmail": "Confirm Your Email",
     "registration.confirmYourEmailDescription": "If you haven't already, please click the link in the confirmation email sent to:",
+    "registration.createAccount": "Create Account",
     "registration.createUsername": "Create a username",
     "registration.genderStepTitle": "What's your gender?",
     "registration.genderStepDescription": "Scratch welcomes people of all genders. We will always keep this information private.",
@@ -190,6 +191,7 @@
     "registration.studentUsernameStepHelpText": "Already have a Scratch account?",
     "registration.studentUsernameStepTooltip": "You'll need to create a new Scratch account to join this class.",
     "registration.studentUsernameFieldHelpText": "For safety, don't use your real name!",
+    "registration.acceptTermsOfUse": "By creating an account, I accept and agree to the {touLink}.",
     "registration.usernameStepTitle": "Request a Teacher Account",
     "registration.usernameStepTitleScratcher": "Create a Scratch Account",
     "registration.validationMaxLength": "Sorry, you have exceeded the maximum character limit.",