challenge-vtex-io-Rhayllon-Daudt/react/components/Pix/Pix.tsx

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


const Pix = () => {
  const product  = useProduct()
  let pixValueTotal:any = product?.product?.priceRange?.sellingPrice?.lowPrice;
  let pixValueTotalNumber = parseFloat(pixValueTotal);
  let porcentagemDesconto = 10;
  let desconto = (pixValueTotalNumber / 100)* porcentagemDesconto;
  let pixValueDesconto = (pixValueTotal - desconto).toFixed(2);
  let pixValueDescontoVirgula =  pixValueDesconto.replace(".", ",")
  
  // const CSS_HANDLES = [
  //   "wrapperComponentPix",
  //   "imagePix",
  //   "wrapperTexts",
  //   "wrapperTexts__value",
  //   "wrapperTexts__descontoPorcentagem",
  // ]

  // const handles = useCssHandles(CSS_HANDLES)

  if (typeof document !== "undefined") {
    const input = document.querySelector(".vtex-address-form-4-x-input");
        input?.setAttribute("placeholder", "Digite seu CEP");
  }

  return (
    <div className={styles.wrapperComponentPix}>
      <img className={styles.imagePix} src="https://agenciamagma.vteximg.com.br/arquivos/PixImg-RhayllonDaudt.png" alt="PixIcon" />
      <div className={styles.wrapperTexts}>
        <p className={styles.wrapperTexts__value}>R$ {pixValueDescontoVirgula} </p>
        <p className={styles.wrapperTexts__descontoPorcentagem}>10% de desconto</p>
      </div>
    </div>
  )
}

export default Pix