feat(header): criando header desktop e mobile

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

@@ -1,4 +1,3 @@
-// import waitForEl from "../helpers/waitForEl";
 import { waitElement } from "m3-utils";
 
 export default class Header {
@@ -8,14 +7,217 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.body.onresize = await this.progressBarHTML();
+        await this.progressBarProgress();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.header = await waitElement(".headerCheckout");
-            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
+        this.progressBar = await waitElement("#progressBar");
-            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
+        this.body = await waitElement("#checkoutMainContainer");
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+    }
-        });
+    async progressBarHTML() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+                <ul>
+                <li><div class="containerLi"><div><p class="progress-bar-text">Meu Carrinho</p><p id="progress-bar-circle-1" class="progress-bar-circle-1"></p><p class="progress-bar-line-1"></p></div></div></li>
+                <li class="central"><div class="containerLi"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
+                <li><div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-3" class="progress-bar-circle-3"></p><p class="progress-bar-line-2"></p></div></div></li>
+                </ul>
+                `;
+        }
+        if (this.progressBar && window.innerWidth <= 1024) {
+            this.progressBar.innerHTML = ``;
+        }
+    }
+
+    async progressBarProgress() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const progressBarLista = document.querySelectorAll("#progressBar ul li");
+            progressBarLista.forEach((li) => {
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                        li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
+                            "active"
+                        );
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.remove("active");
+                        }
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.remove("active");
+                        }
+                    }
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
+                    window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" ||
+                    window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
+                ) {
+                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.remove("active");
+                        }
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                        li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
+                            "active"
+                        );
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.remove("active");
+                        }
+                    }
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.remove("active");
+                        }
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.remove("active");
+                        }
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                        li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
+                            "active"
+                        );
+                    }
+                }
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.add("active");
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-2"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-2"
+                                ].classList.remove("active");
+                            }
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.remove("active");
+                            }
+                        }
+                    } else if (
+                        window.location.hash == "#/email" ||
+                        window.location.hash == "#/profile" ||
+                        window.location.hash == "#/shipping"
+                    ) {
+                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-1"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-1"
+                                ].classList.remove("active");
+                            }
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.add("active");
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.remove("active");
+                            }
+                        }
+                    } else if (window.location.hash == "#/payment") {
+                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-1"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-1"
+                                ].classList.remove("active");
+                            }
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-2"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-2"
+                                ].classList.remove("active");
+                            }
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.add("active");
+                        }
+                    }
+                });
+            });
+        }
     }
 }

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

@@ -8,14 +8,20 @@ html {
     min-height: 100%;
 }
 
-footer .footerCheckout__wrapper {
+footer .footerCheckout__wrapper .container {
     width: 94.9734%;
     margin: auto auto 0 auto;
 }
-footer .footerCheckout__prateleira,
 header {
+    border-bottom: 1px solid #000;
+}
+footer .footerCheckout__prateleira,
+.headerCheckout .container {
     width: 79.53125%;
     margin: 0 auto;
+    @media (max-width: 1024px) {
+        width: auto;
+    }
 }
 
 body {
@@ -27,7 +33,11 @@ body {
     @include mq(md, max) {
         padding-left: 0;
     }
-
+    .container {
+        @media (max-width: 490px) {
+            padding: 16px !important;
+        }
+    }
     &.body-cart {
         font-family: $font-family;
     }
@@ -47,10 +57,10 @@ body {
             padding-left: 0;
         }
     }
-    .container-order-form,
+    // .container-order-form,
-    .container-cart {
+    // .container-cart {
-        width: 80%;
+    //     width: 80%;
-    }
+    // }
 }
 
 .btn-success {

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

@@ -1,7 +1,132 @@
 /* _header.scss */
 .headerCheckout {
     .container {
-        width: auto !important;
+        padding: 29px 0 29.86px;
+        @media (min-width: 2500px) {
+            padding: 29px 0;
+        }
+        @media (max-width: 1024px) {
+            padding: 16px 16px 16.88px;
+        }
+
+        #progressBar {
+            width: 439px;
+            font-size: 0;
+            @media (min-width: 2500px) {
+                width: 1078.86px;
+            }
+            @media (max-width: 1024px) {
+                display: none;
+            }
+            ul {
+                list-style-type: none;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin: 0 !important;
+            }
+            li .containerLi {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: center;
+                position: relative;
+            }
+            li.central .containerLi {
+                align-items: center;
+                margin-left: 7px;
+            }
+            li:last-child .containerLi {
+                align-items: flex-end;
+            }
+            li .containerLi div {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+            }
+            li {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                width: 173px;
+                @media (min-width: 2500px) {
+                    width: 444px;
+                }
+                p {
+                    font-family: $font-family-secundary;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 14px;
+                    color: #000000;
+                    margin-bottom: 9px;
+                    @media (min-width: 2500px) {
+                        font-size: 24px;
+                        line-height: 28px;
+                        margin-bottom: 15px;
+                    }
+                }
+            }
+            li.central {
+                width: auto;
+            }
+            li #progress-bar-circle-1 {
+                margin-right: 4px;
+            }
+            li #progress-bar-circle-3 {
+                margin-left: 4px;
+                @media (min-width: 2500px) {
+                    margin-left: 0px;
+                }
+            }
+            li #progress-bar-circle-1,
+            li #progress-bar-circle-2,
+            li #progress-bar-circle-3 {
+                width: 12px;
+                height: 12px;
+                border: 1px solid #000000;
+                border-radius: 50%;
+                margin-bottom: 0;
+                @media (min-width: 2500px) {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+            li #progress-bar-circle-1.active,
+            li #progress-bar-circle-2.active,
+            li #progress-bar-circle-3.active {
+                border: none;
+                background-color: #000000;
+            }
+            li .progress-bar-line-1 {
+                position: absolute;
+                left: 25%;
+                bottom: 5px;
+                width: 100%;
+                border-top: 1px solid #000;
+                margin: 0 !important;
+                line-height: 0;
+                @media (min-width: 2500px) {
+                    left: 19%;
+                    bottom: 11px;
+                }
+            }
+            li .progress-bar-line-2 {
+                position: absolute;
+                right: 21%;
+                bottom: 6px;
+                width: 100%;
+                border-top: 1px solid #000;
+                margin: 0 !important;
+                line-height: 0;
+                @media (min-width: 2500px) {
+                    right: 18%;
+                    bottom: 11px;
+                }
+            }
+        }
     }
     &__wrapper {
         align-items: center;
@@ -10,27 +135,62 @@
     }
 
     &__logo {
-        img {
+        width: 15.28%;
-            height: 52px;
+        @media (min-width: 2500px) {
-            width: auto;
+            width: 19.25%;
+        }
+        @media (max-width: 1024px) {
+            width: 155.58px;
+            min-width: 155.58px;
+        }
+        @media (max-width: 320px) {
+            min-width: 119px;
+        }
+        a {
+            width: 100%;
+            @media (max-width: 1024px) {
+                width: 155.58px;
+                min-width: 155.58px;
+            }
+            @media (max-width: 320px) {
+                min-width: 119px;
+            }
+            img {
+                height: auto;
+                width: 100%;
+            }
         }
     }
 
     &__safeBuy {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+        width: 11.69%;
+        min-width: 119px;
+        @media (min-width: 2500px) {
+            width: 11.83%;
+            min-width: 235.28px;
+        }
         span {
-            align-items: center;
-            display: flex;
-            text-transform: uppercase;
             font-family: $font-family;
-            font-style: normal;
+            font-weight: 400;
-            font-weight: normal;
             font-size: 12px;
-            line-height: 14px;
+            line-height: 16px;
-            color: $color-gray;
+            text-transform: uppercase;
+            color: #292929;
+            @media (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
-        i {
+        img {
-            margin-right: 8px;
+            width: 10.08%;
+            @media (min-width: 2500px) {
+                width: 12.52%;
+            }
         }
     }
 }