From 6f011f67272c9c12b4683ecbca2d7973eec94513 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Sun, 11 Dec 2022 07:36:37 -0300
Subject: [PATCH] feat(Footer): add .footerCheckout__address e
 .footerCheckout__developedBy

---
 checkout/src/arquivos/js/components/Footer.js |  44 +++--
 .../src/arquivos/sass/partials/_footer.scss   | 152 +++++++++---------
 2 files changed, 111 insertions(+), 85 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 5d05f7c..8dc871f 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -15,7 +15,7 @@ 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.footerCheckoutstamps = await waitElement(".footerCheckout__stamps");
+        this.footerCheckoutstamps = await waitElement(".footerCheckout__wrapper");
     }
 
     onUpdate() {
@@ -42,37 +42,57 @@ export default class Footer {
 
     footerCheckout() {
         this.footerCheckoutstamps.innerHTML = `
-        <li>
+        <div class="container">
+        <div class="footerCheckout__address">
+            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+        </div>
+        <div>
             <ul class="footerCheckout__payments">
                 <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card"/>
                 </li>
                 <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa"/>
                 </li>
                 <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express"/>
                 </li>
                 <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="ícone do cartão elo">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="ícone do cartão elo"/>
                 </li>
                 <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="ícone do cartão hipercard">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="ícone do cartão hipercard"/>
                 </li>
                 <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="ícone do paypal">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="ícone do paypal"/>
                 </li>
                 <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="ícone de boleto">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="ícone de boleto"/>
                 </li>
             </ul>
             <span class="footerCheckout__stamps__divider"></span>
             <ul class="footerCheckout__payments">
-                <li class= "vtexPCIM">
-                     <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto">
+                <li class="vtexPCIM">
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto"/>
                 </li>
             </ul>
-        </li>
+        </div>
+        <ul class="footerCheckout__developedBy">
+            <li>
+                <a href="https://vtex.com/br-pt/">
+                    <span>Powered By</span>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="ícone de boleto"/>
+                </a>
+            </li>
+
+            <li>
+                <a href="https://agenciam3.com/">
+                    <span>Developed By</span>
+                    <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="ícone de boleto"/>
+                </a>
+            </li>
+        </ul>
+    </div>
 
         `;
     }
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index b4aa12c..2faf78c 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -3,7 +3,7 @@
     border-top: 1px solid #000000;
     color: $color-gray2;
     bottom: 0;
-	position: absolute;
+    position: absolute;
     width: 100%;
     &__wrapper {
         & .container {
@@ -12,88 +12,94 @@
             align-items: center;
             padding: 16px 0;
             width: 100%;
-            &::before, &::after {
+            &::before,
+            &::after {
                 content: none;
             }
-        }
-    }
+            & .footerCheckout__address {
+                color: $color-gray2;
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 10px;
+                line-height: 14px;
+                text-transform: capitalize;
+                color: #292929;
+                max-width: 40%;
 
-    &__address {
-        color: $color-gray2;
-        font-family: $font-family;
-        font-style: normal;
-        font-weight: 400;
-        font-size: 10px;
-        line-height: 14px;
-        text-transform: capitalize;
-        color: #292929;
-        max-width: 40%;
-
-        @include mq(md, max) {
-            margin-bottom: 24px;
-            max-width: 100%;
-        }
-    }
-
-    &__stamps {
-        align-items: center;
-        display: flex;
-        justify-self: center;
-        list-style: none;
-        margin: 0;
-        @include mq(md, max) {
-            align-self: center;
-            // margin-bottom: 12px;
-        }
-
-        & li {
-            display: flex;
-            & .footerCheckout__payments {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-left: 0;
-                & li {
-                    height: 20px;
-                }
-                & .vtexPCIM {
-                    height: 33px;
+                @include mq(md, max) {
+                    margin-bottom: 24px;
+                    max-width: 100%;
                 }
             }
-        }
 
-        &__divider {
-            background-color: $color-gray4;
-            display: inline-block;
-            height: 24px;
-            margin: 0 8px;
-            width: 1px;
-        }
-    }
+            & div {
+                align-items: center;
+                display: flex;
+                justify-self: center;
+                & ul {
+                    align-items: center;
+                    display: flex;
+                    justify-self: center;
+                    list-style: none;
+                    margin: 0;
+                    @include mq(md, max) {
+                        align-self: center;
+                        // margin-bottom: 12px;
+                    }
 
-    &__developedBy {
-        align-items: center;
-        display: flex;
-        list-style-type: none;
-        margin: 0;
+                    & li {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        margin-left: 0;
+                        & img {
+                            height: 20px;
+                            margin: 0 6.675px;
+                        }
+                    }
+                    & .vtexPCIM {
+                        & img {
+                            height: 33px;
+                        }
+                    }
+                }
+                & .footerCheckout__stamps__divider {
+                    background-color: $color-gray4;
+                    display: inline-block;
+                    height: 24px;
+                    margin: 0 8px;
+                    width: 1px;
+                }
+            }
+            & .footerCheckout__developedBy {
+                align-items: center;
+                display: flex;
+                list-style-type: none;
+                margin: 0;
 
-        li:last-child {
-            margin-left: 16px;
-        }
+                li:last-child {
+                    margin-left: 16px;
+                }
 
-        a {
-            align-items: center;
-            color: $color-gray2;
-            display: flex;
-            font-family: $font-family;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 9px;
-            line-height: 12px;
-            text-decoration: none;
+                a {
+                    align-items: center;
+                    color: $color-gray2;
+                    display: flex;
+                    font-family: $font-family;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 9px;
+                    line-height: 12px;
+                    text-decoration: none;
 
-            span {
-                margin-right: 8px;
+                    span {
+                        margin-right: 8px;
+                    }
+                    & img {
+                        height: 16px;
+                    }
+                }
             }
         }
     }