15 files changed, 842 insertions, 0 deletions
diff --git a/app/features/onboarding/actionTypes.js b/app/features/onboarding/actionTypes.js
new file mode 100644
index 0000000..58dbe4d
--- /dev/null
+++ b/app/features/onboarding/actionTypes.js
@@ -0,0 +1,39 @@
+/**
+ * The type of (redux) action that continues the onboarding by processing
+ * the next step.
+ *
+ * {
+ *     type: CONTINUE_ONBOARDING
+ * }
+ */
+export const CONTINUE_ONBOARDING = Symbol('CONTINUE_ONBOARDING');
+
+/**
+ * The type of (redux) action that sets active onboarding.
+ *
+ * {
+ *     type: SET_ACTIVE_ONBOARDING,
+ *     name: string,
+ *     section: string
+ * }
+ */
+export const SET_ACTIVE_ONBOARDING = Symbol('SET_ACTIVE_ONBOARDING');
+
+/**
+ * The type of (redux) action that starts Onboarding.
+ *
+ * {
+ *     type: START_ONBOARDING,
+ *     section: string
+ * }
+ */
+export const START_ONBOARDING = Symbol('START_ONBOARDING');
+
+/**
+ * The type of (redux) action that skips all onboarding.
+ *
+ * {
+ *     type: SKIP_ONBOARDING
+ * }
+ */
+export const SKIP_ONBOARDING = Symbol('SKIP_ONBOARDING');
diff --git a/app/features/onboarding/actions.js b/app/features/onboarding/actions.js
new file mode 100644
index 0000000..30f6d42
--- /dev/null
+++ b/app/features/onboarding/actions.js
@@ -0,0 +1,70 @@
+// @flow
+
+import {
+    CONTINUE_ONBOARDING,
+    SET_ACTIVE_ONBOARDING,
+    SKIP_ONBOARDING,
+    START_ONBOARDING
+} from './actionTypes';
+
+/**
+ * Continues the onboarding procedure by activating the next step of the current
+ * section.
+ *
+ * @returns {{
+ *     type: CONTINUE_ONBOARDING
+ * }}
+ */
+export function continueOnboarding() {
+    return {
+        type: CONTINUE_ONBOARDING
+    };
+}
+
+/**
+ * Set active onboarding.
+ *
+ * @param {string} name - Name of onboarding component.
+ * @param {string} section - Onboarding section.
+ * @returns {{
+ *     type: SET_ACTIVE_ONBOARDING,
+ *     name: string,
+ *     section: string
+ * }}
+ */
+export function setActiveOnboarding(name: string, section: string) {
+    return {
+        type: SET_ACTIVE_ONBOARDING,
+        name,
+        section
+    };
+}
+
+/**
+ * Skips onboarding.
+ *
+ * @returns {{
+ *     type: SKIP_ONBOARDING
+ * }}
+ */
+export function skipOnboarding() {
+    return {
+        type: SKIP_ONBOARDING
+    };
+}
+
+/**
+ * Start onboarding.
+ *
+ * @param {string} section - Onboarding section.
+ * @returns {{
+ *     type: START_ONBOARDING,
+ *     section: string
+ * }}
+ */
+export function startOnboarding(section: string) {
+    return {
+        type: START_ONBOARDING,
+        section
+    };
+}
diff --git a/app/features/onboarding/components/ConferenceURLSpotlight.js b/app/features/onboarding/components/ConferenceURLSpotlight.js
new file mode 100644
index 0000000..178e114
--- /dev/null
+++ b/app/features/onboarding/components/ConferenceURLSpotlight.js
@@ -0,0 +1,70 @@
+// @flow
+
+import { Spotlight } from '@atlaskit/onboarding';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import { continueOnboarding } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+};
+
+/**
+ * Conference URL Spotlight Component.
+ */
+class ConferenceURLSpotlight extends Component<Props, *> {
+    /**
+     * Initializes a new {@code ComponentURLSpotlight} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._next = this._next.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Spotlight
+                actions = { [
+                    {
+                        onClick: this._next,
+                        text: 'Next'
+                    }
+                ] }
+                dialogPlacement = 'bottom center'
+                target = { 'conference-url' } >
+                Enter the name (or full URL) of the room you want to join. You
+                may make a name up, just let others know so they enter the same
+                name.
+            </Spotlight>
+        );
+    }
+
+    _next: (*) => void;
+
+    /**
+     * Close the spotlight component.
+     *
+     * @returns {void}
+     */
+    _next() {
+        this.props.dispatch(continueOnboarding());
+    }
+}
+
+export default connect()(ConferenceURLSpotlight);
+
diff --git a/app/features/onboarding/components/EmailSettingSpotlight.js b/app/features/onboarding/components/EmailSettingSpotlight.js
new file mode 100644
index 0000000..ad1237e
--- /dev/null
+++ b/app/features/onboarding/components/EmailSettingSpotlight.js
@@ -0,0 +1,69 @@
+// @flow
+
+import { Spotlight } from '@atlaskit/onboarding';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import { continueOnboarding } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+};
+
+/**
+ * Email Setting Spotlight Component.
+ */
+class EmailSettingSpotlight extends Component<Props, *> {
+    /**
+     * Initializes a new {@code EmailSettingSpotlight} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._next = this._next.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Spotlight
+                actions = { [
+                    {
+                        onClick: this._next,
+                        text: 'Next'
+                    }
+                ] }
+                dialogPlacement = 'left top'
+                target = { 'email-setting' } >
+                The email you enter here will be part of your user profile and
+                it will be used to display your stored avatar in gravatar.com .
+            </Spotlight>
+        );
+    }
+
+    _next: (*) => void;
+
+    /**
+     * Close the spotlight component.
+     *
+     * @returns {void}
+     */
+    _next() {
+        this.props.dispatch(continueOnboarding());
+    }
+}
+
+export default connect()(EmailSettingSpotlight);
+
diff --git a/app/features/onboarding/components/NameSettingSpotlight.js b/app/features/onboarding/components/NameSettingSpotlight.js
new file mode 100644
index 0000000..69abec0
--- /dev/null
+++ b/app/features/onboarding/components/NameSettingSpotlight.js
@@ -0,0 +1,69 @@
+// @flow
+
+import { Spotlight } from '@atlaskit/onboarding';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import { continueOnboarding } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+};
+
+/**
+ * Name Setting Spotlight Component.
+ */
+class NameSettingSpotlight extends Component<Props, *> {
+    /**
+     * Initializes a new {@code NameSettingSpotlight} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._next = this._next.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Spotlight
+                actions = { [
+                    {
+                        onClick: this._next,
+                        text: 'Next'
+                    }
+                ] }
+                dialogPlacement = 'left top'
+                target = { 'name-setting' } >
+                This will be your display name, others will see you with this
+                name.
+            </Spotlight>
+        );
+    }
+
+    _next: (*) => void;
+
+    /**
+     * Close the spotlight component.
+     *
+     * @returns {void}
+     */
+    _next() {
+        this.props.dispatch(continueOnboarding());
+    }
+}
+
+export default connect()(NameSettingSpotlight);
+
diff --git a/app/features/onboarding/components/Onboarding.js b/app/features/onboarding/components/Onboarding.js
new file mode 100644
index 0000000..31ea1d4
--- /dev/null
+++ b/app/features/onboarding/components/Onboarding.js
@@ -0,0 +1,66 @@
+// @flow
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import { onboardingComponents, onboardingSteps } from '../../onboarding';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+
+    /**
+     * Onboarding Section.
+     */
+    section: string;
+
+    /**
+     * Active Onboarding.
+     */
+    _activeOnboarding: string;
+};
+
+/**
+ * Onboarding Component Entry Point.
+ */
+class Onboarding extends Component<Props, *> {
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        const { section, _activeOnboarding } = this.props;
+        const steps = onboardingSteps[section];
+
+        if (_activeOnboarding && steps.includes(_activeOnboarding)) {
+            const ActiveOnboarding = onboardingComponents[_activeOnboarding];
+
+            return <ActiveOnboarding />;
+        }
+
+        return null;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the React props.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {{
+ *     _activeOnboarding: string
+ * }}
+ */
+function _mapStateToProps(state: Object) {
+    return {
+        _activeOnboarding: state.onboarding.activeOnboarding
+    };
+}
+
+export default connect(_mapStateToProps)(Onboarding);
+
+
diff --git a/app/features/onboarding/components/OnboardingModal.js b/app/features/onboarding/components/OnboardingModal.js
new file mode 100644
index 0000000..fe38c2d
--- /dev/null
+++ b/app/features/onboarding/components/OnboardingModal.js
@@ -0,0 +1,89 @@
+// @flow
+
+import { Modal } from '@atlaskit/onboarding';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import OnboardingModalImage from '../../../images/onboarding.png';
+
+import config from '../../config';
+
+import { skipOnboarding, continueOnboarding } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+};
+
+/**
+ * Onboarding Modal Component.
+ */
+class OnboardingModal extends Component<Props, *> {
+    /**
+     * Initializes a new {@code OnboardingModal} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        // Bind event handlers.
+        this._skip = this._skip.bind(this);
+        this._next = this._next.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Modal
+                actions = { [
+                    {
+                        onClick: this._next,
+                        text: 'Start Tour'
+                    },
+                    {
+                        onClick: this._skip,
+                        text: 'Skip'
+                    }
+                ] }
+                heading = { `Welcome to ${config.appName}` }
+                image = { OnboardingModalImage } >
+                <p> Let us show you around!</p>
+            </Modal>
+        );
+    }
+
+    _next: (*) => void;
+
+    /**
+     * Close the spotlight component.
+     *
+     * @returns {void}
+     */
+    _next() {
+        this.props.dispatch(continueOnboarding());
+    }
+
+    _skip: (*) => void;
+
+    /**
+     * Skips all the onboardings.
+     *
+     * @returns {void}
+     */
+    _skip() {
+        this.props.dispatch(skipOnboarding());
+    }
+
+}
+
+export default connect()(OnboardingModal);
diff --git a/app/features/onboarding/components/ServerSettingSpotlight.js b/app/features/onboarding/components/ServerSettingSpotlight.js
new file mode 100644
index 0000000..dbd6eda
--- /dev/null
+++ b/app/features/onboarding/components/ServerSettingSpotlight.js
@@ -0,0 +1,69 @@
+// @flow
+
+import { Spotlight } from '@atlaskit/onboarding';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import { continueOnboarding } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+};
+
+/**
+ * Server Setting Spotlight Component.
+ */
+class ServerSettingSpotlight extends Component<Props, *> {
+    /**
+     * Initializes a new {@code ServerSettingSpotlight} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._next = this._next.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Spotlight
+                actions = { [
+                    {
+                        onClick: this._next,
+                        text: 'Next'
+                    }
+                ] }
+                dialogPlacement = 'left top'
+                target = { 'server-setting' } >
+                This will be the server where your conferences will take place.
+                You can use your own, but you don't need to!
+            </Spotlight>
+        );
+    }
+
+    _next: (*) => void;
+
+    /**
+     * Close the spotlight component.
+     *
+     * @returns {void}
+     */
+    _next() {
+        this.props.dispatch(continueOnboarding());
+    }
+}
+
+export default connect()(ServerSettingSpotlight);
+
diff --git a/app/features/onboarding/components/SettingsDrawerSpotlight.js b/app/features/onboarding/components/SettingsDrawerSpotlight.js
new file mode 100644
index 0000000..15ad601
--- /dev/null
+++ b/app/features/onboarding/components/SettingsDrawerSpotlight.js
@@ -0,0 +1,68 @@
+// @flow
+
+import { Spotlight } from '@atlaskit/onboarding';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import { openDrawer } from '../../navbar';
+import { SettingsDrawer } from '../../settings';
+
+import { continueOnboarding } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+};
+
+/**
+ * Settings Drawer Spotlight Component.
+ */
+class SettingsDrawerSpotlight extends Component<Props, *> {
+    /**
+     * Initializes a new {@code SettingsDrawerSpotlight} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._next = this._next.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Spotlight
+                dialogPlacement = 'right top'
+                target = { 'settings-drawer-button' }
+                targetOnClick = { this._next }>
+                Click here to open the settings drawer.
+            </Spotlight>
+        );
+    }
+
+    _next: (*) => void;
+
+    /**
+     * Close the spotlight component and opens Settings Drawer and shows
+     * onboarding.
+     *
+     * @returns {void}
+     */
+    _next() {
+        this.props.dispatch(openDrawer(SettingsDrawer));
+        this.props.dispatch(continueOnboarding());
+    }
+}
+
+export default connect()(SettingsDrawerSpotlight);
+
diff --git a/app/features/onboarding/components/StartMutedTogglesSpotlight.js b/app/features/onboarding/components/StartMutedTogglesSpotlight.js
new file mode 100644
index 0000000..aad9af5
--- /dev/null
+++ b/app/features/onboarding/components/StartMutedTogglesSpotlight.js
@@ -0,0 +1,78 @@
+// @flow
+
+import { Spotlight } from '@atlaskit/onboarding';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import { closeDrawer } from '../../navbar';
+
+import { continueOnboarding } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+};
+
+/**
+ * Start Muted Toggles Spotlight Component.
+ */
+class StartMutedTogglesSpotlight extends Component<Props, *> {
+    /**
+     * Initializes a new {@code StartMutedTogglesSpotlight} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._next = this._next.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Spotlight
+                actions = { [
+                    {
+                        onClick: this._next,
+                        text: 'Next'
+                    }
+                ] }
+                dialogPlacement = 'left top'
+                target = { 'start-muted-toggles' } >
+                You can toggle if you want to start with your audio or video
+                muted here. This will be applied to all conferences.
+            </Spotlight>
+        );
+    }
+
+    _next: (*) => void;
+
+    /**
+     * Close the spotlight component.
+     *
+     * @returns {void}
+     */
+    _next() {
+        const { dispatch } = this.props;
+
+        dispatch(continueOnboarding());
+
+        // FIXME: find a better way to do this.
+        setTimeout(() => {
+            dispatch(closeDrawer());
+        }, 300);
+    }
+}
+
+export default connect()(StartMutedTogglesSpotlight);
+
diff --git a/app/features/onboarding/components/index.js b/app/features/onboarding/components/index.js
new file mode 100644
index 0000000..8b3dded
--- /dev/null
+++ b/app/features/onboarding/components/index.js
@@ -0,0 +1,10 @@
+export { default as ConferenceURLSpotlight } from './ConferenceURLSpotlight';
+export { default as EmailSettingSpotlight } from './EmailSettingSpotlight';
+export { default as NameSettingSpotlight } from './NameSettingSpotlight';
+export { default as Onboarding } from './Onboarding';
+export { default as OnboardingModal } from './OnboardingModal';
+export { default as ServerSettingSpotlight } from './ServerSettingSpotlight';
+export { default as SettingsDrawerSpotlight } from './SettingsDrawerSpotlight';
+export {
+    default as StartMutedTogglesSpotlight
+} from './StartMutedTogglesSpotlight';
diff --git a/app/features/onboarding/constants.js b/app/features/onboarding/constants.js
new file mode 100644
index 0000000..34cb1ed
--- /dev/null
+++ b/app/features/onboarding/constants.js
@@ -0,0 +1,35 @@
+// @flow
+
+import {
+    OnboardingModal,
+    ConferenceURLSpotlight,
+    SettingsDrawerSpotlight,
+    NameSettingSpotlight,
+    EmailSettingSpotlight,
+    ServerSettingSpotlight,
+    StartMutedTogglesSpotlight
+} from './components';
+
+export const onboardingSteps = {
+    'welcome-page': [
+        'onboarding-modal',
+        'conference-url',
+        'settings-drawer-button'
+    ],
+    'settings-drawer': [
+        'name-setting',
+        'email-setting',
+        'server-setting',
+        'start-muted-toggles'
+    ]
+};
+
+export const onboardingComponents = {
+    'onboarding-modal': OnboardingModal,
+    'conference-url': ConferenceURLSpotlight,
+    'settings-drawer-button': SettingsDrawerSpotlight,
+    'name-setting': NameSettingSpotlight,
+    'email-setting': EmailSettingSpotlight,
+    'server-setting': ServerSettingSpotlight,
+    'start-muted-toggles': StartMutedTogglesSpotlight
+};
diff --git a/app/features/onboarding/index.js b/app/features/onboarding/index.js
new file mode 100644
index 0000000..8446bcd
--- /dev/null
+++ b/app/features/onboarding/index.js
@@ -0,0 +1,7 @@
+export * from './actions';
+export * from './actionTypes';
+export * from './components';
+export * from './constants';
+
+export { default as middleware } from './middleware';
+export { default as reducer } from './reducer';
diff --git a/app/features/onboarding/middleware.js b/app/features/onboarding/middleware.js
new file mode 100644
index 0000000..36ee2a2
--- /dev/null
+++ b/app/features/onboarding/middleware.js
@@ -0,0 +1,37 @@
+// @flow
+
+import { setActiveOnboarding } from './actions';
+import { CONTINUE_ONBOARDING, START_ONBOARDING } from './actionTypes';
+import { onboardingSteps } from './constants';
+
+export default (store: Object) => (next: Function) => (action: Object) => {
+    const result = next(action);
+    const state = store.getState();
+
+    switch (action.type) {
+    case CONTINUE_ONBOARDING: {
+        const section = state.onboarding.activeOnboardingSection;
+
+        const nextStep = onboardingSteps[section].find(
+            step => !state.onboarding.onboardingShown.includes(step)
+        );
+
+        store.dispatch(setActiveOnboarding(nextStep, nextStep && section));
+        break;
+    }
+
+    case START_ONBOARDING: {
+        const { section } = action;
+        const nextStep = onboardingSteps[section].find(
+            step => !state.onboarding.onboardingShown.includes(step)
+        );
+
+        if (nextStep) {
+            store.dispatch(setActiveOnboarding(nextStep, section));
+        }
+        break;
+    }
+    }
+
+    return result;
+};
diff --git a/app/features/onboarding/reducer.js b/app/features/onboarding/reducer.js
new file mode 100644
index 0000000..59904ce
--- /dev/null
+++ b/app/features/onboarding/reducer.js
@@ -0,0 +1,66 @@
+// @flow
+
+import {
+    CONTINUE_ONBOARDING,
+    SET_ACTIVE_ONBOARDING,
+    SKIP_ONBOARDING
+} from './actionTypes';
+import { onboardingSteps } from './constants';
+
+type State = {
+    activeOnboarding: ?string;
+    activeOnboardingSection: ?string;
+    onboardingShown: Array<string>;
+};
+
+const DEFAULT_STATE = {
+    activeOnboarding: undefined,
+    activeOnboardingSection: undefined,
+    onboardingShown: []
+};
+
+/**
+ * Reduces redux actions for features/onboarding.
+ *
+ * @param {State} state - Current reduced redux state.
+ * @param {Object} action - Action which was dispatched.
+ * @returns {State} - Updated reduced redux state.
+ */
+export default (state: State = DEFAULT_STATE, action: Object) => {
+    switch (action.type) {
+    case CONTINUE_ONBOARDING:
+        return {
+            ...state,
+            activeOnboarding: undefined,
+            onboardingShown:
+
+                // $FlowFixMe
+                state.onboardingShown.concat(state.activeOnboarding)
+        };
+
+    case SET_ACTIVE_ONBOARDING:
+        return {
+            ...state,
+            activeOnboarding: action.name,
+            activeOnboardingSection: action.section
+        };
+
+    case SKIP_ONBOARDING: {
+        // $FlowFixMe
+        const allSteps = [].concat(...Object.values(onboardingSteps));
+
+        return {
+            ...state,
+            activeOnboarding: undefined,
+            activeOnboardingSection: undefined,
+            onboardingShown:
+
+                // $FlowFixMe
+                state.onboardingShown.concat(allSteps)
+        };
+    }
+
+    default:
+        return state;
+    }
+};