Auto-show onboarding flow on first page view

5 files changed, 53 insertions, 7 deletions

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index c80d1dd6e..ab9d58415 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -14,7 +14,8 @@ export interface PortalOnboardingFlowProps {
     providerType: ProviderType;
     injectedProviderName: string;
     blockchainIsLoaded: boolean;
-    onClose: () => void;
+    hasBeenSeen: boolean;
+    setIsRunning: (isRunning: boolean) => void;
     setOnboardingStep: (stepIndex: number) => void;
 }
 
@@ -42,6 +43,12 @@ const steps: Step[] = [
 ];
 
 export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
+    public componentDidMount(): void {
+        this._autoStartOnboardingIfShould();
+    }
+    public componentDidUpdate(): void {
+        this._autoStartOnboardingIfShould();
+    }
     public render(): React.ReactNode {
         return (
             <OnboardingFlow
@@ -49,7 +56,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
                 blacklistedStepIndices={this._getBlacklistedStepIndices()}
                 stepIndex={this.props.stepIndex}
                 isRunning={this.props.isRunning}
-                onClose={this.props.onClose}
+                onClose={this.props.setIsRunning.bind(this, false)}
                 setOnboardingStep={this.props.setOnboardingStep}
             />
         );
@@ -73,4 +80,10 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         }
         return twoAndOn;
     }
+
+    private _autoStartOnboardingIfShould(): void {
+        if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
+            this.props.setIsRunning(true);
+        }
+    }
 }
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index 3db8762ec..a7bd86ab1 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -15,10 +15,11 @@ interface ConnectedState {
     providerType: ProviderType;
     injectedProviderName: string;
     blockchainIsLoaded: boolean;
+    hasBeenSeen: boolean;
 }
 
 interface ConnectedDispatch {
-    onClose: () => void;
+    setIsRunning: (isRunning: boolean) => void;
     setOnboardingStep: (stepIndex: number) => void;
 }
 
@@ -29,13 +30,14 @@ const mapStateToProps = (state: State): ConnectedState => ({
     providerType: state.providerType,
     injectedProviderName: state.injectedProviderName,
     blockchainIsLoaded: state.blockchainIsLoaded,
+    hasBeenSeen: state.hasPortalOnboardingBeenSeen,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
-    onClose: (): void => {
+    setIsRunning: (isRunning: boolean): void => {
         dispatch({
             type: ActionTypes.UpdatePortalOnboardingShowing,
-            data: false,
+            data: isRunning,
         });
     },
     setOnboardingStep: (stepIndex: number): void => {
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 4fe81a91e..5ab03c07c 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -1,4 +1,5 @@
 // Polyfills
+import * as _ from 'lodash';
 import { MuiThemeProvider } from 'material-ui/styles';
 import * as React from 'react';
 import { render } from 'react-dom';
@@ -14,6 +15,7 @@ import { Landing } from 'ts/containers/landing';
 import { NotFound } from 'ts/containers/not_found';
 import { Wiki } from 'ts/containers/wiki';
 import { createLazyComponent } from 'ts/lazy_component';
+import { stateStorage } from 'ts/local_storage/state_storage';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
 import { reducer, State } from 'ts/redux/reducer';
@@ -75,7 +77,19 @@ const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async (
 analytics.init();
 // tslint:disable-next-line:no-floating-promises
 analytics.logProviderAsync((window as any).web3);
-const store: ReduxStore<State> = createStore(reducer, devToolsEnhancer({ name: '0x Website Redux Store' }));
+const store: ReduxStore<State> = createStore(
+    reducer,
+    stateStorage.getPersistedDefaultState(),
+    devToolsEnhancer({ name: '0x Website Redux Store' }),
+);
+store.subscribe(
+    _.throttle(() => {
+        stateStorage.saveState({
+            hasPortalOnboardingBeenSeen: store.getState().hasPortalOnboardingBeenSeen,
+        });
+    }, 1000),
+);
+
 render(
     <Router>
         <div>
diff --git a/packages/website/ts/local_storage/local_storage.ts b/packages/website/ts/local_storage/local_storage.ts
index 20a533a91..569e262fc 100644
--- a/packages/website/ts/local_storage/local_storage.ts
+++ b/packages/website/ts/local_storage/local_storage.ts
@@ -26,6 +26,20 @@ export const localStorage = {
         }
         window.localStorage.removeItem(key);
     },
+    getObject(key: string): object {
+        const item = localStorage.getItemIfExists(key);
+        if (item) {
+            try {
+                return JSON.parse(item);
+            } catch (err) {
+                return undefined;
+            }
+        }
+        return undefined;
+    },
+    setObject(key: string, value: object): void {
+        localStorage.setItem(key, JSON.stringify(value));
+    },
     getAllKeys(): string[] {
         if (!this.doesExist) {
             return [];
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index e61345c87..5c57792f7 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -42,6 +42,7 @@ export interface State {
     userEtherBalanceInWei: BigNumber;
     portalOnboardingStep: number;
     isPortalOnboardingShowing: boolean;
+    hasPortalOnboardingBeenSeen: boolean;
     // Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
     userSuppliedOrderCache: Order;
 
@@ -56,7 +57,7 @@ export interface State {
     translate: Translate;
 }
 
-const INITIAL_STATE: State = {
+export const INITIAL_STATE: State = {
     // Portal
     blockchainErr: BlockchainErrs.NoError,
     blockchainIsLoaded: false,
@@ -84,6 +85,7 @@ const INITIAL_STATE: State = {
     userSuppliedOrderCache: undefined,
     portalOnboardingStep: 0,
     isPortalOnboardingShowing: false,
+    hasPortalOnboardingBeenSeen: false,
     // Docs
     docsVersion: DEFAULT_DOCS_VERSION,
     availableDocVersions: [DEFAULT_DOCS_VERSION],
@@ -309,6 +311,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
             return {
                 ...state,
                 isPortalOnboardingShowing,
+                hasPortalOnboardingBeenSeen: true,
             };
         }