challenge-vtex-io-davi-klein/react/components/Prices/Prices.tsx

59 lines
1.8 KiB
TypeScript

import React from "react";
import styles from "./styles.css";
import { useProduct } from "vtex.product-context";
export default function Prices() {
const product = useProduct();
console.log(product);
return (
<div>
<span className={styles.fullPrice}>
R${" "}
{product?.selectedItem?.sellers[0].commertialOffer.Installments[3].TotalValuePlusInterestRate.toString().replace(
".",
","
)}{" "}
</span>
<div className={styles.installmentsNumber}>
<span className={styles.BiginstallmentsNumberText}>
{
product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
.NumberOfInstallments
}{" "}
x
</span>
<span className={styles.installmentsNumberText}> de </span>
<span className={styles.BiginstallmentsNumberText}>
R${" "}
{product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toString().replace(
".",
","
)}
</span>
<span className={styles.installmentsNumberText}> sem juros</span>
</div>
<div className={styles.pixWrapper}>
<img className={styles.pixImage}
src="https://agenciamagma.vteximg.com.br/arquivos/pix-daviklein.svg"
alt="pix-image"
/>
<div className={styles.PixValues}>
<span className={styles.PixValuesPrice}>
R${" "}
{(
Number(
product?.selectedItem?.sellers[0].commertialOffer
.Installments[0].TotalValuePlusInterestRate
) * 0.9
)
.toFixed(2)
.toString()
.replace(".", ",")}
</span>
<span className={styles.PixValuesText}>10 % de desconto</span>
</div>
</div>
</div>
);
}