Merge pull request 'feature/checkout-cart-fill' (#5) from feature/checkout-cart-fill into develop

Reviewed-on: #5

checkout/src/arquivos/js/components/Footer.js

@@ -25,6 +25,7 @@ export default class Footer {
         this.paymentContainer = await waitElement(".footerCheckout__stamps");
         this.developedByContainer = await waitElement(".footerCheckout__developedBy");
         this.checkoutContainer = await waitElement(".container-main");
+        this.self = await waitElement(".footerCheckout__prateleira");
     }
 
     innerToPayments() {
@@ -86,10 +87,22 @@ export default class Footer {
         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
 
         if (this.checkoutEmpty && this.checkoutContainer) {
-            if (this.checkoutContainer.classList.contains("container-cart-fill")) {
+            if (this.checkoutEmpty.style.display === "none") {
-                this.checkoutContainer.classList.remove("container-cart-fill");
-            } else {
                 this.checkoutContainer.classList.add("container-cart-fill");
+            } else {
+                this.checkoutContainer.classList.remove("container-fill");
+            }
+
+            if (
+                this.checkoutContainer.classList.contains("container-cart-fill") &&
+                this.checkoutContainer.classList.contains("container-cart") &&
+                window.location.href.endsWith("#/cart")
+            ) {
+                this.innerSelfList();
+                this.innerToSelf();
+                this.addCarrossel();
+            } else {
+                this.self.innerHTML = "";
             }
 
             let target = this.checkoutEmpty;
@@ -97,10 +110,22 @@ export default class Footer {
             let observer = new MutationObserver((mutations) => {
                 for (let i = 0; i < mutations.length; i++) {
                     if (mutations[i].attributeName === "style") {
-                        if (this.checkoutContainer.classList.contains("container-cart-fill")) {
+                        if (this.checkoutEmpty.style.display === "none") {
-                            this.checkoutContainer.classList.remove("container-cart-fill");
-                        } else {
                             this.checkoutContainer.classList.add("container-cart-fill");
+                        } else {
+                            this.checkoutContainer.classList.remove("container-cart-fill");
+                        }
+
+                        if (
+                            this.checkoutContainer.classList.contains("container-cart-fill") &&
+                            this.checkoutContainer.classList.contains("container-cart") &&
+                            window.location.href.endsWith("#/cart")
+                        ) {
+                            this.innerSelfList();
+                            this.innerToSelf();
+                            this.addCarrossel();
+                        } else {
+                            this.self.innerHTML = "";
                         }
 
                         break;
@@ -109,13 +134,113 @@ export default class Footer {
             });
 
             observer.observe(target, config);
+
+            window.addEventListener("hashchange", () => {
+                if (
+                    this.checkoutContainer.classList.contains("container-cart-fill") &&
+                    this.checkoutContainer.classList.contains("container-cart") &&
+                    window.location.href.endsWith("#/cart")
+                ) {
+                    this.innerSelfList();
+                    this.innerToSelf();
+                    this.addCarrossel();
+                } else {
+                    this.self.innerHTML = "";
+                }
+            });
         }
     }
-    async addCarrossel() {
+
-        const elemento = await waitElement("#my-element");
+    addCarrossel() {
-        $(elemento).slick({
+        $(this.self.children[1]).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            arrows: true,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                    },
+                },
+
+                {
+                    breakpoint: 600,
+                    settings: {
+                        slidesToShow: 2,
+                    },
+                },
+            ],
         });
     }
+
+    async getProducts() {
+        let url = (name) => {
+            let domain = "https://m3academy.myvtex.com/";
+            return domain + name;
+        };
+
+        let API = fetch(url("api/catalog_system/pub/products/search/?fq=productClusterIds:319"));
+
+        let response = await API.then((res) => res.json());
+
+        return response;
+    }
+
+    async innerToSelf() {
+        let datas = await this.getProducts();
+
+        datas.forEach(() => {
+            $(this.self.children[1]).slick("unslick");
+
+            this.createdCardsProducts(datas);
+
+            this.addCarrossel();
+        });
+    }
+
+    createdCardsProducts(data) {
+        let structure = "";
+
+        data.forEach((data) => {
+            structure += `<li>
+            <div>
+                <div>
+                    <figure>
+                        <img src="${data.items[0].images[0].imageUrl}" alt="">
+                    </figure>
+
+                    <h3>
+                        ${data.productName}
+                    </h3>
+                </div>
+
+                <div>
+                    ${data.items.reduce((acc, item) => {
+                        return (acc += `<div>
+                            <span>${item.name}</span>
+                        </div>`);
+                    }, "")}
+                </div>
+
+                <a href="${data.link}">
+                    <span>
+                        Ver Produto
+                    </span>
+                </a>
+            </div></li>`;
+        });
+
+        this.self.children[1].innerHTML = `
+            ${structure.trim()}
+        `;
+    }
+
+    innerSelfList() {
+        this.self.innerHTML = `
+        <div>
+            <h2>Você também pode gostar:</h2>
+        </div>
+        <ul class="self-list"></ul>`;
+    }
 }

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

@@ -29,7 +29,6 @@ function OnProgress(target) {
             <div class="progress-content">
                 <p>Dados Pessoais</p>
                 <span class="progress-bullet"></span>
-                <span class="progress-line"></span>
             </div>
         </div>
     </li>

checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss

@@ -1,7 +1,13 @@
-.container {
+@mixin btn-primary-blue-black() {
-    @include mq(md, max) {
+    border: none;
-        width: 100%;
+    color: $clr-common-black;
-    }
+    background: $clr-primary-blue-500;
+}
+
+@mixin btn-primary-blue-white() {
+    border: none;
+    color: $clr-common-white;
+    background: $clr-primary-blue-500;
 }
 
 .cart-template {
@@ -341,6 +347,7 @@
     .summary {
         .cart-more-options {
             margin: 0;
+            float: none;
             width: max-content;
 
             .srp-container {
@@ -400,15 +407,10 @@
                     width: calc(100vw - 32px);
                 }
 
-                @include mq(md, max) {
-                    margin-bottom: 40px;
-                }
-
                 .srp-pickup-my-location__button {
-                    background-color: $clr-gray-600;
+                    @include btn-primary-blue-white();
-                    border: none;
+
                     border-radius: 5px;
-                    color: $clr-common-white;
                     outline: none;
                     width: 100%;
 
@@ -444,12 +446,12 @@
                 }
 
                 &__current {
-                    border: 1px solid $clr-blue-500;
+                    border: 1px solid $clr-common-black;
                     border-radius: 100px;
                 }
 
                 .blue {
-                    color: $clr-blue-500;
+                    color: $clr-common-black;
                 }
 
                 label {
@@ -481,23 +483,17 @@
                         font-size: 12px;
                         height: 36px;
                         padding: 12px 8px;
-                        width: 172px;
                     }
 
                     & ~ button {
-                        background-color: $clr-gray-600;
+                        @include btn-primary-blue-white();
-                        border: none;
+
                         border-radius: 5px;
-                        color: $clr-common-white;
                         font-size: 12px;
                         height: 36px;
                         letter-spacing: 1px;
                         outline: none;
-                        position: absolute;
-                        right: -150px;
-                        top: 36px;
                         transition: all 0.2s linear;
-                        width: 96px;
                         text-transform: uppercase;
 
                         &:hover {
@@ -590,9 +586,9 @@
             }
         }
 
-        &-totalizers {
+        &-totalizers.totalizers {
             padding: 0;
-            width: 346px;
+            float: none;
 
             .coupon-data {
                 #cart-link-coupon-add {
@@ -608,7 +604,6 @@
                     font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: $clr-blue-500;
                     text-decoration: none;
                 }
             }
@@ -673,10 +668,9 @@
                     }
 
                     button {
-                        background: $clr-gray-600;
+                        @include btn-primary-blue-white();
-                        border: none;
+
                         border-radius: 5px;
-                        color: $clr-common-white;
                         font-size: 12px;
                         height: 36px;
                         letter-spacing: 1px;
@@ -715,6 +709,7 @@
                             font-style: normal;
                             font-weight: normal;
                             font-size: 14px;
+                            font-family: $font-family-200;
                             line-height: 16px;
                             color: $clr-gray-600;
                             padding: 12px 0;
@@ -731,21 +726,25 @@
                 }
 
                 tfoot {
-                    td.info,
+                    tr {
-                    td.monetary {
+                        td.info,
-                        font-style: normal;
+                        td.monetary {
-                        font-weight: normal;
+                            font-style: normal;
-                        font-size: 18px;
+                            font-weight: 700;
-                        line-height: 21px;
+                            font-size: 18px;
-                        color: $clr-gray-600;
+                            line-height: 21px;
+                            font-family: $font-family-100;
+                            color: $clr-gray-600;
+                        }
                     }
                 }
             }
         }
     }
 
-    .cart-links-bottom {
+    .cart-links-bottom.cart-links {
         display: flex;
+        float: none;
         flex-direction: column;
         width: 343px;
 
@@ -776,14 +775,13 @@
                 font-weight: normal;
                 font-size: 12px;
                 line-height: 14px;
-                color: $clr-blue-500;
             }
         }
 
         .btn-place-order-wrapper {
             a {
-                background: $clr-green-500;
+                @include btn-primary-blue-black();
-                border: none;
+
                 border-radius: 5px;
                 display: block;
                 font-size: 0;
@@ -799,8 +797,8 @@
                     font-family: $font-family-100;
                     font-weight: 500;
                     font-size: 13px;
+                    color: inherit;
                     letter-spacing: 0.05em;
-                    color: $clr-common-white;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;
@@ -810,3 +808,307 @@
         }
     }
 }
+
+.container-cart.container-cart-fill {
+    width: 100%;
+    padding: 0 !important;
+
+    #cart-title {
+        display: flex !important;
+        width: 100%;
+        padding: 0 16px;
+        text-align: left;
+    }
+
+    .ship-country {
+        display: none;
+    }
+
+    .cart-template {
+        .item-quantity-change {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 16px;
+            height: 16px;
+            background: #00c8ff;
+            border-radius: 100%;
+
+            .icon-plus-sign,
+            .icon-minus-sign {
+                position: relative;
+                width: 100%;
+                height: 100%;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    padding: 0;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    background-color: $clr-common-white;
+                }
+            }
+
+            .icon-plus-sign {
+                &::after {
+                    content: "";
+                    position: absolute;
+                    padding: 0;
+                    top: 50%;
+                    left: 50%;
+                    width: 2px;
+                    height: 10px;
+                    transform: translate(-50%, -50%);
+                    background-color: $clr-common-white;
+                }
+
+                &::before {
+                    width: 10px;
+                    height: 2px;
+                }
+            }
+
+            .icon-minus-sign {
+                &::before {
+                    width: 10px;
+                    height: 2px;
+                }
+            }
+        }
+    }
+
+    .link-coupon-add,
+    .link-choose-more-products {
+        color: $clr-common-black;
+
+        span {
+            color: $clr-common-black;
+        }
+    }
+
+    .cart-more-options {
+        padding: 0 16px;
+    }
+
+    .srp-container,
+    .cart-more-options,
+    .cart-more-options .srp-data {
+        width: 100%;
+    }
+
+    .cart-template {
+        th.shipping-date {
+            font-size: 0px;
+
+            &::before {
+                content: "Frete";
+                font-size: 14px;
+            }
+        }
+
+        th.product-price {
+            font-size: 0px;
+            &::before {
+                content: "Unidade";
+                font-size: 14px;
+            }
+        }
+    }
+
+    .srp-postal-code__form {
+        width: 100%;
+    }
+
+    .vtex-shipping-preview-0-x-postalCodeForgotten {
+        display: flex;
+        gap: 8px;
+        width: 100%;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    .ship-postalCode {
+        width: 62.682215743%;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+
+        .input-small {
+            width: 100%;
+        }
+    }
+
+    .srp-pc-input {
+        width: 34.985422741%;
+        margin-top: 5px;
+    }
+
+    .srp-data {
+        margin-bottom: 48.35px;
+    }
+
+    .totalizers {
+        padding: 0 16px;
+        width: 100%;
+    }
+
+    .cart-more-options {
+        .srp-container {
+            padding: 0;
+            max-width: none;
+        }
+    }
+
+    .cart-links-bottom {
+        width: 100%;
+        padding: 0 16px;
+        margin-bottom: 43.42px;
+
+        .link-choose-more-products-wrapper {
+            margin: 0 0 14.91px;
+        }
+    }
+
+    .coupon-column .coupon-fields {
+        span {
+            width: 100%;
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .cart-template .cart-items td.quantity {
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 10px;
+
+        input {
+            border: none;
+            padding: 0 10px;
+            box-sizing: content-box;
+        }
+    }
+
+    @media screen and (min-width: 600px) {
+        .totalizers {
+            padding: 0 16px;
+            margin: 0;
+        }
+
+        .cart-more-options {
+            .srp-container {
+                padding: 0 16px;
+            }
+
+            .srp-data {
+                width: 343px;
+            }
+        }
+
+        .cart-template .cart-items th {
+            vertical-align: top;
+        }
+
+        .cart-template-holder {
+            padding: 0 16px;
+        }
+    }
+
+    @media screen and (min-width: 1280px) {
+        width: fluid(1018px, 1280px);
+
+        .cart-template .cart-items td.quantity {
+            margin: 6px auto 0 0;
+        }
+
+        .cart-template {
+            .shipping-date,
+            .product-price,
+            .quantity-price {
+                text-align: left;
+                padding: 5px 0;
+            }
+        }
+
+        .cart-template-holder {
+            padding: 0;
+        }
+
+        .product-name {
+            width: auto;
+        }
+
+        .cart-template .cart-items th {
+            text-align: left;
+            padding-bottom: 16px;
+        }
+
+        #cart-title {
+            padding: 0;
+        }
+
+        .cart {
+            margin-bottom: 48px;
+        }
+
+        .cart-more-options {
+            padding: 0;
+
+            .srp-container {
+                padding: 0;
+            }
+
+            .srp-data {
+                margin-bottom: 0;
+            }
+        }
+
+        .row-fluid.summary {
+            width: 100%;
+            margin: 0 auto;
+        }
+
+        .cart-more-options {
+            width: fluid(280px, 1018px);
+            float: left;
+
+            .srp-container {
+                .srp-content {
+                    .srp-main-title {
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+
+        .cart-links-bottom.cart-links {
+            width: fluid(354px, 1018px);
+            display: flex;
+            align-items: flex-end;
+            float: right;
+            padding: 0;
+            margin: 0 auto;
+        }
+
+        .btn-place-order-wrapper {
+            width: 100%;
+        }
+
+        .link-choose-more-products-wrapper {
+            width: 100%;
+            text-align: center;
+        }
+
+        .cart-totalizers.totalizers {
+            width: fluid(354px, 1018px);
+            float: right;
+            padding: 0;
+            margin-left: 0;
+            margin-right: 0;
+            margin-bottom: 0;
+        }
+    }
+}

checkout/src/arquivos/sass/checkout/_checkout-vazio.scss

@@ -10,9 +10,10 @@
     background-color: $clr-common-white;
 }
 
-.container-cart {
+.container-main.container-cart {
     width: 100%;
     height: 100%;
+    padding: 0 16px !important;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -21,43 +22,37 @@
     #cart-title {
         display: none !important;
     }
-    .cart-template,
-    .checkout-container {
-        min-height: auto;
-    }
-
-    .checkout-container {
-        padding: 0 16px;
-    }
 
+    .checkout-container,
     .cart-template {
+        min-height: auto;
         margin: 0;
     }
 
-    @media screen and (min-width: 375px) {
+    .link-choose-products {
-        .checkout-container {
+        width: fluid(250px, 343px);
-            width: fluid(300px, 375px);
+        max-width: 250px;
-            margin: 0 auto;
+        margin: 0 auto;
-        }
+    }
 
-        .link-choose-products {
+    .transactions-container {
-            width: fluid(250px, 300px);
+        display: none;
-            max-width: 250px;
-            margin: 0 auto;
-        }
     }
 
     @media screen and (min-width: 1025px) {
-        .checkout-container {
+        width: fluid(400px, 1280px);
-            width: fluid(400px, 1280px);
+        padding: 0 !important;
-            padding: 0;
+        max-width: none;
-        }
 
         .link-choose-products {
             width: fluid(327px, 400px);
-            max-width: none;
+            max-width: 327px;
         }
     }
+
+    @media screen and (min-width: 2500px) {
+        width: fluid(659px, 2500px);
+    }
 }
 
 .empty-cart {

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -57,10 +57,6 @@ body {
     margin: 40px 0 30px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
-
-    @include mq(md, max) {
-        margin-left: 30px;
-    }
 }
 
 .dropdown {

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

@@ -1,15 +1,15 @@
 .footerCheckout {
-    padding: 16px 25px 18.88px 8px;
-
-    @include mq("md", min) {
-        padding: 16px 0;
-    }
-}
-
-.footerCheckout {
-    border-top: 1px solid $clr-common-black;
     color: $clr-gray-400;
 
+    &__wrapper {
+        border-top: 1px solid $clr-common-black;
+        padding: 16px 25px 18.88px 8px;
+
+        @include mq("md", min) {
+            padding: 16px 0;
+        }
+    }
+
     &__stamps {
         order: 0;
         margin: 0 0 16px;
@@ -182,3 +182,16 @@
         }
     }
 }
+
+.footerCheckout__prateleira {
+    div {
+        h2 {
+            width: 100%;
+            font-size: 14px;
+            text-align: center;
+            font-weight: 400;
+            font-family: $font-family-200;
+            color: $clr-common-black;
+        }
+    }
+}

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

@@ -161,7 +161,7 @@ body :where(ul, li, ol) {
         .progress-item {
             &--left,
             &--right {
-                width: 39.9183%;
+                width: 40%;
 
                 .progress-line {
                     position: absolute;
@@ -183,14 +183,18 @@ body :where(ul, li, ol) {
                 }
             }
 
+            &--center {
+                width: 90px;
+            }
+
             &--right {
                 .progress-container {
                     align-items: flex-end;
                 }
 
                 .progress-line {
-                    left: 29%;
+                    right: 72%;
-                    transform: translateX(-50%);
+                    transform: translateX(50%);
                 }
             }
         }

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

@@ -21,6 +21,8 @@ $clr-blue-500: #4267b2;
 
 $clr-green-500: #4caf50;
 
+$clr-primary-blue-500: #00c8ff;
+
 /* Grid breakpoints */
 $grid-breakpoints: (
     xxs: 0,