From 9b65667845b9fa05098c54033e77b1fafe10b76a Mon Sep 17 00:00:00 2001
From: Luiz Felipe Silva <felipesilva9627@hotmail.com>
Date: Mon, 26 Dec 2022 20:52:49 -0300
Subject: [PATCH] feat(footer): criado e alterado script.

---
 checkout/src/arquivos/js/components/Footer.js | 187 ++++++++++++++++--
 1 file changed, 174 insertions(+), 13 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..96fc09d 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,34 +7,195 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        this.onUpdate();
+        this.criaFooter();
+        this.criaPrateleira();
+        this.criaCarrossel();
     }
 
     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
+        // Containers
+        this.containerMain = document.querySelector("body .container-main");
+        this.cartTemplate = document.querySelector(".cart-template");
+        this.checkoutContainer = document.querySelector(".checkout-container");
+        // Checkout
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.checkoutTitle = document.querySelector("#cart-title");
+        this.checkoutButton = document.querySelector("#cart-choose-products");
+        // Footer
+        this.checkoutAddress = document.querySelector(".footerCheckout__address");
+        this.cardsIcons = document.querySelector(".footerCheckout__stamps").firstElementChild;
+        this.vtexIcon = document.querySelector(".footerCheckout__stamps").lastElementChild;
+        this.poweredBy = document.querySelector(".footerCheckout__developedBy").firstElementChild;
+        this.developedBy = document.querySelector(".footerCheckout__developedBy").lastElementChild;
+        // Prateleira
+        this.prateleira = document.querySelector(".footerCheckout__prateleira");
     }
 
     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 containerMain = this.containerMain;
+        let cartTemplate = this.cartTemplate;
+        let checkoutContainer = this.checkoutContainer;
+        let checkoutTitle = this.checkoutTitle;
+        let checkoutButton = this.checkoutButton;
+        let prateleira = this.prateleira;
+
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                if (target.style.display != "none") {
+                    if (document.querySelector(".prateleiraTitle") != null) {
+                        document.querySelector(".prateleiraTitle").style.display = "none";
+                    }
+                    containerMain.style.display = "flex";
+                    containerMain.style.height = "100%";
+                    checkoutTitle.style.display = "none";
+                    checkoutButton.innerHTML = "Continuar comprando";
+                    cartTemplate.style.display = "flex";
+                    prateleira.style.display = "none";
+
+
+                } else {
+                    if (document.querySelector(".prateleiraTitle") != null) {
+                        document.querySelector(".prateleiraTitle").style.display = "block";
+                    }
+                    containerMain.style.display = "block";
+                    containerMain.style.height = "max-content";
+                    checkoutTitle.style.display = "block";
+                    cartTemplate.style.height = "max-content";
+                    cartTemplate.style.display = "block";
+                    prateleira.style.display = "block";
+
+                    if (window.location.hash != "#/cart") {
+                        checkoutTitle.style.display = "none";
+                        prateleira.style.display = "none";
+                    }
+
+                    if (window.location.hash == "#/email") {
+                        containerMain.style.height = "100%";
+                        checkoutContainer.style.overflow = "initial"
+                    }
+                }
             });
         });
 
         observer.observe(target, config);
     }
-    async addCarrossel() {
-        const elemento = await waitElement("#my-element");
-        $(elemento).slick({
-            slidesToShow: 4,
-            slidesToScroll: 1,
-        });
+
+    criaFooter() {
+        this.checkoutAddress.innerHTML = `
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        `;
+
+        this.cardsIcons.innerHTML = `
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/mastercardM3Academy.png" alt="Mastercard">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Visa">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Amex">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal">
+            </figure>
+
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto">
+            </figure>
+        `;
+
+        this.vtexIcon.innerHTML = `
+            <figure>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="VTEX PCI">
+            </figure>
+        `;
+
+        this.poweredBy.innerHTML = `
+            <div>
+                <p>Powered By</p>
+
+                <figure>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX">
+                </figure>
+            </div>
+        `;
+
+        this.developedBy.innerHTML = `
+            <div>
+                <p>Developed By</p>
+
+                <figure>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3 Academy">
+                </figure>
+            </div>
+        `;
+    }
+
+    async criaPrateleira() {
+        const urlAPI =
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+
+        let prateleira = this.prateleira;
+
+        prateleira.innerHTML = `
+            <h2 class="prateleiraTitle">Você também pode gostar:</h2>
+            <ul class="carrossel-items"></ul>
+        `;
+
+        fetch(urlAPI)
+            .then((response) => {
+                return response.json();
+            })
+
+            .then((data) => {
+                return data.map((product) => {
+                    let li = document.createElement("li");
+                    li.setAttribute("id", product.productId);
+                    li.innerHTML = `
+                        <img src="${product.items[0].images[0].imageUrl}" alt="${
+                        product.productName
+                    }"/>
+
+                        <p class="product-name">${product.productName}</p>
+
+                        <div class="product-variation">${product.items
+                            .map((name) => {
+                                return `<a name="product-variation__item" class="product-variation__item">${name.name}</a>`;
+                            })
+                            .join("")}
+                        </div>
+
+                        <button class="product-button">Ver produto</button>
+                    `;
+                    prateleira.children[1].appendChild(li);
+                });
+            });
+    }
+
+    async criaCarrossel() {
+        const prateleira = await waitElement(".carrossel-items");
+
+        setTimeout(() => {
+            $(prateleira).slick({
+                slidesToShow: 4,
+                slidesToScroll: 1,
+                autoplay: true,
+                autoplaySpeed: 2000,
+            });
+        }, 600);
     }
 }