feat: cria newsletter

manifest.json

@@ -65,7 +65,8 @@
     "vtex.tab-layout": "0.x",
     "vtex.condition-layout": "2.x",
     "vtex.css-handles": "1.x",
-    "vtex.product-context": "0.x"
+    "vtex.product-context": "0.x",
+    "vtex.store-newsletter": "1.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/components/Html/styles.css

@@ -10,8 +10,3 @@
   display: flex;
   flex-direction: column;
 }
-
-/* [data-testid="product-name"]
-{
-
-} */

store/blocks/footer/footer.json

@@ -1,9 +1,6 @@
 {
   "footer": {
-    "blocks": [
+    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
-      "footer-layout.desktop",
-      "footer-layout.mobile"
-    ]
   },
   "footer-layout.desktop": {
     "children": [
@@ -50,26 +47,18 @@
     }
   },
   "flex-layout.row#footer-2-desktop": {
-    "children": [
+    "children": ["accepted-payment-methods"],
-      "accepted-payment-methods"
-    ],
     "props": {
       "blockClass": "payment-methods"
     }
   },
   "accepted-payment-methods": {
     "props": {
-      "paymentMethods": [
+      "paymentMethods": ["MasterCard", "Visa", "Diners Club"]
-        "MasterCard",
-        "Visa",
-        "Diners Club"
-      ]
     }
   },
   "flex-layout.row#footer-3-desktop": {
-    "children": [
+    "children": ["rich-text#footer"],
-      "rich-text#footer"
-    ],
     "props": {
       "blockClass": "credits"
     }
@@ -87,9 +76,7 @@
     ]
   },
   "flex-layout.row#2-footer-mobile": {
-    "children": [
+    "children": ["flex-layout.col#footer-1-mobile"],
-      "flex-layout.col#footer-1-mobile"
-    ],
     "props": {
       "blockClass": "payment-methods",
       "paddingTop": 4,
@@ -114,9 +101,7 @@
       "paddingTop": 4,
       "paddingBottom": 4
     },
-    "children": [
+    "children": ["vtex.menu@2.x:menu#footer-mobile"]
-      "vtex.menu@2.x:menu#footer-mobile"
-    ]
   },
   "rich-text#footer-mobile": {
     "props": {

store/blocks/pdp/product.jsonc

@@ -5,7 +5,8 @@
       "condition-layout.product#availability",
       "html#product-description",
       "html#shelf-container",
-      "newsletter"
+      "flex-layout.row#newsletter-wrapper"
+      // "newsletter-form"
     ]
   },
   "html#breadcrumb": {
@@ -393,5 +394,103 @@
     }
     // ,
     // "children": ["rich-text#1", "rich-text#2", "rich-text#3"]
+  },
+
+  "flex-layout.row#newsletter-wrapper": {
+    "props": {
+      "blockClass": "newsletter-wrapper"
+    },
+    "children": [
+      "rich-text#newsletter-title",
+      "rich-text#newsletter-subtitle",
+      "newsletter-form"
+    ]
+  },
+
+  // "flex-layout.row#input-submit": {
+  //   "children": ["newsletter-form"]
+  // },
+
+  "rich-text#newsletter-title": {
+    "props": {
+      "text": "Assine nossa newsletter",
+      "blockClass": "newsletter-title"
+    }
+  },
+  "rich-text#newsletter-subtitle": {
+    "props": {
+      "text": "Receba ofertas e novidades por e-mail",
+      "blockClass": "newsletter-subtitle"
+    }
+  },
+  "newsletter-form": {
+    "children": ["newsletter-input-email", "newsletter-submit"]
+  },
+  "newsletter-input-email": {
+    "props": {
+      "placeholderText": "Digite seu e-mail"
+      // "width": "90%"
+    }
   }
