feat: construcao e estilizacao do footer

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

@@ -7,13 +7,21 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        this.getProducts(this.createShelf)
+        this.hideElementscart()
+        this.changeTextBtnChooseProducts()
+        this.setImagesFooter()
+        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.checkoutVazio = await waitElement(".empty-cart-content");
+        this.titleCart = await waitElement("#cart-title");
+        this.btnChooseProducts = await waitElement("#cart-choose-products");
+        this.footerStamps = await waitElement(".footerCheckout__stamps");
+        this.footerDevelopment = await waitElement(".footerCheckout__developedBy");
     }
 
     onUpdate() {
@@ -21,15 +29,22 @@ export default class Footer {
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
         let target = this.checkoutVazio;
+        let title = this.titleCart
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                if(mutation.target.style.display == "block") {
+                    title.style.display = "none";
+                } else {
+                    title.style.display = "block";
+                }
+                //console.log(mutation.target.style.display);
             });
         });
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
         const elemento = await waitElement("#my-element");
         $(elemento).slick({
@@ -37,4 +52,91 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+
+    hideElementscart() {
+        let containerCartEmpty = this.checkoutVazio;
+        const initialDisplayTitle = containerCartEmpty.style.display == "block" ? "none" : "block"
+
+        this.titleCart.style.display = initialDisplayTitle
+    }
+
+    changeTextBtnChooseProducts() {
+        this.btnChooseProducts.textContent = "Continuar comprando"
+    }
+
+    setImagesFooter() {
+        this.footerStamps.innerHTML= `
+        <li>
+            <span class= "footerCheckout__payments">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"/>
+            </span>
+        </li>
+        <li>
+            <span class= "footerCheckout__payments">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"/>
+            </span>
+        </li>
+        <li>
+            <span class= "footerCheckout__payments">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"/>
+            </span>
+        </li>
+        <li>
+            <span class= "footerCheckout__payments">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"/>
+            </span>
+        </li>
+        <li>
+            <span class= "footerCheckout__payments">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"/>
+            </span>
+        </li>
+        <li>
+            <span class= "footerCheckout__payments">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"/>
+            </span>
+        </li>
+        <li>
+            <span class= "footerCheckout__payments">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"/>
+            </span>
+        </li>
+        <li>
+            <span class= "footerCheckout__stamps__divider"></span>
+        </li>
+        <li>
+            <span class= "footerCheckout__payments">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"/>
+            </span>
+        </li>
+        `
+
+        this.footerDevelopment.innerHTML= `
+        <li>
+            <a href="https://vtex.com/br-pt/">
+                <span>Powered By</span>
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
+            </a>
+        </li>
+        <li>
+            <a href="https://agenciam3.com/">
+                <span>Developed By</span>
+                <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
+            </a>
+        </li>
+        `
+    }
+
+    async getProducts(callback) {
+       await fetch(` https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`)
+        .then((response) => response.json())
+        .then((data) => {
+            callback(data)
+        })
+    }
+
+    createShelf(data) {
+        const products = data
+        console.log(products)
+    }
 }

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

@@ -13,7 +13,7 @@
         display: none;
     }
     .cart {
-        border: 3px solid $color-gray3;
+        border: 1px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
@@ -106,6 +106,9 @@
     }
 
     .cart-items {
+        tbody td {
+            vertical-align: baseline;
+        }
         .product-item {
             padding: 16px 0;
         }
@@ -114,7 +117,8 @@
             color: $color-black;
             padding: 0 0 16px;
             font-style: normal;
-            font-weight: bold;
+            font-weight: 400;
+            font-family: $font-family-secundary;
             font-size: 14px;
             line-height: 16px;
 
@@ -155,12 +159,13 @@
             }
 
             a {
-                color: $color-blue;
+                color: $color-black;
                 font-style: normal;
-                font-weight: normal;
+                font-weight: 400;
                 font-size: 12px;
                 line-height: 14px;
                 transition: ease-in 0.22s all;
+                text-decoration: none;
 
                 &:hover {
                     color: darken($color-blue, 10);
@@ -190,6 +195,7 @@
 
         .product-price {
             min-width: 100px;
+            vertical-align: top;
             @include mq(md, max) {
                 min-width: 78px;
             }
@@ -218,14 +224,14 @@
         td.quantity {
             align-items: center;
             border: 1px solid $color-gray3;
-            border-radius: 0;
+            border-radius: 0.5rem;
             box-sizing: border-box;
             display: flex;
             justify-content: center;
             margin: 6px auto 0;
             max-height: 38px;
             max-width: 118px;
-            padding: 0;
+            padding: 1rem 1rem;
             width: max-content !important;
 
             @media (max-width: 490px) {
@@ -234,47 +240,64 @@
 
             input {
                 background-color: $color-white;
-                border: 1px solid $color-gray3;
                 border-radius: 0;
-                border-width: 0 1px;
+                border: none !important;
                 display: block;
                 max-height: 38px;
-                margin: 0 !important;
+                margin: 0.9rem !important;
                 padding: 8px 0;
-                width: 38px;
+                width: 24px;
                 color: $color-gray2;
                 box-shadow: none;
 
-                @include mq(lg, max) {
+                /* @include mq(lg, max) {
                     width: 24px !important;
-                }
+                } */
             }
 
             .icon-plus-sign,
             .icon-minus-sign {
                 &::before {
-                    color: $color-black;
+                    color: $color-white;
                     display: block;
                     font-weight: 500;
-                    padding: 1px 12px;
+                    text-align: center;
                 }
             }
 
             .icon-minus-sign {
                 &:before {
                     content: "-";
-                    font-size: 16px;
+                    width: 16px;
+                    height: 16px;
+                    background: $color-blue2;
+                    padding: 4px 4px 5px 4px;
+                    border-radius: 50%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
                 }
             }
 
             .icon-plus-sign {
                 &:before {
                     content: "+";
-                    font-size: 14px;
+                    width: 16px;
+                    height: 16px;
+                    background: $color-blue2;
+                    padding: 4px;
+                    border-radius: 50%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
                 }
             }
 
             .item-quantity-change {
+                border-radius: 50%;
+                background-color: $color-blue2;
+                align-items: center;
+
                 @media (max-width: 979px) and (min-width: 768px) {
                     position: inherit;
                     bottom: inherit;
@@ -596,19 +619,22 @@
 
             .coupon-data {
                 #cart-link-coupon-add {
+                    font-family: $font-family-secundary;
+                    font-weight: 400;
+                    color: $color-black;
                     text-decoration: none;
                     &:hover {
-                        text-decoration: underline;
+                        text-decoration: none;
                         cursor: pointer;
                     }
                 }
                 span {
-                    font-family: $font-family;
+                    font-family: $font-family-secundary;
+                    font-weight: 400;
+                    color: $color-black;
                     font-style: normal;
-                    font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: $color-blue;
                     text-decoration: none;
                 }
             }
@@ -733,8 +759,9 @@
                 tfoot {
                     td.info,
                     td.monetary {
+                        font-family: $font-family;
                         font-style: normal;
-                        font-weight: normal;
+                        font-weight: bold;
                         font-size: 18px;
                         line-height: 21px;
                         color: $color-black;
@@ -771,18 +798,19 @@
             }
 
             a {
-                font-family: $font-family;
+                font-family: $font-family-secundary;
                 font-style: normal;
-                font-weight: normal;
+                font-weight: 400;
                 font-size: 12px;
                 line-height: 14px;
-                color: $color-blue;
+                color: $color-black;
+                text-decoration: none;
             }
         }
 
         .btn-place-order-wrapper {
             a {
-                background: $color-green;
+                background: $color-blue2;
                 border: none;
                 border-radius: 5px;
                 display: block;
@@ -791,16 +819,16 @@
                 padding: 12px 19px;
 
                 &:hover {
-                    background-color: darken($color-green, 5);
+                    opacity: 0.8;
                 }
 
                 &:after {
                     content: "finalizar compra";
                     font-family: $font-family;
-                    font-weight: 500;
+                    font-weight: 700;
                     font-size: 13px;
                     letter-spacing: 0.05em;
-                    color: $color-white;
+                    color: $color-black;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;

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

@@ -11,27 +11,35 @@
 
 	&-title {
 		font-size: 20px;
+        font-family: $font-family;
+        font-weight: 700;
+        text-transform: uppercase;
+        line-height: 2.043rem;
 	}
 
+    &-message {
+      display: none;
+  }
+
 	&-links {
 		.link-choose-products {
-			background: $color-black;
+			background: $color-white;
-			border: none;
+			border: 1px solid $color-black;
-			border-radius: 5px;
+			border-radius: 0px;
 			transition: ease-in 0.22s all;
 			outline: none;
-			font-family: $font-family;
+			font-family: $font-family-secundary;
 			font-style: normal;
-			font-weight: 500;
+			font-weight: 400;
 			font-size: 14px;
 			line-height: 16px;
 			text-align: center;
 			letter-spacing: 0.05em;
-			color: $color-white;
+			color: $color-black;
 			text-transform: uppercase;
 
 			&:hover {
-				background: lighten($color-black, 5);
+				background: lighten($color-gray5, 5);
 			}
 		}
 	}

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

@@ -49,6 +49,10 @@ body {
     }
     .container-order-form,
     .container-cart {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
         width: 80%;
     }
 }
@@ -68,10 +72,11 @@ body {
 
 #cart-title,
 #orderform-title {
-    color: $color-gray2;
+    width: 100%;
+    color: $color-black;
     font-family: $font-family;
-    font-weight: 500;
+    font-weight: 700;
-    font-size: 36px;
+    font-size: 1.5rem;
     line-height: 42px;
     margin: 40px 0 30px;
     letter-spacing: 0.1em;

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

@@ -1,12 +1,20 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    border-top: 1px solid $color-black;
     color: $color-gray2;
+    padding: 1rem 0;
 
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
+
+        .container {
+            width: 100%;
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
+        }
     }
 
     &__address {
@@ -25,6 +33,12 @@
         }
     }
 
+    &__payments {
+        img {
+            width: 32.78px;
+        }
+    }
+
     &__stamps {
         align-items: center;
         display: flex;
@@ -69,6 +83,10 @@
             span {
                 margin-right: 8px;
             }
+
+            img {
+                width: 40px;
+            }
         }
     }
 }

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

@@ -16,6 +16,8 @@ $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 
 $color-blue: #4267b2;
+$color-blue2: #00C8FF;
+
 
 $color-green: #4caf50;