From 7a74f986fbfe9357bfd74f759b52731fd7233cbd Mon Sep 17 00:00:00 2001
From: unknown <gabrielgms0@hotmail.com>
Date: Wed, 8 Feb 2023 00:55:02 -0300
Subject: [PATCH] feat: adiciona e estiliza a newsletter

---
 store/blocks/pdp/product.jsonc                | 11 ++-
 styles/css/vtex.slider-layout.css             |  4 +
 styles/css/vtex.store-components.css          | 72 ++++++++++++++++-
 styles/sass/pages/product/vtex.rich-text.scss |  1 +
 .../pages/product/vtex.slider-layout.scss     |  5 ++
 .../pages/product/vtex.store-components.scss  | 81 ++++++++++++++++++-
 6 files changed, 167 insertions(+), 7 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 37a0f4e..9a065e0 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -5,7 +5,8 @@
       "condition-layout.product#availability",
       "tab-layout#description",
       "flex-layout.row#shelf",
-      "product-questions-and-answers"
+      "product-questions-and-answers",
+      "newsletter"
     ]
   },
   "html#breadcrumb": {
@@ -245,6 +246,14 @@
     "children": ["vtex.store-components:product-name"]
   },
 
+  "newsletter": {
+    "props": {
+      "blockClass": "newsletter",
+      "label": "Assine nossa Newsletter",
+      "placeholder": "Digite seu e-mail"
+    }
+  },
+
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 9d49fec..004650a 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -14,6 +14,10 @@
 }
 .sliderLayoutContainer--carousel .sliderTrackContainer {
   margin: 32px 27px 32px 27px;
+  padding-bottom: 32px;
+}
+.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack {
+  margin-bottom: 32px;
 }
 .sliderLayoutContainer--carousel .slide {
   width: 100%;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index e800822..28ea8dc 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -11,9 +11,6 @@
 .container {
   padding: 0 40px;
 }
-.container .newsletter {
-  background: red;
-}
 .container .productNameContainer--quickview {
   font-weight: 300;
   font-size: 20px;
@@ -319,4 +316,73 @@
   max-width: 90px;
   max-height: 90px !important;
   margin: 0 16px 0 0;
+}
+
+.newsletter--newsletter {
+  display: flex;
+  flex-direction: column;
+  height: 175px;
+  background-color: black;
+  padding-bottom: 16px;
+  padding-top: 32px;
+}
+.newsletter--newsletter .container--newsletter {
+  margin: 0;
+}
+.newsletter--newsletter .container--newsletter .form--newsletter {
+  max-width: 774px !important;
+}
+.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter {
+  display: flex;
+  flex-direction: column;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #ffffff;
+}
+.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: "Open Sans", sans-serif;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+  margin-top: 16px;
+}
+.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter {
+  padding-top: 16px;
+  border-bottom: 1px solid #929292;
+}
+.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter :global(.vtex-input-prefix__group) {
+  border: none;
+  height: 32px;
+  padding-bottom: 7px;
+}
+.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  background-color: transparent;
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter {
+  padding: 0;
+  border-bottom: 3px solid white;
+  height: 32px;
+}
+.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter :global(.vtex-button) {
+  background-color: transparent;
+  border: none;
+}
+.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter :global(.vtex-button) :global(.vtex-button__label) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #ffffff;
+  padding: 0px 16px 13px 16px !important;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index e69de29..8b13789 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -0,0 +1 @@
+
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 2826fee..c87a094 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -4,6 +4,11 @@
 
   .sliderTrackContainer {
     margin: 32px 27px 32px 27px;
+    padding-bottom: 32px;
+
+    .sliderTrack {
+      margin-bottom: 32px;
+    }
   }
 
   .slide {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 83b9531..ef7ac46 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,8 +1,5 @@
 .container {
   padding: 0 40px;
-  .newsletter {
-    background: red;
-  }
 
   .productNameContainer--quickview {
     font-weight: 300;
@@ -350,3 +347,81 @@
   max-height: 90px !important;
   margin: 0 16px 0 0;
 }
+
+.newsletter--newsletter {
+  display: flex;
+  flex-direction: column;
+  height: 175px;
+  background-color: black;
+  padding-bottom: 16px;
+  padding-top: 32px;
+
+  .container--newsletter {
+    margin: 0;
+
+    .form--newsletter {
+      max-width: 774px !important;
+      .label--newsletter {
+        display: flex;
+        flex-direction: column;
+        font-family: "Open Sans", sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+        color: #ffffff;
+
+        &::after {
+          content: "Receba ofertas e novidades por e-mail";
+          font-family: "Open Sans", sans-serif;
+          font-size: 18px;
+          line-height: 25px;
+          color: #929292;
+          margin-top: 16px;
+        }
+      }
+
+      .inputGroup--newsletter {
+        padding-top: 16px;
+        border-bottom: 1px solid #929292;
+
+        :global(.vtex-input-prefix__group) {
+          border: none;
+          height: 32px;
+          padding-bottom: 7px;
+
+          :global(.vtex-styleguide-9-x-input) {
+            background-color: transparent;
+            padding: 0;
+            font-family: "Open Sans", sans-serif;
+            font-size: 18px;
+            line-height: 25px;
+            color: #929292;
+          }
+        }
+
+        .buttonContainer--newsletter {
+          padding: 0;
+          border-bottom: 3px solid white;
+          height: 32px;
+
+          :global(.vtex-button) {
+            background-color: transparent;
+            border: none;
+
+            :global(.vtex-button__label) {
+              font-family: "Open Sans", sans-serif;
+              font-style: normal;
+              font-weight: 700;
+              font-size: 14px;
+              line-height: 19px;
+              color: #ffffff;
+              padding: 0px 16px 13px 16px !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}