cluedin-widget/widget/onBoarding/index.jsx

This is the project for creating and managing widgets in CluedIn.

import React, { Component } from 'react';
import { goToLocation } from '../../core/action/core';
import CluedInButton from '../../core/components/cluedinbutton.jsx';
import CluedInProgress from '../../core/components/cluedinprogress.jsx';
import Widget from '../../core/components/widget.jsx';
import registry from '../../core/registry';
import { connect } from 'react-redux';
import { fetchMostConnectedIfNeeded } from '../../core/action/core';
import { fetchActiveProvidersIfNeeded } from '../../core/action/provider';
import { fetchUsersIfNeeded, fetchPotentialUsersIfNeeded } from '../../core/action/user';
import { shouldFetchBoardingIfNeeded } from '../../core/action/boarding';
import iso from '../../iso';

const collectionHelper = iso.collection;

import config from '../../core/config';

class OnBoarding extends Component {

    componentWillMount() {
        const { org } = this.props;

        this.props.dispatch( fetchActiveProvidersIfNeeded() );
        this.props.dispatch( fetchUsersIfNeeded() );
        this.props.dispatch( fetchMostConnectedIfNeeded() );
        this.props.dispatch( fetchPotentialUsersIfNeeded() );
        this.props.dispatch( shouldFetchBoardingIfNeeded( org ) );
    }

    getTitle( step ) {
        switch( step ) {
            case 1:
                return (
                    <span>Let's try the Universal Search</span>
                );
            case 2:
                return (
                    <span>Let's connect your data</span>
                );
            case 3:
                return (
                    <span>Let's get a central view of your data</span>
                );
            case 4:
                return (
                    <span>The more the merrier</span>
                );
            case 5:
                return (
                    <span>Hoora! You CluedIn account is now ready</span>
                );
            default:
                return (
                    <span>10 minutes away to get the most of your CluedIn Account</span>
                );
        }
    }

    getMenu( step ) {
        const isActiveStep0 = (step === 0) ? 'active' : '';
        const isActiveStep1 = (step === 1) ? 'active' : '';
        const isActiveStep2 = (step === 2) ? 'active' : '';
        const isActiveStep3 = (step === 3) ? 'active' : '';
        const isActiveStep4 = (step === 4) ? 'active' : '';

        return (
            <ul className="cluedIn_progressive_menu cluedIn_m-b cluedIn_m-t">
                <li className={isActiveStep0}><a>1. Get Started</a></li>
                <li className={isActiveStep1}><a>2. Try the search</a></li>
                <li className={isActiveStep2}><a>3. Get You Data Connected</a></li>
                <li className={isActiveStep3}><a>4. Your 1st Connected View</a></li>
                <li className={isActiveStep4}><a>5. Share with you team</a></li>
            </ul>
        )
    }

    step0Action() {
        this.props.dispatch( goToLocation( 'addProvider' ) );
    }

    step2Action() {
        this.props.dispatch( goToLocation( 'addProvider' ) );
    }

    step1Action( searchTerm ) {
        this.props.dispatch( goToLocation( 'goToSearch', searchTerm ) );
    }

    step3Action( id ) {
        this.props.dispatch( goToLocation( 'entity', id ) );
    }

    step4Action() {
        this.props.dispatch( goToLocation( 'goToInviteUser' ) );
    }

    progress( step ) {
        var percentage = ((step / 5) * 100);
        var bigNumber  = true;
        return (<CluedInProgress withBigNumber={bigNumber} percentage={percentage}></CluedInProgress>);
    }

