challenge-vtex-io-rafael-sampaio/react/components/PixPrice/PixPrice.tsx

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

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

  //   // inputCep.setAttribute('placeholder', 'Digite seu CEP');

  //   console.log(inputCep);
  // });

  const productContextValue = useProduct();

  const productPrice =
    productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;

  const descount = (Number(productPrice) * 10) / 100;

  const total = Number(productPrice) - Number(descount.toFixed(2));

  return (
    <div className={styles["pixPrice-container"]}>
      <div className={styles["pixPrice-content"]}>
        <div className={styles["pixPrice-img"]}>
          <img
            src="https://agenciamagma.vtexassets.com/arquivos/pixRafaelSampaio.png"
            alt=""
          />
        </div>
        <div className={styles["pixPrice-descount"]}>
          <p className={styles["pixPrice-value"]}>R$ {total.toFixed(2)}</p>
          <p className={styles["pixPrice-text"]}>10 % de desconto</p>
        </div>
      </div>
    </div>
  );
};

export default PixPrice;