From d8b21101969583aa1bcde5688d90a134083bcdf0 Mon Sep 17 00:00:00 2001
From: ueberjames <ueberjames@gmail.com>
Date: Tue, 13 Dec 2022 16:19:16 -0300
Subject: [PATCH] =?UTF-8?q?cria=C3=A7=C3=A3o=20da=20fun=C3=A7a=C3=B5=20par?=
 =?UTF-8?q?a=20onde=20se=20encintra=20a=20pagina=20no=20progressBar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 checkout/src/arquivos/js/components/Header.js | 172 ++++++++++++++++--
 .../src/arquivos/sass/partials/_header.scss   |  42 +++--
 2 files changed, 180 insertions(+), 34 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index df735cc..52a0851 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -1,39 +1,37 @@
 /* eslint-disable prettier/prettier */
-// import waitForEl from "../helpers/waitForEl";
 import { waitElement } from "m3-utils";
 
 export default class Header {
     constructor() {
         this.init();
+        this.progressBarHTML();
+        
     }
 
     async init() {
         await this.selectors();
-        this.progessBarHTML();
+        this.progressBarHTML();
         await this.progressBarProgress();
     }
 
     async selectors() {
-        this.herader = await waitElement (".headerCheckout")
-        this.progressBar = await waitElement ("#progressBar")
-("#my-element", {
-            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
-            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
-        });
+        this.header = await waitElement(".headerCheckout");
+        console.log(this.header);
+        this.progressBar = await waitElement("#progressBar");
+        console.log(this.progressBar);
     }
-
-    progessBarHTML(){
+    // Primeira parte para coloca o html na page
+    progressBarHTML() {
         // eslint-disable-next-line no-empty
-        if( this.progressBar && window.innerHeight > 1024){
+        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="pogress-bar-circle-1 class="progress-bar-circle-1"></p><p progress-bar-line-1></p></div></div>
+<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">Meus Dados</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="pogress-bar-circle-3 class="progress-bar-circle-3"></p><p progress-bar-line-2></p></div></div>
+<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>
 
 
@@ -41,11 +39,151 @@ export default class Header {
 
 
 
-            `
-
+            `;
         }
-        if(this.progressBar && window.innerHeight <= 1024){
+
+        if (this.progressBar && window.innerWidth <= 1024) {
             this.progressBar.innerHTML = ``;
         }
     }
+
+    circle1(li) {
+        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"
+                )
+            ) {
+                i.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"
+                    )
+                ) {
+                    i.children[0].children[0].children["progress-bar-circle-3"].classList.remove(
+                        "active"
+                    );
+                }
+            }
+        }
+    }
+
+    circle2(li) {
+        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"
+                )
+            ) {
+                i.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"
+                )
+            ) {
+                i.children[0].children[0].children["progress-bar-circle-3"].classList.remove(
+                    "active"
+                );
+            }
+        }
+    }
+
+    circle3(li) {
+        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"
+                )
+            ) {
+                i.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"
+                )
+            ) {
+                i.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");
+        }
+    }
+
+    async progressBarProgress() {
+
+        if (this.progressBar && window.innerHeight > 1024) {
+            const progressBarLista = document.querySelectorAll("#progressBar ul li");
+            progressBarLista.forEach((li) => {
+
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    this.circle1(li);
+                }
+                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.circle2(li);
+                }
+                else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    this.circle3(li);
+                }
+
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        this.circle1(li);
+                    }
+                    else if (window.location.hash == "#/email" ||
+                    window.location.hash == "#/profile" ||
+                    window.location.hash == "#/shipping"){
+                        this.circle2(li);
+                }
+                else if (window.location.hash == "#/payment"){
+                    this.circle3(li);
+                }
+
+            })
+
+
+
+
+
+        });
+
+
+
+
+    }
+    ;
 }
+
+}
+;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 36ff011..08402b4 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,12 +1,14 @@
 /* _header.scss */
 .headerCheckout {
+
     .container {
         width: auto !important;
 
-        #progressbar{
-            width: 446px;
 
-            ul{
+        #progressBar {
+            width: 439px;
+
+            ul {
                 list-style-type: none;
                 display: flex;
                 align-items: center;
@@ -23,23 +25,24 @@
                 position: relative;
             }
 
-            li.central .containerLi{
+            li.central .containerLi {
                 align-items: center;
                 margin-left: 7px;
             }
 
-            li:last-child .containerLi{
+            li:last-child .containerLi {
                 align-items: flex-end;
             }
 
-            li .containerLi div{
+            li .containerLi div {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
             }
 
-            li{
+            li {
+                width: 40%;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
@@ -49,23 +52,26 @@
                 font-weight: 400;
                 line-height: 28px;
                 color: $color-liPonto;
+
                 @media (min-width: 2500) {
                     font-size: 24px;
 
                 }
             }
 
-            li.central{
+            li.central {
                 width: auto;
             }
 
             li #progress-bar-circle-1,
             li #progress-bar-circle-2,
-            li #progress-bar-circle-3{
+            li #progress-bar-circle-3 {
+
                 width: 12px;
                 height: 12px;
-                border: 1px solide $color-liPonto;
+                border: 1px solid $color-liPonto;
                 border-radius: 50%;
+
                 @media (min-width: 2500) {
                     width: 24px;
                     height: 24px;
@@ -75,27 +81,28 @@
 
             li #progress-bar-circle-1.active,
             li #progress-bar-circle-2.active,
-            li #progress-bar-circle-3.active{
+            li #progress-bar-circle-3.active {
                 border: none;
                 background-color: $color-liPonto;
             }
 
-            li .progress-bar-line-1{
+            li .progress-bar-line-1 {
+
                 position: absolute;
-                left: 25%;
+                left: 27%;
                 transform: translateY(-50%);
                 bottom: 5px;
-                width: 100%;
+                width: 96%;
                 height: 1px;
                 border-top: 1px solid $color-liPonto;
             }
 
-            li .progress-bar-line-2{
+            li .progress-bar-line-2 {
                 position: absolute;
-                left: 21%;
+                right: 22%;
                 transform: translateY(-50%);
                 bottom: 5px;
-                width: 100%;
+                width: 97%;
                 height: 1px;
                 border-top: 1px solid $color-liPonto;
             }
@@ -109,6 +116,7 @@
 
 
     }
+
     &__wrapper {
         align-items: center;
         display: flex;