challenge-vtex-io-sabrina-miranda/react/components/Pix/Pix.tsx

import React, { useEffect } from 'react';
import { useProduct } from 'vtex.product-context';

import styles from './styles.css';

const Pix = () => {

  // CEP Placeholder --------------------------------------------------------------

  useEffect(() => {
    const inputCep = document.querySelector(".vtex-address-form-4-x-input");

    inputCep?.setAttribute("placeholder", "Digite seu CEP");
  });

  // Pix --------------------------------------------------------------------------

  const productContextValue = useProduct();
  //console.log(productContextValue);
  const price = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;

  const discount = (Number(price) * (10 / 100));

  const pixValue = (Number(price) - Number(discount));

  return (
    <>
      <img
        className={styles.pixImage}
        src=' https://agenciamagma.vteximg.com.br/arquivos/pix-sabrinamiranda.png'
        alt='Imagem Pix'
      />

      <div className={styles.pixText}>
        <p className={styles.pixPrice}>R$ {pixValue.toFixed(2).replace("." , ",")}</p>
        <p className={styles.pixDiscount}>10 % de desconto</p>
      </div>
    </>
  );
}

export default Pix;