72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import './pix.css'
|
|
import { useProduct } from 'vtex.product-context'
|
|
|
|
const Pix = () => {
|
|
const [valuePix, setValuePix] = useState(0)
|
|
|
|
const productContext = useProduct()
|
|
|
|
const total = (valuePix * 0.1 - valuePix / 100) / 10
|
|
|
|
const objectPass = [
|
|
{
|
|
id: productContext?.selectedItem?.itemId,
|
|
quantity: 1,
|
|
seller: productContext?.selectedItem?.sellers[0].sellerId,
|
|
},
|
|
]
|
|
|
|
async function request() {
|
|
const response = await fetch('/api/checkout/pub/orderForms/simulation', {
|
|
method: 'POST',
|
|
headers: {
|
|
'content-type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
items: objectPass,
|
|
country: 'BRA',
|
|
postalCode: '',
|
|
}),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
const getPix = data.paymentData.installmentOptions.find(
|
|
(elemento: { paymentName: string }) => {
|
|
return elemento.paymentName === 'Pix'
|
|
}
|
|
)
|
|
|
|
setValuePix(getPix.value)
|
|
|
|
console.log(getPix)
|
|
}
|
|
|
|
useEffect(() => {
|
|
request()
|
|
}, [productContext?.selectedItem])
|
|
|
|
return (
|
|
<div className="pix-container">
|
|
<img
|
|
className="pix-image"
|
|
src="https://agenciamagma.vteximg.com.br/arquivos/pixIcon-filipequintanilha.png"
|
|
alt="pix"
|
|
/>
|
|
|
|
<div className="preco-wrapper">
|
|
<h2 className="preco-pix">
|
|
{total.toLocaleString('pt-br', {
|
|
style: 'currency',
|
|
currency: 'BRL',
|
|
})}
|
|
</h2>
|
|
<p className="desconto-pix">10% de desconto</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Pix
|