From 1ad8479f6cef34f93137f3a8370af4f282c248a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Fri, 27 Jan 2023 19:35:11 -0300
Subject: [PATCH] feat(pdp): Adiciona newsletter

---
 store/blocks/pdp/product.jsonc                | 20 ++++++-
 styles/css/vtex.store-components.css          | 52 ++++++++++++++++--
 .../pages/product/vtex.store-components.scss  | 55 +++++++++++++++++--
 3 files changed, 118 insertions(+), 9 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index e28e3b0..bc47d8d 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -12,10 +12,28 @@
 
       "list-context.product-list#prateleira",
       /*"shelf.relatedProducts",*/
-      "product-questions-and-answers"
+      /*"product-questions-and-answers",*/
+      "newsletter"
     ]
   },
 
+  "newsletter": {
+    "props": {
+      "label": "Assine nossa newsletter",
+      "placeholder": "Digite seu e-mail",
+      "blockClass": "newsletter"
+    },
+    "blocks": ["rich-text#newsletter"]
+  },
+  "rich-text#newsletter": {
+    "props": {
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "text": "Receba ofertas e novidades por e-mail",
+      "blockClass": "news-msg"
+    }
+  },
+
   "list-context.product-list#prateleira": {
     "blocks": ["product-summary.shelf"],
     "children": ["rich-text#prateleira", "slider-layout#prateleira"]
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 4d29c04..439824f 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -13,10 +13,6 @@
   padding: 0;
 }
 
-.newsletter {
-  background: red;
-}
-
 .productImageTag--main {
   max-height: max-content !important;
 }
@@ -411,4 +407,52 @@
   top: 90px;
   font-size: 12px;
   line-height: 16px;
+}
+
+.newsletter--newsletter {
+  margin-top: 64px;
+  padding-top: 32px;
+  padding-bottom: 16px;
+  background-color: #000000;
+}
+
+.container--newsletter {
+  color: #fff;
+}
+
+.form--newsletter {
+  position: relative;
+}
+.form--newsletter :global(.vtex-styleguide-9-x-noAppearance) {
+  background-color: #000000;
+  padding: 0;
+}
+.form--newsletter :global(.vtex-input-prefix__group) {
+  border: none;
+  border-bottom: 1px solid #929292;
+  border-radius: 0%;
+  padding-bottom: 4px;
+  align-items: flex-end;
+}
+
+.label--newsletter {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #fff;
+}
+.label--newsletter::after {
+  content: "Receba ofertas e novidades por e-mail";
+  position: absolute;
+  right: 100px;
+  top: 42px;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+
+.inputGroup--newsletter {
+  margin-top: 40px;
+  padding: 0;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 6fdb952..2eb7486 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -3,10 +3,6 @@
   padding: 0;
 }
 
-.newsletter {
-  background: red;
-}
-
 //IMAGENS
 .productImageTag--main {
   max-height: max-content !important;
@@ -469,3 +465,54 @@
     line-height: 16px;
   }
 }
+
+//NEWSLETTER
+
+.newsletter--newsletter {
+  margin-top: 64px;
+  padding-top: 32px;
+  padding-bottom: 16px;
+  background-color: $color-black-100;
+}
+.container--newsletter {
+  color: $color-white;
+}
+
+.form--newsletter {
+  position: relative;
+
+  :global(.vtex-styleguide-9-x-noAppearance) {
+    background-color: $color-black-100;
+    padding: 0;
+  }
+
+  :global(.vtex-input-prefix__group) {
+    border: none;
+    border-bottom: 1px solid $color-gray6;
+    border-radius: 0%;
+    padding-bottom: 4px;
+    align-items: flex-end;
+  }
+}
+
+.label--newsletter {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: $color-white;
+  &::after {
+    content: "Receba ofertas e novidades por e-mail";
+    position: absolute;
+    right: 100px;
+    top: 42px;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+    color: $color-gray6;
+  }
+}
+
+.inputGroup--newsletter {
+  margin-top: 40px;
+  padding: 0;
+}