Untitled

(function () {
  try {
    /* main variables */
    var debug = 0;
    var variation_name = "";
    var $;
    /* all Pure helper functions */

    function waitForElement(selector, trigger, delayInterval, delayTimeout) {
      var interval = setInterval(function () {
        if (
          document &&
          document.querySelector(selector) &&
          document.querySelectorAll(selector).length > 0
        ) {
          clearInterval(interval);
          trigger();
        }
      }, delayInterval);
      setTimeout(function () {
        clearInterval(interval);
      }, delayTimeout);
    }

    let sticky = `
    <div class="eg-sticky-container">
    <div class="eg-container">
        <div class="eg-list">
            <ul>
                <a>Check your eligibility</a>
                <a>Questions?</a>
                <a>Changing banks</a>
                <a>Apply here</a>
                <a>Our charges</a>
            </ul>
        </div>
        <a href="">Apply now</a>
    </div>
</div>`

    let egstring = `
    <div class="eg-card">
    <div class="eg-jump-section">
        <h5>Jump to section...</h5>
        <a >Check your eligibility</a>
        <a >Questions?</a>
        <a >Changing banks</a>
        <a >Apply here</a>
        <a >Our charges</a>
    </div>
</div>`

    let egimagewrapper = `<div class="eg-image-wrapper"></div>`

    function isInViewport(element) {
      const rect = element.getBoundingClientRect();
      const extraToBottom = 300;
      return (
        (rect.bottom - extraToBottom > 0 && rect.top < window.innerHeight) || // Bottom is visible, or
        (rect.top >= window.innerHeight && rect.bottom - extraToBottom <= window.innerHeight) // Starts to appear from the bottom
      );
    }

    /* Variation Init */
    function init() {
      document.querySelector("html body #main>div>div:first-child [class*='product-details-hero-cta-panel'] > div ").insertAdjacentElement("afterbegin", document.querySelector("html body #main>div>div:first-child>[class*='product-details-hero-header'] h1"));
      document.querySelector("html body #main>div [class*='product-details-hero-header'] h1 + div").innerText = 'Open a Small Business Banking Account';
      document.querySelector("html body #main>div>div:first-child>[class*='product-details-hero-header'] > div:first-child").insertAdjacentHTML("beforeend", egstring);
      document.querySelector("[class*='product-details'] > div:first-child [class*='content-block'] > div:first-child > div").insertAdjacentElement("beforeend", document.querySelector("[class*='product-details'] > div:first-child [class*='content-block'] > div:nth-child(3)"));

      document.querySelector("#main > [class*='product-details']").insertAdjacentHTML("beforebegin", egimagewrapper)
    }

    const checkForSticky = () => {
      if (!document.querySelector(".eg-sticky-container")) {
        document.body.insertAdjacentHTML("beforeend", sticky);
      }
      const elSib = document.querySelector("#main > [class*='product-details'] >  [class*='product-details-hero'] ");
      const el = document.querySelector("#main > [class*='product-details'] >  [class*='product-details-hero'] > div:first-child");
      if (elSib) {
        // not in view port
        if (isInViewport(elSib) === false) {
          if (el) {
            document.querySelector(".eg-sticky-container") && document.querySelector(".eg-sticky-container").classList.add("eg-sticky");
          }
        }
        // is in view port 
        else {
          document.querySelector(".eg-sticky-container") && document.querySelector(".eg-sticky-container").classList.remove("eg-sticky");
        }
      }
      window.addEventListener("scroll", checkForSticky);
    }

    /* Initialize variation */
    waitForElement("html body #main>div>div:first-child [class*='product-details-hero-cta-panel'] > div", init, 1000, 15000);
    waitForElement("html body", checkForSticky, 1000, 15000);
  } catch (e) {
    if (debug) console.log(e, "error in Test" + variation_name);
  }
})();