// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. const UserStore = require('../../stores/user_store.jsx'); const ChannelStore = require('../../stores/channel_store.jsx'); const TeamStore = require('../../stores/team_store.jsx'); const PreferenceStore = require('../../stores/preference_store.jsx'); const Utils = require('../../utils/utils.jsx'); const AsyncClient = require('../../utils/async_client.jsx'); const Constants = require('../../utils/constants.jsx'); const Preferences = Constants.Preferences; const NUM_SCREENS = 3; export default class TutorialIntroScreens extends React.Component { constructor(props) { super(props); this.handleNext = this.handleNext.bind(this); this.createScreen = this.createScreen.bind(this); this.createCircles = this.createCircles.bind(this); this.state = {currentScreen: 0}; } handleNext() { if (this.state.currentScreen < 2) { this.setState({currentScreen: this.state.currentScreen + 1}); return; } Utils.switchChannel(ChannelStore.getByName(Constants.DEFAULT_CHANNEL)); let preference = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '0'}); const newValue = (parseInt(preference.value, 10) + 1).toString(); preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), newValue); AsyncClient.savePreferences([preference]); } componentDidMount() { $('.tutorials__scroll').perfectScrollbar(); } skipTutorial(e) { e.preventDefault(); const preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), '999'); AsyncClient.savePreferences([preference]); } createScreen() { switch (this.state.currentScreen) { case 0: return this.createScreenOne(); case 1: return this.createScreenTwo(); case 2: return this.createScreenThree(); } } createScreenOne() { const circles = this.createCircles(); return (

{'Welcome to:'}

{'Mattermost'}

{'Your team communication all in one place, instantly searchable and available anywhere.'}

{'Keep your team connected to help them achieve what matters most.'}

{circles}
); } createScreenTwo() { const circles = this.createCircles(); return (

{'How Mattermost works:'}

{'Communication happens in public discussion channels, private groups and direct messages.'}

{'Everything is archived and searchable from any web-enabled desktop, laptop or phone.'}

{circles}
); } createScreenThree() { const team = TeamStore.getCurrent(); let inviteModalLink; if (team.type === Constants.INVITE_TEAM) { inviteModalLink = ( {'Invite teammates'} ); } else { inviteModalLink = ( ); } const circles = this.createCircles(); return (

{'You’re all set'}

{inviteModalLink} {' when you’re ready.'}

{'Need anything, just email us at '} {'feedback@mattermost.com'} {'.'}

{'Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.'} {circles}
); } createCircles() { const circles = []; for (let i = 0; i < NUM_SCREENS; i++) { let className = 'circle'; if (i === this.state.currentScreen) { className += ' active'; } circles.push( { //eslint-disable-line no-loop-func e.preventDefault(); this.setState({currentScreen: i}); }} /> ); } return (
{circles}
); } render() { const height = Utils.windowHeight() - 100; const screen = this.createScreen(); return (
{screen} {'Skip tutorial'}
); } }