From 7a768f242fdaa1ee119cd48d2f9af5ead90c82b3 Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Thu, 15 Dec 2022 12:18:08 -0300
Subject: [PATCH] feat(header): Aplica o script na barra de progresso

---
 checkout/src/arquivos/js/components/Header.js | 112 ++++++++++++++++--
 1 file changed, 103 insertions(+), 9 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index fb05e00..c111f2d 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -8,22 +8,16 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        //console.log(this.item);
         this.progressBarHTML();
+        await this.progressBarChange();
     }
 
     async selectors() {
-        /*this.item = await waitElement("#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.progressBar = await waitElement("#progressBar");
     }
 
     progressBarHTML() {
-        if(this.progressBar && window.innerWidth >1024) {
+        if (this.progressBar && window.innerWidth > 1024) {
             this.progressBar.innerHTML = `
             <ul>
                 <li>
@@ -56,8 +50,108 @@ export default class Header {
                 </li>
             </ul>
             `;
-        } else if(this.progressBar && window.innerWidth <= 1024) {
+        } else if (this.progressBar && window.innerWidth <= 1024) {
             this.progressBar.innerHTML = "";
         }
     }
+
+    async progressBarChange() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const progressBarList = document.querySelectorAll("#progressBar ul li");
+
+            progressBarList.forEach((li) => {
+                const progressBarCircle1 = li.children[0].children[0].children["progress-bar-circle-1"];
+                const progressBarCircle2 = li.children[0].children[0].children["progress-bar-circle-2"];
+                const progressBarCircle3 = li.children[0].children[0].children["progress-bar-circle-3"];
+
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+
+                    if (progressBarCircle1) {
+                        progressBarCircle1.classList.add("active");
+                    }
+
+                    if (progressBarCircle2) {
+                        progressBarCircle2.classList.remove("active");
+                    }
+
+                    if (progressBarCircle3) {
+                        progressBarCircle3.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 (progressBarCircle1) {
+                        progressBarCircle1.classList.remove("active");
+                    }
+
+                    if (progressBarCircle3) {
+                        progressBarCircle3.classList.remove("active");
+                    }
+
+                    if (progressBarCircle2) {
+                        progressBarCircle2.classList.add("active");
+                    }
+
+                } else if (window.location.href === "https://m3academy.myvtex.com/checkout/#/payment") {
+
+                    if (progressBarCircle1) {
+                        progressBarCircle1.classList.remove("active");
+                    }
+
+                    if (progressBarCircle2) {
+                        progressBarCircle2.classList.remove("active");
+                    }
+
+                    if (progressBarCircle3) {
+                        progressBarCircle3.classList.add("active");
+                    }
+                }
+
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+
+                        if (progressBarCircle1) {
+                            progressBarCircle1.classList.add("active");
+                        }
+
+                        if (progressBarCircle2) {
+                            progressBarCircle2.classList.remove("active");
+                        }
+
+                        if (progressBarCircle3) {
+                            progressBarCircle3.classList.remove("active");
+                        }
+
+                    } else if (window.location.hash == "#/email" || window.location.hash == "#/profile" || window.location.hash == "#/shipping") {
+
+                        if (progressBarCircle1) {
+                            progressBarCircle1.classList.remove("active");
+                        }
+
+                        if (progressBarCircle3) {
+                            progressBarCircle3.classList.remove("active");
+                        }
+
+                        if (progressBarCircle2) {
+                            progressBarCircle2.classList.add("active");
+                        }
+
+                    } else if (window.location.hash == "#/payment") {
+
+                        if (progressBarCircle1) {
+                            progressBarCircle1.classList.remove("active");
+                        }
+
+                        if (progressBarCircle2) {
+                            progressBarCircle2.classList.remove("active");
+                        }
+
+                        if (progressBarCircle3) {
+                            progressBarCircle3.classList.add("active");
+                        }
+                    }
+                });
+            });
+        }
+    }
 }