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

@@ -8,14 +8,148 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.events();
+        this.criaProgressBar();
+        await this.alteraProgressBar();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.headerCheckout = 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
+    }
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+
-        });
+    events() {
+        window.addEventListener("resize", this.criaProgressBar.bind(this));
+    }
+
+    criaProgressBar() {
+        if (window.innerWidth > 1024) {
+            if (this.progressBar) {
+                this.progressBar.innerHTML = `
+                <ul class="progress-bar__ul">
+                    <li class="progress-bar__li">
+                        <div class="progress-bar__container">
+                            <div class="progress-bar__content">
+                                <p class="progress-bar__title">Meu Carrinho</p>
+                                <p id="progress-bar__circle-1"></p>
+                                <p class="progress-bar__line-1"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="progress-bar__li progress-bar__central">
+                        <div class="progress-bar__container">
+                            <div class="progress-bar__content">
+                                <p class="progress-bar__title">Dados Pessoais</p>
+                                <p id="progress-bar__circle-2"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="progress-bar__li">
+                        <div class="progress-bar__container">
+                            <div class="progress-bar__content">
+                                <p class="progress-bar__title">Pagamento</p>
+                                <p id="progress-bar__circle-3"></p>
+                                <p class="progress-bar__line-2"></p>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+                `;
+            }
+        } else {
+            this.progressBar.innerHTML = "";
+        }
+
+        this.alteraProgressBar();
+    }
+
+    ativaPrimeiroCirculo(el) {
+        if (el.children["progress-bar__circle-1"]) {
+            el.children["progress-bar__circle-1"].classList.add("active");
+        }
+
+        if (el.children["progress-bar__circle-2"]) {
+            if (el.children["progress-bar__circle-2"].classList.contains("active")) {
+                el.children["progress-bar__circle-2"].classList.remove("active");
+            }
+        }
+
+        if (el.children["progress-bar__circle-3"]) {
+            if (el.children["progress-bar__circle-3"].classList.contains("active")) {
+                el.children["progress-bar__circle-3"].classList.remove("active");
+            }
+        }
+    }
+
+    ativaSegundoCirculo(el) {
+        if (el.children["progress-bar__circle-1"]) {
+            if (el.children["progress-bar__circle-1"].classList.contains("active")) {
+                el.children["progress-bar__circle-1"].classList.remove("active");
+            }
+        }
+
+        if (el.children["progress-bar__circle-2"]) {
+            el.children["progress-bar__circle-2"].classList.add("active");
+        }
+
+        if (el.children["progress-bar__circle-3"]) {
+            if (el.children["progress-bar__circle-3"].classList.contains("active")) {
+                el.children["progress-bar__circle-3"].classList.remove("active");
+            }
+        }
+    }
+
+    ativaTerceiroCirculo(el) {
+        if (el.children["progress-bar__circle-1"]) {
+            if (el.children["progress-bar__circle-1"].classList.contains("active")) {
+                el.children["progress-bar__circle-1"].classList.remove("active");
+            }
+        }
+
+        if (el.children["progress-bar__circle-2"]) {
+            if (el.children["progress-bar__circle-2"].classList.contains("active")) {
+                el.children["progress-bar__circle-2"].classList.remove("active");
+            }
+        }
+
+        if (el.children["progress-bar__circle-3"]) {
+            el.children["progress-bar__circle-3"].classList.add("active");
+        }
+    }
+
+    async alteraProgressBar() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const progressBarContent = document.querySelectorAll(".progress-bar__content");
+
+            progressBarContent.forEach((el) => {
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    this.ativaPrimeiroCirculo(el);
+                } 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"
+                ) {
+                    this.ativaSegundoCirculo(el);
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    this.ativaTerceiroCirculo(el);
+                }
+
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        this.ativaPrimeiroCirculo(el);
+                    } else if (
+                        window.location.hash == "#/email" ||
+                        window.location.hash == "#/profile" ||
+                        window.location.hash == "#/shipping"
+                    ) {
+                        this.ativaSegundoCirculo(el);
+                    } else if (window.location.hash == "#/payment") {
+                        this.ativaTerceiroCirculo(el);
+                    }
+                });
+            });
+        }
     }
 }

checkout/src/arquivos/sass/checkout.scss

@@ -1,5 +1,6 @@
 @import "./utils/all";
 @import "./lib/slick";
 @import "./partials/header";
+@import "./partials/progressBar";
 @import "./partials/footer";
 @import "./checkout/checkout.scss";

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

