distinguish between 3 error screens onboarding

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 (
-    <Box sticky pt={50}>
+}
+
+class GenuineCheckErrorPage extends PureComponent<Props, *> {
+  trackErrorPage = (page: string) => {
+    const { onboarding } = this.props
+    return (
       <TrackPage
         category="Onboarding"
-        name="Genuine Check Error Page"
+        name={`Genuine Check Error Page - ${page}`}
         flowType={onboarding.flowType}
         deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
       />
-      <Box grow alignItems="center" justifyContent="center">
-        {onboarding.isLedgerNano ? (
+    )
+  }
+
+  renderErrorPage = () => {
+    const { onboarding, t } = this.props
+    return (
+      <Fragment>
+        {onboarding.genuine.isGenuineFail ? (
           <Fragment>
-            <Title>{t('onboarding:genuineCheck.errorPage.ledgerNano.title')}</Title>
-            <Description>{t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}</Description>
-            <Box mt={5} mr={7}>
-              <img alt="" src={i('nano-error-onb.svg')} />
-            </Box>
+            {this.trackErrorPage('Not Genuine')}
+            <Title>{t('onboarding:genuineCheck.errorPage.title.isGenuineFail')}</Title>
+            <Description>{t('onboarding:genuineCheck.errorPage.desc.isGenuineFail')}</Description>
+          </Fragment>
+        ) : !onboarding.genuine.pinStepPass ? (
+          <Fragment>
+            {this.trackErrorPage('PIN Step')}
+            <Title>{t('onboarding:genuineCheck.errorPage.title.pinFailed')}</Title>
+            <Description>{t('onboarding:genuineCheck.errorPage.desc.pinFailed')}</Description>
           </Fragment>
         ) : (
           <Fragment>
-            <Title>{t('onboarding:genuineCheck.errorPage.ledgerBlue.title')}</Title>
-            <Description pb={5}>
-              {t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')}
+            {this.trackErrorPage('Recovery Phase Step')}
+            <Title>{t('onboarding:genuineCheck.errorPage.title.recoveryPhraseFailed')}</Title>
+            <Description>
+              {t('onboarding:genuineCheck.errorPage.desc.recoveryPhraseFailed')}
             </Description>
-            <Box alignItems="center">
-              <img alt="" src={i('blue-error-onb.svg')} />
-            </Box>
           </Fragment>
         )}
+        <Box mt={5} mr={7}>
+          {onboarding.isLedgerNano ? (
+            <img alt="" src={i('nano-error-onb.svg')} />
+          ) : (
+            <img alt="" src={i('blue-error-onb.svg')} />
+          )}
+        </Box>
+      </Fragment>
+    )
+  }
+
+  render() {
+    const { redoGenuineCheck, contactSupport, t } = this.props
+    return (
+      <Box sticky pt={50}>
+        <Box grow alignItems="center" justifyContent="center">
+          {this.renderErrorPage()}
+        </Box>
+        <OnboardingFooterWrapper>
+          <Button padded outlineGrey onClick={() => redoGenuineCheck()}>
+            {t('app:common.back')}
+          </Button>
+          <Button padded danger onClick={() => contactSupport()} ml="auto">
+            {t('onboarding:genuineCheck.buttons.contactSupport')}
+          </Button>
+        </OnboardingFooterWrapper>
       </Box>
-      <OnboardingFooterWrapper>
-        <Button padded outlineGrey onClick={() => redoGenuineCheck()}>
-          {t('app:common.back')}
-        </Button>
-        <Button padded danger onClick={() => contactSupport()} ml="auto">
-          {t('onboarding:genuineCheck.buttons.contactSupport')}
-        </Button>
-      </OnboardingFooterWrapper>
-    </Box>
-  )
+    )
+  }
 }
+
+export default GenuineCheckErrorPage

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<StepProps, State> {
     }
 
     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<StepProps, State> {
   }
 
   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 = () => {

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.