From 6b7374f1283fd7af14ce0376595604fad26ca449 Mon Sep 17 00:00:00 2001
From: ThiagoDuutra <thiagoduutra01@gmail.com>
Date: Sat, 10 Dec 2022 10:20:31 -0300
Subject: [PATCH] feat: Cria footer desktop

---
 checkout/src/arquivos/js/components/Footer.js | 54 +++++++++++++++++++
 .../src/arquivos/sass/partials/_footer.scss   | 35 ++++++++++--
 2 files changed, 86 insertions(+), 3 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..623727a 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,15 +7,69 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+        this.createFooter();
         // this.onUpdate();
     }
 
     async selectors() {
+        this.footerCheckout = await waitElement(".footerCheckout__stamps");
+        this.footerCheckoutDevelop = await waitElement(".footerCheckout__developedBy");
         //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");
     }
 
+    createFooter() {
+        this.footerCheckout.innerHTML = `
+             <li class="footerCheckout__listImage">
+                 <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
+             </li>
+             <li class="footerCheckout__listImage">
+                 <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" />
+             </li>
+             <li class="footerCheckout__listImage">
+                 <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" />
+             </li>
+
+             <li class="footerCheckout__listImage">
+                 <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" />
+             </li>
+
+             <li class="footerCheckout__listImage">
+                 <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" />
+             </li>
+             <li class="footerCheckout__listImage">
+                 <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" />
+             </li>
+             <li class="footerCheckout__listImage">
+                 <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" />
+             </li>
+
+             <li class="footerCheckout__stamps__divider"></li>
+
+            <li class="footerCheckout__listImage">
+                <img class="vtex" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" />
+            </li>
+
+        `;
+        this.footerCheckoutDevelop.innerHTML = `
+
+                <li class="footerCheckout__developedBy">
+                <a href="https://www.vtex.com/" target="_blank" title="vtex">
+                <span>Powered By</span>
+                <img class="vtex-right" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
+                </a>
+                </li>
+
+                <li class="footerCheckout__developedBy">
+                <a href="https://www.vtex.com/" target="_blank" title="vtex">
+                <span>Developed By</span>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
+                </a>
+                </li>
+        `;
+    }
+
     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
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..257df28 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -2,6 +2,7 @@
 .footerCheckout {
     border-top: none;
     color: $color-gray2;
+    border-top: 1px solid $color-black-500;
 
     &__wrapper {
         align-items: center;
@@ -10,12 +11,12 @@
     }
 
     &__address {
-        color: $color-gray2;
+        color: $color-black;
         font-family: $font-family;
         font-style: normal;
         font-weight: normal;
         font-size: 10px;
-        line-height: 12px;
+        line-height: 13px;
         text-transform: capitalize;
         max-width: 40%;
 
@@ -30,6 +31,8 @@
         display: flex;
         justify-self: center;
         list-style: none;
+        padding: 18px 0;
+        margin: 0;
 
         @include mq(md, max) {
             align-self: center;
@@ -40,7 +43,7 @@
             background-color: $color-gray4;
             display: inline-block;
             height: 24px;
-            margin: 0 8px;
+            margin: 0;
             width: 1px;
         }
     }
@@ -71,4 +74,30 @@
             }
         }
     }
+
+    img {
+        display: block;
+        width: 35px;
+        height: 20px;
+
+        &.vtex {
+            height: 33px;
+            width: 53px;
+        }
+        &.vtex-right {
+            width: 44px;
+            height: 16px;
+        }
+    }
+
+    &__listImage {
+        display: flex;
+        margin-right: 13px;
+        align-items: center;
+        justify-content: center;
+
+        &:last-child {
+            margin: 0 0 0 10px;
+        }
+    }
 }