From 85ed21c2b91a568e9a361e04f24553dbb9afa92f Mon Sep 17 00:00:00 2001
From: MateusLopes <mateus20.lopes02@gmail.com>
Date: Sun, 11 Dec 2022 00:27:48 -0300
Subject: [PATCH] feat(header): add barra de progresso

---
 checkout/src/arquivos/js/components/Header.js | 50 ++++++++++++++++---
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 6744524..8f35103 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -8,14 +8,52 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.progressBarHTML();
+        setTimeout(this.changeTexts(), 900);
+
+        // this.progressBarProgress();
     }
 
     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.header = await waitElement(".headerCheckout");
+        this.progressBar = await waitElement("#progressBar");
+        this.chooseProductsBtn = await waitElement("#cart-choose-products");
+    }
+
+    progressBarHTML() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+                <ul>
+                    <li>
+                        <div class="container-li">
+                            <p class="progress-bar-text">Meu Carrinho</p>
+                            <p id="progress-bar-circle-1" class="progress-bar-circle"></p>
+                            <p class="progress-bar-line-1"></p>
+                        </div>
+                    </li>
+                    <li class="center">
+                        <div class="container-li">
+                            <p class="progress-bar-text">Dados Pessoais</p>
+                            <p id="progress-bar-circle-2" class="progress-bar-circle"></p>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="container-li">
+                            <p class="progress-bar-text">Pagamento</p>
+                            <p id="progress-bar-circle-3" class="progress-bar-circle"></p>
+                            <p class="progress-bar-line-2"></p>
+                        </div>
+                    </li>
+                </ul>
+            `;
+        }
+        if (this.progressBar && window.innerWidth <= 1024) {
+            this.progressBar.innerHTML = ``;
+        }
+    }
+
+    changeTexts() {
+        this.chooseProductsBtn.innerText = "Continuar comprando";
+        // console.log(this.this.chooseProductsBtn.innerText);
     }
 }