@@ -1,8 +1,25 @@
 /* _header.scss */
 .headerCheckout {
+    margin: 0;
+    width: 100%;
+    border-bottom: 1px solid $black-500;
+
     .container {
-        width: auto !important;
+        box-sizing: border-box;
+        width: 79.53125% !important;
+        margin: 29px auto 29.86px auto;
+
+        @include mq(tablet, max) {
+            width: 100% !important;
+            padding: 16px !important;
+            margin: 0;
+        }
+
+        @include mq(desktop4K, min) {
+            margin: 29px auto;
+        }
     }
+
     &__wrapper {
         align-items: center;
         display: flex;
@@ -10,27 +27,80 @@
     }
 
     &__logo {
+        width: 15.2829%;
+
+
+        @include mq(tablet, max) {
+            min-width: 119px;
+            width: 15.6834%;
+        }
+
+        @include mq(celular, max) {
+            width: 45.3586%;
+            min-width: auto;
+        }
+
+        @include mq(desktop4K, min) {
+            width: 19.2161%;
+        }
+
         img {
-            height: 52px;
+            width: 100%;
-            width: auto;
         }
     }
 
     &__safeBuy {
-        span {
+        width: 11.6896%;
-            align-items: center;
+        min-width: 119px;
-            display: flex;
+        display: flex;
-            text-transform: uppercase;
+        align-items: center;
-            font-family: $font-family;
+        justify-content: flex-end;
-            font-style: normal;
+
-            font-weight: normal;
+
-            font-size: 12px;
+        @include mq(tablet, max) {
-            line-height: 14px;
+            width: 11.996%;
-            color: $color-gray;
         }
 
-        i {
+        @include mq(celular, max) {
-            margin-right: 8px;
+            width: 34.69387%;
+            min-width: auto;
+
+        }
+
+        @include mq(desktop4K, min) {
+            width: 11.834%;
+        }
+
+        img {
+            width: 10.09%;
+
+            height: auto;
+
+            @include mq(tablet, max) {
+                width: 10.085%;
+            }
+
+            @include mq(desktop4K, min) {
+                width: 12.5255%;
+            }
+        }
+
+        span {
+            margin-left: 8px;
+
+            font-family: "Open Sans";
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            text-transform: uppercase;
+            color: $black-300;
+
+            @include mq(desktop4K, min) {
+                margin-left: 7.9px;
+
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
     }
 }

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

@@ -0,0 +1,126 @@
+.progress-bar {
+    width: 439px;
+
+    @include mq(tablet, max) {
+        display: none;
+    }
+
+    @include mq(desktop4K, min) {
+        width: 1078.86px;
+    }
+
+    &__ul {
+        margin: 0;
+        list-style: none;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__li {
+        width: 39.75%;
+
+        @include mq(desktop4K, min) {
+            width: 41.7042%;
+        }
+
+        &:first-child {
+            .progress-bar__container {
+                justify-content: flex-start;
+            }
+        }
+
+        &:last-child {
+            .progress-bar__container {
+                justify-content: flex-end;
+            }
+        }
+    }
+
+    &__central {
+        width: auto;
+        flex: 1;
+    }
+
+    &__container {
+        position: relative;
+
+        display: flex;
+        justify-content: center;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__title {
+        font-family: "Tenor Sans";
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+
+        margin-bottom: 9px;
+        color: $black-500;
+
+        @include mq(desktop4K, min) {
+            font-size: 24px;
+            line-height: 28px;
+        }
+    }
+
+    #progress-bar__circle-1,
+    #progress-bar__circle-2,
+    #progress-bar__circle-3 {
+        width: 12px;
+        height: 12px;
+        border: 1px solid $black-500;
+        border-radius: 50%;
+
+        @include mq(desktop4K, min) {
+            width: 24px;
+            height: 24px;
+        }
+
+        &.active {
+            background-color: $black-500;
+        }
+    }
+
+    &__line-1,
+    &__line-2 {
+        position: absolute;
+        bottom: 5px;
+        transform: translateY(-50%);
+
+        height: 1px;
+        border-top: 1px solid $black-500;
+
+        @include mq(desktop4K, min) {
+            bottom: 9px;
+        }
+    }
+
+    &__line-1 {
+        left: 27%;
+        width: 95%;
+
+        @include mq(desktop4K, min) {
+            left: 21%;
+            width: 96%;
+        }
+    }
+
+    &__line-2 {
+        right: 22%;
+        width: 100%;
+
+        @include mq(desktop4K, min) {
+            right: 17%;
+            width: 100%;
+        }
+    }
+}

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

@@ -19,6 +19,10 @@ $color-blue: #4267b2;
 
 $color-green: #4caf50;
 
+/*CORES*/
+$black-500: #000;
+$black-300: #292929;
+
 /* Grid breakpoints */
 $grid-breakpoints: (
 	xs: 0,
@@ -26,7 +30,10 @@ $grid-breakpoints: (
 	sm: 576px,
 	md: 768px,
 	lg: 992px,
-	xl: 1200px
+	xl: 1200px,
+    celular: 600px,
+    tablet: 1025px,
+    desktop4K: 2500px
 ) !default;
 
 $z-index: (

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

@@ -1,20 +1,27 @@
 <!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
     MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
 
-    <header class="headerCheckout">
+<header class="headerCheckout">
-        <div class="container">
+    <div class="container">
-            <div class="headerCheckout__wrapper">
+        <div class="headerCheckout__wrapper">
-                <div class="headerCheckout__logo">
+            <div class="headerCheckout__logo">
-                    <a href="/">
+                <a href="/">
-                        <img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
+                    <img
-                    </a>
+                        src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
-                </div>
+                        alt="M3 Academy"
-                <div id="progressBar" class="progress-bar">	Aqui entra a barra de progresso
+                    />
-                </div>
+                </a>
-                <div class="headerCheckout__safeBuy">
+            </div>
-                      <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
+            <div id="progressBar" class="progress-bar">
-                    <span>Compra segura</span>
+                
-                </div>
+            </div>
+            <div class="headerCheckout__safeBuy">
+                <img
+                    src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
+                    alt="Cadeado"
+                />
+                <span>Compra segura</span>
             </div>
         </div>
-    </header>
+    </div>
+</header>