diff --git a/react/Pix.tsx b/react/Pix.tsx
new file mode 100644
index 0000000..52ecbb2
--- /dev/null
+++ b/react/Pix.tsx
@@ -0,0 +1,3 @@
+import Pix from "./components/Pix/Pix";
+
+export default Pix;
diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx
new file mode 100644
index 0000000..c59bf76
--- /dev/null
+++ b/react/components/Pix/Pix.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./styles.css";
+
+const Pix = () => {
+ const product = useProduct();
+ const pix = {
+ pix: Number(
+ product?.selectedItem?.sellers[0].commertialOffer.Installments[0].Value
+ ),
+ };
+ const discount = pix.pix * 0.1;
+ const pixPrice = pix.pix - discount;
+
+ return (
+
+
+
+
+ R$ {pixPrice?.toFixed(2).toString().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..2b872a1
--- /dev/null
+++ b/react/components/Pix/styles.css
@@ -0,0 +1,16 @@
+.PixContent {
+ margin-top: 8px;
+ height: 24px;
+ display: flex;
+ column-gap: 26px;
+}
+
+.ImgPixContent{
+ width: 66.01px;
+ height: 24px;
+}
+
+.PixDiscount{
+ display: flex;
+ flex-direction: column;
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index b6b7aa4..6a66f9e 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -111,6 +111,7 @@
"product-rating-summary",
"flex-layout.row#selling-price",
"installment-product-component",
+ "html#pix-component",
"product-separator",
"sku-selector",
"product-quantity",
@@ -122,6 +123,12 @@
"share#default"
]
},
+ "html#pix-component": {
+ "props": {
+ "testId": "pix-price"
+ },
+ "children": ["pix-component"]
+ },
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
diff --git a/store/interfaces.json b/store/interfaces.json
index 0273250..cededb5 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -8,5 +8,8 @@
},
"installment-product-component": {
"component": "InstallmentProduct"
+ },
+ "pix-component": {
+ "component": "Pix"
}
}