From 3077f8df10979d898f655c80c2b7b4f9675d27cd Mon Sep 17 00:00:00 2001
From: Ramon Dias Ferreira <ramondf13@gmail.com>
Date: Sun, 18 Dec 2022 15:43:28 -0300
Subject: [PATCH] =?UTF-8?q?style(Header):=20remo=C3=A7=C3=A3o=20de=20selec?=
 =?UTF-8?q?tors=20n=C3=A3o=20utilizado,=20organiza=C3=A7=C3=A3o=20do=20cod?=
 =?UTF-8?q?igo.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 checkout/src/arquivos/js/components/Header.js | 161 ++++++++----------
 .../src/arquivos/sass/partials/_header.scss   |   8 +-
 2 files changed, 74 insertions(+), 95 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index aa48675..779ff4c 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -9,20 +9,13 @@ export default class Header {
     async init() {
         await this.selectors();
         this.progressBarHTML();
-        await this.progressBarProgress();
+        await this.barProgress();
     }
 
     async selectors() {
-        this.header = await waitElement(".headerCheckout", {
-            //#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.progressBar = await waitElement("#progressBar", {
-            //#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
+            timeout: 5000,
+            interval: 1000,
         });
     }
 
@@ -30,43 +23,29 @@ export default class Header {
         if (this.progressBar && window.innerWidth > 1024) {
             this.progressBar.innerHTML = `
             <ul>
-
-            <li>
-
-                <div class="containerLi">
-
-
+                <li>
+                    <div class="containerLi">
                     <p class="progress-bar-text">Meu Carrinho</p>
-
-                    <div class="bolinha" style="margin-left: 29px;">
-                    <p id="progress-bar-circle-1" class="progress-bar-circle"></p>
-                    <p class="progress-bar-line-1"></p>
-
+                    <div style="margin-left: 29px;">
+                        <p id="progress-bar-circle-1" class="progress-bar-circle"></p>
+                        <p class="progress-bar-line-1"></p>
                     </div>
-
-
                 </div>
-
-            </li>
-
-
-            <li class="central">
+                </li>
+                <li class="central">
                 <div class="containerLi">
                     <p class="progress-bar-text">Dados Pessoais</p>
                     <p id="progress-bar-circle-2" class="progress-bar-circle"></p>
-
                 </div>
-            </li>
+                </li>
+                <li>
+                    <div class="containerLi">
+                        <p class="progress-bar-text">Pagamento</p>
 
-            <li>
-                <div class="containerLi">
-                    <p class="progress-bar-text">Pagamento</p>
-
-                    <div class="bolinha" style="margin-right: 22px;">
-                    <p id="progress-bar-circle-3" class="progress-bar-circle"></p>
+                        <div style="margin-right: 22px;">
+                            <p id="progress-bar-circle-3" class="progress-bar-circle"></p>
+                        </div>
                     <p class="progress-bar-line-2"></p>
-                    </div>
-
                 </div>
 
             </li>
@@ -80,28 +59,28 @@ export default class Header {
         }
     }
 
-    async progressBarProgress() {
+    async barProgress() {
         if (this.progressBar && window.innerWidth > 1024) {
             const progressBarLista = document.querySelectorAll("#progressBar ul li");
             progressBarLista.forEach((li) => {
-                // console.log(li)
-                const liOne = li.children[0].children[1].children["progress-bar-circle-1"];
-                const liTwo = li.children[0].children["progress-bar-circle-2"];
-                const liThree = li.children[0].children[1].children["progress-bar-circle-3"];
+                console.log(li.children[0])
+                const circleOne = li.children[0].children[1].children["progress-bar-circle-1"];
+                const circleTwo = li.children[0].children["progress-bar-circle-2"];
+                const circleThree = li.children[0].children[1].children["progress-bar-circle-3"];
 
                 if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
-                    if (liOne) {
-                        liOne.classList.add("active");
+                    if (circleOne) {
+                        circleOne.classList.add("active");
                     }
 
-                    if (liTwo) {
-                        if (liTwo.classList.contains("active")) {
-                            liTwo.classList.remove("active");
+                    if (circleTwo) {
+                        if (circleTwo.classList.contains("active")) {
+                            circleTwo.classList.remove("active");
                         }
                     }
-                    if (liThree) {
-                        if (liThree.classList.contains("active")) {
-                            liThree.classList.remove("active");
+                    if (circleThree) {
+                        if (circleThree.classList.contains("active")) {
+                            circleThree.classList.remove("active");
                         }
                     }
                 } else if (
@@ -109,53 +88,53 @@ export default class Header {
                     window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
                     window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
                 ) {
-                    if (liOne) {
-                        if (liOne.classList.contains("active")) {
-                            liOne.classList.remove("active");
+                    if (circleOne) {
+                        if (circleOne.classList.contains("active")) {
+                            circleOne.classList.remove("active");
                         }
                     }
-                    if (liTwo) {
-                        liTwo.classList.add("active");
+                    if (circleTwo) {
+                        circleTwo.classList.add("active");
                     }
-                    if (liThree) {
-                        if (liThree.classList.contains("active")) {
-                            liThree.classList.remove("active");
+                    if (circleThree) {
+                        if (circleThree.classList.contains("active")) {
+                            circleThree.classList.remove("active");
                         }
                     }
                 } else if (
                     window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
                 ) {
-                    if (liOne) {
-                        if (liOne.classList.contains("active")) {
-                            liOne.classList.remove("active");
+                    if (circleOne) {
+                        if (circleOne.classList.contains("active")) {
+                            circleOne.classList.remove("active");
                         }
                     }
 
-                    if (liTwo) {
-                        if (liTwo.classList.contains("active")) {
-                            liTwo.classList.remove("active");
+                    if (circleTwo) {
+                        if (circleTwo.classList.contains("active")) {
+                            circleTwo.classList.remove("active");
                         }
                     }
 
-                    if (liThree) {
-                        liThree.classList.add("active");
+                    if (circleThree) {
+                        circleThree.classList.add("active");
                     }
                 }
 
                 window.addEventListener("hashchange", () => {
                     if (window.location.hash == "#/cart") {
-                        if (liOne) {
-                            liOne.classList.add("active");
+                        if (circleOne) {
+                            circleOne.classList.add("active");
                         }
 
-                        if (liTwo) {
-                            if (liTwo.classList.contains("active")) {
-                                liTwo.classList.remove("active");
+                        if (circleTwo) {
+                            if (circleTwo.classList.contains("active")) {
+                                circleTwo.classList.remove("active");
                             }
                         }
-                        if (liThree) {
-                            if (liThree.classList.contains("active")) {
-                                liThree.classList.remove("active");
+                        if (circleThree) {
+                            if (circleThree.classList.contains("active")) {
+                                circleThree.classList.remove("active");
                             }
                         }
                     } else if (
@@ -163,34 +142,34 @@ export default class Header {
                         window.location.hash === "#/profile" ||
                         window.location.hash === "#/shipping"
                     ) {
-                        if (liOne) {
-                            if (liOne.classList.contains("active")) {
-                                liOne.classList.remove("active");
+                        if (circleOne) {
+                            if (circleOne.classList.contains("active")) {
+                                circleOne.classList.remove("active");
                             }
                         }
-                        if (liTwo) {
-                            liTwo.classList.add("active");
+                        if (circleTwo) {
+                            circleTwo.classList.add("active");
                         }
 
-                        if (liThree) {
-                            if (liThree.classList.contains("active")) {
-                                liThree.classList.remove("active");
+                        if (circleThree) {
+                            if (circleThree.classList.contains("active")) {
+                                circleThree.classList.remove("active");
                             }
                         }
                     } else if (window.location.hash == "#/payment") {
-                        if (liOne) {
-                            if (liOne.classList.contains("active")) {
-                                liOne.classList.remove("active");
+                        if (circleOne) {
+                            if (circleOne.classList.contains("active")) {
+                                circleOne.classList.remove("active");
                             }
                         }
 
-                        if (liTwo) {
-                            if (liTwo.classList.contains("active")) {
-                                liTwo.classList.remove("active");
+                        if (circleTwo) {
+                            if (circleTwo.classList.contains("active")) {
+                                circleTwo.classList.remove("active");
                             }
                         }
-                        if (liThree) {
-                            liThree.classList.add("active");
+                        if (circleThree) {
+                            circleThree.classList.add("active");
                         }
                     }
                 });
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index cc8f53f..fb6c453 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -78,20 +78,20 @@
 
             li .progress-bar-line-1 {
                 position: absolute;
+                width: 100%;
                 left: 25%;
                 transform: translateY(-50%);
                 bottom: 5px;
-                width: 100%;
                 height: 1px;
                 border-top: 1px solid #000000;
             }
 
             li .progress-bar-line-2 {
                 position: absolute;
+                width: 100%;
                 right: 21%;
                 transform: translateY(-50%);
                 bottom: 5px;
-                width: 100%;
                 height: 1px;
                 border-top: 1px solid #000000;
             }
@@ -123,11 +123,11 @@
 
             text-transform: uppercase;
             font-family: $font-family;
+            line-height: 15px;
+            color: $color-gray;
             font-style: normal;
             font-weight: normal;
             font-size: 12px;
-            line-height: 15px;
-            color: $color-gray;
         }
 
         img {