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

@@ -15,15 +15,16 @@ export default class Footer {
         await this.selectors();
         this.innerToPayments();
         this.innerDevelopedBy();
-        // this.onUpdate();
+        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.checkoutEmpty = await waitElement(".empty-cart-content");
         this.paymentContainer = await waitElement(".footerCheckout__stamps");
         this.developedByContainer = await waitElement(".footerCheckout__developedBy");
+        this.checkoutContainer = await waitElement(".container-main");
     }
 
     innerToPayments() {
@@ -83,15 +84,32 @@ export default class Footer {
         //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
         // 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 config = { childList: true, attributes: true };
-        let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
-                console.log(mutation.type);
-            });
-        });
 
-        observer.observe(target, config);
+        if (this.checkoutEmpty && this.checkoutContainer) {
+            if (this.checkoutContainer.classList.contains("container-cart-fill")) {
+                this.checkoutContainer.classList.remove("container-cart-fill");
+            } else {
+                this.checkoutContainer.classList.add("container-cart-fill");
+            }
+
+            let target = this.checkoutEmpty;
+            let config = { childList: true, attributes: true };
+            let observer = new MutationObserver((mutations) => {
+                for (let i = 0; i < mutations.length; i++) {
+                    if (mutations[i].attributeName === "style") {
+                        if (this.checkoutContainer.classList.contains("container-cart-fill")) {
+                            this.checkoutContainer.classList.remove("container-cart-fill");
+                        } else {
+                            this.checkoutContainer.classList.add("container-cart-fill");
+                        }
+
+                        break;
+                    }
+                }
+            });
+
+            observer.observe(target, config);
+        }
     }
     async addCarrossel() {
         const elemento = await waitElement("#my-element");

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

@@ -1,34 +1,116 @@
+@mixin btn-secondary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid $clr-common-black;
+    border-radius: 0;
+    font-weight: 400;
+    font-family: $font-family-200;
+    color: $clr-common-black;
+    background-color: $clr-common-white;
+}
+
+.container-cart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    #cart-title {
+        display: none !important;
+    }
+    .cart-template,
+    .checkout-container {
+        min-height: auto;
+    }
+
+    .checkout-container {
+        padding: 0 16px;
+    }
+
+    .cart-template {
+        margin: 0;
+    }
+
+    @media screen and (min-width: 375px) {
+        .checkout-container {
+            width: fluid(300px, 375px);
+            margin: 0 auto;
+        }
+
+        .link-choose-products {
+            width: fluid(250px, 300px);
+            max-width: 250px;
+            margin: 0 auto;
+        }
+    }
+
+    @media screen and (min-width: 1025px) {
+        .checkout-container {
+            width: fluid(400px, 1280px);
+            padding: 0;
+        }
+
+        .link-choose-products {
+            width: fluid(327px, 400px);
+            max-width: none;
+        }
+    }
+}
+
+.empty-cart {
+    &-message {
+        display: none;
+    }
+}
+
 .empty-cart {
     font-family: $font-family-100;
     &-content {
         color: $clr-gray-600;
         text-align: center;
 
-        @include mq(md, max) {
-            padding: 0 16px;
-        }
-    }
+        .empty-cart-title {
+            font-size: 0px;
 
-    &-title {
-        font-size: 20px;
+            &::before {
+                content: "Seu carrinho está vazio.";
+                text-align: center;
+                font-size: 18px;
+                text-transform: uppercase;
+            }
+        }
+
+        @media screen and (min-width: 1024px) {
+            padding: 0;
+        }
+
+        @media screen and (min-width: 1280px) {
+            .empty-cart-title {
+                &::before {
+                    font-size: 24px;
+                }
+            }
+        }
     }
 
     &-links {
         .link-choose-products {
-            background: $clr-gray-600;
-            border: none;
-            border-radius: 5px;
+            @include btn-secondary();
             transition: ease-in 0.22s all;
-            outline: none;
-            font-family: $font-family-100;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 14px;
-            line-height: 16px;
-            text-align: center;
-            letter-spacing: 0.05em;
-            color: $clr-common-white;
-            text-transform: uppercase;
+            font-size: 0px;
+            padding: 16px 0;
+
+            &::before {
+                content: "Continuar Comprando";
+                font-size: 14px;
+                font-style: normal;
+                line-height: 16px;
+                letter-spacing: 0.05em;
+                text-transform: uppercase;
+            }
 
             &:hover {
                 background: lighten($clr-gray-600, 5);

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

@@ -3,8 +3,6 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
-
-
 body {
     display: flex;
     flex-direction: column;
@@ -34,10 +32,6 @@ body {
             padding-left: 0;
         }
     }
-    .container-order-form,
-    .container-cart {
-        width: 80%;
-    }
 }
 
 .btn-success {

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

@@ -1,4 +1,15 @@
 /* _header.scss */
+body {
+    margin: 0;
+    padding: 0;
+}
+
+body * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body :where(ul, li, ol) {
     list-style: none;
     margin: 0;

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

@@ -27,7 +27,7 @@ $grid-breakpoints: (
     xs: 280,
     sm: 375px,
     md: 600px,
-    lg: 1024px,
+    lg: 1025px,
     xl: 1280px,
     xxl: 2500px,
 ) !default;