react/PaymentPix.tsx

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

react/ProductDescription.tsx

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

react/components/PaymentPix/PaymentPix.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+const PaymentPix = () => {
+  const product = useProduct();
+  const pricePix = (
+    (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9
+  ).toFixed(2);
+  {
+    /*const imagePix =*/
+  }
+
+  const convertPrice = pricePix.toString().replace(".", ",");
+
+  return (
+    <div>
+      <p>R$ {convertPrice}</p>
+      <p>10% de desconto</p>
+    </div>
+  );
+};
+
+export { PaymentPix };

react/components/ProductDescription/ProductDescription.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const ProductDescription = () => {
-  return <div>Oaswq</div>;
-};
-
-export { ProductDescription };

store/blocks/pdp/product.jsonc

@@ -2,7 +2,9 @@
   "store.product": {
     "children": [
       "html#breadcrumb",
+
       "condition-layout.product#availability",
+
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
       "tab-layout#product",
@@ -117,6 +119,7 @@
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
+      "product-paymentPix-component",
       "product-separator",
       "product-identifier.product",
       "sku-selector",

store/interfaces.json

@@ -6,7 +6,7 @@
     "component": "html",
     "composition": "children"
   },
-  "product-payment-component": {
+  "product-paymentPix-component": {
-    "component": "ProductDescription"
+    "component": "PaymentPix"
   }
 }

styles/css/vtex.breadcrumb.css

@@ -14,8 +14,3 @@
 .homeLink::after {
   content: "Home";
 }
-
-.link--1 {
-  display: flex;
-  order: -1;
-}

styles/css/vtex.store-components.css

@@ -7,6 +7,7 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.productDescriptionContainer {
+/*.productDescriptionContainer {
   background: red;
 }
+*/

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -6,7 +6,3 @@
     content: "Home";
   }
 }
-.link--1 {
-  display: flex;
-  order: -1;
-}

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

@@ -1,3 +1,4 @@
-.productDescriptionContainer {
+/*.productDescriptionContainer {
   background: red;
 }
+*/

styles/sass/utils/_vars.scss

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+
 $color-black: #292929;
 
 $color-white: #fff;
@@ -14,18 +16,18 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+  xs: 0,
-	cstm: 400,
+  cstm: 400,
-	sm: 576px,
+  sm: 576px,
-	md: 768px,
+  md: 768px,
-	lg: 992px,
+  lg: 992px,
-	xl: 1200px
+  xl: 1200px,
 ) !default;
 
 $z-index: (
-	level1: 5,
+  level1: 5,
-	level2: 10,
+  level2: 10,
-	level3: 15,
+  level3: 15,
-	level4: 20,
+  level4: 20,
-	level5: 25
+  level5: 25,
 ) !default;