challenge-vtex-io-carlos-winter/react/components/Pix/Pix.tsx

import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./styles.css";

const Pix = () => {
  const product = useProduct();
  console.log(product);

  const pix = {
    pixValue: Number(
      product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
        .TotalValuePlusInterestRate
    ),
  };

  const priceTimes =
    product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
      .NumberOfInstallments;
  const valueTotal = product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toFixed(
    2
  )
    .toString()
    .replace(".", ",");

  const pixPrice = (pix.pixValue = pix.pixValue * 0.9)
    .toFixed(2)
    .toString()
    .replace(".", ",");

  return (
    <>
      <span className={styles.AllPriceTimesText}>
        <span className={styles.PriceTimes}>{priceTimes} x</span> de
        <span className={styles.PriceTimes}> R$ {valueTotal}</span> sem juros
      </span>
      <div className={styles.PricesWrapperRow}>
        <figure>
          <img
            src="https://agenciamagma.vteximg.com.br/arquivos/logo-pix-carloswinter.svg"
            alt="Imagem Pix"
          />
        </figure>
        <div className={styles.PricesCol}>
          <span className={styles.PixFullValue}>R${pixPrice}</span>
          <span className={styles.PixPercent}>10% de desconto</span>
        </div>
      </div>
    </>
  );

  // return <button className={styles.PixButton}>Pix</button>;
};

export default Pix;