Merge pull request #1155 from gre/fix/1152

Fixes #1152

src/components/Onboarding/index.js

@@ -5,6 +5,7 @@ import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
+import IconCross from 'icons/Cross'
 
 import type { T } from 'types/common'
 import type { OnboardingState } from 'reducers/onboarding'
@@ -20,6 +21,8 @@ import {
   updateGenuineCheck,
   isLedgerNano,
   flowType,
+  relaunchOnboarding,
+  onboardingRelaunchedSelector,
 } from 'reducers/onboarding'
 import { getCurrentDevice } from 'reducers/devices'
 
@@ -54,6 +57,7 @@ const STEPS = {
 
 const mapStateToProps = state => ({
   hasCompletedOnboarding: state.settings.hasCompletedOnboarding,
+  onboardingRelaunched: onboardingRelaunchedSelector(state),
   onboarding: state.onboarding,
   settings: state.settings,
   getCurrentDevice: getCurrentDevice(state),
@@ -66,11 +70,13 @@ const mapDispatchToProps = {
   jumpStep,
   unlock,
   openModal,
+  relaunchOnboarding,
 }
 
 type Props = {
   t: T,
   hasCompletedOnboarding: boolean,
+  onboardingRelaunched: boolean,
   saveSettings: Function,
   onboarding: OnboardingState,
   settings: SettingsState,
@@ -80,6 +86,7 @@ type Props = {
   getCurrentDevice: Function,
   unlock: Function,
   openModal: string => void,
+  relaunchOnboarding: boolean => void,
 }
 
 export type StepProps = {
@@ -99,10 +106,33 @@ export type StepProps = {
   flowType: Function,
 }
 
+const CloseContainer = styled(Box).attrs({
+  p: 4,
+  color: 'fog',
+})`
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+
+  &:hover {
+    color: ${p => p.theme.colors.grey};
+  }
+
+  &:active {
+    color: ${p => p.theme.colors.dark};
+  }
+`
+
 class Onboarding extends PureComponent<Props> {
   getDeviceInfo = () => this.props.getCurrentDevice
+  cancelRelaunch = () => {
+    this.props.relaunchOnboarding(false)
+  }
   finish = () => {
     this.props.saveSettings({ hasCompletedOnboarding: true })
+    this.props.relaunchOnboarding(false)
     setTimeout(() => {
       this.props.openModal(MODAL_DISCLAIMER)
     }, MODAL_DISCLAIMER_DELAY)
@@ -119,17 +149,14 @@ class Onboarding extends PureComponent<Props> {
 
   render() {
     const {
-      hasCompletedOnboarding,
       onboarding,
       prevStep,
       nextStep,
       jumpStep,
       settings,
       t,
+      onboardingRelaunched,
     } = this.props
-    if (hasCompletedOnboarding) {
-      return null
-    }
 
     const StepComponent = STEPS[onboarding.stepName]
     const step = onboarding.steps[onboarding.stepIndex]
@@ -159,6 +186,11 @@ class Onboarding extends PureComponent<Props> {
     return (
       <Container>
         {step.options.showBreadcrumb && <OnboardingBreadcrumb />}
+        {onboardingRelaunched ? (
+          <CloseContainer onClick={this.cancelRelaunch}>
+            <IconCross size={16} />
+          </CloseContainer>
+        ) : null}
         <StepContainer>
           <StepComponent {...stepProps} />
         </StepContainer>

src/components/OnboardingOrElse.js

@@ -4,25 +4,28 @@ import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import { hasCompletedOnboardingSelector } from 'reducers/settings'
+import { onboardingRelaunchedSelector } from 'reducers/onboarding'
 import Onboarding from './Onboarding'
 
 type Props = {
   hasCompletedOnboarding: boolean,
+  onboardingRelaunched: boolean,
   children: *,
 }
 
 class OnboardingOrElse extends PureComponent<Props> {
   render() {
-    const { hasCompletedOnboarding, children } = this.props
-    if (hasCompletedOnboarding) {
-      return children
-    }
+    const { hasCompletedOnboarding, onboardingRelaunched, children } = this.props
+    if (!hasCompletedOnboarding || onboardingRelaunched) {
       return <Onboarding />
     }
+    return children
+  }
 }
 
 export default connect(
   createStructuredSelector({
     hasCompletedOnboarding: hasCompletedOnboardingSelector,
+    onboardingRelaunched: onboardingRelaunchedSelector,
   }),
 )(OnboardingOrElse)

src/components/SettingsPage/LaunchOnboardingBtn.js

@@ -2,32 +2,24 @@
 
 import React, { Fragment, PureComponent } from 'react'
 import { connect } from 'react-redux'
-import { saveSettings } from 'actions/settings'
 import { translate } from 'react-i18next'
 import type { T } from 'types/common'
-import type { SettingsState } from 'reducers/settings'
-import type { OnboardingState } from 'reducers/onboarding'
 import Track from 'analytics/Track'
-import Onboarding from 'components/Onboarding'
 import Button from 'components/base/Button/index'
 import { relaunchOnboarding } from 'reducers/onboarding'
 
 const mapDispatchToProps = {
-  saveSettings,
   relaunchOnboarding,
 }
 
 type Props = {
-  saveSettings: ($Shape<SettingsState>) => void,
-  relaunchOnboarding: ($Shape<OnboardingState>) => void,
+  relaunchOnboarding: boolean => void,
   t: T,
 }
 
 class LaunchOnboardingBtn extends PureComponent<Props> {
   handleLaunchOnboarding = () => {
-    this.props.saveSettings({ hasCompletedOnboarding: false })
-    this.props.relaunchOnboarding({ onboardingRelaunched: true })
-    return <Onboarding />
+    this.props.relaunchOnboarding(true)
   }
   render() {
     const { t } = this.props

src/components/layout/Default.js

@@ -88,8 +88,8 @@ class Default extends Component<Props> {
         <ExportLogsBtn hookToShortcut />
         <Track mandatory onMount event="App Starts" />
 
-        <OnboardingOrElse>
         <IsUnlocked>
+          <OnboardingOrElse>
             {Object.entries(modals).map(([name, ModalComponent]: [string, any]) => (
               <ModalComponent key={name} />
             ))}
@@ -119,8 +119,8 @@ class Default extends Component<Props> {
             <KeyboardContent sequence="BJBJBJ">
               <PerfIndicator />
             </KeyboardContent>
-          </IsUnlocked>
           </OnboardingOrElse>
+        </IsUnlocked>
       </Fragment>
     )
   }

src/reducers/onboarding.js

@@ -2,6 +2,7 @@
 
 import { SKIP_ONBOARDING } from 'config/constants'
 import { handleActions, createAction } from 'redux-actions'
+import type { State } from '.'
 
 type Step = {
   name: string,
@@ -170,14 +171,17 @@ const handlers = {
     ...state,
     isLedgerNano,
   }),
-  ONBOARDING_RELAUNCH: (
-    state: OnboardingState,
-    { payload: onboardingRelaunched }: { payload: $Shape<OnboardingState> },
-  ) => ({ ...initialState, ...onboardingRelaunched }),
+  ONBOARDING_RELAUNCH: (state: OnboardingState, { payload: onboardingRelaunched }) => ({
+    ...initialState,
+    onboardingRelaunched,
+  }),
 }
 
 export default handleActions(handlers, initialState)
 
+export const onboardingRelaunchedSelector = (s: State): ?boolean =>
+  s.onboarding.onboardingRelaunched
+
 export const relaunchOnboarding = createAction('ONBOARDING_RELAUNCH')
 export const nextStep = createAction('ONBOARDING_NEXT_STEP')
 export const prevStep = createAction('ONBOARDING_PREV_STEP')