feat: cria footer desktop sem prateleira

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

@@ -3,6 +3,8 @@ import { waitElement } from "m3-utils";
 export default class Footer {
     constructor() {
         this.init();
+        this.stampsHTML();
+        this.developedByHTML();
     }
 
     async init() {
@@ -30,6 +32,7 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
         const elemento = await waitElement("#my-element");
         $(elemento).slick({
@@ -37,4 +40,72 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+
+    async stampsHTML() {
+        const stamps = await waitElement('.footerCheckout__stamps');
+
+        // console.log(stamps.children[0], stamps.children[2]);
+
+        const paymentsStructure = `
+            <ul class="footerCheckout__payments">
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="" />
+                </li>
+
+                <li class="footerCheckout__payments--card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" />
+                </li>
+            </ul>
+        `
+
+        const certifiedStructure = `
+            <img class="footerCheckout__vtexpci footerCheckout__payments--certified" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" />
+        `
+
+        stamps.children[0].innerHTML = paymentsStructure;
+        stamps.children[2].innerHTML = certifiedStructure;
+    }
+
+    async developedByHTML() {
+        const developedBy = await waitElement('.footerCheckout__developedBy');
+
+        console.log(developedBy.children[0].children[0]);
+
+        const vtexIcon = `
+            <span>Powered By</span>
+            <img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="" />
+        `
+
+        const m3Icon = `
+            <span>Powered By</span>
+            <img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="" />
+        `
+
+        developedBy.children[0].children[0].innerHTML = vtexIcon;
+        developedBy.children[1].children[0].innerHTML = m3Icon;
+
+        developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link')
+        developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link')
+
+    }
 }

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

@@ -3,14 +3,18 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
+* {
+    box-sizing: border-box;
+}
+
 html {
     height: 100%;
     min-height: 100%;
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    width: 100%;
-    margin: auto auto 0 auto;
+    // margin: auto auto 0 auto;
 }
 footer .footerCheckout__prateleira,
 header {

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

@@ -1,23 +1,70 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    width: 100%;
-    color: $color-gray2;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    // background: cyan;
+
+//     border-top: none;
+//     color: $color-gray2;
+
+    // &__prateleira {
+    //     height: 100px;
+    //     background-color: green;
+    //     width: 100%;
+    // }
 
     &__wrapper {
-        align-items: center;
+        margin: 0;
-        display: flex;
+        width: 100%;
-        justify-content: space-between;
+        padding: 16px 32px;
+        border-top: 1px solid $black-500;
+        // background-color: magenta;
+
+//     //     // align-items: center;
+//     //     // display: flex;
+//     //     // justify-content: space-between;
     }
 
+
+    .container {
+        margin: 0;
+        // padding: 0;
+        width: 100%;
+        // height: 100%;
+        // display: flex;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        align-items: center;
+
+        // text-align: center;
+        //     //     // grid-auto-flow: column;
+//     //     // grid-auto-columns: max-content;
+//     //     justify-content: space-between;
+//     //     margin: 0;
+        // background-color: yellowgreen;
+
+        &::before,
+        &::after {
+            display: none;
+        }
+    }
+
+
     &__address {
-        color: $color-gray2;
+        color: $black-300;
         font-family: $font-family;
-        font-style: normal;
+        // font-style: normal;
-        font-weight: normal;
+        // font-weight: normal;
         font-size: 10px;
-        line-height: 12px;
+        line-height: 14px;
         text-transform: capitalize;
-        max-width: 40%;
+        // max-width: 40%;
+        justify-self: flex-start;
+
+
 
         @include mq(md, max) {
             margin-bottom: 24px;
@@ -26,49 +73,76 @@
     }
 
     &__stamps {
-        align-items: center;
         display: flex;
+        align-items: center;
         justify-self: center;
         list-style: none;
 
+        margin: 0;
+
         @include mq(md, max) {
             align-self: center;
             margin-bottom: 12px;
         }
 
         &__divider {
-            background-color: $color-gray4;
+            background-color: $color-gray-rename;
-            display: inline-block;
+            display: block;
             height: 24px;
-            margin: 0 8px;
+            margin: 0 10px 0 13px;
             width: 1px;
         }
     }
 
+    &__payments {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: max-content;
+        gap: 13px;
+        list-style: none;
+        margin: 0;
+
+            img {
+                display: block;
+                height: 20px;
+                width: auto;
+            }
+    }
+
+    &__vtexpci {
+        display: block;
+        width: 53px;
+        height: 33px;
+    }
+
     &__developedBy {
         align-items: center;
         display: flex;
-        list-style-type: none;
+        gap: 10px;
+        list-style: none;
         margin: 0;
-
+        justify-self: flex-end;
-        li:last-child {
-            margin-left: 16px;
-        }
 
         a {
             align-items: center;
-            color: $color-gray2;
+            color: $black-300;
             display: flex;
             font-family: $font-family;
-            font-style: normal;
+            // font-style: normal;
-            font-weight: normal;
+            // font-weight: normal;
-            font-size: 10px;
+            font-size: 9px;
             line-height: 12px;
             text-decoration: none;
 
             span {
-                margin-right: 8px;
+                margin-right: 10px;
-            }
+            }
+        }
+
+        &__icons {
+            display: block;
+            height: 16px;
+            width: auto;
         }
     }
 }

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

@@ -3,6 +3,7 @@
     // position: relative;
     margin: 0;
     padding: 30px 131px;
+    width: 100%;
     border-bottom: 1px solid $black-500;
 
     .container {

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

@@ -16,6 +16,8 @@ $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 
+$color-gray-rename: #c4c4c4;
+
 $color-blue: #4267b2;
 
 $color-green: #4caf50;