feat : criando o js do footer

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

@@ -7,13 +7,19 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        this.onUpdate();
+        this.addPaymentsIcons();
+        this.addPciIcons();
+        this.onUpdateShelf();
     }
 
     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.paymentIconsContainer = await waitElement(".footerCheckout__payments");
+        this.iconPci = await waitElement(".footerCheckout__vtexpci");
+        this.shelfContainer = $(".footerCheckout__prateleira");
     }
 
     onUpdate() {
@@ -21,22 +27,130 @@ 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 config = { childList: true, attributes: true };
+        let config = { attributes: true };
         let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
+            mutations.forEach((mutation) => {
-                console.log(mutation.type);
+                if (target.style.display === "block") {
+                    this.shelfContainer.empty();
+                    $(".slick-slider").removeClass("slick-slider slick-initialized");
+                } else {
+                    this.createShelf();
+                }
             });
         });
 
         observer.observe(target, config);
     }
-    async addCarrossel() {
+
-        const elemento = await waitElement("#my-element");
+    async onUpdateShelf() {
-        if ($(elemento)) {
+        //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
-            $(elemento).slick({
+        // 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 = await waitElement(".footerCheckout__prateleira");
+        let config = { childList: true };
+        let observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.addedNodes.length > 0) {
+                    if ($(".slick-slide").length <= 0) {
+                        this.addCarrossel(this.shelfContainer);
+                    }
+                }
+            });
+        });
+
+        observer.observe(target, config);
+
+        $(window).on("hashchange", () => {
+            const hash = window.location.hash.replace("#/", "");
+
+            if (hash !== "cart") {
+                this.shelfContainer.empty();
+                $(".slick-slider").removeClass("slick-slider slick-initialized");
+            } else {
+                this.createShelf();
+            }
+        });
+    }
+
+    async addCarrossel(element) {
+        if (element) {
+            element.slick({
+                lazyLoad: "ondemand",
+                dots: false,
+                arrows: true,
+                infinite: true,
                 slidesToShow: 4,
                 slidesToScroll: 1,
+                speed: 500,
+                responsive: [
+                    {
+                        breakpoint: 1024,
+                        settings: {
+                            lazyLoad: "ondemand",
+                            slidesToShow: 3,
+                            slidesToScroll: 1,
+                        },
+                    },
+                    {
+                        breakpoint: 375,
+                        settings: {
+                            slidesToShow: 2,
+                            slidesToScroll: 1,
+                        },
+                    },
+                ],
             });
         }
     }
+
+    addPaymentsIcons() {
+        const html = `
+        <img src="/arquivos/masterCardM3Academy.png" alt=""/>
+        <img src="/arquivos/visaM3Academy.png" alt=""/>
+        <img src="/arquivos/amexM3Academy.png" alt=""/>
+        <img src="/arquivos/eloM3Academy.png" alt=""/>
+        <img src="/arquivos/hiperCardM3Academy.png" alt=""/>
+        <img src="/arquivos/boletoM3Academy.png" alt=""/>
+        <img src="/arquivos/payPalM3Academy.png" alt=""/>
+        `;
+
+        if (this.paymentIconsContainer) {
+            this.paymentIconsContainer.innerHTML = html;
+        }
+    }
+
+    addPciIcons() {
+        const html = `
+        <img src="/arquivos/vtexPCIM3Academy.png" alt=""/>
+        `;
+
+        if (this.iconPci) {
+            this.iconPci.innerHTML = html;
+        }
+    }
+
+    async createShelf() {
+        const data = await fetch(
+            "/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+        );
+        const products = await data.json();
+        const hash = window.location.hash.replace("#/", "");
+
+        const html = products.map(
+            (product) => `
+            <div class="productCard">
+                <img src=${product.items[0].images[0].imageUrl} alt=${product.productName}>
+                <span>${product.productName}</span>
+                <div class="skus">
+                    ${product.items.map((item) => `<button>${item.name}</button>`)}
+                </div>
+                <a>ver produto</a>
+            </div>
+       `
+        );
+
+        if (this.shelfContainer && hash === "cart") {
+            this.shelfContainer.html(html);
+        }
+    }
 }

checkout/src/arquivos/js/components/Header.js

@@ -48,11 +48,12 @@ export default class Header {
         this.progressBar.innerHTML = progressBar;
         this.isActive();
     }
