diff --git a/src/Form.jsx b/src/Form.jsx index 9ce5edf..1f1e45e 100644 --- a/src/Form.jsx +++ b/src/Form.jsx @@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'; import './Form.css'; function App() { + const [firstRender, setFirstRender] = useState(true); const [payerName, setPayerName] = useState(''); const [payerINN, setPayerINN] = useState(''); const [payerPhoneEmail, setPayerPhoneEmail] = useState(''); @@ -23,51 +24,161 @@ function App() { const [taxUINCode, setTaxUINCode] = useState(''); const fields = [ - { name: 'payer_name', value: payerName }, - { name: 'client_id', value: clientId }, - { name: 'payer_inn', value: payerINN }, - { name: 'payer_phone_email', value: payerPhoneEmail }, - { name: 'payer_address', value: payerAddress }, - { name: 'amount', value: amount }, - { name: 'payer_account', value: payerAccount }, - { name: 'details_of_charges', value: chargesDetails }, - { name: 'bnf_account', value: bnfAccount }, - { name: 'bnf_bank_bic', value: bnfBankBic }, - { name: 'bnf_inn', value: bnfINN }, - { name: 'bnf_kpp', value: bnfKPP }, - { name: 'bnf_name', value: bnfName }, - { name: 'bnf_bank_name', value: bnfBankName }, - { name: 'payment_details', value: paymentDetails }, - { name: 'code_purpose', value: codePurpose }, - { name: 'tax_uin_code', value: taxUINCode }, + { + name: 'payer_name', + value: payerName, + status: 'OK', + message: '', + values: [], + }, + { + name: 'client_id', + value: clientId, + status: 'OK', + message: '', + values: [], + }, + { + name: 'payer_inn', + value: payerINN, + status: 'OK', + message: '', + values: [], + }, + { + name: 'payer_phone_email', + value: payerPhoneEmail, + status: 'OK', + message: '', + values: [], + }, + { + name: 'payer_address', + value: payerAddress, + status: 'OK', + message: '', + values: [], + }, + { name: 'amount', value: amount, status: 'OK', message: '', values: [] }, + { + name: 'payer_account', + value: payerAccount?.split('|')[0], + status: 'OK', + message: '', + values: [], + }, + { + name: 'details_of_charges', + value: chargesDetails, + status: 'OK', + message: '', + values: [], + }, + { + name: 'bnf_account', + value: bnfAccount, + status: 'OK', + message: '', + values: [], + }, + { + name: 'bnf_bank_bic', + value: bnfBankBic, + status: 'OK', + message: '', + values: [], + }, + { name: 'bnf_inn', value: bnfINN, status: 'OK', message: '', values: [] }, + { name: 'bnf_kpp', value: bnfKPP, status: 'OK', message: '', values: [] }, + { name: 'bnf_name', value: bnfName, status: 'OK', message: '', values: [] }, + { + name: 'bnf_bank_name', + value: bnfBankName, + status: 'OK', + message: '', + values: [], + }, + { + name: 'payment_details', + value: paymentDetails, + status: 'OK', + message: '', + values: [], + }, + { + name: 'code_purpose', + value: codePurpose, + status: 'OK', + message: '', + values: [], + }, + { + name: 'tax_uin_code', + value: taxUINCode, + status: 'OK', + message: '', + values: [], + }, + { + name: 'form_type', + value: 'EXT-RUB', + status: 'OK', + message: '', + values: [], + }, + { + name: 'payment_type', + values: [], + value: 'regular_payment', + status: 'OK', + message: null, + }, ]; const handleBlur = () => { - console.log(fields); + setFirstRender(false); + (async () => { + const data = await requestPMTValidationAsyncAwait(fields, 'validate'); + console.log(data); + })(); }; + const requestPMTValidationAsyncAwait = async (fields, action) => { + const response = await fetch('/pmtvalidation/validate/', { + method: 'POST', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + fields: fields, + action: action, + }), + }); + const data = await response.json(); + return data; + }; + + useEffect(() => { + if (!firstRender) { + handleBlur(); + } + }, [firstRender, handleBlur, chargesDetails, codePurpose, payerAccount]); + useEffect(() => { const URLParams = new URLSearchParams(window.location.search); const cnum = URLParams.get('cnum'); const ftype = URLParams.get('type'); - const fetchUsingAsyncAwaitWithFetchApi = async () => { - const response = await fetch('/pmtvalidation/validate/', { - method: 'POST', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - fields: [ - { name: 'payer_account' }, - { name: 'client_id', value: cnum }, - { name: 'form_type', value: ftype }, - ], - action: 'getClientInfo', - }), - }); - const data = await response.json(); + (async () => { + const data = await requestPMTValidationAsyncAwait( + [ + { name: 'payer_account' }, + { name: 'client_id', value: cnum }, + { name: 'form_type', value: ftype }, + ], + 'getClientInfo' + ); setPayerName(data.fields[3].value); setPayerINN(data.fields[4].value); setPayerPhoneEmail(data.fields[6].value); @@ -75,9 +186,8 @@ function App() { setClientId(data.fields[1].value); setPayerBankAccount(data.fields[12].value); setPayerAccounts(data.accounts); - }; - - fetchUsingAsyncAwaitWithFetchApi(); + setPayerAccount(data.accounts[0]?.cbAccountNumber); + })(); }, []); return ( @@ -102,7 +212,7 @@ function App() { setChargesDetails(e.target.value)} + onClick={() => setFirstRender(false)} > @@ -224,6 +335,7 @@ function App() { style={{ width: '102ch' }} value={codePurpose} onChange={(e) => setCodePurpose(e.target.value)} + onClick={() => setFirstRender(false)} >