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.