Onboarding

code/web/src/client/components/home/Home.js

@@ -14,34 +14,41 @@ import { textLevel1 } from '../ui/common/shadows'
 
 // App Imports
 import userRoutes from '../../setup/routes/user'
+import Onboarding from './Onboarding'
 
 // Component
 const Home = (props) => (
-    <Grid alignCenter={ true } style={ { backgroundImage: `url('/images/cover.jpg')`, backgroundAttachment: 'fixed', backgroundSize: 'cover', backgroundPosition: 'center top', height: 'calc(100vh - 5em)', textAlign: 'center', color: white } }>
-        {/* SEO */}
-        <Helmet>
-            <title>Monthly supply of clothes and accessories for Men and Women - Crate</title>
-        </Helmet>
-
-        <GridCell>
-            <H1 font="secondary" style={ { textShadow: textLevel1 } }>Crate</H1>
-
-            <H4 style={ { textShadow: textLevel1, marginTop: '0.5em' } }>Your monthly subscription of trendy clothes and accessories</H4>
-
-            {/* Call to action */}
-            {
-                props.user.isAuthenticated
-                    ?
-                <Link to={ userRoutes.subscriptions.path }>
-                    <Button theme="secondary" style={ { marginTop: '1em' } }>Get Subscription</Button>
-                </Link>
-                    :
-                <Link to={ userRoutes.signup.path }>
-                    <Button theme="secondary" style={ { marginTop: '1em' } }>Get Started</Button>
-                </Link>
-            }
-        </GridCell>
-    </Grid>
+    <div>
+        {/* Home */}
+        <Grid gutter={ false } alignCenter={ true } style={ { backgroundImage: `url('/images/cover.jpg')`, backgroundAttachment: 'fixed', backgroundSize: 'cover', backgroundPosition: 'center top', height: 'calc(100vh - 5em)', textAlign: 'center', color: white } }>
+            {/* SEO */}
+            <Helmet>
+                <title>Monthly supply of clothes and accessories for Men and Women - Crate</title>
+            </Helmet>
+
+            <GridCell>
+                <H1 font="secondary" style={ { textShadow: textLevel1 } }>Crate</H1>
+
+                <H4 style={ { textShadow: textLevel1, marginTop: '0.5em' } }>Your monthly subscription of trendy clothes and accessories</H4>
+
+                {/* Call to action */}
+                {
+                    props.user.isAuthenticated
+                        ?
+                    <Link to={ userRoutes.subscriptions.path }>
+                        <Button theme="secondary" style={ { marginTop: '1em' } }>Get Subscription</Button>
+                    </Link>
+                        :
+                    <Link to={ userRoutes.signup.path }>
+                        <Button theme="secondary" style={ { marginTop: '1em' } }>Get Started</Button>
+                    </Link>
+                }
+            </GridCell>
+        </Grid>
+
+        {/* Onboarding */}
+        <Onboarding />
+    </div>
 )
 
 // Component Properties

code/web/src/client/components/home/Onboarding.js

