|
|
|
@ -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,18 @@ function Form(props) {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
const handleBlur = useCallback(() => {
|
|
|
|
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 +167,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 +193,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 +224,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}`}>
|
|
|
|
@ -245,8 +261,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>
|
|
|
|
@ -333,8 +351,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 +374,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} />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
sync
1 year ago
