From 981f8dde94da1c3fae7aa0cb87e5ba9fa5328a13 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Sat, 10 Dec 2022 21:11:23 -0300
Subject: [PATCH] =?UTF-8?q?feat(Footer):=20add=20=C3=ADcones=20.footerChec?=
 =?UTF-8?q?kout=5F=5Fstamps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 checkout/src/arquivos/js/components/Footer.js | 40 +++++++++++++++++++
 .../src/arquivos/sass/partials/_footer.scss   | 23 ++++++++++-
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..5d05f7c 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -8,12 +8,14 @@ export default class Footer {
     async init() {
         await this.selectors();
         // this.onUpdate();
+        await this.footerCheckout();
     }
 
     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.footerCheckoutstamps = await waitElement(".footerCheckout__stamps");
     }
 
     onUpdate() {
@@ -37,4 +39,42 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+
+    footerCheckout() {
+        this.footerCheckoutstamps.innerHTML = `
+        <li>
+            <ul class="footerCheckout__payments">
+                <li>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card">
+                </li>
+                <li>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa">
+                </li>
+                <li>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express">
+                </li>
+                <li>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="ícone do cartão elo">
+                </li>
+                <li>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="ícone do cartão hipercard">
+                </li>
+                <li>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="ícone do paypal">
+                </li>
+                <li>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="ícone de boleto">
+                </li>
+            </ul>
+            <span class="footerCheckout__stamps__divider"></span>
+            <ul class="footerCheckout__payments">
+                <li class= "vtexPCIM">
+                     <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto">
+                </li>
+            </ul>
+        </li>
+
+        `;
+    }
+
 }
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 32641ba..b4aa12c 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,14 +1,17 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    border-top: 1px solid #000000;
     color: $color-gray2;
-
+    bottom: 0;
+	position: absolute;
+    width: 100%;
     &__wrapper {
         & .container {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 16px 0;
+            width: 100%;
             &::before, &::after {
                 content: none;
             }
@@ -43,6 +46,22 @@
             // margin-bottom: 12px;
         }
 
+        & li {
+            display: flex;
+            & .footerCheckout__payments {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-left: 0;
+                & li {
+                    height: 20px;
+                }
+                & .vtexPCIM {
+                    height: 33px;
+                }
+            }
+        }
+
         &__divider {
             background-color: $color-gray4;
             display: inline-block;