checkout/src/arquivos/js/checkout.js

@@ -7,7 +7,7 @@ import Content from "./components/content";
 
 const m3Checkout = new Container({
     appName: "m3-checkout",
-    components: [CheckoutUI, Content, Header, Footer],
+    components: [CheckoutUI, Header, Footer],
 });
 
 m3Checkout.start();

checkout/src/arquivos/js/components/Content.js

@@ -1,3 +1,4 @@
+import { hasData } from "jquery";
 import { waitElement } from "m3-utils";
 
 export default class Content {
@@ -6,6 +7,7 @@ export default class Content {
     }
 
     async selectors() {
+        this.titleMyCart = await waitElement("#cart-title");
         this.h2CartEmpty = await waitElement(".empty-cart-title", {
             timeout: 5000,
             interval: 1000,
@@ -14,15 +16,28 @@ export default class Content {
             timeout: 5000,
             interval: 1000,
         });
+        this.cartContent = await waitElement(".cart");
     }
 
     async init() {
         await this.selectors();
         await this.insertHTML();
+        await this.modificadedHTML();
     }
 
     async insertHTML() {
         this.h2CartEmpty.innerHTML = `Seu carrinho está vazio`;
         this.btnCartEmpty.innerHTML = `Continuar Comprando`;
     }
+
+    // async modificadedHTML() {
+    //     let monitorDisplay = this.cartContent.style.display;
+    //     window.sty
+    //     if (this.cartContent.style.display === "none") {
+    //         console.log("oioioi");
+    //         this.titleMyCart.classList.add("cartTitleInvisible");
+    //     } else if (this.titleMyCart.classList.contains("cartTitleInvisible")) {
+    //         this.titleMyCart.classList.remove("cartTitleInvisible");
+    //     }
+    // }
 }

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

@@ -7,6 +7,7 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+        await this.addImagesFooter();
         // this.onUpdate();
     }
 
@@ -14,6 +15,8 @@ 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.checkoutPayments = await waitElement(".footerCheckout__stamps");
+        this.developBy = await waitElement(".footerCheckout__developedBy");
     }
 
     onUpdate() {
@@ -37,4 +40,29 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+
+    async addImagesFooter() {
+        this.checkoutPayments.children[0].innerHTML = `
+        <div class="footerCheckout__payments">
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Logo Master Card" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Logo Visa" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Logo American Express" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Logo Elo" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/hipercardM3Academy.png" alt="Logo HiperCard" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Logo PayPal" />
+            <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Logo Boleto" />
+        </div>
+        `;
+        this.checkoutPayments.children[2].innerHTML = `
+        <div class="footerCheckout__payments">
+            <img class="vtexIcon" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo VTEX PCI Certificado" />
+        </div>
+        `;
+        this.developBy.children[0].children[0].innerHTML = `
+        <span>Powered by</span><img class="logoVtexFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Logo VTEX" />
+        `;
+        this.developBy.children[1].children[0].innerHTML = `
+        <span>Developed by</span><img class="logoM3Footer" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="Logo M3" />
+        `;
+    }
 }

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

