Merge branch 'feature/teacher-registration-flow' of...

Merge branch 'feature/teacher-registration-flow' of https://github.com/rschamp/scratch-www into feature/teacher-registration-flow

* 'feature/teacher-registration-flow' of https://github.com/rschamp/scratch-www:
  Add teacher waiting room view
  Only pass necessary props to steps

# Conflicts:
#	src/components/registration/steps.jsx
#	src/views/teacherregistration/teacherregistration.jsx

src/views/teacherregistration/steps.jsx → src/components/registration/steps.jsx

@@ -301,10 +301,7 @@ module.exports = {
                         <Form onValidSubmit={this.props.onNextStep}>
                             <PhoneInput label={formatMessage({id: 'teacherRegistration.phoneNumber'})}
                                         name="phone"
-                                        defaultCountry={
-                                            (this.props.formData.user && this.props.formData.user.country) ||
-                                            this.props.defaultCountry
-                                        }
+                                        defaultCountry={this.props.defaultCountry}
                                         required />
                             <Checkbox label={formatMessage({id: 'teacherRegistration.phoneConsent'})}
                                       name="phoneConsent"
@@ -420,10 +417,7 @@ module.exports = {
         },
         getInitialState: function () {
             return {
-                countryChoice: (
-                    (this.props.formData.user && this.props.formData.user.country) ||
-                    this.props.defaultCountry
-                ),
+                countryChoice: this.props.defaultCountry,
                 waiting: false
             };
         },
@@ -644,33 +638,47 @@ module.exports = {
             );
         }
     })),
