react/Pix.tsx

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

react/components/Html/styles.css

@@ -104,3 +104,10 @@
 [class*="html--right-col"] button {
   display: none;
 }
+
+[class*="html--pix"] {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  margin-bottom: 16px;
+}

react/components/Pix/Pix.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useProduct } from 'vtex.product-context';
+
+import styles from './styles.css';
+
+const Pix = () => {
+
+    const productContextValue = useProduct();
+    //console.log(productContextValue);
+
+    const price = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
+
+    const discount = (Number(price) * (10 / 100));
+
+    const pixValue = (Number(price) - Number(discount));
+
+  return (
+    <>
+      <img
+        className={styles.pixImage}
+        src=' https://agenciamagma.vteximg.com.br/arquivos/pix-sabrinamiranda.png'
+        alt='Imagem Pix'
+      />
+
+      <div className={styles.pixText}>
+        <p className={styles.pixPrice}>R$ {pixValue.toFixed(2).replace("." , ",")}</p>
+        <p className={styles.pixDiscount}>10 % de desconto</p>
+      </div>
+    </>
+  );
+}
+
+export default Pix;

react/components/Pix/styles.css

@@ -0,0 +1,26 @@
+.pixImage {
+  margin-right: 26px;
+  width: 66px;
+  height: 24px;
+}
+
+.pixText {
+  display: flex;
+  flex-direction: column;
+}
+
+.pixPrice {
+  margin: 0;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+.pixDiscount {
+  margin: 0;
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+  color: #929292;
+}

store/blocks/pdp/product.jsonc

@@ -130,6 +130,14 @@
     ]
   },
 
+  "html#pix-price": {
+    "props": {
+      "blockClass": "pix",
+      "testId": "pix-price"
+    },
+    "children": ["pix-component"]
+  },
+
   "html#right-col": {
     "props": {
       "tag": "section",
@@ -141,6 +149,7 @@
       "product-rating-summary",
       "flex-layout.row#selling-price",
       "product-installments#m3",
+      "html#pix-price",
       "html#sku-selector-m3",
       "html#product-quantity-cart-button",
       "product-assembly-options",

store/interfaces.json

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

styles/css/vtex.store-components.css

@@ -63,10 +63,13 @@
   color: #929292;
 }
 */
+.skuSelectorNameContainer {
+  margin: 0;
+}
+
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
-  margin-top: 16px;
   margin-bottom: 16px;
 }
 .skuSelectorContainer :global(.vtex-store-components-3-x-skuSelectorItemImageValue) {

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

@@ -52,10 +52,14 @@
   color: #929292;
 }
 */
+
+.skuSelectorNameContainer {
+  margin: 0;
+}
+
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
-  margin-top: 16px;
   margin-bottom: 16px;
 
   :global(.vtex-store-components-3-x-skuSelectorItemImageValue) {