From da3e6b47802e45397999802910fc1bfd850231e0 Mon Sep 17 00:00:00 2001 From: akshitkrnagpal Date: Mon, 30 Jul 2018 07:25:57 +0530 Subject: [PATCH] Added onboarding --- app/features/onboarding/actionTypes.js | 39 ++++++ app/features/onboarding/actions.js | 70 ++++++++++ .../components/ConferenceURLSpotlight.js | 70 ++++++++++ .../components/EmailSettingSpotlight.js | 69 ++++++++++ .../components/NameSettingSpotlight.js | 69 ++++++++++ .../onboarding/components/Onboarding.js | 66 +++++++++ .../onboarding/components/OnboardingModal.js | 89 ++++++++++++ .../components/ServerSettingSpotlight.js | 69 ++++++++++ .../components/SettingsDrawerSpotlight.js | 68 ++++++++++ .../components/StartMutedTogglesSpotlight.js | 78 +++++++++++ app/features/onboarding/components/index.js | 10 ++ app/features/onboarding/constants.js | 35 +++++ app/features/onboarding/index.js | 7 + app/features/onboarding/middleware.js | 37 +++++ app/features/onboarding/reducer.js | 66 +++++++++ app/features/redux/middleware.js | 2 + app/features/redux/reducers.js | 2 + app/features/redux/store.js | 1 + .../settings/components/SettingsButton.js | 8 +- .../settings/components/SettingsDrawer.js | 70 +++++++--- app/features/welcome/components/Welcome.js | 36 +++-- app/images/onboarding.png | Bin 0 -> 5935 bytes app/index.js | 6 +- package-lock.json | 127 +++++++++++++++--- package.json | 2 + webpack.config.js | 4 + 26 files changed, 1048 insertions(+), 52 deletions(-) create mode 100644 app/features/onboarding/actionTypes.js create mode 100644 app/features/onboarding/actions.js create mode 100644 app/features/onboarding/components/ConferenceURLSpotlight.js create mode 100644 app/features/onboarding/components/EmailSettingSpotlight.js create mode 100644 app/features/onboarding/components/NameSettingSpotlight.js create mode 100644 app/features/onboarding/components/Onboarding.js create mode 100644 app/features/onboarding/components/OnboardingModal.js create mode 100644 app/features/onboarding/components/ServerSettingSpotlight.js create mode 100644 app/features/onboarding/components/SettingsDrawerSpotlight.js create mode 100644 app/features/onboarding/components/StartMutedTogglesSpotlight.js create mode 100644 app/features/onboarding/components/index.js create mode 100644 app/features/onboarding/constants.js create mode 100644 app/features/onboarding/index.js create mode 100644 app/features/onboarding/middleware.js create mode 100644 app/features/onboarding/reducer.js create mode 100644 app/images/onboarding.png 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 { + /** + * 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 ( + + 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. + + ); + } + + _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 { + /** + * 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 ( + + 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 . + + ); + } + + _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 { + /** + * 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 ( + + This will be your display name, others will see you with this + name. + + ); + } + + _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 { + /** + * 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 ; + } + + 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 { + /** + * 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 ( + +

Let us show you around!

+ + ); + } + + _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 { + /** + * 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 ( + + This will be the server where your conferences will take place. + You can use your own, but you don't need to! + + ); + } + + _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 { + /** + * 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 ( + + Click here to open the settings drawer. + + ); + } + + _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 { + /** + * 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 ( + + You can toggle if you want to start with your audio or video + muted here. This will be applied to all conferences. + + ); + } + + _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; +}; + +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; + } +}; diff --git a/app/features/redux/middleware.js b/app/features/redux/middleware.js index 9938da5..86d7acc 100644 --- a/app/features/redux/middleware.js +++ b/app/features/redux/middleware.js @@ -3,10 +3,12 @@ import { applyMiddleware } from 'redux'; import { createLogger } from 'redux-logger'; +import { middleware as onboardingMiddleware } from '../onboarding'; import { middleware as routerMiddleware } from '../router'; import { middleware as settingsMiddleware } from '../settings'; export default applyMiddleware( + onboardingMiddleware, routerMiddleware, settingsMiddleware, createLogger() diff --git a/app/features/redux/reducers.js b/app/features/redux/reducers.js index 2f532e6..d72eb54 100644 --- a/app/features/redux/reducers.js +++ b/app/features/redux/reducers.js @@ -3,12 +3,14 @@ import { combineReducers } from 'redux'; import { reducer as navbarReducer } from '../navbar'; +import { reducer as onboardingReducer } from '../onboarding'; import { reducer as recentListReducer } from '../recent-list'; import { reducer as routerReducer } from '../router'; import { reducer as settingsReducer } from '../settings'; export default combineReducers({ navbar: navbarReducer, + onboarding: onboardingReducer, recentList: recentListReducer, router: routerReducer, settings: settingsReducer diff --git a/app/features/redux/store.js b/app/features/redux/store.js index 472cdbd..b9469b9 100644 --- a/app/features/redux/store.js +++ b/app/features/redux/store.js @@ -11,6 +11,7 @@ const persistConfig = { key: 'root', storage: createElectronStorage(), whitelist: [ + 'onboarding', 'recentList', 'settings' ] diff --git a/app/features/settings/components/SettingsButton.js b/app/features/settings/components/SettingsButton.js index bb0115c..bd80f92 100644 --- a/app/features/settings/components/SettingsButton.js +++ b/app/features/settings/components/SettingsButton.js @@ -1,6 +1,7 @@ // @flow import SettingsIcon from '@atlaskit/icon/glyph/settings'; +import { SpotlightTarget } from '@atlaskit/onboarding'; import * as Mousetrap from 'mousetrap'; import 'mousetrap/plugins/global-bind/mousetrap-global-bind'; @@ -66,8 +67,11 @@ class SettingsButton extends Component { */ render() { return ( - + + + ); } diff --git a/app/features/settings/components/SettingsDrawer.js b/app/features/settings/components/SettingsDrawer.js index 7990e65..6ecf7eb 100644 --- a/app/features/settings/components/SettingsDrawer.js +++ b/app/features/settings/components/SettingsDrawer.js @@ -4,12 +4,14 @@ import Avatar from '@atlaskit/avatar'; import FieldText from '@atlaskit/field-text'; import ArrowLeft from '@atlaskit/icon/glyph/arrow-left'; import { AkCustomDrawer } from '@atlaskit/navigation'; +import { SpotlightTarget } from '@atlaskit/onboarding'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import type { Dispatch } from 'redux'; import { closeDrawer, DrawerContainer, Logo } from '../../navbar'; +import { Onboarding, startOnboarding } from '../../onboarding'; import { AvatarContainer, SettingsContainer } from '../styled'; import { setEmail, setName } from '../actions'; @@ -63,6 +65,25 @@ class SettingsDrawer extends Component { this._onNameFormSubmit = this._onNameFormSubmit.bind(this); } + /** + * Start Onboarding once component is mounted. + * + * NOTE: It automatically checks if the onboarding is shown or not. + * + * @param {Props} prevProps - Props before component updated. + * @returns {void} + */ + componentDidUpdate(prevProps: Props) { + if (!prevProps.isOpen && this.props.isOpen) { + + // TODO - Find a better way for this. + // Delay for 300ms to let drawer open. + setTimeout(() => { + this.props.dispatch(startOnboarding('settings-drawer')); + }, 300); + } + } + /** * Render function of component. * @@ -82,24 +103,37 @@ class SettingsDrawer extends Component { size = 'xlarge' src = { this.props._avatarURL } /> -
- - -
- - - - + +
+ + +
+ +
+ + +
+ + + + + + + diff --git a/app/features/welcome/components/Welcome.js b/app/features/welcome/components/Welcome.js index 519016d..c9a35f8 100644 --- a/app/features/welcome/components/Welcome.js +++ b/app/features/welcome/components/Welcome.js @@ -2,6 +2,7 @@ import Button from '@atlaskit/button'; import { FieldTextStateless } from '@atlaskit/field-text'; +import { SpotlightTarget } from '@atlaskit/onboarding'; import Page from '@atlaskit/page'; import { AtlasKitThemeProvider } from '@atlaskit/theme'; @@ -11,6 +12,7 @@ import { connect } from 'react-redux'; import { push } from 'react-router-redux'; import { Navbar } from '../../navbar'; +import { Onboarding, startOnboarding } from '../../onboarding'; import { RecentList } from '../../recent-list'; import { normalizeServerURL } from '../../utils'; @@ -71,6 +73,17 @@ class Welcome extends Component { this._onJoin = this._onJoin.bind(this); } + /** + * Start Onboarding once component is mounted. + * + * NOTE: It autonatically checks if the onboarding is shown or not. + * + * @returns {void} + */ + componentDidMount() { + this.props.dispatch(startOnboarding('welcome-page')); + } + /** * Render function of component. * @@ -84,16 +97,18 @@ class Welcome extends Component {
-
- - + +
+ + +