T117_SV_Promotion_Games

<div class="mm-t116-overlay"></div>
<div class="mm-t116-prompt">
    <div class="mm-t116-prompt__cross">
        <div class="icon  icon--natural" data-icon=""></div>
    </div>
    <div class="mm-t116-prompt__header">
        <div class="mm-t116-prompt__icon">
            <i class="icon icon--natural" data-icon=""></i>
        </div>
    </div>
    <div class="mm-t116-prompt__text"></div>
    <div class="mm-t116-prompt__cta">
        <div class="mm-t116-prompt__cta-btn">
            DEPOSIT NOW
        </div>
    </div>
    <div class="mm-t116-prompt__link">
        <a class="mm-t116-prompt__link-inner">Don't show me this again</a>
    </div>
</div>
<script>
    ;
    (function (campaign) {
        campaign.renderVariant = function () {
            this.content = document.createElement('div');
            this.content.classList.add('mm-t116-content');

            this.content.innerHTML = mm_inner_HTML;

            this.content.querySelector('.mm-t116-prompt__header').innerHTML +=
                this.varText[this.balanceType].header;

            this.content.querySelector('.mm-t116-prompt__text').innerHTML =
                this.varText[this.balanceType].main
                    .replace('${userFirstName}', this.userFirstName)
                    .replace('${userBalance}', document.querySelector('[data-track-id="BalanceValue"]').innerHTML);

            document.querySelector('.wrap-all').appendChild(this.content);

            /**
             * Cross handler
             */
            this.content.querySelector('.mm-t116-prompt__cross').addEventListener('click', function () {
                this.removePrompt();
                mmcore.mediator.trigger('mm-t116-click', {
                    attr: 'close'
                })
            }.bind(this));

            /**
             * Cta handler
             */
            this.content.querySelector('.mm-t116-prompt__cta-btn').addEventListener('click', function () {
                this.removePrompt();

                try {
                    window.SkyBetAccount.openDeposit();
                } catch (e) {
                }

                mmcore.mediator.trigger('mm-t116-click', {
                    attr: 'deposit_cta'
                })
            }.bind(this));


            /**
             * Never show again handler
             */
            this.content.querySelector('.mm-t116-prompt__link-inner').addEventListener('click', function () {
                this.removePrompt();
                mmcore.SetCookie(this.DONT_SHOW_AGAIN, 1, 365, true);
                mmcore.mediator.trigger('mm-t116-click', {
                    attr: 'dont_show_again'
                })
            }.bind(this));


            /**
             *
             */
            this.depositMade = mmcore.mediator.on('deposit-w/o-acc-frame', function (data) {
                this.removePrompt();
            }.bind(this));

            setTimeout(function () {
                document.documentElement.classList.add('mm-t116-visible');
            }, 200); //Some timeout to let browser add elements to DOM and let transition work correctly

            this.content.addEventListener('touchmove', function (evt) {
                evt.preventDefault();
            });

            mmcore.SetCookie(this.POPUP_COOKIE_NAME, 1, 0, true);

            return (new mmcore.Deferred()).resolve().promise();
        };

        campaign.removePrompt = function () {
            document.documentElement.classList.remove('mm-t116-visible');

            mmcore.mediator.remove('deposit-w/o-acc-frame', this.depositMade.id);

            setTimeout(function () {
                if (!this.content) {
                    return;
                }

                if (this.content.remove) {
                    this.content.remove();
                } else if (this.content.removeNode) {
                    this.content.removeNode();
                }
            }.bind(this), 500); //Timeout is the same as animation duration in css transition
        };

        campaign.varText = {
            'low': {
                header: 'You\'re running low on funds',
                main: 'Hey ${userFirstName},<br>it looks like you\'ve only got ${userBalance} to spend.<br>Why not top up now so you can keep playing?'
            },
            'zero': {
                header: 'Your balance is empty',
                main: 'Hey ${userFirstName},<br>it looks like you\'ve run out of funds.<br>Why not top up now so you can keep playing?'
            }
        };

        window.SkyBetAccount.bind('loggedOut', function() {
            campaign.removePrompt();
        });

        window.SkyBetAccount.bind('depositComplete', function(evt) {
            campaign.removePrompt();
        });

        })(this);
</script>
<style>
    .mm-t116 .mobile-nav .mm-t116-content {
        display: none;
    }

    .mm-t116-content {
        position: fixed;
        width: 440px;
        top: 160px;
        right: 0;
        color: white;
        z-index: 97;
    }

    .mm-t116-overlay {
        display: none;
    }

    .mm-t116-prompt {
        width: 100%;
        background-color: #0baeb0;
        padding-bottom: 30px;
        border-radius: 4px 0px 0px 4px;
    }

    .mm-t116-prompt__cross {
        position: absolute;
        right: 10px;
        top: 10px;
        padding: 5px;
        cursor: pointer;
    }

    .mm-t116-prompt__icon {
        display: inline-block;
        margin-right: .5em;
    }

    .mm-t116-prompt__header {
        margin: 0 40px;
        text-align: center;
        padding-top: 15px;
        font-size: 1.2em;
    }

    .mm-t116-prompt__text {
        margin: 20px;
        text-align: center;
        font-size: .8em;
    }

    .mm-t116-prompt__cta {
        text-align: center;
    }

    .mm-t116-prompt__cta-btn {
        display: inline-block;
        padding: 10px 20px;
        background-color: white;
        color: red;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
    }

    .mm-t116-prompt__link-inner {
        display: inline;
        font-size: .8em;
        text-decoration: underline;
        cursor: pointer;
    }

    .mm-t116-prompt__link {
        text-align: center;
        margin-top: 20px;
    }

    @media only screen and (min-width: 740px) {
        .mm-t116-prompt {
            position: absolute;
            right: -100%;

            -webkit-transition: right 0.5s;
            -moz-transition: right 0.5s;
            -ms-transition: right 0.5s;
            transition: right 0.5s;
        }

        .mm-t116.mm-t116-visible .mm-t116-prompt {
            right: 0;
        }

        .mm-t116.mm-t116-visible div[data-react-component="react/stickyTab/StickyTabGroup"] .sticky {
            top: 410px;
        }
    }

    @media only screen and (max-width: 740px) {
        .mm-t116.mm-t116-visible {
            overflow: hidden;
        }

        .mm-t116-content {
            position: fixed;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 90;
        }

        .mm-t116-overlay {
            display: block;
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;

            background: rgba(0, 0, 0, 0.7);
            opacity: 0;

            -webkit-transition: opacity 0.5s;
            -moz-transition: opacity 0.5s;
            -ms-transition: opacity 0.5s;
            transition: opacity 0.5s;
        }

        .mm-t116.mm-t116-visible .mm-t116-overlay {
            opacity: 1;
        }

        .mm-t116-prompt {
            position: absolute;
            background-color: #0baeb0;
            padding-bottom: 30px;
            bottom: -100%;

            border-radius: 0px;

            -webkit-transition: bottom 0.5s;
            -moz-transition: bottom 0.5s;
            -ms-transition: bottom 0.5s;
            transition: bottom 0.5s;
        }

        .mm-t116.mm-t116-visible .mm-t116-prompt {
            bottom: 0%;
        }
    }

    @media only screen and (max-width: 360px) {
        .mm-t116-prompt__header {
            font-size: 1em;
        }
    }
</style>