Loungerie - T000M - Disposição de Boletos

<style>
  /* asda */
  .nav-tabs {
  border-bottom: none !important;
  margin-bottom: 0;
}
.nav-tabs li {
  width: calc(50% - 2px);
  border: 1px solid #f7b7c4;
  margin-bottom: unset !important;
}
.nav-tabs li.active {
  background-color: #f7b7c4 !important;
}
.nav-tabs li.active a {
  font-weight: 900;
  background-color: #f7b7c4 !important;
  font-size: 12px;
  color: #000 !important;
  text-align: center;
}
.nav-tabs li a {
  border: none !important;
  border-radius: 0;
  margin-right: 0 !important;
  text-transform: uppercase;
  font-size: 12px;
  color: #000;
  text-align: center;
}
.nav-tabs .barra-juni {
  height: 2px;
  background: #000;
  display: block;
  margin-top: 21px;
  position: relative;
  top: 25px !important;
  width: calc(100% + 29px);
}

.steps-views {
  padding-top: 20px;
  min-height: 500px;
}

#payment-group-creditCardPaymentGroup,
#payment-group-debitCardPaymentGroup {
  display: none;
}

.container-order-form
  .orderform-template
  #payment-data
  .box-step-content
  fieldset.payment-group
  .payment-group-list-btn
  a {
  border-top: 2px solid #000;
}

.container-order-form
  .orderform-template
  #payment-data
  .box-step-content
  .steps-view {
  width: 100%;
  background: transparent;
}

.t000m.container {
  background: #f7b7c4;
  margin-bottom: 1.5rem;
}
.t000m.main-text {
  font-size: 10.5px;
  text-transform: uppercase;
  font-weight: bolder;
  color: #000;
  text-align: center;
  position: relative;
  padding: 5px 0px 5px 20px;
  line-height: 1.2;
  margin: 0;
  display: flex;
}
.t000m.sub-text {
  height: 90px;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  color: #000;
  padding: 0 5px;
  line-height: 1.3;
  margin-top: -5px;
}

#infoContent {
  padding: 0 25px;
}

.benefits-container {
  list-style: none;
  margin: 0;
  padding: 0;
}
.benefits-container li {
  display: flex;
  align-items: center;
  height: 50px;
  margin: 15px 0;
}
.benefits-container li:first-child {
  margin-top: 0 !important;
}
.benefits-container li:last-child {
  margin-bottom: 0 !important;
}
.benefits-container li .img-fake {
  height: 100%;
  width: 50px;
  padding: 0px 5px 0 0;
  display: flex;
  align-items: center;
  border-right: 2px solid #000;
}
.benefits-container li .img-fake img {
  width: 40px;
  height: 40px;
}
.benefits-container li .benefit-text {
  font-size: 11px;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
  margin-left: 16px;
  flex: 1;
}

.btn-fechar-container {
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}

#closeContent {
  border: 1px solid #000;
  background: transparent;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

.info-container {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.info-container .info-detail {
  color: #fff;
  background: #000;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  text-transform: lowercase;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
}

.hide-show {
  display: none;
}

.bubble-juni {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: #f7b7c4;
  border-bottom: 0;
  border-left: 0;
  margin-left: -10px;
  transform: rotate(225deg);
  margin-bottom: -20px;
  top: 21px;
  left: 21px;
  transition: 0.2s;
}

.truck-class {
  width: 35px !important;
  height: 35px !important;
}

#payment-group-bankInvoicePaymentGroup .payment-group-item-text {
  background-image: none !important;
  padding-left: 15px !important;
}

#payment-group-bankInvoicePaymentGroup {
  padding-left: 0;
}
#payment-group-bankInvoicePaymentGroup > span {
  padding-left: 0;
}