@@ -0,0 +1,132 @@
+// Imports
+import React, { Component } from 'react'
+
+// UI Imports
+import { Grid, GridCell } from '../ui/grid'
+import { H1, H6 } from '../ui/typography'
+import Modal from '../ui/modal/Modal'
+import Button from '../ui/button'
+import { white } from '../ui/common/colors'
+import { textLevel1 } from '../ui/common/shadows'
+
+// App Imports
+
+// Component
+class Onboarding extends Component {
+
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            visible: false,
+            currentStep: 0
+        }
+    }
+
+    componentDidMount() {
+        const onboarding = window.localStorage.getItem('onboarding')
+        if(!onboarding) {
+            this.toggleVisible(true)
+
+            window.localStorage.setItem('onboarding', 1)
+        }
+    }
+
+    toggleVisible = (visible) => {
+        this.setState({
+            visible
+        })
+    }
+
+    nextStep = () => {
+        this.setState(state => ({
+            currentStep: state.currentStep + 1
+        }))
+    }
+
+    close = () => {
+        this.toggleVisible(false)
+    }
+
+    render() {
+        const steps = [
+            <Grid gutter={ false } alignCenter={ true } style={ { height: '100%', textAlign: 'center', color: white } }>
+                {/* 1. Welcome to Crate */}
+
+                {/* Left - Headline and info */}
+                <GridCell>
+                    <H1 font="secondary" style={ { textShadow: textLevel1 } }>Welcome to Crate</H1>
+
+                    <H6 style={ { marginTop: '0.5em' } }>Your monthly subscription of trendy <br/> clothes and accessories</H6>
+
+                    <Button theme="primary" style={ { marginTop: '1.5em' } } onClick={ this.nextStep }>Next</Button>
+                </GridCell>
+
+                {/* Right - Image */}
+                <GridCell>
+                    <img src={ '/images/collage.png' } alt="collage" title="products collage" style={ { width: 400 } } />
+                </GridCell>
+            </Grid>,
+
+            <Grid gutter={ false } alignCenter={ true } style={ { height: '100%', textAlign: 'center', color: white } }>
+                {/* 2. For Men */}
+
+                {/* Left - Image */}
+                <GridCell>
+                    <img src={ '/images/collage.png' } alt="collage" title="products collage" style={ { width: 400 } } />
+                </GridCell>
+
+                {/* Right - Headline and info */}
+                <GridCell>
+                    <H1 font="secondary" style={ { textShadow: textLevel1 } }>For Men</H1>
+
+                    <H6 style={ { marginTop: '0.5em' } }>Your monthly subscription of trendy <br/> clothes and accessories</H6>
+
+                    <Button theme="primary" style={ { marginTop: '1.5em' } } onClick={ this.nextStep }>Next</Button>
+                </GridCell>
+            </Grid>,
+
+            <Grid gutter={ false } alignCenter={ true } style={ { height: '100%', textAlign: 'center', color: white } }>
+                {/* 3. For Women */}
+
+                {/* Left - Headline and info */}
+                <GridCell>
+                    <H1 font="secondary" style={ { textShadow: textLevel1 } }>For Women</H1>
+
+                    <H6 style={ { marginTop: '0.5em' } }>Your monthly subscription of trendy <br/> clothes and accessories</H6>
+
+                    <Button theme="primary" style={ { marginTop: '1.5em' } } onClick={ this.nextStep }>Next</Button>
+                </GridCell>
+
+                {/* Right - Image */}
+                <GridCell>
+                    <img src={ '/images/collage.png' } alt="collage" title="products collage" style={ { width: 400 } } />
+                </GridCell>
+            </Grid>,
+
+            <Grid gutter={ false } alignCenter={ true } style={ { height: '100%', textAlign: 'center', color: white } }>
+                {/* 4. Fix me up */}
+
+                {/* Center - Headline and info */}
+                <GridCell>
+                    <H1 font="secondary" style={ { textShadow: textLevel1 } }>Fix me up</H1>
+
+                    <H6 style={ { marginTop: '0.5em' } }>Subscribe to your crate!</H6>
+
+                    <Button theme="primary" style={ { marginTop: '1.5em' } } onClick={ this.close }>Start</Button>
+                </GridCell>
+            </Grid>
+        ]
+
+        return(
+            <div>
+                {/* Modal */}
+                <Modal visible={ this.state.visible }>
+                    { steps[this.state.currentStep] }
+                </Modal>
+            </div>
+        )
+    }
+}
+
+export default Onboarding

code/web/src/client/components/ui/button/Button.js

@@ -18,7 +18,7 @@ const Button = (props) => {
             {/* language=CSS */}
             <style jsx>{`
                 button {
-                    padding: 0.8em 1.5em;
+                    padding: 0.8em 1.8em;
                     border: none;
                     border-radius: 1.4em;
                     text-transform: uppercase;

code/web/src/client/components/ui/modal/Modal.js

@@ -0,0 +1,26 @@
+// Imports
+import React  from 'react'
+import PropTypes from 'prop-types'
+
+// Component
+const Modal = (props) => {
+    const { children, visible, ...other } = props
+
+    return(
+        <div { ...other } style={ { position: 'fixed', top: 0, right: 0, bottom: 0, left: 0, zIndex: 9, visibility: (visible ? 'visible' : 'hidden'), opacity: (visible ? 1 : 0), transition: 'opacity 0.25s ease-in-out' } }>
+            <div style={ { background: `url('/images/cover.jpg') top center`, backgroundSize: 'cover', position: 'fixed', top: '-40px', right: '-40px', bottom: '-40px', left: '-40px', zIndex: -1, filter: 'blur(25px)' } } />
+
+            { children }
+        </div>
+    )
+}
+
+// Component Properties
+Modal.propTypes = {
+    visible: PropTypes.bool.isRequired
+}
+Modal.defaultProps = {
+    visible: false
+}
+
+export default Modal

code/web/src/client/components/ui/modal/index.js

@@ -0,0 +1,4 @@
+// UI Imports
+import Modal from './Modal'
+
+export { Modal }

code/web/src/client/components/user/AuthCheck.js

@@ -14,7 +14,7 @@ class AuthCheck extends Component {
 
         return (
             <div>
-                { isAuthenticated ? <Redirect to={ userRoutes.subscriptions.path } /> : <Redirect to={ userRoutes.login.path } /> }
+                { isAuthenticated ? <Redirect to={ userRoutes.subscriptions.path } /> : '' }
             </div>
         )
     }

code/web/storybook/config.js

@@ -7,6 +7,7 @@ function loadStories() {
     require('./stories/typography.js'),
     require('./stories/icons.js'),
     require('./stories/input.js'),
+    require('./stories/modal.js'),
     require('./stories/grid.js')
 }
 

code/web/storybook/stories/modal.js

@@ -0,0 +1,14 @@
+// Imports
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+// UI Imports
+import { Modal } from '../../src/client/components/ui/modal'
+
+// Buttons
+storiesOf('Modal', module)
+    .add('simple', () => (
+        <Modal>
+            <p>Hello world</p>
+        </Modal>
+    ))