path: root/webapp/utils/channel_intro_messages.jsx

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import * as Utils from './utils.jsx';
import ChannelInviteModal from 'components/channel_invite_modal';
import EditChannelHeaderModal from 'components/edit_channel_header_modal.jsx';
import ToggleModalButton from 'components/toggle_modal_button.jsx';
import UserProfile from 'components/user_profile.jsx';
import ChannelStore from 'stores/channel_store.jsx';
import UserStore from 'stores/user_store.jsx';
import TeamStore from 'stores/team_store.jsx';
import Constants from 'utils/constants.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
import ProfilePicture from 'components/profile_picture.jsx';

import {Client4} from 'mattermost-redux/client';

import {showManagementOptions} from './channel_utils.jsx';

import React from 'react';
import {FormattedMessage, FormattedHTMLMessage, FormattedDate} from 'react-intl';

export function createChannelIntroMessage(channel, fullWidthIntro) {
    let centeredIntro = '';
    if (!fullWidthIntro) {
        centeredIntro = 'channel-intro--centered';
    }

    if (channel.type === Constants.DM_CHANNEL) {
        return createDMIntroMessage(channel, centeredIntro);
    } else if (channel.type === Constants.GM_CHANNEL) {
        return createGMIntroMessage(channel, centeredIntro);
    } else if (ChannelStore.isDefault(channel)) {
        return createDefaultIntroMessage(channel, centeredIntro);
    } else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
        return createOffTopicIntroMessage(channel, centeredIntro);
    } else if (channel.type === 'O' || channel.type === 'P') {
        return createStandardIntroMessage(channel, centeredIntro);
    }
    return null;
}

export function createGMIntroMessage(channel, centeredIntro) {
    const profiles = UserStore.getProfileListInChannel(channel.id, true);

    if (profiles.length > 0) {
        const pictures = [];
        let names = '';
        for (let i = 0; i < profiles.length; i++) {
            const profile = profiles[i];

            pictures.push(
                <ProfilePicture
                    key={'introprofilepicture' + profile.id}
                    src={Client4.getUsersRoute() + '/' + profile.id + '/image?time=' + profile.last_picture_update}
                    width='50'
                    height='50'
                    user={profile}
                />
            );

            if (i === profiles.length - 1) {
                names += Utils.displayUsernameForUser(profile);
            } else if (i === profiles.length - 2) {
                names += Utils.displayUsernameForUser(profile) + ' and ';
            } else {
                names += Utils.displayUsernameForUser(profile) + ', ';
            }
        }

        return (
            <div className={'channel-intro ' + centeredIntro}>
                <div className='post-profile-img__container channel-intro-img'>
                    {pictures}
                </div>
                <p className='channel-intro-text'>
                    <FormattedHTMLMessage
                        id='intro_messages.GM'
                        defaultMessage='This is the start of your group message history with {names}.<br />Messages and files shared here are not shown to people outside this area.'
                        values={{
                            names
                        }}
                    />
                </p>
                {createSetHeaderButton(channel)}
            </div>
        );
    }

    return (
        <div className={'channel-intro ' + centeredIntro}>
            <p className='channel-intro-text'>
                <FormattedMessage
                    id='intro_messages.group_message'
                    defaultMessage='This is the start of your group message history with these teammates. Messages and files shared here are not shown to people outside this area.'
                />
            </p>
        </div>
    );
}

export function createDMIntroMessage(channel, centeredIntro) {
    var teammate = Utils.getDirectTeammate(channel.id);

    if (teammate) {
        var teammateName = teammate.username;
        if (teammate.nickname.length > 0) {
            teammateName = teammate.nickname;
        }

        return (
            <div className={'channel-intro ' + centeredIntro}>
                <div className='post-profile-img__container channel-intro-img'>
                    <ProfilePicture
                        src={Client4.getUsersRoute() + '/' + teammate.id + '/image?time=' + teammate.last_picture_update}
                        width='50'
                        height='50'
                        user={teammate}
                    />
                </div>
                <div className='channel-intro-profile'>
                    <strong>
                        <UserProfile
                            user={teammate}
                            disablePopover={false}
                        />
                    </strong>
                </div>
                <p className='channel-intro-text'>
                    <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>
        );
    }

    return (
        <div className={'channel-intro ' + centeredIntro}>
            <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>
    );
}

