forked from M3-Academy/challenge-vtex-io
58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import React from "react";
|
|
|
|
import styles from "./_PixCustomInstallments.module.css";
|
|
|
|
import { useProduct } from "vtex.product-context";
|
|
import { calculationPercent, sanatizeColor } from "./_ComponentsFunctions";
|
|
|
|
interface IPixCustomInstallmentsProps {
|
|
label: string;
|
|
percent: number;
|
|
color: string;
|
|
}
|
|
|
|
export function PixCustomInstallments({
|
|
label = "de desconto",
|
|
percent = 10,
|
|
color = "c-on-base",
|
|
}: IPixCustomInstallmentsProps) {
|
|
const data = useProduct();
|
|
|
|
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"
|
|
/>
|
|
<div>
|
|
<p className={styles["pix__priceValue"]}>
|
|
{`R$ ${calculationPercent(
|
|
percent,
|
|
data?.product?.priceRange.sellingPrice.highPrice
|
|
)}`}
|
|
</p>
|
|
<p className={`${styles["pix__label"]} ${sanatizeColor(color)}`}>
|
|
{`${percent}% ${label}`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
PixCustomInstallments.schema = {
|
|
title: "Promoção de pagamento com o PIX",
|
|
type: "object",
|
|
properties: {
|
|
label: {
|
|
type: "string",
|
|
},
|
|
percent: {
|
|
type: "number",
|
|
},
|
|
|
|
color: {
|
|
type: "string",
|
|
},
|
|
},
|
|
};
|