Merge pull request 'feat(checkout): Cria footer mobile e desktop' (#3) from feature/footer into develop

Reviewed-on: #3

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

@@ -7,12 +7,15 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+        this.footerIcons();
         // this.onUpdate();
     }
 
     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.CredicardIcon = await waitElement(".footerCheckout__payments");
+        this.vtexPciIcon = await waitElement(".footerCheckout__vtexpci");
         this.checkoutVazio = await waitElement(".empty-cart-content");
     }
 
@@ -30,6 +33,7 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
         const elemento = await waitElement("#my-element");
         $(elemento).slick({
@@ -37,4 +41,42 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+
+    footerIcons() {
+        if (this.CredicardIcon) {
+            this.CredicardIcon.innerHTML = `
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard" title="MasterCard"/></figure>
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Visa" title="Visa"/></figure>
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express" title="American Express"/></figure>
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo" title="Elo"/></figure>
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard" title="HiperCard"/></figure>
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Paypal" title="Paypal"/></figure>
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto" title="Boletoa"/></figure>
+            `;
+        }
+
+        if (this.vtexPciIcon) {
+            this.vtexPciIcon.innerHTML = `
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="VTEX PCI Certified" title="VTEX PCI Certified"/></figure>
+            `;
+        }
+
+        const footerDevelopedBy = document.getElementsByClassName("footerCheckout__developedBy");
+
+        if (footerDevelopedBy) {
+            const vtexIcon = footerDevelopedBy[0].children[0].children[0];
+            const m3Icon = footerDevelopedBy[0].children[1].children[0];
+
+            vtexIcon.innerHTML = `
+            <span>Powered By</span>
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" title="VTEX" /></figure>
+            `;
+
+            m3Icon.innerHTML = `
+                <span>Developed By</span>
+                <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" title="M3" /></figure>
+            `;
+            console.log(m3Icon);
+        }
+    }
 }

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

@@ -9,7 +9,7 @@ html {
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    width: 100%;
     margin: auto auto 0 auto;
 }
 footer .footerCheckout__prateleira,

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

@@ -3,13 +3,82 @@
     border-top: none;
     color: $color-gray2;
 
+    .container {
+        width: 94.9734%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 27px 0 24px;
+        margin: 0;
+
+        @include mq(pg, max) {
+            align-items: flex-start;
+            flex-direction: column;
+            padding: 16px 8px !important;
+        }
+
+        @include mq(csun, max) {
+            padding: 16px 0 8px 8px !important;
+        }
+    }
+
     &__wrapper {
         align-items: center;
         display: flex;
+        flex-direction: column;
         justify-content: space-between;
+        border-top: 1px solid $color-black2;
+
+        @include mq(pg, max) {
+            align-items: flex-start;
+        }
+    }
+
+    &__payments {
+        display: flex;
+
+        img {
+            height: 20px;
+            margin: 0;
+            margin-right: 13.35px;
+            max-width: fit-content;
+
+            @include mq(sm, max) {
+                margin-right: 5.22px;
+            }
+
+            @include mq(csun, max) {
+                margin-right: 0;
+            }
+
+            @include mq(xxl, min) {
+                height: 39.06px;
+            }
+        }
+
+        figure {
+            margin: 0;
+        }
+    }
+
+    &__vtexpci {
+        img {
+            height: 33px;
+            margin: 0;
+            max-width: fit-content;
+        }
+
+        ul {
+            padding: 189px;
+        }
+
+        figure {
+            margin: 0;
+        }
     }
 
     &__address {
+        width: 33.33%;
         color: $color-gray2;
         font-family: $font-family;
         font-style: normal;
@@ -19,37 +88,76 @@
         text-transform: capitalize;
         max-width: 40%;
 
-        @include mq(md, max) {
+        @include mq(pg, max) {
-            margin-bottom: 24px;
+            order: 2;
-            max-width: 100%;
+            margin: 8px 0 8px;
+            line-height: 14px;
+            white-space: nowrap;
+            color: $color-black;
+        }
+
+        // @include mq(md, max) {
+        //     margin-bottom: 24px;
+        //     max-width: 100%;
+        // }
+
+        @include mq(xxl, min) {
+            font-size: 20px;
+            line-height: 27px;
+            text-transform: capitalize;
+            color: $color-black;
         }
     }
 
     &__stamps {
+        width: 33.33%;
         align-items: center;
         display: flex;
-        justify-self: center;
+        justify-content: center;
         list-style: none;
+        margin: 0;
 
-        @include mq(md, max) {
+        @include mq(csyn, max) {
-            align-self: center;
+            flex-wrap: wrap;
-            margin-bottom: 12px;
         }
 
+        @include mq(pg, max) {
+            order: 1;
+            margin-bottom: 8px;
+            justify-content: flex-start;
+        }
+
+        // @include mq(md, max) {
+        //     align-self: center;
+        //     margin-bottom: 12px;
+        // }
+
         &__divider {
             background-color: $color-gray4;
             display: inline-block;
             height: 24px;
             margin: 0 8px;
             width: 1px;
+
+            @include mq(cstm, max) {
+                margin: 0 10px 0 0;
+            }
         }
     }
 
     &__developedBy {
+        width: 33.33%;
         align-items: center;
         display: flex;
         list-style-type: none;
         margin: 0;
+        justify-content: flex-end;
+
+        @include mq(pg, max) {
+            order: 3;
+            justify-content: flex-start;
+            margin-top: 8px;
+        }
 
         li:last-child {
             margin-left: 16px;
@@ -57,17 +165,45 @@
 
         a {
             align-items: center;
-            color: $color-gray2;
             display: flex;
+
+            span {
+                color: $color-gray2;
                 font-family: $font-family;
                 font-style: normal;
                 font-weight: normal;
                 font-size: 10px;
                 line-height: 12px;
-            text-decoration: none;
+                margin-right: 10.12px;
 
-            span {
+                @include mq(pg, max) {
-                margin-right: 8px;
+                    font-size: 9px;
+                    line-height: 12px;
+                    white-space: nowrap;
+                    color: $color-black;
+                }
+
+                @include mq(xxl, min) {
+                    font-size: 18px;
+                    line-height: 25px;
+                    color: $color-black;
+                }
+            }
+
+            figure {
+                margin: 0;
+
+                @include mq(pg, max) {
+                    width: max-content;
+                }
+            }
+
+            img {
+                height: 16px;
+
+                @include mq(xxl, min) {
+                    height: 31.25px;
+                }
             }
         }
     }

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

@@ -1,14 +1,17 @@
 /* _header.scss */
 .headerCheckout {
-    .container {
+    width: 100%;
-        width: auto !important;
+    border-bottom: 1px solid #000;
-    }
+
+    // .container {
+    //     width: auto !important;
+    // }
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
-        padding: 29px 131px;
+        padding: 29px 0;
-        border-bottom: 1px solid $color-black2;
+        // border-bottom: 1px solid $color-black2;
 
         @include mq(pg, max) {
             padding: 16px;
@@ -115,7 +118,7 @@
 
     &__logo {
         img {
-            height: 52px;
+            height: 37.14px;
             width: auto;
             cursor: pointer;
 

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

@@ -23,6 +23,8 @@ $color-green: #4caf50;
 /* Grid breakpoints */
 $grid-breakpoints: (
     xs: 0,
+    csun: 285,
+    csyn: 355,
     cstm: 400,
     sm: 576px,
     md: 768px,