Merge branch 'feature/pagamento' into desenvolvimento

checkout/src/arquivos/assets/svgs/Rectangle 138.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect id="Rectangle 138" x="0.5" y="0.5" width="17" height="17" rx="2.5" stroke="#C4C4C4"/>
+</svg>

checkout/src/arquivos/js/components/Footer.js

@@ -55,7 +55,7 @@ export default class Footer {
         let target = this.checkoutVazio;
         let target2 = this.prateleira;
         let Footer = this.Footer;
-        const MeuCarrinho = this.MeuCarrinho
+        const MeuCarrinho = this.MeuCarrinho;
         let config = {
                     childList: false,
                     attributes: true,
@@ -63,7 +63,8 @@ export default class Footer {
                     attributeFilter:["style"],
                     subtree:false,
                     characterData:true,
-                    characterDataOldValue:true};
+                    characterDataOldValue:true
+                };
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
                 console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue,mutation);
@@ -71,18 +72,17 @@ export default class Footer {
                     if(mutation.oldValue == "display: none;"){
                         console.log("entrei no if",mutation.oldValue)
                         MeuCarrinho.classList.add('hide');
-                        target2.classList.add('hide')
+                        target2.classList.add('hide');
-                        Footer.classList.remove('footerCheckout__ComSlick')
+                        Footer.classList.remove('footerCheckout__ComSlick');
                     }else{
                         console.log("entrei no else",mutation.oldValue)
                         MeuCarrinho.classList.remove('hide');
-                        target2.classList.remove('hide')
+                        target2.classList.remove('hide');
-                        Footer.classList.add('footerCheckout__ComSlick')
+                        Footer.classList.add('footerCheckout__ComSlick');
                     }
                 }
             });
         });
-
         observer.observe(target, config);
     }
     async addCarrossel() {

checkout/src/arquivos/js/components/Header.js

@@ -21,6 +21,7 @@ export default class Header {
             timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
             interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
         });
+        this.totalizer = await waitElement(".totalizers-list");
         this.MeuCarrinho = await waitElement("#cart-title");
         this.Finalizar_Pedido = await waitElement("#orderform-title");
         this.Finalizar_Pagamento = await waitElement(".store-country-BRA");

checkout/src/arquivos/js/components/app.js

