Update tutorial channel names to reflect actual display names

2 files changed, 43 insertions, 4 deletions

diff --git a/webapp/components/tutorial/tutorial_intro_screens.jsx b/webapp/components/tutorial/tutorial_intro_screens.jsx
index bad426cfc..0358a6a65 100644
--- a/webapp/components/tutorial/tutorial_intro_screens.jsx
+++ b/webapp/components/tutorial/tutorial_intro_screens.jsx
@@ -19,6 +19,12 @@ const NUM_SCREENS = 3;
 import React from 'react';
 
 export default class TutorialIntroScreens extends React.Component {
+    static get propTypes() {
+        return {
+            townSquare: React.PropTypes.object,
+            offTopic: React.PropTypes.object
+        };
+    }
     constructor(props) {
         super(props);
 
@@ -153,6 +159,11 @@ export default class TutorialIntroScreens extends React.Component {
             );
         }
 
+        let townSquareDisplayName = Constants.DEFAULT_CHANNEL_UI_NAME;
+        if (this.props.townSquare) {
+            townSquareDisplayName = this.props.townSquare.display_name;
+        }
+
         return (
             <div>
                 <h3>
@@ -171,7 +182,10 @@ export default class TutorialIntroScreens extends React.Component {
                 {supportInfo}
                 <FormattedMessage
                     id='tutorial_intro.end'
-                    defaultMessage='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.'
+                    defaultMessage='Click “Next” to enter {channel}. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.'
+                    values={{
+                        channel: townSquareDisplayName
+                    }}
                 />
                 {circles}
             </div>
diff --git a/webapp/components/tutorial/tutorial_view.jsx b/webapp/components/tutorial/tutorial_view.jsx
index d9e0ef40d..5f2c1a257 100644
--- a/webapp/components/tutorial/tutorial_view.jsx
+++ b/webapp/components/tutorial/tutorial_view.jsx
@@ -1,18 +1,43 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React from 'react';
-
 import TutorialIntroScreens from './tutorial_intro_screens.jsx';
 
+import ChannelStore from 'stores/channel_store.jsx';
+import Constants from 'utils/constants.jsx';
+
+import React from 'react';
+
 export default class TutorialView extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleChannelChange = this.handleChannelChange.bind(this);
+
+        this.state = {
+            townSquare: ChannelStore.getByName(Constants.DEFAULT_CHANNEL)
+        };
+    }
+    componentDidMount() {
+        ChannelStore.addChangeListener(this.handleChannelChange);
+    }
+    componentWillUnmount() {
+        ChannelStore.removeChangeListener(this.handleChannelChange);
+    }
+    handleChannelChange() {
+        this.setState({
+            townSquare: ChannelStore.getByName(Constants.DEFAULT_CHANNEL)
+        });
+    }
     render() {
         return (
             <div
                 id='app-content'
                 className='app__content'
             >
-                <TutorialIntroScreens/>
+                <TutorialIntroScreens
+                    townSquare={this.state.townSquare}
+                />
             </div>
         );
     }