challenge-vtex-io-Filipe-Quintanilha/react/components/Example/Example.tsx

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