Untitled

(function(w) {
  "use strict";

  var tag = "cv-2-0", // TO DO: test name
      debug = document.cookie.indexOf('cfQA') > -1,
      window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w;

  let cvBanner = `<div class="${tag}-banner">
  <div class="${tag}-tiles">
     <img class="${tag}-bannerImg" src="https://cfactory-img.s3.amazonaws.com/CGC/2.0/icon2-1.svg"> 
     <span>No commitment</span>
  </div>
  <div class="${tag}-tiles">
    <img class="${tag}-bannerImg" src="https://cfactory-img.s3.amazonaws.com/CGC/2.0/icon2-3.svg"> 
     <span>Free delivery</span></div>
  <div class="${tag}-tiles">
    <img class="${tag}-bannerImg" src="https://cfactory-img.s3.amazonaws.com/CGC/2.0/icon2-2.svg">
     <span>Unique gins</span></div>
</div>`;

  window[tag] = {
      log: function(msg) {
          // if (debug) console.log("[CONV]", tag, "-->", msg);
      },

      waitForElement: function(cssSelector, callback, stopTime = 5000) {
          var stop,
              elementCached,
              timeout,
              check = function() {
                  try {
                      elementCached = document.querySelector(cssSelector);

                      if (stop) return;

                      if (elementCached) {
                          callback(elementCached);
                          clearTimeout(timeout);

                          window[tag].log(cssSelector + " found");
                      } else {
                          window.requestAnimationFrame(check);
                      }
                  } catch (err) {
                      window[tag].log(err.message);
                  }
              };

          window.requestAnimationFrame(check);

          timeout = setTimeout(function() {
              stop = true;
              window[tag].log(cssSelector + " not found");
          }, stopTime);
      },

      testStart: function() {
          try {
              this.waitForElement("body", function(docBody) {
                  docBody.classList.add(tag);
              });

              if (debug && document.title.indexOf("CONV QA") < 0) {
                  document.title = "[CONV QA] " + document.title;
              }

              initVariation();

              window[tag].log("test running");
          } catch (err) {
              window[tag].log(err.message);
          }
      },
  };

  window[tag].testStart();

  function initVariation() {
      if ((!document.querySelector(`.${tag}-banner`))) {
          window[tag].waitForElement('#app .site-header', appHeader);
          if ((window.location.href.indexOf("sign-up") !== -1) || (window.location.href.indexOf("membership-selection") !== -1) || (window.location.href.indexOf("checkout-address") !== -1)) {
               setTimeout(function(){
               console.log('sign in');
                document.querySelector("body").classList.add(`${tag}-sign`);
              if (window.innerWidth < 842) {
                  window[tag].waitForElement('.checkout-header .checkout-header__contain .checkout-header__rating', function() {
                      document.querySelector(".checkout-header__contain").insertAdjacentHTML("beforebegin", cvBanner);
                  });
              } else {
                  window[tag].waitForElement('.checkout-header .checkout-header__contain .checkout-header__rating', function() {
                      document.querySelector(".checkout-header").insertAdjacentHTML("afterend", cvBanner);
                  });
              }
            },2000);
          } else {
              window[tag].waitForElement('header.site-header--original> div:first-child', function() {
                  document.querySelector("header.site-header--original> div:first-child").insertAdjacentHTML("afterend", cvBanner);
                  scroll();
              });
          }
          moveElement();
      }
  }


  function moveElement() {
    if (window.location.pathname === "/") {
        if (window.innerWidth < 842) {
            window[tag].waitForElement('.hero-home > img:first-of-type', function() {
                document.querySelector(".hero-home > img:first-of-type").insertAdjacentElement("afterend", document.querySelector(".site-header__container ~ .site-header__notification"));
            }, 10000);
        } else {
            window[tag].waitForElement('.hero-home__container', function() {
                document.querySelector(".hero-home__container").insertAdjacentElement("beforeend", document.querySelector(".site-header__container ~ .site-header__notification"));
            }, 10000);
        }
    }
}

function appHeader() {
    if ((!document.querySelector(`.${tag}-banner`))) {
        if (document.querySelector("#app .site-header")) {
            document.querySelector("#app .site-header").insertAdjacentHTML("afterend", cvBanner);
        }
    }
};

function scroll() {
    window.addEventListener('scroll', function() {
        var header = document.querySelector('.site-header.site-header--original .site-header__container');
        var banner = document.querySelector(`.${tag}-banner`);
        var headerRect = header.getBoundingClientRect();

        if (headerRect.height < window.scrollY) {
            banner.classList.add('cv-sticky');
        } else {
            banner.classList.remove('cv-sticky');
        }
    });
}

})(window);




