// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import UserStore from 'stores/user_store.jsx'; import TeamStore from 'stores/team_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; import {savePreference} from 'actions/user_actions.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; import {trackEvent} from 'actions/diagnostics_actions.jsx'; import {Constants, Preferences} from 'utils/constants.jsx'; import {FormattedMessage, FormattedHTMLMessage} from 'react-intl'; import {browserHistory} from 'react-router/es6'; import AppIcons from 'images/appIcons.png'; const NUM_SCREENS = 3; import PropTypes from 'prop-types'; import React from 'react'; export default class TutorialIntroScreens extends React.Component { static get propTypes() { return { townSquare: PropTypes.object, offTopic: PropTypes.object }; } constructor(props) { super(props); this.handleNext = this.handleNext.bind(this); this.createScreen = this.createScreen.bind(this); this.createCircles = this.createCircles.bind(this); this.skipTutorial = this.skipTutorial.bind(this); this.state = {currentScreen: 0}; } handleNext() { switch (this.state.currentScreen) { case 0: trackEvent('tutorial', 'tutorial_screen_1_welcome_to_mattermost_next'); break; case 1: trackEvent('tutorial', 'tutorial_screen_2_how_mattermost_works_next'); break; case 2: trackEvent('tutorial', 'tutorial_screen_3_youre_all_set_next'); break; } if (this.state.currentScreen < 2) { this.setState({currentScreen: this.state.currentScreen + 1}); return; } browserHistory.push(TeamStore.getCurrentTeamUrl() + '/channels/town-square'); const step = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 0); savePreference( Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), (step + 1).toString() ); } skipTutorial(e) { e.preventDefault(); switch (this.state.currentScreen) { case 0: trackEvent('tutorial', 'tutorial_screen_1_welcome_to_mattermost_skip'); break; case 1: trackEvent('tutorial', 'tutorial_screen_2_how_mattermost_works_skip'); break; case 2: trackEvent('tutorial', 'tutorial_screen_3_youre_all_set_skip'); break; } savePreference( Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), '999' ); browserHistory.push(TeamStore.getCurrentTeamUrl() + '/channels/town-square'); } createScreen() { switch (this.state.currentScreen) { case 0: return this.createScreenOne(); case 1: return this.createScreenTwo(); case 2: return this.createScreenThree(); } return null; } createScreenOne() { const circles = this.createCircles(); return (
{circles}
); } createScreenTwo() { const circles = this.createCircles(); let appDownloadLink = null; let appDownloadImage = null; if (global.window.mm_config.AppDownloadLink) { // not using a FormattedHTMLMessage here since mm_config.AppDownloadLink is configurable and could be used // to inject HTML if we're not careful appDownloadLink = ( ) }} /> ); appDownloadImage = ( ); } return (
{appDownloadLink} {appDownloadImage} {circles}
); } createScreenThree() { const team = TeamStore.getCurrent(); let inviteModalLink; let inviteText; if (global.window.mm_license.IsLicensed !== 'true' || global.window.mm_config.RestrictTeamInvite === Constants.PERMISSIONS_ALL) { if (team.type === Constants.INVITE_TEAM) { inviteModalLink = ( ); } else { inviteModalLink = ( ); } inviteText = (

{inviteModalLink}

); } const circles = this.createCircles(); let supportInfo = null; if (global.window.mm_config.SupportEmail) { supportInfo = (

{global.window.mm_config.SupportEmail} {'.'}

); } let townSquareDisplayName = Constants.DEFAULT_CHANNEL_UI_NAME; if (this.props.townSquare) { townSquareDisplayName = this.props.townSquare.display_name; } return (

{inviteText} {supportInfo} {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 screen = this.createScreen(); return (
{screen}
); } }