    content( step ) {
        const { connectedData, providers, potentialUsers } = this.props;

        switch( step ) {
            case 1:
                return (
                    <div>
                        <div className="cluedIn_text_zone cluedIn_highlightText">
                            Horaa! You have added <strong>{providers[ 0 ].Name}</strong> and you are now ready to do
                            your first search.
                            <br/><br/>
                            Let's now try a new search.
                            <br/><br/>
                            <a onClick={this.step1Action.bind(this, connectedData[ 0 ].name)}
                               className="cluedIn_btn-primary cluedIn_btn">Search
                                for <strong>{connectedData[ 0 ].name}</strong></a>
                        </div>
                    </div>
                );
            case 2:
                return (
                    <div>
                        <div className="cluedIn_text_zone cluedIn_highlightText">
                            CluedIn is more than 'just a search'. It has the ability to centralize the data in order to
                            get powerful insights of your customers, colleagues, documents,...
                        </div>
                        <div className="cluedIn_text_zone cluedIn_highlightText">
                            In order to benefit from that:
                        </div>
                        <div className="cluedIn_text_zone">
                            <a onClick={this.step2Action.bind(this)}
                               className="cluedIn_btn-primary cluedIn_btn">Add 2nd Integration</a>
                        </div>
                    </div>
                );
            case 3:
                return (
                    <div>
                        <div className="cluedIn_text_zone cluedIn_highlightText">
                            Now that we have connected your <strong>{providers[ 1 ].Name}</strong> integration, you are
                            now ready to see the some connected views. This means your data is now more centralized and
                            it will be easier for you to find what you are looking for and get powerful insights.
                        </div>
                        <div className="cluedIn_text_zone cluedIn_highlightText">
                            <a onClick={this.step3Action.bind(this, connectedData[ 0 ].id)}
                               className="cluedIn_btn-primary cluedIn_btn">Visit the page
                                <strong> {connectedData[ 1 ].name}</strong></a>
                        </div>
                    </div>
                );
            case 4:
                let potentialContent = '';
                let invitation       = '';

                if ( potentialUsers && potentialUsers.length > 0 ) {
                    invitation       = <span>Here is the list of potential colleagues we have found:</span>;
                    potentialContent = collectionHelper.take( potentialUsers, 5 ).map( function( user, index ) {
                        return <div key={index} className="cluedIn_m-t-xs"><strong>{user.Name}</strong><br/></div>;
                    } );
                }

                return (
                    <div>
                        <div className="cluedIn_text_zone cluedIn_highlightText">
                            We have found that some of your colleagues are also mentioned in those documents. CluedIn
                            is designed for Team in mind. The more people you will have, the more provider you will add,
                            the better your CluedIn account will become. We will connect all those data to get you a
                            better universal search and connected views.
                            <br/><br/>
                        </div>
                        <div className="cluedIn_text_zone cluedIn_highlightText">
                            {invitation}
                            {potentialContent}
                        </div>
                        <div className="cluedIn_text_zone">
                            <a onClick={this.step4Action.bind(this)}
                               className="cluedIn_btn-primary cluedIn_btn">Invite Team Member</a>
                        </div>
                    </div>
                );
            case 5:
                return (
                    <div className="cluedIn_row">
                        <div className="cluedIn_col s3">
                            <img className="cluedIn_img_responsive" src={config.image.party} alt="Congratz!"/>
                        </div>
                        <div className="cluedIn_col s9">
                            <div className="cluedIn_text_zone">
                                <h2>You are now ready to experience CluedIn !</h2>
                                You are now up and running to experience all the nice CluedIn features. For more
                                information
                                about the product, you can follow our <a target="_blank"
                                                                         href="blog.cluedin.net">blog</a>.
                            </div>
                        </div>
                    </div>
                );
            default:
                return (
                    <div>
                        <div className="cluedIn_text_zone cluedIn_highlightText">
                            In order to have your Universal Search running, you need to add your first provider. In this
                            step, you
                            will add a provider and will receive an email when everything is setup for you.
                        </div>
                        <div className="cluedIn_text_zone">
                            <a onClick={this.step0Action.bind(this)} className="cluedIn_btn-primary cluedIn_btn">Add
                                your first
                                Provider</a>
                        </div>
                    </div>
                );
        }
    }

    step( number ) {

        var title    = this.getTitle( number );
        var menu     = this.getMenu( number );
        var content  = this.content( number );
        var progress = this.progress( number );
        return (
            <div>
                <div className="cluedIn_row">
                    <div className="cluedIn_col s12">
                        <div className="cluedIn_title">
                            <div className="textHeading h2">
                                {title}
                            </div>
                        </div>
                    </div>
                </div>
                <div className="cluedIn_row">
                    <div className="cluedIn_col s12">
                        {menu}
                    </div>
                </div>
                <div className="cluedIn_row">
                    <div className="cluedIn_col s8">
                        <div className="cluedIn_onBoarding_content">
                            {content}
                        </div>
                    </div>
                    <div className="cluedIn_col s4">
                        {progress}
                    </div>
                </div>
            </div>
        );
    }

    render() {
        let { providers, isFetchingProvider, isFetchingUsers, hasSearched, hasVisitConnectedView, users, isFetchingPotentialUsers, isFetchingBoardingInfo } = this.props;
        let content;
        let step = 0;

        var isLoading = (isFetchingProvider || isFetchingUsers || isFetchingPotentialUsers || isFetchingBoardingInfo);

        if ( !isLoading ) {
            if ( providers && providers.length > 0 ) {
                if ( !hasSearched ) {
                    step = 1;
                } else {
                    if ( providers.length > 1 ) {
                        if ( !hasVisitConnectedView ) {
                            step = 3;
                        } else {
                            if ( users && users.length > 1 ) {
                                step = 5;
                            } else {
                                step = 4;
                            }
                        }
                    } else {
                        step = 2;
                    }
                }
            }

            if ( step > 5 ) {
                step = 0;
            }

            content = this.step( step );
        }

        return (
            <Widget loading={isLoading}>
                {content}
            </Widget>
        );

    }
}

function select( state ) {
    return {
        providers: state.provider.providers,
        isFetchingProvider: state.provider.isFetching,
        isFetchingUsers: state.user.isFetching,
        users: state.user.users,
        hasSearched: ( state.boarding.boardingInfo ? state.boarding.boardingInfo.hasSearched : false ),
        hasVisitConnectedView: ( state.boarding.boardingInfo ? state.boarding.boardingInfo.hasVisited : false ),
        isFetchingBoardingInfo: state.boarding.isFetching,
        connectedData: state.core.connectedData,
        org: state.core.org,
        potentialUsers: state.user.potentialUsers,
        isFetchingPotentialUsers: state.user.isFetchingPotentialUsers
    };
}

registry.register( 'OnBoarding', connect( select )( OnBoarding ) );