+
+  // "newsletter": {
+  //   "children": ["rich-text#newsletter-title", "newsletter-form"]
+  // },
+
+  // "rich-text#newsletter-title": {
+  //   "props": {
+  //     "text": "Assine nossa newsletter"
+  //   }
+  // },
+
+  // "flex-layout.row#newsletter-wrapper": {
+  //   "props": {
+  //     "blockClass": "newsletter-wrapper"
+  //   },
+  //   "children": [
+  //     "rich-text#newsletter-title",
+  //     "rich-text#newsletter-subtitle",
+  //     "newsletter-form"
+  //   ]
+  // },
+
+  // "newsletter-form": {
+  //   "children": [
+  //     "rich-text#newsletter-title",
+  //     "rich-text#newsletter-subtitle",
+  //     "newsletter-input-email",
+  //     "newsletter-submit"
+  //   ]
+  // }
+
+  // "newsletter-form": {
+  //   "children": [
+  //     "rich-text#newsletter-title",
+  //     "rich-text#newsletter-subtitle",
+  //     // "newsletter-input-email",
+  //     // "newsletter-submit"
+  //     "flex-layout.row#newsletter-form"
+  //   ]
+  // },
+  // "flex-layout.row#newsletter-form": {
+  //   "props": {
+  //     "blockClass": "newsletter-form",
+  //     "preventHorizontalStretch": true,
+  //     "preventVerticalStretch": true,
+  //     "horizontalAlign": "center"
+  //   },
+  //   "children": [
+  //     "rich-text#newsletter-title",
+  //     "rich-text#newsletter-subtitle",
+  //     "newsletter-form"
+  //   ]
+  // }
+  // "newsletter-form": {
+  //   "children": ["newsletter-input-email", "newsletter-submit"]
+  // }
+  // "newsletter-input-email": {
+  //   "props": {
+  //     "placeholderText": "Digite seu e-mail"
+  //     // "width": "90%"
+  //   }
 }

styles/css/vtex.flex-layout.css

@@ -81,3 +81,31 @@
 .flexColChild--info-availability :global(.vtex-store-components-3-x-skuSelectorSubcontainer--cor) {
   margin-bottom: 0 !important;
 }
+
+/* ----- NEWSLETTER ----- */
+.flexRow--newsletter-wrapper {
+  padding: 32px 0 16px;
+  border-bottom: 1px solid #ffffff;
+  background: #000000;
+}
+@media only screen and (max-width: 1024px) {
+  .flexRow--newsletter-wrapper {
+    padding: 64px 16px 32px;
+    border-bottom: 0;
+  }
+}
+.flexRow--newsletter-wrapper :global(.vtex-store-components-3-x-container) {
+  max-width: 4000px;
+}
+.flexRow--newsletter-wrapper .flexRowContent--newsletter-wrapper {
+  flex-direction: column;
+  align-items: center;
+}
+
+.flexRowContent--newsletter-form {
+  border-bottom: 1px solid #929292;
+  justify-content: space-between;
+}
+.flexRowContent--newsletter-form .pr0 {
+  height: fit-content;
+}

styles/css/vtex.menu.css

@@ -0,0 +1,12 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.styledLinkContent {
+  color: #ffffff;
+}

styles/css/vtex.rich-text.css

@@ -29,3 +29,33 @@
     font-size: 20px;
   }
 }
