pushnoti-landingpage.js

window.s24.modules.pushnotificationslp = (function (s24js) {

    'use strict';

    var subscribtionState = {
        'men': 'false',
        'sale': 'false',
        'women': 'false'
    };

    var pushNotificationsIsActive = false;

    /**
     * Changes Buttons and displays browser info for not supported browsers
     */
    function showNotSupported(){
        var btnNotSupported = document.getElementById('not-supported');
        var msgNotSupported = document.getElementById('not-supported-message');
        btnNotSupported.style.display = 'inline-block';
        msgNotSupported.style.display = 'block';
    }

    /**
     * Hides Button and browser info
     */
    function hideNotSupported(){
        var btnNotSupported = document.getElementById('not-supported');
        var msgNotSupported = document.getElementById('not-supported-message');
        btnNotSupported.style.display = 'none';
        msgNotSupported.style.display = 'none';
    }

    /**
     * Changes Button to PN Call To Action
     */
    function showPrompt(){
        var btnActivate = document.getElementById('activate');
        var btnChooseSettings = document.getElementById('choose-settings');
        btnChooseSettings.style.display = 'inline-block';
        btnActivate.style.display = 'inline-block';
    }

    /**
     * Changes Button to PN Call To Action
     */
    function hidePrompt() {
        var btnActivate = document.getElementById('activate');
        btnActivate.style.display = 'none';
    }

    /**
     * Changes the button and displays push settings
     */
    function showSettings() {
        var btnActivated = document.getElementById('activated');
        var btnDeactivate = document.getElementById('deactivate');
        var btnSettings = document.getElementById('choose-settings');
        var divPreferences = document.getElementById('preferences');

        btnActivated.style.display = 'inline-block';
        btnDeactivate.style.display = 'block';
        btnSettings.style.backgroundColor = '#f88c00';
        divPreferences.style.display = 'block';
    }

    /**
     * Changes the button and displays push settings
     */
    function hideSettings(){
        var btnActivated = document.getElementById('activated');
        var btnDeactivate = document.getElementById('deactivate');
        var msgSettings = document.getElementById('info-settings');
        var divPreferences = document.getElementById('preferences');

        btnActivated.style.display = 'none';
        btnDeactivate.style.display = 'none';
        msgSettings.style.display = 'none';
        divPreferences.style.display = 'none';
    }


    function checkForActivation() {
        OneSignal.isPushNotificationsEnabled(function (isEnabled) {
            pushNotificationsIsActive = isEnabled;
            if (pushNotificationsIsActive) {
                showSettings();
                hidePrompt();
                return;
            }
        });
        if (!pushNotificationsIsActive) {
            setTimeout(checkForActivation, 1000);
        }
    }

    /**
     * Opens OneSignal Browser Prompt and displays the settings panel after a timeout
     */
    function subscribe(){
        // OneSignal Browser prompt
        OneSignal.push(["registerForPushNotifications"]);

        // If user opts in to one signal fire this function to check for token
        checkForActivation();
    }

    /**
     * Unsubscribe from OneSignal
     */
    function unsubscribe(){
        OneSignal.push(["setSubscription", false]);
    }

    /**
     * Changes Subscription of user for 'Damenmode'
     * @param string subscribtionType e.g. 'men', 'women' or 'sale'
     **/
    function changeSubscription(subscribtionType) {
        subscribtionState[subscribtionType] = subscribtionState[subscribtionType] === 'true' ? 'false' : 'true';
        OneSignal.push(['sendTags', subscribtionState]);
        updateSubscriptions();
    }

    /**
     * Gets the subscriptions for user and displays buttons accordingly
     */
    function updateSubscriptions(){

        // TODO: ELSE for deactivating

        if (subscribtionState.women === 'true') {
            var btnWomenSubscribe = document.getElementById('women-subscribe');
            var boxWomen = document.getElementById('push-fashion-women');
            var btnWomenSubscribed = document.getElementById('women-subscribed');
            btnWomenSubscribe.style.display = 'none';
            btnWomenSubscribed.style.display = 'inline';
            boxWomen.style.opacity = '1';
        } else {
            var btnWomenSubscribe = document.getElementById('women-subscribe');
            var boxWomen = document.getElementById('push-fashion-women');
            var btnWomenSubscribed = document.getElementById('women-subscribed');
            btnWomenSubscribe.style.display = 'inline';
            btnWomenSubscribed.style.display = 'none';
            boxWomen.style.opacity = '0.8';
        }

        if (subscribtionState.men === 'true') {
            var btnMenSubscribe = document.getElementById('men-subscribe');
            var boxMen = document.getElementById('push-fashion-men');
            var btnMenSubscribed = document.getElementById('men-subscribed');
            btnMenSubscribe.style.display = 'none';
            btnMenSubscribed.style.display = 'inline';
            boxMen.style.opacity = '1';
        } else {
            var btnMenSubscribe = document.getElementById('men-subscribe');
            var boxMen = document.getElementById('push-fashion-men');
            var btnMenSubscribed = document.getElementById('men-subscribed');
            btnMenSubscribe.style.display = 'inline';
            btnMenSubscribed.style.display = 'none';
            boxMen.style.opacity = '0.8';
        }

        if (subscribtionState.sale === 'true') {
            var btnSaleSubscribe = document.getElementById('sale-subscribe');
            var boxSale = document.getElementById('push-fashion-sale');
            var btnSaleSubscribed = document.getElementById('sale-subscribed');
            btnSaleSubscribe.style.display = 'none';
            btnSaleSubscribed.style.display = 'inline';
            boxSale.style.opacity = '1';
        } else {
            var btnSaleSubscribe = document.getElementById('sale-subscribe');
            var boxSale = document.getElementById('push-fashion-sale');
            var btnSaleSubscribed = document.getElementById('sale-subscribed');
            btnSaleSubscribe.style.display = 'inline';
            btnSaleSubscribed.style.display = 'none';
            boxSale.style.opacity = '0.8';
        }
    }

    /**
     * Get Onesignal Tags
     */
    function updateOneSignalTags() {
        OneSignal.push(['getTags', function (tags) {
console.log(tags);
            subscribtionState.men = tags.men === 'true' ? 'true' : 'false';
            subscribtionState.women = tags.women === 'true' ? 'true' : 'false';
            subscribtionState.sale = tags.sale === 'true' ? 'true' : 'false';
            updateSubscriptions();
        }]);
    }

    /**
     * Register the click events
     */
    function registerClickEvents() {
        // Open OneSignal Browser prompt
        s24js.addEventListener('#activate', 'onclick', subscribe);

        // subscribe/ unsubscribe for 'Damenmode'
        s24js.addEventListener('#push-fashion-women', 'onclick', function() {
            changeSubscription('women');
        });

        // subscribe/ unsubscribe for 'Herrenmode'
        s24js.addEventListener('#push-fashion-men', 'onclick', function() {
            changeSubscription('men');
        });

        // subscribe/ unsubscribe for 'Outlet Angebote'
        s24js.addEventListener('#push-fashion-sale', 'onclick', function() {
            changeSubscription('sale');
        });

        // unsubscribe from OneSignal
        s24js.addEventListener('#deactivate', 'onclick', unsubscribe);
    }

    /**
     * Main Procedures
     */
    function init() {
        //Deactivate no Javascript warning
        var btnEnableJS = document.getElementById('enable-js');
        btnEnableJS.style.display = 'none';

        //check if OneSignal is supported
        if (OneSignal.isPushNotificationsSupported()) {

            //Check if PNs are enabled for the client
            OneSignal.isPushNotificationsEnabled(function (isEnabled) {
                pushNotificationsIsActive = isEnabled;
                if (isEnabled) {
                    showSettings();
                    updateOneSignalTags();
                    
                } else {
                    showPrompt();
                }
            });

            registerClickEvents();

        } else {
            showNotSupported();
        }
    }

    s24js.addWindowLoadListener(init);

}(window.s24.modules.s24js));