diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index d2fe2db..35a3bac 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -46,188 +46,63 @@ export default class Header { const progressBarLista = document.querySelectorAll("#progressBar ul li"); progressBarLista.forEach((li) => { if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - li.children[0].children[0].children["progress-bar-circle-1"].classList.add( - "active" - ); - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 1); } 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[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - li.children[0].children[0].children["progress-bar-circle-2"].classList.add( - "active" - ); - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 2); } else if ( window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" ) { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - li.children[0].children[0].children["progress-bar-circle-3"].classList.add( - "active" - ); - } + this.trataPonto(li, 3); } window.addEventListener("hashchange", () => { if (window.location.hash == "#/cart") { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.add("active"); - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 1); } else if ( window.location.hash == "#/email" || window.location.hash == "#/profile" || window.location.hash == "#/shipping" ) { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.add("active"); - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 2); } else if (window.location.hash == "#/payment") { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.add("active"); - } + this.trataPonto(li, 3); } }); }); } } + + marcarPonto(li, local) { + if (li.children[0].children[0].children["progress-bar-circle-" + local]) { + li.children[0].children[0].children["progress-bar-circle-" + local].classList.add( + "active" + ); + } + } + + removerPonto(li, local) { + if (li.children[0].children[0].children["progress-bar-circle-" + local]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-" + local + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-" + local + ].classList.remove("active"); + } + } + } + + trataPonto(li, local) { + const indice = [1, 2, 3]; + let indicesPontoBranco = indice.splice(local - 1, 1); + this.marcarPonto(li, local); + for (const i of indice) { + this.removerPonto(li, i); + } + } }