From 6a4315d60826fd0f2bfd4a884656cac0f1dd5fa3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 1 Feb 2017 10:49:16 -0300
Subject: [PATCH] Working Install Wizard

---
 client/coral-admin/src/actions/install.js     |  1 +
 client/coral-admin/src/constants/install.js   |  1 +
 .../containers/Install/InstallContainer.js    | 29 +++++++++++++------
 .../components/Steps/AddOrganizationName.js   | 19 ++++++++++++
 .../Install/components/Steps/InitialStep.js   | 20 +++++++++++++
 client/coral-admin/src/reducers/install.js    |  3 ++
 client/coral-ui/components/Wizard.js          | 29 +++++++++++++++++++
 client/coral-ui/index.js                      |  1 +
 8 files changed, 94 insertions(+), 9 deletions(-)
 create mode 100644 client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
 create mode 100644 client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
 create mode 100644 client/coral-ui/components/Wizard.js

diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js
index 460a36e23..abaaeceb7 100644
--- a/client/coral-admin/src/actions/install.js
+++ b/client/coral-admin/src/actions/install.js
@@ -2,3 +2,4 @@ import * as actions from '../constants/install';
 
 export const nextStep = () => ({type: actions.NEXT_STEP});
 export const previousStep = () => ({type: actions.PREVIOUS_STEP});
+export const goToStep = step => ({type: actions.GO_TO_STEP, step});
diff --git a/client/coral-admin/src/constants/install.js b/client/coral-admin/src/constants/install.js
index f15a39ed4..d33ec4657 100644
--- a/client/coral-admin/src/constants/install.js
+++ b/client/coral-admin/src/constants/install.js
@@ -1,2 +1,3 @@
 export const NEXT_STEP = 'NEXT_STEP';
 export const PREVIOUS_STEP = 'PREVIOUS_STEP';
+export const GO_TO_STEP = 'GO_TO_STEP';
diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index de296acc0..bda32bde2 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/client/coral-admin/src/containers/Install/InstallContainer.js
@@ -1,19 +1,29 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import styles from './style.css';
-import {nextStep, previousStep} from '../../actions/install'
+import {nextStep, previousStep, goToStep} from '../../actions/install';
+import {Button, Wizard} from 'coral-ui';
+
+import InitialStep from './components/Steps/InitialStep'
+import AddOrganizationName from './components/Steps/AddOrganizationName'
 
 const InstallContainer = props => {
-  const {nextStep, previousStep, install} = props;
+  const {nextStep, previousStep, goToStep, install} = props;
 
   return (
     <div className={styles.Install}>
-      Install:
-      <h1>
-        {install.step}
-      </h1>
-      <button onClick={previousStep}>Previous Step</button>
-      <button onClick={nextStep}>Next Step</button>
+      <h1>{install.step}</h1>
+      <nav>
+        <ul>
+          <li onClick={() => goToStep(0)}>Add Organization Name</li>
+          <li onClick={() => goToStep(1)}>Create your account</li>
+          <li onClick={() => goToStep(2)}>Invite team members</li>
+        </ul>
+      </nav>
+      <Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}>
+        <InitialStep/>
+        <AddOrganizationName/>
+      </Wizard>
     </div>
   );
 };
@@ -24,7 +34,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   nextStep: () => dispatch(nextStep()),
-  previousStep: () => dispatch(previousStep())
+  previousStep: () => dispatch(previousStep()),
+  goToStep: step => dispatch(goToStep(step))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(InstallContainer);
diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
new file mode 100644
index 000000000..1af4b9839
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
@@ -0,0 +1,19 @@
+import React from 'react';
+// import styles from './style.css';
+import {Button} from 'coral-ui';
+
+const InitialStep = props => {
+  const {nextStep, previousStep} = props;
+  return (
+    <div>
+      <h2>Welcome to the Coral Project</h2>
+      <p>
+        Please tell us the name of your organization. This will appear in emails when
+        inviting new team members
+      </p>
+      <Button onClick={previousStep}>Go back</Button>
+    </div>
+  );
+};
+
+export default InitialStep;
diff --git a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
new file mode 100644
index 000000000..9efdf4ad0
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
@@ -0,0 +1,20 @@
+import React from 'react';
+// import styles from './style.css';
+import {Button} from 'coral-ui';
+
+const InitialStep = props => {
+  const {nextStep} = props;
+  return (
+    <div>
+      <h2>Welcome to the Coral Project</h2>
+      <p>
+      The remainder of the Talk installation will take about ten minutes.
+      Once you complete the following three steps, you will have a free
+      installation and provision of Mongo and Redis.
+      </p>
+      <Button onClick={nextStep}>Get Started</Button>
+    </div>
+  );
+};
+
+export default InitialStep;
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index 1b9ae5b28..95febb887 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/client/coral-admin/src/reducers/install.js
@@ -15,6 +15,9 @@ export default function auth (state = initialState, action) {
   case actions.PREVIOUS_STEP:
     return state
       .set('step', state.get('step') - 1);
+  case actions.GO_TO_STEP:
+    return state
+      .set('step', action.step);
   default :
     return state;
   }
diff --git a/client/coral-ui/components/Wizard.js b/client/coral-ui/components/Wizard.js
new file mode 100644
index 000000000..1ba6e56a6
--- /dev/null
+++ b/client/coral-ui/components/Wizard.js
@@ -0,0 +1,29 @@
+import React, {PropTypes} from 'react';
+
+const Wizard = (props) => {
+  const {children, currentStep, nextStep, previousStep, goToStep, className = ''} = props;
+  return (
+    <div>
+      {React.Children.toArray(children)
+        .filter((child, i) => i === currentStep)
+        .map((child, i) =>
+            React.cloneElement(child, {
+              i,
+              currentStep,
+              nextStep,
+              previousStep,
+              goToStep
+            })
+      )}
+    </div>
+  );
+};
+
+Wizard.propTypes = {
+  currentStep: PropTypes.number.isRequired,
+  nextStep: PropTypes.func.isRequired,
+  previousStep: PropTypes.func.isRequired,
+  goToStep: PropTypes.func.isRequired
+}
+
+export default Wizard;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 23d5d876a..b58c2a74a 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -14,3 +14,4 @@ export {default as List} from './components/List';
 export {default as Item} from './components/Item';
 export {default as Card} from './components/Card';
 export {default as Pager} from './components/Pager';
+export {default as Wizard} from './components/Wizard';