43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { useCssHandles } from "vtex.css-handles";
|
|
import { useProduct } from "vtex.product-context";
|
|
import "./styles.css";
|
|
|
|
const Pix = () => {
|
|
const productContext = useProduct();
|
|
const price = productContext?.product?.priceRange.sellingPrice.highPrice;
|
|
const CSS_HANDLES = [
|
|
"pix",
|
|
"pixImage",
|
|
"containerPix",
|
|
"imagePix",
|
|
"pricePix",
|
|
"textPix",
|
|
];
|
|
const { handles } = useCssHandles(CSS_HANDLES);
|
|
|
|
let pixPrice;
|
|
|
|
if (price !== undefined) {
|
|
const value = (price / 100) * 10;
|
|
const valuePix = price - value;
|
|
pixPrice = "R$ " + valuePix.toFixed(2).toString().replace(".", ",");
|
|
}
|
|
|
|
return (
|
|
<section className={handles.pix}>
|
|
<img
|
|
className={handles.pixImage}
|
|
src="https://agenciamagma.vtexassets.com/assets/vtex.file-manager-graphql/images/d5b39cd0-ca30-48ea-98f0-47655b4a7d79___cbd3e3c1bc0541759327951dd21c6a45.png"
|
|
alt=""
|
|
/>
|
|
<div className={handles.containerPix}>
|
|
<span className={handles.pricePix}>{pixPrice}</span>
|
|
<p className={handles.textPix}>10% de desconto</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Pix;
|