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.

---
 .../components/tutorial/tutorial_intro_screens.jsx | 150 +++++++++++++++++++++
 1 file changed, 150 insertions(+)
 create mode 100644 web/react/components/tutorial/tutorial_intro_screens.jsx

(limited to 'web/react/components/tutorial/tutorial_intro_screens.jsx')

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>
+        );
+    }
+}
-- 
cgit v1.2.3-1-g7c22