Merge pull request 'feature/header' (#2) from feature/header into development

Reviewed-on: #2

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

@@ -8,14 +8,174 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.events();
+        this.createProgressBar();
+        await this.progressBarProgress();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.item = await waitElement("#progressBar", {
             //#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");
+    }
+    events() {
+        addEventListener("resize", () => {
+            this.createProgressBar();
+            this.progressBarProgress();
+        });
+    }
+    createProgressBar() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+                <ul class="">
+                    <li>
+                        <div class="containerLi">
+                            <div>
+                                <p class="progress-bar-text">Meu Carrinho</p>
+                                <p id="progress-bar-circle-1" class="progress-bar-circle-1"></p>
+                                <p class="progress-bar-line-1"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="central">
+                        <div class="containerLi">
+                            <div>
+                                <p class="progress-bar-text">Dados Pessoais</p>
+                                <p id="progress-bar-circle-2" class="progress-bar-circle-2"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="containerLi">
+                            <div>
+                                <p class="progress-bar-text">Pagamento</p>
+                                <p id="progress-bar-circle-3" class="progress-bar-circle-3"></p>
+                                <p class="progress-bar-line-2"></p>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            `;
+        }
+        if (this.progressBar && window.innerWidth <= 1024) {
+            this.progressBar.innerHTML = ``;
+        }
+    }
+    async progressBarProgress() {
+        this.circle1 = await waitElement(".progress-bar-circle-1");
+        this.circle2 = await waitElement(".progress-bar-circle-2");
+        this.circle3 = await waitElement(".progress-bar-circle-3");
+        if (this.progressBar && window.innerWidth > 1024) {
+            const progressBarList = document.querySelectorAll("#progressBar ul li");
+            progressBarList.forEach((li) => {
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    if (this.circle1) {
+                        this.circle1.classList.add("active");
+                    }
+                    if (this.circle2) {
+                        if (this.circle2.classList.contains("active")) {
+                            this.circle2.classList.remove("active");
+                        }
+                    }
+                    if (this.circle3) {
+                        if (this.circle3.classList.contains("active")) {
+                            this.circle3.classList.remove("active");
+                        }
+                    }
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping"
+                ) {
+                    if (this.circle1) {
+                        if (this.circle1.classList.contains("active")) {
+                            this.circle1.classList.remove("active");
+                        }
+                        console.log("email shipping");
+                        console.log(this.circle1);
+                        if (this.circle2) {
+                            this.circle2.classList.add("active");
+                            console.log("teste dados");
+                        }
+                        console.log(this.circle2);
+                        console.log(this.circle3);
+                        if (this.circle3) {
+                            if (this.circle3.classList.contains("active")) {
+                                this.circle3.classList.remove("active");
+                            }
+                        }
+                    }
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    if (this.circle1) {
+                        if (this.circle1.classList.contains("active")) {
+                            this.circle1.classList.remove("active");
+                        }
+                    }
+                    if (this.circle2) {
+                        if (this.circle2.classList.contains("active")) {
+                            this.circle2.classList.remove("active");
+                        }
+                    }
+                    if (this.circle3) {
+                        this.circle3.classList.add("active");
+                    }
+                }
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        if (this.circle1) {
+                            this.circle1.classList.add("active");
+                        }
+                        if (this.circle2) {
+                            if (this.circle2.classList.contains("active")) {
+                                this.circle2.classList.remove("active");
+                            }
+                        }
+                        if (this.circle3) {
+                            if (this.circle3.classList.contains("active")) {
+                                this.circle3.classList.remove("active");
+                            }
+                        }
+                    } else if (
+                        window.location.hash == "#/email" ||
+                        window.location.hash == "#/profile" ||
+                        window.location.hash == "#/shipping"
+                    ) {
+                        if (this.circle1) {
+                            if (this.circle1.classList.contains("active")) {
+                                this.circle1.classList.remove("active");
+                            }
+                        }
+                        if (this.circle2) {
+                            this.circle2.classList.add("active");
+                        }
+                        if (this.circle3) {
+                            if (this.circle3.classList.contains("active")) {
+                                this.circle3.classList.remove("active");
+                            }
+                        }
+                    } else if (window.location.hash == "#/payment") {
+                        if (this.circle1) {
+                            if (this.circle1.classList.contains("active")) {
+                                this.circle1.classList.remove("active");
+                            }
+                        }
+                        if (this.circle2) {
+                            if (this.circle2.classList.contains("active")) {
+                                this.circle2.classList.remove("active");
+                            }
+                        }
+                        if (this.circle3) {
+                            this.circle3.classList.add("active");
+                        }
+                    }
+                });
+            });
+        }
     }
 }

checkout/src/arquivos/sass/lib/_slick.scss

@@ -18,7 +18,7 @@
     position: relative;
     overflow: hidden;
     display: block;
-    margin: 0;
+    margin: 0 -16px;
     padding: 0;
 
     &:focus {
@@ -65,6 +65,7 @@
     float: left;
     height: 100%;
     min-height: 1px;
+    margin: 0 8px 56px 8px;
     outline: none;
     [dir="rtl"] & {
         float: right;
@@ -95,6 +96,9 @@
         height: auto;
         border: 1px solid transparent;
     }
+    @media (max-width: 1024px) {
+        margin: 0px 7.5px 56px 7.5px;
+    }
 }
 .slick-arrow {
     font-size: 0;
@@ -104,11 +108,31 @@
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
         no-repeat center center;
     z-index: 4;
+    top: 167px;
+    border: none;
     left: 10px;
+    @include mq(tv, min) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
+            no-repeat center center;
+        top: 313px;
+        width: 26px;
+        height: 58px;
+    }
 }
 .slick-next {
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+        no-repeat center center;
+    top: 167px;
     z-index: 4;
+    border: none;
     right: 10px;
+    @include mq(tv, min) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
+            no-repeat center center;
+        top: 313px;
+        width: 26px;
+        height: 58px;
+    }
 }
 .slick-arrow.slick-hidden {
     display: none;

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

@@ -1,36 +1,172 @@
-/* _header.scss */
 .headerCheckout {
     .container {
         width: auto !important;
     }
     &__wrapper {
-        align-items: center;
         display: flex;
-        justify-content: space-between;
+        align-items: center;
+        justify-content: space-around;
+        padding: 16px;
+        border-bottom: 1px solid $black;
+
+        @media (min-width: 1025px) {
+            padding: 33.5px 0;
+        }
+
+        @media (min-width: 2500px) {
+            padding: 33.5px 0;
+        }
+    }
+    .progress-bar {
+        display: flex;
+        flex-direction: column;
+        right: 31.5%;
+        top: 33%;
+        @media (max-width: 1024px) {
+            display: none;
+        }
+        @media (min-width: 2500px) {
+            right: 41%;
+        }
+
+        .containerLi {
+            display: flex;
+            position: relative;
+            align-items: center;
+        }
+        ul {
+            display: flex;
+            margin: 0;
+            gap: 100px;
+            list-style: none;
+        }
+
+        p {
+            margin-bottom: 0;
+        }
+
+        &-text {
+            font-family: $font-family-secundary;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+
+            @media (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+        }
+
+        &-line-1,
+        &-line-2 {
+            position: absolute;
+            width: 171px;
+            top: 82%;
+            left: 55%;
+            border: 1px solid $black;
+            z-index: 0;
+
+            @media (min-width: 2500px) {
+                width: 240px;
+                top: 79%;
+                left: 55%;
+            }
+        }
+
+        &-line-2 {
+            width: 166px;
+            left: -223%;
+
+            @media (min-width: 2500px) {
+                width: 230px;
+                left: -143%;
+            }
+        }
+
+        &-circle-1,
+        &-circle-2,
+        &-circle-3 {
+            display: flex;
+            height: 10px;
+            width: 10px;
+            align-self: center;
+            background: $white;
+            border: 1px solid $black;
+            border-radius: 50%;
+            margin-left: 40%;
+            margin-top: 9px;
+            padding: 0;
+
+            @media (min-width: 2500px) {
+                height: 22px;
+                width: 22px;
+            }
+        }
+
+        .active {
+            background: $black;
+        }
     }
 
     &__logo {
+        width: 45.35%;
+
+        @media (min-width: 1025px) {
+            width: 17.059%;
+        }
+
+        @media (min-width: 1025px) {
+            width: 15.28%;
+
             img {
-            height: 52px;
+                width: 100%;
-            width: auto;
+            }
+        }
+        @media (min-width: 2500px) {
+            width: 19.22%;
         }
     }
 
     &__safeBuy {
-        span {
+        justify-content: flex-end;
-            align-items: center;
         display: flex;
+        align-items: center;
+
+        @media (min-width: 1025px) {
+            width: 15.5%;
+        }
+
+        @media (min-width: 2500px) {
+            width: 20%;
+        }
+
+        span {
+            min-width: fit-content;
+            height: 50%;
             text-transform: uppercase;
             font-family: $font-family;
             font-style: normal;
             font-weight: normal;
             font-size: 12px;
-            line-height: 14px;
+            line-height: 16px;
             color: $color-gray;
+            margin-left: 8px;
+
+            @media (min-width: 2500px) {
+                font-style: normal;
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
-        i {
+        img {
-            margin-right: 8px;
+            width: 4.5%;
+            min-width: 12px;
+
+            @media (min-width: 2500px) {
+                width: 6.1%;
+            }
         }
     }
 }