challenge-vtex-io-emersonfully/react/components/Pix/Pix.tsx

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

const Pix = () => {
  const productContextValue = useProduct()?.product?.priceRange?.sellingPrice
    ?.highPrice;

  return (
    <>
      <div className="pix-container">
        <div className="pix_img-container">
          <img
            src="https://agenciamagma.vtexassets.com/arquivos/icon_pix-m3academyemersonfully.png"
            alt="Pix"
          />
        </div>
        <div className="pix_price-container">
          {`R$ ${(productContextValue! - productContextValue! * 0.1)
            .toFixed(2)
            .replace(".", ",")}`}
          <div className="pix_discount-container">
            <p>10% de desconto</p>
          </div>
        </div>
      </div>
    </>
  );
};

export default Pix;