summaryrefslogtreecommitdiffstats
path: root/web/react/utils/channel_intro_messages.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/utils/channel_intro_messages.jsx')
-rw-r--r--web/react/utils/channel_intro_messages.jsx146
1 files changed, 115 insertions, 31 deletions
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>
);
}