From 5c1df592e113f895583e5d89b1130e7f7a0e4e64 Mon Sep 17 00:00:00 2001 From: sync Date: Fri, 4 Oct 2024 19:21:05 +0300 Subject: [PATCH] Style error messages. --- src/Form.jsx | 366 ++++++++++++++++++++++------------------- src/Messages.jsx | 27 ++- src/Payment.jsx | 31 +--- src/assets/error.svg | 10 ++ src/assets/react.svg | 1 - src/assets/warning.svg | 14 ++ 6 files changed, 246 insertions(+), 203 deletions(-) create mode 100644 src/assets/error.svg delete mode 100644 src/assets/react.svg create mode 100644 src/assets/warning.svg 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}
+
Назначение платежа:
+
+