kiosco_desk/renderer/components/Depositar/Depositar.tsx

import axios from "axios";
import { Dispatch, SetStateAction, useEffect, useState } from "react";
import Swal from "sweetalert2";

interface DepositarProps {
  api: string;
  setSaldo: Dispatch<SetStateAction<number>>;
  changeTab: Dispatch<SetStateAction<string>>;
  saldo: number;
  deposito: number;
  setDeposito: Dispatch<SetStateAction<number>>;
  setGetSaldo: Dispatch<SetStateAction<boolean>>;
  getSaldo: boolean;
  transaccion: string;
  setTransaccion: Dispatch<SetStateAction<string>>;
  plataforma: string;
  setPlataforma: Dispatch<SetStateAction<string>>;
}

export default function Depositar({
  api,
  setSaldo,
  saldo,
  changeTab,
  deposito,
  setDeposito,
  setGetSaldo,
  getSaldo,
  transaccion,
  setTransaccion,
  plataforma,
  setPlataforma,
}: DepositarProps) {
  const [cantidadDinero, setCantidadDinero] = useState<number>(0);

  useEffect(() => {
    const loadHeaders = () => {
      axios.defaults.headers.common.Authorization =
        localStorage.getItem("Token");
    };

    window.ipc.on("CantidadDinero", (event: number) => {
      setDeposito(event);
    });

    loadHeaders();
  }, []);

  const handleOnClick = async () => {
    try {
      const res = await axios.post(
        `http://localhost:3000/operations/abonoKiosco`,
        {
          cantidad: deposito,
          idKiosco: Number(localStorage.getItem("kioscoAcatlanKiosco")),
          transaccion,
          plataforma,
        },
        {
          headers: {
            Authorization: `Bearer ${localStorage.getItem("Token")}`,
          },
        }
      );

      if (transaccion === "Inscripcion") {
        Swal.fire({
          title: `$${deposito} de aportación voluntaria`,
          text: `Saldo actual: $${saldo}`,
          icon: "success",
        });
      } else {
        Swal.fire({
          title: `$${deposito} depositados`,
          text: `Saldo actual: $${saldo + deposito}`,
          icon: "success",
        });
      }

      //changeTab("Imprimir");

      window.ipc.send("LimpiarDinero", "");
      setSaldo(saldo + deposito);
      setDeposito(0);
      setGetSaldo(!getSaldo);
    } catch (error) {
      console.log(error);
      Swal.fire({
        title: `Error al depositar`,
        text: `${error.response.data.msj}`,
        icon: "error",
      });
    }
  };

  const botonStyle = (tipo) => ({
    width: "20px",
    height: "20px",
    borderRadius: "100%",
    marginRight: "5px",
    backgroundColor: transaccion === tipo ? "#003e79" : "white",
    border: transaccion === tipo ? "1px solid #003e79" : "1px solid #000",
    cursor: "pointer",
  });

    const botonStylePlataforma = (tipo) => ({
    width: "20px",
    height: "20px",
    borderRadius: "100%",
    marginRight: "5px",
    backgroundColor: plataforma === tipo ? "#003e79" : "white",
    border: plataforma === tipo ? "1px solid #003e79" : "1px solid #000",
    cursor: "pointer",
  });

  return (
    <div className="w-75">
      <div className="shadow bg-white rounded py-3 px-4 text-center">
        <h3 className="">Instrucciones</h3>
        <ol className="text-start ">
          <li className="mb-2">
            Elegir el tipo de servicio para realizar tu aportacion.
          </li>
          <li className="mb-2">
            Ingresar monedas de (1,2,5,10) pesos , asi como billetes
            (20,50,100,200) pesos.
          </li>
          <li className="mb-2">
            verifica que el credito ingresado coincida con la aportacion
            depositada.
          </li>

          <li className="mb-2">
            Selecciona el boton "Depositar" para finalizar el prceso.
          </li>

          <li className="mb-2">
            Revisa tu correo @pcpuma, en este medio se envia el comprobante de
            tu aportación.
          </li>
        </ol>
      </div>

      <div className="shadow bg-white rounded py-3 px-4 text-center mt-3">
        <h3 className="">Elegir el tipo de servivcio</h3>

        <div className="d-flex flex-colum gap-5 mt-4 justify-content-center">
          <div>
            <button
              style={botonStyle("Impresion")}
              onClick={() => setTransaccion("Impresion")}
            ></button>
            <label htmlFor="">Impresión</label>
          </div>
          <div>
            <button
              style={botonStyle("Inscripcion")}
              onClick={() => setTransaccion("Inscripcion")}
            ></button>
            <label htmlFor="">Inscripcíon</label>
          </div>
        </div>
      </div>

      {transaccion == "Inscripcion" && (
        <div className="shadow bg-white rounded py-3 px-4 text-center mt-3">
          <h3 className="">Elegie la plataforma</h3>

          <div className="d-flex flex-colum gap-5 mt-4 justify-content-center">
            <div>
              <button
                style={botonStylePlataforma("Windows")}
                onClick={() => setPlataforma("Windows")}
              ></button>
              <label htmlFor="">Windows</label>
            </div>
            <div>
              <button
                style={botonStylePlataforma("MACINTOSH")}
                onClick={() => setPlataforma("MACINTOSH")}
              ></button>
              <label htmlFor="">Mac</label>
            </div>
          </div>
        </div>
      )}

      <div className="shadow bg-white rounded py-3 px-4 text-center mt-3">
        <h2>Crédito Ingresado:</h2>
        <h1>${deposito}</h1>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <button
            type="submit"
            className="btn btn-primary w-50"
            onClick={handleOnClick}
            disabled={deposito == 0}
          >
            Depositar
          </button>
        </div>
      </div>
    </div>
  );
}