challenge-vtex-io-savio-carvalho-moraes/react/components/PaymentPix/PaymentPix.tsx

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

import styles from "./styles.css";

const PaymentPix = () => {
  const product = useProduct();
  const pricePix = (
    (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9
  ).toFixed(2);

  const imagePix =
    "https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png";

  const convertPrice = pricePix.toString().replace(".", ",");

  return (
    <div className={styles.paymentPixWrapper}>
      <img
        className={styles.paymentPixImg}
        src={imagePix}
        alt="Imagem do Pix"
      />
      <div className={styles.paymentPixText}>
        <p className={styles.paymentPixValue}>R$ {convertPrice}</p>
        <p className={styles.paymentPixDiscount}>10% de desconto</p>
      </div>
    </div>
  );
};

export { PaymentPix };