challenge-vtex-io-nicolly-v.../react/components/Pix/index.tsx

61 lines
1.5 KiB
TypeScript

import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./styles.css";
const Pix = () => {
const product = useProduct();
const precoAtual = Number(
product?.product?.priceRange.sellingPrice.highPrice
);
const desconto = (precoAtual * 10) / 100;
const precoNovo = precoAtual - desconto;
const fechApi = async () => {
fetch("/api/checkout/pub/orderForms/simulation", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: `{
"items": [
{
"id": ${product?.selectedItem?.itemId},
"seller": ${product?.selectedItem?.sellers[0].sellerId},
"quantity": ${product?.selectedQuantity}
}
],
"country": "BRA"
}`,
})
.then((response) => response.json())
.then((data) => {
console.log(data);
});
};
fechApi();
return (
<div className={styles.pixWrapper}>
<figure className={styles.pixImageContainer}>
<img
className={styles.pixImage}
src=" https://agenciamagma.vteximg.com.br/arquivos/gobar-icon-pix.png"
alt="logo do Pix"
/>
</figure>
<div className={styles.descriptionContainer}>
<p className={styles.newPrice}>R$ {precoNovo.toFixed(2).replace(".", ",")}</p>
<p className={styles.discount}>10 % de desconto</p>
</div>
</div>
);
};
export default Pix;