Spaces:
Runtime error
Runtime error
File size: 6,227 Bytes
b332881 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | import React, { useEffect, useState } from "react";
import { obtenerEspecifico, obtenerGet, procesarBoleta, registrarPost } from "../lib/conexionApi";
import { Navigate } from "react-router";
const ModalBoleta = ({
fecha,
setModalBoleta,
precioTotal,
carrito,
prescripcion,
adelanto,
precioLunas,
setPrescripcion,
setPrecioTotal,
setCarrito
}) => {
const [clienteBoleta, setClienteBoleta] = useState({})
const [errorClienteBoleta, setErrorClienteBoleta] = useState(false)
const [boleta, setBoleta] = useState({})
const [errorBoleta, setErrorBoleta] = useState(false)
const [boletaEmitida, setBoletaEmitida] = useState(false)
useEffect(() => {
obtenerEspecifico("clientes/prescripcion", { "id_prescripcion": prescripcion[0]["id_prescripcion"] }, setClienteBoleta, setErrorClienteBoleta)
}, [])
return (
<div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
<div className="bg-white p-10 shadow-md rounded-lg w-[50rem]">
<div className=" flex flex-col w-full h-full ">
<div className="flex flex-col w-full h-full p-5 px-10 mb-5 border-2 pt-5 rounded-lg">
<p className="text-4xl font-bold mb-2">Arte Visual</p>
<div className="flex">
<div className="w-2/3">
<p>Av. Los Héroes 632 S. J. M</p>
<div className="flex gap-1 mb-5">
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-brand-whatsapp"
width="25"
height="25"
viewBox="0 0 24 24"
strokeWidth="1"
stroke="#000000"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" />
<path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" />
</svg>
<p>902 501 054/968 600 415</p>
</div>
<p>Señor(a): {clienteBoleta["nombres_y_apellidos"]}</p>
<p>Dirección: {clienteBoleta["direccion"]}</p>
<p>Teléfono: {clienteBoleta["telefono"]}</p>
</div>
<div className="w-1/3 text-right">
<p className="uppercase">NOTA DE PEDIDO</p>
<p>00000{prescripcion[0]["id_prescripcion"]}</p>
<p>Fecha: {fecha}</p>
</div>
</div>
<p className="mt-8">Tabla de productos</p>
<div className="flex justify-center items-center w-full my-5">
<table className="rounded-lg bg-white text-center border-2 table-fixed w-full border-separate lg:border-collapse">
<thead className="border-2">
<tr>
<th className="border w-[7rem] font-semibold">Cantidad</th>
<th className="border font-semibold">Descripción</th>
<th className="border w-[8rem] font-semibold">Precio Unit.</th>
<th className="border w-[8rem] font-semibold">Importe</th>
</tr>
</thead>
<tbody>
{carrito.map(item => {
return (
<tr key={item["monturaInventario"]["codigo"]}>
<td className="border">{item["cantidad"]}</td>
<td className="border">{item["montura"]["nombre_montura"]}</td>
<td className="border">S/.{item["monturaInventario"]["precio_unit"]}</td>
<td className="border">S/.{item["monturaInventario"]["precio_unit"]*item["cantidad"]}</td>
</tr>
)
})}
<tr>
<td className="border">{1}</td>
<td className="border">detalle de lunas: {prescripcion[0]["detalle_lunas"]}</td>
<td className="border">S/.{parseFloat(precioLunas)}</td>
<td className="border">S/.{1*parseFloat(precioLunas)}</td>
</tr>
</tbody>
</table>
</div>
<div className="flex justify-between">
<p>Adelanto: S/.{adelanto}</p>
<p>Saldo: S/.{precioTotal-adelanto}</p>
<p>Total: S/.{precioTotal}</p>
</div>
</div>
<h3 className="text-center text-2xl text-bold mb-8">
¿Emitir boleta?
</h3>
<div className="flex gap-5">
<button
className="cursor-pointer py-2 w-1/2 bg-slate-300 hover:bg-slate-400 text-gray-700 font-semibold text-center rounded-md mt-2"
onClick={(e) => {
setModalBoleta(false)
}}
>
No
</button>
<button
type="submit"
className="w-1/2 mt-2 cursor-pointer py-2 bg-slate-700 hover:bg-slate-800 text-white font-semibold text-center rounded-md "
onClick={async (e) => {
const finalizarEmisionBoleta = async () => {
await procesarBoleta(precioTotal, carrito, adelanto, prescripcion[0]["id_prescripcion"], prescripcion[0]["detalle_lunas"], precioLunas );
// reiniciar precioTotal carrito, prescripcion,
await setPrecioTotal(0)
await setCarrito([])
await setPrescripcion([])
}
finalizarEmisionBoleta()
setBoletaEmitida(true)
}}
>
Sí
</button>
</div>
</div>
</div>
{boletaEmitida && (
<Navigate to="/" replace={true}/>
)}
</div>
);
};
export default ModalBoleta;
|