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

@@ -7,34 +7,133 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        this.replaceEmptyCartContent();
+        this.stampsHTML();
+        this.developedByHTML();
+        this.onUpdate();
     }
 
     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.cartTitle = await waitElement("#cart-title");
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.emptyCartTitle = await waitElement(".empty-cart-title");
+        this.continueShopping = await waitElement("#cart-choose-products");
+        this.prateleira = await waitElement(".footerCheckout__prateleira");
+    }
+
+    replaceEmptyCartContent() {
+        if (this.checkoutVazio) {
+            this.emptyCartTitle.textContent = "Seu Carrinho está vazio";
+            this.continueShopping.textContent = "Continuar comprando";
+        }
     }
 
     onUpdate() {
         //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
-        let target = this.checkoutVazio;
+        if(this.checkoutVazio) {
-        let config = { childList: true, attributes: true };
+            let target = this.checkoutVazio;
-        let observer = new MutationObserver((mutations) => {
+            let config = { attributes: true };
-            mutations.forEach(function (mutation) {
-                console.log(mutation.type);
-            });
-        });
 
-        observer.observe(target, config);
+            this.cartTitle.style.display = "none";
+            this.prateleira.style.display = "none";
+
+            let observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    console.log("mutation type: ", mutation.typ)
+                    console.log("rolou mutation")
+                    if(this.checkoutVazio.style.display == "block") {
+                        console.log("Carrinho está vazio")
+                        this.cartTitle.style.display = "none";
+                        this.prateleira.style.display = "none";
+                    } else {
+                        console.log("Carrinho NÃO está vazio");
+                        this.cartTitle.style.display = "block";
+                        this.prateleira.style.display = "block";
+                    }
+                });
+            });
+
+            observer.observe(target, config);
+        }
     }
-    async addCarrossel() {
+
-        const elemento = await waitElement("#my-element");
+    // async addCarrossel() {
-        $(elemento).slick({
+    //     const elemento = await waitElement("#my-element");
-            slidesToShow: 4,
+    //     $(elemento).slick({
-            slidesToScroll: 1,
+    //         slidesToShow: 4,
-        });
+    //         slidesToScroll: 1,
+    //     });
+    // }
+
+    async stampsHTML() {
+        const stamps = await waitElement('.footerCheckout__stamps');
+
+        // console.log(stamps.children[0], stamps.children[2]);
+
+        const paymentsStructure = `
+            <ul class="footerCheckout__payments">
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" />
+                </li>
+            </ul>
+        `
+
+        const certifiedStructure = `
+            <img class="footerCheckout__vtexpci footerCheckout__payments--certified" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" />
+        `
+
+        stamps.children[0].innerHTML = paymentsStructure;
+        stamps.children[2].innerHTML = certifiedStructure;
+    }
+
+    async developedByHTML() {
+        const developedBy = await waitElement('.footerCheckout__developedBy');
+
+        // console.log(developedBy.children[0].children[0]);
+
+        const vtexIcon = `
+            <span>Powered By</span>
+            <img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="" />
+        `
+
+        const m3Icon = `
+            <span>Powered By</span>
+            <img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="" />
+        `
+
+        developedBy.children[0].children[0].innerHTML = vtexIcon;
+        developedBy.children[1].children[0].innerHTML = m3Icon;
+
+        // developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link')
+        // developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link')
+
     }
 }

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

@@ -182,6 +182,15 @@ export default class Header {
             })
         }
     }
+
+    // async progressBarMove() {
+    //     if (this.progressBar && window.innerWidth > 1024) {
+    //         const progressBarList = document.querySelectorAll(("#progressBar ul li"));
+    //         progressBarList.forEach((li) => {
+    //             console.log("Aqui vem seu código")
+    //         })
+    //     }
+    // }
 }
 
 

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

