feat: adiciona progress bar js

checkout/src/arquivos/js/components/Header.js

@@ -1,5 +1,6 @@
 // import waitForEl from "../helpers/waitForEl";
 import { waitElement } from "m3-utils";
+import HashRouter from "../helpers/HashRouter";
 
 export default class Header {
     constructor() {
@@ -13,6 +14,7 @@ export default class Header {
     }
 
     async selectors() {
+        window.addEventListener("hashchange", this.addProgressBar.bind(this));
         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
@@ -26,15 +28,23 @@ export default class Header {
             this.progressBar.innerHTML = `<p> progress </p>`;
             console.log("dasdsdas");
         } */
+        const url = window.location.hash;
         progressBar.innerHTML = `
 
-        <ul class="line-progress-bar">
-        <li>Meu Carrinho</li>
-        <li>Dados Pessoais</li>
-        <li>Pagamento</li>
+        <ul class="progress-bar-container">
+        <li class="progress-bar-text">Meu Carrinho<span class="circle-li ${
+            url === "#/cart" ? "circle-li--full" : ""
+        }"> </span></li>
+        <li class="progress-bar-text">Dados Pessoais<span class="circle-li ${
+            url === "#/shipping" || url === "#/email" || url === "#/profile"
+                ? "circle-li--full"
+                : ""
+        }"> </span></li>
+        <li class="progress-bar-text">Pagamento<span class="circle-li ${
+            url === "#/payment" ? "circle-li--full" : ""
+        }"> </span></li>
          </ul>
 
         `;
-        headerCheckout.innerHTML = `<div>dsadsdsdasd </div>`;
     }
 }

checkout/src/arquivos/js/helpers/HashRouter.js

@@ -10,6 +10,7 @@ export default class HashRouter {
     }
 
     hashChange(e) {
+        console.log("mudou");
         const from = new URL(e.oldURL).hash || "/";
         const to = new URL(e.newURL).hash || "/";
 

checkout/src/arquivos/sass/partials/_header.scss

@@ -62,34 +62,49 @@
 }
 
 .progress-bar {
-    width: 346px;
+    width: 439px;
 }
 
-.line-progress-bar li {
-    /* position: relative;
-    margin: 0px;
+.progress-bar-container {
     display: flex;
-    justify-content: space-between;
-    list-style-type: none; */
-    list-style-type: none;
-    float: left;
-    width: 33.33%;
     position: relative;
-    text-align: center;
+    height: fit-content;
+    li {
+        list-style-type: none;
+        width: 33.33%;
+        position: relative;
+        text-align: center;
+    }
 }
 
-.line-progress-bar li::before {
+.progress-bar-container::after {
+    top: 36px;
+    position: absolute;
+    display: block;
     content: "";
+    width: 70%;
+    height: 1px;
+    background-color: black;
+    z-index: -1;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.circle-li {
     width: 12px;
     height: 12px;
     border: 1px solid black;
     display: block;
     text-align: center;
-    margin: 0 auto 10px;
+    margin: 9px auto 0px;
     border-radius: 100%;
     background-color: white;
 }
 
+.circle-li--full {
+    background-color: black;
+}
+
 .line-progress-bar li::after {
     content: "";
     position: absolute;
@@ -117,3 +132,23 @@
 .headerCheckout__safeBuy {
     margin-right: 131px;
 }
+.headerCheckout__safeBuy img {
+    margin-bottom: 2px;
+}
+
+.empty-cart-title {
+    text-transform: uppercase;
+    font-size: 50px;
+    line-height: 32px;
+}
+
+.empty-cart-message {
+    display: none;
+}
+
+.progress-bar-text {
+    font-family: "Tenor Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+}