Untitled

(function () {
  try {
    /* main variables */
    var debug = 0;
    var variation_name = "";

    /* helper library */
    var _$;
    !(function (factory) {
      _$ = factory();
    })(function () {
      var eg = function (s) {
        if (typeof s === "string") {
          this.value = Array.prototype.slice.call(document.querySelectorAll(s));
        }
        if (typeof s === "object") {
          this.value = [s];
        }
      };
      eg.prototype = {
        eq: function (n) {
          this.value = [this.value[n]];
          return this;
        },
        each: function (fn) {
          [].forEach.call(this.value, fn);
          return this;
        },
        log: function () {
          console && console.log(this);
        },
        html: function (v) {
          return typeof v == 'undefined'
            ? this.value[0].innerHTML
            : this.each(function (i) {
              i.innerHTML = v;
            });
        },
        addClass: function (v) {
          var a = v.split(" ");
          return this.each(function (i) {
            for (var x = 0; x < a.length; x++) {
              if (i.classList) {
                i.classList.add(a[x]);
              } else {
                i.className += " " + a[x];
              }
            }
          });
        },
         removeClass: function (v) {
                  var a = v.split(' ');
                  return this.each(function (i) {
                    for (var x = 0; x < a.length; x++) {
                      if (i.classList) {
                        i.classList.remove(a[x]);
                      } else {
                        i.className = i.className.replace(
                          new RegExp('\\b' + a[x] + '\\b', 'g'),
                          ''
                        );
                      }
                    }
                  });
                },
        css: function (v) {
                  return this.each(function (i) {
                    i.style.cssText = i.style.cssText + v;
                  });
                },
        prepend: function (v) {
                  return this.each(function (i) {
                    i.insertAdjacentHTML('afterBegin', v);
                  });
                },
        waitForElement: function (
          selector,
          trigger,
          delayInterval,
          delayTimeout
        ) {
          var interval = setInterval(function () {
            if (_$(selector).value.length) {
              clearInterval(interval);
              trigger();
            }
          }, delayInterval);
          setTimeout(function () {
            clearInterval(interval);
          }, delayTimeout);
        },
      };
      return function (selector) {
        return new eg(selector);
      };
    });

    var eg_tick = ''+
    '<svg xmlns="http://www.w3.org/2000/svg" class="eg_tick" width="40px" height="40px" version="1.1" viewBox="0 0 700 700">'+
    '   <path d="m471.14 168.32-166.43 189.04-75.609-89.5-17.074 14.469 92.352 109.34 183.59-208.55z"/>'+
    '</svg>';

    var eg_oneTimeIcon = '<img class="eg_oneTime" src="https://www.ooredoo.qa/web/wp-content/themes/ooredoo-cms/prepaid/images/One time.svg" alt="One time" title="One time">';

    var eg_localMin = '<img class="eg_localMin" src="https://www.ooredoo.qa/web/wp-content/themes/ooredoo-cms/prepaid/images/Call.svg" alt="Call" title="Call">';

    var eg_intMin = '<img class="eg_intMin" src="https://www.ooredoo.qa/web/wp-content/themes/ooredoo-cms/prepaid/images/International.svg" alt="International" title="International">';

    var termsIcon = '<svg class="eg_termIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">'+
    '<rect x="1" y="2" width="7" height="7" rx="1" fill="white" stroke="#414141" stroke-width="0.2"/>'+
    '<rect x="2" y="1" width="7" height="7" rx="1" fill="white" stroke="#414141" stroke-width="0.2"/>'+
    '<path d="M7.57353 4.924C7.53708 4.96045 7.4872 4.98347 7.42965 4.98347C7.31839 4.98347 7.2263 4.89139 7.2263 4.78012L7.2263 2.65458L5.10076 2.65458C4.9895 2.65458 4.89741 2.5625 4.89741 2.45123C4.89741 2.33997 4.9895 2.24789 5.10076 2.24789L7.42965 2.24788C7.54092 2.24788 7.633 2.33996 7.633 2.45123L7.633 4.78012C7.633 4.83767 7.60998 4.88755 7.57353 4.924Z" fill="#414141"/>'+
    '<path d="M7.5411 2.6275L4.31249 5.85611C4.23384 5.93476 4.10339 5.93476 4.02474 5.85611C3.94608 5.77746 3.94608 5.64701 4.02474 5.56836L7.25334 2.33975C7.332 2.2611 7.46245 2.2611 7.5411 2.33975C7.61975 2.4184 7.61975 2.54885 7.5411 2.6275Z" fill="#414141"/>'+
    '</svg>';

    var helper = _$();
    /* Variation Init */
    function init() {
      _$('body').addClass('eg_testBuild')
      document.querySelectorAll('.recharges-section-bottom .recharge-card').forEach(function (el) {
        var rechargeValidity = el.querySelector('.recharge-card__bottom .recharge-validity');
        var rechargeAllowance = el.querySelector('.recharge-card__bottom .recharge-allowances');
        var rechargePrice = el.querySelector('.recharge-card__brief .recharge-card__price');
        var rechargeWidgets = el.querySelectorAll('.recharge-card__widget');
        var termsCondition = el.querySelector('.recharge-validity__terms');
        var secondaryTag = el.querySelector('.with-tag__body .primary-tag + span');
        var primaryTag = el.querySelector('.with-tag__body .primary-tag');


        // insert terms & condition icon
        if(termsCondition){
          if(termsCondition.innerHTML !='' && !termsCondition.querySelector('.eg_termIcon')){
            termsCondition.innerHTML = termsCondition.innerHTML + termsIcon;
          }
        }

        // insert endless data pack copy
        if(primaryTag && primaryTag.innerHTML.toLocaleLowerCase().indexOf('endless data') > -1){
          if(!el.querySelector('.eg_endlessData')){
            el.querySelector('.recharge-card__widgets').insertAdjacentHTML('beforeend','<div class="recharge-card__widget"><img class="eg_endlessData" src="https://www.ooredoo.qa/web/wp-content/themes/ooredoo-cms/prepaid/images/Data.svg" alt="Data" title="Data"><h2 class="h2 d-inline">'+primaryTag.innerHTML+'</h2></div>');
          }
          primaryTag.parentElement.classList.remove('eg_orange');
        }
        else if(primaryTag && primaryTag.innerHTML.toLocaleLowerCase().indexOf('night data') > -1){
          primaryTag.parentElement.classList.add('eg_orange');
          if(el.querySelector('.eg_endlessData')){
            el.querySelector('.eg_endlessData').parentElement.remove();
          }
        }
        else{
          if(el.querySelector('.eg_endlessData')){
            el.querySelector('.eg_endlessData').parentElement.remove();
          }
        }

        // insert tick icon for flexi 
        if(el.querySelector('.recharge-card__title') && el.querySelector('.recharge-card__title').innerHTML.toLocaleLowerCase().indexOf('flexi') > -1){
          _$(el).addClass('eg_flexi')
          rechargeWidgets.length && rechargeWidgets.forEach(function(element){
            if(!element.querySelector('.eg_tick')){
              _$(element).prepend(eg_tick);
            }
          })
        }else{
          _$(el).removeClass('eg_flexi')
          rechargeWidgets.length && rechargeWidgets.forEach(function(element){
            if(element.querySelector('.eg_tick')){
              element.querySelector('.eg_tick').remove();
            }
          })
        }

        rechargeWidgets.length && rechargeWidgets.forEach(function(element){

          // add bonus text
          if(element.querySelector('h2 span') && !element.querySelector('h2 .eg_bonus')){
            element.querySelector('h2 span').innerHTML = element.querySelector('h2 span').innerHTML + ' <span class="eg_bonus">Bonus</span>';
          }

          // insert one time icon
          if(element.querySelector('.d-block') && element.querySelector('.d-block').innerHTML.toLocaleLowerCase().indexOf('data') > -1){
            if(!element.querySelector('.eg_oneTime')){
              _$(element).prepend(eg_oneTimeIcon);
            }
          }else{
            if(element.querySelector('.eg_oneTime')){
              element.querySelector('.eg_oneTime').remove();
            }
          }

          // insert local min icon
          if(element.querySelector('.d-block') && element.querySelector('.d-block').innerHTML.toLocaleLowerCase().indexOf('min') > -1 && element.querySelector('.d-block').innerHTML.toLocaleLowerCase().indexOf('local') > -1 ||
          (element.querySelector('.d-block') && element.querySelector('.d-block').innerHTML.toLocaleLowerCase().indexOf('credit') > -1) ||
          (element.querySelector('.d-block') && element.querySelector('.d-block').innerHTML.toLocaleLowerCase().indexOf('roaming') > -1)){
            if(!element.querySelector('.eg_localMin')){
              _$(element).prepend(eg_localMin);
            }
          }else{
            if(element.querySelector('.eg_localMin')){
              element.querySelector('.eg_localMin').remove();
            }
          }

          // insert int min
          if(element.querySelector('.d-block') && element.querySelector('.d-block').innerHTML.toLocaleLowerCase().indexOf('min') > -1 && element.querySelector('.d-block').innerHTML.toLocaleLowerCase().indexOf('international') > -1 || 
          (element.querySelector('.d-block') && element.querySelector('.d-block').innerHTML.toLocaleLowerCase().indexOf('dhs') > -1)){
            if(!element.querySelector('.eg_intMin')){
              _$(element).prepend(eg_intMin);
            }
          }else{
            if(element.querySelector('.eg_intMin')){
              element.querySelector('.eg_intMin').remove();
            }
          }

        })

        // move recharge validity
        rechargeValidity && !el.querySelector('.recharge-card__brief .recharge-validity') &&
          el.querySelector('.recharge-card__middle .recharge-allowances') &&
          el.querySelector('.recharge-card__middle .recharge-allowances').insertAdjacentElement('beforeend', rechargeValidity);

        // move recharge allowance
        rechargeAllowance && !el.querySelector('.recharge-card__middle .recharge-allowances') &&
          el.querySelector('.recharge-card__widgets') &&
          el.querySelector('.recharge-card__widgets').insertAdjacentElement('afterend', rechargeAllowance);

        // move the recharge price
        rechargePrice && !el.querySelector('.recharge-allowances .recharge-card__price') &&
          el.querySelector('.recharge-card__middle .recharge-allowances') &&
          el.querySelector('.recharge-card__middle .recharge-allowances').insertAdjacentElement('beforeend', rechargePrice);

        // add css to the promotional tag 
        if(secondaryTag){
          _$(secondaryTag.parentElement).css('width: 100%');
        }else{
          primaryTag && _$(primaryTag.parentElement).css('width: inherit');
        }

      })

      _$('.recharges-section-top__info h1').html('Easily Recharge Online')
      _$('.recharges-section-top__info p').html('Browse to find an option that meets your needs. Then recharge safe and securely online.')
    }

    document.addEventListener('click',function(){
      helper.waitForElement(".recharge-card .recharge-card__bottom", function () {
        looping();
      }, 50, 15000);
    })

    // check the spa window location
    listener();

    function listener() {
      /* These are the modifications: */
      window.addEventListener("locationchange", function () {
        helper.waitForElement(".recharge-card .recharge-card__bottom", function () {
          looping();
        }, 50, 15000);
      });
      history.pushState = ((f) =>
        function pushState() {
          var ret = f.apply(this, arguments);
          window.dispatchEvent(new Event("pushstate"));
          window.dispatchEvent(new Event("locationchange"));
          return ret;
        })(history.pushState);
      history.replaceState = ((f) =>
        function replaceState() {
          var ret = f.apply(this, arguments);
          window.dispatchEvent(new Event("replacestate"));
          window.dispatchEvent(new Event("locationchange"));
          return ret;
        })(history.replaceState);
      window.addEventListener("popstate", () => {
        window.dispatchEvent(new Event("locationchange"));
      });
    }


    function looping(){
      var interval = setInterval(function () {
        init();
      }, 20)

      setTimeout(function () {
        clearInterval(interval)
      }, 5000)
    }


    /* Initialize variation */
    helper.waitForElement(".recharge-card .recharge-card__bottom", function () {
      looping();
    }, 50, 15000);
  } catch (e) {
    if (debug) console.log(e, "error in Test" + variation_name);
  }
})();



