diff --git a/react/Pix.ts b/react/Pix.ts new file mode 100644 index 0000000..06f972d --- /dev/null +++ b/react/Pix.ts @@ -0,0 +1,4 @@ +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..4265913 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +const Pix = () => { + const productContextValue = useProduct()?.product?.priceRange?.sellingPrice + ?.highPrice; + + return ( + <> +
+ Pix +
+

+ {`R$ ${(productContextValue! - productContextValue! * 0.1) + .toFixed(2) + .replace(".", ",")}` + } +

+

+ 10% de desconto +

+
+
+ + + + ); +}; + +export default Pix; + + diff --git a/react/components/Pix/pix-ramon.svg b/react/components/Pix/pix-ramon.svg new file mode 100644 index 0000000..a132f66 --- /dev/null +++ b/react/components/Pix/pix-ramon.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 751300f..c47a827 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -117,8 +117,9 @@ // "product-rating-summary", // "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments", + "html#price", + "html#installments", + "html#pix", // "product-separator", "sku-selector", "product-quantity", @@ -131,6 +132,27 @@ ] }, + "html#installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "html#pix": { + "props": { + "testId": "pix-price" + }, + "children": ["Pix"] + }, + + "html#price": { + "props": { + "testId": "product-price" + }, + "children": ["flex-layout.row#selling-price"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3,