From 5eca10c67959eaa61cc111740c23b31a77911e60 Mon Sep 17 00:00:00 2001
From: WillSimao <williamsimaocavalcante75@gmail.com>
Date: Wed, 14 Dec 2022 22:18:16 -0300
Subject: [PATCH] feat(ProgressBar): Finaliza Js

---
 checkout/src/arquivos/js/components/Header.js | 128 +++++++++++++++++-
 1 file changed, 123 insertions(+), 5 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index a3034ed..8d34599 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -4,41 +4,159 @@ import { waitElement } from "m3-utils";
 export default class Header {
     constructor() {
         this.init();
+        this.progressBarHTML();
     }
 
     async init() {
         await this.selectors();
         this.progressBarHTML();
+        await this.progressBarActive();
     }
 
+
     async selectors() {
         this.header - await waitElement('.headerCheckout');
         this.progressBar = await waitElement('#progressBar');
     }
 
     progressBarHTML () {
-        if(window.screen.width > 1024) {
+        if(this.progressBar || window.screen.width > 1024) {
             this.progressBar.innerHTML = `
             <ul class="container-ul">
                     <li class="container-li">
                         <p class="text">Meu carrinho</p>
-                        <p class="circle-1"></p>
+                        <p class="circle-1" id="circle-1"></p>
                         <p class="linha-1"></p>
                     </li>
                     <li class="container-li">
                         <p class="text">Dados Pessoais</p>
-                        <p class="circle-2"></p>
+                        <p class="circle-2" id="circle-2"></p>
                         <p class="linha-2"></p>
                     </li>
                     <li class="container-li">
                         <p class="text">Pagamento</p>
-                        <p class="circle-3"></p>
+                        <p class="circle-3" id="circle-3"></p>
                     </li>
             </ul>`;
             }
-            if (window.screen.width <= 1024) {
+            if (this.progressBar && window.screen.width <= 1024) {
                 this.progressBar.innerHTML = ``;
             }
         };
+
+        async progressBarActive () {
+            if (this.progressBar && window.screen.width > 1024) {
+                const progressBarLi = document.querySelectorAll('#progressBar ul li')
+                    progressBarLi.forEach((li) => {
+                        if(window.location.href  == "https://m3academy.myvtex.com/checkout/#/cart") {
+                            if(li.children['circle-1']) {
+                                li.children['circle-1'].classList.add('active')
+                            }
+
+                            if(li.children['circle-2']) {
+                                if(li.children['circle-2'].classList.contains('active')) {
+                                    li.children['circle-2'].classList.remove('active')
+                                }
+                            }
+                            if(li.children['circle-3']) {
+                                if (li.children['circle-3'].classList.contains('active')) {
+                                    li.children['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['circle-1']) {
+                                if(li.children['circle-1'].classList.contains('active')) {
+                                    li.children['circle-1'].classList.remove('active')
+                                }
+                            };
+
+                            if(li.children['circle-2']) {
+                                li.children['circle-1'].classList.add('active')
+                            };
+
+                            if(li.children['circle-3']) {
+                                if(li.children['circle-3'].classList.contains('active')) {
+                                    li.children['circle-1'].classList.remove('active')
+                                };
+                            }
+                        }
+
+                        else if (window.location.href  == "https://m3academy.myvtex.com/checkout/#/payment") {
+
+                            if(li.children['circle-1']) {
+                                if(li.children['circle-1'].classList.contains('active')) {
+                                    li.children['circle-1'].classList.remove('active')
+                                }
+                            }
+
+                            if(li.children['circle-2']) {
+                                if(li.children['circle-2'].classList.contains('active')) {
+                                    li.children['circle-2'].classList.remove('active')
+                                }
+                            }
+
+                            if(li.children['circle-3']) {
+                                li.children['circle-3'].classList.add('active')
+                            }
+
+                        }
+
+                        window.addEventListener('hashchange', () => {
+                            if(window.location.hash  == '#/cart') {
+                                if(li.children['circle-1']) {
+                                    li.children['circle-1'].classList.add('active')
+                                }
+                                if(li.children['circle-2']) {
+                                    if (li.children['circle-2'].classList.contains('active'))  {
+                                        li.children['circle-2'].classList.remove('active')
+                                    }
+                                }
+                                if(li.children['circle-3']) {
+                                    if(li.children['circle-3'].classList.contains('active')) {
+                                        li.children['circle-3'].classList.remove('active')
+                                    }
+                                }
+                            }
+
+                           else if(window.location.hash == '#/email' || window.location.hash == '#/profile' || window.location.hash == '#/shipping') {
+                                if(li.children['circle-1']) {
+                                    if(li.children['circle-1'].classList.contains('active')) {
+                                        li.children['circle-1'].classList.remove('active')
+                                    }
+                                }
+                                if(li.children['circle-2']){
+                                    li.children['circle-2'].classList.add('active')
+                                }
+                                if(li.children['circle-3']) {
+                                    if(li.children['circle-3'].classList.contains('active')) {
+                                        li.children['circle-3'].classList.remove('active')
+                                    }
+                                }
+                            }
+                            else if(window.location.hash == '#/payment') {
+                                if(li.children['circle-1']) {
+                                    if(li.children['circle-1'].classList.contains('active')) {
+                                        li.children['circle-1'].classList.remove('active')
+                                    }
+                                }
+                                if(li.children['circle-2']) {
+                                    if(li.children['circle-2'].classList.contains('active')){
+                                        li.children['circle-2'].classList.remove('active')
+                                    }
+                                }
+                                if(li.children['circle-3']) {
+                                    li.children['circle-3'].classList.add('active')
+                                }
+                            }
+                        })
+
+                    });
+            }
+        }
+
     };