0211bea186
- Backend Node.js/Express con PostgreSQL - Frontend React 19 con Vite - Docker Compose para orquestacion - Documentacion completa en README.md - Scripts SQL para base de datos - Configuracion de ejemplo (.env.example)
71 lines
2.6 KiB
JavaScript
71 lines
2.6 KiB
JavaScript
// components/Modals/ConfirmationModal.jsx
|
||
import React, { useState, useEffect } from 'react';
|
||
import './ConfirmationModal.css'; // Estilos separados
|
||
import { useContext } from 'react';
|
||
import { langContext } from '../../context/LenguageContext';
|
||
|
||
|
||
export default function ConfirmationOutcome({ isOpen, onConfirm, onCancel, description, taxes, initialAmount, initialTaxId, isFixedPayment }) {
|
||
/*const [formHousekepeer, setFormHousekepeer] = useState(null)/*/
|
||
const { lang } = useContext(langContext);
|
||
const [form, setForm] = useState({
|
||
tax: '',
|
||
amount: ''
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (isOpen) {
|
||
setForm({
|
||
tax: initialTaxId || '',
|
||
amount: initialAmount || ''
|
||
});
|
||
}
|
||
}, [isOpen, initialAmount, initialTaxId]);
|
||
|
||
if (!isOpen) return null;
|
||
const handleChange = (e) => {
|
||
const { name, value } = e.target;
|
||
//console.log(name, value);
|
||
setForm((prev) => ({ ...prev, [name]: value }));
|
||
};
|
||
|
||
const handleConfirmClick = () => {
|
||
// Envía los valores al padre (Outcomes.jsx)
|
||
onConfirm(form.tax, form.amount);
|
||
};
|
||
return (
|
||
<div className="modal-overlay">
|
||
<form onSubmit={handleConfirmClick}>
|
||
<div className="modal">
|
||
<div className="modal-header">
|
||
<h3>{lang === "en" ? "Confirm the status change" : "Confirmar el cambio de estado"}</h3>
|
||
<button className="close-button" onClick={onCancel}>×</button>
|
||
</div>
|
||
<div className="modal-body">
|
||
<div>
|
||
<p>{lang === "en" ? "Payment" : "Pago"}</p>
|
||
<input name = "PCO" value={description} onChange={handleChange} disabled={true}></input>
|
||
</div>
|
||
<div>
|
||
<p>{lang === "en" ? "Amount" : "Subtotal"}</p>
|
||
<input type='number' required name = "amount" value={form.amount} onChange={handleChange} disabled={isFixedPayment}></input>
|
||
</div>
|
||
<div>
|
||
<p>{lang === "en" ? "Tax" : "Impuesto"}</p>
|
||
<select name = "tax" required value={form.tax} onChange={handleChange} disabled={isFixedPayment}>
|
||
<option value="">{lang === "en" ? "Select a tax" : "Selecciona un impuesto"}</option>
|
||
{taxes?.map(tax => (
|
||
<option key={tax.id} value={tax.id}>{tax.name}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="modal-buttons">
|
||
<button className="modal-button yes" type='submit'>{lang === "en" ? "PAID" : "PAGAR"}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
);
|
||
}
|