feat(empty-cart): estiliza a página de carrinho vazio e adiciona MutationObserver

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

@@ -3,44 +3,72 @@ import { waitElement } from "m3-utils";
 export default class Footer {
     constructor() {
         this.init();
-        this.stampsHTML();
-        this.developedByHTML();
     }
 
     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
+        if(this.checkoutVazio) {
             let target = this.checkoutVazio;
-        let config = { childList: true, attributes: true };
+            let config = { attributes: true };
+
+            this.cartTitle.style.display = "none";
+            this.prateleira.style.display = "none";
+
             let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
+                mutations.forEach((mutation) => {
-                console.log(mutation.type);
+                    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");
-        $(elemento).slick({
-            slidesToShow: 4,
-            slidesToScroll: 1,
-        });
     }
 
+    // async addCarrossel() {
+    //     const elemento = await waitElement("#my-element");
+    //     $(elemento).slick({
+    //         slidesToShow: 4,
+    //         slidesToScroll: 1,
+    //     });
+    // }
+
     async stampsHTML() {
         const stamps = await waitElement('.footerCheckout__stamps');
 
@@ -89,7 +117,7 @@ export default class Footer {
     async developedByHTML() {
         const developedBy = await waitElement('.footerCheckout__developedBy');
 
-        console.log(developedBy.children[0].children[0]);
+        // console.log(developedBy.children[0].children[0]);
 
         const vtexIcon = `
             <span>Powered By</span>
@@ -104,8 +132,8 @@ export default class Footer {
         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[0].children[0].addClass('footerCheckout__developedBy__link')
-        developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link')
+        // developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link')
 
     }
 }

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

@@ -1,8 +1,9 @@
 .empty-cart {
-	font-family: $font-family;
+
     &-content {
-		color: $black-300;
+        margin: 170px 0 262px;
         text-align: center;
+        text-transform: uppercase;
 
 		@include mq(md, max) {
             padding: 0 16px;
@@ -10,29 +11,43 @@
 	}
 
 	&-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 {
+        width: 325px;
+        height: 46px;
+        margin: 0 auto;
+        border: 1px solid $black-500;
+
         .link-choose-products {
-			background: $black-300;
+            padding: 0;
-			border: none;
-			border-radius: 5px;
-			transition: ease-in 0.22s all;
-			outline: none;
-			font-family: $font-family;
-			font-style: normal;
-			font-weight: 500;
-			font-size: 14px;
             line-height: 16px;
-			text-align: center;
+            font-family: $font-family-secundary;
-			letter-spacing: 0.05em;
+            font-size: 14px;
-			color: $color-white;
+            border: none;
-			text-transform: uppercase;
+            border-radius: 0;
+            color: $black-500;
+            background: $color-white;
+			transition: ease-in 0.22s all;
+
+            box-shadow: none;
+
+			// outline: none;
+			// letter-spacing: 0.05em;
 
 			&:hover {
-				background: lighten($black-300, 5);
+				background: lighten($blue-300, 5);
 			}
+
 		}
 	}
 }

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

@@ -1,20 +1,20 @@
 /* _footer.scss */
 .footerCheckout {
     width: 100%;
-    position: fixed;
-    bottom: 0;
     display: flex;
     flex-direction: column;
+    gap: 54px;
     // background: cyan;
 
 //     border-top: none;
 //     color: $color-gray2;
 
-    // &__prateleira {
+    &__prateleira {
-    //     height: 100px;
+        // margin-top: 101px;
-    //     background-color: green;
+        height: 448px;
-    //     width: 100%;
+        background-color: green;
-    // }
+        width: 100%;
+    }
 
     &__wrapper {
         margin: 0;

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,13 +10,15 @@ $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-gray-rename: #c4c4c4;
 
 $color-blue: #4267b2;