<style>
html body.eg_testBuild .recharges-section-bottom .by-wp{
    display: none;
}
html body.eg_testBuild .recharges-section-top__info p{
    font-size: 13px;
}

html body.eg_testBuild .recharge-card{
    padding: 45px 15px 150px;
    flex: 1;
    border: 1px solid #ed1c25;
}

html body.eg_testBuild .recharge-card .recharge-card__title{
    padding-right: 0;
}

html body.eg_testBuild .with-tag__body{
    justify-content: space-between;
}

html body.eg_testBuild .with-tag__body span::before{
    width: 16px;
    height: 16px;
}

html body.eg_testBuild .with-tag__body > span{
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10.5px;
}

html body.eg_testBuild .with-tag__body > span.secondary-tag{
    border-radius: 0px 3px 0px 0px;
}

html body.eg_testBuild .recharge-card.with-tag::after{
    left: 2px;
    width: calc(100% - 3px);
}

html body.eg_testBuild .recharge-card .recharge-card__bottom .recharge-validity{
    display: none !important;
}

html body.eg_testBuild .recharge-card .recharge-card__middle{
    flex-direction: column;
    margin-bottom: 0;
}

html body.eg_testBuild .recharge-card .recharge-card__middle > div{
    padding: 0;
    flex: none !important;
    display: block;
    position: inherit;
}

