88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { useProduct } from "vtex.product-context";
|
|
import "./style.css";
|
|
|
|
const Pix = () => {
|
|
const productContext = useProduct();
|
|
|
|
const [pixValue, setPixValue] = useState(0);
|
|
const [discountValue, setDiscountValue] = useState("");
|
|
|
|
const objectPass = [
|
|
{
|
|
id: productContext?.selectedItem?.itemId,
|
|
quantity: 1,
|
|
seller: productContext?.selectedItem?.sellers[0].sellerId,
|
|
},
|
|
];
|
|
|
|
function getDiscount(discountValue: number, commonValue: number | undefined) {
|
|
let discount = 0;
|
|
if (commonValue) {
|
|
discount = Math.floor(discountValue / commonValue) - 100;
|
|
|
|
if (discount > 0) return `${discount} % de desconto`;
|
|
else return "sem desconto";
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
async function request() {
|
|
const response = await fetch("/api/checkout/pub/orderForms/simulation", {
|
|
method: "POST",
|
|
headers: {
|
|
"content-type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
items: objectPass,
|
|
country: "BRA",
|
|
postalCode: "",
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
const getPix = data.paymentData.installmentOptions.find(
|
|
(e: { paymentName: string }) => {
|
|
return e.paymentName === "Pix";
|
|
}
|
|
);
|
|
|
|
setPixValue(getPix.value);
|
|
|
|
const discountMessage = getDiscount(
|
|
getPix.value,
|
|
productContext?.product?.priceRange.sellingPrice.highPrice
|
|
);
|
|
|
|
if (discountMessage) setDiscountValue(discountMessage);
|
|
}
|
|
|
|
useEffect(() => {
|
|
request();
|
|
}, [productContext?.selectedItem]);
|
|
|
|
return (
|
|
<div className="pix-container">
|
|
<img
|
|
className="pix-image"
|
|
src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-sauloklein-m3academy.svg"
|
|
alt="Pix Icon"
|
|
/>
|
|
|
|
<div className="price-wrapper">
|
|
<span className="price-value">
|
|
{(pixValue / 100).toLocaleString("pt-br", {
|
|
style: "currency",
|
|
currency: "BRL",
|
|
})}
|
|
</span>
|
|
<span className="price-discount">{discountValue}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Pix;
|