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

@@ -7,8 +7,12 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        this.onUpdate();
+        //this.onUpdate();
-        await this.hideCartTitle();
+        // await this.hideCartTitle();
+        this.addCreditCards();
+        this.addCredits();
+        // this.changeButtonText();
+        console.log("Dentro do Footer");
     }
 
     async selectors() {
@@ -16,11 +20,12 @@ export default class Footer {
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
         this.checkoutVazio = await waitElement(".empty-cart-content");
         this.checkoutTitle = await waitElement("#cart-title");
-        this.cartChooseProducts = await waitElement("#cart-choose-products");
+        // this.productName = await waitElement("#product-name");
-        this.productName = await waitElement("#product-name", {
+
-            timeout: 5000,
+        this.creditCardSection = await waitElement(".footerCheckout__stamps");
-            interval: 1000,
+        this.creditsSection = await waitElement(".footerCheckout__developedBy");
-        });
+        console.log(this.creditCardSection);
+        this.cartChooseProducts = await waitElement("a#cart-choose-products");
     }
 
     async hideCartTitle() {
@@ -38,6 +43,95 @@ export default class Footer {
         // }
     }
 
+    changeButtonText() {
+        // console.log("Mudando texto do botão");
+        this.cartChooseProducts.innerText = "Continue Comprando";
+    }
+
+    addCreditCards() {
+        this.creditCardSection.innerHTML = `
+        <div class="credit-cards">
+                <figure class="cards-logo">
+                    <img
+
+                        src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
+                        alt="MasterCard logo"
+                    />
+                </figure>
+
+                <figure class="cards-logo">
+                    <img
+
+                        src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
+                        alt="Visa logo"
+                    />
+                </figure>
+
+                <figure class="cards-logo">
+                    <img
+
+                        src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
+                        alt="American Express logo"
+                    />
+                </figure>
+
+                <figure class="cards-logo">
+                    <img
+                    class="cards-logo"
+
+                        src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
+                        alt="Elo logo"
+                    />
+                </figure>
+
+                <figure class="cards-logo">
+                    <img
+
+                        src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
+                        alt="PayPal logo"
+                    />
+                </figure>
+
+                <figure class="cards-logo">
+                    <img
+
+                        src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
+                        alt="Boleto logo"
+                    />
+                </figure>
+
+                <figure class="cards-logo">
+                    <img
+
+                        src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
+                        alt="Vtex Certified logo"
+                    />
+                </figure>
+            </div>`;
+    }
+
+    addCredits() {
+        this.creditsSection.innerHTML = `<div class="credits">
+        <div class="credit-text">Powered By</div>
+        <div class="logo">
+            <figure>
+                <img
+                    src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"
+                    alt="VTex Logo"
+                />
+            </figure>
+        </div>
+        <div class="credit-text">Developed by</div>
+        <div class="logo">
+            <figure>
+                <img
+                    src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"
+                    alt="M3 Logo"
+                />
+            </figure>
+        </div>`;
+    }
+
     onUpdate() {
         // Função que 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

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

@@ -10,6 +10,7 @@ export default class Header {
         await this.selectors();
         this.progressBarHTML();
         await this.progressbarProgress();
+        this.changeButtonText();
     }
 
     async selectors() {
@@ -21,7 +22,14 @@ export default class Header {
         this.header = await waitElement(".headerCheckout");
         this.progressBar = await waitElement("#progressBar");
 
-        console.log("Barra encontrada");
+        // CART TITLE
+
+        this.cartChooseProducts = await waitElement("a#cart-choose-products");
+    }
+
+    changeButtonText() {
+        // console.log("Mudando texto do botão");
+        this.cartChooseProducts.innerText = "Continue Comprando";
     }
 
     progressBarHTML() {

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

@@ -35,7 +35,7 @@
             padding: 16px 65px;
 
             &:hover {
-                background: lighten($color-black, 5);
+                background: white;
             }
         }
     }

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

@@ -3,11 +3,59 @@
 .footerCheckout {
     border-top: none;
     color: $color-gray2;
+    position: absolute;
+    width: 100%;
+    bottom: 0;
 
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
+
+        .container {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            justify-content: space-between;
+            .credit-cards {
+                display: flex;
+
+                .cards-logo {
+                    width: 36px;
+                    height: 20px;
+                    margin: 0;
+                    margin-right: 13px;
+                }
+            }
+        }
+
+        .credits {
+            display: flex;
+            gap: 10px;
+            margin: 0;
+            padding: 0;
+            align-items: baseline;
+
+            .credit-text {
+                font-weight: 400;
+                font-size: 9px;
+                line-height: 12px;
+            }
+
+            .logo {
+                width: 44px;
+                height: 16px;
+
+                figure {
+                    margin: 0;
+                    width: 100%;
+
+                    img {
+                        height: 16px;
+                    }
+                }
+            }
+        }
     }
 
     &__address {

checkout/src/template-checkout/checkout-header.html

@@ -6,15 +6,41 @@
         <div class="headerCheckout__wrapper">
             <div class="headerCheckout__logo">
                 <a href="/">
-                        <img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
+                        alt="M3 Academy"
+                    />
                 </a>
             </div>
-                <div id="progressBar" class="progress-bar">	Aqui entra a barra de progresso
+            <div id="progressBar" class="progress-bar">Aqui entra a barra de progresso</div>
-                </div>
             <div class="headerCheckout__safeBuy">
-                      <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
+                <img
+                    src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
+                    alt="Cadeado"
+                />
                 <span>Compra segura</span>
             </div>
+
+            <div class="credits">
+                <div>Powered By</div>
+                <div class="logo">
+                    <figure>
+                        <img
+                            src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"
+                            alt="VTex Logo"
+                        />
+                    </figure>
+                </div>
+                <div>Developed by</div>
+                <div class="logo">
+                    <figure>
+                        <img
+                            src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"
+                            alt="M3 Logo"
+                        />
+                    </figure>
+                </div>
+            </div>
         </div>
     </div>
 </header>