From 98b612252c66d03a0d252112dfb5cc5c4dbca4bf Mon Sep 17 00:00:00 2001
From: WillSimao <williamsimaocavalcante75@gmail.com>
Date: Sat, 17 Dec 2022 14:07:27 -0300
Subject: [PATCH] feat(MeuCarrinho): Estiliza Meu Carrinho

---
 .../src/arquivos/js/components/CheckoutUI.js  |   3 +-
 checkout/src/arquivos/js/components/Footer.js |  49 +++++-
 .../sass/checkout/_checkout-carrinho.scss     | 150 +++++++++++-------
 .../src/arquivos/sass/utils/_variaveis.scss   |   3 +-
 4 files changed, 140 insertions(+), 65 deletions(-)

diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js
index 0d09908..a31cc14 100644
--- a/checkout/src/arquivos/js/components/CheckoutUI.js
+++ b/checkout/src/arquivos/js/components/CheckoutUI.js
@@ -16,6 +16,7 @@ export default class CheckoutUI {
     selectors() {
         this.title = $(".footerCheckout__title");
         this.contents = $(".footerCheckout__content");
+        this.entrega = $('.shipping-date');
     }
 
     events() {
@@ -42,6 +43,7 @@ export default class CheckoutUI {
         waitForEl(".product-image img", this.resizeImages.bind(this));
         $(window).on("orderFormUpdated.vtex", this.resizeImages.bind(this));
         this.changeTitleChooseProduct();
+        this.entregaCarrinho();
     }
 
     configThumb() {
@@ -67,5 +69,4 @@ export default class CheckoutUI {
             );
         });
     }
-
 }
diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 10c96e1..ef29240 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -9,11 +9,13 @@ export default class Footer {
         await this.selectors();
         this.verificaPag();
         await this.onUpdate();
+        await this.addCarrossel();
+        this.addProdutos();
+        this.entregaCarrinho();
+        this.unidadeCarrinho();
         this.creatPaymentsIcons();
         this.creatVtexIconPci();
         this.creatDevIconsM3();
-        this.addProdutos();
-        await this.addCarrossel();
     }
 
     async selectors() {
@@ -24,6 +26,9 @@ export default class Footer {
         this.vtexIconPci = await waitElement('.footerCheckout__vtexpci');
         this.devIcons = await waitElement('.footerCheckout__developedBy');
         this.continuarComprando = await waitElement('.empty-cart-links');
+        this.entrega = await waitElement('.shipping-date');
+        this.unidade = await waitElement('.product-price');
+
     }
 
     async onUpdate() {
@@ -102,22 +107,52 @@ export default class Footer {
     };
     async addCarrossel() {
         const prateleiraProd = await waitElement("#footerCheckout__prateleira-ul-id");
-        if(window.screen.width > 1024) {
         $(prateleiraProd).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
             infinite: false,
             arrows: true,
+            // responsive: [
+            //     {
+            //     breackpoint: 992,
+            //         settings: {
+            //             slidesToScroll: 2,
+            //             slidesToScroll: 1,
+            //         },
+            //     },
+            //     {
+            //     breackpoint: 1025,
+            //         settings: {
+            //             slidesToShow: 3,
+            //             slidesToScroll: 1,
+            //         }
+            //     },
+            //     {
+            //         breackpoint: 1279,
+            //             settings: {
+            //                 slidesToShow: 4,
+            //                 slidesToScroll: 1,
+            //             }
+            //         },
+            // ]
         });
-    }
+
     }
     addProdutos() {
         this.continuarComprando.innerHTML = `<a href="/" id="cart-choose-products" class="btn btn-large btn-success link-choose-products" data-i18n="cart.chooseProducts">continuar comprando</a>`
     }
 
