Feat(Checkout): Cria Css de elementos do checkout vazio(Botão, linhas) e Cria Js para colocar icones no Footer

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

@@ -8,12 +8,16 @@ export default class Footer {
     async init() {
         await this.selectors();
         // this.onUpdate();
+        this.addIconsCardAndVtxpci();
+        this.addIconVtexAndM3();
     }
 
     async selectors() {
         //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.iconesCartoesAndVtexpci = await waitElement(".footerCheckout__stamps");
+        this.iconsVtexAndM3 = await waitElement(".footerCheckout__developedBy");
     }
 
     onUpdate() {
@@ -37,4 +41,46 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+    addIconVtexAndM3() {
+        if (this.iconsVtexAndM3 && window.innerWidth > 1024) {
+            this.iconsVtexAndM3.innerHTML = `
+        <li>
+            <a class="Link1" href="https://vtex.com/br-pt/">
+                <span>Powered By</span>
+                <img class="Link1__footer-imgs-logoVtex" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Img Icone Vtex" />
+            </a>
+        </li>
+
+        <li>
+            <a href="https://agenciam3.com/">
+                <span>Developed By</span>
+                <img class="footer-imgs-logoM3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="Img Icone M3" />
+            </a>
+        </li>
+            `;
+        }
+    }
+
+    addIconsCardAndVtxpci() {
+        if (this.iconesCartoesAndVtexpci && window.innerWidth > 1024) {
+            this.iconesCartoesAndVtexpci.innerHTML = `
+            <li>
+            <span class="footerCheckout__payments"><img class="footer-imgs-cards" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Img bandeira Mastercard" />
+                <img class="footer-imgs-cards" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Img bandeira Visa" />
+                <img class="footer-imgs-cards" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="adad" />
+                <img class="footer-imgs-cards" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Img bandeira Elo" />
+                <img class="footer-imgs-cards" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Img bandeira Hipercard" />
+                <img class="footer-imgs-cards" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Img Paypal" />
+                <img class="footer-imgs-cards-final" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Img Boleto" /></span>
+
+            </li>
+            <li>
+                <span class="footerCheckout__stamps__divider"></span>
+            </li>
+            <li>
+                <span class="footerCheckout__payments"><img class="footer-imgs-vtexpci" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Img Vtxpci" /></span>
+            </li>
+            `;
+        }
+    }
 }

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

@@ -17,5 +17,11 @@ 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.progressBar = await waitElement("#progressBar");
     }
+
+    progressBarCronstructor (){
+
+    }
+
 }

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

@@ -9,16 +9,21 @@
 		}
 	}
 
+    &-message{
+        display: none;
+    }
+
 	&-title {
-		font-size: 20px;
+        margin: 170px 0 32px 0;
+        font-size: 24px;
+        line-height: 33px;
 	}
 
 	&-links {
 		.link-choose-products {
-			background: $color-black;
+			border: 1px solid $color-black;
-			border: none;
+			border-radius: 0;
-			border-radius: 5px;
+			// transition: ease-in 0.22s all;
-			transition: ease-in 0.22s all;
 			outline: none;
 			font-family: $font-family;
 			font-style: normal;
@@ -27,11 +32,14 @@
 			line-height: 16px;
 			text-align: center;
 			letter-spacing: 0.05em;
-			color: $color-white;
+			color: $color-black;
 			text-transform: uppercase;
+            margin: 0 0 0 0;
+            width: 31.74%;
+            padding: 15px 0;
 
 			&:hover {
-				background: lighten($color-black, 5);
+				background: lighten($color-white, 5);
 			}
 		}
 	}

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

@@ -9,14 +9,28 @@ html {
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    width: 100%;
     margin: auto auto 0 auto;
+    border-top: 1px solid black;
+    .container{
+        display: flex;
+        align-items: center;
+        width: 94.9734%;
+    }
 }
 footer .footerCheckout__prateleira,
 header {
-    width: 79.53125%;
+    width: 100%;
     margin: 0 auto;
 }
+header{
+    border-bottom: 1px solid black;
+    padding: 29px 0;
+}
+.headerCheckout__safeBuy{
+    display: flex;
+    gap: 8px;
+}
 
 body {
     display: flex;
@@ -52,13 +66,16 @@ body {
         width: 80%;
     }
 }
+.row-fluid .full-cart.active{
+    margin-bottom: 0;
+}
 
 .btn-success {
-    background: $color-black;
+    background: $color-white;
     text-shadow: none;
 
     &:hover {
-        background: lighten($color-black, 15%);
+        background: lighten($color-white, 15%);
     }
 }
 
@@ -81,6 +98,10 @@ body {
         margin-left: 30px;
     }
 }
+#cart-title{
+    display: none !important;
+}
+
 
 .dropdown {
     &__content {

checkout/src/arquivos/sass/partials/_footer.scss

@@ -10,6 +10,7 @@
     }
 
     &__address {
+
         color: $color-gray2;
         font-family: $font-family;
         font-style: normal;
@@ -17,7 +18,11 @@
         font-size: 10px;
         line-height: 12px;
         text-transform: capitalize;
-        max-width: 40%;
+        width: 33%;
+
+        &::after{
+            content: ".";
+        }
 
         @include mq(md, max) {
             margin-bottom: 24px;
@@ -30,12 +35,27 @@
         display: flex;
         justify-self: center;
         list-style: none;
+        margin: 0;
+        width: 33%;
+        justify-content: center;
 
         @include mq(md, max) {
             align-self: center;
             margin-bottom: 12px;
         }
 
+        .footer-imgs-cards {
+            width: 10.01%;
+            margin-right: 12px;
+            &-final{
+                width: 10.01%;
+                margin-right: 0px
+            }
+        }
+        .footer-imgs-vtexpci{
+            width: 84.4%;
+        }
+
         &__divider {
             background-color: $color-gray4;
             display: inline-block;
@@ -50,6 +70,19 @@
         display: flex;
         list-style-type: none;
         margin: 0;
+        width: 33%;
+        justify-content: flex-end;
+
+        .Link1{
+            justify-content: end;
+
+            &__footer-imgs-logoVtex{
+                width: 20%;
+            }
+        }
+        .footer-imgs-logoM3{
+            width: 17%;
+        }
 
         li:last-child {
             margin-left: 16px;

checkout/src/arquivos/sass/partials/_header.scss

@@ -1,7 +1,8 @@
 /* _header.scss */
 .headerCheckout {
     .container {
-        width: auto !important;
+        width: 79.53125%;
+        margin: 0 auto;
     }
     &__wrapper {
         align-items: center;