react/Installment.tsx

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

react/components/Installment/Installment.module.css

@@ -0,0 +1,15 @@
+.installment-product {
+  font-family: 'Open Sans', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  margin: 0;
+  padding: 0;
+  height: 22px;
+  color: #929292;
+}
+
+.installment-product__strong {
+  font-weight: 700;
+}

react/components/Installment/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./Installment.module.css";
+
+const Installment = () => {
+  const skuProduct = useProduct();
+  console.log(skuProduct);
+
+  const productInstallment = {
+    numberOfInstallment:
+      skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
+        .NumberOfInstallments,
+    value:
+      skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
+        .Value,
+  };
+
+  return (
+    <p className={styles["installment-product"]}>
+      <span className={styles["installment-product__strong"]}>
+        {productInstallment.numberOfInstallment}x{" "}
+      </span>
+      de
+      <span className={styles["installment-product__strong"]}>
+        {""} R${" "}
+        {productInstallment.value?.toFixed(2).toString().replace(".", ",")}{" "}
+      </span>
+      sem juros
+    </p>
+  );
+};
+
+export default Installment;

react/index.d.ts

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

store/blocks/pdp/product.jsonc

@@ -112,7 +112,7 @@
       // "product-rating-summary",
       // "flex-layout.row#list-price-savings", preço com promoção vindo vtex
       "flex-layout.row#selling-price",
-      "product-installments",
+      "installment-component",
       "product-separator",
       "sku-selector",
       "product-quantity",
@@ -127,7 +127,6 @@
 
   "flex-layout.row#product-name": {
     "props": {
-      "marginBottom": 3,
       "blockClass": "product__name"
     },
     "children": ["vtex.store-components:product-name"]
@@ -136,7 +135,9 @@
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true
+      "showValueNameForImageVariation": true,
+      "blockClass": "sku-product"
+
     }
   },
 

store/interfaces.json

@@ -5,5 +5,9 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "installment-component": {
+    "component": "Installment"
   }
+
 }

styles/css/vtex.flex-layout.css

@@ -105,12 +105,15 @@
   padding-bottom: 1rem;
 }
 
+.flexRowContent--product__image {
+  padding: 0;
+  margin: 0;
+}
 @media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
   .flexRowContent--product__image {
     flex-direction: column;
   }
 }
-
 .flexRowContent--product__image .stretchChildrenWidth:first-child {
   padding-right: 16px;
   margin-right: 16px;

styles/css/vtex.product-price.css

@@ -8,9 +8,8 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
 /* Grid breakpoints */
-.sellingPriceValue {
+.sellingPrice {
   font-family: "Open Sans", sans-serif;
-  font-style: normal;
   font-weight: 700;
   font-size: 25px;
   line-height: 38px;

styles/sass/pages/product/vtex.flex-layout.scss

@@ -97,13 +97,13 @@
   padding-bottom: 1rem;
 }
 
-.flexRowContent--product__image{
+.flexRowContent--product__image {
+  padding: 0;
+  margin: 0;
+
   @media #{$mq-tablet},  #{$mq-mobile} {
     flex-direction: column;
   }
-}
-
-.flexRowContent--product__image {
   .stretchChildrenWidth {
 
     &:first-child {

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

@@ -1,6 +1,5 @@
-.sellingPriceValue{
+.sellingPrice {
   font-family: $font-family;
-  font-style: normal;
   font-weight: 700;
   font-size: 25px;
   line-height: 38px;