From f6d0f2d94a66a7ad8f4ee96493790c17ca86edb5 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Wed, 25 Jan 2023 12:47:22 -0300
Subject: [PATCH] feat: adicionando componente Pix

---
 react/Pix.tsx                   |  3 +++
 react/components/Pix/Pix.tsx    | 32 ++++++++++++++++++++++++++++++++
 react/components/Pix/styles.css | 16 ++++++++++++++++
 store/blocks/pdp/product.jsonc  |  7 +++++++
 store/interfaces.json           |  3 +++
 5 files changed, 61 insertions(+)
 create mode 100644 react/Pix.tsx
 create mode 100644 react/components/Pix/Pix.tsx
 create mode 100644 react/components/Pix/styles.css

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 (
+    <div className={styles.PixContent}>
+      <img
+        className={styles.ImgPixContent}
+        src="https://agenciamagma.vteximg.com.br/arquivos/icon-pix-anacarolinaduartecavalcante-m3academy.svg"
+        alt="logo pix"
+      />
+      <div className={styles.PixDiscount}>
+        <strong>
+          R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
+        </strong>
+        <span>10 % de desconto</span>
+      </div>
+    </div>
+  );
+};
+
+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"
   }
 }