@@ -1,15 +1,21 @@
 import { waitElement } from "m3-utils";
 
 export default class Footer {
+
     constructor() {
+
         this.init();
         console.log("app.js funcionando")
+
     }
 
     async init() {
+
         await this.selectors();
         await this.event();
         await this.TextTransfer();
+        await this.onUpdate();
+
     }
 
     async selectors() {
@@ -45,17 +51,23 @@ export default class Footer {
         });
         this.tbody = await waitElement(".accordion-inner");
         this.LapisAzul = await waitElement(".icon-edit");
-        // this.HomeIcon = await waitElement(".delivery-address-title");
+        this.cartfixed = await waitElement(".cart-fixed");
         this.btnCep = await waitElement("#shipping-calculate-link");
+        this.Dados_profile_payment_wrapper = await waitElement("#payment-data");
         this.Dados_profile = document.querySelectorAll(".accordion-group")[1];
+        this.Dados_profile_payment = document.querySelectorAll(".accordion-group")[3];
+        this.safeP = document.createElement("p");
+        this.Dados_profileAll = document.querySelectorAll(".accordion-group");
         this.pay__Wrapper = document.createElement("div");
         this.Finalizar_btn = document.createElement("button");
         this.more = document.createElement("p");
+        this.PedidoSumary = document.createElement("h2");
         this.wrapper = document.createElement("tr");
     }
     async event() {
         this.btnCep.addEventListener("click",this.nonExist.bind(this))
-
+        window.addEventListener("hashchange", this.TextTransfer.bind(this));
+        window.addEventListener("hashchange", this.nonExist.bind(this));
     }
     async nonExist(){
         this.cep = await waitElement('.ship-postalCode small a');
@@ -72,19 +84,78 @@ export default class Footer {
         }
     }
     async TextTransfer(){
+        console.log(this.cartfixed.children[1].children[0].children[0],"tabela");
+        this.safeP.classList.add("safep")
+        this.cartfixed.children[0].classList.add("hide");
+        this.cartfixed.children[1].children[0].children[0].appendChild(this.PedidoSumary)
+        this.PedidoSumary.classList.add("payment_Sumary")
+        const payment_group =  this.Dados_profile_payment_wrapper;
         const dadosProfile =this.Dados_profile.children[0].children[0].children[1]
+        const Dados_profile_payment =this.Dados_profile_payment.children[0]
         const tbodywrapper = this.wrapper;
         const tbody = this.tbody.children[1].children[3];
         const table = this.table.children[0].children[0].children[1];
         const table_2 = this.table.children[0].children[0].children[2];
-        tbodywrapper.classList.add("flex")
+        tbodywrapper.classList.add("flex");
-        tbodywrapper.appendChild(this.more)
+        tbodywrapper.appendChild(this.more);
-        tbodywrapper.appendChild(this.Finalizar_btn)
+        tbodywrapper.appendChild(this.Finalizar_btn);
-        tbody.appendChild(tbodywrapper)
+        tbody.appendChild(tbodywrapper);
-        console.log(this.HomeIcon,"Lugar onde você colocara o icone")
+        // console.log(this.Dados_profileAll,"Todos os conteiners de pagamento")
+        // console.log(Dados_profile_payment,"Todos os conteiners de pagamento")
         const IconDev = document.querySelector(".footerCheckout__developedBy")
+        if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){
+            Dados_profile_payment.appendChild(this.safeP)
+            payment_group
+                            .children[0]
+                            .children[1]
+                            .children[0]
+                            .children[1]
+                            .children[4]
+                            .children[0]
+                            .children[1]
+                            .children[3]
+                            .children[2]
+                            .children[0]
+                            .innerHTML =`
+                                Cartão de Débito
+                            `
+            payment_group
+                            .children[0]
+                            .children[1]
+                            .children[0]
+                            .children[1]
+                            .children[4]
+                            .children[0]
+                            .children[1]
+                            .children[3]
+                            .children[9]
+                            .children[0]
+                            .innerHTML =
+                            `
+                                Boleto à Vista
+                            `
+            payment_group
+                            .children[0]
+                            .children[1]
+                            .children[0]
+                            .children[1]
+                            .children[4]
+                            .children[0]
+                            .children[1]
+                            .children[3]
+                            .children[10]
+                            .children[0]
+                            .innerHTML =`
+                                Boleto Faturado
+                            `
+        }
         this.Finalizar_btn.innerHTML =`
-            FINALIZAR COMPRA
+            <a id="Finalizar" href="https://m3academy.myvtex.com/checkout/#/email">
+                FINALIZAR COMPRA
+            </a>
+        `
+        this.PedidoSumary.innerHTML =`
+            Resumo do Pedido
         `
         dadosProfile.innerHTML =`
             Identificação
@@ -92,6 +163,9 @@ export default class Footer {
         this.more.innerHTML =`
             Escolher mais produtos
         `
+        this.safeP.innerHTML =`
+            Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
+        `
         table.innerHTML=
         `
             Frete
