38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
|
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$ {pixPrice?.toFixed(2).toString().replace(".", ",")}
|
||
|
</span>
|
||
|
<span className={styles["pixContainer__discount__value"]}>
|
||
|
10% de desconto
|
||
|
</span>
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default PixDiscount;
|