feat: funcionalidade do progress bar

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

@@ -4,31 +4,131 @@ import { waitElement } from "m3-utils";
 export default class Header {
     constructor() {
         this.init();
-        this.ProgresseBar.bind(this);
     }
 
     async init() {
         await this.selectors();
-        this.ProgresseBar();
+        this.ProgresseBarHTML();
+        this.progresseBarUrl();
     }
 
     async selectors() {
         this.barHTML = await waitElement(".progress-bar");
     }
 
-    ProgresseBar() {
+    ProgresseBarHTML() {
+        if(window.innerWidth > 1024) {
             this.barHTML.innerHTML = `
-        <ul>
+            <ul class="conteir-ul">
                 <li class="conteiner-progressBar">
-                <div class="conteinerItems"><p class="textBar">Meu Carrinho</p><div class="circle"></div></div>
+                    <div class="conteinerRelative">
+                        <div class="conteinerItems">
+                            <p class="textBar">Meu Carrinho</p>
+                            <div id="cartCircle1" class="circle activeCircle"></div>
+                            <div class="bar"></div>
+                        </div>
+                    </div>
                 </li>
-            <li class="conteiner-progressBar">
+                <li class="conteiner-progressBar conteiner-progressBar-center">
-                <div class="conteinerItems"><p class="textBar">Meu Carrinho</p><div class="circle"></div></div>
+                    <div class="conteinerRelative">
+                        <div class="conteinerItems">
+                            <p class="textBar">Dados Pessoais</p>
+                            <div id="cartCircle2" class="circle"></div>
+                        </div>
+                    </div>
                 </li>
-            <li class="conteiner-progressBar">
+                <li class="conteiner-progressBar conteiner-progressBar-last">
-                <div class="conteinerItems"><p class="textBar">Meu Carrinho</p><div class="circle"></div></div>
+                    <div class="conteinerRelative conteiner-Relative-last">
+                        <div class="conteinerItems">
+                            <p class="textBar">Finalização</p>
+                            <div id="cartCircle3" class="circle"></div>
+                            <div class="bar barLast"></div>
+                        </div>
+                    </div>
                 </li>
             </ul>
             `;
+        } else{
+            this.barHTML.innerHTML = ``;
+        };
+    };
+
+    progresseBarUrl() {
+        this.Circle1 = document.getElementById("cartCircle1");
+        this.Circle2 = document.getElementById("cartCircle2");
+        this.Circle3 = document.getElementById("cartCircle3");
+
+        window.addEventListener("load", () => {
+            if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/cart' && localStorage.getItem('cart') === '1')
+            {
+                this.Circle1.classList.add('activeCircle');
+                this.Circle2.classList.remove("activeCircle")
+                this.Circle3.classList.remove("activeCircle")
+                console.log('1')
             }
-}
+            else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/email' && localStorage.getItem('profile') === '2'
+            || window.location.href === 'https://m3academy.myvtex.com/checkout/#/profile' && localStorage.getItem('profile') === '2'
+            || window.location.href === 'https://m3academy.myvtex.com/checkout/#/shipping' && localStorage.getItem('profile') === '2')
+            {
+                this.Circle1.classList.remove("activeCircle")
+                this.Circle2.classList.add("activeCircle");
+                this.Circle3.classList.remove("activeCircle")
+                console.log('2')
+            } else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/payment' && localStorage.getItem('payment') === '3'){
+                this.Circle1.classList.remove("activeCircle")
+                this.Circle2.classList.remove("activeCircle")
+                this.Circle3.classList.add("activeCircle");
+                console.log('3')
+            }
+        })
+
+
+        window.addEventListener("hashchange", (props) => {
+            const currentState = props.currentTarget.location.hash.split('/');
+
+            switch(currentState[1]) {
+                case 'cart':
+                    this.Circle1.classList.add("activeCircle");
+                    this.Circle2.classList.remove("activeCircle")
+                    this.Circle3.classList.remove("activeCircle")
+                    localStorage.setItem('cart', 1);
+                break;
+                case 'email':
+                case 'profile':
+                case 'shipping':
+                    this.Circle1.classList.remove("activeCircle")
+                    this.Circle2.classList.add("activeCircle");
+                    this.Circle3.classList.remove("activeCircle")
+                    localStorage.setItem('profile', 2);
+                break;
+                case 'payment':
+                    this.Circle1.classList.remove("activeCircle")
+                    this.Circle2.classList.remove("activeCircle")
+                    this.Circle3.classList.add("activeCircle");
+                    localStorage.setItem('payment', 3);
+                break;
+            };
+        });
+    };
+    /*progresseBarload(){
+        window.addEventListener('load', () => {
+            if(localStorage.getItem('cart') === '1' && this.currentState[1] === 'cart'){
+                Circle1.classList.add('activeCircle');
+                console.log('test 1')
+            }
+                switch(localStorage.getItem('cart') || localStorage.getItem('profile') || localStorage.getItem('payment')) {
+                    case '1' :
+                        document.getElementById('cartCircle1').classList.add('activeCircle');
+                        console.log('test 1')
+                    break;
+                    case '2' :
+                        document.getElementById('cartCircle2').classList.add('activeCircle');
+                        console.log('test 2')
+                    break;
+                    case '3':
+                        document.getElementById('cartCircle3').classList.add('activeCircle');
+                    break;
+                }
+        });
+    }*/
+};

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

