47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { useProduct } from 'vtex.product-context';
|
|
import { useCssHandles } from 'vtex.css-handles';
|
|
import "./Pix.css"
|
|
const Pix = () => {
|
|
|
|
useEffect(() => {
|
|
const m3Input = document.querySelector(".vtex-address-form-4-x-input");
|
|
m3Input?.setAttribute("placeholder", "Digite seu CEP");
|
|
});
|
|
|
|
|
|
|
|
const CSS_HANDLES = [
|
|
'pixWrapper',
|
|
'pixWrapperImage',
|
|
'pixImage',
|
|
'pixResult',
|
|
'pixResultValue',
|
|
'pixResultPercent'
|
|
];
|
|
const handles = useCssHandles(CSS_HANDLES);
|
|
|
|
const pixImg = "https://agenciamagma.vtexassets.com/arquivos/pix-emmanuelvitorpereiradejesus.svg";
|
|
|
|
const resultProductContext = useProduct();
|
|
const productSelling = Number(resultProductContext?.product?.priceRange?.sellingPrice?.lowPrice);
|
|
const disccount = (productSelling * 10) / 100;
|
|
const result = productSelling - disccount;
|
|
const strResult = result.toFixed(2).replace(".", ",");
|
|
|
|
|
|
|
|
return (
|
|
< div className={handles.handles.pixWrapper} >
|
|
<div className={handles.handles.pixWrapperImage}>
|
|
<img src={pixImg} alt="Imagem de pix" className={handles.handles.pixImage} />
|
|
</div>
|
|
<div className={handles.handles.pixResult}>
|
|
<p className={handles.handles.pixResultValue}> R$ {strResult}</p>
|
|
<p className={handles.handles.pixResultPercent}>10 % de desconto</p>
|
|
</div>
|
|
</div >
|
|
);
|
|
}
|
|
export default Pix;
|