Merge pull request #3389 from benjiwheeler/join-flow-navigate-when-finished

Join flow navigate when finished

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

@@ -155,6 +155,7 @@ class JoinFlow extends React.Component {
                             onRegistrationError={this.handleRegistrationError}
                         />
                         <WelcomeStep
+                            createProjectOnComplete={this.props.createProjectOnComplete}
                             email={this.state.formData.email}
                             username={this.state.formData.username}
                             onNextStep={this.props.onCompleteRegistration}
@@ -167,6 +168,7 @@ class JoinFlow extends React.Component {
 }
 
 JoinFlow.propTypes = {
+    createProjectOnComplete: PropTypes.bool,
     intl: intlShape,
     onCompleteRegistration: PropTypes.func,
     refreshSession: PropTypes.func

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

@@ -45,7 +45,7 @@ class WelcomeStep extends React.Component {
                             descriptionClassName="join-flow-welcome-description"
                             headerImgSrc="/images/join-flow/welcome-header.png"
                             innerClassName="join-flow-inner-welcome-step"
-                            nextButton={
+                            nextButton={this.props.createProjectOnComplete ? (
                                 <React.Fragment>
                                     <FormattedMessage id="registration.makeProject" />
                                     <img
@@ -53,7 +53,9 @@ class WelcomeStep extends React.Component {
                                         src="/svgs/project/r-arrow.svg"
                                     />
                                 </React.Fragment>
-                            }
+                            ) : (
+                                <FormattedMessage id="general.done" />
+                            )}
                             title={`${this.props.intl.formatMessage(
                                 {id: 'registration.welcomeStepTitleNonEducator'},
                                 {username: this.props.username}
@@ -79,6 +81,7 @@ class WelcomeStep extends React.Component {
 }
 
 WelcomeStep.propTypes = {
+    createProjectOnComplete: PropTypes.bool,
     email: PropTypes.string,
     intl: intlShape,
     onNextStep: PropTypes.func,

src/components/modal/join/modal.jsx

@@ -6,7 +6,8 @@ const JoinFlow = require('../../join-flow/join-flow.jsx');
 require('./modal.scss');
 
 const JoinModal = ({
-    onCompleteRegistration, // eslint-disable-line no-unused-vars
+    createProjectOnComplete,
+    onCompleteRegistration,
     onRequestClose,
     ...modalProps
 }) => (
@@ -20,12 +21,14 @@ const JoinModal = ({
         {...modalProps}
     >
         <JoinFlow
+            createProjectOnComplete={createProjectOnComplete}
             onCompleteRegistration={onCompleteRegistration}
         />
     </Modal>
 );
 
 JoinModal.propTypes = {
+    createProjectOnComplete: PropTypes.bool,
     onCompleteRegistration: PropTypes.func,
     onRequestClose: PropTypes.func,
     showCloseButton: PropTypes.bool

src/components/registration/scratch3-registration.jsx

@@ -8,14 +8,18 @@ const JoinModal = require('../modal/join/modal.jsx');
 require('./registration.scss');
 
 const Registration = ({
+    createProjectOnComplete,
     handleCloseRegistration,
     handleCompleteRegistration,
-    isOpen
+    isOpen,
+    showCloseButton
 }) => (
     <div>
         <JoinModal
+            createProjectOnComplete={createProjectOnComplete}
             isOpen={isOpen}
             key="join-modal"
+            showCloseButton={showCloseButton}
             onCompleteRegistration={handleCompleteRegistration}
             onRequestClose={handleCloseRegistration}
         />
@@ -23,11 +27,11 @@ const Registration = ({
 );
 
 Registration.propTypes = {
-    // used in mapDispatchToProps; eslint doesn't understand that this prop is used
+    createProjectOnComplete: PropTypes.bool,
-    createProjectOnComplete: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
     handleCloseRegistration: PropTypes.func,
     handleCompleteRegistration: PropTypes.func,
-    isOpen: PropTypes.bool
+    isOpen: PropTypes.bool,
+    showCloseButton: PropTypes.bool
 };
 
 const mapDispatchToProps = (dispatch, ownProps) => ({

src/l10n.json

@@ -13,6 +13,7 @@
     "general.confirmEmail": "Confirm Email",
     "general.contactUs": "Contact Us",
     "general.contact": "Contact",
+    "general.done": "Done",
     "general.downloadPDF": "Download PDF",
     "general.emailUs": "Email Us",
     "general.conferences": "Conferences",

src/views/join/join.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const render = require('../../lib/render.jsx');
-const JoinModal = require('../../components/modal/join/modal.jsx');
+const Scratch3Registration = require('../../components/registration/scratch3-registration.jsx');
 const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx');
 // Require this even though we don't use it because, without it, webpack runs out of memory...
 const Page = require('../../components/page/www/page.jsx'); // eslint-disable-line no-unused-vars
@@ -20,7 +20,8 @@ const Register = () => (
             </a>
 
         </div>
-        <JoinModal
+        <Scratch3Registration
+            createProjectOnComplete
             isOpen
             key="scratch3registration"
             showCloseButton={false}