feat(footer): Adiciona o footer desktop

checkout/src/arquivos/js/components/Footer.js

@@ -7,6 +7,9 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+        this.pagamentos();
+        this.certificado();
+        this.desenvolvimento();
         // this.onUpdate();
     }
 
@@ -14,6 +17,18 @@ 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.payments = await waitElement(".footerCheckout__payments", {
+            timeout: 5000,
+            interval: 1000,
+        });
+        this.vtexIcon = await waitElement(".footerCheckout__stamps", {
+            timeout: 5000,
+            interval: 1000,
+        });
+        this.developed = await waitElement(".footerCheckout__developedBy", {
+            timeout: 5000,
+            interval: 1000,
+        });
     }
 
     onUpdate() {
@@ -37,4 +52,58 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+
+    pagamentos() {
+        this.payments.innerHTML = `
+        <ul class="lista-pagamentos" >
+            <li class"lista-pagamentos__items">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+            </li>
+            <li class"lista-pagamentos__items">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png">
+            </li>
+            <li class"lista-pagamentos__items">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png">
+            </li>
+            <li class"lista-pagamentos__items">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png">
+            </li>
+            <li class"lista-pagamentos__items">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png">
+            </li>
+            <li class"lista-pagamentos__items">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png">
+            </li>
+            <li class"lista-pagamentos__items">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png">
+            </li>
+        </ul>
+        `;
+    }
+
+    certificado() {
+        this.vtexIcon.children[2].children[0].innerHTML = `
+        <ul class="lista-certificados">
+            <li class="lista-certificados__items">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png">
+            </li>
+        </ul>
+        `;
+    }
+
+    desenvolvimento() {
+        this.developed.children[0].children[0].innerHTML = `
+        <a class="powered" href="https://vtex.com/br-pt/">
+        <span>Powered By</span>
+        <img src=" https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png">
+        </a>
+        `;
+
+        this.developed.children[1].children[0].innerHTML = `
+        <a class="developed" href="https://agenciam3.com/">
+        <span>Developed By</span>
+        <img src=" https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png">
+        </a>
+        `;
+    }
 }

checkout/src/arquivos/sass/partials/_footer.scss

@@ -1,21 +1,35 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    border-top: 1px solid black;
     color: $color-gray2;
 
     &__wrapper {
-        align-items: center;
+        width: auto !important;
-        display: flex;
+        padding: 16px 22px 16px 32px;
-        justify-content: space-between;
+        margin: 0;
+
+        @include mq(xl, min) {
+            padding: 14px 63px 16px 63px;
+        }
+        .container {
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
+            width: auto;
+        }
+        .container::before,
+        ::after {
+            display: none !important;
+        }
     }
 
     &__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: 14px;
         text-transform: capitalize;
         max-width: 40%;
 
@@ -23,6 +37,11 @@
             margin-bottom: 24px;
             max-width: 100%;
         }
+
+        @include mq(xl, min) {
+            font-size: 20px;
+            line-height: 27px;
+        }
     }
 
     &__stamps {
@@ -30,6 +49,12 @@
         display: flex;
         justify-self: center;
         list-style: none;
+        margin: 0;
+        width: 31.56%;
+
+        @include mq(xl, min) {
+            width: 29.1%;
+        }
 
         @include mq(md, max) {
             align-self: center;
@@ -40,9 +65,21 @@
             background-color: $color-gray4;
             display: inline-block;
             height: 24px;
-            margin: 0 8px;
+            margin: 0 10px 0 13px;
             width: 1px;
         }
+
+        .lista-pagamentos {
+            list-style: none;
+            margin: 0;
+            display: flex;
+            gap: 13px;
+        }
+
+        .lista-certificados {
+            list-style: none;
+            margin: 0;
+        }
     }
 
     &__developedBy {
@@ -57,17 +94,40 @@
 
         a {
             align-items: center;
-            color: $color-gray2;
+            color: $color-black;
             display: flex;
             font-family: $font-family;
             font-style: normal;
             font-weight: normal;
-            font-size: 10px;
+            font-size: 9px;
             line-height: 12px;
             text-decoration: none;
 
+            @include mq(xl, min) {
+                font-size: 18px;
+                line-height: 25px;
+            }
+
             span {
-                margin-right: 8px;
+                margin-right: 10px;
+            }
+
+            .powered {
+                img {
+                    width: 44px;
+                    @include mq(xl, min) {
+                        width: 87px;
+                    }
+                }
+            }
+
+            .developed {
+                img {
+                    width: 28px;
+                    @include mq(xl, min) {
+                        width: 56px;
+                    }
+                }
             }
         }
     }