From a72ba140240266b03558dba716e6f4815392d491 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 28 Jan 2016 11:21:12 -0300
Subject: PLT-7: Refactoring frontend (chunk 3) - Tutorial components - Claim
 components - Suggestion components

---
 .../components/tutorial/tutorial_intro_screens.jsx | 65 +++++++++++++++++-----
 web/react/components/tutorial/tutorial_tip.jsx     | 25 ++++++++-
 2 files changed, 72 insertions(+), 18 deletions(-)

(limited to 'web/react/components/tutorial')

diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx
index 7ab1e5512..78cfb7b60 100644
--- a/web/react/components/tutorial/tutorial_intro_screens.jsx
+++ b/web/react/components/tutorial/tutorial_intro_screens.jsx
@@ -9,6 +9,9 @@ import * as Utils from '../../utils/utils.jsx';
 import * as AsyncClient from '../../utils/async_client.jsx';
 
 import Constants from '../../utils/constants.jsx';
+
+import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
+
 const Preferences = Constants.Preferences;
 
 const NUM_SCREENS = 3;
@@ -61,10 +64,13 @@ export default class TutorialIntroScreens extends React.Component {
 
         return (
             <div>
-                <h3>{'Welcome to:'}</h3>
-                <h1>{'Mattermost'}</h1>
-                <p>{'Your team communication all in one place, instantly searchable and available anywhere.'}</p>
-                <p>{'Keep your team connected to help them achieve what matters most.'}</p>
+                <FormattedHTMLMessage
+                    id='tutorial_intro.screenOne'
+                    defaultMessage='<h3>Welcome to:</h3>
+                    <h1>Mattermost</h1>
+                    <p>Your team communication all in one place, instantly searchable and available anywhere</p>
+                    <p>Keep your team connected to help them achieve what matters most.</p>'
+                />
                 {circles}
             </div>
         );
@@ -74,9 +80,12 @@ export default class TutorialIntroScreens extends React.Component {
 
         return (
             <div>
-                <h3>{'How Mattermost works:'}</h3>
-                <p>{'Communication happens in public discussion channels, private groups and direct messages.'}</p>
-                <p>{'Everything is archived and searchable from any web-enabled desktop, laptop or phone.'}</p>
+                <FormattedHTMLMessage
+                    id='tutorial_intro.screenTwo'
+                    defaultMessage='<h3>How Mattermost works:</h3>
+                    <p>Communication happens in public discussion channels, private groups and direct messages.</p>
+                    <p>Everything is archived and searchable from any web-enabled desktop, laptop or phone.</p>'
+                />
                 {circles}
             </div>
         );
@@ -92,7 +101,10 @@ export default class TutorialIntroScreens extends React.Component {
                     data-toggle='modal'
                     data-target='#invite_member'
                 >
-                    {'Invite teammates'}
+                    <FormattedMessage
+                        id='tutorial_intro.invite'
+                        defaultMessage='Invite teammates'
+                    />
                 </a>
             );
         } else {
@@ -105,7 +117,10 @@ export default class TutorialIntroScreens extends React.Component {
                     data-title='Team Invite'
                     data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + team.id}
                 >
-                    {'Invite teammates'}
+                    <FormattedMessage
+                        id='tutorial_intro.teamInvite'
+                        defaultMessage='Team Invite'
+                    />
                 </a>
             );
         }
@@ -116,7 +131,10 @@ export default class TutorialIntroScreens extends React.Component {
         if (global.window.mm_config.SupportEmail) {
             supportInfo = (
                 <p>
-                    {'Need anything, just email us at '}
+                    <FormattedMessage
+                        id='tutorial_intro.support'
+                        defaultMessage='Need anything, just email us at '
+                    />
                     <a
                         href={'mailto:' + global.window.mm_config.SupportEmail}
                         target='_blank'
@@ -130,13 +148,24 @@ export default class TutorialIntroScreens extends React.Component {
 
         return (
             <div>
-                <h3>{'You’re all set'}</h3>
+                <h3>
+                    <FormattedMessage
+                        id='tutorial_intro.allSet'
+                        defaultMessage='You’re all set'
+                    />
+                </h3>
                 <p>
                     {inviteModalLink}
-                    {' when you’re ready.'}
+                    <FormattedMessage
+                        id='tutorial_intro.whenReady'
+                        defaultMessage=' when you’re ready.'
+                    />
                 </p>
                 {supportInfo}
-                {'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.'}
+                <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.'
+                />
                 {circles}
             </div>
         );
@@ -186,14 +215,20 @@ export default class TutorialIntroScreens extends React.Component {
                                 tabIndex='1'
                                 onClick={this.handleNext}
                             >
-                                {'Next'}
+                                <FormattedMessage
+                                    id='tutorial_intro.next'
+                                    defaultMessage='Next'
+                                />
                             </button>
                             <a
                                 className='tutorial-skip'
                                 href='#'
                                 onClick={this.skipTutorial}
                             >
-                                {'Skip tutorial'}
+                                <FormattedMessage
+                                    id='tutorial_intro.skip'
+                                    defaultMessage='Skip tutorial'
+                                />
                             </a>
                         </div>
                     </div>
diff --git a/web/react/components/tutorial/tutorial_tip.jsx b/web/react/components/tutorial/tutorial_tip.jsx
index 03ecdabab..3bab7570a 100644
--- a/web/react/components/tutorial/tutorial_tip.jsx
+++ b/web/react/components/tutorial/tutorial_tip.jsx
@@ -6,6 +6,9 @@ import PreferenceStore from '../../stores/preference_store.jsx';
 import * as AsyncClient from '../../utils/async_client.jsx';
 
 import Constants from '../../utils/constants.jsx';
+
+import {FormattedMessage} from 'mm-intl';
+
 const Preferences = Constants.Preferences;
 
 const Overlay = ReactBootstrap.Overlay;
@@ -46,7 +49,17 @@ export default class TutorialTip extends React.Component {
         AsyncClient.savePreferences([preference]);
     }
     render() {
-        const buttonText = this.state.currentScreen === this.props.screens.length - 1 ? 'Okay' : 'Next';
+        const buttonText = this.state.currentScreen === this.props.screens.length - 1 ? (
+            <FormattedMessage
+                id='tutorial_tip.ok'
+                defaultMessage='Okay'
+            />
+        ) : (
+            <FormattedMessage
+                id='tutorial_tip.next'
+                defaultMessage='Next'
+            />
+        );
 
         const dots = [];
         if (this.props.screens.length > 1) {
@@ -111,12 +124,18 @@ export default class TutorialTip extends React.Component {
                                     {buttonText}
                                 </button>
                                 <div className='tip-opt'>
-                                    {'Seen this before? '}
+                                    <FormattedMessage
+                                        id='tutorial_tip.seen'
+                                        defaultMessage='Seen this before? '
+                                    />
                                     <a
                                         href='#'
                                         onClick={this.skipTutorial}
                                     >
-                                        {'Opt out of these tips.'}
+                                        <FormattedMessage
+                                            id='tutorial_tip.out'
+                                            defaultMessage='Opt out of these tips.'
+                                        />
                                     </a>
                                 </div>
                             </div>
-- 
cgit v1.2.3-1-g7c22