Files
front-AT/app/Components/Impressions/impressions.tsx
T
2026-02-11 15:09:45 -05:00

136 lines
3.2 KiB
TypeScript

"use client";
import Cookies from "js-cookie";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { PostImpressions } from "@/app/lib/postImpressions";
import toast from "react-hot-toast";
import Swal from "sweetalert2";
interface CostOption {
value: number;
}
interface ImpressionsProps {
costs: CostOption[];
numAcount: number | null;
id_servicio: number;
}
function Impressions({ costs, numAcount, id_servicio }: ImpressionsProps) {
const [pages, setPages] = useState("");
const [cost, setCost] = useState("");
const router = useRouter();
const handleLogout = () => {
Cookies.remove("token");
Cookies.remove("session");
router.push("/Login");
};
const handlePayment = async () => {
if (!numAcount) {
toast.error("busca de nuevo al estudiante");
return;
}
if (!pages) {
toast.error("Ingresa el numero de hojas a imprimir");
return;
}
if (!cost) {
toast.error("Selecciona un costo");
return;
}
const result = await PostImpressions({
id_cuenta: numAcount,
numero_hojas: parseInt(pages),
monto: parseInt(cost) * parseInt(pages),
id_servicio,
});
if (result?.error) {
if (result.message === "Token inválido") {
handleLogout();
} else {
toast.error(result.message);
}
return;
}
setPages("");
setCost("");
toast.success("Impresion cobrada correctamente");
Swal.fire({
title: "Cobro exitoso!",
icon: "success",
draggable: true
});
router.refresh();
};
return (
<form
onSubmit={(e) => {
e.preventDefault();
handlePayment();
}}
>
<div className="gap">
<div className="groupInput">
<label className="label">Costo:</label>
<select value={cost} onChange={(e) => setCost(e.target.value)}>
<option value="">Selecciona el costo</option>
{costs.map((c) => (
<option key={c.value} value={c.value}>
${c.value}
</option>
))}
</select>
</div>
<div className="groupInput">
<label className="label">Hojas:</label>
<input
type="text"
value={pages}
onChange={(e) => {
const value = e.target.value;
if (/^\d*$/.test(value)) {
setPages(value);
}
}}
placeholder="Numero de hojas a imprimir..."
inputMode="numeric"
pattern="[0-9]*"
/>
</div>
<div
className="groupInput"
style={{ height: "35px", flexWrap: "nowrap" }}
>
<label className="label">Total:</label>
<label
style={{ width: "100%", minWidth: "200px", maxWidth: "500px" }}
>
{pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}
</label>
</div>
<div className="containerButton">
<button className="button buttonCharge" type="submit">
Cobrar
</button>
</div>
</div>
</form>
);
}
export default Impressions;
//IO