challenge-vtex-io-carlos-wi.../react/components/Pix/Pix.tsx
2023-02-05 12:57:44 -03:00

55 lines
1.5 KiB
TypeScript

import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./styles.css";
const Pix = () => {
const product = useProduct();
console.log(product);
const pix = {
pixValue: Number(
product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
.TotalValuePlusInterestRate
),
};
const priceTimes =
product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
.NumberOfInstallments;
const valueTotal = product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toFixed(
2
)
.toString()
.replace(".", ",");
const pixPrice = (pix.pixValue = pix.pixValue * 0.9)
.toFixed(2)
.toString()
.replace(".", ",");
return (
<>
<span className={styles.AllPriceTimesText}>
<span className={styles.PriceTimes}>{priceTimes} x</span> de
<span className={styles.PriceTimes}> R$ {valueTotal}</span> sem juros
</span>
<div className={styles.PricesWrapperRow}>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logo-pix-carloswinter.svg"
alt="Imagem Pix"
/>
</figure>
<div className={styles.PricesCol}>
<span className={styles.PixFullValue}>R${pixPrice}</span>
<span className={styles.PixPercent}>10% de desconto</span>
</div>
</div>
</>
);
// return <button className={styles.PixButton}>Pix</button>;
};
export default Pix;