@@ -1,38 +1,53 @@
 .empty-cart {
-	font-family: $font-family;
+
-	&-content {
+    &-content {
-		color: $black-300;
+        margin: 170px 0 262px;
-		text-align: center;
+        text-align: center;
+        text-transform: uppercase;
 
 		@include mq(md, max) {
-			padding: 0 16px;
+            padding: 0 16px;
 		}
 	}
 
 	&-title {
-		font-size: 20px;
+        margin: 0 0 32px;
+        line-height: 33px;
+        font-family: $font-family;
+        font-size: 24px;
+        color: $black-500;
 	}
 
+    &-message {
+        display: none;
+    }
+
 	&-links {
-		.link-choose-products {
+        width: 325px;
-			background: $black-300;
+        height: 46px;
-			border: none;
+        margin: 0 auto;
-			border-radius: 5px;
+        border: 1px solid $black-500;
+
+        .link-choose-products {
+            padding: 0;
+            line-height: 16px;
+            font-family: $font-family-secundary;
+            font-size: 14px;
+            border: none;
+            border-radius: 0;
+            color: $black-500;
+            background: $color-white;
 			transition: ease-in 0.22s all;
-			outline: none;
+
-			font-family: $font-family;
+            box-shadow: none;
-			font-style: normal;
+
-			font-weight: 500;
+			// outline: none;
-			font-size: 14px;
+			// letter-spacing: 0.05em;
-			line-height: 16px;
-			text-align: center;
-			letter-spacing: 0.05em;
-			color: $color-white;
-			text-transform: uppercase;
 
 			&:hover {
-				background: lighten($black-300, 5);
+				background: lighten($blue-300, 5);
 			}
+
 		}
 	}
 }

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

@@ -3,14 +3,18 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
+* {
+    box-sizing: border-box;
+}
+
 html {
     height: 100%;
     min-height: 100%;
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    width: 100%;
-    margin: auto auto 0 auto;
+    // margin: auto auto 0 auto;
 }
 footer .footerCheckout__prateleira,
 header {

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

@@ -1,23 +1,70 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    width: 100%;
-    color: $color-gray2;
+    display: flex;
+    flex-direction: column;
+    gap: 54px;
+    // background: cyan;
 
-    &__wrapper {
+//     border-top: none;
-        align-items: center;
+//     color: $color-gray2;
-        display: flex;
+
-        justify-content: space-between;
+    &__prateleira {
+        // margin-top: 101px;
+        height: 448px;
+        background-color: green;
+        width: 100%;
     }
 
+    &__wrapper {
+        margin: 0;
+        width: 100%;
+        padding: 16px 32px;
+        border-top: 1px solid $black-500;
+        // background-color: magenta;
+
+//     //     // align-items: center;
+//     //     // display: flex;
+//     //     // justify-content: space-between;
+    }
+
+
+    .container {
+        margin: 0;
+        // padding: 0;
+        width: 100%;
+        // height: 100%;
+        // display: flex;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        align-items: center;
+
+        // text-align: center;
+        //     //     // grid-auto-flow: column;
+//     //     // grid-auto-columns: max-content;
+//     //     justify-content: space-between;
+//     //     margin: 0;
+        // background-color: yellowgreen;
+
+        &::before,
+        &::after {
+            display: none;
+        }
+    }
+
+
     &__address {
-        color: $color-gray2;
+        color: $black-300;
         font-family: $font-family;
-        font-style: normal;
+        // font-style: normal;
-        font-weight: normal;
+        // font-weight: normal;
         font-size: 10px;
-        line-height: 12px;
+        line-height: 14px;
         text-transform: capitalize;
-        max-width: 40%;
+        // max-width: 40%;
+        justify-self: flex-start;
+
+
 
         @include mq(md, max) {
             margin-bottom: 24px;
@@ -26,49 +73,76 @@
     }
 
     &__stamps {
-        align-items: center;
         display: flex;
+        align-items: center;
         justify-self: center;
         list-style: none;
 
+        margin: 0;
+
         @include mq(md, max) {
             align-self: center;
             margin-bottom: 12px;
         }
 
         &__divider {
-            background-color: $color-gray4;
+            background-color: $color-gray-rename;
-            display: inline-block;
+            display: block;
             height: 24px;
-            margin: 0 8px;
+            margin: 0 10px 0 13px;
             width: 1px;
         }
     }
 
+    &__payments {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: max-content;
+        gap: 13px;
+        list-style: none;
+        margin: 0;
+
+            img {
+                display: block;
+                height: 20px;
+                width: auto;
+            }
+    }
+
+    &__vtexpci {
+        display: block;
+        width: 53px;
+        height: 33px;
+    }
+
     &__developedBy {
         align-items: center;
         display: flex;
-        list-style-type: none;
+        gap: 10px;
+        list-style: none;
         margin: 0;
-
+        justify-self: flex-end;
-        li:last-child {
-            margin-left: 16px;
-        }
 
         a {
             align-items: center;
-            color: $color-gray2;
+            color: $black-300;
             display: flex;
             font-family: $font-family;
-            font-style: normal;
+            // font-style: normal;
-            font-weight: normal;
+            // font-weight: normal;
-            font-size: 10px;
+            font-size: 9px;
             line-height: 12px;
             text-decoration: none;
 
             span {
-                margin-right: 8px;
+                margin-right: 10px;
             }
         }
+
+        &__icons {
+            display: block;
+            height: 16px;
+            width: auto;
+        }
     }
 }

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

@@ -3,6 +3,7 @@
     // position: relative;
     margin: 0;
     padding: 30px 131px;
+    width: 100%;
     border-bottom: 1px solid $black-500;
 
     .container {

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -10,12 +10,16 @@ $black-500: #000000;
 
 $color-white: #fff;
 
+$color-gray-rename: #c4c4c4;
+$blue-300: #00C8FF;
+
 $color-gray: #6c6c6c;
 $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 
+
 $color-blue: #4267b2;
 
 $color-green: #4caf50;