From 7d2d42471290721c34f84b8e105f68fa3a25ae12 Mon Sep 17 00:00:00 2001
From: matheus <matheusbrollo201@gmail.com>
Date: Wed, 14 Dec 2022 15:35:30 -0300
Subject: [PATCH] feat(footer): added js to footer

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

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..d1c6d60 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,13 +7,94 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        this.createPaymentsIcons();
+        this.createVtexpciIcon();
+        this.createDevIcons();
     }
 
     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
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.payments = await waitElement(".footerCheckout__payments");
+        this.vtexpci = await waitElement(".footerCheckout__vtexpci");
+        this.devIncons = await waitElement(".footerCheckout__developedBy");
+    }
+    createPaymentsIcons() {
+        this.payments.innerHTML = `
+            <ul class="payments-icons-wrapper">
+                <li>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
+                        alt=""
+                    />
+                </li>
+                <li>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
+                        alt=""
+                    />
+                </li>
+            </ul>
+        </div>
+        `;
+    }
+
+    createVtexpciIcon() {
+        this.vtexpci.innerHTML = `
+            <img class="vtex-icon"
+                src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
+                alt=""
+            />
+        `;
+    }
+
+    createDevIcons() {
+        this.devIncons.innerHTML = `
+        <li>
+            <a href="https://vtex.com/br-pt/">
+                <span>Powered By</span>
+                <img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
+            </a>
+        </li>
+
+        <li>
+            <a href="https://agenciam3.com/">
+                <span>Developed By</span>
+                <img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
+            </a>
+        </li>
+        `;
     }
 
     onUpdate() {