feat: Cria footer desktop

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

@@ -6,35 +6,97 @@ export default class Footer {
     }
 
     async init() {
+        this.imgLinks = "https://agenciamagma.vteximg.com.br/arquivos/";
         await this.selectors();
+        this.buildIconList();
+        this.buildDevelopedByList();
         // this.onUpdate();
     }
 
     async selectors() {
+        this.footerIconList = await waitElement(".footerCheckout__stamps");
+        this.footerDevelopedByList = 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");
+        // this.checkoutVazio = await waitElement(".empty-cart-content");
     }
 
-    onUpdate() {
+    buildIconList() {
-        //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
+        Object.values(this.footerIconList.children).forEach((li, index) => {
-        // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
+            const child = li.children[0].classList.contains("footerCheckout__payments")
-        // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
+                ? li.children[0]
-        let target = this.checkoutVazio;
+                : null;
-        let config = { childList: true, attributes: true };
+            if (child === null) return;
-        let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
-                console.log(mutation.type);
-            });
-        });
 
-        observer.observe(target, config);
+            if (index === 0)
-    }
+                child.innerHTML = `
-    async addCarrossel() {
+                <ul class="footerCheckout__payments-list">
-        const elemento = await waitElement("#my-element");
+                    <li class="footerCheckout__payments-item">
-        $(elemento).slick({
+                        <img class="footerCheckout__payments-icon" src="${this.imgLinks}masterCardM3Academy.png" alt="Logo Cartão Mastercard"/>
-            slidesToShow: 4,
+                    </li>
-            slidesToScroll: 1,
+                    <li class="footerCheckout__payments-item">
+                        <img class="footerCheckout__payments-icon" src="${this.imgLinks}visaM3Academy.png" alt="Logo Cartão VISA"/>
+                    </li>
+                    <li class="footerCheckout__payments-item">
+                        <img class="footerCheckout__payments-icon" src="${this.imgLinks}amexM3Academy.png" alt="Logo Cartão American Express"/>
+                    </li>
+                    <li class="footerCheckout__payments-item">
+                        <img class="footerCheckout__payments-icon" src="${this.imgLinks}eloM3Academy.png" alt="Logo Cartão Elo"/>
+                    </li>
+                    <li class="footerCheckout__payments-item">
+                        <img class="footerCheckout__payments-icon" src="${this.imgLinks}hiperCardM3Academy.png" alt="Logo Cartão Hipercard"/>
+                    </li>
+                    <li class="footerCheckout__payments-item">
+                        <img class="footerCheckout__payments-icon" src="${this.imgLinks}payPalM3Academy.png" alt="Logo Paypal"/>
+                    </li>
+                    <li class="footerCheckout__payments-item">
+                        <img class="footerCheckout__payments-icon" src="${this.imgLinks}boletoM3Academy.png" alt="Logo Boleto"/>
+                    </li>
+                </ul>
+                `;
+            else
+                child.innerHTML = `
+                    <img class="footerCheckout__payments-vtex-icon" src="${this.imgLinks}vtexPCIM3Academy.png" alt="Certificado VTEX PCI"/>
+                `;
         });
     }
