From 43eceebee20d69e7adf482850ee78e0dcc79365b Mon Sep 17 00:00:00 2001
From: ThiagoDuutra <thiagoduutra01@gmail.com>
Date: Thu, 15 Dec 2022 21:34:26 -0300
Subject: [PATCH] feat: cria js prateleira

---
 checkout/src/arquivos/js/components/Footer.js | 48 ++++++++++++++++---
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index d03b99f..5c481f5 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,10 +7,25 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+        this.events();
         this.createFooter();
         this.addCarrossel();
         this.createPrateleira();
         this.onUpdate();
+        this.createMainBtn();
+    }
+    events() {
+        window.addEventListener("hashchange", () => {
+            if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
+                this.footerCheckoutPrateleira.style.display = "flex";
+            }
+            if (window.location.hash != "#/cart") {
+                this.footerCheckoutPrateleira.style.display = "none";
+            }
+        });
+        addEventListener("resize", () => {
+            this.addCarrossel();
+        });
     }
 
     async selectors() {
@@ -74,7 +89,7 @@ export default class Footer {
         `;
     }
 
-    createPrateleira() {
+    async createPrateleira() {
         const slickPrat = this.footerCheckoutPrateleira;
         slickPrat.innerHTML = `<h2>Você também pode gostar:</h2>
         <ul class="container-carrossel"></ul>`;
@@ -102,30 +117,51 @@ export default class Footer {
                                         item.link
                                     }">Ver Produto</button>`;
                     slickPrat.children[1].appendChild(li);
+                    this.footerCheckoutPrateleira.classList.add("fetch");
                 });
+            })
+            .then(() => {
+                this.addCarrossel();
             });
     }
 
+    createMainBtn() {
+        const btnMainEmpty = document.querySelector("#cart-choose-products");
+        const h2Empty = this.checkoutVazio.children[0];
+        btnMainEmpty.textContent = `CONTINUAR COMPRANDO`;
+        h2Empty.textContent = `SEU CARRINHO ESTÁ VAZIO`;
+    }
+
     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 list = this.footerCheckoutPrateleira;
+
+        if (target.style.display == "none" && window.location.hash == "#/cart") {
+            list.style.display = "flex";
+            this.createPrateleira();
+        } else {
+            list.style.display = "none";
+        }
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
+            if (this.footerCheckoutPrateleira.classList.contains("fetch")) {
+                this.createPrateleira();
+            }
             mutations.forEach(function (mutation) {
-                if (
-                    mutation.target.style.display === "none" &&
-                    window.location.href === "https://m3academy.myvtex.com/checkout/#/cart"
-                ) {
+                if (mutation.target.style.display != "none") {
+                    list.style.display = "none";
                 } else {
-                    console.log("block");
+                    list.style.display = "flex";
                 }
             });
         });
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
         const elemento = await waitElement(".container-carrossel");
         $(elemento).slick({