Merge pull request #631 from NastiaS/minorFixesBranch

adding skip to onboarding if server fails

src/components/Onboarding/steps/GenuineCheck.js

@@ -82,10 +82,12 @@ class GenuineCheck extends PureComponent<StepProps, State> {
     if (!item.pass) {
       this.setState(INITIAL_STATE)
       this.props.updateGenuineCheck({
-        isGenuineFail: true,
-        recoveryStepPass: false,
+        displayErrorScreen: true,
         pinStepPass: false,
+        recoveryStepPass: false,
+        isGenuineFail: false,
         isDeviceGenuine: false,
+        genuineCheckUnavailable: null,
       })
     }
   }
@@ -116,6 +118,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
         isGenuineFail: true,
         isDeviceGenuine: false,
         genuineCheckUnavailable: null,
+        displayErrorScreen: true,
       })
     })
   }
@@ -125,12 +128,13 @@ class GenuineCheck extends PureComponent<StepProps, State> {
       this.props.updateGenuineCheck({
         isDeviceGenuine: false,
         genuineCheckUnavailable: error,
+        displayErrorScreen: false,
       })
     })
   }
 
   redoGenuineCheck = () => {
-    this.props.updateGenuineCheck({ isGenuineFail: false })
+    this.props.updateGenuineCheck({ displayErrorScreen: false })
   }
 
   contactSupport = () => {
@@ -153,7 +157,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
     const { genuine } = onboarding
     const { cachedPinStepButton, cachedRecoveryStepButton, isGenuineCheckModalOpened } = this.state
 
-    if (genuine.isGenuineFail) {
+    if (genuine.displayErrorScreen) {
       return this.renderGenuineFail()
     }
 
@@ -225,17 +229,22 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                       </GenuineSuccessText>
                     </Box>
                   ) : genuine.genuineCheckUnavailable ? (
-                    <Box horizontal align="center" flow={1} color={colors.alertRed}>
-                      <IconCross size={16} />
-                      <Box ff="Open Sans|Regular" fontSize={4} style={{ maxWidth: '200px' }}>
-                        <TranslatedError error={genuine.genuineCheckUnavailable} />
-                        <FakeLink
-                          color="alertRed"
-                          underline
-                          onClick={this.handleOpenGenuineCheckModal}
-                        >
-                          {t('app:common.retry')}
-                        </FakeLink>
+                    <Box align="center" flow={1} color={colors.alertRed}>
+                      <FakeLink
+                        ff="Open Sans|Regular"
+                        fontSize={4}
+                        underline
+                        onClick={this.handleOpenGenuineCheckModal}
+                      >
+                        {t('app:common.retry')}
+                      </FakeLink>
+                      <Box horizontal justify="center">
+                        <Box justifyContent="center">
+                          <IconCross size={12} />
+                        </Box>
+                        <Box ff="Open Sans|Regular" fontSize={2} ml={1}>
+                          <TranslatedError error={genuine.genuineCheckUnavailable} />
+                        </Box>
                       </Box>
                     </Box>
                   ) : (
@@ -252,15 +261,32 @@ class GenuineCheck extends PureComponent<StepProps, State> {
             </CardWrapper>
           </Box>
         </StepContainerInner>
-        <OnboardingFooter
-          horizontal
-          align="center"
-          flow={2}
-          t={t}
-          nextStep={nextStep}
-          prevStep={prevStep}
-          isContinueDisabled={!genuine.isDeviceGenuine}
-        />
+        {genuine.genuineCheckUnavailable ? (
+          <OnboardingFooterWrapper>
+            <Button padded outlineGrey onClick={() => prevStep()}>
+              {t('app:common.back')}
+            </Button>
+            <Box horizontal ml="auto">
+              <Button padded disabled={false} onClick={() => nextStep()} mx={2}>
+                {t('app:common.skipThisStep')}
+              </Button>
+              <Button padded onClick={nextStep} disabled primary>
+                {t('app:common.continue')}
+              </Button>
+            </Box>
+          </OnboardingFooterWrapper>
+        ) : (
+          <OnboardingFooter
+            horizontal
+            align="center"
+            flow={2}
+            t={t}
+            nextStep={nextStep}
+            prevStep={prevStep}
+            isContinueDisabled={!genuine.isDeviceGenuine}
+          />
+        )}
+
         <GenuineCheckModal
           isOpened={isGenuineCheckModalOpened}
           onClose={this.handleCloseGenuineCheckModal}

src/reducers/onboarding.js

@@ -24,6 +24,7 @@ export type OnboardingState = {
     isGenuineFail: boolean,
     isDeviceGenuine: boolean,
     genuineCheckUnavailable: ?Error,
+    displayErrorScreen: boolean,
   },
   isLedgerNano: boolean | null,
   flowType: string,
@@ -38,6 +39,7 @@ const state: OnboardingState = {
     isGenuineFail: false,
     isDeviceGenuine: false,
     genuineCheckUnavailable: null,
+    displayErrorScreen: false,
   },
   isLedgerNano: null,
   flowType: '',