-    // removePrateleira() {
-    //     this.divPrateleira.style.display = 'none'
-    // };
+    removePrateleira() {
+        this.divPrateleira.style.display = 'none'
+    };
+
+    entregaCarrinho () {
+        this.entrega.innerHTML = `Frete`;
+    }
+    unidadeCarrinho () {
+        this.unidade.innerHTML = `Unidade`;
+    }
+
     creatPaymentsIcons () {
         this.payments.innerHTML = `
             <ul class="footerCheckout__container-ul">
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 195f487..0565024 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -13,7 +13,7 @@
         display: none;
     }
     .cart {
-        border: 3px solid $color-gray3;
+        border: 1px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
@@ -111,10 +111,11 @@
         }
 
         th {
+            font-family: $font-family-secundary;
             color: $color-black;
-            padding: 0 0 16px;
+            padding: 0 0 17px;
             font-style: normal;
-            font-weight: bold;
+            font-weight: 400;
             font-size: 14px;
             line-height: 16px;
 
@@ -155,9 +156,10 @@
             }
 
             a {
-                color: $color-blue;
+                font-family: $font-family-secundary;
+                color: $color-black-500;
                 font-style: normal;
-                font-weight: normal;
+                font-weight: 400;
                 font-size: 12px;
                 line-height: 14px;
                 transition: ease-in 0.22s all;
@@ -179,9 +181,11 @@
         }
 
         td.shipping-date {
-            color: $color-gray2;
+            font-family: $font-family-secundary;
+            color: $color-gray6;
             font-size: 12px;
             line-height: 14px;
+            font-weight: 400;
 
             @include mq(md, max) {
                 display: none;
@@ -218,7 +222,7 @@
         td.quantity {
             align-items: center;
             border: 1px solid $color-gray3;
-            border-radius: 0;
+            border-radius: 8px;
             box-sizing: border-box;
             display: flex;
             justify-content: center;
@@ -233,16 +237,19 @@
             }
 
             input {
+                font-family: $font-family-secundary;
+                font-size: 14px;
+                font-weight: 400;
+                font-style: normal;
+                line-height: 16px;
+                color: $color-black-500;
                 background-color: $color-white;
-                border: 1px solid $color-gray3;
-                border-radius: 0;
-                border-width: 0 1px;
+                border: none;
                 display: block;
                 max-height: 38px;
                 margin: 0 !important;
-                padding: 8px 0;
-                width: 38px;
-                color: $color-gray2;
+                padding: 0;
+                width: 5px;
                 box-shadow: none;
 
                 @include mq(lg, max) {
@@ -253,24 +260,23 @@
             .icon-plus-sign,
             .icon-minus-sign {
                 &::before {
-                    color: $color-black;
+                    color: $color-blue-200;
                     display: block;
                     font-weight: 500;
-                    padding: 1px 12px;
                 }
             }
 
             .icon-minus-sign {
                 &:before {
-                    content: "-";
-                    font-size: 16px;
+                    padding: 7px 20px 7px 9px;
+                    font-size: 20px;
                 }
             }
 
             .icon-plus-sign {
                 &:before {
-                    content: "+";
-                    font-size: 14px;
+                    padding: 7px 9px 7px 20px;
+                    font-size: 20px;
                 }
             }
 
@@ -296,12 +302,20 @@
                 display: none;
             }
             span {
+                font-family: $font-family-secundary;
                 font-style: normal;
-                font-weight: normal;
+                font-weight: 400;
                 font-size: 14px;
                 line-height: 16px;
                 color: $color-black;
             }
+            .total-selling-price {
+                font-family: $font-family;
+                font-style: normal;
+                font-style: 14px;
+                line-height: 19px;
+                font-weight: 700;
+            }
         }
 
         .quantity-price {
@@ -351,12 +365,13 @@
                 }
 
                 .srp-main-title {
+                    font-family: $font-family;
                     margin: 32px 0 12px;
                     font-style: normal;
-                    font-weight: normal;
+                    font-weight: 400;
                     font-size: 24px;
-                    line-height: 28px;
-                    color: $color-gray2;
+                    line-height: 33px;
+                    color: $color-black-500;
 
                     @include mq(md, max) {
                         margin-top: 0;
@@ -364,16 +379,19 @@
                 }
 
                 .srp-description {
+                    font-family: $font-family;
+                    font-weight: 400;
                     color: $color-gray2;
-                    font-size: 12px;
+                    font-size: 14px;
                     line-height: 18px;
                     margin: 0 0 12px;
+                    max-width: 276px;
                 }
 
                 button.shp-open-options {
                     background-color: $color-gray5;
                     border: none;
-                    border-radius: 5px;
+                    border-radius: 8px;
                     color: $color-gray2;
                     font-size: 16px;
                     letter-spacing: 0.05em;
@@ -466,15 +484,15 @@
                     label {
                         font-family: $font-family;
                         font-style: normal;
-                        font-weight: normal;
+                        font-weight: 400;
                         font-size: 12px;
-                        line-height: 14px;
-                        color: $color-black;
+                        line-height: 16px;
+                        color: $color-black-500;
                         margin-bottom: 12px;
                     }
 
                     input {
-                        border: 1px solid $color-gray3;
+                        border: 1px solid $color-gray7;
                         border-radius: 5px;
                         box-shadow: none;
                         color: $color-gray3;
@@ -482,41 +500,48 @@
                         height: 36px;
                         padding: 12px 8px;
                         width: 172px;
+                        background-color: $color-white;
                     }
 
                     & ~ button {
-                        background-color: $color-black;
+                        background-color: $color-blue-200;
                         border: none;
-                        border-radius: 5px;
+                        border-radius: 8px;
                         color: $color-white;
-                        font-size: 12px;
+                        font-size: 14px;
+                        line-height: 19px;
+                        font-style: normal;
                         height: 36px;
-                        letter-spacing: 1px;
+                        letter-spacing: 0.05em;
                         outline: none;
                         position: absolute;
+                        text-align: center;
                         right: -150px;
-                        top: 36px;
+                        top: 38px !important;
                         transition: all 0.2s linear;
                         width: 96px;
                         text-transform: uppercase;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
 
                         &:hover {
-                            background-color: lighten($color-black, 5);
+                            background-color: lighten($color-blue-100, 5);
                         }
 
                         &:active {
-                            background-color: darken($color-black, 5);
+                            background-color: darken($color-blue-100, 5);
                         }
                     }
-
                     small a {
-                        font-family: $font-family;
+                        font-family: $font-family-secundary;
                         font-style: normal;
-                        font-weight: normal;
+                        font-weight: 400;
                         font-size: 10px;
                         line-height: 12px;
-                        color: $color-blue;
+                        color: $color-black-500;
                         margin-top: 7px;
+                        text-decoration: underline;
                     }
 
                     span.help.error {
@@ -528,6 +553,9 @@
                         top: 17px;
                     }
                 }
+                .ship-country {
+                    display: none;
+                }
             }
 
             .srp-result {
@@ -603,12 +631,12 @@
                     }
                 }
                 span {
-                    font-family: $font-family;
+                    font-family: $font-family-secundary;
                     font-style: normal;
-                    font-weight: normal;
+                    font-weight: 400;
                     font-size: 12px;
                     line-height: 14px;
-                    color: $color-blue;
+                    color: $color-black-500;
                     text-decoration: none;
                 }
             }
@@ -712,16 +740,23 @@
 
                         &.info,
                         &.monetary {
+                            font-family: $font-family-secundary;
                             font-style: normal;
-                            font-weight: normal;
+                            font-weight: 400;
                             font-size: 14px;
                             line-height: 16px;
+                            text-align: left;
                             color: $color-black;
-                            padding: 12px 0;
                         }
 
                         &.info {
+                            font-family: $font-family-secundary;
+                            font-style: normal;
+                            font-weight: 400;
+                            font-size: 14px;
+                            line-height: 16px;
                             text-align: left;
+                            color: $color-black
                         }
 
                         &.monetary {
@@ -733,10 +768,11 @@
                 tfoot {
                     td.info,
                     td.monetary {
-                        font-style: normal;
-                        font-weight: normal;
+                        font-family: $font-family;
                         font-size: 18px;
-                        line-height: 21px;
+                        line-height: 25px;
+                        font-style: normal;
+                        font-weight: 700;
                         color: $color-black;
                     }
                 }
@@ -771,36 +807,38 @@
             }
 
             a {
-                font-family: $font-family;
+                font-family: $font-family-secundary;
                 font-style: normal;
-                font-weight: normal;
+                font-weight: 400;
                 font-size: 12px;
                 line-height: 14px;
-                color: $color-blue;
+                color: $color-black-500;
             }
         }
 
         .btn-place-order-wrapper {
             a {
-                background: $color-green;
+                background: $color-blue-200;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 display: block;
                 font-size: 0;
                 transition: ease-in 0.22s all;
                 padding: 12px 19px;
+                color: $color-black-500;
 
                 &:hover {
                     background-color: darken($color-green, 5);
+                    color: $color-white;
                 }
 
                 &:after {
                     content: "finalizar compra";
                     font-family: $font-family;
-                    font-weight: 500;
-                    font-size: 13px;
+                    font-weight: 700;
+                    font-size: 14px;
+                    font-style: normal;
                     letter-spacing: 0.05em;
-                    color: $color-white;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index ba4c8b6..cc0285d 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -15,11 +15,12 @@ $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
+$color-gray6: #989898;
+$color-gray7: #c4c4c4;
 
 $color-blue-100:  #6fd5f2;
 $color-blue-200: #00C8FF;
 $color-blue: #4267b2;
-
 $color-green: #4caf50;
 
 /* Grid breakpoints */