tabbit

Wed Nov 28 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)
        {
          //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       
          //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])
        {                
          //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 ------------------------------------------------ */'
               
               + '------------------------ 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);
                      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);
                  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);
                          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);
                          stopClock();
                      }
                    });    

                  
              });


          
          


      }



  });
})(jQuery);