@@ -1,23 +1,100 @@
 /* _header.scss */
 .headerCheckout {
     border-bottom: 1px solid #000;
-    .container {
+
-        width: auto !important;
+
-    }
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
-        margin: 29px 0;
+        padding: 29px 0;
+
+        .progress-bar{
+            width: 43.1237721021611%;
+            height: 35px;
+
+            .conteir-ul{
+                display: flex;
+                margin: 0;
+                width: 100%;
+                height: 100%;
+
+                .conteiner-progressBar{
+                    display: flex;
+                    width: 39.41%;
+                    height: 100%;
+                    align-items: center;
+
+                    .conteinerRelative {
+                        display: flex;
+                        position: relative;
+                        width: 100%;
+
+                        .conteinerItems {
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+
+                            .textBar{
+                                font-family: 'Tenor Sans';
+                                font-size: 12px;
+                                line-height: 14px;
+                                margin-bottom: 9px;
+                            };
+                            .circle{
+                                width: 12px;
+                                height: 12px;
+                                border: 1px solid black;
+                                border-radius: 50%;
+
+                            };
+                            .activeCircle {
+                                width: 12px;
+                                height: 12px;
+                                // border: 1px solid black;
+                                background-color: black;
+                                border-radius: 50%;
+                            };
+                            .bar{
+                                position: absolute;
+                                width: 100%;
+                                border-top: 1px solid black;
+                                margin-bottom: 8px;
+                                left: 25%;
+                                bottom: -7%;
+                            };
+                            .barLast{
+                                left: -22%;
+                            }
+                        };
+
+                        .conteinerItems-last{
+                            align-content: flex-end
+                        }
+                    };
+                    .conteiner-Relative-last{
+                        justify-content: flex-end;
+                    }
+                };
+
+                .conteiner-progressBar-center{
+                    width: auto;
+                    margin-left: 3.49px
+                }
+            };
+        };
+
     };
 
     &__logo {
         img {
             height: 37.14px;
-        }
+        };
-    }
+    };
 
     &__safeBuy {
+        display: flex;
+
         span {
             align-items: center;
             display: flex;
@@ -26,13 +103,18 @@
             font-style: normal;
             font-weight: normal;
             font-size: 12px;
-            line-height: 14px;
+            line-height: 16.34px;
             color: $color-gray;
-        }
+        };
 
         i {
             margin-right: 8px;
-        }
+        };
-    }
 
-}
+        img {
+            width: 12px;
+            height: 15px;
+            margin-right: 8px;
+        };
+    };
+};