From e5fb2f7cffd117276d32bd0f5795097d663ee8a6 Mon Sep 17 00:00:00 2001 From: atulmy Date: Thu, 9 Nov 2017 14:10:23 +0530 Subject: [PATCH] Onboarding --- code/web/src/client/components/home/Home.js | 57 ++++---- .../src/client/components/home/Onboarding.js | 132 ++++++++++++++++++ .../src/client/components/ui/button/Button.js | 2 +- .../src/client/components/ui/modal/Modal.js | 26 ++++ .../src/client/components/ui/modal/index.js | 4 + .../src/client/components/user/AuthCheck.js | 2 +- code/web/src/static/images/collage.png | Bin 0 -> 533558 bytes code/web/storybook/config.js | 1 + code/web/storybook/stories/modal.js | 14 ++ design/prototype.xd | Bin 3051909 -> 3060828 bytes 10 files changed, 211 insertions(+), 27 deletions(-) create mode 100644 code/web/src/client/components/home/Onboarding.js create mode 100644 code/web/src/client/components/ui/modal/Modal.js create mode 100644 code/web/src/client/components/ui/modal/index.js create mode 100644 code/web/src/static/images/collage.png create mode 100644 code/web/storybook/stories/modal.js diff --git a/code/web/src/client/components/home/Home.js b/code/web/src/client/components/home/Home.js index 881898789..f98416e36 100644 --- a/code/web/src/client/components/home/Home.js +++ b/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) => ( - - {/* SEO */} - - Monthly supply of clothes and accessories for Men and Women - Crate - - - -

Crate

- -

Your monthly subscription of trendy clothes and accessories

- - {/* Call to action */} - { - props.user.isAuthenticated - ? - - - - : - - - - } -
-
+
+ {/* Home */} + + {/* SEO */} + + Monthly supply of clothes and accessories for Men and Women - Crate + + + +

Crate

+ +

Your monthly subscription of trendy clothes and accessories

+ + {/* Call to action */} + { + props.user.isAuthenticated + ? + + + + : + + + + } +
+
+ + {/* Onboarding */} + +
) // Component Properties diff --git a/code/web/src/client/components/home/Onboarding.js b/code/web/src/client/components/home/Onboarding.js new file mode 100644 index 000000000..aba2de342 --- /dev/null +++ b/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 = [ + + {/* 1. Welcome to Crate */} + + {/* Left - Headline and info */} + +

Welcome to Crate

+ +
Your monthly subscription of trendy
clothes and accessories
+ + +
+ + {/* Right - Image */} + + collage + +
, + + + {/* 2. For Men */} + + {/* Left - Image */} + + collage + + + {/* Right - Headline and info */} + +

For Men

+ +
Your monthly subscription of trendy
clothes and accessories
+ + +
+
, + + + {/* 3. For Women */} + + {/* Left - Headline and info */} + +

For Women

+ +
Your monthly subscription of trendy
clothes and accessories
+ + +
+ + {/* Right - Image */} + + collage + +
, + + + {/* 4. Fix me up */} + + {/* Center - Headline and info */} + +

Fix me up

+ +
Subscribe to your crate!
+ + +
+
+ ] + + return( +
+ {/* Modal */} + + { steps[this.state.currentStep] } + +
+ ) + } +} + +export default Onboarding \ No newline at end of file diff --git a/code/web/src/client/components/ui/button/Button.js b/code/web/src/client/components/ui/button/Button.js index dd03ee113..2d9d5e1a3 100644 --- a/code/web/src/client/components/ui/button/Button.js +++ b/code/web/src/client/components/ui/button/Button.js @@ -18,7 +18,7 @@ const Button = (props) => { {/* language=CSS */}