feat: Cria e estiliza a parte debaixo do footer

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

@@ -9,8 +9,11 @@ export default class Footer {
         this.productList = [];
         this.carregaProdutos();
         await this.selectors();
+        await this.criaStamps();
+        await this.criaDevelopedBy();
+
         // this.onUpdate();
-        await this.criaProduto();
+        // await this.criaProduto();
     }
 
     async selectors() {
@@ -18,6 +21,10 @@ export default class Footer {
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
         this.prateleira = await waitElement(".footerCheckout__prateleira");
         this.checkoutVazio = await waitElement(".empty-cart-content");
+
+        this.stamps = await waitElement(".footerCheckout__stamps");
+        this.developedBy = await waitElement(".footerCheckout__developedBy");
+        this.footer = await waitElement(".footerCheckout__wrapper");
     }
 
     onUpdate() {
@@ -40,24 +47,21 @@ export default class Footer {
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            arrows: true,
         });
     }
 
     async criaProduto() {
-        let estrutura = ""
+        let estrutura = "";
-        let estruturaSkus = ""
+        let estruturaSkus = "";
-        if(this.prateleira) {
+        if (this.prateleira) {
-            console.log(this.productList, "Cria HTMl");
             this.productList.forEach((product) => {
-                estruturaSkus = ""
+                estruturaSkus = "";
-                product.skus.forEach(name => {
+                product.skus.forEach((name) => {
-                    estruturaSkus += `<span class="prateleira__name">${name}</span>`
+                    estruturaSkus += `<span class="prateleira__name">${name}</span>`;
-                })
+                });
 
-
+                estrutura += `
-                console.log(product.skus);
-
-                estrutura +=`
                 <div class="prateleira__container">
                 <figure class="prateleira__image-wrapper">
                 <img src=${product.image}>
@@ -69,38 +73,88 @@ export default class Footer {
                 <a class="prateleira__button" href=${product.link}>Ver Produto</a>
                 </div>
                 </figure>
-                </div>`
+                </div>`;
-            })
+            });
             this.prateleira.innerHTML = estrutura;
         }
 
         this.addCarrossel();
-
     }
 
     carregaProdutos() {
-        fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
+        fetch(
-            .then(response => response.json())
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
-            .then(data => {
+        )
-                data.forEach(item => {
+            .then((response) => response.json())
+            .then((data) => {
+                data.forEach((item) => {
                     const arraySKU = [];
-                    item.items.forEach(sku => {
+                    item.items.forEach((sku) => {
                         arraySKU.push(sku.name);
-                    })
+                    });
 
                     const product = {
                         image: item.items[0].images[0].imageUrl,
                         productName: item.productName,
                         link: item.link,
-                        skus: arraySKU
+                        skus: arraySKU,
                     };
 
                     this.productList.push(product);
-                })
+                });
-                console.log(this.productList, "Carrega Lista");
             })
-            .catch(err => log(err));
+            .catch((err) => log(err));
     }
 
+    async criaStamps() {
+        if (this.stamps) {
+            this.stamps.innerHTML = `<li class="footerCheckout__li masterCard">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="lodo da MasterCard" />
+        </li>
+        <li class="footerCheckout__li visa">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="logo da Visa" />
+        </li>
+        <li class="footerCheckout__li amex">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="logo da Amex" />
+        </li>
+        <li class="footerCheckout__li elo">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="logo da Elo" />
+        </li>
+        <li class="footerCheckout__li hiperCard">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="logo da HiperCard" />
+        </li>
+        <li class="footerCheckout__li payPal">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="logo do PayPal" />
+        </li>
+        <li class="footerCheckout__li boleto">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="logo Boleto" />
+        </li>
+        <li class="divider">
+        </li>
+        <li class="footerCheckout__li vtexPCI">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="logo da Vtex PCI" />
+        </li>`;
+        }
+    }
 
+    async criaDevelopedBy() {
+
+        if(this.developedBy) {
+            this.developedBy.innerHTML = `
+            <li>
+                <a href="https://vtex.com/br-pt">
+                    <span>Powered by</span>
+                    <img class="vtex" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"/>
+                </a>
+            </li>
+            <li>
+                <a href="https://m3.com/">
+                    <span>Developed by</span>
+                    <img class="m3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/>
+                </a>
+                </li>
+            `;
+
+        }
+    }
 }

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

@@ -9,9 +9,23 @@ html {
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    border-top: 1px solid $black-500;
-    margin: auto auto 0 auto;
+
+    .container {
+        width: 94.9734%;
+        margin: 16px auto 16px auto;
+
+        @include mq(tablet, max) {
+            margin: 0;
+            width: 100%;
+        }
+
+        @include mq(desktop4K, min) {
+            margin: 14px auto 16.54px auto;
+        }
+    }
 }
+
 footer .prateleira,
 header {
     width: 79.53125%;

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

@@ -1,74 +1,288 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    &__prateleira {
-    color: $color-gray2;
+        display: none;
+    }
 
     &__wrapper {
-        align-items: center;
+        .container {
-        display: flex;
+            display: flex;
-        justify-content: space-between;
+            align-items: center;
+            justify-content: center;
+
+            @include mq(tablet, max) {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
     }
 
     &__address {
-        color: $color-gray2;
+        font-family: "Open Sans";
-        font-family: $font-family;
         font-style: normal;
-        font-weight: normal;
+        font-weight: 400;
         font-size: 10px;
-        line-height: 12px;
+        line-height: 14px;
         text-transform: capitalize;
-        max-width: 40%;
+        color: $black-300;
 
-        @include mq(md, max) {
+        @include mq(tablet, max) {
-            margin-bottom: 24px;
+            order: 2;
-            max-width: 100%;
+
+            margin: 0 16px 16px;
+        }
+
+        @include mq(desktop4K, min) {
+            font-size: 20px;
+            line-height: 27px;
         }
     }
 
     &__stamps {
-        align-items: center;
+        box-sizing: border-box;
-        display: flex;
+        width: 33.234%;
-        justify-self: center;
-        list-style: none;
 
-        @include mq(md, max) {
+        display: flex;
-            align-self: center;
+        align-items: center;
-            margin-bottom: 12px;
+        justify-content: space-between;
+        list-style: none;
+        margin: 0 auto;
+
+        @include mq(tablet, max) {
+            order: 1;
+            margin: 0;
+
+            width: 100%;
+            padding: 16px 8px;
+
+            justify-content: flex-start;
         }
 
-        &__divider {
+        @include mq(desktop4K, min) {
-            background-color: $color-gray4;
+            width: 29.0827%;
-            display: inline-block;
+        }
+
+        .divider {
             height: 24px;
-            margin: 0 8px;
             width: 1px;
+            background-color: $gray-500;
+
+            @include mq(desktop4K, min) {
+                height: 43px;
+            }
+        }
+    }
+
+    &__li {
+        &.masterCard {
+            margin-right: 13.35px;
+
+            @include mq(tablet, max) {
+                margin-right: 4.35px;
+                width: 3.536%;
+            }
+
+            @include mq(celular, max) {
+                width: 9.930%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.37px;
+            }
+        }
+
+        &.visa {
+            margin-right: 13.22px;
+
+            @include mq(tablet, max) {
+                margin-right: 5.22px;
+
+                width: 3.451%;
+            }
+
+            @include mq(celular, max) {
+                width: 9.688%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.07px;
+            }
+        }
+        &.amex {
+            margin-right: 13.22px;
+            @include mq(tablet, max) {
+                margin-right: 4.22px;
+                width: 3.451%;
+            }
+
+            @include mq(celular, max) {
+                width: 9.688%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.07px;
+            }
+        }
+        &.elo {
+            margin-right: 13.38px;
+            @include mq(tablet, max) {
+                margin-right: 4.48px;
+                width: 3.623%;
+            }
+
+            @include mq(celular, max) {
+                width: 10.1727%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.67px;
+            }
+        }
+        &.hiperCard {
+            margin-right: 13.22px;
+            @include mq(tablet, max) {
+                margin-right: 4.22px;
+                width: 3.451%;
+            }
+
+            @include mq(celular, max) {
+                width: 9.688%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.07px;
+            }
+        }
+        &.payPal {
+            margin-right: 13.35px;
+            @include mq(tablet, max) {
+                margin-right: 4.35px;
+                width: 3.536%;
+            }
+            @include mq(celular, max) {
+                width: 9.930%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.37px;
+            }
+        }
+        &.boleto {
+            margin-right: 13.35px;
+
+            @include mq(tablet, max) {
+                margin-right: 4.35px;
+                width: 3.536%;
+            }
+            @include mq(celular, max) {
+                width: 9.930%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.37px;
+            }
+        }
+        &.vtexPCI {
+            margin-left: 10px;
+
+            @include mq(tablet, max) {
+                width: 5.593%;
+            }
+
+            @include mq(celular, max) {
+                width: 14.76323%;
+            }
         }
     }
 
     &__developedBy {
-        align-items: center;
-        display: flex;
         list-style-type: none;
         margin: 0;
+        display: flex;
+        gap: 10.73px;
 
-        li:last-child {
+        @include mq(tablet, max) {
-            margin-left: 16px;
+            order: 3;
+
+            // width: 21.527777%;
+            margin: 0 16px 16px;
+            justify-content: flex-start;
         }
 
         a {
-            align-items: center;
-            color: $color-gray2;
             display: flex;
-            font-family: $font-family;
+            align-items: center;
-            font-style: normal;
+            flex-wrap: wrap;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 12px;
-            text-decoration: none;
 
-            span {
+            font-family: "Open Sans";
-                margin-right: 8px;
+            font-weight: 400;
+            font-size: 9px;
+            line-height: 12px;
+
+            color: $black-300;
+
+            .vtex {
+                width: 44.92px;
+                margin-left: 10.12px;
+            }
+
+            .m3 {
+                width: 28.66px;
+                margin-left: 10.97px;
             }
         }
     }
+
+    // &__developedBy {
+    //     box-sizing: border-box;
+    //     display: flex;
+    //     align-items: center;
+    //     justify-content: space-between;
+    //     list-style-type: none;
+    //     margin: 0;
+
+    //     width: 17.851%;
+    //     min-width: 205px;
+
+    //     @include mq(tablet, max) {
+    //         order: 3;
+
+    //         width: 21.527777%;
+    //         margin: 0 16px 16px;
+    //         justify-content: flex-start;
+    //     }
+
+    // li {
+    //     width: 50%;
+
+    //     @include mq(tablet, max) {
+    //         width: auto;
+    //     }
+    // }
+
+    // a {
+    //     display: flex;
+    //     align-items: center;
+    //     justify-content: flex-end;
+    //     gap: 10px;
+    //     font-family: "Open Sans";
+    //     font-weight: 400;
+    //     font-size: 9px;
+    //     line-height: 12px;
+
+    //     color: $black-300;
+
+    //     img {
+    //         width: 20px;
+    //     }
+
+    //     .vtex {
+    //         width: 36.3%;
+    //     }
+
+    //     .m3 {
+    //         width: 30.75%;
+    //     }
+    // }
+    // }
 }

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

@@ -23,6 +23,8 @@ $color-green: #4caf50;
 $black-500: #000;
 $black-300: #292929;
 
+$gray-500: #C4C4C4;
+
 /* Grid breakpoints */
 $grid-breakpoints: (
 	xs: 0,

checkout/src/template-checkout/templates.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+    </head>
+    <body>
+        <ul>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" />
+            </li>
+            <li class="divider">
+
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" />
+            </li>
+        </ul>
+
+        <div>
+            <li>
+                <a href="https://vtex.com/br-pt">Powered by <img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt=""></a>
+               </li>
+           <li>
+            <a href="https://agenciam3.com/">Developed by <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt=""></a>
+           </li>
+        </div>
+    </body>
+</html>