From 6dd11bab15039566921e4333282bd7eff074c600 Mon Sep 17 00:00:00 2001
From: ThiagoDuutra <thiagoduutra01@gmail.com>
Date: Wed, 14 Dec 2022 10:47:32 -0300
Subject: [PATCH] feat: cria header funcionalidade

---
 checkout/src/arquivos/js/components/Header.js | 140 ++++++++++++++++--
 .../src/arquivos/sass/partials/_header.scss   |   6 +-
 2 files changed, 133 insertions(+), 13 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 077bf9d..fc1b377 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -9,6 +9,7 @@ export default class Header {
     async init() {
         await this.selectors();
         this.progressBarDesktop();
+        await this.stepBarProcess();
     }
 
     async selectors() {
@@ -28,11 +29,9 @@ export default class Header {
             <li>
                 <div class="containerList">
                     <div class="containerList__div">
-                        <p class="containerList__text">Meu carrinho</p>
-                        <p class="containerList__circle-1 ${
-                            window.location.href.includes(`cart`) ? `active` : ``
-                        }"></p>
-                        <p class="containerList__line"></p>
+                    <p class="containerList__text">Meu carrinho</p>
+                    <p id="containerList__circle1" class="containerList__circle1"></p>
+                    <p class="containerList__line"></p>
                     </div>
                 </div>
             </li>
@@ -41,8 +40,7 @@ export default class Header {
             <div class="containerList">
                   <div class="containerList__div">
                     <p class="containerList__text">Dados Pessoais</p>
-                    <p class="containerList__circle-2"></p>
-
+                    <p id="containerList__circle2" class="containerList__circle2"></p>
                  </div>
             </div>
             </li>
@@ -50,9 +48,9 @@ export default class Header {
             <li>
             <div class="containerList" >
                  <div class="containerList__div">
-                    <p class="containerList__text">Pagamento </p>
-                    <p class="containerList__circle-3"> </p>
-                    <p class="containerList__line2"> </p>
+                    <p class="containerList__text">Pagamento</p>
+                    <p id="containerList__circle3" class="containerList__circle3"></p>
+                    <p class="containerList__line2"></p>
                   <div/>
             </div>
             </li>
@@ -64,4 +62,126 @@ export default class Header {
             this.progressBar.innerHTML = "";
         }
     }
+
+    circle1(li) {
+        if (li.children[0].children[0].children["containerList__circle1"]) {
+            li.children[0].children[0].children["containerList__circle1"].classList.add("active");
+        }
+        if (li.children[0].children[0].children["containerList__circle2"]) {
+            if (
+                li.children[0].children[0].children["containerList__circle2"].classList.contains(
+                    "active"
+                )
+            ) {
+                li.children[0].children[0].children["containerList__circle2"].classList.remove(
+                    "active"
+                );
+            }
+        }
+
+        if (li.children[0].children[0].children["containerList__circle3"]) {
+            if (
+                li.children[0].children[0].children["containerList__circle3"].classList.contains(
+                    "active"
+                )
+            ) {
+                li.children[0].children[0].children["containerList__circle3"].classList.remove(
+                    "active"
+                );
+            }
+        }
+    }
+
+    circle2(li) {
+        if (li.children[0].children[0].children["containerList__circle1"]) {
+            if (
+                li.children[0].children[0].children["containerList__circle1"].classList.contains(
+                    "active"
+                )
+            ) {
+                li.children[0].children[0].children["containerList__circle1"].classList.remove(
+                    "active"
+                );
+            }
+        }
+        if (li.children[0].children[0].children["containerList__circle2"]) {
+            li.children[0].children[0].children["containerList__circle2"].classList.add("active");
+        }
+
+        if (li.children[0].children[0].children["containerList__circle3"]) {
+            if (
+                li.children[0].children[0].children["containerList__circle3"].classList.contains(
+                    "active"
+                )
+            ) {
+                li.children[0].children[0].children["containerList__circle3"].classList.remove(
+                    "active"
+                );
+            }
+        }
+    }
+
+    circle3(li) {
+        if (li.children[0].children[0].children["containerList__circle1"]) {
+            if (
+                li.children[0].children[0].children["containerList__circle1"].classList.contains(
+                    "active"
+                )
+            ) {
+                li.children[0].children[0].children["containerList__circle1"].classList.remove(
+                    "active"
+                );
+            }
+        }
+
+        if (li.children[0].children[0].children["containerList__circle2"]) {
+            if (
+                li.children[0].children[0].children["containerList__circle2"].classList.contains(
+                    "active"
+                )
+            ) {
+                li.children[0].children[0].children["containerList__circle2"].classList.remove(
+                    "active"
+                );
+            }
+        }
+        if (li.children[0].children[0].children["containerList__circle3"]) {
+            li.children[0].children[0].children["containerList__circle3"].classList.add("active");
+        }
+    }
+
+    async stepBarProcess() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const listProgressBar = document.querySelectorAll("#progressBar ul li");
+            listProgressBar.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 31efbcd..1061d5e 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -79,9 +79,9 @@
                     justify-content: center;
                 }
 
-                &__circle-1,
-                &__circle-2,
-                &__circle-3 {
+                &__circle1,
+                &__circle2,
+                &__circle3 {
                     display: flex;
                     align-items: center;
                     justify-content: center;