challenge-vtex-io-Adilson-Fernando-Neves-Ornellas/react/components/pixCustom/pixCustom.tsx

import React from 'react';
import {useProduct} from 'vtex.product-context';

import './styles.css';


const pixCustom = () => {
    const productContextValue = useProduct()

    // {productContextValue?.product?.priceRange.sellingPrice.highPrice} 

    const valorString = productContextValue?.product?.priceRange.sellingPrice.lowPrice;
    
    const valorNumber = Number(valorString)
    
    const desconto = 0.9

    var pix = (valorNumber * desconto).toFixed(2).replace(".", ",")
    
    console.log(pix);
    
    return(
        <div>
            <div>
                <img src="https://agenciamagma.vtexassets.com/arquivos/AdilsonFernandoNevesOrnellas-ImgPix.png" alt="Imagem Pix" />
            </div>

            <div>

                <div>

                </div>

                <div>
                    <h1> R$ ${pix} </h1>
                    <h2> 10% de desconto </h2>
                </div>

            </div>

        </div>
    );
}

export default pixCustom