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 ( +
+ logo pix +
+ + 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" } }