challenge-vtex-io-ana-carol.../react/components/Pix/Pix.tsx

31 lines
901 B
TypeScript
Raw Normal View History

2023-01-25 15:47:22 +00:00
import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./styles.css";
const Pix = () => {
const product = useProduct();
const pix = {
pixValue: Number(product?.selectedItem?.sellers[0].commertialOffer.Price),
2023-01-25 15:47:22 +00:00
};
const discount = pix.pixValue * 0.1;
const pixPrice = pix.pixValue - discount;
2023-01-25 15:47:22 +00:00
return (
<div className={styles.PixContent}>
<img
className={styles.ImgPixContent}
src="https://agenciamagma.vteximg.com.br/arquivos/icon-pix-anacarolinaduartecavalcante-m3academy.svg"
alt="logo pix"
/>
<div className={styles.PixDiscount}>
2023-01-25 18:34:09 +00:00
<strong className={styles.TextPixDiscount}>
2023-01-25 15:47:22 +00:00
R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
</strong>
2023-01-25 18:34:09 +00:00
<span className={styles.TextDiscount}>10 % de desconto</span>
2023-01-25 15:47:22 +00:00
</div>
</div>
);
};
export default Pix;