BrowserNotifications.js

// Web and desktop implementation only. Do not import for direct use. Use LocalNotification.
import _ from 'underscore';
import focusApp from './focusApp';
import * as AppUpdate from '../../actions/AppUpdate';
import EXPENSIFY_ICON_URL from '../../../../assets/images/expensify-logo-round-clearspace.png';
import * as ReportUtils from '../../ReportUtils';

const DEFAULT_DELAY = 4000;

/**
 * Checks if the user has granted permission to show browser notifications
 *
 * @return {Promise}
 */
function canUseBrowserNotifications() {
    return new Promise((resolve) => {
        // They have no browser notifications so we can't use this feature
        if (!window.Notification) {
            return resolve(false);
        }

        // Check if they previously granted or denied us access to send a notification
        const permissionGranted = Notification.permission === 'granted';

        if (permissionGranted || Notification.permission === 'denied') {
            return resolve(permissionGranted);
        }

        // Check their global preferences for browser notifications and ask permission if they have none
        Notification.requestPermission().then((status) => {
            resolve(status === 'granted');
        });
    });
}

/**
 * Light abstraction around browser push notifications.
 * Checks for permission before determining whether to send.
 *
 * @param {Object} params
 * @param {String} params.title
 * @param {String} params.body
 * @param {String} [params.icon] Path to icon
 * @param {Number} [params.delay]
 * @param {Function} [params.onClick]
 * @param {String} [params.tag]
 *
 * @return {Promise} - resolves with Notification object or undefined
 */
function push({title, body, delay = DEFAULT_DELAY, onClick = () => {}, tag = '', icon}) {
    return new Promise((resolve) => {
        if (!title || !body) {
            throw new Error('BrowserNotification must include title and body parameter.');
        }

        canUseBrowserNotifications().then((canUseNotifications) => {
            if (!canUseNotifications) {
                resolve();
                return;
            }

            const notification = new Notification(title, {
                body,
                tag,
                icon,
            });

            // If we pass in a delay param greater than 0 the notification
            // will auto-close after the specified time.
            if (delay > 0) {
                setTimeout(notification.close.bind(notification), delay);
            }

            notification.onclick = () => {
                onClick();
                window.parent.focus();
                window.focus();
                focusApp();
                notification.close();
            };

            resolve(notification);
        });
    });
}

/**
 * BrowserNotification
 * @namespace
 */
export default {
    /**
     * Create a report comment notification
     *
     * @param {Object} params
     * @param {Object} params.report
     * @param {Object} params.reportAction
     * @param {Function} params.onClick
     * @param {Boolean} usesIcon true if notification uses right circular icon
     */
    pushReportCommentNotification({report, reportAction, onClick}, usesIcon = false) {
        let title;
        let body;

        const isChatRoom = ReportUtils.isChatRoom(report);
        const {person, message} = reportAction;
        const plainTextPerson = _.map(person, (f) => f.text).join();
        // Specifically target the comment part of the message
        const plainTextMessage = (_.find(message, (f) => f.type === 'COMMENT') || {}).text;

        if (isChatRoom) {
            const roomName = _.get(report, 'displayName', '');
            title = roomName;
            body = `${plainTextPerson}: ${plainTextMessage}`;
        } else {
            title = plainTextPerson;
            body = plainTextMessage;
        }

        push({
            title,
            body,
            delay: 0,
            onClick,
            icon: usesIcon ? EXPENSIFY_ICON_URL : '',
        });
    },

    /**
     * Create a notification to indicate that an update is available.
     */
    pushUpdateAvailableNotification() {
        push({
            title: 'Update available',
            body: 'A new version of this app is available!',
            delay: 0,
            onClick: () => {
                AppUpdate.triggerUpdateAvailable();
            },
        });
    },
};