feat(product): adicionando component pix

react/PixDiscount.tsx

@@ -0,0 +1,2 @@
+import PixDiscount from "./components/PixDiscount/index";
+export default PixDiscount;

react/components/Installment/index.tsx

@@ -6,7 +6,7 @@ const Installment = () => {
   const skuProduct = useProduct();
   console.log(skuProduct);
 
-  const productInstallment = {
+  const productInstallment: any = {
     numberOfInstallment:
       skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
         .NumberOfInstallments,

react/components/PixDiscount/PixDiscount.module.css

@@ -0,0 +1,38 @@
+.pixContainer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 39px;
+  column-gap: 26px;
+  margin-top: 8px;
+}
+
+.pixContainer__img {
+  width: 66px;
+  height: 24px;
+}
+
+.pixContainer__discount {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.pixContainer__priceFinal {
+  font-family: 'Open Sans', sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+.pixContainer__discount__value {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+  color: #929292;
+}

react/components/PixDiscount/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./PixDiscount.module.css";
+
+const PixDiscount = () => {
+  const skuProduct = useProduct();
+  const productPrice = {
+    price: Number(
+      skuProduct?.selectedItem?.sellers[0]?.commertialOffer?.Price.toFixed(2)
+    ),
+  };
+
+  const discount = productPrice.price * 0.1;
+  const pixPrice = productPrice.price - discount;
+
+  console.log(pixPrice);
+
+  return (
+    <div className={styles["pixContainer"]}>
+      <img
+        src="https://agenciamagma.vteximg.com.br/arquivos/icon-pix-bernardoWaldhelm-m3academy.svg"
+        alt="Pix"
+        className={styles["pixContainer__img"]}
+      />
+      <div className={styles["pixContainer__discount"]}>
+        <span className={styles["pixContainer__priceFinal"]}>
+          R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
+        </span>
+        <span className={styles["pixContainer__discount__value"]}>
+          10% de desconto
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default PixDiscount;

react/index.d.ts

@@ -1 +1,2 @@
 declare module "*.module.css";
+declare module "*.svg";

store/blocks/pdp/product.jsonc

@@ -113,7 +113,8 @@
       // "flex-layout.row#list-price-savings", preço com promoção vindo vtex
       "flex-layout.row#selling-price",
       "installment-component",
-      "product-separator",
+      "html#pix-component",
+      // "product-separator", //linha que separa preço de skus
       "sku-selector",
       "product-quantity",
       "product-assembly-options",
@@ -141,6 +142,14 @@
     }
   },
 
+  "html#pix-component": {
+    "props": {
+      "tag": "section",
+      "testId": "pix-price"
+    },
+    "children": ["pix-component"]
+  },
+
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,

store/interfaces.json

@@ -8,6 +8,9 @@
   },
   "installment-component": {
     "component": "Installment"
+  },
+  "pix-component": {
+    "component": "PixDiscount"
   }
 
 }