@media screen and (max-width: 320px) {
  .t000m.main-text {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: bolder;
    color: #000;
    text-align: center;
    position: relative;
    padding: 5px 11px;
    line-height: 1.2;
    margin: 0;
  }

  .bubble-juni {
    top: 16px;
  }

  .nav-tabs li.active a {
    font-weight: 900;
    background-color: #f7b7c4 !important;
    font-size: 9px;
    color: #000 !important;
    text-align: center;
  }

  .nav-tabs li a {
    border: none !important;
    border-radius: 0;
    margin-right: 0 !important;
    text-transform: uppercase;
    font-size: 10px;
    color: #000;
    text-align: center;
  }

  .info-detail {
    right: 3px;
    width: 8px;
    height: 8px;
    top: 10px;
  }

  .t000m.sub-text {
    height: 70px;
    font-size: 11px;
  }

  .benefits-container li .img-fake {
    height: 100%;
    width: 40px;
  }

  .benefits-container li .img-fake img {
    width: 35px;
    height: 35px;
  }

  .benefits-container li {
    display: flex;
    align-items: center;
    height: 50px;
    margin: 15px -11px;
  }

  .benefits-container li .benefit-text {
    font-size: 10px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
    margin-left: 13px;
    margin-right: -40px;
  }

  #closeContent {
    height: 25px;
    width: 25px;
    font-size: 18px;
  }

  .btn-fechar-container {
    height: 70px;
  }
}

/*# sourceMappingURL=styles.css.map */