+
+    buildDevelopedByList() {
+        Object.values(this.footerDevelopedByList.children).forEach((li, index) => {
+            const a = li.children[0];
+
+            if (index === 0)
+                a.innerHTML = `
+                    <span>Powered By</span>
+                    <img src="${this.imgLinks}logoVTEXM3Academy.png" alt="Logo VTEX" />
+                `;
+            else
+                a.innerHTML = `
+                    <span>Developed By</span>
+                    <img src="${this.imgLinks}logoM3M3Academy.png" alt="Logo M3" />
+                `;
+        });
+    }
+
+    // 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
+    //     // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
+    //     let target = this.checkoutVazio;
+    //     let config = { childList: true, attributes: true };
+    //     let observer = new MutationObserver((mutations) => {
+    //         mutations.forEach(function (mutation) {
+    //             console.log(mutation.type);
+    //         });
+    //     });
+
+    //     observer.observe(target, config);
+    // }
+    // async addCarrossel() {
+    //     const elemento = await waitElement("#my-element");
+    //     $(elemento).slick({
+    //         slidesToShow: 4,
+    //         slidesToScroll: 1,
+    //     });
+    // }
 }

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -3,27 +3,11 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
-html {
+img {
-    height: 100%;
+    display: block;
-    min-height: 100%;
-}
-
-footer .footerCheckout__wrapper {
-    width: 94.9734%;
-    margin: auto auto 0 auto;
-}
-footer .footerCheckout__prateleira,
-header {
-    width: 79.53125%;
-    margin: 0 auto;
 }
 
 body {
-    display: flex;
-    flex-direction: column;
-    min-height: 100% !important;
-    padding-top: 0 !important;
-
     @include mq(md, max) {
         padding-left: 0;
     }

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

@@ -1,47 +1,90 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    border-top: 1px solid $black-500;
-    color: #7d7d7d;
+    padding: 16px 32px;
 
-    &__wrapper {
+    .container {
-        align-items: center;
+        width: 100%;
         display: flex;
+        align-items: center;
         justify-content: space-between;
+
+        &::before,
+        &::after {
+            content: "";
+            display: none;
+        }
     }
 
     &__address {
-        color: #7d7d7d;
+        color: $black-400;
         font-family: $font-family;
         font-style: normal;
         font-weight: normal;
         font-size: 10px;
         line-height: 12px;
         text-transform: capitalize;
-        max-width: 40%;
 
-        @include mq(md, max) {
+        @include mq(4k, min) {
-            margin-bottom: 24px;
+            font-size: 20px;
-            max-width: 100%;
+            line-height: 27px;
+        }
+    }
+
+    &__payments-list {
+        list-style-type: none;
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: max-content;
+    }
+
+    &__payments-icon {
+        width: 35px;
+        margin-right: 13px;
+
+        @include mq(4k, min) {
+            width: 39px;
         }
     }
 
     &__stamps {
+        margin: 0;
         align-items: center;
         display: flex;
         justify-self: center;
         list-style: none;
 
-        @include mq(md, max) {
+        li {
-            align-self: center;
+            &:not(:first-of-type),
-            margin-bottom: 12px;
+            &:not(:last-of-type) {
+                height: 24px;
+
+                @include mq(4k, min) {
+                    height: 43px;
+                    display: flex;
+                    align-items: center;
+                }
+            }
         }
 
         &__divider {
-            background-color: #8d8d8d;
+            background-color: $gray-400;
             display: inline-block;
             height: 24px;
-            margin: 0 8px;
+            margin: 0 10px 0 0;
             width: 1px;
+
+            @include mq(4k, min) {
+                height: 43px;
+            }
+        }
+    }
+
+    &__payments-vtex-icon {
+        width: 53px;
+
+        @include mq(4k, min) {
+            width: 103px;
         }
     }
 
@@ -52,22 +95,39 @@
         margin: 0;
 
         li:last-child {
-            margin-left: 16px;
+            margin-left: 10px;
+        }
+
+        li {
+            a {
+                img {
+                    height: 16px;
+                    width: auto;
+
+                    @include mq(4k, min) {
+                        height: 30px;
+                    }
+                }
+            }
         }
 
         a {
             align-items: center;
-            color: #7d7d7d;
+            color: $black-400;
             display: flex;
             font-family: $font-family;
-            font-style: normal;
+            font-weight: 400;
-            font-weight: normal;
+            font-size: 9px;
-            font-size: 10px;
             line-height: 12px;
             text-decoration: none;
 
+            @include mq(4k, min) {
+                font-size: 18px;
+                line-height: 25px;
+            }
+
             span {
-                margin-right: 8px;
+                margin-right: 10px;
             }
         }
     }

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

@@ -1,15 +1,14 @@
 /* _header.scss */
 .headerCheckout {
     border-bottom: 1px solid $black-500;
-    width: 100%;
+    padding: 29px 131px;
+
+    @include mq(mobile, max) {
+        padding: 16px;
+    }
 
     .container {
         width: auto !important;
-        margin: 29px 131px;
-
-        @include mq(mobile, max) {
-            margin: 16px;
-        }
     }
 
     &__wrapper {

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -9,6 +9,8 @@ $font-family-secundary: "Tenor Sans", sans-serif;
 $black-400: #292929;
 $black-500: #000;
 
+$gray-400: #c4c4c4;
+
 $white-500: #fff;
 
 /* Grid breakpoints */