challenge-vtex-io-bernardo-waldhelm/react/components/Installment/index.tsx

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: any = {
    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;