challenge-vtex-io-amanda-almeida/react/components/pix/index.tsx

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

const Pix = () => {
  const productContext = useProduct();
  const price = productContext?.product?.priceRange.sellingPrice.highPrice;
  const CSS_HANDLES = [
    "pix",
    "pixImage",
    "containerPix",
    "imagePix",
    "pricePix",
    "textPix",
  ];
  const { handles } = useCssHandles(CSS_HANDLES);

  let pixPrice;

  if (price !== undefined) {
    const value = (price / 100) * 10;
    const valuePix = price - value;
    pixPrice = "R$ " + valuePix.toFixed(2).toString().replace(".", ",");
  }

  return (
    <section className={handles.pix}>
      <img
        className={handles.pixImage}
        src="https://agenciamagma.vtexassets.com/assets/vtex.file-manager-graphql/images/d5b39cd0-ca30-48ea-98f0-47655b4a7d79___cbd3e3c1bc0541759327951dd21c6a45.png"
        alt=""
      />
      <div className={handles.containerPix}>
        <span className={handles.pricePix}>{pixPrice}</span>
        <p className={handles.textPix}>10% de desconto</p>
      </div>
    </section>
  );
};

export default Pix;