challenge-vtex-io-gabriel-f.../react/components/pix/pix.tsx

35 lines
892 B
TypeScript

import React from 'react'
import { useProduct } from 'vtex.product-context'
import { useCssHandles } from 'vtex.css-handles'
import './pix.css'
const Pix = () => {
const CSS_HANDLES = ['pixwrapper', 'pixPrice']
const handles = useCssHandles(CSS_HANDLES)
const product = useProduct()
const productPrice = product?.selectedItem?.sellers[0].commertialOffer.Price
let descontoPixValue = 0
if (productPrice) descontoPixValue = productPrice * 0.9
return (
<>
<section className={handles.handles.pixwrapper}>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/pixgabrielFerraz.svg"
alt="image-pix"
/>
<div className={handles.handles.pixPrice}>
R$&nbsp;{descontoPixValue.toFixed(2).toString().replace('.', ',')}
<p>10 % de desconto</p>
</div>
</section>
</>
)
}
export default Pix