tabbit

Wed Nov 21 2018
Copied to clipboard! Copy reply
// need to pass jQuery into local $ parameter so that $ can be used because cart blows out $ variable
/**
 * for LOBM
 *  90497 when its 143.96, show RTO. Apply this promo iguazafalls_24mm15bm if accepted
 *  90496 when it's 95.88, show RTO. Apply this promo iguazafalls_12mm10bm if accepted
 * 
 * for LOGL
 *  90291 + 90291 when its 143.96, show RTO. Apply this promo iguazafalls_24mm15 if accepted
 *  90288 + 90288 when it's 95.88, show RTO. Apply this promo iguazafalls_12mm10 if accepted
 */

(function($) {

    // For test
    if ( window.document.location.href.indexOf('?rtotest') == -1 )
    {
        //return
    }


    $(function(){               
        // var triggerRsis = [
        //     'sbsr/sitewide',
        //     'sbsr/rmsitewide',
        //     'ppc/sale',
        //     'sbsr/social',
        //     '.com/buy-',
        //     '.com/learn-'
        // ]
        
        // EL https://www.rosettastone.com/lp/sbsr/emailcw24p12/
        // BM https://www.rosettastone.com/lp/sbsr/emailbf12p3bm
        var skusInCart = rs.pixp_sku.split(',')[0]

        var offer = 'CM', logo, offer_url, headline, skusList, xhrUrl

        /************************************************
         * BLACK FRIDAY OFFER
         ***********************************************/
        if (offer == 'BF')
        {
            // Only show RTO for these skus -- and if theyre this price
            skusList = {
                // LOBM
                90496: {
                    price: 95.88,
                    promo: 'iguazafalls_12mm10bm'
                },
                90497: {
                    price: 143.76,
                    promo: 'iguazafalls_24mm15bm'
                } 
            }
            
            // Only run rto if there's only 1 product in cart
            if (rs.pixp_cartCount != 1)
            {
                return
            }     
            // And the sku in cart must be in the keys of skusList        
            if (Object.keys(skusList).indexOf(rs.pixp_sku) == -1)
            {
                // Sku in cart not found in keys of skusList                
                return
            }
            
            // Price for the sku in cart must be the value in skusList
            if (skusList[rs.pixp_sku].price != rs.pixp_price)
            {                
                return
                
            }
            
            logo = 'bf-sale'    
            headline = "save up to $" + (rs.pixp_sku.split(',')[0] == 90496 ? "10" : "15") + " on your order"
            xhrUrl = "https://secure.rosettastone.com/us_en_store_view/checkout/cart/verifypromo/?coupon_code=" + skusList[rs.pixp_sku].promo
        }                  
      


     
        /************************************************
        * CYBER MONDAY OFFER
        ***********************************************/
       if (offer == 'CM')
       {
          // Only show RTO for these skus -- and if theyre this price
          skusList = {
            // LOBM
            90288: {
              price: 95.88,
              promo: 'iguazafalls_12mm10'
            },
            90291: {
              price: 143.76,
              promo: 'iguazafalls_24mm15'
            } 
          }
          
          // Only run rto if there's only 1 product in cart
          if (rs.pixp_cartCount != 2)
          {
            console.log('1')
            return
          }
          
          // And the sku in cart must be in the keys of skusList        
          if (Object.keys(skusList).indexOf(rs.pixp_sku.split(',')[0]) == -1)
          {
            // Sku in cart not found in keys of skusList       
            console.log('2')         
            return
          }
          
          // Price for the sku in cart must be the value in skusList
          if (skusList[rs.pixp_sku.split(',')[0]].price / 2 != rs.pixp_price.split(',')[0])
          {                
            console.log('3')
            return
          }
          logo = 'cm-sale'            
          headline = "save up to $" + (rs.pixp_sku.split(',')[0] == 90288 ? "10" : "15") + " on your order"
          xhrUrl = "https://secure.rosettastone.com/us_en_store_view/checkout/cart/verifypromo/?coupon_code=" + skusList[rs.pixp_sku.split(',')[0]].promo
       }    






       

        // only run cart rto if end state hasn't been set (to 'accepted', 'declined', or 'expired')
        // and promo hasn't been applied through other means (like an lp or manual entry)
        //if(!cookieExists('cart_rto_accepted') && _satellite.readCookie('cart_rto_deadline') != 'expired') {            
          run_rto_now({
            theme: 'cyber_monday', // can be black_friday, cyber_monday, or cyber_week
            offer_type: 'discount', // can be discount or tutoring
            countdown_minutes: 10
          });
        //}


        // ---------------------------------------------
        // USE THIS TO RUN RTO NOW
        // ---------------------------------------------
        function run_rto_now(rto) {            
          showCartRto(rto.theme, rto.countdown_minutes);
        }












        // ********************************************************
        // UTILITIES
        // ********************************************************

        function getLvl(cart_product_name){
            if(/24 months/i.test(cart_product_name)){ return '24m'; }
            if(/12 months/i.test(cart_product_name)){ return '12m'; }
            else { return 'other'; }
        }

        function getRtoFromSchedule(schedule){
            var now = Date.now();
            for(var i=0; i<schedule.length; i++){
                if( Date.parse(schedule[i].start)<=now && now<=Date.parse(schedule[i].end) ){
                    return schedule[i].rto;
                }
            }
            return null;
        }

        function setCookie(name, value, daysTillExpiration){
            var hostname = window.location.hostname;
            var domain = hostname ? 'domain=.' + hostname.split('.').slice(-2).join('.') + '; ' : '';
            var expires = daysTillExpiration ? 'expires=' + (+daysTillExpiration*24*60*60*1000) + '; ' : '';
            var cookieString = name + '=' + value + ';' + ' path=/; '+ domain + expires;
                            
            document.cookie = cookieString;
            return cookieString;
        }

        function getCookie(name){
            var regex = new RegExp('(^|\\s|;)'+name+'\\=([^;]+)','i');
            return (document.cookie.match(regex)||[])[2];
        }

        function cookieExists(name){
            return !!getCookie(name);
        }










        // ********************************************************
        // CART RTO
        // ********************************************************

        function showCartRto(rtoTheme, totalTimeInMinutes){

           
            
            // if(offer){
            
            // 	// offer details
            // 	var promo_code = offer.promo_code;
            // 	var headline = offer.headline;
            // 	var lang = rs.pixp_lang.toLowerCase()
                
                
                


            // 	// init clock time
                totalTimeInMinutes = totalTimeInMinutes || 10;
                var totalTime = totalTimeInMinutes * 60*1000;
                var deadline = getCookie('cart_rto_deadline') || ( Date.parse(new Date()) + totalTime );
                (function(){
                    if(!cookieExists('cart_rto_deadline')){
                        var daysTillExpiration = 1;
                        setCookie('cart_rto_deadline', deadline, daysTillExpiration);
                    }
                })();



                // styles and markup
                var css = '<style type="text/css"> /************************************************************************ RTO GENERAL STYLES *************************************************************************/ .cart_rto_top{ position: relative; font-family: gotham_htfbook, gothambook, sans-serif; text-align: center; background-color: #eee; color: #333; padding: 6px 50px; font-size: 14px; line-height: 1; display: none; } .cart_rto_segment{ display: inline-block; vertical-align: middle; margin-right: 20px;font-weight:bold; } /************************************************************************ RTO LOGO *************************************************************************/ .cart_rto_logo{ width: 138px; height: 45px; background-image: url(\'https://www.rosettastone.com/lp/rtos/q418/' + logo + '.png\'); background-size: contain; background-repeat: no-repeat; } /************************************************************************ RTO OFFER TEXT *************************************************************************/ .rto_offer_title{ font-family: gotham_htfmedium, gothammedium, gotham_htfbook, gothambook, sans-serif; text-transform: uppercase; } .rto_offer_text{ font-family: gotham_htflight, gothamlight, gotham_htfbook, gothambook, sans-serif; } /************************************************************************ RTO CLOCK *************************************************************************/ .cart_rto_clock{ display: inline-block; vertical-align: middle; margin-right: 20px; padding-left: 3px; } .clock_segment{ display: inline-block; vertical-align: middle; } .clock_message{ text-transform: uppercase; font-family: gotham_htflight, gothamlight, gotham_htfbook, gothambook, sans-serif; text-align: left; } .clock_svg_container{ position: relative; font-size: 14px; text-align: center; } .clock_svg{ width: 4.4em; height: 4.4em; -ms-transform: rotateY(180deg) rotateZ(90deg); -webkit-transform: rotateY(180deg) rotateZ(90deg); transform: rotateY(180deg) rotateZ(90deg); } .clock_progress_bg{ stroke: #ddd; } .clock_progress{ stroke: #0098db; } .clock_value{ position: absolute; width: 100%; left: 0; top: calc(50% - 1.1em); } .clock_number{ font-family: gotham_htfmedium, gothammedium, gotham_htfbook, gothambook, sans-serif; font-size: 1.1em; } .clock_time_unit{ font-size: 0.8em; font-family: gotham_htflight, gothamlight, gotham_htfbook, gothambook, sans-serif; } /************************************************************************ RTO CTA BUTTON *************************************************************************/ .cart_rto_btn{ display: inline-block; text-transform: uppercase; background-color: #1E96D3; color: #fff; font-family: gotham_htfmedium, gothammedium, gotham_htfbook, gothambook, sans-serif; font-size: 14px; text-transform: uppercase; text-decoration: none; cursor: pointer; padding: 10px 25px; border-radius: 5px; transition: background-color 0.2s; } .cart_rto_btn:hover{ background-color: #2ae; color:#fff } /************************************************************************ RTO CLOSE BUTTON *************************************************************************/ .cart_rto_close{ position: absolute; right: 20px; top: calc(50% - 10px); cursor: pointer; width: 20px; height: 20px; } .cart_rto_close_svg{ width: 100%; height: 100%; } .cart_rto_close_svg line{ stroke: #333; } /************************************************************************ RTO BREAKPOINTS *************************************************************************/ @media (max-width: 940px){ .cart_rto_top{ padding: 20px 60px; } .cart_rto_close{ top: 27px; } } @media (max-width: 570px){ .cart_rto_segment{ margin: 5px 10px; } } @media (max-width: 525px){ .cart_rto_top{ padding: 20px 10px 15px; border: 12px solid #fff; } .cart_rto_top div.cart_rto_logo{ width: 180px; height: 60px; } .cart_rto_close{ display: none; } .cart_rto_clock{ margin: 0px 10px 10px; } } @media (max-width: 450px){ .cart_rto_btn{ border-radius: 30px; padding: 20px 0px; width: 100%; font-size: 16px; } } /************************************************************************ RTO THEMES *************************************************************************//* ------------------------------------------------ CYBER MONDAY ------------------------------------------------ */ .cart_rto_top_cyber_monday{ background-color: #ECC200;  color: #333; } .cart_rto_top_cyber_monday .cart_rto_logo{  background-image: url(\'https://www.rosettastone.com/lp/rtos/q418/'+logo +'.png\'); width: 70px; height: 47px; position: relative; top: 3px; } .cart_rto_top_cyber_monday .rto_offer_title{ color: red; text-transform:uppercase;} .cart_rto_top_cyber_monday .cart_rto_close_svg line{ stroke: #fafafa; } .cart_rto_top_cyber_monday .clock_progress_bg{ stroke: #1979c3; } .cart_rto_top_cyber_monday .clock_progress{ stroke: #333; } </style>';
                var html = '<div class="cart_rto_top cart_rto_top_'+rtoTheme+'"> <div class="cart_rto_segment cart_rto_logo"></div> <div class="cart_rto_segment"> <div class="rto_offer_title">'+headline+'</div> <div class="rto_offer_text">if you order in the next '+(totalTimeInMinutes===10 ? 'ten':totalTimeInMinutes)+' minutes.</div> </div> <div class="cart_rto_segment"> <div class="cart_rto_clock"> <div class="clock_segment clock_message">Time<br>left:</div> <div class="clock_segment"> <div class="clock_svg_container"> <svg class="clock_svg" viewBox="0 0 300 300"> <circle class="clock_progress_bg" cx="150" cy="150" r="120" stroke-width="30" fill="transparent" stroke-dasharray="753.9822368615503"></circle> <circle class="clock_progress js_clock_progress" data-time-unit="minutes" cx="150" cy="150" r="116" stroke-width="22" fill="transparent" stroke-dashoffset="1000" stroke-dasharray="1000"></circle> </svg> <div class="clock_value"> <div class="clock_number js_clock_number" data-time-unit="minutes">10</div> <div class="clock_time_unit">min</div> </div> </div> </div> <div class="clock_segment"> <div class="clock_svg_container"> <svg class="clock_svg" viewBox="0 0 300 300"> <circle class="clock_progress_bg" cx="150" cy="150" r="120" stroke-width="30" fill="transparent" stroke-dasharray="753.9822368615503"></circle> <circle class="clock_progress js_clock_progress" data-time-unit="seconds" cx="150" cy="150" r="116" stroke-width="22" fill="transparent" stroke-dashoffset="1000" stroke-dasharray="1000"></circle> </svg> <div class="clock_value"> <div class="clock_number js_clock_number" data-time-unit="seconds">00</div> <div class="clock_time_unit">sec</div> </div> </div> </div> </div> <a class="cart_rto_btn js_cart_rto_btn" href="#">Claim This Offer</a> </div> <div class="cart_rto_close js_cart_rto_close"> <svg class="cart_rto_close_svg" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style type="text/css">/*<![CDATA[*/ .cart_rto_close_svg line{ stroke-width:1; stroke-linecap:round; } /*]]>*/</style> <line x1="1" y1="1" x2="9" y2="9"></line> <line x1="1" y1="9" x2="9" y2="1"></line> </svg> </div> </div>';
      
                


                $('head').append(css);
                $('body').prepend(html);
                
                // init rto
                $('.cart_rto_top').slideDown();
                var $js_clock_progress = $('.js_clock_progress');
                var $minutes_progress = $('.js_clock_progress[data-time-unit=minutes]');
                var $seconds_progress = $('.js_clock_progress[data-time-unit=seconds]');
                






                // ----------------------------------------------
                // RTO CLOCK
                // ----------------------------------------------


                function getTimeRemaining(endtimeInMs){
                    var t = endtimeInMs - Date.now();
                    var seconds = ('0' + Math.floor( (t/1000) % 60 )).slice(-2);
                    var minutes = ('0' + Math.floor( (t/1000/60) % 60 )).slice(-2);
                    return {
                        'total': t,
                        'minutes': minutes,
                        'seconds': seconds
                    };
                }


                function initProgress($svgs){
                    var radius = $svgs[0].getAttribute('r');
                    var circumference = 2 * Math.PI * radius;

                    $svgs.attr('stroke-dasharray', circumference);
                    setProgress($svgs,100);
                }
                initProgress($js_clock_progress);


                function setProgress($svgs, pct){
                    var radius = $svgs[0].getAttribute('r');
                    var circumference = 2 * Math.PI * radius;

                    var progress_in_percent = pct;
                    var progress_in_pixels = circumference * (100-progress_in_percent)/100;
                    $svgs.attr('stroke-dashoffset', progress_in_pixels+'px');
                }


                // show countdown numbers
                var clockInterval = setInterval(function(){
                    $('.js_clock_number').html(function(){
                        var timeUnit = $(this).attr('data-time-unit');
                        var timeRemaining = getTimeRemaining(deadline);
                        return timeRemaining[timeUnit];
                    });
                },500);


                // run circular progress bars
                var progressInterval = setInterval(function(){

                    // find total remaining progress
                    var timeRemaining = getTimeRemaining(deadline).total;
                    var totalPercent = (timeRemaining/totalTime)*100;

                    // find remaining progress for this individual minute
                    var totalMsInMinutes = 60000;
                    var secondsPercent = ((timeRemaining % totalMsInMinutes) / totalMsInMinutes) * 100;

                    // update circular progress bars
                    setProgress($minutes_progress, totalPercent);
                    setProgress($seconds_progress, secondsPercent);

                    // when time runs out...
                    if(timeRemaining<=100)
                    {
                        var daysTillExpiration = 1;
                        setCookie('cart_rto_end_state', 'expired', daysTillExpiration);
                        console.log('expired...')
                        stopClock();
                    }
                },50);


                function stopClock(){
                    clearInterval(clockInterval);
                    clearInterval(progressInterval);

                    $('.cart_rto_top').slideUp();
                    _satellite.setCookie('cart_rto_deadline', 'expired')
                }












                // ----------------------------------------------
                // RTO USER ACTIONS
                // ----------------------------------------------

                $('.js_cart_rto_close').on('click', function(e){
                    e.preventDefault()
                    var daysTillExpiration = 1;
                    setCookie('cart_rto_end_state', 'declined', daysTillExpiration);
                    console.log('on close')
                    stopClock();
                });

                $('.js_cart_rto_btn').on('click', function(e) {
                    e.preventDefault()
                    $.ajax({
                        method: "GET",
                        xhrFields: {
                            withCredentials: true
                        },
                        url: xhrUrl,
                        success: function (d) {          
                            var daysTillExpiration = 1;
                            setCookie('cart_rto_end_state', 'accepted', daysTillExpiration);
                            console.log('accepted')
                            stopClock();
                            window.location.replace(window.location.pathname + window.location.search + window.location.hash);
                        },
                        error: function() {
                            var daysTillExpiration = 1;
                            setCookie('cart_rto_end_state', 'accepted', daysTillExpiration);
                            console.log('error')
                            stopClock();
                        }
                      });    

                    
                });


            
            


        }



    });
})(jQuery);