From 3375d6d3d5d6191d57cd2cd83dec8658f9e83e43 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 18 Jun 2019 16:50:27 -0400
Subject: [PATCH] introduced stub components for new scratch3 join modal

---
 src/components/modal/join/modal.jsx           | 28 +++++++++++
 src/components/modal/join/modal.scss          |  5 ++
 src/components/navigation/www/navigation.jsx  | 17 +++++--
 .../registration/scratch3-registration.jsx    | 47 +++++++++++++++++++
 4 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 src/components/modal/join/modal.jsx
 create mode 100644 src/components/modal/join/modal.scss
 create mode 100644 src/components/registration/scratch3-registration.jsx

diff --git a/src/components/modal/join/modal.jsx b/src/components/modal/join/modal.jsx
new file mode 100644
index 000000000..648d7341c
--- /dev/null
+++ b/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;
diff --git a/src/components/modal/join/modal.scss b/src/components/modal/join/modal.scss
new file mode 100644
index 000000000..16a225ba6
--- /dev/null
+++ b/src/components/modal/join/modal.scss
@@ -0,0 +1,5 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+.mod-join {
+}
diff --git a/src/components/navigation/www/navigation.jsx b/src/components/navigation/www/navigation.jsx
index 7068f05f0..ab5c13fef 100644
--- a/src/components/navigation/www/navigation.jsx
+++ b/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"
diff --git a/src/components/registration/scratch3-registration.jsx b/src/components/registration/scratch3-registration.jsx
new file mode 100644
index 000000000..38e7bb90a
--- /dev/null
+++ b/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);