challenge-vtex-io-henrique-.../react/components/PixCustomInstallments/_PixCustomInstallments.tsx

73 lines
1.6 KiB
TypeScript
Raw Normal View History

import React from "react";
import styles from "./_PixCustomInstallments.module.css";
import { useProduct } from "vtex.product-context";
import { sanatizeColor } from "./_ComponentsFunctions";
interface IPixCustomInstallmentsProps {
label: string;
percent: number;
}
export function PixCustomInstallments({
label = "de desconto",
percent = 10,
}: IPixCustomInstallmentsProps) {
const data = useProduct();
const calculationPercent = (
percent: number | undefined,
value: number | undefined
) => {
if (value && percent) {
const newPercent = percent / 100;
const discount = value * newPercent;
const newValue = value - discount;
return newValue.toFixed(2).toString().replace(".", ",");
}
return "";
};
console.log(data);
return (
<div className={`${styles["pix"]} flex`}>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/pix-m3academy-henrquesantos-2023.svg"
alt="Promoção de pagamento com o PIX"
/>
<p>
<span className={styles["pix__priceValue"]}>
{`R$ ${calculationPercent(
percent,
data?.product?.priceRange.sellingPrice.highPrice
)}`}
</span>
<div
className={`${styles["pix__label"]} ${sanatizeColor("c-on-base")}`}
>
{`${percent}% ${label}`}
</div>
</p>
</div>
);
}
PixCustomInstallments.schema = {
title: "Promoção de pagamento com o PIX",
type: "object",
properties: {
label: {
type: "string",
},
percent: {
type: "number",
},
},
};