export function createOffTopicIntroMessage(channel, centeredIntro) {
    var uiType = (
        <FormattedMessage
            id='intro_messages.channel'
            defaultMessage='channel'
        />
    );

    const isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
    const isSystemAdmin = UserStore.isSystemAdminForCurrentUser();
    const isChannelAdmin = ChannelStore.isChannelAdminForCurrentChannel();

    let setHeaderButton = createSetHeaderButton(channel);
    if (!showManagementOptions(channel, isAdmin, isSystemAdmin, isChannelAdmin)) {
        setHeaderButton = null;
    }

    return (
        <div className={'channel-intro ' + centeredIntro}>
            <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
                }}
            />
            {createInviteChannelMemberButton(channel, uiType)}
            {setHeaderButton}
        </div>
    );
}

export function createDefaultIntroMessage(channel, centeredIntro) {
    let inviteModalLink = (
        <a
            className='intro-links'
            href='#'
            onClick={GlobalActions.showGetTeamInviteLinkModal}
        >
            <i className='fa fa-user-plus'/>
            <FormattedMessage
                id='intro_messages.inviteOthers'
                defaultMessage='Invite others to this team'
            />
        </a>
    );

    const isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
    const isSystemAdmin = UserStore.isSystemAdminForCurrentUser();
    const isChannelAdmin = ChannelStore.isChannelAdminForCurrentChannel();

    if (global.window.mm_license.IsLicensed === 'true') {
        if (global.window.mm_config.RestrictTeamInvite === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) {
            inviteModalLink = null;
        } else if (global.window.mm_config.RestrictTeamInvite === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) {
            inviteModalLink = null;
        }
    }

    let setHeaderButton = createSetHeaderButton(channel);
    if (!showManagementOptions(channel, isAdmin, isSystemAdmin, isChannelAdmin)) {
        setHeaderButton = null;
    }

    return (
        <div className={'channel-intro ' + centeredIntro}>
            <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}
            {setHeaderButton}
            <br/>
        </div>
    );
}

export function createStandardIntroMessage(channel, centeredIntro) {
    var uiName = channel.display_name;
    var creatorName = Utils.displayUsername(channel.creator_id);
    var uiType;
    var memberMessage;

    if (channel.type === 'P') {
        uiType = (
            <FormattedMessage
                id='intro_messages.group'
                defaultMessage='private channel'
            />
        );
        memberMessage = (
            <FormattedMessage
                id='intro_messages.onlyInvited'
                defaultMessage=' Only invited members can see this private channel.'
            />
        );
    } else {
        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 = (
            <FormattedMessage
                id='intro_messages.noCreator'
                defaultMessage='This is the start of the {name} {type}, created on {date}.'
                values={{
                    name: (uiName),
                    type: (uiType),
                    date
                }}
            />
        );
    } else {
        createMessage = (
            <span>
                <FormattedMessage
                    id='intro_messages.creator'
                    defaultMessage='This is the start of the {name} {type}, created by {creator} on {date}.'
                    values={{
                        name: (uiName),
                        type: (uiType),
                        creator: (creatorName),
                        date
                    }}
                />
            </span>
        );
    }

    var purposeMessage = '';
    if (channel.purpose && channel.purpose !== '') {
        purposeMessage = (
            <span>
                <FormattedMessage
                    id='intro_messages.purpose'
                    defaultMessage=" This {type}'s purpose is: {purpose}"
                    values={{
                        purpose: channel.purpose,
                        type: (uiType)
                    }}
                />
            </span>
        );
    }

    const isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
    const isSystemAdmin = UserStore.isSystemAdminForCurrentUser();
    const isChannelAdmin = ChannelStore.isChannelAdminForCurrentChannel();

    let setHeaderButton = createSetHeaderButton(channel);
    if (!showManagementOptions(channel, isAdmin, isSystemAdmin, isChannelAdmin)) {
        setHeaderButton = null;
    }

    return (
        <div className={'channel-intro ' + centeredIntro}>
            <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}
                {purposeMessage}
                <br/>
            </p>
            {createInviteChannelMemberButton(channel, uiType)}
            {setHeaderButton}
        </div>
    );
}

function createInviteChannelMemberButton(channel, uiType) {
    return (
        <ToggleModalButton
            className='intro-links'
            dialogType={ChannelInviteModal}
            dialogProps={{channel}}
        >
            <i className='fa fa-user-plus'/>
            <FormattedMessage
                id='intro_messages.invite'
                defaultMessage='Invite others to this {type}'
                values={{
                    type: (uiType)
                }}
            />
        </ToggleModalButton>
    );
}

function createSetHeaderButton(channel) {
    return (
        <ToggleModalButton
            className='intro-links'
            dialogType={EditChannelHeaderModal}
            dialogProps={{channel}}
        >
            <i className='fa fa-pencil'/>
            <FormattedMessage
                id='intro_messages.setHeader'
                defaultMessage='Set a Header'
            />
        </ToggleModalButton>
    );
}