From 30b2e8a13ea1aca8514998abda3167bf8928381d Mon Sep 17 00:00:00 2001
From: Rafael Sampaio <rafael.sampa1989@gmail.com>
Date: Sun, 11 Dec 2022 16:58:32 -0300
Subject: [PATCH] feat: prateleira alimentada com dados da api

---
 checkout/src/arquivos/js/components/Footer.js | 51 ++++++++-----------
 checkout/src/arquivos/sass/lib/_slick.scss    | 10 ++--
 .../src/arquivos/sass/partials/_footer.scss   |  1 +
 3 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ea8697f..7b5cf0b 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -6,36 +6,9 @@ export default class Footer {
     }
 
     async init() {
-        this.list = [
-            {
-                image: "https://picsum.photos/242/242",
-                description: "Sandália Azul Spike Amarração",
-                items: [34, 35, 36, 37, 38, "Rosa"],
-            },
-            {
-                image: "https://picsum.photos/242/242",
-                description: "Sandália Roxo Spike Amarração",
-                items: [34, 35, 36, 37, 38],
-            },
-            {
-                image: "https://picsum.photos/242/242",
-                description: "Sandália Verde Spike Amarração",
-                items: [34, 35, 36, 37, 38],
-            },
-            {
-                image: "https://picsum.photos/242/242",
-                description: "Jaqueta Masculina Thermoball Eco",
-                items: ["VERDE", "AZUL", "JAQUETA AZUL"],
-            },
-            {
-                image: "https://picsum.photos/242/242",
-                description: "Sandália Amarela Spike Amarração",
-                items: [34],
-            },
-        ];
-
         await this.selectors();
         // this.onUpdate();
+        this.list = await this.fetchApiData();
         this.renderPrateleira();
         this.items = document.querySelector(".footerCheckout__prateleira-container");
         this.renderItems();
@@ -64,6 +37,22 @@ export default class Footer {
         observer.observe(target, config);
     }
 
+    async fetchApiData() {
+        return fetch(
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+        )
+            .then((resp) => resp.json())
+            .then((data) => {
+                const products = data.map((prod) => ({
+                    name: prod.productName,
+                    skus: prod.items.map((item) => item.name),
+                    image: prod.items[0].images[0].imageUrl,
+                }));
+
+                return products;
+            });
+    }
+
     renderPrateleira() {
         let itemsStructure = `
         <div class="footerCheckout__prateleira__title">
@@ -80,9 +69,9 @@ export default class Footer {
 
     renderItems() {
         let itemsCards = ``;
-
+        console.log(this.list);
         this.list.forEach((item) => {
-            const sku = item.items.map((resp) => `<li>${resp}</li>`);
+            const sku = item.skus.map((resp) => `<li>${resp}</li>`);
             itemsCards += `
               <li class="items">
                 <figure>
@@ -92,7 +81,7 @@ export default class Footer {
                   />
                 </figure>
                 <div class="items__detail">
-                  <p>${item.description}</p>
+                  <p>${item.name}</p>
                 </div>
                 <div class="items__sku">
                   <ul>
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 486757f..f441a11 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -114,14 +114,12 @@
 }
 
 .slick-prev {
-    // background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
-    //     no-repeat center center;
     z-index: 4;
     position: absolute;
     left: 1%;
     right: 0;
-    top: 40%;
-    bottom: 60%;
+    top: 44%;
+    bottom: 56%;
     width: 14px;
     height: 30px;
     color: $color-gray6;
@@ -131,8 +129,8 @@
     position: absolute;
     left: 97.5%;
     right: 0;
-    top: 40%;
-    bottom: 60%;
+    top: 44%;
+    bottom: 56%;
     width: 14px;
     height: 30px;
     color: $color-gray6;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index f536f9c..b88b008 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -98,6 +98,7 @@
                 padding: 5px;
                 background: $color-blue;
                 border-radius: 8px;
+                text-transform: uppercase;
 
                 @media (min-width: 1025px) and (max-width: 1107px) {
                     font-size: 11.5px;