+
     isActive() {
         $(`.progress-bar__status.active`).removeClass("active");
         const hash = window.location.hash.replace("#/", "");
         $(`.progress-bar__status.${hash}`).addClass("active");
-        console.log(`.progress-bar__status .${hash}`);
+
         if (hash === "email" || hash === "shipping") {
             $(`.progress-bar__status.profile`).addClass("active");
         }

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

@@ -6,8 +6,12 @@
 
         .link-cart {
             a {
-				color: $color-black;
+                font-family: $font-family-secundary;
-				font-size: 14px;
+                font-weight: 400;
+                font-size: 28px;
+                line-height: 33px;
+                text-transform: uppercase;
+                color: $color-black3;
 
                 &:hover {
                     color: lighen($color-black, 10);
@@ -22,15 +26,27 @@
             justify-content: center;
 
             h3 {
-				margin-bottom: 16px;
+                margin-top: -85px;
+                margin-bottom: 23px;
 
                 span {
-					color: #303030;
+                    font-family: $font-family-secundary;
-					font-size: 24px;
+                    font-weight: 400;
+                    font-size: 40px;
+                    line-height: 47px;
+                    text-transform: uppercase;
+
+                    color: $color-black3;
                 }
 
                 small {
-					color: $color-gray4;
+                    font-family: $font-family-secundary;
+                    font-weight: 400;
+                    font-size: 40px;
+                    line-height: 47px;
+                    text-transform: uppercase;
+
+                    color: $color-black3;
                 }
             }
         }
@@ -39,13 +55,16 @@
             margin: 0 0 16px;
 
             input {
+                width: 100%;
+                max-width: 765px;
+                margin-right: 205px;
                 box-shadow: none;
-				color: $color-black;
+                color: $color-black3;
                 font-family: $font-family;
                 padding: 0 16px;
-				border: 2px solid $color-gray3;
+                border: 1px solid $color-black3;
                 box-sizing: border-box;
-				border-radius: 5px;
+                border-radius: 5px 0px 0px 5px;
 
                 @media (max-width: 490px) {
                     width: auto;
@@ -53,12 +72,19 @@
             }
 
             button {
-				background-color: $color-black;
+                background-color: $color-blue2;
-				border-radius: 5px;
+                border-radius: 0px 8px 8px 0px;
                 border: none;
                 font-family: $font-family;
+                font-weight: 700;
+                font-size: 28px;
+                line-height: 38px;
+                text-transform: uppercase;
+                color: $color-black3;
                 height: 54px;
-				right: 0;
+                width: 100%;
+                max-width: 219px;
+                right: 188px;
                 top: 0;
 
                 @media (max-width: 490px) {
@@ -69,32 +95,50 @@
             }
 
             span.help.error {
-				color: red;
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 700;
+                font-size: 24px;
+                line-height: 33px;
+                color: $color-red;
             }
         }
 
         .emailInfo {
-			padding: 16px;
+            width: 100%;
+            max-width: 777px;
+            max-height: 239px;
+            padding: 16px 16px 26px;
             background-color: $color-white;
             border: 1px solid $color-gray4;
             border-radius: 0;
 
             h3 {
-				color: #303030;
+                font-family: $font-family;
-				margin: 0 0 8px 0;
+                font-style: normal;
+                font-weight: 700;
+                font-size: 24px;
+                line-height: 33px;
+                margin: 0 0 14px 0;
             }
 
             ul {
                 margin: 0;
-
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 700;
+                font-size: 24px;
+                line-height: 33px;
                 li {
+                    margin-top: 1px;
+                    line-height: unset;
                     span {
                         color: $color-black;
                     }
 
                     i::before {
-						color: $color-black;
+                        color: $color-blue2;
-						font-size: 1rem;
+                        font-size: 1.5rem;
                         opacity: 1;
                     }
                 }
@@ -105,6 +149,21 @@
                 font-size: 6rem;
                 opacity: 0.5;
             }
+
+            .icon-lock {
+                position: absolute;
+                font-size: unset;
+                bottom: -23px;
+                right: 1px;
+                color: #eaf0ea;
+                z-index: 1;
+
+                &::before {
+                    color: $color-black;
+                    font-size: 153px;
+                    opacity: 0.5;
+                }
+            }
         }
     }
 
@@ -119,7 +178,13 @@
 
             .accordion-heading {
                 span {
-					color: #303030;
+                    font-family: $font-family-secundary;
+                    font-weight: 400;
+                    font-size: 32px;
+                    line-height: 37px;
+
+                    color: $color-black;
+
                     margin-bottom: 8px;
                     padding: 0;
 
@@ -148,23 +213,54 @@
                 .client-notice {
                     color: $color-black;
                 }
+                .input-small {
+                    width: 100%;
+                }
 
                 p {
                     label {
-						color: $color-black;
+                        font-family: $font-family;
-						font-weight: 500;
+                        font-style: normal;
+                        font-weight: 400;
+                        font-size: 28px;
+                        line-height: 38px;
+                        color: $color-gray2;
+                        display: flex;
                     }
 
                     select,
                     input {
+                        width: 100%;
+                        box-sizing: border-box;
                         border-radius: 0;
                         border: 1px solid $color-gray4;
                         box-shadow: none;
+                        height: 61px;
+
+                        &#opt-in-newsletter {
+                            width: 35px;
+                            height: 35px;
+                            margin-right: 8px;
+                        }
                     }
 
                     .help.error {
                         color: red;
                     }
+
+                    &.client-email {
+                    }
+
+                    &.client-first-name,
+                    &.client-document {
+                        width: calc(50% - 14.5px);
+                        margin-right: 28px;
+                    }
+
+                    &.client-last-name,
+                    &.client-phone {
+                        width: calc(50% - 14.5px);
+                    }
                 }
 
                 .box-client-info-pj {
@@ -181,19 +277,26 @@
                 }
 
                 button.submit {
+                    font-family: $font-family;
+                    font-weight: 700;
+                    font-size: 28px;
+                    line-height: 38px;
+                    letter-spacing: 0.05em;
+                    text-transform: uppercase;
+                    color: $color-white;
                     border: none;
                     border-radius: 5px;
-					background: $color-black;
+                    background: $color-blue2;
                     margin-top: 8px;
                     outline: none;
                     transition: all 0.2s linear;
-
+                    width: 100%;
                     &:hover {
-						background: lighten($color-black, 5);
+                        background: lighten($color-blue3, 5);
                     }
 
                     &:active {
-						background: darken($color-black, 5);
+                        background: darken($color-blue4, 5);
                     }
                 }
 

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

@@ -35,8 +35,9 @@
             background: $color-white;
             border: none;
             color: #303030;
-            font-size: 60px;
+            font-size: 28px;
             font-weight: 500;
+            text-align: left;
         }
 
         .item-unavailable {
@@ -506,6 +507,10 @@
                     display: none;
                 }
                 .ship-postalCode {
+                    display: flex;
+                    flex-direction: column;
+                    width: 100%;
+
                     label {
                         font-family: $font-family;
                         color: $color-black3;
@@ -538,13 +543,11 @@
                         height: auto;
                         letter-spacing: 1px;
                         outline: none;
-                        position: absolute;
-                        right: -150px;
-                        top: 36px;
                         transition: all 0.2s linear;
                         width: 100%;
                         max-width: 194px;
                         text-transform: uppercase;
+                        margin-top: 12px;
 
                         &:hover {
                             background-color: lighten($color-blue3, 5);

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

@@ -2,11 +2,11 @@
 @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
 $font-family: "Open Sans", sans-serif;
-$font-family-secundary:"Tenor Sans", sans-serif;
+$font-family-secundary: "Tenor Sans", sans-serif;
 
 /* Colors */
 $color-black: #292929;
-$color-black2:#303030;
+$color-black2: #303030;
 $color-black3: #000000;
 
 $color-white: #fff;
@@ -17,14 +17,15 @@ $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 $color-gray6: #989898;
-$color-gray7:#c4c4c4;
+$color-gray7: #c4c4c4;
 
 $color-blue: #4267b2;
-$color-blue2:#00C8FF;
+$color-blue2: #00c8ff;
-$color-blue3:#00b7ff;
+$color-blue3: #00b7ff;
-$color-blue4:#00b7ffc2;
+$color-blue4: #00b7ffc2;
 
 $color-green: #4caf50;
+$color-red: #ff0000;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
@@ -33,7 +34,7 @@ $grid-breakpoints: (
     sm: 576px,
     md: 768px,
     lg: 992px,
-	xl: 1200px
+    xl: 1200px,
 ) !default;
 
 $z-index: (
@@ -41,5 +42,5 @@ $z-index: (
     level2: 10,
     level3: 15,
     level4: 20,
-	level5: 25
+    level5: 25,
 ) !default;

checkout/src/template-checkout/checkout-header.html

@@ -13,6 +13,7 @@
                 </a>
             </div>
           
+
             <div id="progressBar" class="progress-bar">Aqui entra a barra de progresso</div>
             <div class="headerCheckout__safeBuy">
                 <img