From 6e08c29ff3b929baaa71eee169ea5af4a427bdb7 Mon Sep 17 00:00:00 2001
From: amanda almeida <manda.fonsecaff@gmail.com>
Date: Mon, 12 Dec 2022 20:31:36 -0300
Subject: [PATCH] feat(prateleira): adiciona classe a parteleira, css ao slick

---
 checkout/src/arquivos/js/components/Footer.js | 86 +++++++++----------
 .../sass/checkout/_checkout-carrinho.scss     |  5 +-
 .../src/arquivos/sass/checkout/_checkout.scss | 27 +-----
 checkout/src/arquivos/sass/lib/_slick.scss    | 30 ++++++-
 .../src/arquivos/sass/partials/_footer.scss   | 75 ++++++++++++++--
 .../src/arquivos/sass/utils/_variaveis.scss   |  2 +-
 6 files changed, 141 insertions(+), 84 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 68c4484..31e1051 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -40,8 +40,8 @@ export default class Footer {
         const imagesListDevelopedBy = document.querySelectorAll(".footerCheckout .footerCheckout__wrapper .container .footerCheckout__developedBy")
 
         imagesListStamps.forEach((e) => {
-            if (e.children[0]) {
-                e.children[0].innerHTML = ` <ul class="footerCheckout__payments"><li class="footerCheckout__payment"><img class="footerCheckout__payments-images" src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"></li>
+            if (e.children[0].children[0]) {
+                e.children[0].children[0].innerHTML = ` <ul class="footerCheckout__payments-list"><li class="footerCheckout__payment"><img class="footerCheckout__payments-images" src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"></li>
                 <li class="footerCheckout__payment"><img class="footerCheckout__payments-images" src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"></li>
                 <li class="footerCheckout__payment"><img class="footerCheckout__payments-images" src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"></li>
                 <li class="footerCheckout__payment"><img class="footerCheckout__payments-images" src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"></li>
@@ -49,9 +49,9 @@ export default class Footer {
                 <li class="footerCheckout__payment"><img class="footerCheckout__payments-images" src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"></li>
                 <li class="footerCheckout__payment"><img class="footerCheckout__payments-images" src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"></li>`
             }
-            if (e.children[2]) {
-                e.children[2].innerHTML = `<ul class="footerCheckout__payments-pci"><li class="footerCheckout__payment">
-                <img class="footerCheckout__payments-image" src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"/></li></ul>`
+            if (e.children[2].children[0]) {
+                e.children[2].children[0].innerHTML = `
+                <img class="footerCheckout__payments-image" src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"/>`
             }
         });
 
@@ -86,54 +86,54 @@ export default class Footer {
 
                 console.log(prateleira)
 
-                prateleira.innerHTML = `
+                prateleira.innerHTML = `<h3 class="footerCheckout__title">Você também pode gostar:</h3>
                     <ul class="footerCheckout__products">
-                    <li>
-                    <figure><img src=${products[0].items[0].images[0].imageUrl}><figcaption>${products[0].productName}</figcaption></figure>
-                    <ul>
-                    <li><button>${products[0].items[0].name}</button></li>
-                    <li><button>${products[0].items[1].name}</button></li>
-                    <li><button>${products[0].items[2].name}</button></li>
+                    <li class="footerCheckout__product">
+                    <figure class="footerCheckout__prateleira-image" class="footerCheckout__prateleira-image"><img src=${products[0].items[0].images[0].imageUrl}><figcaption class="footerCheckout__prateleira-text" class="footerCheckout__prateleira-text">${products[0].productName}</figcaption></figure>
+                    <ul class="footerCheckout__prateleira-skus">
+                    <li><button class="footerCheckout__prateleira-sku">${products[0].items[0].name}</button></li>
+                    <li><button  class="footerCheckout__prateleira-sku">${products[0].items[1].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[0].items[2].name}</button></li>
                     </ul>
-                    <a href=${products[0].link}><button>VER PRODUTO</button></a>
+                    <a href=${products[0].link}><button class="footerCheckout__prateleira-button" class="footerCheckout__prateleira-button">VER PRODUTO</button></a>
                     </li>
-                    <li>
-                    <figure><img src=${products[1].items[0].images[0].imageUrl}><figcaption>${products[1].productName}</figcaption></figure>
-                    <ul>
-                    <li><button>${products[1].items[0].name}</button></li>
-                    <li><button>${products[1].items[1].name}</button></li>
-                    <li><button>${products[1].items[2].name}</button></li>
-                    <li><button>${products[1].items[3].name}</button></li>
-                    <li><button>${products[1].items[4].name}</button></li>
+                    <li class="footerCheckout__product">
+                    <figure class="footerCheckout__prateleira-image"><img src=${products[1].items[0].images[0].imageUrl}><figcaption class="footerCheckout__prateleira-text">${products[1].productName}</figcaption></figure>
+                    <ul class="footerCheckout__prateleira-skus">
+                    <li><button class="footerCheckout__prateleira-sku">${products[1].items[0].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[1].items[1].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[1].items[2].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[1].items[3].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[1].items[4].name}</button></li>
                     </ul>
-                    <a href=${products[1].link}><button>VER PRODUTO</button></a>
+                    <a href=${products[1].link}><button class="footerCheckout__prateleira-button">VER PRODUTO</button></a>
                     </li>
-                    <li>
-                    <figure><img src=${products[2].items[0].images[0].imageUrl}><figcaption>${products[2].productName}</figcaption></figure>
-                    <ul>
-                    <li><button>${products[2].items[0].name}</button></li>
-                    <li><button>${products[2].items[1].name}</button></li>
-                    <li><button>${products[2].items[2].name}</button></li>
-                    <li><button>${products[2].items[3].name}</button></li>
-                    <li><button>${products[2].items[4].name}</button></li>
+                    <li class="footerCheckout__product">
+                    <figure class="footerCheckout__prateleira-image"><img src=${products[2].items[0].images[0].imageUrl}><figcaption class="footerCheckout__prateleira-text">${products[2].productName}</figcaption></figure>
+                    <ul class="footerCheckout__prateleira-skus">
+                    <li><button class="footerCheckout__prateleira-sku">${products[2].items[0].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[2].items[1].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[2].items[2].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[2].items[3].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[2].items[4].name}</button></li>
                     </ul>
-                    <a href=${products[2].link}><button>VER PRODUTO</button></a>
+                    <a href=${products[2].link}><button class="footerCheckout__prateleira-button">VER PRODUTO</button></a>
                     </li>
-                    <li>
-                    <figure><img src=${products[3].items[0].images[0].imageUrl}><figcaption>${products[3].productName}</figcaption></figure>
-                    <ul>
-                    <li><button>${products[3].items[0].name}</button></li>
-                    <li><button>${products[3].items[1].name}</button></li>
-                    <li><button>${products[3].items[2].name}</button></li>
+                    <li class="footerCheckout__product">
+                    <figure class="footerCheckout__prateleira-image"><img src=${products[3].items[0].images[0].imageUrl}><figcaption class="footerCheckout__prateleira-text">${products[3].productName}</figcaption></figure>
+                    <ul class="footerCheckout__prateleira-skus">
+                    <li><button class="footerCheckout__prateleira-sku">${products[3].items[0].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[3].items[1].name}</button></li>
+                    <li><button class="footerCheckout__prateleira-sku">${products[3].items[2].name}</button></li>
                     </ul>
-                    <a href=${products[3].link}><button>VER PRODUTO</button></a>
+                    <a href=${products[3].link}><button class="footerCheckout__prateleira-button">VER PRODUTO</button></a>
                     </li>
-                    <li>
-                    <figure><img src=${products[4].items[0].images[0].imageUrl}><figcaption>${products[4].productName}</figcaption></figure>
-                    <ul>
-                    <li><button>${products[4].items[0].name}</button></li>
+                    <li class="footerCheckout__product">
+                    <figure class="footerCheckout__prateleira-image"><img src=${products[4].items[0].images[0].imageUrl}><figcaption class="footerCheckout__prateleira-text">${products[4].productName}</figcaption></figure>
+                    <ul class="footerCheckout__prateleira-skus">
+                    <li><button class="footerCheckout__prateleira-sku">${products[4].items[0].name}</button></li>
                     </ul>
-                    <a href=${products[4].link}><button>VER PRODUTO</button></a>
+                    <a href=${products[4].link}><button class="footerCheckout__prateleira-button">VER PRODUTO</button></a>
                     </li>
                     </ul>
                     `
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index ac41ad1..260e95b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -1,4 +1,7 @@
-.container {
+.container-main {
+    height: 100%;
+    position: relative;
+
     @include mq(md, max) {
         width: 100%;
     }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 8a7660e..1ffd829 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -3,16 +3,7 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
-html {
-    height: 100%;
-    min-height: 100%;
-}
 
-// footer .footerCheckout__prateleira,
-// header {
-//     width: 79.53125%;
-//     margin: 0 auto;
-// }
 
 body {
     display: flex;
@@ -93,25 +84,9 @@ body {
 
         &::before,
         &::after {
-            content: "";
-            background: $color-gray2;
-            display: block;
-            float: right;
-            height: 2px;
-            width: 8px;
-            margin-top: 8px;
+            display: none;
         }
 
-        &::before {
-            transform: rotate(0deg);
-            transition: 0.3s;
-        }
-
-        &::after {
-            transform: rotate(90deg);
-            transition: 0.3s;
-            margin-right: -8px;
-        }
 
         &.closed::before {
             transform: rotate(180deg);
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 74460fb..a60b995 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -14,6 +14,7 @@
     touch-action: pan-y;
     -webkit-tap-highlight-color: transparent;
 }
+
 .slick-list {
     position: relative;
     overflow: hidden;
@@ -30,6 +31,7 @@
         cursor: hand;
     }
 }
+
 .slick-slider .slick-track,
 .slick-slider .slick-list {
     -webkit-transform: translate3d(0, 0, 0);
@@ -61,17 +63,21 @@
         visibility: hidden;
     }
 }
+
 .slick-slide {
     float: left;
     height: 100%;
     min-height: 1px;
     outline: none;
+
     [dir="rtl"] & {
         float: right;
     }
+
     img {
         display: block;
     }
+
     &.slick-loading img {
         display: none;
     }
@@ -96,26 +102,40 @@
         border: 1px solid transparent;
     }
 }
+
 .slick-arrow {
-    font-size: 0;
     position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: map-get($z-index, level-1);
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-size: 0;
+    cursor: pointer;
+    width: 4%;
 }
+
 .slick-prev {
-    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
-        no-repeat center center;
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") no-repeat center center;
     z-index: 4;
     left: 10px;
 }
+
 .slick-next {
-    z-index: 4;
+    z-index: map-get($z-index , level2);
     right: 10px;
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") no-repeat center;
 }
+
 .slick-arrow.slick-hidden {
     display: none;
 }
+
 .slick-dots {
     li {
         margin: 0.5em;
+
         button {
             overflow: hidden;
             text-indent: 999999999px;
@@ -123,10 +143,12 @@
             width: 1em;
             border-radius: 1em;
             background-color: #fff;
+
             :focus {
                 outline: none;
             }
         }
+
         &.slick-active button {
             &:focus {
                 outline: none;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index b62b253..9905b34 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,22 +1,20 @@
 /* _footer.scss */
 .footerCheckout {
-    position: absolute;
-    width: 100%;
-    height: 67px;
-    bottom: 0;
     color: $color-gray2;
 
+
     &__wrapper {
         border-top: 1px solid $color-black;
-        padding: 16px 32px;
-        margin: 0;
+        padding: 16px 0;
+        margin: 0 auto;
     }
 
     .container {
+
         display: flex;
         align-items: center;
         justify-content: space-between;
-        width: 100%;
+        width: 95%;
 
         ul {
             margin: 0;
@@ -65,8 +63,7 @@
         }
     }
 
-    &__payments,
-    &__payments-pci {
+    &__payments-list {
         align-items: center;
         display: flex;
         list-style: none;
@@ -116,4 +113,64 @@
             }
         }
     }
+
+    &__title {
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+        color: $color-black;
+        margin: 0;
+    }
+
+    &__products {
+        margin: 0 auto;
+        width: 79%;
+    }
+
+    .slick-track {
+        display: flex;
+        gap: 16px;
+    }
+
+    &__product {
+        margin: 0 auto;
+
+    }
+
+    &__prateleira-image {
+        width: 100%;
+        margin: 0;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    &__prateleira-skus {
+        display: flex;
+        gap: 5px;
+        list-style: none;
+    }
+
+    &__prateleira-sku,
+    &__prateleira-button {
+        background: $color-blue2;
+        border-radius: 8px;
+        border: none;
+        height: 28px;
+        width: auto;
+        font-weight: 700;
+        font-size: 13px;
+        line-height: 18px;
+        text-align: center;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        color: $color-white;
+    }
+
+    &__prateleira-button {
+        height: 42px;
+        width: 100%;
+    }
 }
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 4d1677a..5fa501c 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -18,7 +18,7 @@ $color-gray5: #e5e5e5;
 $color-gray6: #C4C4C4;
 
 $color-blue: #4267b2;
-
+$color-blue2: #00C8FF;
 $color-green: #4caf50;
 
 /* Grid breakpoints */