checkout/src/arquivos/js/checkout.js

@@ -2,11 +2,12 @@ import CheckoutUI from "./components/CheckoutUI";
 import { Container } from "m3-utils";
 import "slick-carousel";
 import Header from "./components/Header";
+import Body from "./components/Body";
 import Footer from "./components/Footer";
 
 const m3Checkout = new Container({
     appName: "m3-checkout",
-    components: [CheckoutUI, Header, Footer],
+    components: [CheckoutUI, Header, Body, Footer],
 });
 
 m3Checkout.start();

checkout/src/arquivos/js/components/Body.js

@@ -0,0 +1,16 @@
+export default class Body {
+    constructor() {
+        this.init();
+    }
+
+    async init() {
+        await this.selectors();
+    }
+    async selectors() {
+        this.titleCart = await waitElement(".empty-cart-title");
+    }
+
+    trocaTitle() {
+        this.titleCart.innerHTML = ``;
+    }
+}

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

@@ -8,12 +8,21 @@ export default class Footer {
     async init() {
         await this.selectors();
         // this.onUpdate();
+        await this.pegarInfo(
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+        );
+        await this.renderIconCreditCards();
+        await this.renderIconVtexPci();
+        await this.renderIconsDeveloped();
     }
 
     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.footerIconsCreditCards = await waitElement(".footerCheckout__payments");
+        this.footerIconVtexPci = await waitElement(".footerCheckout__vtexpci");
+        this.footerIconsDeveloped = await waitElement(".footerCheckout__developedBy");
     }
 
     onUpdate() {
@@ -37,4 +46,41 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+    produtos(data) {
+        return {
+            imagem: data["items"][0]["images"][0]["imageUrl"],
+            nome: data["productName"],
+            tamanho: data["items"].map((val) => val["name"]),
+        };
+    }
+
+    async pegarInfo(url) {
+        const response = await fetch(url);
+        //console.log(response);
+        const data = await response.json();
+        //console.log(data);
+        const Items = data.map((val) => this.produtos(val));
+        console.log(Items);
+    }
+
+    renderIconCreditCards() {
+        this.footerIconsCreditCards.innerHTML = `
+        <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
+        <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" />
+        <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" />
+        <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" />
+        <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" />
+        <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" />
+        <img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" />`;
+    }
+
+    renderIconVtexPci() {
+        this.footerIconVtexPci.innerHTML = `<img class="IconVtexImg" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" />`;
+    }
+
+    renderIconsDeveloped() {
+        this.footerIconsDeveloped.innerHTML = `
+        <li><a href="https://vtex.com/br-pt/"><span>Powered By</span><img class="iconDevV" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"/> </a></li>
+        <li><a href="https://vtex.com/br-pt/"><span>Developed By</span><img class="iconDeveLM3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/> </a></li>`;
+    }
 }

checkout/src/arquivos/js/components/Header.js

@@ -32,7 +32,9 @@ export default class Header {
 
             <li>
             <div class="containerLi"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
-            <li><div class="containerLi><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p><p id="progress-bar-line-2" class="progress-bar-line-2"></p></div></div></li>
+
+            <li>
+            <div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-3" class="progress-bar-circle-3"></p><p id="progress-bar-line-2" class="progress-bar-line-2"></p></div></div> </li>
             </ul>
             `;
         }

checkout/src/arquivos/sass/checkout.scss

@@ -1,5 +1,6 @@
 @import "./utils/all";
 @import "./lib/slick";
 @import "./partials/header";
+@import "./partials/body";
 @import "./partials/footer";
 @import "./checkout/checkout.scss";

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

@@ -0,0 +1,11 @@
+/*#checkoutMainContainer {
+    width: 100%;
+    transform: translateY(-50%);
+    height: 1px;
+    border-bottom: 1px solid #000000;
+}*/
+.container-cart {
+    #cart-title {
+        display: none !important;
+    }
+}

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

@@ -1,5 +1,8 @@
 /* _footer.scss */
 .footerCheckout {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
     border-top: none;
     color: $color-gray2;
 
@@ -8,7 +11,12 @@
         display: flex;
         justify-content: space-between;
     }
-
+    .container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
     &__address {
         color: $color-gray2;
         font-family: $font-family;
@@ -26,11 +34,13 @@
     }
 
     &__stamps {
+        width: 31.56%;
         align-items: center;
         display: flex;
         justify-self: center;
         list-style: none;
-
+        flex-direction: row;
+        margin: 0;
         @include mq(md, max) {
             align-self: center;
             margin-bottom: 12px;
@@ -43,9 +53,20 @@
             margin: 0 8px;
             width: 1px;
         }
+        &__payments {
+            display: flex;
+            flex-direction: row;
+        }
+        .IconCredImg {
+            width: 12.25%;
+        }
+        .IconVtexImg {
+            width: 87%;
+        }
     }
 
     &__developedBy {
+        width: 18.6%;
         align-items: center;
         display: flex;
         list-style-type: none;
@@ -69,6 +90,12 @@
             span {
                 margin-right: 8px;
             }
+            .iconDevV {
+                width: 19.65%;
+            }
+            .iconDeveLM3 {
+                width: 15.65%;
+            }
         }
     }
 }

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

@@ -1,6 +1,14 @@
 /* _header.scss */
 .headerCheckout {
     .container {
+        &::after {
+            margin-top: 30px;
+            width: 100%;
+            transform: translateY(-50%);
+            height: 1px;
+            border-bottom: 1px solid #000000;
+        }
+
         width: auto !important;
         #progressBar {
             width: 446px;
@@ -60,25 +68,26 @@
             }
             li .progress-bar-line-1 {
                 position: absolute;
-                left: 25%;
+                left: 57%;
                 transform: translateY(-50%);
-                bottom: 5px;
+                bottom: 4px;
-                width: 100%;
+                width: 212%;
                 height: 1px;
                 border-top: 1px solid #000;
             }
             li .progress-bar-line-2 {
                 position: absolute;
-                right: 21%;
+                right: 59%;
                 transform: translateY(-50%);
                 bottom: 5px;
-                width: 100%;
+                width: 242%;
                 height: 1px;
                 border-top: 1px solid #000;
             }
         }
     }
     &__wrapper {
+        margin-top: 30px;
         align-items: center;
         display: flex;
         justify-content: space-between;
@@ -92,9 +101,11 @@
     }
 
     &__safeBuy {
+        display: flex;
         span {
             align-items: center;
             display: flex;
+            flex-direction: row;
             text-transform: uppercase;
             font-family: $font-family;
             font-style: normal;
@@ -104,7 +115,8 @@
             color: $color-gray;
         }
 
-        i {
+        img {
+            width: 10%;
             margin-right: 8px;
         }
     }