challenge-vtex-io-bernardo-.../react/components/PixDiscount/index.tsx

38 lines
1.0 KiB
TypeScript
Raw Normal View History

import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./PixDiscount.module.css";
const PixDiscount = () => {
const skuProduct = useProduct();
const productPrice = {
price: Number(
skuProduct?.selectedItem?.sellers[0]?.commertialOffer?.Price.toFixed(2)
),
};
const discount = productPrice.price * 0.1;
const pixPrice = productPrice.price - discount;
console.log(pixPrice);
return (
<div className={styles["pixContainer"]}>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/icon-pix-bernardoWaldhelm-m3academy.svg"
alt="Pix"
className={styles["pixContainer__img"]}
/>
<div className={styles["pixContainer__discount"]}>
<span className={styles["pixContainer__priceFinal"]}>
R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
</span>
<span className={styles["pixContainer__discount__value"]}>
10% de desconto
</span>
</div>
</div>
);
};
export default PixDiscount;