html body.eg_testBuild .recharge-bottom-banner,
html body.eg_testBuild .recharge-pagination,
html body.eg_testBuild .recharge-card .recharge-card__actions{
    max-width: 100% !important;
    width: 100% !important;
}

html body.eg_testBuild .recharge-card .recharge-card__widgets{
    flex-direction: column;
}

html body.eg_testBuild .recharge-card .recharge-card__widgets > div{
    background: none;
    min-width: 100%;
    text-align: left;
    margin-bottom: 0;
    padding: 5px 16px;
    padding-left: 25px;
    padding-bottom: 0;
    position: relative;
}

html body.eg_testBuild .recharge-card .recharge-card__widgets > div .d-block{
    display: contents !important;
    font-weight: 600;
    color: #585858;
}

html body.eg_testBuild .recharge-card .recharge-card__widgets .eg_bonusWrap .d-block{
    display: none !important;
}

html body.eg_testBuild .recharges-section-bottom .by-vue{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    height: max-content;
    justify-content: center;
}

html body.eg_testBuild .recharges-section-bottom .by-vue > div{
    width: 100%;
    max-width: 310px;
    display: flex;
}

html body.eg_testBuild .recharge-card .recharge-allowances,
html body.eg_testBuild .recharge-card .recharge-validity{
    flex: none;
    max-width: 100%;
    width: 100%;
}

