challenge-vtex-io-daniel-moliari-barbosa/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();

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

  const pixPrice = (pix.pixValue = pix.pixValue * 0.9)
    .toFixed(2)
    .toString()
    .replace(".", ",");
  return (
    <>
      <div className={styles.PricesWrapperRow}>
        <figure>
          <img
            src="https://agenciamagma.vteximg.com.br/arquivos/pix-danielmoliari.svg"
            alt="Imagem Pix"
          />
        </figure>
        <p className={styles.PricesCol}>
          <span className={styles.PixFullValue}>R${pixPrice}</span>
          <span className={styles.PixPercent}>10% de desconto</span>
        </p>
      </div>
    </>
  );
};

export default Pix;