From e367a5ea71e158a2e98ee60852f656fc371e6c81 Mon Sep 17 00:00:00 2001
From: Ramon Dias Ferreira <ramondf13@gmail.com>
Date: Wed, 14 Dec 2022 14:59:33 -0300
Subject: [PATCH] feat(barProgress): adiciona a class active, mas somente com
 reload da pagina.

---
 checkout/src/arquivos/js/components/Header.js | 72 +++++++++++++++++--
 1 file changed, 68 insertions(+), 4 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 2c9904c..c4f9ae4 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -9,7 +9,8 @@ export default class Header {
     async init() {
         await this.selectors();
         console.log(this.progressBar);
-        this.progressBarHTML()
+        this.progressBarHTML();
+        await this.barProgress()
     }
 
     async selectors() {
@@ -32,19 +33,19 @@ export default class Header {
                 <li>
                     <div class="containerLi">
                         <p class="progress-bar-text">Meu Carrinho</p>
-                        <p id="progress-bar-circle-1" class="progress-bar-circle"> </p>
+                        <p id="progress-bar-circle-1" class="progress-bar-circle-1"> </p>
                     </div>
                 </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>
+                        <p id="progress-bar-circle-2" class="progress-bar-circle-2"> </p>
                     </div>
                 </li>
                 <li>
                     <div class="containerLi">
                         <p class="progress-bar-text">Pagamentos</p>
-                        <p id="progress-bar-circle-3" class="progress-bar-circle"> </p>
+                        <p id="progress-bar-circle-3" class="progress-bar-circle-3"> </p>
                     </div>
                 </li>
             </ul>
@@ -55,6 +56,69 @@ export default class Header {
         }
     }
 
+    async barProgress() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const barList  = document.querySelectorAll(".progress-bar ul li");
+            barList.forEach((li) => {
+                if(window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    if (li.children[0].children["progress-bar-circle-1"]) {
+                        li.children[0].children["progress-bar-circle-1"].classList.add("active")
+                    }
+                    if (li.children[0].children["progress-bar-circle-2"]) {
+                        if(li.children[0].children["progress-bar-circle-2"].classList.contains("active")) {
+                            li.children[0].children["progress-bar-circle-2"].classList.remove("active")
+                        }
+                    }
+                    if (li.children[0].children["progress-bar-circle-3"]) {
+                        if(li.children[0].children["progress-bar-circle-3"].classList.contains("active")) {
+                            li.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["progress-bar-circle-1"]) {
+                       if(li.children[0].children["progress-bar-circle-1"].classList.contains("active")) {
+                        li.children[0].children["progress-bar-circle-1"].classList.remove("active")
+                       }
+                    }
 
+                    if (li.children[0].children["progress-bar-circle-2"]) {
+                        li.children[0].children["progress-bar-circle-2"].classList.add("active")
+                    }
+                    if (li.children[0].children["progress-bar-circle-3"]) {
+                        if (
+                            li.children[0].children["progress-bar-circle-3"].classList.contains("active")
+                        ) {
+                            li.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["progress-bar-circle-1"]){
+                        if (
+                            li.children[0].children["progress-bar-circle-1"].classList.contains("active")
+                        ) {
+                            li.children[0].children["progress-bar-circle-1"].classList.remove("active")
+                        }
+                    }
+                    if (li.children[0].children["progress-bar-circle-2"]) {
+                            if (
+                            li.children[0].children["progress-bar-circle-2"].classList.contains("active")
+                        ) {
+                            li.children[0].children["progress-bar-circle-2"].classList.remove("active")
+                        }
+                    }
+                    if (li.children[0].children["progress-bar-circle-3"]) {
+                        li.children[0].children["progress-bar-circle-3"].classList.add("active")
+                    }
+                }
+
+            })
+        }
+    }
 
 }