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

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",
    },
  },
};