diff --git a/src/Form.jsx b/src/Form.jsx index cf57be2..677ca76 100644 --- a/src/Form.jsx +++ b/src/Form.jsx @@ -1,7 +1,8 @@ import { useState, useEffect, useCallback } from 'react'; +import Messages from './Messages.jsx'; import './Form.css'; -function Form(props) { +function Form() { const [firstRender, setFirstRender] = useState(true); const [payerName, setPayerName] = useState(''); const [payerINN, setPayerINN] = useState(''); @@ -23,6 +24,8 @@ function Form(props) { const [codePurpose, setCodePurpose] = useState('1'); const [taxUINCode, setTaxUINCode] = useState(''); + const [messages, setMessages] = useState([]); + const fields = [ { name: 'payer_name', @@ -135,13 +138,18 @@ function Form(props) { }, ]; - const handleBlur = useCallback(() => { + const handleBlur = () => { setFirstRender(false); (async () => { const data = await requestPMTValidationAsyncAwait(fields, 'validate'); - props.fillMessages(data); + setMessages( + data.fields?.reduce((acc, item) => { + acc[item.name] = { status: item.status, message: item.message }; + return acc; + }, {}) + ); })(); - }, [fields, props]); + }; const requestPMTValidationAsyncAwait = async (fields, action) => { const response = await fetch('/pmtvalidation/validate/', { @@ -159,12 +167,6 @@ function Form(props) { return data; }; - useEffect(() => { - if (!firstRender) { - handleBlur(); - } - }, [firstRender, handleBlur, chargesDetails, codePurpose, payerAccount]); - useEffect(() => { const URLParams = new URLSearchParams(window.location.search); const cnum = URLParams.get('cnum'); @@ -191,168 +193,194 @@ function Form(props) { }, []); return ( -
-
-
- Рублевый перевод на счета других клиентов или в другие банки, включая - налоговые платежи +
+
messages[item]?.status != 'OK' + ).length > 0 + ? '75%' + : '100%', + }} + > +
+
+
+ Рублевый перевод на счета других клиентов или в другие банки, + включая налоговые платежи +
+
№2 от 03.07.2024
+
+
+
Плательщик
+
+
+
+
Плательщик:
+
{`${payerName} ${clientId}`}
+
Номер счета:
+
+ +
+
ИНН:
+
{payerINN}
+
Сумма:
+
+ + setAmount(e.target.value)} + onBlur={handleBlur} + /> + RUB + +
+
Телефон или электронный адрес:
+
{payerPhoneEmail}
+
+
+
Адрес места жительства:
+
{payerAddress}
+
Комиссии и расходы:
+
+ +
+
+
+
Получатель
+
+
+
+
+
+
БИК:
+
+ setBNFBankBic(e.target.value)} + onBlur={handleBlur} + style={{ maxWidth: '32ch' }} + /> +
+
№ Корр. счета:
+
+ +
+
Номер счета:
+
+ setBNFAccount(e.target.value)} + onBlur={handleBlur} + style={{ maxWidth: '32ch' }} + /> +
+
ИНН:
+
+ setBNFINN(e.target.value)} + onBlur={handleBlur} + style={{ maxWidth: '32ch' }} + /> +
+
КПП (103):
+
+ setBNFKPP(e.target.value)} + onBlur={handleBlur} + style={{ maxWidth: '32ch' }} + /> +
+
+
+
Наименование:
+
+ setBNFName(e.target.value)} + onBlur={handleBlur} + style={{ width: '100ch' }} + /> +
+
Банк получателя:
+
{bnfBankName}
+
Назначение платежа:
+
+