|
|
|
|
@ -1,8 +1,7 @@
|
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
|
|
|
import Messages from './Messages.jsx';
|
|
|
|
|
import './Form.css';
|
|
|
|
|
|
|
|
|
|
function Form() {
|
|
|
|
|
function Form(props) {
|
|
|
|
|
const [firstRender, setFirstRender] = useState(true);
|
|
|
|
|
const [payerName, setPayerName] = useState('');
|
|
|
|
|
const [payerINN, setPayerINN] = useState('');
|
|
|
|
|
@ -24,8 +23,6 @@ function Form() {
|
|
|
|
|
const [codePurpose, setCodePurpose] = useState('1');
|
|
|
|
|
const [taxUINCode, setTaxUINCode] = useState('');
|
|
|
|
|
|
|
|
|
|
const [messages, setMessages] = useState([]);
|
|
|
|
|
|
|
|
|
|
const fields = [
|
|
|
|
|
{
|
|
|
|
|
name: 'payer_name',
|
|
|
|
|
@ -138,37 +135,13 @@ function Form() {
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const focusField = (fieldName) => {
|
|
|
|
|
document.getElementById(fieldName).focus();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const getBorderColor = (fieldName) => {
|
|
|
|
|
try {
|
|
|
|
|
switch (messages[fieldName].status) {
|
|
|
|
|
case 'ERROR':
|
|
|
|
|
return 'red';
|
|
|
|
|
case 'WARNING':
|
|
|
|
|
return 'orange';
|
|
|
|
|
default:
|
|
|
|
|
return 'black';
|
|
|
|
|
}
|
|
|
|
|
} catch {
|
|
|
|
|
return 'black';
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleBlur = () => {
|
|
|
|
|
const handleBlur = useCallback(() => {
|
|
|
|
|
setFirstRender(false);
|
|
|
|
|
(async () => {
|
|
|
|
|
const data = await requestPMTValidationAsyncAwait(fields, 'validate');
|
|
|
|
|
setMessages(
|
|
|
|
|
data.fields?.reduce((acc, item) => {
|
|
|
|
|
acc[item.name] = { status: item.status, message: item.message };
|
|
|
|
|
return acc;
|
|
|
|
|
}, {})
|
|
|
|
|
);
|
|
|
|
|
props.fillMessages(data);
|
|
|
|
|
})();
|
|
|
|
|
};
|
|
|
|
|
}, [fields, props]);
|
|
|
|
|
|
|
|
|
|
const requestPMTValidationAsyncAwait = async (fields, action) => {
|
|
|
|
|
const response = await fetch('/pmtvalidation/validate/', {
|
|
|
|
|
@ -186,6 +159,12 @@ function Form() {
|
|
|
|
|
return data;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!firstRender) {
|
|
|
|
|
handleBlur();
|
|
|
|
|
}
|
|
|
|
|
}, [firstRender, handleBlur, chargesDetails, codePurpose, payerAccount]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const URLParams = new URLSearchParams(window.location.search);
|
|
|
|
|
const cnum = URLParams.get('cnum');
|
|
|
|
|
@ -212,23 +191,11 @@ function Form() {
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="payment_container">
|
|
|
|
|
<div
|
|
|
|
|
className="payment_form"
|
|
|
|
|
style={{
|
|
|
|
|
width:
|
|
|
|
|
Object.keys(messages)?.filter(
|
|
|
|
|
(item) => messages[item]?.status != 'OK'
|
|
|
|
|
).length > 0
|
|
|
|
|
? '75%'
|
|
|
|
|
: '100%',
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className="payment">
|
|
|
|
|
<div className="title_wrapper">
|
|
|
|
|
<div className="title">
|
|
|
|
|
Рублевый перевод на счета других клиентов или в другие банки,
|
|
|
|
|
включая налоговые платежи
|
|
|
|
|
Рублевый перевод на счета других клиентов или в другие банки, включая
|
|
|
|
|
налоговые платежи
|
|
|
|
|
</div>
|
|
|
|
|
<div className="title">№2 от 03.07.2024</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -243,10 +210,8 @@ function Form() {
|
|
|
|
|
<div className="child">
|
|
|
|
|
<select
|
|
|
|
|
value={payerAccount}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setPayerAccount(e.target.value);
|
|
|
|
|
handleBlur();
|
|
|
|
|
}}
|
|
|
|
|
onChange={(e) => setPayerAccount(e.target.value)}
|
|
|
|
|
onClick={() => setFirstRender(false)}
|
|
|
|
|
>
|
|
|
|
|
{payerAccounts.map((item, ind) => (
|
|
|
|
|
<option key={`cbAccountNumber_${ind}`}>
|
|
|
|
|
@ -263,11 +228,9 @@ function Form() {
|
|
|
|
|
<div className="child">
|
|
|
|
|
<span>
|
|
|
|
|
<input
|
|
|
|
|
id="amount"
|
|
|
|
|
value={amount}
|
|
|
|
|
onChange={(e) => setAmount(e.target.value)}
|
|
|
|
|
onBlur={handleBlur}
|
|
|
|
|
style={{ borderColor: getBorderColor('amount') }}
|
|
|
|
|
/>
|
|
|
|
|
RUB
|
|
|
|
|
</span>
|
|
|
|
|
@ -282,10 +245,8 @@ function Form() {
|
|
|
|
|
<div className="child">
|
|
|
|
|
<select
|
|
|
|
|
value={chargesDetails}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setChargesDetails(e.target.value);
|
|
|
|
|
handleBlur();
|
|
|
|
|
}}
|
|
|
|
|
onChange={(e) => setChargesDetails(e.target.value)}
|
|
|
|
|
onClick={() => setFirstRender(false)}
|
|
|
|
|
>
|
|
|
|
|
<option>BEN</option>
|
|
|
|
|
<option>OUR</option>
|
|
|
|
|
@ -303,14 +264,10 @@ function Form() {
|
|
|
|
|
<div className="child">БИК:</div>
|
|
|
|
|
<div className="child">
|
|
|
|
|
<input
|
|
|
|
|
id="bnf_bank_bic"
|
|
|
|
|
value={bnfBankBic}
|
|
|
|
|
onChange={(e) => setBNFBankBic(e.target.value)}
|
|
|
|
|
onBlur={handleBlur}
|
|
|
|
|
style={{
|
|
|
|
|
maxWidth: '32ch',
|
|
|
|
|
borderColor: getBorderColor('bnf_bank_bic'),
|
|
|
|
|
}}
|
|
|
|
|
style={{ maxWidth: '32ch' }}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="child">№ Корр. счета:</div>
|
|
|
|
|
@ -331,27 +288,19 @@ function Form() {
|
|
|
|
|
<div className="child">ИНН:</div>
|
|
|
|
|
<div className="child">
|
|
|
|
|
<input
|
|
|
|
|
id="bnf_inn"
|
|
|
|
|
value={bnfINN}
|
|
|
|
|
onChange={(e) => setBNFINN(e.target.value)}
|
|
|
|
|
onBlur={handleBlur}
|
|
|
|
|
style={{
|
|
|
|
|
maxWidth: '32ch',
|
|
|
|
|
borderColor: getBorderColor('bnf_inn'),
|
|
|
|
|
}}
|
|
|
|
|
style={{ maxWidth: '32ch' }}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="child">КПП (103):</div>
|
|
|
|
|
<div className="child">
|
|
|
|
|
<input
|
|
|
|
|
id="bnf_kpp"
|
|
|
|
|
value={bnfKPP}
|
|
|
|
|
onChange={(e) => setBNFKPP(e.target.value)}
|
|
|
|
|
onBlur={handleBlur}
|
|
|
|
|
style={{
|
|
|
|
|
maxWidth: '32ch',
|
|
|
|
|
borderColor: getBorderColor('bnf_kpp'),
|
|
|
|
|
}}
|
|
|
|
|
style={{ maxWidth: '32ch' }}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -359,14 +308,10 @@ function Form() {
|
|
|
|
|
<div className="child">Наименование:</div>
|
|
|
|
|
<div className="child">
|
|
|
|
|
<input
|
|
|
|
|
id="bnf_name"
|
|
|
|
|
value={bnfName}
|
|
|
|
|
onChange={(e) => setBNFName(e.target.value)}
|
|
|
|
|
onBlur={handleBlur}
|
|
|
|
|
style={{
|
|
|
|
|
width: '100ch',
|
|
|
|
|
borderColor: getBorderColor('bnf_name'),
|
|
|
|
|
}}
|
|
|
|
|
style={{ width: '100ch' }}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="child">Банк получателя:</div>
|
|
|
|
|
@ -374,14 +319,12 @@ function Form() {
|
|
|
|
|
<div className="child">Назначение платежа:</div>
|
|
|
|
|
<div className="child">
|
|
|
|
|
<textarea
|
|
|
|
|
id="payment_details"
|
|
|
|
|
value={paymentDetails}
|
|
|
|
|
onChange={(e) => setPaymentDetails(e.target.value)}
|
|
|
|
|
onBlur={handleBlur}
|
|
|
|
|
style={{
|
|
|
|
|
height: '60px',
|
|
|
|
|
width: '133ch',
|
|
|
|
|
borderColor: getBorderColor('payment_details'),
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
@ -390,10 +333,8 @@ function Form() {
|
|
|
|
|
<select
|
|
|
|
|
style={{ width: '102ch' }}
|
|
|
|
|
value={codePurpose}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setCodePurpose(e.target.value);
|
|
|
|
|
handleBlur();
|
|
|
|
|
}}
|
|
|
|
|
onChange={(e) => setCodePurpose(e.target.value)}
|
|
|
|
|
onClick={() => setFirstRender(false)}
|
|
|
|
|
>
|
|
|
|
|
<option>1</option>
|
|
|
|
|
<option>2</option>
|
|
|
|
|
@ -413,14 +354,6 @@ function Form() {
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{Object.keys(messages)?.filter((item) => messages[item]?.status != 'OK')
|
|
|
|
|
.length > 0 ? (
|
|
|
|
|
<div className="payment_messages">
|
|
|
|
|
<Messages messages={messages} focusField={focusField} />
|
|
|
|
|
</div>
|
|
|
|
|
) : null}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