</style>
<script>
  class T000M {
  constructor() {
    this.container = document.querySelector(".link.link-gift-card");
    this.pagamentoKEY = "t000m-payment";
    this.infoClickedKEY = "t000m-info-clicked";
    this.tooltipOpened = false;
    this.buildTabs();
    this.buildTooltip();
    this.valePresenteClick();
    this.alteracaoDoTextoDoBoletoBancario();
    this.iniciaLocalStorage();
  }

  buildTabs() {
    const { container } = this;
    const html = `
            <div class="tabbable">
                <ul class="nav nav-tabs">
                  <li class="active">
                    <a href="#tabCredito" data-toggle="tab" id="btCredito">Cartão de crédito</a>
                  </li>
                  <li>
                    <a href="#tabDebito" data-toggle="tab" id="btDebito">Cartão de débito</a>
                  </li>
                  <div class="barra-juni"></div>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tabCredito">
                    </div>
                    <div class="tab-pane" id="tabDebito">
                    </div>
                </div>
            </div>
          `;

    // Adiciona o HTML ao container
    container.insertAdjacentHTML("afterend", html);

    // Preenche o tab inicial
    $("#tabCredito").append($(".steps-view"));

    // Adiciona um clique ao tab que vai atualizar a
    // view contendo o formulário
    $("#btCredito").on("click", () => {
      $(".barra-juni").css("display", "block");
      $("#payment-group-creditCardPaymentGroup").click();
      $("#tabCredito").append($(".steps-view"));
      this.updateLocalStorage(this.pagamentoKEY, "Cartão de crédito");
      this.moveBubbleToLeft();
    });

    // Adiciona um clique ao tab
    $("#btDebito").on("click", () => {
      $(".barra-juni").css("display", "block");
      $("#payment-group-debitCardPaymentGroup").click();
      $("#tabDebito").append($(".steps-view"));
      this.updateLocalStorage(this.pagamentoKEY, "Cartão de débito");
      this.moveBubbleToRight();
    });

    // Clique no boleto
    $("#payment-group-bankInvoicePaymentGroup").on("click", () => {
      const { pagamentoKEY, updateLocalStorage } = this;
      updateLocalStorage(pagamentoKEY, "Boleto bancário");
      $(".barra-juni").css("display", "none");
      // Bota as infos de pagamento abaixo da opção de boleto
      $(".steps-view").insertAfter($("#payment-group-bankInvoicePaymentGroup"));
      // Tira o active das tabs de cartão
      const $tabActive = $(".nav.nav-tabs").find("li.active");
      if ($tabActive.length > 0) {
        $tabActive.removeClass("active");

        $(".bubble-juni").css("display", "none");
      }
    });
  }

  buildTooltip() {
    const { container } = this;
    const data = {
      mainText:
        "Nosso estoque é limitado! pague no cartão <br> de crédito ou débito e garanta seu produto.",
      subText: "Benefícios na compra no cartão de crédito ou débito:",
      benefits: [
        {
          icon: "#$(ContentManager:clock.png)!",
          classIcon: "clock-class",
          text:
            "Sua compra é aprovada<br> automaticamente e seus produtos<br> são reservados em nosso estoque."
        },
        {
          icon: "#$(ContentManager:delivery-truck.png)!",
          classIcon: "truck-class",
          text: "Seu pedido chega mais rápido."
        },
        {
          icon: "#$(ContentManager:delivery-box.png)!",
          classIcon: "box-class",
          text:
            "Também temos Troca Fácil para<br> todas as formas de pagamento."
        }
      ]
    };

    // prettier-ignore
    const benefitsHTML = `<ul class="benefits-container">
          ${data.benefits.map(
            benefit => `<li class="benefit">
            <div class="img-fake">
              <img src="${benefit.icon}" class="${benefit.classIcon}"></img>
            </div>
            <div class="benefit-text">
              ${benefit.text}
            </div>
          </li>`
          ).join('')}
        </ul>`;

    const tooltipHTML = `<div class="t000m container">
            <header class="t000m main-text" id="openContent">
              ${data.mainText}
              <div class="info-container">
                <span class="info-detail">i</span>
              </div>
            </header>
            <div class="bubble-juni"></div>
            <div class="hide-show" id="infoContent">
              <div class="t000m sub-text">${data.subText}</div>
              ${benefitsHTML}
              <div class="btn-fechar-container">
                <div role="button" id="closeContent">✕</button>
              </div>
            </div>
        </div>`;

    container.insertAdjacentHTML("afterend", tooltipHTML);

    $("#openContent").on("click", () => {
      const { updateLocalStorage, infoClickedKEY, tooltipOpened } = this;
      if(tooltipOpened) {
        $("#infoContent").slideUp();
        this.tooltipOpened = false;
      } else {
        $("#infoContent").slideDown();
        this.tooltipOpened = true;
      }

      updateLocalStorage(infoClickedKEY, "Clicado");
    });

    $("#closeContent").on("click", () => {
      this.tooltipOpened = false;
      $("#infoContent").slideUp();
    });
  }

  moveBubbleToRight() {
    const bubble = $(".bubble-juni");
    bubble.css("left", "unset");
    bubble.css("right", "21px");
    bubble.css("display", "block");
  }

  moveBubbleToLeft() {
    const bubble = $(".bubble-juni");
    bubble.css("left", "21px");
    bubble.css("right", "unset");
    bubble.css("display", "block");
  }

  valePresenteClick() {
    $("#show-gift-card-group").click(() => {
      // Espera o input de vale presente aparecer
      when(() => $(".gift-card-section.form-step.box-default").length > 0).done(
        () => {
          // $($(".gift-card-section.form-step.box-default")).insertAfter(
          //   $(".box-step-content")
          // );
        }
      );
    });
    const container = $(".gift-card-section.form-step.box-default");
  }

  alteracaoDoTextoDoBoletoBancario() {
    const btn = document.querySelector(
      "#payment-group-bankInvoicePaymentGroup .payment-group-item-text"
    );

    btn.innerText = "Pagar com boleto bancário";
  }

  iniciaLocalStorage() {
    const { pagamentoKEY, infoClickedKEY, updateLocalStorage } = this;
    updateLocalStorage(pagamentoKEY, "Cartão de crédito");
    updateLocalStorage(infoClickedKEY, "Não clicado");
  }

  updateLocalStorage(key, value) {
    localStorage.setItem(key, value);
  }
}

// when(() => true).done(() => new T000M());
setTimeout(() => {
  new T000M();
}, 1500);


</script>