challenge-vtex-io-leonardo-pereira-rocha/react/components/ProductContext/ProductContext.tsx

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

const ProductContext = () => {
  useEffect(() => {
    const intervalId = setInterval(() => {
      const cepInput = document.querySelector(".vtex-address-form-4-x-input");
      if (cepInput) {
        cepInput.setAttribute("placeholder", "Digite seu CEP");
        console.log(cepInput);
        clearInterval(intervalId);
      }
    }, 50);
  }, []);

  const productContextValue = useProduct();

  return (
    <div className={styles.pixWrapper}>
      <div className={styles.imagePix}>
        <img
          src="https://agenciamagma.vtexassets.com/arquivos/pix-leo.svg"
          alt="pix"
        />
      </div>
      <div className={styles.textBox}>
        <p className={styles.textPrice}>
          {productContextValue?.product?.priceRange?.sellingPrice?.highPrice}
        </p>
        <p className={styles.textDescount}>10 % de desconto</p>
      </div>
    </div>
  );
};

export default ProductContext;