Add ability to blacklist onboarding steps

packages/website/ts/components/onboarding/onboarding_flow.tsx

@@ -6,9 +6,11 @@ import { zIndex } from 'ts/utils/style';
 
 export interface OnboardingFlowProps {
     steps: Step[];
+    blacklistedStepIndices: number[];
     stepIndex: number;
     isRunning: boolean;
     onClose: () => void;
+    setOnboardingStep: (stepIndex: number) => void;
 }
 
 const joyrideStyleOptions: StyleOptions = {
@@ -17,16 +19,17 @@ const joyrideStyleOptions: StyleOptions = {
 
 // Wrapper around Joyride with defaults and styles set
 export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
-    private _joyrideRef: React.RefObject<Joyride>;
-    constructor(props: OnboardingFlowProps) {
-        super(props);
-        this._joyrideRef = React.createRef();
+    public componentDidMount(): void {
+        this._setOnboardingStepBasedOnBlacklist(this.props.stepIndex);
+    }
+
+    public componentWillReceiveProps(nextProps: OnboardingFlowProps): void {
+        this._setOnboardingStepBasedOnBlacklist(nextProps.stepIndex);
     }
 
     public render(): React.ReactNode {
         return (
             <Joyride
-                ref={this._joyrideRef}
                 run={this.props.isRunning}
                 debug={true}
                 steps={this.props.steps}
@@ -37,6 +40,49 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         );
     }
 
+    private _setOnboardingStepBasedOnBlacklist(nextIndex: number): void {
+        const blacklistedSteps = this.props.blacklistedStepIndices;
+        const newStepIndex = this._adjustedStepBasedOnBlacklist(
+            this.props.stepIndex,
+            nextIndex,
+            this.props.steps.length,
+            blacklistedSteps,
+        );
+        this.props.setOnboardingStep(newStepIndex);
+    }
+
+    private _adjustedStepBasedOnBlacklist(
+        currentStep: number,
+        nextStep: number,
+        totalSteps: number,
+        blacklistedSteps: number[],
+    ): number {
+        if (!blacklistedSteps.includes(nextStep)) {
+            return nextStep;
+        }
+        let newStep = nextStep;
+        const op = nextStep >= currentStep ? _.add : _.subtract;
+        let didSearch = false;
+        while (blacklistedSteps.includes(newStep)) {
+            newStep = op(newStep, 1);
+            if (newStep < 0) {
+                if (didSearch) {
+                    break;
+                }
+                newStep = totalSteps - 1;
+                didSearch = true;
+            }
+            if (newStep >= totalSteps) {
+                if (didSearch) {
+                    break;
+                }
+                newStep = 0;
+                didSearch = true;
+            }
+        }
+        return newStep;
+    }
+
     private _handleChange(data: CallbackData): void {
         switch (data.action) {
             case 'close':

packages/website/ts/components/onboarding/portal_onboarding_flow.tsx

@@ -2,6 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Step } from 'react-joyride';
 
+import { black } from 'material-ui/styles/colors';
 import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
 import { ProviderType } from 'ts/types';
 import { utils } from 'ts/utils/utils';
@@ -9,31 +10,15 @@ import { utils } from 'ts/utils/utils';
 export interface PortalOnboardingFlowProps {
     stepIndex: number;
     isRunning: boolean;
-    onClose: () => void;
     userAddress: string;
     providerType: ProviderType;
     injectedProviderName: string;
     blockchainIsLoaded: boolean;
+    onClose: () => void;
+    setOnboardingStep: (stepIndex: number) => void;
 }
 
-export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
-    public render(): React.ReactNode {
-        return (
-            <OnboardingFlow
-                steps={this._getSteps()}
-                stepIndex={this.props.stepIndex}
-                isRunning={this.props.isRunning}
-                onClose={this.props.onClose}
-            />
-        );
-    }
-
-    private _isAddressAvailable(): boolean {
-        return !_.isEmpty(this.props.userAddress);
-    }
-
-    private _getSteps(): Step[] {
-        const allSteps: Step[] = [
+const steps: Step[] = [
     {
         target: '.wallet',
         content:
@@ -54,18 +39,38 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         placement: 'right',
         disableBeacon: true,
     },
-        ];
-        const [noMetamaskStep, lockedMetamaskStep, ...restOfSteps] = allSteps;
+];
+
+export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
+    public render(): React.ReactNode {
+        return (
+            <OnboardingFlow
+                steps={steps}
+                blacklistedStepIndices={this._getBlacklistedStepIndices()}
+                stepIndex={this.props.stepIndex}
+                isRunning={this.props.isRunning}
+                onClose={this.props.onClose}
+                setOnboardingStep={this.props.setOnboardingStep}
+            />
+        );
+    }
+
+    private _isAddressAvailable(): boolean {
+        return !_.isEmpty(this.props.userAddress);
+    }
+
+    private _getBlacklistedStepIndices(): number[] {
         if (this._isAddressAvailable()) {
-            return restOfSteps;
+            return [0, 1];
         }
         const isExternallyInjected = utils.isExternallyInjected(
             this.props.providerType,
             this.props.injectedProviderName,
         );
+        const twoAndOn = _.range(2, steps.length);
         if (isExternallyInjected) {
-            return [lockedMetamaskStep, ...restOfSteps];
+            return [0].concat(twoAndOn);
         }
-        return allSteps;
+        return twoAndOn;
     }
 }

packages/website/ts/containers/portal_onboarding_flow.ts

@@ -19,6 +19,7 @@ interface ConnectedState {
 
 interface ConnectedDispatch {
     onClose: () => void;
+    setOnboardingStep: (stepIndex: number) => void;
 }
 
 const mapStateToProps = (state: State): ConnectedState => ({
@@ -37,6 +38,12 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
             data: false,
         });
     },
+    setOnboardingStep: (stepIndex: number): void => {
+        dispatch({
+            type: ActionTypes.UpdatePortalOnboardingStep,
+            data: stepIndex,
+        });
+    },
 });
 
 export const PortalOnboardingFlow: React.ComponentClass<PortalOnboardingFlowProps> = connect(