-    LastStep: intl.injectIntl(React.createClass({
+    TeacherApprovalStep: intl.injectIntl(React.createClass({
+        getDefaultProps: function () {
+            return {
+                email: null,
+                invited: false
+            };
+        },
         render: function () {
             return (
                 <Slide className="last-step">
                     <h2>
-                        <intl.FormattedMessage id="teacherRegistration.lastStepTitle" />
+                        <intl.FormattedMessage id="registration.lastStepTitle" />
                     </h2>
                     <p className="description">
-                        <intl.FormattedMessage id="teacherRegistration.lastStepDescription" />
+                        <intl.FormattedMessage id="registration.lastStepDescription" />
                     </p>
-                    <Card className="confirm">
-                        <h4><intl.FormattedMessage id="teacherRegistration.confirmYourEmail" /></h4>
-                        <p>
-                            <intl.FormattedMessage id="teacherRegistration.confirmYourEmailDescription" /><br />
-                            <strong>{this.props.formData.user && this.props.formData.user.email}</strong>
-                        </p>
-                    </Card>
-                    <Card className="wait">
-                        <h4><intl.FormattedMessage id="teacherRegistration.waitForApproval" /></h4>
-                        <p>
-                            <intl.FormattedMessage id="teacherRegistration.waitForApprovalDescription" />
-                        </p>
-                    </Card>
+                    {this.props.confirmed || !this.props.email ?
+                        []
+                        :
+                        (<Card className="confirm">
+                            <h4><intl.FormattedMessage id="registration.confirmYourEmail" /></h4>
+                            <p>
+                                <intl.FormattedMessage id="registration.confirmYourEmailDescription" /><br />
+                                <strong>{this.props.email}</strong>
+                            </p>
+                        </Card>)
+                    }
+                    {this.props.invited ?
+                        <Card className="wait">
+                            <h4><intl.FormattedMessage id="registration.waitForApproval" /></h4>
+                            <p>
+                                <intl.FormattedMessage id="registration.waitForApprovalDescription" />
+                            </p>
+                        </Card>
+                        :
+                        []
+                    }
                     <Card className="resources">
-                        <h4><intl.FormattedMessage id="teacherRegistration.checkOutResources" /></h4>
+                        <h4><intl.FormattedMessage id="registration.checkOutResources" /></h4>
                         <p>
-                            <intl.FormattedHTMLMessage id="teacherRegistration.checkOutResourcesDescription" />
+                            <intl.FormattedHTMLMessage id="registration.checkOutResourcesDescription" />
                         </p>
                     </Card>
                 </Slide>

src/l10n.json

@@ -103,5 +103,15 @@
     "parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.",
     "parents.FaqAgeRangeQ": "What is the age range for Scratch?",
     "parents.FaqResourcesQ": "What resources are available for learning Scratch?",
-    "parents.introDescription": "Scratch is a programming language and an online community where children can program and share interactive media such as stories, games, and animation with people from all over the world. As children create with Scratch, they learn to think creatively, work collaboratively, and reason systematically. Scratch is designed and maintained by the Lifelong Kindergarten group at the MIT Media Lab."
+    "parents.introDescription": "Scratch is a programming language and an online community where children can program and share interactive media such as stories, games, and animation with people from all over the world. As children create with Scratch, they learn to think creatively, work collaboratively, and reason systematically. Scratch is designed and maintained by the Lifelong Kindergarten group at the MIT Media Lab.",
+
+    "registration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account",
+    "registration.lastStepDescription": "We are currently processing your application. ",
+    "registration.confirmYourEmail": "Confirm Your Email",
+    "registration.confirmYourEmailDescription": "If you haven't already, please click the link in the confirmation email sent to:",
+    "registration.waitForApproval": "Wait for Approval",
+    "registration.waitForApprovalDescription": "Your information is being reviewed. Please be patient, the approval process can take up to 24 hours. You will receive an email with your login information once your account has been created.",
+    "registration.checkOutResources": "Get Started with Resources",
+    "registration.checkOutResourcesDescription": "Explore materials for educators and facilitators written by the Scratch Team, including <a href='/educators#resources'>tips, tutorials, and guides</a>."
+
 }

src/routes.json

@@ -93,10 +93,16 @@
     },
     {
         "name": "teacherregistration",
-        "pattern": "^/register-teacher/?$",
+        "pattern": "^/educators/register$",
         "view": "teacherregistration/teacherregistration",
         "title": "Teacher Registration"
     },
+    {
+        "name": "teacherwaitingroom",
+        "pattern": "^/educators/waiting",
+        "view": "teacherwaitingroom/teacherwaitingroom",
+        "title": "Thank you for requesting a Scratch Teacher Account"
+    },
     {
         "name": "wedo2",
         "pattern": "^/wedo/?$",

src/views/teacherregistration/l10n.json

@@ -52,13 +52,5 @@
     "teacherRegistration.howUseScratch": "How do you plan to use Scratch at your organization?",
     "teacherRegistration.emailStepTitle": "Email Address",
     "teacherRegistration.emailStepDescription": "We will send you a confirmation email that will allow you to access your Scratch Teacher Account.",
-    "teacherRegistration.validationEmailMatch": "The emails do not match",
-    "teacherRegistration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account",
-    "teacherRegistration.lastStepDescription": "We are currently processing your application. ",
-    "teacherRegistration.confirmYourEmail": "Confirm Your Email",
-    "teacherRegistration.confirmYourEmailDescription": "If you haven't already, please click the link in the confirmation email sent to:",
-    "teacherRegistration.waitForApproval": "Wait for Approval",
-    "teacherRegistration.waitForApprovalDescription": "Your information is being reviewed. Please be patient, the approval process can take up to 24 hours. You will receive an email with your login information once your account has been created.",
-    "teacherRegistration.checkOutResources": "Get Started with Resources",
-    "teacherRegistration.checkOutResourcesDescription": "Explore materials for educators and facilitators written by the Scratch Team, including <a href='/educators#resources'>tips, tutorials, and guides</a>."
+    "teacherRegistration.validationEmailMatch": "The emails do not match"
 }

src/views/teacherregistration/teacherregistration.jsx

@@ -6,7 +6,7 @@ var api = require('../../lib/api');
 
 var Deck = require('../../components/deck/deck.jsx');
 var Progression = require('../../components/progression/progression.jsx');
-var Steps = require('./steps.jsx');
+var Steps = require('../../components/registration/steps.jsx');
 
 require('./teacherregistration.scss');
 
@@ -79,14 +79,29 @@ var TeacherRegistration = React.createClass({
                     <Steps.RegistrationError {... this.state} />
                 :
                     <Progression {... this.state}>
-                        <Steps.DemographicsStep {... this.state} onNextStep={this.advanceStep} />
-                        <Steps.NameStep {... this.state} onNextStep={this.advanceStep} />
-                        <Steps.PhoneNumberStep {... this.state} onNextStep={this.advanceStep} />
-                        <Steps.OrganizationStep {... this.state} onNextStep={this.advanceStep} />
-                        <Steps.AddressStep {... this.state} onNextStep={this.advanceStep} />
-                        <Steps.UseScratchStep {... this.state} onNextStep={this.advanceStep} />
-                        <Steps.EmailStep {... this.state} onNextStep={this.register} />
-                        <Steps.LastStep {... this.state} />
+                        <Steps.UsernameStep     onNextStep={this.advanceStep}
+                                                waiting={this.state.waiting} />
+                        <Steps.DemographicsStep onNextStep={this.advanceStep}
+                                                waiting={this.state.waiting} />
+                        <Steps.NameStep         onNextStep={this.advanceStep}
+                                                waiting={this.state.waiting} />
+                        <Steps.PhoneNumberStep  onNextStep={this.advanceStep}
+                                                waiting={this.state.waiting}
+                                                defaultCountry={
+                                                    this.state.formData.user && this.state.formData.user.country
+                                                } />
+                        <Steps.OrganizationStep onNextStep={this.advanceStep}
+                                                waiting={this.state.waiting} />
+                        <Steps.AddressStep      onNextStep={this.advanceStep}
+                                                waiting={this.state.waiting}
+                                                defaultCountry={
+                                                    this.state.formData.user && this.state.formData.user.country
+                                                } />
+                        <Steps.UseScratchStep   onNextStep={this.advanceStep}
+                                                waiting={this.state.waiting} />
+                        <Steps.EmailStep        onNextStep={this.register}
+                                                waiting={this.state.waiting} />
+                        <Steps.TeacherApprovalStep email={this.state.formData.user && this.state.formData.user.email} />
                     </Progression>
                 }
             </Deck>

src/views/teacherwaitingroom/teacherwaitingroom.jsx

+var classNames = require('classnames');
+var connect = require('react-redux').connect;
+var React = require('react');
+var render = require('../../lib/render.jsx');
+
+var Deck = require ('../../components/deck/deck.jsx');
+var TeacherApprovalStep = require('../../components/registration/steps.jsx').TeacherApprovalStep;
+
+require('./teacherwaitingroom.scss');
+
+var TeacherWaitingRoom = React.createClass({
+    displayName: 'TeacherWaitingRoom',
+    render: function () {
+        var permissions = this.props.session.permissions || {};
+        var user = this.props.session.user || {};
+        return (
+            <Deck className={classNames('teacher-waitingroom', this.props.className)}>
+                <TeacherApprovalStep confirmed={permissions.social}
+                                     invited={permissions.educator_invitee}
+                                     educator={permissions.educator}
+                                     email={user.email} />
+            </Deck>
+        );
+    }
+});
+
+var mapStateToProps = function (state) {
+    return {
+        session: state.session.session
+    };
+};
+
+var ConnectedTeacherWaitingRoom = connect(mapStateToProps)(TeacherWaitingRoom);
+
+render(<ConnectedTeacherWaitingRoom />, document.getElementById('app'));

src/views/teacherwaitingroom/teacherwaitingroom.scss

+@import "../../colors";
+
+.teacher-waitingroom {
+    background-color: $ui-purple;
+}