From 0e801a4e70f3d9c8e3cf929aa2f7ac201ca87b52 Mon Sep 17 00:00:00 2001
From: JoramWilander <jwawilander@gmail.com>
Date: Wed, 28 Oct 2015 15:04:17 -0400
Subject: Add tutorial intro screens for new users.

---
 web/react/components/navbar_dropdown.jsx           |   2 +-
 .../components/tutorial/tutorial_intro_screens.jsx | 150 +++++++++++++++++++++
 web/react/utils/constants.jsx                      |   2 +
 3 files changed, 153 insertions(+), 1 deletion(-)
 create mode 100644 web/react/components/tutorial/tutorial_intro_screens.jsx

(limited to 'web')

diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx
index dc21fad21..f43bdffdf 100644
--- a/web/react/components/navbar_dropdown.jsx
+++ b/web/react/components/navbar_dropdown.jsx
@@ -104,7 +104,7 @@ export default class NavbarDropdown extends React.Component {
                 </li>
             );
 
-            if (this.props.teamType === 'O') {
+            if (this.props.teamType === Constants.OPEN_TEAM) {
                 teamLink = (
                     <li>
                         <a
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>
+        );
+    }
+}
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 8884d1d10..57be5046e 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -315,6 +315,8 @@ module.exports = {
         CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',
         CATEGORY_DISPLAY_SETTINGS: 'display_settings',
         CATEGORY_ADVANCED_SETTINGS: 'advanced_settings'
+        TUTORIAL_INTRO_COMPLETE: 'tutorial_intro_complete',
+        TUTORIAL_POPOVERS: 'tutorial_popovers'
     },
     KeyCodes: {
         UP: 38,
-- 
cgit v1.2.3-1-g7c22