From 35e1854b4d5eba8ec5584e86cfc90364e6b7b4b2 Mon Sep 17 00:00:00 2001
From: Emmanuel Vitor <emmanuelvitor.ti@gmail.com>
Date: Tue, 20 Dec 2022 16:20:00 -0300
Subject: [PATCH] feat: cria estrutura em HTML do progress bar

---
 checkout/src/arquivos/js/components/Header.js | 246 +++++++++++++++++-
 1 file changed, 245 insertions(+), 1 deletion(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 6744524..6517104 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -9,13 +9,257 @@ export default class Header {
     async init() {
         await this.selectors();
         console.log(this.item);
+        this.createProgressBar();
+        await this.progressBarProgress();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.item = await waitElement("#progressBar", {
             //#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.header = await waitElement(".headerCheckout");
+        this.progressBar = await waitElement("#progressBar");
+    }
+    createProgressBar() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+                <ul>
+                    <li>
+                        <div class="containerLi">
+                            <div>
+                                <p class="progress-bar-text meu-carrinho " >Meu carrinho</p>
+                                <p id="progress-bar-circle-1" class="progress-bar-circle-1"></p>
+                                <p class="progress-bar-line-1"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="central">
+                        <div class="containerLi">
+                            <div>
+                                <p class="progress-bar-text dados-pessoais " >Dados Pessoais</p>
+                                <p id="progress-bar-circle-2" class="progress-bar-circle-2"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="containerLi">
+                            <div>
+                                <p class="progress-bar-text pagamento" >Pagamento</p>
+                                <p id="progress-bar-circle-3" class="progress-bar-circle-3"></p>
+                                <p class="progress-bar-line-2"></p>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            `;
+        }
+        if (this.progressBar && window.innerWidth <= 1024) {
+            this.progressBar.innerHTML = ``;
+        }
+    }
+    async progressBarProgress() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const progressBarList = document.querySelectorAll("#progressBar ul li");
+            progressBarList.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"
+                        );
+                        console.log("ativou 1");
+                    }
+                    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");
+                            console.log("removeu 2");
+                        }
+                    }
+                    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");
+                            console.log("removeu 3");
+                        }
+                    }
+                } 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");
+                            }
+                        }
+                    }
+                } 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")
+                        ) {
+                            console.log("remove 1");
+                            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"
+                        );
+                    }
+                }
+                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");
+                            }
+                        }
+                    } 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");
+                            }
+
+                        }
+                    } 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")
+                            ) {
+                                console.log("remove 1 hash");
+                                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");
+                        }
+                    }
+                });
+            });
+        }
     }
 }
+