diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index 18a172be..11510a8a 100644 --- a/src/components/Onboarding/index.js +++ b/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 { 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 { 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 { return ( {step.options.showBreadcrumb && } + {onboardingRelaunched ? ( + + + + ) : null} diff --git a/src/components/OnboardingOrElse.js b/src/components/OnboardingOrElse.js index f82a9418..6b7ce709 100644 --- a/src/components/OnboardingOrElse.js +++ b/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 { render() { - const { hasCompletedOnboarding, children } = this.props - if (hasCompletedOnboarding) { - return children + const { hasCompletedOnboarding, onboardingRelaunched, children } = this.props + if (!hasCompletedOnboarding || onboardingRelaunched) { + return } - return + return children } } export default connect( createStructuredSelector({ hasCompletedOnboarding: hasCompletedOnboardingSelector, + onboardingRelaunched: onboardingRelaunchedSelector, }), )(OnboardingOrElse) diff --git a/src/components/SettingsPage/LaunchOnboardingBtn.js b/src/components/SettingsPage/LaunchOnboardingBtn.js index a63ba1b0..1d6174c7 100644 --- a/src/components/SettingsPage/LaunchOnboardingBtn.js +++ b/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) => void, - relaunchOnboarding: ($Shape) => void, + relaunchOnboarding: boolean => void, t: T, } class LaunchOnboardingBtn extends PureComponent { handleLaunchOnboarding = () => { - this.props.saveSettings({ hasCompletedOnboarding: false }) - this.props.relaunchOnboarding({ onboardingRelaunched: true }) - return + this.props.relaunchOnboarding(true) } render() { const { t } = this.props diff --git a/src/components/layout/Default.js b/src/components/layout/Default.js index 7e426ce0..5d70f1db 100644 --- a/src/components/layout/Default.js +++ b/src/components/layout/Default.js @@ -88,8 +88,8 @@ class Default extends Component { - - + + {Object.entries(modals).map(([name, ModalComponent]: [string, any]) => ( ))} @@ -119,8 +119,8 @@ class Default extends Component { - - + + ) } diff --git a/src/reducers/onboarding.js b/src/reducers/onboarding.js index 4785cd19..44fc65d0 100644 --- a/src/reducers/onboarding.js +++ b/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 }, - ) => ({ ...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')