@@ -38,7 +38,6 @@ export default class Header {
     async progressBarDots() {
         if (this.progressBar && window.screen.width > 1024) {
             const progressBarList = document.querySelectorAll("#progressBar ol li");
-            console.log(progressBarList);
 
             progressBarList.forEach((li) => {
                 if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {

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

@@ -11,35 +11,43 @@
     }
 
     &-title {
-        font-family: "Open Sans";
+        font-size: 0;
-        font-style: normal;
-        font-weight: 700;
-        font-size: 24px;
-        line-height: 33px;
-        text-transform: uppercase;
         margin: 0;
+        line-height: 0;
+        &::before {
+            content: "Seu carrinho está vazio";
+            font-family: "Open Sans";
+            font-style: normal;
+            font-weight: 700;
+            font-size: 24px;
+            line-height: 33px;
+            text-transform: uppercase;
+        }
     }
 
     &-links {
         .link-choose-products {
+            font-size: 0;
             background: $color-white;
             border: 1px solid $color-black-neutra;
             transition: ease-in 0.22s all;
             border-radius: 0;
-            font-family: "Tenor Sans";
-            font-style: normal;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 16px;
-            text-align: center;
-            text-transform: uppercase;
-            color: $color-black-neutra;
-
             box-sizing: border-box;
             width: 34.4936%;
             height: 48px;
             margin: 32px 0 0 0;
             padding-top: 15px;
+            &::before {
+                content: "Continuar comprando";
+                font-family: "Tenor Sans";
+                font-style: normal;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 16px;
+                text-align: center;
+                text-transform: uppercase;
+                color: $color-black-neutra;
+            }
 
             &:hover {
                 background: $color-white;
@@ -48,7 +56,6 @@
     }
 }
 
-#cart-title,
 .empty-cart-message,
 .transactions-container {
     display: none !important;
@@ -57,3 +64,7 @@
 .cart-template {
     margin: 0 !important;
 }
+
+.cartTitleInvisible {
+    display: none !important;
+}

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

@@ -7,15 +7,29 @@
         align-items: center;
         display: flex;
         justify-content: space-between;
+        margin: 0;
+
+        .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            margin: 0;
+
+            &::before,
+            &::after {
+                display: none;
+            }
+        }
     }
 
     &__address {
-        color: $color-gray2;
+        color: $color-black;
         font-family: $font-family;
         font-style: normal;
-        font-weight: normal;
+        font-weight: 400;
         font-size: 10px;
-        line-height: 12px;
+        line-height: 13.62px;
         text-transform: capitalize;
         max-width: 40%;
 
@@ -38,13 +52,27 @@
 
         &__divider {
             background-color: $color-gray4;
-            display: inline-block;
+            display: block;
+            align-items: center;
             height: 24px;
-            margin: 0 8px;
             width: 1px;
         }
     }
 
+    &__payments {
+        .paymentFooter {
+            width: 35.65px;
+            height: 20px;
+            margin-right: 13.35px;
+        }
+
+        .vtexIcon {
+            width: 53px;
+            height: 33px;
+            margin-left: 10px;
+        }
+    }
+
     &__developedBy {
         align-items: center;
         display: flex;
@@ -57,18 +85,28 @@
 
         a {
             align-items: center;
-            color: $color-gray2;
+            color: $color-black;
             display: flex;
             font-family: $font-family;
             font-style: normal;
-            font-weight: normal;
+            font-weight: 400;
-            font-size: 10px;
+            font-size: 9px;
             line-height: 12px;
             text-decoration: none;
 
             span {
-                margin-right: 8px;
+                margin-right: 11px;
             }
         }
+
+        .logoVtexFooter {
+            width: 44.92px;
+            height: 16px;
+        }
+
+        .logoM3Footer {
+            width: 28.66px;
+            height: 15.65px;
+        }
     }
 }

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

@@ -1,22 +1,127 @@
 /* _header.scss */
 .headerCheckout {
     .container {
-        width: auto !important;
+        width: 79.53125%;
+        height: 96px;
+        display: flex;
+        align-items: center;
     }
     &__wrapper {
+        width: 100%;
         align-items: center;
         display: flex;
         justify-content: space-between;
+
+        #progressBar {
+            width: 43.1237%;
+            position: relative;
+        }
+
+        .ProgressBar {
+            width: 100%;
+            display: grid;
+            grid-template-columns: 1fr max-content 1fr;
+            margin: 0;
+
+            &::after {
+                content: "";
+                position: absolute;
+                width: 80%;
+                height: 1px;
+                background-color: #000000;
+                top: 29px;
+                left: 51%;
+                transform: translate(-50%, -50%);
+                z-index: -1;
+
+                @media (min-width: 1140px) {
+                    width: 82%;
+                }
+
+                @media (min-width: 1270px) {
+                    width: 84%;
+                }
+
+                @media (min-width: 1440px) {
+                    width: 87%;
+                }
+
+                @media (min-width: 1810px) {
+                    width: 89%;
+                }
+
+                @media (min-width: 2160px) {
+                    width: 91%;
+                }
+
+                @media (min-width: 2880px) {
+                    width: 93%;
+                }
+
+                @media (min-width: 3510px) {
+                    width: 95%;
+                }
+            }
+            .ProgressBar-step {
+                list-style: none;
+                position: relative;
+
+                &:first-child::after {
+                    content: none;
+                }
+
+                span {
+                    display: grid;
+                    grid-template-areas:
+                        "texto"
+                        "dot";
+                    width: max-content;
+                    white-space: nowrap;
+                    font-family: "Tenor Sans";
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 14px;
+
+                    &::before {
+                        grid-area: dot;
+                        justify-self: center;
+                        content: "";
+                        width: 12px;
+                        height: 12px;
+                        border: 1px solid #000000;
+                        border-radius: 100%;
+                        display: block;
+                        background-color: #ffffff;
+                        margin-top: 9px;
+                        box-sizing: border-box;
+                    }
+                }
+
+                .active {
+                    &::before {
+                        background-color: #000000;
+                    }
+                }
+            }
+
+            .stepThree {
+                justify-self: end;
+            }
+        }
     }
 
     &__logo {
+        width: 155.58px;
         img {
-            height: 52px;
+            height: 37.14px;
-            width: auto;
+            width: 100%;
         }
     }
 
     &__safeBuy {
+        display: flex;
+        align-items: center;
         span {
             align-items: center;
             display: flex;
@@ -26,10 +131,12 @@
             font-weight: normal;
             font-size: 12px;
             line-height: 14px;
-            color: $color-gray;
+            color: $color-black;
         }
 
-        i {
+        img {
+            height: 15px;
+
             margin-right: 8px;
         }
     }