html body.eg_testBuild .recharge-card .recharge-validity{
    padding-right: 60px;
}

html body.eg_testBuild .recharge-card:not(.eg_flexi) .recharge-validity > a{
    display: block;
}

html body.eg_testBuild .recharge-card:not(.eg_flexi) .recharge-validity span span{
    display: none;
}

html body.eg_testBuild .recharge-card.eg_flexi .recharge-allowances img,
html body.eg_testBuild .recharge-card.eg_flexi .recharge-allowances span{
    margin-right: 2px;
}

html body.eg_testBuild .recharge-card .recharge-validity > a,
html body.eg_testBuild .recharge-card .recharge-validity > span,
html body.eg_testBuild .recharge-card .recharge-card__desc{
    font-size: 11px;
}

html body.eg_testBuild .recharge-card__widget > .validity-label{
    margin-top: 0;
}

html body.eg_testBuild .recharge-card .recharge-card__middle .recharge-allowances{
    border-bottom: 1px solid #c5c5c5;
    padding-bottom: 5px;
    position: absolute;
    bottom: 75px;
    width: calc(100% - 30px);
}

html body.eg_testBuild .recharge-card.eg_flexi .recharge-card__middle .recharge-allowances{
    margin-top: 49px;
}

html body.eg_testBuild .recharge-card:not(.eg_flexi) .recharge-card__middle .recharge-allowances > span,
html body.eg_testBuild .recharge-card:not(.eg_flexi) .recharge-card__middle .recharge-allowances img{
    display: none;
}

