42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { useProduct } from "vtex.product-context";
|
|
import styles from "./style.module.css";
|
|
|
|
const Pix = () => {
|
|
useEffect(() => {
|
|
const cepInput = document.querySelector(".vtex-address-form-4-x-input");
|
|
|
|
cepInput?.setAttribute("placeholder", "Digite seu CEP");
|
|
});
|
|
|
|
const productValue = useProduct();
|
|
|
|
const priceProduct =
|
|
productValue?.product?.priceRange?.sellingPrice?.lowPrice;
|
|
|
|
const descountValue = (Number(priceProduct) * 10) / 100;
|
|
|
|
const totalValue = Number(priceProduct) - Number(descountValue);
|
|
|
|
return (
|
|
<div className={styles["pix-container"]}>
|
|
<div className={styles["pix-content"]}>
|
|
<div className={styles["pix-image"]}>
|
|
<img
|
|
src="https://agenciamagma.vtexassets.com/arquivos/pix-eleonoraotz.png"
|
|
alt="10% de desconto no Pix"
|
|
/>
|
|
</div>
|
|
<div className={styles["pix-descount"]}>
|
|
<p className={styles["pix-value"]}>
|
|
R$ {totalValue.toFixed(2).replace(".", ",")}
|
|
</p>
|
|
<p className={styles["pix-text"]}>10 % de desconto</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Pix;
|