@@ -161,4 +235,103 @@ export default class Footer {
             CONTINUAR COMPRANDO
         `
     }
+    async onUpdate() {
+        const target =  this.Dados_profile_payment_wrapper;
+        const safeP = document.createElement("p");
+        safeP.innerHTML =`
+            Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
+        `
+        let config = {
+                    childList: false,
+                    attributes: true,
+                    attributeOldValue:true,
+                    subtree:false,
+                    characterData:true,
+                    characterDataOldValue:true
+                };
+        let observer = new MutationObserver((mutations) => {
+            mutations.forEach(function (mutation) {
+                console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue);
+                if(window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){
+                    console.log("o pai está aberto",mutation.oldValue)
+                    console.log(mutation)
+                    console.log(target)
+                    target.children[0].children[0].appendChild(safeP)
+                    target
+                        .children[0]
+                        .children[1]
+                        .children[0]
+                        .children[1]
+                        .children[4]
+                        .children[0]
+                        .children[1]
+                        .children[3]
+                        .children[2]
+                        .children[0]
+                        .innerHTML =`
+                            Cartão de Débito
+                        `
+                    target
+                        .children[0]
+                        .children[1]
+                        .children[0]
+                        .children[1]
+                        .children[4]
+                        .children[0]
+                        .children[1]
+                        .children[3]
+                        .children[9]
+                        .children[0]
+                        .innerHTML =`
+                            Boleto à Vista
+                        `
+                    target
+                        .children[0]
+                        .children[1]
+                        .children[0]
+                        .children[1]
+                        .children[4]
+                        .children[0]
+                        .children[1]
+                        .children[3]
+                        .children[10]
+                        .children[0]
+                        .innerHTML =`
+                            Boleto Faturado
+                        `
+                    console.log(target
+                                .children[0]
+                                .children[1]
+                                .children[0]
+                                .children[1]
+                                .children[4]
+                                .children[0]
+                                .children[1]
+                                .children[3]
+                                .children[10]
+                                .children[0]
+                                )
+                }
+                else{
+                    console.log("o pai está fechado",mutation.oldValue);
+                    console.log(mutation)
+                    console.log(target)
+                    console.log(target
+                        .children[0]
+                        .children[1]
+                        .children[0]
+                        .children[1]
+                        .children[4]
+                        .children[0]
+                        .children[1]
+                        .children[3]
+                        .children[10]
+                        .children[0]
+                        )
+                }
+            });
+        });
+
+        observer.observe(target, config);
+    }
 }

checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss

@@ -241,7 +241,7 @@
 						border: 1px solid $color-gray4;
 						border-radius: 0;
 
-						label {
+						label{
 							background-color: $color-white;
 							box-shadow: none;
 							color: #303030;
@@ -265,11 +265,31 @@
 				}
 
 				.address-summary {
+                    position: relative;
 					background: none;
 					border-color: $color-gray4;
-					border-radius: 0;
 					color: #303030;
-					padding: 12px;
+                    padding: 26px;
+                    .street,
+                    .neighborhood{
+                        margin-left: 18px;
+                    }
+                    .postalCode{
+                        margin-left: 20px;
+                    }
+                    &::before{
+                        content: "";
+                        position: absolute;
+                        left: 0;
+                        bottom: 33px;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                        width: 24px;
+                        height: 24px;
+                        background: no-repeat;
+                        background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
+                        background-size: 24px;
+                    }
 
 					@include mq(md, max) {
 						background-position: 8px 9px;
@@ -306,8 +326,14 @@
 				}
 
 				.vtex-omnishipping-1-x-deliveryOptionActive {
-					text-shadow: 1.3px 1px lighten($color-black, 50);
+					color:#7D7D7D;
+                    text-shadow: 0.3px 1px #292929;
+
 				}
+                .vtex-omnishipping-1-x-deliveryOptionInactive{
+					color:rgba(196, 196, 196, 1) !important;
+
+                }
 			}
 		}
 	}

checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss

@@ -1,9 +1,31 @@
 @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
+#Finalizar{
+    text-decoration: none;
+    color: $color-black;
+}
+
 .container {
     @include mq(md, max) {
         width: 100%;
     }
 }
+.cart-fixed{
+    .summary-template-holder{
+        border-bottom: 1px solid $color-gray5;
+        border-left: 1px solid $color-gray5;
+        border-right: 1px solid $color-gray5;
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+    }
+    a {
+        position: relative;
+        left: -15px;
+    }
+    small{
+        left: -42px;
+        position: relative;
+    }
+}
 .totalizers-list{
     td{
         height: 0;
@@ -55,7 +77,11 @@
         display: none;
     }
     .cart {
-        border: 3px solid $color-gray3;
+        border-top: 1px solid $color-gray5;
+        border-left: 1px solid $color-gray5;
+        border-right: 1px solid $color-gray5;
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
@@ -72,11 +98,13 @@
         }
     }
     .cart-fixed.affix {
+        top: -40px;
         position: relative !important;
     }
     .cart-fixed {
         font-family: $font-family;
         width: 100%;
+        height: 100% !important;
         h2 {
             background: $color-white;
             border: none;
@@ -94,7 +122,7 @@
         }
 
         .cart {
-            border: 1px solid $color-gray4;
+            // border: 1px solid $color-gray4;
 
             ul li {
                 border-top: none;
@@ -104,7 +132,6 @@
                 &:not(:first-child) {
                     margin-top: 8px;
                     padding-top: 8px;
-                    border-top: 1px solid #e5e5e5;
                 }
 
                 .shipping-date,
@@ -117,6 +144,7 @@
         .summary-template-holder {
             border-top: none;
             background: $color-white;
+            width: 330px;
         }
 
         #go-to-cart-button a {

checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss

@@ -9,37 +9,112 @@ body .container-main.container-order-form .orderform-template.active {
         width: 66.1132%;
     }
 }
+.body-order-form{
+    .totalizers-list{
+        tr{
+                border-bottom: 1px solid black;
+                border-top: 1px solid black;
+                margin-right: 17px;
+                left: 20px;
+                position: relative;
+                text-align-last: start;
+                .info{
+                    width: 100% !important;
+                }
+        }
+    }
+    tfoot{
+        .info{
+            width: 93% !important;
+        }
+        tr{
+            border-top: 1px solid;
+            margin-right: 17px;
+            left: 20px;
+            position: relative;
+            text-align-last: start;
+            text-indent: -17px;
+        }
+
+    }
+}
+.cart-fixed {
+    top: -42px;
+}
+.cart-items{
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    .payment_Sumary{
+        font-family: $font-family-secundary;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 19px;
+        margin: 24px 0px 34px 0;
+    }
+}
+.hproduct{
+    .fn{
+        width: 115px !important;
+        height: 34px;
+        white-space: break-spaces !important;
+        color: $color-black;
+        font-family: $font-family-secundary;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+    }
+}
+.summary-cart-template-holder{
+    width: 332px;
+}
 #is-corporate-client{
     display: none;
 }
+.photo{
+    width: 60px !important;
+    height: 60px !important;
+    margin-left: 16px;
+}
 #postalCode-finished-loading{
     .shipping-method-toggle{
-        background: transparent !important;
+        border: 1px solid $color-black;
-        border-radius: 16px !important;
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-        border: 1px solid $color-black !important;
+        border-radius: 100px;
     }
     div{
         background: transparent !important;
-        border-radius: 16px !important;
+        border-radius: 32px !important;
+        box-shadow: 0px 0px 3px rgba(196, 196, 196, 1);
     }
     span{
-        color: $color-black;
+        // color:#7D7D7D;
-        text-shadow: none !important;
+        // text-shadow: 0.3px 1px #292929 !important;
         text-transform: uppercase;
+        font-family: $font-family;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        font-style: normal;
+        box-sizing: border-box;
     }
 }
-#ship-number{
+#ship-number,
-    width: 296px;
+#ship-receiverName,
-    height: 35px;
+#ship-postalCode,
-}
 #ship-complement{
-    width: 296px;
+    width: 296px !important;
-    height: 35px;
+    height: 35px !important;
+    max-width: 100%!important;
 }
-#ship-receiverName{
+#ship-postalCode{
-    width: 296px;
+    margin-bottom: 10px;
-    height: 35px;
+    width: 172px !important;
+    height: 36px !important;
+    max-width: 200px !important;
 }
+
 .ship-country{
     display: none;
 }
@@ -69,14 +144,14 @@ body .container-main.container-order-form .orderform-template.active {
     }
 }
 .accordion-group{
-    width: 332px;
     border-radius: 4px!important;
     border: 1px solid $color-gray3;
     border: 1px solid $color-gray6 !important;
     .newsletter-text,
     p,
     label{
-        color: #7D7D7D !important;
+        color: #7D7D7D;
+        font-weight: 700;
     }
     input,
     .cart{
@@ -127,7 +202,7 @@ body .container-main.container-order-form .orderform-template.active {
     }
 }
 #payment-data-submit{
-        width: 100% !important;
+        width: 88% !important;
         background: $color-green_2 !important;
         text-transform: uppercase !important;
         height: 42px !important;
@@ -135,7 +210,7 @@ body .container-main.container-order-form .orderform-template.active {
         filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 #payment-data{
-    width: 719px !important;
+    right: 0;
     #payment-group-custom204PaymentGroupPaymentGroup,
     #payment-group-SPEIPaymentGroup,
     #payment-group-MercadoPagoPaymentGroup,
@@ -150,17 +225,17 @@ body .container-main.container-order-form .orderform-template.active {
     #payment-group-creditDirectSalePaymentGroup{
         display: none;
     }
+    .btn-small{
+        background: transparent !important;
+        border: 0 !important;
+        &:hover{
+            border: 0 !important;
+        }
+    }
     .form-step{
         display: flex;
         height: 452px;
     }
-    .accordion-group{
-        width: 680px !important;
-        height: 452px !important;
-    }
-    // h3{
-    //     display: block !important;
-    // }
     span,
     a{
         width: 210px;
@@ -186,9 +261,30 @@ body .container-main.container-order-form .orderform-template.active {
     .steps-view{
         position: absolute;
         right: 0;
-        top: -2px;
+        top: 33px;
     }
 }
 .PaymentCardHolderDocument{
     display: none !important;
 }
+.payment-group-item.active{
+    margin: 0 0 0 5px;
+}
+#client-profile-data{
+    .filled{
+        width: 332px !important;
+        height: 164px !important;
+    }
+}
+.safep{
+    width: 622px;
+    height: 48px;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 400 !important;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: -0.01em;
+}
+
+