challenge-vtex-io-ueber-james/react/components/pix/Pix.tsx

46 lines
983 B
TypeScript

import React, { useEffect } from "react";
import { useProduct} from "vtex.product-context";
import styles from "./styles.module.css";
const Pix = () => {
useEffect(()=>{
const cep = document.querySelector(".vtex-address-form-4-x-input");
cep?.setAttribute("placeholder", "Digite seu CEP");
})
const productvalue = useProduct();
const pixproduct = productvalue?.product?.priceRange?.sellingPrice?.lowPrice;
const desconto = (Number(pixproduct)*10)/100;
const total = Number(pixproduct) - Number(desconto.toFixed(2))
return (
<div className={styles["pix-container"]}>
<div className={styles["pix-content"]}>
<div className={styles["pix-img"]}>
<img src="https://agenciamagma.vtexassets.com/arquivos/pix--ueberjames.png" alt="" />
</div>
<div className={styles["pix-desconto"]}>
<p className={styles["pix-valor"]}> R$ { total.toFixed(2)}</p>
<p className={styles["pix-text"]}> 10% de desconto</p>
</div>
</div>
</div>
);
};
export default Pix;