42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
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 |