feat: add newsletter

react/Newsletter.tsx

@@ -0,0 +1,3 @@
+import Newsletter from './components/Newsletter/Newsletter';
+
+export default Newsletter;

react/components/Newsletter/Newsletter.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from './styles.css'
+
+const Newsletter = () => {
+  return (
+    <div className={styles["newsletter"]} >
+      <h4 className={styles['newsletter-title']}>Assine nossa newsletter</h4>
+      <p className={styles['newsletter-description']}>Receba ofertas e novidades por e-mail</p>
+      <div className={styles["input-container"]}>
+        <input className={styles["newsletter-input"]} type="email" placeholder='Digite seu e-mail' />
+        <button className={styles["newsletter-btn"]} type="submit">Enviar</button>
+      </div>
+    </div >
+  )
+}
+
+export default Newsletter;

react/components/Newsletter/styles.css

@@ -0,0 +1,45 @@
+.newsletter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #000;
+  color: #fff;
+  padding: 32px 0 15px 0;
+}
+
+.newsletter-title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}
+
+.newsletter-description {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+}
+
+.newsletter-input {
+  background-color: #000;
+  color: #929292;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: solid 1px #929292;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+}
+
+.newsletter-btn {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 3px solid #bfbfbf;
+  background-color: #000;
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+}

react/index.d.ts

@@ -0,0 +1,7 @@
+declare module "*.css" {
+  interface IClassNames{
+    [className: string]: string;
+  }
+  const classNames: IClassNames;
+  export = classNames;
+}

react/tsconfig.json

@@ -2,10 +2,16 @@
   "extends": "@vtex/tsconfig",
   "compilerOptions": {
     "noEmitOnError": false,
-    "lib": ["dom"],
+    "lib": [
+      "dom"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "target": "es2017"
   },
-  "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
+  "include": [
-}
+    "./typings/*.d.ts",
+    "./**/*.tsx",
+    "./**/*.ts"
+  ]
+}

store/blocks/pdp/product.jsonc

@@ -7,7 +7,8 @@
       "flex-layout.row#specifications-title",
       "product-specification-group#table",
       "shelf.relatedProducts",
-      "product-questions-and-answers"
+      "product-questions-and-answers",
+      "custom-newsletter"
     ]
   },
   "html#breadcrumb": {
@@ -91,6 +92,16 @@
     }
   },
   "flex-layout.row#product-image": {
+    "children": [
+      "html#product-image"
+    ]
+  },
+  "html#product-image": {
+    "props": {
+      "tag": "section",
+      "testId": "product-image",
+      "blockClass": "product-image"
+    },
     "children": [
       "product-images"
     ]
@@ -116,7 +127,6 @@
       "flex-layout.row#selling-price",
       "product-installments",
       "product-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",
@@ -170,7 +180,6 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
       "sku-selector",
       "flex-layout.row#availability"
     ]

store/blocks/product-price.jsonc

@@ -10,7 +10,6 @@
       "product-selling-price"
     ]
   },
-
   "flex-layout.row#list-price-savings": {
     "props": {
       "colGap": 2,
@@ -20,8 +19,12 @@
       "marginTop": 5
     },
     "children": [
-      "product-list-price",
+      "product-identifier.product"
-      "product-price-savings"
     ]
+  },
+  "product-identifier.product": {
+    "props": {
+      "label": "hide"
+    }
   }
 }

store/interfaces.json

@@ -5,5 +5,8 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "custom-newsletter": {
+    "component": "Newsletter"
   }
 }

styles/configs/style.json

@@ -253,91 +253,91 @@
         "measure": [30, 34, 20],
         "styles": {
           "heading-1": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "700",
             "fontSize": "3rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-2": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "700",
             "fontSize": "2.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-3": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "700",
             "fontSize": "1.75rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-4": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.5rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-5": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-6": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "body": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "small": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "0.875rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "mini": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "0.75rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "action": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "500",
             "fontSize": "1rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "action--small": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "500",
             "fontSize": "0.875rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "action--large": {
-            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "500",
             "fontSize": "1.25rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "code": {
-            "fontFamily": "Consolas, monaco, monospace",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1rem",
             "textTransform": "initial",

styles/css/vtex.breadcrumb.css

@@ -5,6 +5,7 @@
   line-height: 19px;
   font-weight: 400;
   color: #929292 !important;
+  padding: 0 40px;
 }
 
 .homeIcon {

styles/css/vtex.flex-layout.css

@@ -43,7 +43,7 @@
 }
 
 .flexRow--deals {
-  background-color: #0F3E99;
+  background-color: #0f3e99;
   padding: 14px 0px;
 }
 

styles/css/vtex.product-identifier.css

@@ -1,3 +1,10 @@
 .product-identifier--productReference {
   margin-bottom: 1rem;
 }
+
+.product-identifier__value {
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}

styles/css/vtex.store-components.css

@@ -8,5 +8,41 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .newsletter {
-  background: red;
+  background: rgb(0, 0, 0);
-}
+  color: #ffff;
+}
+
+.swiperCaret {
+  display: none;
+}
+
+.swiper-pagination {
+  display: none;
+}
+
+.thumbImg,
+.carouselThumbBorder,
+.productImagesThumb,
+.productImagesThumbActive,
+.figure {
+  width: 90px !important;
+  height: 90px !important;
+  margin-bottom: 0 !important;
+}
+
+.carouselGaleryThumbs :first-child {
+  display: flex;
+  gap: 16px;
+}
+
+.productImageTag {
+  width: 664px !important;
+}
+
+.productNameContainer {
+  text-align: right;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}

styles/sass/pages/product/vtex.store-components.scss

@@ -1,3 +1,3 @@
-.newsletter{
+.newsletter {
-    background: red;
+  background: red;
-}
+}