From bd2589b086ca872af7620af67dbbef03be41ae22 Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Thu, 22 Dec 2022 11:28:38 -0300
Subject: [PATCH] feat(home): ajustando function footer onUpdate

---
 checkout/src/arquivos/js/components/Footer.js | 53 +++++++++++--------
 .../sass/checkout/_checkout-autenticacao.scss |  6 +--
 .../src/arquivos/sass/partials/_footer.scss   |  2 +-
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index c364f5b..3e2bb0d 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -23,6 +23,7 @@ export default class Footer {
     }
 
     async prateleiraFooterHTML() {
+        this.footerPrateleira.innerHTML = ``;
         this.footerPrateleira.innerHTML += `
         <h2 class="footerCheckout__prateleira__title"> Você também pode gostar: </h2>
         <ul class="footerCheckout__prateleira__list"></ul>`;
@@ -155,43 +156,49 @@ export default class Footer {
         // 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 (window.location.hash == "#/cart") {
-            this.myCart.classList.add("inactive");
-        }
+        // if (window.location.hash != "#/cart") {
+        //     this.myCart.classList.add("inactive");
+        // }
 
         //monitorar display none -> target.style.display === "none"
         let target = this.checkoutVazio;
+        if (
+            window.location.href == "https://m3academy.myvtex.com/checkout/#/cart" &&
+            this.checkoutVazio.style.display == "none"
+        ) {
+            this.footerPrateleira.classList.remove("inactive");
+            this.prateleiraFooterHTML();
+        } else {
+            this.footerPrateleira.classList.add("inactive");
+            this.myCart.classList.add("inactive");
+        }
+
+        window.addEventListener("hashchange", () => {
+            if (window.location.hash == "#/cart" && target.style.display == "none") {
+                this.myCart.classList.remove("inactive");
+                this.footerPrateleira.classList.remove("inactive");
+                this.footerPrateleira.innerHTML = "";
+                this.prateleiraFooterHTML();
+            } else {
+                this.footerPrateleira.classList.add("inactive");
+                this.myCart.classList.add("inactive");
+            }
+        });
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(() => {
-                if (target.style.display == "none") {
+                if (target.style.display == "none" && window.location.hash == "#/cart") {
                     this.footerPrateleira.classList.remove("inactive");
                     this.myCart.classList.remove("inactive");
+                    this.footerPrateleira.innerHTML = "";
                     this.prateleiraFooterHTML();
                 } else {
                     this.footerPrateleira.classList.add("inactive");
                     this.myCart.classList.add("inactive");
-                    this.footerPrateleira.innerHTML = "";
-                }
-            });
-
-            window.addEventListener("hashchange", () => {
-                if (window.location.hash == "#/cart") {
-                    if (target.style.display == "none") {
-                        this.myCart.classList.remove("inactive");
-                        this.footerPrateleira.classList.remove("inactive");
-                        this.footerPrateleira.innerHTML = "";
-                        this.prateleiraFooterHTML();
-                    } else {
-                        this.myCart.classList.add("inactive");
-                    }
-                } else {
-                    this.footerPrateleira.classList.add("inactive");
-                    this.myCart.classList.add("inactive");
-                    this.footerPrateleira.innerHTML = "";
                 }
             });
         });
-        observer.observe(this.checkoutVazio, {
+        observer.observe(target, {
+            childList: true,
             attributes: true,
         });
     }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index d0715fa..4cfde79 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -115,7 +115,7 @@
                 line-height: 33px;
                 display: flex;
                 align-items: center;
-                text-align: start;
+                text-align: flex-start;
                 letter-spacing: 0.05em;
 				border-radius: 5px;
 
@@ -304,7 +304,7 @@
                 line-height: 37px;
                 color: $color-black-1;
                 display: flex;
-                justify-content: start;
+                justify-content: flex-start;
                 align-items: center;
 
                 @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{
@@ -500,7 +500,7 @@
                         line-height: 33px;
                         display: flex;
                         align-items: center;
-                        justify-content: start;
+                        justify-content: flex-start;
                         text-align: center;
                         white-space: nowrap;
 
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c61975c..e5ab213 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -128,7 +128,7 @@
 
     &__developedBy {
         display: flex;
-        justify-content: end;
+        justify-content: flex-end;
         align-items: center;
         list-style-type: none;
         margin: 0;