Merge pull request #3054 from benjiwheeler/join-flow-modal-stub

introduce stub components for new scratch3 join modal

src/components/modal/join/modal.jsx

@@ -0,0 +1,28 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+const Modal = require('../base/modal.jsx');
+
+require('./modal.scss');
+
+const JoinModal = ({
+    isOpen,
+    onCompleteRegistration, // eslint-disable-line no-unused-vars
+    onRequestClose,
+    ...modalProps
+}) => (
+    <Modal
+        useStandardSizes
+        className="mod-join"
+        isOpen={isOpen}
+        onRequestClose={onRequestClose}
+        {...modalProps}
+    />
+);
+
+JoinModal.propTypes = {
+    isOpen: PropTypes.bool,
+    onCompleteRegistration: PropTypes.func,
+    onRequestClose: PropTypes.func
+};
+
+module.exports = JoinModal;

src/components/modal/join/modal.scss

@@ -0,0 +1,5 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+.mod-join {
+}

src/components/navigation/www/navigation.jsx

@@ -18,10 +18,13 @@ const LoginDropdown = require('../../login/login-dropdown.jsx');
 const CanceledDeletionModal = require('../../login/canceled-deletion-modal.jsx');
 const NavigationBox = require('../base/navigation.jsx');
 const Registration = require('../../registration/registration.jsx');
+const Scratch3Registration = require('../../registration/scratch3-registration.jsx');
 const AccountNav = require('./accountnav.jsx');
 
 require('./navigation.scss');
 
+const USE_SCRATCH3_REGISTRATION = false;
+
 class Navigation extends React.Component {
     constructor (props) {
         super(props);
@@ -195,9 +198,17 @@ class Navigation extends React.Component {
                                     <FormattedMessage id="general.joinScratch" />
                                 </a>
                             </li>,
-                            <Registration
-                                key="registration"
-                            />,
+                            (
+                                USE_SCRATCH3_REGISTRATION ? (
+                                    <Scratch3Registration
+                                        key="scratch3registration"
+                                    />
+                                ) : (
+                                    <Registration
+                                        key="registration"
+                                    />
+                                )
+                            ),
                             <li
                                 className="link right login-item"
                                 key="login"

src/components/registration/scratch3-registration.jsx

@@ -0,0 +1,47 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+const connect = require('react-redux').connect;
+
+const navigationActions = require('../../redux/navigation.js');
+const JoinModal = require('../modal/join/modal.jsx');
+
+require('./registration.scss');
+
+const Registration = ({
+    handleCloseRegistration,
+    handleCompleteRegistration,
+    isOpen
+}) => (
+    <div>
+        <JoinModal
+            isOpen={isOpen}
+            key="join-modal"
+            onCompleteRegistration={handleCompleteRegistration}
+            onRequestClose={handleCloseRegistration}
+        />
+    </div>
+);
+
+Registration.propTypes = {
+    handleCloseRegistration: PropTypes.func,
+    handleCompleteRegistration: PropTypes.func,
+    isOpen: PropTypes.bool
+};
+
+const mapStateToProps = state => ({
+    isOpen: state.navigation.registrationOpen
+});
+
+const mapDispatchToProps = dispatch => ({
+    handleCloseRegistration: () => {
+        dispatch(navigationActions.setRegistrationOpen(false));
+    },
+    handleCompleteRegistration: () => {
+        dispatch(navigationActions.handleCompleteRegistration());
+    }
+});
+
+module.exports = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(Registration);