From a0e3174545aa739a77e1280abeeb011c73dbfa9a Mon Sep 17 00:00:00 2001 From: Anastasia Poupeney Date: Mon, 2 Jul 2018 11:49:11 +0200 Subject: [PATCH 1/2] onboarding breadcrumb adjustment for already initialized flow --- src/components/Onboarding/OnboardingBreadcrumb.js | 11 +++++++++-- src/components/Onboarding/steps/GenuineCheck/index.js | 7 ++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/Onboarding/OnboardingBreadcrumb.js b/src/components/Onboarding/OnboardingBreadcrumb.js index 93053a37..8455cb1d 100644 --- a/src/components/Onboarding/OnboardingBreadcrumb.js +++ b/src/components/Onboarding/OnboardingBreadcrumb.js @@ -21,10 +21,17 @@ type Props = { function OnboardingBreadcrumb(props: Props) { const { onboarding, t } = props const { stepName, genuine } = onboarding + const isInitializedFlow = onboarding.flowType === 'initializedDevice' - const filteredSteps = onboarding.steps + const regularFilteredSteps = onboarding.steps .filter(step => !step.external) - .map(step => ({ ...step, label: t(step.label) })) // TODO: translate + .map(step => ({ ...step, label: t(step.label) })) + + const alreadyInitializedSteps = onboarding.steps + .filter(step => !step.external && step.name !== 'writeSeed' && step.name !== 'selectPIN') + .map(step => ({ ...step, label: t(step.label) })) + + const filteredSteps = isInitializedFlow ? alreadyInitializedSteps : regularFilteredSteps const stepIndex = findIndex(filteredSteps, s => s.name === stepName) const genuineStepIndex = findIndex(filteredSteps, s => s.name === 'genuineCheck') diff --git a/src/components/Onboarding/steps/GenuineCheck/index.js b/src/components/Onboarding/steps/GenuineCheck/index.js index 36bd1f31..3868aa2f 100644 --- a/src/components/Onboarding/steps/GenuineCheck/index.js +++ b/src/components/Onboarding/steps/GenuineCheck/index.js @@ -146,6 +146,11 @@ class GenuineCheck extends PureComponent { shell.openExternal(contactSupportUrl) } + handlePrevStep = () => { + const { prevStep, onboarding, jumpStep } = this.props + onboarding.flowType === 'initializedDevice' ? jumpStep('selectDevice') : prevStep() + } + renderGenuineFail = () => ( { )} From 7c20b6c87911bfb1d232aea03a226073264c58f8 Mon Sep 17 00:00:00 2001 From: Anastasia Poupeney Date: Mon, 2 Jul 2018 14:45:40 +0200 Subject: [PATCH 2/2] distinguish between 3 error screens onboarding --- .../GenuineCheck/GenuineCheckErrorPage.js | 96 ++++++++++++------- .../Onboarding/steps/GenuineCheck/index.js | 18 ++-- static/i18n/en/onboarding.yml | 20 ++-- 3 files changed, 79 insertions(+), 55 deletions(-) diff --git a/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js b/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js index 213622a4..915e65dd 100644 --- a/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js +++ b/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js @@ -1,6 +1,6 @@ // @flow -import React, { Fragment } from 'react' +import React, { PureComponent, Fragment } from 'react' import { i } from 'helpers/staticPath' import type { T } from 'types/common' @@ -12,54 +12,80 @@ import TrackPage from 'analytics/TrackPage' import { Title, Description, OnboardingFooterWrapper } from '../../helperComponents' -export function GenuineCheckErrorPage({ - redoGenuineCheck, - contactSupport, - onboarding, - t, -}: { +type Props = { + t: T, redoGenuineCheck: () => void, contactSupport: () => void, onboarding: OnboardingState, - t: T, -}) { - return ( - +} + +class GenuineCheckErrorPage extends PureComponent { + trackErrorPage = (page: string) => { + const { onboarding } = this.props + return ( - - {onboarding.isLedgerNano ? ( + ) + } + + renderErrorPage = () => { + const { onboarding, t } = this.props + return ( + + {onboarding.genuine.isGenuineFail ? ( - {t('onboarding:genuineCheck.errorPage.ledgerNano.title')} - {t('onboarding:genuineCheck.errorPage.ledgerNano.desc')} - - - + {this.trackErrorPage('Not Genuine')} + {t('onboarding:genuineCheck.errorPage.title.isGenuineFail')} + {t('onboarding:genuineCheck.errorPage.desc.isGenuineFail')} + + ) : !onboarding.genuine.pinStepPass ? ( + + {this.trackErrorPage('PIN Step')} + {t('onboarding:genuineCheck.errorPage.title.pinFailed')} + {t('onboarding:genuineCheck.errorPage.desc.pinFailed')} ) : ( - {t('onboarding:genuineCheck.errorPage.ledgerBlue.title')} - - {t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')} + {this.trackErrorPage('Recovery Phase Step')} + {t('onboarding:genuineCheck.errorPage.title.recoveryPhraseFailed')} + + {t('onboarding:genuineCheck.errorPage.desc.recoveryPhraseFailed')} - - - )} + + {onboarding.isLedgerNano ? ( + + ) : ( + + )} + + + ) + } + + render() { + const { redoGenuineCheck, contactSupport, t } = this.props + return ( + + + {this.renderErrorPage()} + + + + + - - - - - - ) + ) + } } + +export default GenuineCheckErrorPage diff --git a/src/components/Onboarding/steps/GenuineCheck/index.js b/src/components/Onboarding/steps/GenuineCheck/index.js index 3868aa2f..6ac42156 100644 --- a/src/components/Onboarding/steps/GenuineCheck/index.js +++ b/src/components/Onboarding/steps/GenuineCheck/index.js @@ -26,7 +26,7 @@ import { GenuineCheckCardWrapper, } from '../../helperComponents' -import { GenuineCheckErrorPage } from './GenuineCheckErrorPage' +import GenuineCheckErrorPage from './GenuineCheckErrorPage' import { GenuineCheckUnavailableFooter, GenuineCheckUnavailableMessage, @@ -81,14 +81,8 @@ class GenuineCheck extends PureComponent { } if (!item.pass) { - this.setState(INITIAL_STATE) this.props.updateGenuineCheck({ displayErrorScreen: true, - pinStepPass: false, - recoveryStepPass: false, - isGenuineFail: false, - isDeviceGenuine: false, - genuineCheckUnavailable: null, }) } } @@ -137,7 +131,15 @@ class GenuineCheck extends PureComponent { } redoGenuineCheck = () => { - this.props.updateGenuineCheck({ displayErrorScreen: false }) + this.setState(INITIAL_STATE) + this.props.updateGenuineCheck({ + displayErrorScreen: false, + pinStepPass: false, + recoveryStepPass: false, + isGenuineFail: false, + isDeviceGenuine: false, + genuineCheckUnavailable: null, + }) } contactSupport = () => { diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml index 17c148f1..357b8f5d 100644 --- a/static/i18n/en/onboarding.yml +++ b/static/i18n/en/onboarding.yml @@ -107,18 +107,14 @@ genuineCheck: genuineCheck: Check now contactSupport: Contact us errorPage: - ledgerNano: - title: Oops, something went wrong... - #PIN: Didn't choose your own PIN code? - #recoveryPhrase: Didn't save your own recovery phrase? - #Genuine: Oops, your device does not seem genuine... - desc: Go back to the security checklist or request Ledger Support assistance - #PIN: Never use a device supplied with a PIN code. If your device was provided with a PIN code, please contact us. - #recoveryPhrase: Only save a recovery phrase that is displayed on your device. Please contact us in case of doubt. Otherwise, go back to the security checklist. - #Genuine: Your device did not pass the authenticity test required to connect to Ledger’s secure server. Please contact Ledger Support to get assistance. - ledgerBlue: - title: Oops, something went wrong... - desc: Go back to the security checklist or request Ledger Support assistance + title: + pinFailed: "Didn't choose your own PIN code?" + recoveryPhraseFailed: "Didn't save your own recovery phrase?" + isGenuineFail: Oops, your device does not seem genuine... + desc: + pinFailed: Never use a device supplied with a PIN code. If your device was provided with a PIN code, please contact us. + recoveryPhraseFailed: Only save a recovery phrase that is displayed on your device. Please contact us in case of doubt. Otherwise, go back to the security checklist. + isGenuineFail: Your device did not pass the authenticity test required to connect to Ledger’s secure server. Please contact Ledger Support to get assistance. setPassword: title: Password lock (optional) desc: Set a password to prevent unauthorized access to Ledger Live data stored on your computer, including account names, balances, transactions and public addresses.