SHARE
TWEET

Loungerie - T000M - Disposição de Boletos

a guest Dec 9th, 2019 140 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style>
  2.   /* asda */
  3.   .nav-tabs {
  4.   border-bottom: none !important;
  5.   margin-bottom: 0;
  6. }
  7. .nav-tabs li {
  8.   width: calc(50% - 2px);
  9.   border: 1px solid #f7b7c4;
  10.   margin-bottom: unset !important;
  11. }
  12. .nav-tabs li.active {
  13.   background-color: #f7b7c4 !important;
  14. }
  15. .nav-tabs li.active a {
  16.   font-weight: 900;
  17.   background-color: #f7b7c4 !important;
  18.   font-size: 12px;
  19.   color: #000 !important;
  20.   text-align: center;
  21. }
  22. .nav-tabs li a {
  23.   border: none !important;
  24.   border-radius: 0;
  25.   margin-right: 0 !important;
  26.   text-transform: uppercase;
  27.   font-size: 12px;
  28.   color: #000;
  29.   text-align: center;
  30. }
  31. .nav-tabs .barra-juni {
  32.   height: 2px;
  33.   background: #000;
  34.   display: block;
  35.   margin-top: 21px;
  36.   position: relative;
  37.   top: 25px !important;
  38.   width: calc(100% + 29px);
  39. }
  40.  
  41. .steps-views {
  42.   padding-top: 20px;
  43.   min-height: 500px;
  44. }
  45.  
  46. #payment-group-creditCardPaymentGroup,
  47. #payment-group-debitCardPaymentGroup {
  48.   display: none;
  49. }
  50.  
  51. .container-order-form
  52.   .orderform-template
  53.   #payment-data
  54.   .box-step-content
  55.   fieldset.payment-group
  56.   .payment-group-list-btn
  57.   a {
  58.   border-top: 2px solid #000;
  59. }
  60.  
  61. .container-order-form
  62.   .orderform-template
  63.   #payment-data
  64.   .box-step-content
  65.   .steps-view {
  66.   width: 100%;
  67.   background: transparent;
  68. }
  69.  
  70. .t000m.container {
  71.   background: #f7b7c4;
  72.   margin-bottom: 1.5rem;
  73. }
  74. .t000m.main-text {
  75.   font-size: 10.5px;
  76.   text-transform: uppercase;
  77.   font-weight: bolder;
  78.   color: #000;
  79.   text-align: center;
  80.   position: relative;
  81.   padding: 5px 0px 5px 20px;
  82.   line-height: 1.2;
  83.   margin: 0;
  84.   display: flex;
  85. }
  86. .t000m.sub-text {
  87.   height: 90px;
  88.   display: flex;
  89.   align-items: center;
  90.   text-align: center;
  91.   font-size: 14px;
  92.   text-transform: uppercase;
  93.   font-weight: 700;
  94.   color: #000;
  95.   padding: 0 5px;
  96.   line-height: 1.3;
  97.   margin-top: -5px;
  98. }
  99.  
  100. #infoContent {
  101.   padding: 0 25px;
  102. }
  103.  
  104. .benefits-container {
  105.   list-style: none;
  106.   margin: 0;
  107.   padding: 0;
  108. }
  109. .benefits-container li {
  110.   display: flex;
  111.   align-items: center;
  112.   height: 50px;
  113.   margin: 15px 0;
  114. }
  115. .benefits-container li:first-child {
  116.   margin-top: 0 !important;
  117. }
  118. .benefits-container li:last-child {
  119.   margin-bottom: 0 !important;
  120. }
  121. .benefits-container li .img-fake {
  122.   height: 100%;
  123.   width: 50px;
  124.   padding: 0px 5px 0 0;
  125.   display: flex;
  126.   align-items: center;
  127.   border-right: 2px solid #000;
  128. }
  129. .benefits-container li .img-fake img {
  130.   width: 40px;
  131.   height: 40px;
  132. }
  133. .benefits-container li .benefit-text {
  134.   font-size: 11px;
  135.   font-weight: 700;
  136.   color: #000;
  137.   line-height: 1.3;
  138.   margin-left: 16px;
  139.   flex: 1;
  140. }
  141.  
  142. .btn-fechar-container {
  143.   display: flex;
  144.   justify-content: center;
  145.   height: 100px;
  146.   align-items: center;
  147. }
  148.  
  149. #closeContent {
  150.   border: 1px solid #000;
  151.   background: transparent;
  152.   height: 35px;
  153.   width: 35px;
  154.   border-radius: 50%;
  155.   cursor: pointer;
  156.   font-size: 25px;
  157.   display: flex;
  158.   align-items: center;
  159.   justify-content: center;
  160.   color: #000;
  161. }
  162.  
  163. .info-container {
  164.   display: flex;
  165.   align-items: center;
  166.   flex: 1;
  167.   justify-content: center;
  168. }
  169. .info-container .info-detail {
  170.   color: #fff;
  171.   background: #000;
  172.   width: 10px;
  173.   height: 10px;
  174.   border-radius: 50%;
  175.   text-transform: lowercase;
  176.   display: flex;
  177.   align-items: center;
  178.   justify-content: center;
  179.   font-size: 7px;
  180. }
  181.  
  182. .hide-show {
  183.   display: none;
  184. }
  185.  
  186. .bubble-juni {
  187.   content: "";
  188.   position: absolute;
  189.   bottom: 0;
  190.   width: 0;
  191.   height: 0;
  192.   border: 20px solid transparent;
  193.   border-top-color: #f7b7c4;
  194.   border-bottom: 0;
  195.   border-left: 0;
  196.   margin-left: -10px;
  197.   transform: rotate(225deg);
  198.   margin-bottom: -20px;
  199.   top: 21px;
  200.   left: 21px;
  201.   transition: 0.2s;
  202. }
  203.  
  204. .truck-class {
  205.   width: 35px !important;
  206.   height: 35px !important;
  207. }
  208.  
  209. #payment-group-bankInvoicePaymentGroup .payment-group-item-text {
  210.   background-image: none !important;
  211.   padding-left: 15px !important;
  212. }
  213.  
  214. #payment-group-bankInvoicePaymentGroup {
  215.   padding-left: 0;
  216. }
  217. #payment-group-bankInvoicePaymentGroup > span {
  218.   padding-left: 0;
  219. }
  220.  
  221. @media screen and (max-width: 320px) {
  222.   .t000m.main-text {
  223.     font-size: 9px;
  224.     text-transform: uppercase;
  225.     font-weight: bolder;
  226.     color: #000;
  227.     text-align: center;
  228.     position: relative;
  229.     padding: 5px 11px;
  230.     line-height: 1.2;
  231.     margin: 0;
  232.   }
  233.  
  234.   .bubble-juni {
  235.     top: 16px;
  236.   }
  237.  
  238.   .nav-tabs li.active a {
  239.     font-weight: 900;
  240.     background-color: #f7b7c4 !important;
  241.     font-size: 9px;
  242.     color: #000 !important;
  243.     text-align: center;
  244.   }
  245.  
  246.   .nav-tabs li a {
  247.     border: none !important;
  248.     border-radius: 0;
  249.     margin-right: 0 !important;
  250.     text-transform: uppercase;
  251.     font-size: 10px;
  252.     color: #000;
  253.     text-align: center;
  254.   }
  255.  
  256.   .info-detail {
  257.     right: 3px;
  258.     width: 8px;
  259.     height: 8px;
  260.     top: 10px;
  261.   }
  262.  
  263.   .t000m.sub-text {
  264.     height: 70px;
  265.     font-size: 11px;
  266.   }
  267.  
  268.   .benefits-container li .img-fake {
  269.     height: 100%;
  270.     width: 40px;
  271.   }
  272.  
  273.   .benefits-container li .img-fake img {
  274.     width: 35px;
  275.     height: 35px;
  276.   }
  277.  
  278.   .benefits-container li {
  279.     display: flex;
  280.     align-items: center;
  281.     height: 50px;
  282.     margin: 15px -11px;
  283.   }
  284.  
  285.   .benefits-container li .benefit-text {
  286.     font-size: 10px;
  287.     font-weight: 700;
  288.     color: #000;
  289.     line-height: 1.3;
  290.     margin-left: 13px;
  291.     margin-right: -40px;
  292.   }
  293.  
  294.   #closeContent {
  295.     height: 25px;
  296.     width: 25px;
  297.     font-size: 18px;
  298.   }
  299.  
  300.   .btn-fechar-container {
  301.     height: 70px;
  302.   }
  303. }
  304.  
  305. /*# sourceMappingURL=styles.css.map */
  306.  
  307. </style>
  308. <script>
  309.   class T000M {
  310.   constructor() {
  311.     this.container = document.querySelector(".link.link-gift-card");
  312.     this.pagamentoKEY = "t000m-payment";
  313.     this.infoClickedKEY = "t000m-info-clicked";
  314.     this.tooltipOpened = false;
  315.     this.buildTabs();
  316.     this.buildTooltip();
  317.     this.valePresenteClick();
  318.     this.alteracaoDoTextoDoBoletoBancario();
  319.     this.iniciaLocalStorage();
  320.   }
  321.  
  322.   buildTabs() {
  323.     const { container } = this;
  324.     const html = `
  325.             <div class="tabbable">
  326.                 <ul class="nav nav-tabs">
  327.                   <li class="active">
  328.                     <a href="#tabCredito" data-toggle="tab" id="btCredito">Cartão de crédito</a>
  329.                   </li>
  330.                   <li>
  331.                     <a href="#tabDebito" data-toggle="tab" id="btDebito">Cartão de débito</a>
  332.                   </li>
  333.                   <div class="barra-juni"></div>
  334.                 </ul>
  335.                 <div class="tab-content">
  336.                     <div class="tab-pane active" id="tabCredito">
  337.                     </div>
  338.                     <div class="tab-pane" id="tabDebito">
  339.                     </div>
  340.                 </div>
  341.             </div>
  342.           `;
  343.  
  344.     // Adiciona o HTML ao container
  345.     container.insertAdjacentHTML("afterend", html);
  346.  
  347.     // Preenche o tab inicial
  348.     $("#tabCredito").append($(".steps-view"));
  349.  
  350.     // Adiciona um clique ao tab que vai atualizar a
  351.     // view contendo o formulário
  352.     $("#btCredito").on("click", () => {
  353.       $(".barra-juni").css("display", "block");
  354.       $("#payment-group-creditCardPaymentGroup").click();
  355.       $("#tabCredito").append($(".steps-view"));
  356.       this.updateLocalStorage(this.pagamentoKEY, "Cartão de crédito");
  357.       this.moveBubbleToLeft();
  358.     });
  359.  
  360.     // Adiciona um clique ao tab
  361.     $("#btDebito").on("click", () => {
  362.       $(".barra-juni").css("display", "block");
  363.       $("#payment-group-debitCardPaymentGroup").click();
  364.       $("#tabDebito").append($(".steps-view"));
  365.       this.updateLocalStorage(this.pagamentoKEY, "Cartão de débito");
  366.       this.moveBubbleToRight();
  367.     });
  368.  
  369.     // Clique no boleto
  370.     $("#payment-group-bankInvoicePaymentGroup").on("click", () => {
  371.       const { pagamentoKEY, updateLocalStorage } = this;
  372.       updateLocalStorage(pagamentoKEY, "Boleto bancário");
  373.       $(".barra-juni").css("display", "none");
  374.       // Bota as infos de pagamento abaixo da opção de boleto
  375.       $(".steps-view").insertAfter($("#payment-group-bankInvoicePaymentGroup"));
  376.       // Tira o active das tabs de cartão
  377.       const $tabActive = $(".nav.nav-tabs").find("li.active");
  378.       if ($tabActive.length > 0) {
  379.         $tabActive.removeClass("active");
  380.  
  381.         $(".bubble-juni").css("display", "none");
  382.       }
  383.     });
  384.   }
  385.  
  386.   buildTooltip() {
  387.     const { container } = this;
  388.     const data = {
  389.       mainText:
  390.         "Nosso estoque é limitado! pague no cartão <br> de crédito ou débito e garanta seu produto.",
  391.       subText: "Benefícios na compra no cartão de crédito ou débito:",
  392.       benefits: [
  393.         {
  394.           icon: "#$(ContentManager:clock.png)!",
  395.           classIcon: "clock-class",
  396.           text:
  397.             "Sua compra é aprovada<br> automaticamente e seus produtos<br> são reservados em nosso estoque."
  398.         },
  399.         {
  400.           icon: "#$(ContentManager:delivery-truck.png)!",
  401.           classIcon: "truck-class",
  402.           text: "Seu pedido chega mais rápido."
  403.         },
  404.         {
  405.           icon: "#$(ContentManager:delivery-box.png)!",
  406.           classIcon: "box-class",
  407.           text:
  408.             "Também temos Troca Fácil para<br> todas as formas de pagamento."
  409.         }
  410.       ]
  411.     };
  412.  
  413.     // prettier-ignore
  414.     const benefitsHTML = `<ul class="benefits-container">
  415.           ${data.benefits.map(
  416.             benefit => `<li class="benefit">
  417.             <div class="img-fake">
  418.               <img src="${benefit.icon}" class="${benefit.classIcon}"></img>
  419.             </div>
  420.             <div class="benefit-text">
  421.               ${benefit.text}
  422.             </div>
  423.           </li>`
  424.           ).join('')}
  425.         </ul>`;
  426.  
  427.     const tooltipHTML = `<div class="t000m container">
  428.             <header class="t000m main-text" id="openContent">
  429.               ${data.mainText}
  430.               <div class="info-container">
  431.                 <span class="info-detail">i</span>
  432.               </div>
  433.             </header>
  434.             <div class="bubble-juni"></div>
  435.             <div class="hide-show" id="infoContent">
  436.               <div class="t000m sub-text">${data.subText}</div>
  437.               ${benefitsHTML}
  438.               <div class="btn-fechar-container">
  439.                 <div role="button" id="closeContent"></button>
  440.               </div>
  441.             </div>
  442.         </div>`;
  443.  
  444.     container.insertAdjacentHTML("afterend", tooltipHTML);
  445.  
  446.     $("#openContent").on("click", () => {
  447.       const { updateLocalStorage, infoClickedKEY, tooltipOpened } = this;
  448.       if(tooltipOpened) {
  449.         $("#infoContent").slideUp();
  450.         this.tooltipOpened = false;
  451.       } else {
  452.         $("#infoContent").slideDown();
  453.         this.tooltipOpened = true;
  454.       }
  455.      
  456.       updateLocalStorage(infoClickedKEY, "Clicado");
  457.     });
  458.  
  459.     $("#closeContent").on("click", () => {
  460.       this.tooltipOpened = false;
  461.       $("#infoContent").slideUp();
  462.     });
  463.   }
  464.  
  465.   moveBubbleToRight() {
  466.     const bubble = $(".bubble-juni");
  467.     bubble.css("left", "unset");
  468.     bubble.css("right", "21px");
  469.     bubble.css("display", "block");
  470.   }
  471.  
  472.   moveBubbleToLeft() {
  473.     const bubble = $(".bubble-juni");
  474.     bubble.css("left", "21px");
  475.     bubble.css("right", "unset");
  476.     bubble.css("display", "block");
  477.   }
  478.  
  479.   valePresenteClick() {
  480.     $("#show-gift-card-group").click(() => {
  481.       // Espera o input de vale presente aparecer
  482.       when(() => $(".gift-card-section.form-step.box-default").length > 0).done(
  483.         () => {
  484.           // $($(".gift-card-section.form-step.box-default")).insertAfter(
  485.           //   $(".box-step-content")
  486.           // );
  487.         }
  488.       );
  489.     });
  490.     const container = $(".gift-card-section.form-step.box-default");
  491.   }
  492.  
  493.   alteracaoDoTextoDoBoletoBancario() {
  494.     const btn = document.querySelector(
  495.       "#payment-group-bankInvoicePaymentGroup .payment-group-item-text"
  496.     );
  497.  
  498.     btn.innerText = "Pagar com boleto bancário";
  499.   }
  500.  
  501.   iniciaLocalStorage() {
  502.     const { pagamentoKEY, infoClickedKEY, updateLocalStorage } = this;
  503.     updateLocalStorage(pagamentoKEY, "Cartão de crédito");
  504.     updateLocalStorage(infoClickedKEY, "Não clicado");
  505.   }
  506.  
  507.   updateLocalStorage(key, value) {
  508.     localStorage.setItem(key, value);
  509.   }
  510. }
  511.  
  512. // when(() => true).done(() => new T000M());
  513. setTimeout(() => {
  514.   new T000M();
  515. }, 1500);
  516.  
  517.  
  518. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top