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

@@ -4,6 +4,8 @@ import { waitElement } from "m3-utils";
 export default class Header {
     constructor() {
         this.init();
+        this.progressBar();
+        this.progressUpdate();
     }
 
     async init() {
@@ -12,10 +14,63 @@ export default class Header {
     }
 
     async selectors() {
+        this.progressBar = await waitElement(".progress-bar");
         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
         });
     }
+
+    progressBar() {
+        const progressBar = document.querySelector(".progress-bar");
+
+        progressBar.innerHTML = "";
+        let progressBarHTML = `
+    <div class="progresscontainer">
+        <div class="progresswrapper">
+            <div class="progress" id="progress"></div>
+            <div class="progresstext"><span>Meu Carrinho</span><div class="progresscircle1" ></div></div>
+            <div class="progresstext"><span>Dados Pessoais</span><div class="progresscircle2" ></div></div>
+            <div class="progresstext"><span>Pagamento</span><div class="progresscircle3"></div></div>
+        </div>
+        </div>`;
+
+        $(".progress-bar").prepend(progressBarHTML);
+    }
+
+    progressUpdate() {
+        this.caseUpdate();
+
+        window.addEventListener("hashchange", () => {
+            this.caseUpdate();
+        });
+    }
+
+    caseUpdate() {
+        const cart = document.querySelector(".progresscircle1");
+        const personalData = document.querySelector(".progresscircle2");
+        const payment = document.querySelector(".progresscircle3");
+
+        switch (location.hash) {
+            case "#/cart":
+                cart.classList.add("progressActive");
+                personalData.classList.remove("progressActive");
+                break;
+
+            case "#/email":
+            case "#/profile":
+            case "#/shipping":
+                personalData.classList.add("progressActive");
+                cart.classList.remove("progressActive");
+                payment.classList.remove("progressActive");
+                break;
+
+            case "#/payment":
+                payment.classList.add("progressActive");
+                personalData.classList.remove("progressActive");
+                cart.classList.remove("progressActive");
+                break;
+        }
+    }
 }

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

@@ -1,32 +1,127 @@
 /* _header.scss */
 .headerCheckout {
-    .container {
     width: auto !important;
+    border-bottom: 1px solid $color-black;
+    margin: 0;
+
+    @media screen and (min-width: 375px) and (max-width: 1024px) {
+        padding: 16px 16px;
+    }
+    .container {
+        width: 79.53%;
+
+        @media screen and (min-width: 375px) and (max-width: 1024px) {
+            width: 96.875%;
+        }
     }
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
+        padding: 29px 0;
+
+        .progress-bar {
+            @media screen and (max-width: 1024px) {
+                display: none;
+            }
+            .progresswrapper::before {
+                content: "";
+                background: $color-black-1000;
+                position: absolute;
+                top: 31px;
+                left: 14px;
+                height: 1px;
+                width: 83%;
+                z-index: -1;
+                transform: translateY(-50%);
+            }
+
+            .progresswrapper {
+                display: flex;
+                justify-content: space-between;
+                position: relative;
+                width: 439px;
+
+                .progresstext {
+                    position: relative;
+                }
+
+                span {
+                    display: block;
+                    margin-bottom: 9px;
+                    font-size: 12px;
+                    line-height: 14px;
+                    font-family: $font-family-secundary;
+                    transform: translateX(-40%);
+                }
+            }
+
+            .progress {
+                background: $color-black;
+                position: absolute;
+                top: 50%;
+                left: 0;
+                transform: translateY(-50%);
+                height: 4px;
+                width: 0%;
+                z-index: -1;
+                transition: 0.4s ease;
+            }
+
+            .progresstext {
+                position: relative;
+
+                .progresscircle1,
+                .progresscircle2,
+                .progresscircle3 {
+                    background: $color-white;
+                    color: $color-black;
+                    border-radius: 50%;
+                    height: 12px;
+                    width: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border: 1px solid $color-black;
+                    transition: 0.4s ease;
+                }
+
+                .progressActive {
+                    background: $color-black-1000;
+                }
+            }
+        }
     }
 
     &__logo {
         img {
             height: 52px;
             width: auto;
+
+            @media screen and (min-width: 375px) and (max-width: 1024px) {
+                height: 33px;
+            }
         }
     }
 
     &__safeBuy {
+        display: flex;
+        gap: 8px;
+
+        img {
+            max-width: 12px;
+            height: 15px;
+        }
         span {
             align-items: center;
             display: flex;
             text-transform: uppercase;
             font-family: $font-family;
             font-style: normal;
-            font-weight: normal;
+            font-weight: 400;
             font-size: 12px;
-            line-height: 14px;
+            line-height: 16px;
-            color: $color-gray;
+            color: $color-black;
         }
 
         i {