PLT-3193 Add channel notification preferences for push notifications (#5512)

* PLT-3193 Add channel notification preferences for push and email notifications * Fixing UI * Removing email as preferences from the UI for now * move to action * fix client test
2017-02-27 17:55:12 -03:00
--- a/webapp/actions/channel_actions.jsx
+++ b/webapp/actions/channel_actions.jsx
@@ -316,9 +316,13 @@ export function autocompleteChannels(term, success, error) {
    );
 }

-export function updateChannelNotifyProps(data, success, error) {
-    Client.updateChannelNotifyProps(data,
+export function updateChannelNotifyProps(data, options, success, error) {
+    Client.updateChannelNotifyProps(Object.assign({}, data, options),
        () => {
+            const member = ChannelStore.getMyMember(data.channel_id);
+            member.notify_props = Object.assign(member.notify_props, options);
+            ChannelStore.storeMyChannelMember(member);
+
            if (success) {
                success();
            }
--- a/webapp/components/channel_notifications_modal.jsx
+++ b/webapp/components/channel_notifications_modal.jsx
@@ -4,8 +4,6 @@
 import SettingItemMin from 'components/setting_item_min.jsx';
 import SettingItemMax from 'components/setting_item_max.jsx';

-import ChannelStore from 'stores/channel_store.jsx';
-
 import $ from 'jquery';
 import React from 'react';
 import {Modal} from 'react-bootstrap';
@@ -20,19 +18,24 @@ export default class ChannelNotificationsModal extends React.Component {
        this.updateSection = this.updateSection.bind(this);
        this.onHide = this.onHide.bind(this);

-        this.handleSubmitNotifyLevel = this.handleSubmitNotifyLevel.bind(this);
-        this.handleUpdateNotifyLevel = this.handleUpdateNotifyLevel.bind(this);
-        this.createNotifyLevelSection = this.createNotifyLevelSection.bind(this);
+        this.handleSubmitDesktopNotifyLevel = this.handleSubmitDesktopNotifyLevel.bind(this);
+        this.handleUpdateDesktopNotifyLevel = this.handleUpdateDesktopNotifyLevel.bind(this);
+        this.createDesktopNotifyLevelSection = this.createDesktopNotifyLevelSection.bind(this);

        this.handleSubmitMarkUnreadLevel = this.handleSubmitMarkUnreadLevel.bind(this);
        this.handleUpdateMarkUnreadLevel = this.handleUpdateMarkUnreadLevel.bind(this);
        this.createMarkUnreadLevelSection = this.createMarkUnreadLevelSection.bind(this);

+        this.handleSubmitPushNotificationLevel = this.handleSubmitPushNotificationLevel.bind(this);
+        this.handleUpdatePushNotificationLevel = this.handleUpdatePushNotificationLevel.bind(this);
+        this.createPushNotificationLevelSection = this.createPushNotificationLevelSection.bind(this);
+
        this.state = {
            activeSection: '',
            show: true,
            notifyLevel: props.channelMember.notify_props.desktop,
-            unreadLevel: props.channelMember.notify_props.mark_unread
+            unreadLevel: props.channelMember.notify_props.mark_unread,
+            pushLevel: props.channelMember.notify_props.push || 'default'
        };
    }

@@ -47,7 +50,7 @@ export default class ChannelNotificationsModal extends React.Component {
        this.setState({show: false});
    }

-    handleSubmitNotifyLevel() {
+    handleSubmitDesktopNotifyLevel() {
        const channelId = this.props.channel.id;
        const notifyLevel = this.state.notifyLevel;
        const currentUserId = this.props.currentUser.id;
@@ -57,19 +60,14 @@ export default class ChannelNotificationsModal extends React.Component {
            return;
        }

+        const options = {desktop: notifyLevel};
        const data = {
            channel_id: channelId,
-            user_id: currentUserId,
-            desktop: notifyLevel
+            user_id: currentUserId
        };

-        updateChannelNotifyProps(data,
+        updateChannelNotifyProps(data, options,
            () => {
-                // YUCK
-                var member = ChannelStore.getMyMember(channelId);
-                member.notify_props.desktop = notifyLevel;
-                ChannelStore.storeMyChannelMember(member);
-
                this.updateSection('');
            },
            (err) => {
@@ -78,11 +76,11 @@ export default class ChannelNotificationsModal extends React.Component {
        );
    }

-    handleUpdateNotifyLevel(notifyLevel) {
+    handleUpdateDesktopNotifyLevel(notifyLevel) {
        this.setState({notifyLevel});
    }

-    createNotifyLevelSection(serverError) {
+    createDesktopNotifyLevelSection(serverError) {
        // Get glabal user setting for notifications
        const globalNotifyLevel = this.props.currentUser.notify_props ? this.props.currentUser.notify_props.desktop : 'all';
        let globalNotifyLevelName;
@@ -140,7 +138,7 @@ export default class ChannelNotificationsModal extends React.Component {
                                type='radio'
                                name='desktopNotificationLevel'
                                checked={notifyActive[0]}
-                                onChange={this.handleUpdateNotifyLevel.bind(this, 'default')}
+                                onChange={this.handleUpdateDesktopNotifyLevel.bind(this, 'default')}
                            />
                            <FormattedMessage
                                id='channel_notifications.globalDefault'
@@ -158,7 +156,7 @@ export default class ChannelNotificationsModal extends React.Component {
                                type='radio'
                                name='desktopNotificationLevel'
                                checked={notifyActive[1]}
-                                onChange={this.handleUpdateNotifyLevel.bind(this, 'all')}
+                                onChange={this.handleUpdateDesktopNotifyLevel.bind(this, 'all')}
                            />
                            <FormattedMessage id='channel_notifications.allActivity'/>
                        </label>
@@ -170,7 +168,7 @@ export default class ChannelNotificationsModal extends React.Component {
                                type='radio'
                                name='desktopNotificationLevel'
                                checked={notifyActive[2]}
-                                onChange={this.handleUpdateNotifyLevel.bind(this, 'mention')}
+                                onChange={this.handleUpdateDesktopNotifyLevel.bind(this, 'mention')}
                            />
                            <FormattedMessage id='channel_notifications.onlyMentions'/>
                        </label>
@@ -182,7 +180,7 @@ export default class ChannelNotificationsModal extends React.Component {
                                type='radio'
                                name='desktopNotificationLevel'
                                checked={notifyActive[3]}
-                                onChange={this.handleUpdateNotifyLevel.bind(this, 'none')}
+                                onChange={this.handleUpdateDesktopNotifyLevel.bind(this, 'none')}
                            />
                            <FormattedMessage id='channel_notifications.never'/>
                        </label>
@@ -208,7 +206,7 @@ export default class ChannelNotificationsModal extends React.Component {
                <SettingItemMax
                    title={sendDesktop}
                    inputs={inputs}
-                    submit={this.handleSubmitNotifyLevel}
+                    submit={this.handleSubmitDesktopNotifyLevel}
                    server_error={serverError}
                    updateSection={handleUpdateSection}
                    extraInfo={extraInfo}
@@ -254,18 +252,14 @@ export default class ChannelNotificationsModal extends React.Component {
            return;
        }

+        const options = {mark_unread: markUnreadLevel};
        const data = {
            channel_id: channelId,
-            user_id: this.props.currentUser.id,
-            mark_unread: markUnreadLevel
+            user_id: this.props.currentUser.id
        };

-        updateChannelNotifyProps(data,
+        updateChannelNotifyProps(data, options,
            () => {
-                // Yuck...
-                var member = ChannelStore.getMyMember(channelId);
-                member.notify_props.mark_unread = markUnreadLevel;
-                ChannelStore.storeMyChannelMember(member);
                this.updateSection('');
            },
            (err) => {
@@ -375,8 +369,213 @@ export default class ChannelNotificationsModal extends React.Component {
        return content;
    }

+    handleSubmitPushNotificationLevel() {
+        const channelId = this.props.channel.id;
+        const notifyLevel = this.state.pushLevel;
+        const currentUserId = this.props.currentUser.id;
+
+        if (this.props.channelMember.notify_props.push === notifyLevel) {
+            this.updateSection('');
+            return;
+        }
+
+        const options = {push: notifyLevel};
+        const data = {
+            channel_id: channelId,
+            user_id: currentUserId
+        };
+
+        updateChannelNotifyProps(data, options,
+            () => {
+                this.updateSection('');
+            },
+            (err) => {
+                this.setState({serverError: err.message});
+            }
+        );
+    }
+
+    handleUpdatePushNotificationLevel(pushLevel) {
+        this.setState({pushLevel});
+    }
+
+    createPushNotificationLevelSection(serverError) {
+        if (global.mm_config.SendPushNotifications === 'false') {
+            return null;
+        }
+
+        // Get glabal user setting for notifications
+        const globalNotifyLevel = this.props.currentUser.notify_props ? this.props.currentUser.notify_props.push : 'all';
+        let globalNotifyLevelName;
+        if (globalNotifyLevel === 'all') {
+            globalNotifyLevelName = (
+                <FormattedMessage
+                    id='channel_notifications.allActivity'
+                    defaultMessage='For all activity'
+                />
+            );
+        } else if (globalNotifyLevel === 'mention') {
+            globalNotifyLevelName = (
+                <FormattedMessage
+                    id='channel_notifications.onlyMentions'
+                    defaultMessage='Only for mentions'
+                />
+            );
+        } else {
+            globalNotifyLevelName = (
+                <FormattedMessage
+                    id='channel_notifications.never'
+                    defaultMessage='Never'
+                />
+            );
+        }
+
+        const sendPushNotifications = (
+            <FormattedMessage
+                id='channel_notifications.push'
+                defaultMessage='Send mobile push notifications'
+            />
+        );
+
+        const notificationLevel = this.state.pushLevel;
+
+        let content;
+        if (this.state.activeSection === 'push') {
+            const notifyActive = [false, false, false, false];
+            if (notificationLevel === 'default') {
+                notifyActive[0] = true;
+            } else if (notificationLevel === 'all') {
+                notifyActive[1] = true;
+            } else if (notificationLevel === 'mention') {
+                notifyActive[2] = true;
+            } else {
+                notifyActive[3] = true;
+            }
+
+            const inputs = [];
+
+            inputs.push(
+                <div key='channel-notification-level-radio'>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                name='pushNotificationLevel'
+                                checked={notifyActive[0]}
+                                onChange={this.handleUpdatePushNotificationLevel.bind(this, 'default')}
+                            />
+                            <FormattedMessage
+                                id='channel_notifications.globalDefault'
+                                defaultMessage='Global default ({notifyLevel})'
+                                values={{
+                                    notifyLevel: (globalNotifyLevelName)
+                                }}
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                name='pushNotificationLevel'
+                                checked={notifyActive[1]}
+                                onChange={this.handleUpdatePushNotificationLevel.bind(this, 'all')}
+                            />
+                            <FormattedMessage id='channel_notifications.allActivity'/>
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                name='pushNotificationLevel'
+                                checked={notifyActive[2]}
+                                onChange={this.handleUpdatePushNotificationLevel.bind(this, 'mention')}
+                            />
+                            <FormattedMessage id='channel_notifications.onlyMentions'/>
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                name='pushNotificationLevel'
+                                checked={notifyActive[3]}
+                                onChange={this.handleUpdatePushNotificationLevel.bind(this, 'none')}
+                            />
+                            <FormattedMessage id='channel_notifications.never'/>
+                        </label>
+                    </div>
+                </div>
+            );
+
+            const handleUpdateSection = function updateSection(e) {
+                this.updateSection('');
+                e.preventDefault();
+            }.bind(this);
+
+            const extraInfo = (
+                <span>
+                    <FormattedMessage
+                        id='channel_notifications.overridePush'
+                        defaultMessage='Selecting an option other than "Global default" will override the global notification settings for mobile push notifications in account settings. Push notifications must be enabled by the System Admin.'
+                    />
+                </span>
+            );
+
+            content = (
+                <SettingItemMax
+                    title={sendPushNotifications}
+                    inputs={inputs}
+                    submit={this.handleSubmitPushNotificationLevel}
+                    server_error={serverError}
+                    updateSection={handleUpdateSection}
+                    extraInfo={extraInfo}
+                />
+            );
+        } else {
+            let describe;
+            if (notificationLevel === 'default') {
+                describe = (
+                    <FormattedMessage
+                        id='channel_notifications.globalDefault'
+                        values={{
+                            notifyLevel: (globalNotifyLevelName)
+                        }}
+                    />
+                );
+            } else if (notificationLevel === 'mention') {
+                describe = (<FormattedMessage id='channel_notifications.onlyMentions'/>);
+            } else if (notificationLevel === 'all') {
+                describe = (<FormattedMessage id='channel_notifications.allActivity'/>);
+            } else {
+                describe = (<FormattedMessage id='channel_notifications.never'/>);
+            }
+
+            content = (
+                <SettingItemMin
+                    title={sendPushNotifications}
+                    describe={describe}
+                    updateSection={() => {
+                        this.updateSection('push');
+                    }}
+                />
+            );
+        }
+
+        return (
+            <div>
+                <div className='divider-light'/>
+                {content}
+            </div>
+        );
+    }
+
    render() {
-        var serverError = null;
+        let serverError = null;
        if (this.state.serverError) {
            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
        }
@@ -406,7 +605,8 @@ export default class ChannelNotificationsModal extends React.Component {
                            >
                                <br/>
                                <div className='divider-dark first'/>
-                                {this.createNotifyLevelSection(serverError)}
+                                {this.createDesktopNotifyLevelSection(serverError)}
+                                {this.createPushNotificationLevelSection(serverError)}
                                <div className='divider-light'/>
                                {this.createMarkUnreadLevelSection(serverError)}
                                <div className='divider-dark'/>
--- a/webapp/components/user_settings/email_notification_setting.jsx
+++ b/webapp/components/user_settings/email_notification_setting.jsx
@@ -13,10 +13,6 @@ import SettingItemMax from 'components/setting_item_max.jsx';

 import {Preferences} from 'utils/constants.jsx';

-const INTERVAL_IMMEDIATE = 30; // "immediate" is a 30 second interval
-const INTERVAL_FIFTEEN_MINUTES = 15 * 60;
-const INTERVAL_HOUR = 60 * 60;
-
 export default class EmailNotificationSetting extends React.Component {
    static propTypes = {
        activeSection: React.PropTypes.string.isRequired,
@@ -36,7 +32,7 @@ export default class EmailNotificationSetting extends React.Component {
        this.collapse = this.collapse.bind(this);

        this.state = {
-            emailInterval: PreferenceStore.getInt(Preferences.CATEGORY_NOTIFICATIONS, Preferences.EMAIL_INTERVAL, INTERVAL_IMMEDIATE)
+            emailInterval: PreferenceStore.getInt(Preferences.CATEGORY_NOTIFICATIONS, Preferences.EMAIL_INTERVAL, Preferences.INTERVAL_IMMEDIATE)
        };
    }

@@ -66,7 +62,7 @@ export default class EmailNotificationSetting extends React.Component {

            if (this.props.enableEmail) {
                switch (this.state.emailInterval) {
-                case INTERVAL_IMMEDIATE:
+                case Preferences.INTERVAL_IMMEDIATE:
                    description = (
                        <FormattedMessage
                            id='user.settings.notifications.email.immediately'
@@ -74,7 +70,7 @@ export default class EmailNotificationSetting extends React.Component {
                        />
                    );
                    break;
-                case INTERVAL_HOUR:
+                case Preferences.INTERVAL_HOUR:
                    description = (
                        <FormattedMessage
                            id='user.settings.notifications.email.everyHour'
@@ -119,13 +115,13 @@ export default class EmailNotificationSetting extends React.Component {
                            <input
                                type='radio'
                                name='emailNotifications'
-                                checked={this.props.enableEmail && this.state.emailInterval === INTERVAL_FIFTEEN_MINUTES}
-                                onChange={this.handleChange.bind(this, 'true', INTERVAL_FIFTEEN_MINUTES)}
+                                checked={this.props.enableEmail && this.state.emailInterval === Preferences.INTERVAL_FIFTEEN_MINUTES}
+                                onChange={this.handleChange.bind(this, 'true', Preferences.INTERVAL_FIFTEEN_MINUTES)}
                            />
                            <FormattedMessage
                                id='user.settings.notifications.email.everyXMinutes'
                                defaultMessage='Every {count} minutes'
-                                values={{count: INTERVAL_FIFTEEN_MINUTES / 60}}
+                                values={{count: Preferences.INTERVAL_FIFTEEN_MINUTES / 60}}
                            />
                        </label>
                    </div>
@@ -134,8 +130,8 @@ export default class EmailNotificationSetting extends React.Component {
                            <input
                                type='radio'
                                name='emailNotifications'
-                                checked={this.props.enableEmail && this.state.emailInterval === INTERVAL_HOUR}
-                                onChange={this.handleChange.bind(this, 'true', INTERVAL_HOUR)}
+                                checked={this.props.enableEmail && this.state.emailInterval === Preferences.INTERVAL_HOUR}
+                                onChange={this.handleChange.bind(this, 'true', Preferences.INTERVAL_HOUR)}
                            />
                            <FormattedMessage
                                id='user.settings.notifications.email.everyHour'
@@ -170,8 +166,8 @@ export default class EmailNotificationSetting extends React.Component {
                                <input
                                    type='radio'
                                    name='emailNotifications'
-                                    checked={this.props.enableEmail && this.state.emailInterval === INTERVAL_IMMEDIATE}
-                                    onChange={this.handleChange.bind(this, 'true', INTERVAL_IMMEDIATE)}
+                                    checked={this.props.enableEmail && this.state.emailInterval === Preferences.INTERVAL_IMMEDIATE}
+                                    onChange={this.handleChange.bind(this, 'true', Preferences.INTERVAL_IMMEDIATE)}
                                />
                                <FormattedMessage
                                    id='user.settings.notifications.email.immediately'
@@ -186,7 +182,7 @@ export default class EmailNotificationSetting extends React.Component {
                                    type='radio'
                                    name='emailNotifications'
                                    checked={!this.props.enableEmail}
-                                    onChange={this.handleChange.bind(this, 'false', INTERVAL_IMMEDIATE)}
+                                    onChange={this.handleChange.bind(this, 'false', Preferences.INTERVAL_IMMEDIATE)}
                                />
                                <FormattedMessage
                                    id='user.settings.notifications.email.never'
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1143,7 +1143,9 @@
  "channel_notifications.never": "Never",
  "channel_notifications.onlyMentions": "Only for mentions",
  "channel_notifications.override": "Selecting an option other than \"Default\" will override the global notification settings. Desktop notifications are available on Firefox, Safari, and Chrome.",
+  "channel_notifications.overridePush": "Selecting an option other than \"Global default\" will override the global notification settings for mobile push notifications in account settings. Push notifications must be enabled by the System Admin.",
  "channel_notifications.preferences": "Notification Preferences for ",
+  "channel_notification.push": "Send mobile push notifications",
  "channel_notifications.sendDesktop": "Send desktop notifications",
  "channel_notifications.unreadInfo": "The channel name is bolded in the sidebar when there are unread messages. Selecting \"Only for mentions\" will bold the channel only when you are mentioned.",
  "channel_select.placeholder": "--- Select a channel ---",
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -55,7 +55,10 @@ export const Preferences = {
    CATEGORY_FLAGGED_POST: 'flagged_post',
    CATEGORY_NOTIFICATIONS: 'notifications',
    CATEGORY_FAVORITE_CHANNEL: 'favorite_channel',
-    EMAIL_INTERVAL: 'email_interval'
+    EMAIL_INTERVAL: 'email_interval',
+    INTERVAL_IMMEDIATE: 30, // "immediate" is a 30 second interval
+    INTERVAL_FIFTEEN_MINUTES: 15 * 60,
+    INTERVAL_HOUR: 60 * 60
 };

 export const ActionTypes = keyMirror({