From 0551de43be58959bc649affa1d44ff8e1659b8e6 Mon Sep 17 00:00:00 2001 From: NastiaS Date: Fri, 11 May 2018 08:58:08 +0200 Subject: [PATCH] onboarding wip --- src/components/Onboarding/helperComponents.js | 28 +++++++ src/components/Onboarding/index.js | 25 +++++- src/components/Onboarding/steps/Analytics.js | 73 ++++++++++++++++++ .../Onboarding/steps/ChooseDevice.js | 62 +++++++++++++++ src/components/Onboarding/steps/ChoosePIN.js | 34 ++++++++ .../Onboarding/steps/GenuineCheck.js | 37 +++++++++ src/components/Onboarding/steps/Init.js | 77 +++++++++++++++++-- .../Onboarding/steps/SetPassword.js | 47 +++++++++++ .../Onboarding/steps/SetUpWalletEnv.js | 34 ++++++++ src/components/Onboarding/steps/UserChoice.js | 17 ---- src/components/Onboarding/steps/WriteSeed.js | 34 ++++++++ src/reducers/onboarding.js | 58 +++++++++++++- 12 files changed, 498 insertions(+), 28 deletions(-) create mode 100644 src/components/Onboarding/helperComponents.js create mode 100644 src/components/Onboarding/steps/Analytics.js create mode 100644 src/components/Onboarding/steps/ChooseDevice.js create mode 100644 src/components/Onboarding/steps/ChoosePIN.js create mode 100644 src/components/Onboarding/steps/GenuineCheck.js create mode 100644 src/components/Onboarding/steps/SetPassword.js create mode 100644 src/components/Onboarding/steps/SetUpWalletEnv.js delete mode 100644 src/components/Onboarding/steps/UserChoice.js create mode 100644 src/components/Onboarding/steps/WriteSeed.js diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js new file mode 100644 index 00000000..05a39154 --- /dev/null +++ b/src/components/Onboarding/helperComponents.js @@ -0,0 +1,28 @@ +// @flow +import styled from 'styled-components' + +import Box from 'components/base/Box' + +export const Title = styled(Box).attrs({ + width: 152, + height: 27, + ff: 'Museo Sans|Regular', + fontSize: 7, + color: 'dark', +})`` + +export const Description = styled(Box).attrs({ + width: 340, + height: 36, + ff: 'Open Sans|Regular', + fontSize: 4, + textAlign: 'center', + color: 'smoke', +})` + margin: 10px auto 25px; +` +export const Inner = styled(Box).attrs({ + horizontal: true, + grow: true, + flow: 4, +})`` diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index 8ed00c46..01e32d38 100644 --- a/src/components/Onboarding/index.js +++ b/src/components/Onboarding/index.js @@ -16,11 +16,23 @@ import Box from 'components/base/Box' import OnboardingBreadcrumb from './OnboardingBreadcrumb' import InitStep from './steps/Init' -import UserChoice from './steps/UserChoice' +import ChooseDevice from './steps/ChooseDevice' +import ChoosePIN from './steps/ChoosePIN' +import WriteSeed from './steps/WriteSeed' +import GenuineCheck from './steps/GenuineCheck' +import SetUpWalletEnv from './steps/SetUpWalletEnv' +import SetPassword from './steps/SetPassword' +import Analytics from './steps/Analytics' const STEPS = { init: InitStep, - userChoice: UserChoice, + chooseDevice: ChooseDevice, + choosePIN: ChoosePIN, + writeSeed: WriteSeed, + genuineCheck: GenuineCheck, + setupWalletEnv: SetUpWalletEnv, + setPassword: SetPassword, + analytics: Analytics, } const mapStateToProps = state => ({ @@ -83,7 +95,9 @@ class Onboarding extends PureComponent { return ( {step.options.showBreadcrumb && } - + + + ) } @@ -91,6 +105,7 @@ class Onboarding extends PureComponent { const Container = styled(Box).attrs({ bg: 'white', + p: 5, })` position: fixed; top: 0; @@ -99,5 +114,7 @@ const Container = styled(Box).attrs({ bottom: 0; z-index: 100; ` - +const StepContainer = styled(Box).attrs({ + p: 20, +})`` export default compose(connect(mapStateToProps, mapDispatchToProps), translate())(Onboarding) diff --git a/src/components/Onboarding/steps/Analytics.js b/src/components/Onboarding/steps/Analytics.js new file mode 100644 index 00000000..5839dd3b --- /dev/null +++ b/src/components/Onboarding/steps/Analytics.js @@ -0,0 +1,73 @@ +// @flow + +import React from 'react' +import styled from 'styled-components' + +import Box from 'components/base/Box' +import Button from 'components/base/Button' +import { ModalFooter } from 'components/base/Modal/index' +import IconBlue from 'icons/device/Blue' +import CheckBox from 'components/base/CheckBox' +import { Title, Description } from '../helperComponents' + +import type { StepProps } from '..' + +export default (props: StepProps) => { + const { nextStep, prevStep } = props + return ( + + + This is ANALYTICS screen. 1 line is the maximum + + This is a long text, please replace it with the final wording once it’s done. +
+ Lorem ipsum dolor amet ledger lorem dolor ipsum amet + + + + + + + + This is a long text, please replace it with the final wording once it’s done. +
+ Lorem ipsum dolor amet ledger lorem dolor ipsum amet + + + + + + This is a long text, please replace it with the final wording once it’s done. +
+ Lorem ipsum dolor amet ledger lorem dolor ipsum amet + + + + + + + + + ) +} + +export const AnalyticsText = styled(Box).attrs({ + ff: 'Open Sans|Regular', + fontSize: 4, + textAlign: 'left', + color: 'smoke', +})` + margin: 10px auto 25px; + padding-left: 10px; +` +const DeviceIcon = styled(Box).attrs({ + alignItems: 'center', + justifyContent: 'center', + color: 'graphite', +})` + width: 55px; +` diff --git a/src/components/Onboarding/steps/ChooseDevice.js b/src/components/Onboarding/steps/ChooseDevice.js new file mode 100644 index 00000000..7da5e8a8 --- /dev/null +++ b/src/components/Onboarding/steps/ChooseDevice.js @@ -0,0 +1,62 @@ +// @flow + +import React from 'react' +import styled from 'styled-components' + +import Box from 'components/base/Box' +import IconNanoS from 'icons/device/NanoS' +import IconBlue from 'icons/device/Blue' +import { Title, Description, Inner } from '../helperComponents' + +import type { StepProps } from '..' + +export default (props: StepProps) => { + const { nextStep } = props + + return ( + + + This is the title of the screen. 1 line is the maximum + + This is a long text, please replace it with the final wording once it’s done. +
+ Lorem ipsum dolor amet ledger lorem dolor ipsum amet + + + + nextStep()}> + + + + Ledger Nano S + Please replace it with the final wording once it’s done. + + + + + + Ledger Blue + Please replace it with the final wording once it’s done. + + + + + + ) +} + +const DeviceContainer = styled(Box).attrs({ + alignItems: 'center', + justifyContent: 'center', +})` + width: 218px; + height: 204px; + border: 1px solid #d8d8d8; +` +const DeviceIcon = styled(Box).attrs({ + alignItems: 'center', + justifyContent: 'center', + color: 'graphite', +})` + width: 55px; +` diff --git a/src/components/Onboarding/steps/ChoosePIN.js b/src/components/Onboarding/steps/ChoosePIN.js new file mode 100644 index 00000000..0c5cbde3 --- /dev/null +++ b/src/components/Onboarding/steps/ChoosePIN.js @@ -0,0 +1,34 @@ +// @flow + +import React from 'react' + +import Box from 'components/base/Box' +import Button from 'components/base/Button' +import { ModalFooter } from 'components/base/Modal/index' +import { Title, Description } from '../helperComponents' + +import type { StepProps } from '..' + +export default (props: StepProps) => { + const { nextStep, prevStep } = props + return ( + + + This is CHOOSE PIN screen. 1 line is the maximum + + This is a long text, please replace it with the final wording once it’s done. +
+ Lorem ipsum dolor amet ledger lorem dolor ipsum amet + + + + + + + + ) +} diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js new file mode 100644 index 00000000..9f12f451 --- /dev/null +++ b/src/components/Onboarding/steps/GenuineCheck.js @@ -0,0 +1,37 @@ +// @flow + +import React from 'react' + +import Box from 'components/base/Box' +import Button from 'components/base/Button' +import { ModalFooter } from 'components/base/Modal/index' +import { Title, Description } from '../helperComponents' + +import type { StepProps } from '..' + +export default (props: StepProps) => { + const { nextStep, prevStep, jumpStep } = props + return ( + + + This is CHOOSE PIN screen. 1 line is the maximum + + This is a long text, please replace it with the final wording once it’s done. +
+ Lorem ipsum dolor amet ledger lorem dolor ipsum amet + + + + + + + + + ) +} diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js index 76ae3cb3..0dba255f 100644 --- a/src/components/Onboarding/steps/Init.js +++ b/src/components/Onboarding/steps/Init.js @@ -1,18 +1,85 @@ // @flow import React from 'react' +import styled from 'styled-components' -import Button from 'components/base/Button' import Box from 'components/base/Box' +import IconNanoS from 'icons/device/NanoS' +import IconBlue from 'icons/device/Blue' +import { Title, Description, Inner } from '../helperComponents' import type { StepProps } from '..' export default (props: StepProps) => { - const { nextStep } = props + const { nextStep, jumpStep } = props + /* TODO: all titles, descriptions to be wrapped in a translation tag once defined */ return ( - - hey im step init - + + + This is the title of the screen. 1 line is the maximum + + This is a long text, please replace it with the final wording once it’s done. +
+ Lorem ipsum dolor amet ledger lorem dolor ipsum amet + + + + nextStep()}> + + + + Clean Nano S setup + Please replace it with the final wording once it’s done. + + jumpStep('genuineCheck')}> + + + + Existing seed + Clean setup + Please replace it with the final wording once it’s done. + + + + nextStep()}> + + + + Migrate accounts + Please replace it with the final wording once it’s done. + + + + + + Not a user, but would love to + Please replace it with the final wording once it’s done. + + + + ) } + +const DeviceContainer = styled(Box).attrs({ + alignItems: 'center', + justifyContent: 'center', +})` + width: 218px; + height: 204px; + border: 1px solid #d8d8d8; +` +const DeviceIcon = styled(Box).attrs({ + alignItems: 'center', + justifyContent: 'center', + color: 'graphite', +})` + width: 55px; +` +export const TrackChoiceTitle = styled(Box).attrs({ + width: 152, + height: 27, + ff: 'Museo Sans|Regular', + fontSize: 5, + color: 'dark', +})`` diff --git a/src/components/Onboarding/steps/SetPassword.js b/src/components/Onboarding/steps/SetPassword.js new file mode 100644 index 00000000..449c45c2 --- /dev/null +++ b/src/components/Onboarding/steps/SetPassword.js @@ -0,0 +1,47 @@ +// @flow + +import React from 'react' + +import Box from 'components/base/Box' +import Button from 'components/base/Button' +import { ModalFooter } from 'components/base/Modal/index' +import Text from 'components/base/Text' + +import IconLock from 'icons/Lock' +import type { StepProps } from '..' +import { Title, Description } from '../helperComponents' + +export default (props: StepProps) => { + const handleSetPassword = () => { + console.warn('SET PASSWORD TRIGGER') // eslint-disable-line + } + const { nextStep, prevStep } = props + return ( + + + This is SET PASSWORD screen. 1 line is the maximum + + This is a long text, please replace it with the final wording once it’s done. +
+ Lorem ipsum dolor amet ledger lorem dolor ipsum amet + + + + nextStep()} style={{ padding: 15 }}> + I do not want to set it up + + + + + + + + + ) +} diff --git a/src/components/Onboarding/steps/SetUpWalletEnv.js b/src/components/Onboarding/steps/SetUpWalletEnv.js new file mode 100644 index 00000000..644fe00a --- /dev/null +++ b/src/components/Onboarding/steps/SetUpWalletEnv.js @@ -0,0 +1,34 @@ +// @flow + +import React from 'react' + +import Box from 'components/base/Box' +import Button from 'components/base/Button' +import { ModalFooter } from 'components/base/Modal/index' + +import type { StepProps } from '..' +import { Title, Description } from '../helperComponents' + +export default (props: StepProps) => { + const { nextStep, prevStep } = props + return ( + + + This is WALLET SETUP screen. 1 line is the maximum + + This is a long text, please replace it with the final wording once it’s done. +
+ Lorem ipsum dolor amet ledger lorem dolor ipsum amet + + + + + + + + ) +} diff --git a/src/components/Onboarding/steps/UserChoice.js b/src/components/Onboarding/steps/UserChoice.js deleted file mode 100644 index a4d407a8..00000000 --- a/src/components/Onboarding/steps/UserChoice.js +++ /dev/null @@ -1,17 +0,0 @@ -// @flow - -import React from 'react' - -import Button from 'components/base/Button' - -import type { StepProps } from '..' - -export default (props: StepProps) => { - const { jumpStep } = props - return ( -
- hey im step user choice - -
- ) -} diff --git a/src/components/Onboarding/steps/WriteSeed.js b/src/components/Onboarding/steps/WriteSeed.js new file mode 100644 index 00000000..f3616dca --- /dev/null +++ b/src/components/Onboarding/steps/WriteSeed.js @@ -0,0 +1,34 @@ +// @flow + +import React from 'react' + +import Box from 'components/base/Box' +import Button from 'components/base/Button' +import { ModalFooter } from 'components/base/Modal/index' +import { Title, Description } from '../helperComponents' + +import type { StepProps } from '..' + +export default (props: StepProps) => { + const { nextStep, prevStep } = props + return ( + + + This is WRITE SEED screen. 1 line is the maximum + + This is a long text, please replace it with the final wording once it’s done. +
+ Lorem ipsum dolor amet ledger lorem dolor ipsum amet + + + + + + + + ) +} diff --git a/src/reducers/onboarding.js b/src/reducers/onboarding.js index 22a24fa3..61ed1f88 100644 --- a/src/reducers/onboarding.js +++ b/src/reducers/onboarding.js @@ -33,8 +33,62 @@ const state: OnboardingState = { }, }, { - name: 'userChoice', - label: 'something:translated', + name: 'chooseDevice', + label: 'chooseDevice:translated', + options: { + showFooter: false, + showBackground: true, + showBreadcrumb: true, + }, + }, + { + name: 'choosePIN', + label: 'choosePIN:translated', + options: { + showFooter: false, + showBackground: true, + showBreadcrumb: true, + }, + }, + { + name: 'writeSeed', + label: 'writeSeed:translated', + options: { + showFooter: false, + showBackground: true, + showBreadcrumb: true, + }, + }, + { + name: 'genuineCheck', + label: 'genuineCheck:translated', + options: { + showFooter: false, + showBackground: true, + showBreadcrumb: true, + }, + }, + { + name: 'setupWalletEnv', + label: 'Install Apps & Create Account:translated', + options: { + showFooter: false, + showBackground: true, + showBreadcrumb: true, + }, + }, + { + name: 'setPassword', + label: 'Password:translated', + options: { + showFooter: false, + showBackground: true, + showBreadcrumb: true, + }, + }, + { + name: 'analytics', + label: 'Analytics & Bug report:translated', options: { showFooter: false, showBackground: true,