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