+
+/* ----- NEWSLETTER ----- */
+.container--newsletter-title {
+  justify-content: center;
+  margin-bottom: 16px;
+}
+.container--newsletter-title .paragraph {
+  margin: 0;
+  font-size: 24px;
+  line-height: 38px;
+  color: #ffffff;
+}
+
+.container--newsletter-subtitle {
+  justify-content: center;
+  margin-bottom: 16px;
+}
+.container--newsletter-subtitle .paragraph {
+  margin: 0;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+}
+@media only screen and (max-width: 1024px) {
+  .container--newsletter-subtitle .paragraph {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}

styles/css/vtex.store-footer.css

@@ -1,11 +1,13 @@
-.row--menu-row {
+/*
-  padding-right: 24px;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-.row--menu-row .rowContainer {
+[1200 - 1800] is where our nortal styles apply
-  align-items: flex-start;
+1800px + : Big desktop
-}
+*/
-
+/* Media Query M3 */
-.row--payment-methods {
+/* Grid breakpoints */
-  padding-top: 16px;
+.footerLayout {
+  background-color: #000000;
+  padding: 32px 32px 128px;
 }

styles/css/vtex.store-newsletter.css

@@ -0,0 +1,58 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.newsletterForm {
+  display: flex;
+  width: 53.75%;
+  margin: 0 auto;
+}
+.newsletterForm .emailInputContainer {
+  height: fit-content;
+  width: 690px;
+  border-bottom: 1px solid #929292;
+}
+.newsletterForm .emailInputContainer :global(.vtex-input-prefix__group) {
+  height: fit-content;
+  border: 0;
+}
+.newsletterForm .emailInputContainer :global(.vtex-styleguide-9-x-input) {
+  padding: 0 0 7px;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+  background: transparent !important;
+}
+@media only screen and (max-width: 1024px) {
+  .newsletterForm .emailInputContainer :global(.vtex-styleguide-9-x-input) {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.newsletterForm .formSubmitContainer {
+  border-bottom: 1px solid #929292;
+}
+.newsletterForm .formSubmitContainer :global(.vtex-button) {
+  min-height: fit-content;
+  background: transparent;
+  border: 0;
+  border-bottom: 3px solid #bfbfbf;
+  border-radius: 0;
+}
+.newsletterForm .formSubmitContainer :global(.vtex-button__label) {
+  padding: 0 16px 10px !important;
+  border: 0;
+  font-size: 0;
+  color: #ffffff;
+}
+.newsletterForm .formSubmitContainer :global(.vtex-button__label)::after {
+  content: "ENVIAR";
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+}

styles/sass/pages/product/vtex.flex-layout.scss

@@ -78,3 +78,41 @@
     margin-bottom: 0 !important;
   }
 }
+
+/* ----- NEWSLETTER ----- */
+.flexRow--newsletter-wrapper {
+  padding: 32px 0 16px;
+  // width: 30.23%;
+  // margin: 0 auto;
+  // background: red; //#000000;
+  border-bottom: 1px solid #ffffff;
+  background: #000000;
+  // display: flex;
+  // justify-content: center;
+
+  @include mq(lg, max) {
+    padding: 64px 16px 32px;
+    border-bottom: 0;
+  }
+
+  :global(.vtex-store-components-3-x-container) {
+    max-width: 4000px;
+  }
+
+  .flexRowContent--newsletter-wrapper {
+    // background-color: yellow;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.flexRowContent--newsletter-form {
+  // width: 774px; // 54.97%;
+  // margin: 0 auto;
+  border-bottom: 1px solid #929292;
+  justify-content: space-between;
+
+  .pr0 {
+    height: fit-content;
+  }
+}

styles/sass/pages/product/vtex.rich-text.scss

@@ -21,3 +21,40 @@
     }
   }
 }
+
+/* ----- NEWSLETTER ----- */
+.container--newsletter-title {
+  justify-content: center;
+  margin-bottom: 16px;
+
+  .paragraph {
+    margin: 0;
+    // font-family: "Open Sans";
+    // font-style: normal;
+    // font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+    color: #ffffff;
+  }
+}
+
+.container--newsletter-subtitle {
+  justify-content: center;
+  margin-bottom: 16px;
+
+  .paragraph {
+    margin: 0;
+    // font-family: "Open Sans";
+    // font-style: normal;
+    // font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+    text-align: center;
+    color: #929292;
+
+    @include mq(lg, max) {
+      font-size: 16px;
+      line-height: 22px;
+    }
+  }
+}

styles/sass/partials/footer/vtex.menu.scss

@@ -0,0 +1,3 @@
+.styledLinkContent {
+  color: #ffffff;
+}

styles/sass/partials/footer/vtex.store-footer.scss

@@ -0,0 +1,4 @@
+.footerLayout {
+  background-color: #000000;
+  padding: 32px 32px 128px;
+}

styles/sass/partials/newsletter/vtex.store-newsletter.scss

@@ -0,0 +1,62 @@
+.newsletterForm {
+  display: flex;
+  width: 53.75%;
+  margin: 0 auto;
+  // padding-bottom: 16px;
+
+  .emailInputContainer {
+    height: fit-content;
+    width: 690px;
+    border-bottom: 1px solid #929292;
+
+    :global(.vtex-input-prefix__group) {
+      height: fit-content;
+      border: 0;
+    }
+
+    :global(.vtex-styleguide-9-x-input) {
+      padding: 0 0 7px;
+      // background-color: yellow;
+      // font-family: "Open Sans";
+      // font-style: normal;
+      // font-weight: 400;
+      font-size: 18px;
+      line-height: 25px;
+      color: #929292;
+      background: transparent !important;
+
+      @include mq(lg, max) {
+        font-size: 12px;
+        line-height: 16px;
+      }
+    }
+  }
+
+  .formSubmitContainer {
+    border-bottom: 1px solid #929292;
+
+    :global(.vtex-button) {
+      min-height: fit-content;
+      background: transparent;
+      border: 0;
+      border-bottom: 3px solid #bfbfbf;
+      border-radius: 0;
+    }
+
+    :global(.vtex-button__label) {
+      padding: 0 16px 10px !important;
+      border: 0;
+      // font-family: "Open Sans";
+      // font-style: normal;
+      font-size: 0;
+      color: #ffffff;
+
+      &::after {
+        content: "ENVIAR";
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 19px;
+      }
+    }
+  }
+}