challenge-vtex-io-eleonora-otz/react/components/Pix/Pix.tsx

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

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

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

  const productValue = useProduct();

  const priceProduct =
    productValue?.product?.priceRange?.sellingPrice?.lowPrice;

  const descountValue = (Number(priceProduct) * 10) / 100;

  const totalValue = Number(priceProduct) - Number(descountValue);

  return (
    <div className={styles["pix-container"]}>
      <div className={styles["pix-content"]}>
        <div className={styles["pix-image"]}>
          <img
            src="https://agenciamagma.vtexassets.com/arquivos/pix-eleonoraotz.png"
            alt="10% de desconto no Pix"
          />
        </div>
        <div className={styles["pix-descount"]}>
          <p className={styles["pix-value"]}>
            R$ {totalValue.toFixed(2).replace(".", ",")}
          </p>
          <p className={styles["pix-text"]}>10 % de desconto</p>
        </div>
      </div>
    </div>
  );
};

export default Pix;