From 1badd9c8289639822671d42e6a2476cebc426890 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Sat, 17 Dec 2022 19:14:41 -0300
Subject: [PATCH] =?UTF-8?q?fix(observer):=20O=20observer=20agora=20est?=
 =?UTF-8?q?=C3=A1=20funcionando?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 checkout/src/arquivos/js/components/Footer.js | 53 +++++++++++++++++--
 .../src/arquivos/sass/partials/_footer.scss   |  5 +-
 2 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index fa5e938..0577374 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,10 +7,10 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
-        await this.pegarInfo(
+        this.onUpdate();
+        /*await this.pegarInfo(
             "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
-        );
+        );*/
         await this.renderIconCreditCards();
         await this.renderIconVtexPci();
         await this.renderIconsDeveloped();
@@ -21,12 +21,14 @@ export default class Footer {
         await this.trocaNotiCliente();
         /*await this.trocaNoCep();*/
         await this.trocaIdentificao();
+        this.events();
     }
 
     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.tituloCarrinho = await waitElement("#cart-title");
         this.footerIconsCreditCards = await waitElement(".footerCheckout__payments");
         this.footerIconVtexPci = await waitElement(".footerCheckout__vtexpci");
         this.footerIconsDeveloped = await waitElement(".footerCheckout__developedBy");
@@ -46,21 +48,62 @@ export default class Footer {
             0
         );*/
     }
-
+    events() {
+        window.addEventListener("hashchange", () => {
+            this.onUpdate();
+            if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
+                this.listaInfocards.style.display = "flex";
+            }
+            if (window.location.hash != "#/cart") {
+                this.listaInfocards.style.display = "none";
+            }
+        });
+    }
     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;
+        let prateleiraItens = this.prateleiraInfoCards;
+        let titulo = this.tituloCarrinho;
+        if (target.style.display == "none") {
+            titulo.style.display = "block";
+            this.pegarInfo(
+                "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+            );
+            prateleiraItens.style.display = "flex";
+        } else {
+            titulo.style.display = "none";
+            prateleiraItens.style.display = "none";
+        }
+
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
+            this.pegarInfo(
+                "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+            );
+            //console.log("oi", mutations);
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                console.log("oi", mutation);
+                if (target.style.display != "none") {
+                    prateleiraItens.style.display = "none";
+                    titulo.style.display = "none";
+                } else {
+                    prateleiraItens.style.display = "flex";
+                    titulo.style.display = "block";
+                }
             });
         });
 
         observer.observe(target, config);
     }
+    ligaDesligaElementos(observado) {
+        if (observado.style.display === "none") {
+            observado.style.display = "block";
+        } else {
+            observado.style.display = "none";
+        }
+    }
     async addCarrossel() {
         const elemento = await waitElement("#my-element");
         $(elemento).slick({
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index b1e7515..d899791 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -23,6 +23,7 @@
         margin: 0 !important;
     }
     &__prateleira {
+        //display: none;
         margin: 0 !important;
         width: 100% !important;
         display: flex;
@@ -222,7 +223,7 @@
 /*CSS Body*/
 .container-cart {
     #cart-title {
-        display: none !important;
+        display: none;
     }
 
     .empty-cart-content {
@@ -248,7 +249,7 @@
                 font-family: $font-family-secundary;
                 font-weight: 400;
                 font-size: 14px;
-                &::hover {
+                &:hover {
                     cursor: pointer;
                 }
             }