From f4acc320a353bd70d306a5074356a70f55c9c98c Mon Sep 17 00:00:00 2001
From: Carlos Lins <carloslinsdev@gmail.com>
Date: Sat, 10 Dec 2022 08:12:53 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20Cria=C3=A7=C3=A3o=20do=20JS=20do=20Foot?=
 =?UTF-8?q?er?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 checkout/src/arquivos/js/components/Footer.js | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..c051b30 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,6 +7,7 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+        await this.addImagesFooter();
         // this.onUpdate();
     }
 
@@ -14,6 +15,9 @@ export default class Footer {
         //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.checkoutPayments = await waitElement(".footerCheckout__stamps");
+        this.developBy = await waitElement(".footerCheckout__developedBy");
+        console.log(this.developBy);
     }
 
     onUpdate() {
@@ -37,4 +41,29 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+
+    async addImagesFooter() {
+        this.checkoutPayments.children[0].innerHTML = `
+        <div class="footerCheckout__payments">
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Logo Master Card" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Logo Visa" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Logo American Express" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Logo Elo" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/hipercardM3Academy.png" alt="Logo HiperCard" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Logo PayPal" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Logo Boleto" />
+        </div>
+        `;
+        this.checkoutPayments.children[2].innerHTML = `
+        <div class="footerCheckout__payments">
+            <img class="vtexIcon" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo VTEX PCI Certificado" />
+        </div>
+        `;
+        this.developBy.children[0].children[0].innerHTML = `
+        <span>Powered by</span><img class="logoVtexFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Logo VTEX" />
+        `;
+        this.developBy.children[1].children[0].innerHTML = `
+        <span>Developed by</span><img class="logoM3Footer" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="Logo M3" />
+        `;
+    }
 }