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

@@ -1,5 +1,11 @@
 import { waitElement } from "m3-utils";
 
+const insertImage = (name, options) => {
+    const domain = "https://agenciamagma.vteximg.com.br";
+
+    return `<img ${options} src="${domain}/arquivos/${name}M3Academy.png"/>`;
+};
+
 export default class Footer {
     constructor() {
         this.init();
@@ -7,6 +13,8 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+        this.innerToPayments();
+        this.innerDevelopedBy();
         // this.onUpdate();
     }
 
@@ -14,6 +22,61 @@ 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.paymentContainer = await waitElement(".footerCheckout__stamps");
+        this.developedByContainer = await waitElement(".footerCheckout__developedBy");
+    }
+
+    innerToPayments() {
+        if (this.paymentContainer) {
+            const payments = this.paymentContainer.children[0].children[0];
+            const vericatedVtex = this.paymentContainer.children[2].children[0];
+
+            if (payments && vericatedVtex) {
+                let structure = "";
+                const paymentsTypes = [
+                    "masterCard",
+                    "visa",
+                    "amex",
+                    "elo",
+                    "hiperCard",
+                    "payPal",
+                    "boleto",
+                ];
+
+                paymentsTypes.forEach(
+                    (payment) =>
+                        (structure += `<li class="footerCheckout__creditItem" >${insertImage(
+                            payment,
+                            'class="footerCheckout__creditImage"'
+                        )}</li>`)
+                );
+
+                payments.innerHTML = `<ul class="footerCheckout__creditList">${structure}</ul>`;
+
+                vericatedVtex.innerHTML = insertImage(
+                    "vtexPCI",
+                    'class="footerCheckout__verificatedVtex"'
+                );
+            }
+        }
+    }
+
+    innerDevelopedBy() {
+        if (this.developedByContainer) {
+            const poweredBy = this.developedByContainer.children[0].children[0];
+            const developedBy = this.developedByContainer.children[1].children[0];
+
+            if (poweredBy && developedBy) {
+                poweredBy.innerHTML = `<span>Powered By</span>${insertImage(
+                    "logoVTEX",
+                    'class="footerCheckout__logo footerCheckout__logo--vtex"'
+                )}`;
+                developedBy.innerHTML = `<span>Developed By</span>${insertImage(
+                    "logoM3",
+                    'class="footerCheckout__logo footerCheckout__logo--m3"'
+                )}`;
+            }
+        }
     }
 
     onUpdate() {

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

@@ -3,6 +3,8 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
+
+
 body {
     display: flex;
     flex-direction: column;

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

@@ -1,41 +1,149 @@
-/* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    padding: 16px 25px 18.88px 8px;
+
+    @include mq("md", min) {
+        padding: 16px 0;
+    }
+}
+
+.footerCheckout {
+    border-top: 1px solid $clr-common-black;
     color: $clr-gray-400;
 
-    &__wrapper {
+    &__stamps {
-        align-items: center;
+        order: 0;
-        display: flex;
+        margin: 0 0 16px;
-        justify-content: space-between;
     }
 
     &__address {
-        color: $clr-gray-400;
+        order: 1;
-        font-family: $font-family-100;
+        margin: 0 0 16px;
-        font-style: normal;
+    }
-        font-weight: normal;
-        font-size: 10px;
-        line-height: 12px;
-        text-transform: capitalize;
-        max-width: 40%;
 
-        @include mq(md, max) {
+    &__developedBy {
-            margin-bottom: 24px;
+        order: 2;
-            max-width: 100%;
+    }
+}
+
+.footerCheckout {
+    .container {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+        &::before,
+        &::after {
+            content: none;
+        }
+    }
+}
+
+.footerCheckout {
+    @include mq("md", min) {
+        &__stamps {
+            width: 34.510595358%;
+        }
+
+        &__wrapper {
+            .container {
+                width: 94.9734%;
+                margin: 0 auto;
+            }
+        }
+    }
+
+    @include mq("lg", min) {
+        .container {
+            align-items: center;
+            justify-content: space-between;
+            flex-direction: row;
+        }
+
+        &__address {
+            order: 0;
+            margin: 0;
+        }
+
+        &__stamps {
+            width: 33.223684211%;
+            order: 1;
+            margin: 0;
+        }
+
+        &__developedBy {
+            order: 2;
+        }
+    }
+
+    @include mq("xxl", min) {
+        &__address {
+            span {
+                font-size: 200%;
             }
         }
 
         &__stamps {
-        align-items: center;
+            width: 29.074771156%;
-        display: flex;
-        justify-self: center;
-        list-style: none;
-
-        @include mq(md, max) {
-            align-self: center;
-            margin-bottom: 12px;
         }
 
+        &__developedBy {
+            span {
+                font-size: 180%;
+            }
+        }
+    }
+}
+
+.footerCheckout {
+    &__developedBy a,
+    &__developedBy,
+    &__wrapper,
+    &__stamps {
+        display: flex;
+        align-items: center;
+    }
+    &__wrapper {
+        justify-content: space-between;
+
+        @include mq("lg", min) {
+            width: 100%;
+        }
+    }
+}
+
+.footerCheckout {
+    &__creditList {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    &__creditItem,
+    &__verificatedVtex {
+        max-width: 100%;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
+}
+
+.footerCheckout {
+    &__address {
+        font-style: normal;
+        font-weight: normal;
+        font-size: 10px;
+        line-height: 12px;
+        font-family: $font-family-100;
+        text-transform: capitalize;
+        color: $clr-gray-400;
+    }
+}
+
+.footerCheckout {
+    &__stamps {
         &__divider {
             background-color: $clr-gray-300;
             display: inline-block;
@@ -44,11 +152,10 @@
             width: 1px;
         }
     }
+}
 
+.footerCheckout {
     &__developedBy {
-        align-items: center;
-        display: flex;
-        list-style-type: none;
         margin: 0;
 
         li:last-child {
@@ -56,19 +163,22 @@
         }
 
         a {
-            align-items: center;
-            color: $clr-gray-400;
-            display: flex;
-            font-family: $font-family-100;
             font-style: normal;
             font-weight: normal;
             font-size: 10px;
+            font-family: $font-family-100;
             line-height: 12px;
             text-decoration: none;
+            color: $clr-gray-400;
 
             span {
                 margin-right: 8px;
             }
+
+            img {
+                width: 32px;
+                height: auto;
+            }
         }
     }
 }

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

@@ -1,4 +1,9 @@
 /* _header.scss */
+body :where(ul, li, ol) {
+    list-style: none;
+    margin: 0;
+}
+
 @function fluid($width, $design-width) {
     $width: calc($width / $design-width * 100);
 

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

@@ -15,26 +15,7 @@
             </div>
 
             <div id="progressBar  w-DEFINE-FIXED" class="progress-bar">
-                <ul class="progress-list w-100 pos-relative d-flex jus-between">
+                <ul class="progress-list w-100 pos-relative d-flex jus-between"></ul>
-                    <div class="bar pos-absolute">
-                        <div class="bar-fill"></div>
-                    </div>
-
-                    <li class="progress-item">
-                        <p class="progress-title"></p>
-                        <span class="progress-bullet pos-relative"></span>
-                    </li>
-
-                    <li class="progress-item">
-                        <p class="progress-title"></p>
-                        <span class="progress-bullet pos-relative"></span>
-                    </li>
-
-                    <li class="progress-item">
-                        <p class="progress-title"></p>
-                        <span class="progress-bullet pos-relative"></span>
-                    </li>
-                </ul>
             </div>
 
             <div class="headerCheckout__safeBuy w-PERCENT">