From 62be124c6db2285b31bb275258e91796a8f87930 Mon Sep 17 00:00:00 2001
From: Ramon Dias Ferreira <ramondf13@gmail.com>
Date: Fri, 16 Dec 2022 20:52:42 -0300
Subject: [PATCH] =?UTF-8?q?feature(Footer.js):=20observer=20prateleira=20n?=
 =?UTF-8?q?=C3=A3o=20funcional,=20prateleira=20n=C3=A3o=20some=20com=20mud?=
 =?UTF-8?q?an=C3=A7a=20do=20checkout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 checkout/src/arquivos/js/components/Footer.js | 36 +++++++++++--------
 .../sass/checkout/_checkout-vazio.scss        |  3 ++
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 76bbcbb..9911b31 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -8,15 +8,14 @@ export default class Footer {
     async init() {
         this.list = await this.requestApi();
         await this.selectors();
-        this.creditCardIconsHTML();
-        this.developedByIconsHTML();
-
-        // this.onUpdate();
         this.createShelf();
         this.shelfList = await waitElement(".footerCheckout__shelfList");
         this.shelfItens();
-
+        await this.shelfUpdate();
         this.addCarrossel();
+        this.creditCardIconsHTML();
+        this.developedByIconsHTML();
+
     }
 
     async selectors() {
@@ -78,21 +77,30 @@ export default class Footer {
             });
     }
 
+    events() {
+        window.addEventListener("hashchange", () =>{})
+    }
 
-    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
+    async shelfUpdate() {
         let target = this.checkoutVazio;
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
-                console.log(mutation.type);
-            });
-        });
-
+            console.log("observer");
+            mutations.map((mutation) => {
+                const status = mutation.target.attributes.style.nodeValue;
+                console.log(status);
+                if(status === "display: none") {
+                    this.renderShelf();
+                    this.shelfList.classList.remove("inactive");
+                } else if (status === "display: block") {
+                    this.removeShelf();
+                    this.shelfList.classList.add("inactive");
+                }
+            })
+        })
         observer.observe(target, config);
     }
+
     async addCarrossel() {
         const elemento = await waitElement(".footerCheckout__shelfList");
         $(elemento).slick({
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 08f74e9..498b48b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -8,6 +8,9 @@
 			padding: 0 16px;
 		}
 	}
+    &-message {
+        display: none;
+    }
 
 	&-title {
 		font-size: 20px;