bash.exe.stackdump

@@ -2,7 +2,7 @@ Stack trace:
 Frame        Function    Args
 000FFFFCD30  00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
 000FFFFCD30  0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
-000FFFFCD30  002100484A2 (000006E0000, 000006FF401, 00000000001, 87FE80A61CA3)
+000FFFFCD30  002100484A2 (00000690000, 00000690101, 00000000001, 726D3BFB8C2D)
 000FFFFCD30  0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
 000FFFFCD30  0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
 000FFFFCD30  002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)

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

@@ -15,6 +15,7 @@ export default class Footer {
     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.title = await waitElement("#cart-title");
         this.checkoutVazio = await waitElement(".empty-cart-content");
         //CARRINHO VAZIO
         this.fraseCarrinhoVazio = await waitElement(".empty-cart-title");
@@ -25,12 +26,18 @@ export default class Footer {
         this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
         //pagamento
         this.notification = await waitElement(".notification");
+        //footer
+        this.creditcards = await waitElement(".footerCheckout__payments");
+        this.vtex = await waitElement(".footerCheckout__vtexpci");
+        this.developed = await waitElement(".footerCheckout__developedBy");
     }
 
     async prateleira() {
         if (this.checkoutVazio.style.display == "none") {
+            this.title.innerHTML = `MEU CARRINHO`;
             this.requestApi();
             this.addCarrossel();
+
             window.addEventListener("hashchange", () => {
                 if (window.location.hash !== "#/cart") {
                     this.removePrateleira();
@@ -105,6 +112,7 @@ export default class Footer {
                 if (display == "display: none;") {
                     this.prateleira();
                 } else if (display == "display: block;") {
+                    this.title.innerHTML = ``;
                     this.removePrateleira();
                 }
             });
@@ -114,9 +122,47 @@ export default class Footer {
     }
 
     carrinho() {
+        this.title.innerHTML = ``;
         this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
         this.continuarCompra.innerHTML = `continuar comprando`;
         this.frete.innerHTML = `Frete`;
         this.unidade.innerHTML = `Unidade`;
+        //footer
+        this.creditcards.innerHTML = `<figure>
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard" />
+        </figure>
+        <figure>
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard" />
+        </figure>
+        <figure>
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="America Express" />
+        </figure>
+        <figure>
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo" />
+        </figure>
+        <figure>
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard" />
+        </figure>
+        <figure>
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Paypal" />
+        </figure>
+        <figure>
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto" />
+        </figure>`;
+        this.vtex.innerHTML = `<figure>
+        <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="VTEX" />
+        </figure>`;
+        this.developed.innerHTML = `<li>
+        <a href="https://vtex.com/br-pt/">
+            <span>Powered By</span>
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" /></figure>
+        </a>
+        </li>
+        <li>
+        <a href="https://agenciam3.com/">
+            <span>Developed By</span>
+            <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" /></figure>
+        </a>
+        </li>`;
     }
 }

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

@@ -21,6 +21,35 @@
 }
 
 .cart-template {
+    //CARRINHO VAZIO
+    .empty-cart-content {
+        margin-top: 100px;
+
+        .empty-cart-title {
+            font-weight: 700;
+            font-size: 24px;
+            line-height: 33px;
+            text-align: center;
+            text-transform: uppercase;
+            margin: 0 0 32px;
+        }
+
+        .empty-cart-message {
+            display: none;
+        }
+
+        #cart-choose-products {
+            color: $color-black-500;
+            border: 1px solid $color-black-500;
+            background: $color-white;
+            font-family: $font-family-secundary;
+            font-weight: 400;
+            letter-spacing: normal;
+            border-radius: 0%;
+            padding: 15px 64px 17px 65px;
+            margin: 0;
+        }
+    }
     .empty-cart-title {
         font-weight: 700;
         font-size: 24px;

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

@@ -1,5 +1,6 @@
 .empty-cart {
     font-family: $font-family;
+
     &-content {
         color: $color-black;
         text-align: center;

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

@@ -4,18 +4,29 @@
     color: $color-gray2;
 
     &__wrapper {
+        border-top: 1px solid $color-black-500;
+        width: 100% !important;
         align-items: center;
         display: flex;
         justify-content: space-between;
+
+        .container {
+            /*width: 91.40625%;*/
+            width: 100%;
+            margin: 16px 32px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
     }
 
     &__address {
-        color: $color-gray2;
         font-family: $font-family;
         font-style: normal;
-        font-weight: normal;
+        font-weight: 400;
         font-size: 10px;
-        line-height: 12px;
+        line-height: 14px;
+        color: $color-black;
         text-transform: capitalize;
         max-width: 40%;
 
@@ -30,6 +41,42 @@
         display: flex;
         justify-self: center;
         list-style: none;
+        margin: 0;
+
+        li {
+            display: flex;
+
+            .footerCheckout__payments {
+                display: flex;
+                column-gap: 13px;
+
+                figure {
+                    margin: 0;
+                    width: 35px;
+                    height: 20px;
+
+                    img {
+                        width: 100%;
+                        vertical-align: unset;
+                    }
+                }
+            }
+
+            .footerCheckout__vtexpci {
+                display: flex;
+
+                figure {
+                    margin: 0;
+                    width: 53px;
+                    height: 33px;
+
+                    img {
+                        width: 100%;
+                        vertical-align: unset;
+                    }
+                }
+            }
+        }
 
         @include mq(md, max) {
             align-self: center;
@@ -37,10 +84,10 @@
         }
 
         &__divider {
-            background-color: $color-gray4;
+            background-color: $color-gray7;
             display: inline-block;
             height: 24px;
-            margin: 0 8px;
+            margin: 0 10px 0 13px;
             width: 1px;
         }
     }
@@ -52,7 +99,11 @@
         margin: 0;
 
         li:last-child {
-            margin-left: 16px;
+            margin-left: 10.73px;
+            figure {
+                width: 28.66px;
+                height: 15.65px;
+            }
         }
 
         a {
@@ -67,7 +118,18 @@
             text-decoration: none;
 
             span {
-                margin-right: 8px;
+                margin-right: 10px;
+            }
+
+            figure {
+                margin: 0;
+                width: 44.92px;
+                height: 16px;
+
+                img {
+                    width: 100%;
+                    vertical-align: unset;
+                }
             }
         }
     }

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

@@ -32,6 +32,11 @@
 
     &__safeBuy {
         display: flex;
+        width: 15.2829%;
+
+        @include mq(tablet, max) {
+            width: auto;
+        }
 
         img {
             width: 12px;