From 809ac3340cb477d4b46e24d4bad028568beeec06 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 24 May 2018 17:10:39 -0700 Subject: Add ability to blacklist onboarding steps --- .../ts/components/onboarding/onboarding_flow.tsx | 56 +++++++++++++++++-- .../onboarding/portal_onboarding_flow.tsx | 63 ++++++++++++---------- 2 files changed, 85 insertions(+), 34 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 22fc71481..0cb640f8f 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/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 { - private _joyrideRef: React.RefObject; - 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 ( { ); } + 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': diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index feaa9c997..c80d1dd6e 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/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,21 +10,47 @@ 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; } +const steps: Step[] = [ + { + target: '.wallet', + content: + 'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps', + placement: 'right', + disableBeacon: true, + }, + { + target: '.wallet', + content: 'Unlock your metamask extension to begin', + placement: 'right', + disableBeacon: true, + }, + { + target: '.wallet', + content: + 'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps', + placement: 'right', + disableBeacon: true, + }, +]; + export class PortalOnboardingFlow extends React.Component { public render(): React.ReactNode { return ( ); } @@ -32,40 +59,18 @@ export class PortalOnboardingFlow extends React.Component