feat(main): cria componente de pix

react/PixDiscount.tsx

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

react/components/Html/styles.css

@@ -2,3 +2,11 @@
   background-color: yellow;
   padding-right: 16px;
 } */
+
+[class*="html--pix-price"] {
+  display: flex;
+  align-items: flex-end;
+  gap: 26px;
+  margin-top: 8px;
+  margin-bottom: 16px;
+}

react/components/PixDiscount/PixDiscount.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./styles.css";
+// import { useQuery } from "react-apollo";
+// import pixPrice from "../../graphql/pixPrice.graphql";
+
+const PixDiscount = () => {
+  const productContextValue = useProduct();
+
+  const sellingPrice =
+    productContextValue?.product?.priceRange?.sellingPrice?.highPrice;
+
+  const pixPrice = (sellingPrice! * 0.9).toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+
+  console.log(productContextValue);
+
+  return (
+    <>
+      <p className={styles.pixDiscount}>{`R$ ${pixPrice}`}</p>
+      {/* <p>{testingApi}</p> */}
+    </>
+  );
+};
+
+export default PixDiscount;
+
+// "vtex.search-graphql": "0.x"
+
+// const { data } = useQuery(pixPrice, {
+//   variables: {
+//     slug: productContextValue?.product?.productName,
+//   },
+//   ssr: false,
+// });
+
+// const testingApi = fetch(
+//   "https://agenciamagma.dev.com.br/api/checkout/pub/orderForms/simulation"
+// )
+//   .then((response) => response.json())
+//   .then((data) => console.log(data));

react/components/PixDiscount/styles.css

@@ -0,0 +1,8 @@
+.pixDiscount {
+  /* background-color: red; */
+  margin: 0;
+  /* font-family: "Open Sans"; */
+  font-weight: 700;
+  font-size: 18px;
+  color: rgba(0, 0, 0, 0.58);
+}

react/typings/css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+    const css: any;
+    export default css;
+}

store/blocks/pdp/product.jsonc

@@ -184,10 +184,11 @@
       "flex-layout.row#product-name",
       "product-identifier.product",
       // "product-rating-summary",
-      // "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      // "product-separator",
+      // "flex-layout.row#list-price-savings",
+      "html#pix-price",
+      "product-separator",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",
@@ -207,6 +208,33 @@
     "children": ["vtex.store-components:product-name"]
   },
 
+  "html#pix-price": {
+    "props": {
+      "tag": "div",
+      "testId": "pix-price",
+      "blockClass": "pix-price"
+    },
+    "children": ["image#pix-logo", "flex-layout.col#pix-discount"]
+  },
+
+  // "flex-layout.col#pix-image": {
+  //   "children": ["image#pix-logo"]
+  // },
+
+  "image#pix-logo": {
+    "props": {
+      "src": "https://agenciamagma.vteximg.com.br/arquivos/pix-andreamm.svg",
+      "blockClass": "pix-logo"
+    }
+  },
+
+  "flex-layout.col#pix-discount": {
+    "children": ["pix-discount", "product-price-savings"],
+    "props": {
+      "blockClass": "pix-discount"
+    }
+  },
+
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,

store/blocks/product-price.jsonc

@@ -25,5 +25,12 @@
       "message": "{installmentsNumber} x de {installmentValue} sem juros",
       "installmentsCriteria": "max-quantity-without-interest"
     }
+  },
+
+  "product-price-savings": {
+    "props": {
+      "mininumPercentage": 10,
+      "message": "10% de desconto" //{savingsPercentage}
+    }
   }
 }

store/interfaces.json

@@ -5,5 +5,8 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "pix-discount": {
+    "component": "PixDiscount"
   }
 }

styles/css/vtex.product-price.css

@@ -25,3 +25,9 @@
 .installments .currencyContainer {
   font-weight: 700;
 }
+
+.savings {
+  font-weight: 300;
+  font-size: 13px;
+  color: #929292;
+}

styles/css/vtex.store-components.css

@@ -59,3 +59,9 @@
   line-height: 34px;
   color: #575757;
 }
+
+.imageElement--pix-logo {
+  width: 66px;
+  height: 24px;
+  padding-bottom: 5px;
+}

styles/sass/pages/product/vtex.product-price.scss

@@ -18,8 +18,11 @@
   .currencyContainer {
     font-weight: 700;
   }
-
-  // .installmentValue {
-  //   display: inline;
-  // }
+}
+
+.savings {
+  // font-family: "Open Sans";
+  font-weight: 300;
+  font-size: 13px;
+  color: #929292;
 }

styles/sass/pages/product/vtex.store-components.scss

@@ -64,3 +64,9 @@
   line-height: 34px;
   color: #575757;
 }
+
+.imageElement--pix-logo {
+  width: 66px;
+  height: 24px ;
+  padding-bottom: 5px;
+}