.cv-2-0-banner {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background: #e7f2eb;
    padding: 14px 1px;
}

html body .dropdown-content {
    z-index: 999 !important;
}

.cv-2-0-tiles {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cv-2-0-tiles span {
    padding-top: 4px;
    color: #343578 !important;
}

.cv-2-0-banner {
    position: relative;
    /* z-index: 99; */
}

.cv-2-0-banner.cv-sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.site-header__notification {
    z-index: 99 !important;
}

.cv-2-0.cv-2-0-sign #app {
    padding-top: 0 !important;
}

.cv-2-0.cv-2-0-sign #app .section {
    padding-top: 0 !important;
    display: none !important;
    padding-bottom: 0 !important;
}

.cv-2-0-banner>div:not(:last-child) {
    border-right: 1px solid #2323232e !important;
    padding-right: 24px !important;
}

.cv-2-0-tiles img {
    width: 28px !important;
    height: 28px !important;
}

@media screen and (min-width: 842px) {
    .cv-2-0-tiles {
        display: flex;
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
    }

    .cv-2-0-tiles img {
        margin-right: 8px !important;
    }

    .cv-2-0-banner.cv-sticky {
        padding: 16px 0 !important;
    }

    .cv-2-0.cv-2-0-sign .checkout-header__logo {
        z-index: 999 !important;
        background: #fff !important;
        border-radius: 30%;
    }

    .site-header__logo {
        z-index: 999 !important;
    }

    .cv-2-0.cv-2-0-sign .cv-2-0-banner {
        margin-bottom: 40px !important;
    }

    .cv-2-0-banner>div {
        padding-right: 33px !important;
        padding-left: 33px !important;
    }
}

@media screen and (max-width: 380px) {
    .cv-2-0-tiles {
        font-size: 12px !important;
    }

    .cv-2-0-banner>div:not(:last-child) {
        padding-right: 15px;
    }
}

@media screen and (max-width: 420px) {
    .cv-2-0-banner.cv-sticky {
        padding: 7px 2px !important;
    }
}

@media screen and (min-width: 420px) and (max-width: 842px) {
    .cv-2-0-banner.cv-sticky {
        padding: 5px 2px !important;
    }
}

@media screen and (max-height: 700px) {
    .site-header__notification {
        z-index: 99 !important;
    }

    .hero-home__container {
        max-height: 85vh !important;
    }

    .hero-home__content {
        height: 222px !important;
    }
}

@media screen and (min-width: 550px) {
    .cv-2-0-banner {
        justify-content: center !important;
    }

    .cv-2-0-banner>div {
        padding-right: 25px !important;
        padding-left: 25px !important;
    }
}

@media (min-width: 842px) and (max-width: 1000px) {
    .hero-home__container {
        height: 28vh !important;
    }

    .hero-home__content {
        padding-top: 2rem !important;
    }
}
@media screen and (max-width: 842px) {
    .cv-2-0.cv-2-0-sign .checkout-header {
        padding-bottom: 16px !important;
    }
}
@media (min-width: 1000px)
.handle-membership-selection #app .checkout-header, .handle-sign-up #app .checkout-header {
margin: 0 0 0 0 !important;
}
}