diff --git a/react/Pix.tsx b/react/Pix.tsx
new file mode 100644
index 0000000..4811319
--- /dev/null
+++ b/react/Pix.tsx
@@ -0,0 +1 @@
+export { default } from "./components/Pix/Pix";
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index a2d88b3..26ae228 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -104,3 +104,10 @@
[class*="html--right-col"] button {
display: none;
}
+
+[class*="html--pix"] {
+ display: flex;
+ align-items: center;
+ margin-top: 8px;
+ margin-bottom: 16px;
+}
diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx
new file mode 100644
index 0000000..02744f7
--- /dev/null
+++ b/react/components/Pix/Pix.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useProduct } from 'vtex.product-context';
+
+import styles from './styles.css';
+
+const Pix = () => {
+
+ const productContextValue = useProduct();
+ //console.log(productContextValue);
+
+ const price = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
+
+ const discount = (Number(price) * (10 / 100));
+
+ const pixValue = (Number(price) - Number(discount));
+
+ return (
+ <>
+
+
+
+
R$ {pixValue.toFixed(2).replace("." , ",")}
+
10 % de desconto
+
+ >
+ );
+}
+
+export default Pix;
diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css
new file mode 100644
index 0000000..c7a39c9
--- /dev/null
+++ b/react/components/Pix/styles.css
@@ -0,0 +1,26 @@
+.pixImage {
+ margin-right: 26px;
+ width: 66px;
+ height: 24px;
+}
+
+.pixText {
+ display: flex;
+ flex-direction: column;
+}
+
+.pixPrice {
+ margin: 0;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ color: rgba(0, 0, 0, 0.58);
+}
+
+.pixDiscount {
+ margin: 0;
+ font-weight: 300;
+ font-size: 13px;
+ line-height: 18px;
+ color: #929292;
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index b2dfb36..3ff38ce 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -130,6 +130,14 @@
]
},
+ "html#pix-price": {
+ "props": {
+ "blockClass": "pix",
+ "testId": "pix-price"
+ },
+ "children": ["pix-component"]
+ },
+
"html#right-col": {
"props": {
"tag": "section",
@@ -141,6 +149,7 @@
"product-rating-summary",
"flex-layout.row#selling-price",
"product-installments#m3",
+ "html#pix-price",
"html#sku-selector-m3",
"html#product-quantity-cart-button",
"product-assembly-options",
diff --git a/store/interfaces.json b/store/interfaces.json
index c4b2ac4..7a7dfed 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -5,5 +5,8 @@
"html": {
"component": "html",
"composition": "children"
+ },
+ "pix-component": {
+ "component": "Pix"
}
}
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 33e040b..e4fd5f5 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -63,10 +63,13 @@
color: #929292;
}
*/
+.skuSelectorNameContainer {
+ margin: 0;
+}
+
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
- margin-top: 16px;
margin-bottom: 16px;
}
.skuSelectorContainer :global(.vtex-store-components-3-x-skuSelectorItemImageValue) {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 23c77d9..64347d3 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -52,10 +52,14 @@
color: #929292;
}
*/
+
+.skuSelectorNameContainer {
+ margin: 0;
+}
+
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
- margin-top: 16px;
margin-bottom: 16px;
:global(.vtex-store-components-3-x-skuSelectorItemImageValue) {