html body.eg_testBuild .recharge-card .recharge-card__actions{
    position: absolute !important;
    width: calc(100% - 30px) !important;
    bottom: 25px;
}
html body.eg_testBuild .recharge-card .recharge-card__actions span > a{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -20px;
    width: max-content;
}

html body.eg_testBuild .recharge-card.eg_flexi .recharge-allowances .recharge-validity{
    display: inline;
}

html body.eg_testBuild .recharge-allowances .recharge-card__price{
    position: absolute;
    background: #848484;
    border-radius: 100px;
    color: #fff;
    width: 65px;
    height: 65px;
    right: -5px;
    bottom: -15px;
    top: auto;
}

html body.eg_testBuild .recharge-allowances .recharge-card__price strong{
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

html body.eg_testBuild .recharge-allowances .recharge-card__price sup{
    top: -6px;
    left: 10px;
    font-size: 13px;
}

html body.eg_testBuild .recharge-allowances .recharge-card__price .price-term{
    display: none;
}

html body.eg_testBuild .recharge-card .recharge-main-btn{
    margin-bottom: 0 !important;
    width: 160px;
    margin: auto;
    background: #fff;
    border: 1px solid #ed1c24;
    color: #ed1c24 !important;
}

html body.eg_testBuild .recharge-card .recharge-main-btn:hover{
    background: #ed1c24;
    color: #fff !important;
}

html body.eg_testBuild .recharge-card .how-to-recharge-btn{
    margin-top: 10px;
    color: #575757;
    font-weight: 500;
}

html body.eg_testBuild .recharge-card .eg_endlessData,
html body.eg_testBuild .recharge-card .eg_localMin,
html body.eg_testBuild .recharge-card .eg_intMin,
html body.eg_testBuild .recharge-card .eg_oneTime{
    position: absolute;
    left: 0;
    top: 12px;
}

html body.eg_testBuild .recharge-card .eg_endlessData{
    top: 10px;
}

html body.eg_testBuild .recharge-card .eg_tick{
    position: absolute;
    left: -10px;
    fill: #f00;
}


html body.eg_testBuild .recharge-card.eg_flexi .eg_endlessData,
html body.eg_testBuild .recharge-card.eg_flexi .eg_localMin,
html body.eg_testBuild .recharge-card.eg_flexi .eg_intMin,
html body.eg_testBuild .recharge-card.eg_flexi .eg_oneTime{
    display: none;
}

html body.eg_testBuild .recharge-card::after{
    content: "";
    height: 5px;
    position: absolute;
    left: 0;
    right: 0;
    top: -0.3px;
    border-radius: 8px 8px 0 0;
    display: block;
    background-color: #ed1c24;
    color: #fff;
    left: 2px;
    width: calc(100% - 3px);
}

html body.eg_testBuild .recharge-card .recharge-card__widget > h2{
    font: normal normal 600 14px/19px "Noto Sans", sans-serif, Helvetica;
    color: #585858;
}


html body.eg_testBuild .recharge-card .eg_orange,
html body.eg_testBuild .recharge-card .eg_orange .primary-tag{
    background-color: #FFA300 !important;
    border-bottom-right-radius: 3px;
    box-shadow: 2px 2px 2px 0px #ada9a9;
    color: #000;
}

html body.eg_testBuild .recharge-card .eg_orange .primary-tag::before{
    background-image: url('https://www.ooredoo.qa/web/wp-content/themes/ooredoo-cms/prepaid/images/balck-bonus-icon.svg') !important;
}


@media screen and (max-width: 342px){
    html body.eg_testBuild .with-tag__body > span{
        font-size: 9.5px;
        padding-left: 4px;
        padding-right: 4px;
    }
}
</style>