diff options
Diffstat (limited to 'web/react/components/tutorial')
-rw-r--r-- | web/react/components/tutorial/tutorial_intro_screens.jsx | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx new file mode 100644 index 000000000..d7568e4cd --- /dev/null +++ b/web/react/components/tutorial/tutorial_intro_screens.jsx @@ -0,0 +1,150 @@ +// 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; + +export default class TutorialIntroScreens extends React.Component { + constructor(props) { + super(props); + + this.handleNext = this.handleNext.bind(this); + this.createScreen = this.createScreen.bind(this); + + this.state = {screen: 0}; + } + handleNext() { + if (this.state.screen < 2) { + this.setState({screen: this.state.screen + 1}); + return; + } + + Utils.switchChannel(ChannelStore.getByName(Constants.DEFAULT_CHANNEL)); + + const preference = PreferenceStore.setPreference(Preferences.TUTORIAL_INTRO_COMPLETE, UserStore.getCurrentId(), 'true'); + AsyncClient.savePreferences([preference]); + } + createScreen() { + switch (this.state.screen) { + case 0: + return this.createScreenOne(); + case 1: + return this.createScreenTwo(); + case 2: + return this.createScreenThree(); + } + } + createScreenOne() { + return ( + <div> + <h4><strong>{'Welcome to:'}</strong></h4> + <h2><strong>{'Mattermost'}</strong></h2> + <br/> + {'Your team communications all in one place,'} + <br/> + {'instantly searchable and available anywhere.'} + <br/><br/> + {'Keep your team connected to help them'} + <br/> + {'achieve what matters most.'} + <br/><br/> + <span>{'[ x ][ ][ ]'}</span> + </div> + ); + } + createScreenTwo() { + return ( + <div> + <h4><strong>{'How Mattermost works:'}</strong></h4> + <br/> + {'Communication happens in public discussion channels,'} + <br/> + {'private groups and direct messages.'} + <br/><br/> + {'Everything is archived and searchable from'} + <br/> + {'any web-enabled laptop, tablet or phone.'} + <br/><br/> + <span>{'[ ][ x ][ ]'}</span> + </div> + ); + } + createScreenThree() { + const team = TeamStore.getCurrent(); + let inviteModalLink; + if (team.type === Constants.INVITE_TEAM) { + inviteModalLink = ( + <a + className='intro-links' + href='#' + data-toggle='modal' + data-target='#invite_member' + > + {'Invite teammates'} + </a> + ); + } else { + inviteModalLink = ( + <a + className='intro-links' + href='#' + data-toggle='modal' + data-target='#get_link' + data-title='Team Invite' + data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + team.id} + > + {'Invite teammates'} + </a> + ); + } + + return ( + <div> + <h4><strong>{'You’re all set'}</strong></h4> + <br/> + {inviteModalLink} + {' when you’re ready.'} + <br/><br/> + {'Need anything, just email us at '} + <a + href='mailto:feedback@mattermost.com' + target='_blank' + > + {'feedback@mattermost.com.'} + </a> + <br/><br/> + {'Click “Next” to enter Town Square. This is the first channel'} + <br/> + {'teammates see when they sign up - use it for posting updates'} + <br/> + {'everyone needs to know.'} + <br/><br/> + <span>{'[ ][ ][ x ]'}</span> + </div> + ); + } + render() { + const screen = this.createScreen(); + + return ( + <div> + {screen} + <br/><br/> + <button + className='btn btn-primary' + tabIndex='1' + onClick={this.handleNext} + > + {'Next'} + </button> + </div> + ); + } +} |