From 6a3806fe9d03abdfa1eb30fc62c7388a6922b60f Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Wed, 3 Feb 2016 00:46:56 -0300
Subject: PLT-7: Refactoring frontend (chunk 11) - channel view - Added
 translations for previous commits - Fix bug on signup_team email body

---
 web/react/utils/channel_intro_messages.jsx | 146 +++++++++++++++++++++++------
 1 file changed, 115 insertions(+), 31 deletions(-)

(limited to 'web/react/utils/channel_intro_messages.jsx')

diff --git a/web/react/utils/channel_intro_messages.jsx b/web/react/utils/channel_intro_messages.jsx
index 9685f94b0..69e08f143 100644
--- a/web/react/utils/channel_intro_messages.jsx
+++ b/web/react/utils/channel_intro_messages.jsx
@@ -11,6 +11,8 @@ import Constants from '../utils/constants.jsx';
 import TeamStore from '../stores/team_store.jsx';
 import * as EventHelpers from '../dispatcher/event_helpers.jsx';
 
+import {FormattedMessage, FormattedHTMLMessage, FormattedDate} from 'mm-intl';
+
 export function createChannelIntroMessage(channel) {
     if (channel.type === 'D') {
         return createDMIntroMessage(channel);
@@ -48,8 +50,13 @@ export function createDMIntroMessage(channel) {
                     </strong>
                 </div>
                 <p className='channel-intro-text'>
-                    {'This is the start of your direct message history with ' + teammateName + '.'}<br/>
-                    {'Direct messages and files shared here are not shown to people outside this area.'}
+                    <FormattedHTMLMessage
+                        id='intro_messages.DM'
+                        defaultMessage='This is the start of your direct message history with {teammate}.<br />Direct messages and files shared here are not shown to people outside this area.'
+                        values={{
+                            teammate: teammateName
+                        }}
+                    />
                 </p>
                 {createSetHeaderButton(channel)}
             </div>
@@ -58,7 +65,12 @@ export function createDMIntroMessage(channel) {
 
     return (
         <div className='channel-intro'>
-            <p className='channel-intro-text'>{'This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.'}</p>
+            <p className='channel-intro-text'>
+                <FormattedMessage
+                    id='intro_messages.teammate'
+                    defaultMessage='This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.'
+                />
+            </p>
         </div>
     );
 }
@@ -66,11 +78,13 @@ export function createDMIntroMessage(channel) {
 export function createOffTopicIntroMessage(channel) {
     return (
         <div className='channel-intro'>
-            <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
-            <p className='channel-intro__content'>
-                {'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'}
-                <br/>
-            </p>
+            <FormattedHTMLMessage
+                id='intro_messages.offTopic'
+                defaultMessage='<h4 class="channel-intro__title">Beginning of {display_name}</h4><p class="channel-intro__content">This is the start of {display_name}, a channel for non-work-related conversations.<br/></p>'
+                values={{
+                    display_name: channel.display_name
+                }}
+            />
             {createSetHeaderButton(channel)}
             {createInviteChannelMemberButton(channel, 'channel')}
         </div>
@@ -87,7 +101,11 @@ export function createDefaultIntroMessage(channel) {
                 href='#'
                 onClick={EventHelpers.showInviteMemberModal}
             >
-                <i className='fa fa-user-plus'></i>{'Invite others to this team'}
+                <i className='fa fa-user-plus'></i>
+                <FormattedMessage
+                    id='intro_messages.inviteOthers'
+                    defaultMessage='Invite others to this team'
+                />
             </a>
         );
     } else {
@@ -97,19 +115,24 @@ export function createDefaultIntroMessage(channel) {
                 href='#'
                 onClick={EventHelpers.showGetTeamInviteLinkModal}
             >
-                <i className='fa fa-user-plus'></i>{'Invite others to this team'}
+                <i className='fa fa-user-plus'></i>
+                <FormattedMessage
+                    id='intro_messages.inviteOthers'
+                    defaultMessage='Invite others to this team'
+                />
             </a>
         );
     }
 
     return (
         <div className='channel-intro'>
-            <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
-            <p className='channel-intro__content'>
-                <strong>{'Welcome to ' + channel.display_name + '!'}</strong>
-                <br/><br/>
-                {'This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
-            </p>
+            <FormattedHTMLMessage
+                id='intro_messages.default'
+                defaultMessage="<h4 class='channel-intro__title'>Beginning of {display_name}</h4><p class='channel-intro__content'><strong>Welcome to {display_name}!'</strong><br/><br/>This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.</p>"
+                values={{
+                    display_name: channel.display_name
+                }}
+            />
             {inviteModalLink}
             {createSetHeaderButton(channel)}
             <br/>
@@ -124,33 +147,83 @@ export function createStandardIntroMessage(channel) {
     var uiType;
     var memberMessage;
     if (channel.type === 'P') {
-        uiType = 'private group';
-        memberMessage = ' Only invited members can see this private group.';
+        uiType = (
+            <FormattedMessage
+                id='intro_messages.group'
+                defaultMessage='private group'
+            />
+        );
+        memberMessage = (
+            <FormattedMessage
+                id='intro_messages.onlyInvited'
+                defaultMessage=' Only invited members can see this private group.'
+            />
+        );
     } else {
-        uiType = 'channel';
-        memberMessage = ' Any member can join and read this channel.';
+        uiType = (
+            <FormattedMessage
+                id='intro_messages.channel'
+                defaultMessage='channel'
+            />
+        );
+        memberMessage = (
+            <FormattedMessage
+                id='intro_messages.anyMember'
+                defaultMessage=' Any member can join and read this channel.'
+            />
+        );
     }
 
+    const date = (
+        <FormattedDate
+            value={channel.create_at}
+            month='long'
+            day='2-digit'
+            year='numeric'
+        />
+    );
+
     var createMessage;
     if (creatorName === '') {
-        createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + Utils.displayDate(channel.create_at) + '.';
+        createMessage = (
+            <FormattedMessage
+                id='intro_messages.noCreator'
+                defaultMessage='This is the start of the {name} {type}, created on {date}.'
+                values={{
+                    name: (uiName),
+                    type: (uiType),
+                    date: (date)
+                }}
+            />
+        );
     } else {
         createMessage = (
             <span>
-                {'This is the start of the '}
-                <strong>{uiName}</strong>
-                {' '}
-                {uiType}{', created by '}
-                <strong>{creatorName}</strong>
-                {' on '}
-                <strong>{Utils.displayDate(channel.create_at)}</strong>
+                <FormattedHTMLMessage
+                    id='intro_messages.creator'
+                    defaultMessage='This is the start of the <strong>{name}</strong> {type}, created by <strong>{creator}</strong> on <strong>{date}</strong>'
+                    values={{
+                        name: (uiName),
+                        type: (uiType),
+                        date: (date),
+                        creator: creatorName
+                    }}
+                />
             </span>
         );
     }
 
     return (
         <div className='channel-intro'>
-            <h4 className='channel-intro__title'>{'Beginning of ' + uiName}</h4>
+            <h4 className='channel-intro__title'>
+                <FormattedMessage
+                    id='intro_messages.beginning'
+                    defaultMessage='Beginning of {name}'
+                    values={{
+                        name: (uiName)
+                    }}
+                />
+            </h4>
             <p className='channel-intro__content'>
                 {createMessage}
                 {memberMessage}
@@ -169,7 +242,14 @@ function createInviteChannelMemberButton(channel, uiType) {
             dialogType={ChannelInviteModal}
             dialogProps={{channel}}
         >
-            <i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType}
+            <i className='fa fa-user-plus'></i>
+            <FormattedMessage
+                id='intro_messages.invite'
+                defaultMessage='Invite others to this {type}'
+                values={{
+                    type: (uiType)
+                }}
+            />
         </ToggleModalButton>
     );
 }
@@ -181,7 +261,11 @@ function createSetHeaderButton(channel) {
             dialogType={EditChannelHeaderModal}
             dialogProps={{channel}}
         >
-            <i className='fa fa-pencil'></i>{'Set a header'}
+            <i className='fa fa-pencil'></i>
+            <FormattedMessage
+                id='intro_messages.setHeader'
+                defaultMessage='Set a Header'
+            />
         </ToggleModalButton>
     );
 }
-- 
cgit v1.2.3-1-g7c22