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

@@ -1,6 +1,116 @@
 // import waitForEl from "../helpers/waitForEl";
 import { waitElement } from "m3-utils";
 
+/**
+ * @param {Object} options
+ * @param {HTMLAllElement} target
+ * @return {Object}
+ */
+
+function OnProgress(target) {
+    if (!target) {
+        return;
+    }
+
+    const innerElement = () => {
+        target.innerHTML = `<ul class="progress-list">
+    <li class="progress-item progress-item--left">
+
+        <div class="progress-container">
+            <div class="progress-content">
+                <p>Meu Carrinho</p>
+                <span class="progress-bullet"></span>
+                <span class="progress-line"></span>
+            </div>
+        </div>
+    </li>
+    <li class="progress-item progress-item--center">
+        <div class="progress-container">
+            <div class="progress-content">
+                <p>Dados Pessoais</p>
+                <span class="progress-bullet"></span>
+                <span class="progress-line"></span>
+            </div>
+        </div>
+    </li>
+    <li class="progress-item progress-item--right">
+        <div class="progress-container">
+            <div class="progress-content">
+                <p>Pagamento</p>
+                <span class="progress-bullet"></span>
+                <span class="progress-line"></span>
+            </div>
+        </div>
+    </li>
+</ul>`;
+    };
+
+    const verifyCurrentRoute = () => {
+        let bullets = target.querySelectorAll(".progress-bullet");
+
+        bullets.forEach((bullet) => {
+            if (window.location.href.endsWith("#/cart")) {
+                bullets[0].classList.add("active");
+            }
+
+            if (
+                window.location.href.endsWith("#/email") ||
+                window.location.href.endsWith("#/shipping") ||
+                window.location.href.endsWith("#/profile")
+            ) {
+                bullets[1].classList.add("active");
+            }
+
+            if (window.location.href.endsWith("#/payment")) {
+                bullets[2].classList.add("active");
+            }
+
+            window.addEventListener("hashchange", () => {
+                if (window.location.href.endsWith("#/cart")) {
+                    bullets[0].classList.add("active");
+
+                    if (bullet != bullets[0]) {
+                        bullet.classList.remove("active");
+                    }
+                }
+
+                if (
+                    window.location.href.endsWith("#/email") ||
+                    window.location.href.endsWith("#/shipping") ||
+                    window.location.href.endsWith("#/profile")
+                ) {
+                    bullets[1].classList.add("active");
+                    if (bullet != bullets[1]) {
+                        bullet.classList.remove("active");
+                    }
+                }
+
+                if (window.location.href.endsWith("#/payment")) {
+                    bullets[2].classList.add("active");
+                    if (bullet != bullets[2]) {
+                        bullet.classList.remove("active");
+                    }
+                }
+            });
+        });
+    };
+
+    const init = () => {
+        innerElement();
+        verifyCurrentRoute();
+    };
+
+    const remove = () => {
+        target.innerHTML = "";
+    };
+
+    return {
+        ref: target,
+        init,
+        remove,
+    };
+}
+
 export default class Header {
     constructor() {
         this.init();
@@ -8,14 +118,19 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.innerToProgressBar();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.progressBar = await waitElement("#progressBar", {
-            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
+            timeout: 5000,
-            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
+            interval: 1000,
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
         });
     }
+
+    innerToProgressBar() {
+        let progress = OnProgress(this.progressBar);
+
+        progress.init();
+    }
 }

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

@@ -108,3 +108,89 @@
         }
     }
 }
+
+.headerCheckout {
+    .progress-bar {
+        width: 439px;
+
+        .progress-list {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 0;
+        }
+
+        .progress-item {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 12px;
+        }
+
+        .progress-content,
+        .progress-container {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .progress-container {
+            position: relative;
+            justify-content: center;
+            width: 100%;
+        }
+
+        .progress-item {
+            &--left,
+            &--right {
+                width: 39.9183%;
+
+                .progress-line {
+                    position: absolute;
+                    bottom: 6px;
+                    width: 100%;
+                    height: 1px;
+                    border-bottom: 1px solid #000;
+                }
+            }
+
+            &--left {
+                .progress-container {
+                    align-items: flex-start;
+                }
+
+                .progress-line {
+                    left: 75%;
+                    transform: translateX(-50%);
+                }
+            }
+
+            &--right {
+                .progress-container {
+                    align-items: flex-end;
+                }
+
+                .progress-line {
+                    left: 29%;
+                    transform: translateX(-50%);
+                }
+            }
+        }
+
+        .progress-bullet {
+            width: 12px;
+            height: 12px;
+            background-color: $clr-common-white;
+            position: relative;
+            border: 1px solid $clr-common-black;
+            z-index: 10;
+            border-radius: 100%;
+
+            &.active {
+                background-color: $clr-common-black;
+            }
+        }
+    }
+}

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -5,7 +5,7 @@ $font-family-100: "Open Sans", sans-serif;
 $font-family-200: "Tenor Sans", sans-serif;
 
 /* Colors */
-
+$clr-common-black: #000;
 $clr-common-white: #fff;
 
 $clr-gray-600: #292929;