diff --git a/src/components/features/requests/DepositForm.jsx b/src/components/features/requests/DepositForm.jsx index db2d49c..9cdc12b 100644 --- a/src/components/features/requests/DepositForm.jsx +++ b/src/components/features/requests/DepositForm.jsx @@ -7,12 +7,15 @@ import { Modal } from '../../ui/Modal'; import { createInvestorRequest } from '../../../services/api'; import { useTranslation } from 'react-i18next'; +const CASH_METHODS = ['CASH_ARS', 'CASH_USD']; + export const DepositForm = ({ userEmail }) => { const { t } = useTranslation(); const [formData, setFormData] = useState({ amount: '', method: 'CASH_ARS', }); + const [attachment, setAttachment] = useState(null); const [loading, setLoading] = useState(false); const [message, setMessage] = useState(null); const [modal, setModal] = useState(null); @@ -25,6 +28,9 @@ export const DepositForm = ({ userEmail }) => { { value: 'CRYPTO', label: t('requests.method.crypto') }, ]; + const isCash = CASH_METHODS.includes(formData.method); + const attachmentRequired = !isCash; + const handleChange = (e) => { setFormData({ ...formData, @@ -32,6 +38,25 @@ export const DepositForm = ({ userEmail }) => { }); }; + const handleFileChange = (e) => { + const file = e.target.files?.[0] || null; + if (file && file.size > 5 * 1024 * 1024) { + setMessage({ type: 'error', text: t('deposits.requestForm.attachment.tooLarge') }); + setAttachment(null); + return; + } + setAttachment(file); + setMessage(null); + }; + + const toBase64 = (file) => + new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result); + reader.onerror = reject; + reader.readAsDataURL(file); + }); + const handleSubmit = async (e) => { e.preventDefault(); @@ -40,20 +65,31 @@ export const DepositForm = ({ userEmail }) => { return; } + if (attachmentRequired && !attachment) { + setMessage({ type: 'error', text: t('deposits.requestForm.validation.attachmentRequired') }); + return; + } + setLoading(true); setMessage(null); - const method = formData.method; + let attachmentUrl = null; + if (attachment) { + try { + attachmentUrl = await toBase64(attachment); + } catch { + attachmentUrl = null; + } + } - // Enviar solicitud al backend de Rails const apiResult = await createInvestorRequest({ email: userEmail, type: 'DEPOSIT', amount: parseFloat(formData.amount), - method: method, + method: formData.method, network: null, transactionHash: null, - attachmentUrl: null, + attachmentUrl, }); setLoading(false); @@ -65,6 +101,7 @@ export const DepositForm = ({ userEmail }) => { message: t('requests.registered.crypto'), }); setFormData((s) => ({ ...s, amount: '' })); + setAttachment(null); } else { setMessage({ type: 'error', @@ -120,6 +157,27 @@ export const DepositForm = ({ userEmail }) => { +
+ +

+ {t('deposits.requestForm.attachment.description')} +

+ + {attachment && ( +

+ {attachment.name} ({(attachment.size / 1024).toFixed(0)} KB) +

+ )} +
+

{t('deposits.processingHoursTitle')}

• {t('deposits.processingHoursLine1')}

diff --git a/src/i18n.js b/src/i18n.js index 3d3f8c1..9595f6f 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -143,13 +143,16 @@ const resources = { placeholder: 'Ingresá el hash o ID', }, attachment: { - label: 'Comprobante (opcional)', + label: 'Comprobante', description: 'Adjuntá una captura del comprobante de pago (JPG, PNG o WEBP, máx 5MB)', upload: 'Subir comprobante', + tooLarge: 'El archivo es demasiado grande. Máximo 5 MB.', }, validation: { invalidAmount: 'Ingresá un monto válido', selectNetwork: 'Seleccioná una red', + attachmentRequired: + 'El comprobante es obligatorio para depósitos que no sean en efectivo.', }, submit: 'Enviar solicitud', submitting: 'Enviando...', @@ -393,13 +396,15 @@ const resources = { placeholder: 'Enter hash or ID', }, attachment: { - label: 'Receipt (optional)', + label: 'Receipt', description: 'Attach a screenshot of the payment receipt (JPG, PNG or WEBP, max 5MB)', upload: 'Upload receipt', + tooLarge: 'File is too large. Maximum 5 MB.', }, validation: { invalidAmount: 'Enter a valid amount', selectNetwork: 'Select a network', + attachmentRequired: 'Receipt is required for non-cash deposits.', }, submit: 'Send request', submitting: 'Sending...',