challenge-vtex-io-caina/react/components/Pix/Pix.tsx

32 lines
974 B
TypeScript

import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./Pix.module.css";
const Pix = () => {
if (typeof document !== undefined) {
const input = document.querySelector(".vtex-address-form-4-x-input");
input?.setAttribute("placeholder", "Digite seu CEP");
}
const price = useProduct()?.product?.priceRange?.sellingPrice?.highPrice;
const discount = (Number(price) * 10) / 100;
const priceWithDiscount = Number(price) - Number(discount);
return (
<div className={styles.containerPix}>
<img
className={styles.image}
src="https://agenciamagma.vtexassets.com/arquivos/pix-cainamilech.png"
alt="Imagem do pix"
/>
<div className={styles.texts}>
<p className={styles.price}>
R$ {priceWithDiscount.toFixed(2).replace(".", ",")}
</p>
<p className={styles.discount}>10 % de desconto</p>
</div>
</div>
);
};
export default Pix;