diff --git a/src/components/Onboarding/OnboardingFooter.js b/src/components/Onboarding/OnboardingFooter.js index c04eb55f..0bb1bded 100644 --- a/src/components/Onboarding/OnboardingFooter.js +++ b/src/components/Onboarding/OnboardingFooter.js @@ -1,22 +1,11 @@ // @flow import React from 'react' -import styled from 'styled-components' -import { radii } from 'styles/theme' import type { T } from 'types/common' import Button from 'components/base/Button' -import Box from 'components/base/Box' - -const Wrapper = styled(Box).attrs({ - px: 5, - py: 3, -})` - border-top: 1px solid ${p => p.theme.colors.lightFog}; - border-bottom-left-radius: ${radii[1]}px; - border-bottom-right-radius: ${radii[1]}px; -` +import { OnboardingFooterWrapper } from './helperComponents' type Props = { t: T, @@ -33,13 +22,13 @@ const OnboardingFooter = ({ ...props }: Props) => ( - + - + ) export default OnboardingFooter diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index f2a2986f..a7e93de9 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -38,11 +38,13 @@ export const FixedTopContainer = styled(Box).attrs({ backgroundColor: 'red', })`` // FOOTER -export const OnboardingFooter = styled(Box).attrs({ + +export const OnboardingFooterWrapper = styled(Box).attrs({ px: 5, py: 3, + horizontal: true, })` - border-top: 2px solid ${p => p.theme.colors.lightGrey}; + border-top: 2px solid ${p => p.theme.colors.lightFog}; border-bottom-left-radius: ${radii[1]}px; border-bottom-right-radius: ${radii[1]}px; ` diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index 70e55334..58ace8cc 100644 --- a/src/components/Onboarding/index.js +++ b/src/components/Onboarding/index.js @@ -27,6 +27,7 @@ import Box from 'components/base/Box' import Start from './steps/Start' import InitStep from './steps/Init' +import NoDeviceStep from './steps/NoDevice' import OnboardingBreadcrumb from './OnboardingBreadcrumb' import SelectDevice from './steps/SelectDevice' import SelectPIN from './steps/SelectPIN/index' @@ -46,6 +47,7 @@ const STEPS = { analytics: Analytics, finish: Finish, start: Start, + noDevice: NoDeviceStep, } const mapStateToProps = state => ({ diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js index 21c0423c..c5cbd04c 100644 --- a/src/components/Onboarding/steps/Finish.js +++ b/src/components/Onboarding/steps/Finish.js @@ -39,8 +39,8 @@ const socialMedia = [ export default (props: StepProps) => { const { finish, t } = props return ( - - + + diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js index 7ab525ba..5de74d47 100644 --- a/src/components/Onboarding/steps/GenuineCheck.js +++ b/src/components/Onboarding/steps/GenuineCheck.js @@ -4,7 +4,7 @@ import React, { PureComponent, Fragment } from 'react' import { shell } from 'electron' import { connect } from 'react-redux' import styled from 'styled-components' -import { radii, colors } from 'styles/theme' +import { colors } from 'styles/theme' import type { T } from 'types/common' @@ -19,7 +19,13 @@ import IconLedgerNanoError from 'icons/illustrations/LedgerNanoError' import IconLedgerBlueError from 'icons/illustrations/LedgerBlueError' import IconCheck from 'icons/Check' -import { Title, Description, IconOptionRow, FixedTopContainer } from '../helperComponents' +import { + Title, + Description, + IconOptionRow, + FixedTopContainer, + OnboardingFooterWrapper, +} from '../helperComponents' import type { StepProps } from '..' import OnboardingFooter from '../OnboardingFooter' @@ -145,7 +151,7 @@ class GenuineCheck extends PureComponent { - 2. + 2. {t('onboarding:genuineCheck.steps.step2.title')} @@ -164,7 +170,9 @@ class GenuineCheck extends PureComponent { - 3. + + 3. + {t('onboarding:genuineCheck.steps.step3.title')} @@ -250,27 +258,14 @@ export function GenuineCheckFail({ )} - - - - + ) } @@ -285,14 +280,6 @@ export const CardTitle = styled(Box).attrs({ pl: 2, })`` -const Wrapper = styled(Box).attrs({ - px: 5, - py: 3, -})` - border-top: 2px solid ${p => p.theme.colors.lightGrey}; - border-bottom-left-radius: ${radii[1]}px; - border-bottom-right-radius: ${radii[1]}px; -` const CardWrapper = styled(Box).attrs({ horizontal: true, p: 5, @@ -302,6 +289,7 @@ const CardWrapper = styled(Box).attrs({ width: 580px; height: 74px; transition: all ease-in-out 0.2s; + color: ${p => (p.isDisabled ? p.theme.colors.grey : p.theme.colors.black)}; border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`}; pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')}; background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)}; diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js index fb3ad7c2..506a0362 100644 --- a/src/components/Onboarding/steps/Init.js +++ b/src/components/Onboarding/steps/Init.js @@ -1,7 +1,6 @@ // @flow import React, { PureComponent } from 'react' -import { shell } from 'electron' import { connect } from 'react-redux' import { colors } from 'styles/theme' @@ -22,7 +21,7 @@ const mapDispatchToProps = { flowType } class Init extends PureComponent { render() { - const { nextStep, t } = this.props + const { t, flowType, jumpStep } = this.props const optionCards = [ { @@ -30,8 +29,8 @@ class Init extends PureComponent { icon: , title: t('onboarding:init.newDevice.title'), onClick: () => { - nextStep() - this.props.flowType('newDevice') + jumpStep('selectDevice') + flowType('newDevice') }, }, { @@ -39,8 +38,8 @@ class Init extends PureComponent { icon: , title: t('onboarding:init.restoreDevice.title'), onClick: () => { - nextStep() - this.props.flowType('restoreDevice') + jumpStep('selectDevice') + flowType('restoreDevice') }, }, { @@ -48,8 +47,8 @@ class Init extends PureComponent { icon: , title: t('onboarding:init.initializedDevice.title'), onClick: () => { - nextStep() - this.props.flowType('initializedDevice') + jumpStep('selectDevice') + flowType('initializedDevice') }, }, { @@ -57,8 +56,8 @@ class Init extends PureComponent { icon: , title: t('onboarding:init.noDevice.title'), onClick: () => { - shell.openExternal('https://www.ledger.fr/') - this.props.flowType('noDevice') + jumpStep('noDevice') + flowType('noDevice') }, }, ] diff --git a/src/components/Onboarding/steps/NoDevice.js b/src/components/Onboarding/steps/NoDevice.js new file mode 100644 index 00000000..f63ad96f --- /dev/null +++ b/src/components/Onboarding/steps/NoDevice.js @@ -0,0 +1,71 @@ +// @flow + +import React, { PureComponent } from 'react' +import { shell } from 'electron' + +import Box from 'components/base/Box' +import IconUser from 'icons/User' +import IconCart from 'icons/Cart' +import IconTruck from 'icons/Truck' +import IconInfoCircle from 'icons/InfoCircle' +import Button from '../../base/Button/index' +import { Title, OnboardingFooterWrapper } from '../helperComponents' +import { OptionFlowCard } from './Init' + +import type { StepProps } from '..' + +class NoDevice extends PureComponent { + render() { + const { t, prevStep } = this.props + + const optionCards = [ + { + key: 'buyNew', + icon: , + title: t('onboarding:noDevice.buyNew.title'), + onClick: () => { + shell.openExternal('https://www.ledgerwallet.com/') + }, + }, + { + key: 'trackOrder', + icon: , + title: t('onboarding:noDevice.trackOrder.title'), + onClick: () => { + shell.openExternal('http://order.ledgerwallet.com/') + }, + }, + { + key: 'learnMore', + icon: , + title: t('onboarding:noDevice.learnMore.title'), + onClick: () => { + shell.openExternal('https://www.ledgerwallet.com/') + }, + }, + ] + + return ( + + + + + + + {t('onboarding:noDevice.title')} + + + {optionCards.map(card => )} + + + + + + + ) + } +} + +export default NoDevice diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js index b52d6039..eca85f3e 100644 --- a/src/components/Onboarding/steps/SelectDevice.js +++ b/src/components/Onboarding/steps/SelectDevice.js @@ -32,7 +32,7 @@ class SelectDevice extends PureComponent { } } render() { - const { t, onboarding, prevStep } = this.props + const { t, onboarding, jumpStep } = this.props return ( @@ -68,7 +68,7 @@ class SelectDevice extends PureComponent { horizontal t={t} nextStep={this.handleContinue} - prevStep={prevStep} + prevStep={() => jumpStep('init')} isContinueDisabled={onboarding.isLedgerNano === null} /> diff --git a/src/components/Onboarding/steps/SetPassword.js b/src/components/Onboarding/steps/SetPassword.js index 3c9f9d36..7448d050 100644 --- a/src/components/Onboarding/steps/SetPassword.js +++ b/src/components/Onboarding/steps/SetPassword.js @@ -2,8 +2,7 @@ import React, { PureComponent, Fragment } from 'react' import bcrypt from 'bcryptjs' -import { colors, radii } from 'styles/theme' -import styled from 'styled-components' +import { colors } from 'styles/theme' import { setEncryptionKey } from 'helpers/db' @@ -15,7 +14,13 @@ import IconChevronRight from 'icons/ChevronRight' import PasswordForm from '../../SettingsPage/PasswordForm' import type { StepProps } from '..' -import { Title, Description, DisclaimerBox, FixedTopContainer } from '../helperComponents' +import { + Title, + Description, + DisclaimerBox, + FixedTopContainer, + OnboardingFooterWrapper, +} from '../helperComponents' type State = { currentPassword: string, @@ -117,7 +122,7 @@ class SetPassword extends PureComponent { - + @@ -134,21 +139,10 @@ class SetPassword extends PureComponent { {t('app:common.continue')} - + ) } } export default SetPassword - -const CustomFooter = styled(Box).attrs({ - px: 5, - py: 3, - horizontal: true, - align: 'center', -})` - border-top: 1px solid ${p => p.theme.colors.lightFog}; - border-bottom-left-radius: ${radii[1]}px; - border-bottom-right-radius: ${radii[1]}px; -` diff --git a/src/icons/Cart.js b/src/icons/Cart.js new file mode 100644 index 00000000..2a42bbce --- /dev/null +++ b/src/icons/Cart.js @@ -0,0 +1,16 @@ +// @flow + +import React from 'react' + +const path = ( + +) + +export default ({ size, ...p }: { size: number }) => ( + + {path} + +) diff --git a/src/icons/Truck.js b/src/icons/Truck.js new file mode 100644 index 00000000..d643e3fd --- /dev/null +++ b/src/icons/Truck.js @@ -0,0 +1,16 @@ +// @flow + +import React from 'react' + +const path = ( + +) + +export default ({ size, ...p }: { size: number }) => ( + + {path} + +) diff --git a/src/reducers/onboarding.js b/src/reducers/onboarding.js index 7655d877..22816556 100644 --- a/src/reducers/onboarding.js +++ b/src/reducers/onboarding.js @@ -57,6 +57,15 @@ const state: OnboardingState = { showBreadcrumb: false, }, }, + { + name: 'noDevice', + external: true, + options: { + showFooter: false, + showBackground: true, + showBreadcrumb: false, + }, + }, { name: 'selectDevice', label: 'Select Device', diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml index 7139a669..2fa67577 100644 --- a/static/i18n/en/onboarding.yml +++ b/static/i18n/en/onboarding.yml @@ -15,6 +15,14 @@ init: noDevice: title: Do not have a Ledger device yet? desc: Please replace it with the final wording once it’s done. +noDevice: + title: Do not have a Ledger device yet? + buyNew: + title: Buy a Ledger device + trackOrder: + title: Track your order + learnMore: + title: Learn about Ledger Live selectDevice: title: To get started, select your device ledgerNanoCard: