feat(pdp): Adiciona componente pix

react/Pix.tsx

@@ -0,0 +1,3 @@
+import Pix from "./components/Pix/Pix";
+
+export default Pix;

react/components/Pix/Pix.module.css

@@ -0,0 +1,3 @@
+.containerPix {
+  background-color: red;
+}

react/components/Pix/Pix.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./Pix.module.css";
+
+const Pix = () => {
+  const price = useProduct()?.product?.priceRange?.sellingPrice?.highPrice;
+  const discount = (Number(price) * 10) / 100;
+  const priceWithDiscount = Number(price) - Number(discount);
+  return (
+    <div className={styles.containerPix}>
+      <img
+        src="https://agenciamagma.vtexassets.com/arquivos/pix-cainamilech.png"
+        alt="Imagem do pix"
+      />
+      <div>
+        <p>R$ {priceWithDiscount.toFixed(2)}</p>
+        <p>10 % de desconto</p>
+      </div>
+    </div>
+  );
+};
+
+export default Pix;

react/index.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

store/blocks/pdp/product.jsonc

@@ -2,7 +2,7 @@
   "store.product": {
     "children": [
       /*"html#breadcrumb",*/
-      "breadcrumb#teste1",
+      "breadcrumb#pdp",
       "condition-layout.product#availability",
       "tab-layout#details",
       /*"html#description",*/
@@ -22,15 +22,6 @@
       "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"
     }
   },
 
@@ -167,21 +158,21 @@
     }
   },
 
-  "breadcrumb#teste1": {
+  "breadcrumb#pdp": {
     "props": {
       "blockClass": "testebread",
       "showOnMobile": true
     }
   },
 
-  "html#breadcrumb": {
+  /*"html#breadcrumb": {
     "props": {
       "tag": "section",
       "testId": "breadcrumbs",
       "blockClass": "pdp-breadcrumb"
     },
     "children": ["breadcrumb"]
-  },
+  },*/
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -275,6 +266,7 @@
       /*"flex-layout.row#list-price-savings", desconto*/
       "flex-layout.row#selling-price",
       "product-installments",
+      "Pix",
       /*"product-separator",*/
       "sku-selector",
       /*"product-quantity",*/

store/interfaces.json

@@ -5,5 +5,8 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "Pix": {
+    "component": "Pix"
   }
 }

styles/css/vtex.store-components.css

@@ -410,18 +410,25 @@
 }
 
 .newsletter--newsletter {
+  justify-content: center;
+  display: flex;
   margin-top: 64px;
   padding-top: 32px;
   padding-bottom: 16px;
   background-color: #000000;
+  border-bottom: 1px solid #fff;
 }
 
 .container--newsletter {
+  /*width: 53.75%;*/
+  width: 774px;
   color: #fff;
+  max-width: unset;
 }
 
 .form--newsletter {
   position: relative;
+  max-width: unset;
 }
 .form--newsletter :global(.vtex-styleguide-9-x-noAppearance) {
   background-color: #000000;
@@ -434,6 +441,18 @@
   padding-bottom: 4px;
   align-items: flex-end;
 }
+.form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators) {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+.form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators)::placeholder {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
 
 .label--newsletter {
   font-weight: 400;
@@ -444,8 +463,8 @@
 .label--newsletter::after {
   content: "Receba ofertas e novidades por e-mail";
   position: absolute;
-  right: 100px;
+  right: 234px;
-  top: 42px;
+  top: 50px;
   font-weight: 400;
   font-size: 18px;
   line-height: 25px;
@@ -456,3 +475,23 @@
   margin-top: 40px;
   padding: 0;
 }
+
+.buttonContainer--newsletter {
+  margin: 0;
+  padding: 0;
+  width: 84px;
+}
+.buttonContainer--newsletter :global(.vtex-button) {
+  border: none;
+  border-radius: 0%;
+  border-bottom: 3px solid #bfbfbf;
+  background-color: transparent;
+  width: 100%;
+}
+.buttonContainer--newsletter :global(.vtex-button) :global(.vtex-button__label) {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+  padding: 0;
+}

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

@@ -469,17 +469,24 @@
 //NEWSLETTER
 
 .newsletter--newsletter {
+  justify-content: center;
+  display: flex;
   margin-top: 64px;
   padding-top: 32px;
   padding-bottom: 16px;
   background-color: $color-black-100;
+  border-bottom: 1px solid $color-white;
 }
 .container--newsletter {
+  /*width: 53.75%;*/
+  width: 774px;
   color: $color-white;
+  max-width: unset;
 }
 
 .form--newsletter {
   position: relative;
+  max-width: unset;
 
   :global(.vtex-styleguide-9-x-noAppearance) {
     background-color: $color-black-100;
@@ -492,6 +499,20 @@
     border-radius: 0%;
     padding-bottom: 4px;
     align-items: flex-end;
+
+    :global(.vtex-styleguide-9-x-hideDecorators) {
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 25px;
+      color: $color-gray6;
+
+      &::placeholder {
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        color: $color-gray6;
+      }
+    }
   }
 }
 
@@ -503,8 +524,8 @@
   &::after {
     content: "Receba ofertas e novidades por e-mail";
     position: absolute;
-    right: 100px;
+    right: 234px;
-    top: 42px;
+    top: 50px;
     font-weight: 400;
     font-size: 18px;
     line-height: 25px;
@@ -516,3 +537,25 @@
   margin-top: 40px;
   padding: 0;
 }
+
+.buttonContainer--newsletter {
+  margin: 0;
+  padding: 0;
+  width: 84px;
+
+  :global(.vtex-button) {
+    border: none;
+    border-radius: 0%;
+    border-bottom: 3px solid $color-gray9;
+    background-color: transparent;
+    width: 100%;
+
+    :global(.vtex-button__label) {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-white;
+      padding: 0;
+    }
+  }
+}