Implement fetching payee data.

src/Form.jsx

@@ -20,6 +20,10 @@ function Form() {
   const [bnfKPP, setBNFKPP] = useState('');
   const [bnfName, setBNFName] = useState('');
   const [bnfBankName, setBNFBankName] = useState('');
+  const [bnfBankAccounts, setBNFBankAccounts] = useState([
+    'Выберите значение...',
+  ]);
+  const [bnfBankAccount, setBNFBankAccount] = useState('Выберите значение...');
   const [paymentDetails, setPaymentDetails] = useState('');
   const [codePurpose, setCodePurpose] = useState('1');
   const [taxUINCode, setTaxUINCode] = useState('');
@@ -101,6 +105,13 @@ function Form() {
       message: '',
       values: [],
     },
+    {
+      name: 'bnf_bank_account',
+      value: bnfBankAccount,
+      status: 'OK',
+      message: '',
+      values: bnfBankAccounts,
+    },
     {
       name: 'payment_details',
       value: paymentDetails,
@@ -157,7 +168,7 @@ function Form() {
     }
   };
 
-  const handleBlur = () => {
+  const handleBlur = (field) => {
     setFirstRender(false);
     (async () => {
       const data = await requestPMTValidationAsyncAwait(fields, 'validate');
@@ -168,9 +179,25 @@ function Form() {
         }, {})
       );
     })();
+    if (['bnf_account', 'bnf_bank_bic', 'bnf_inn'].includes(field)) {
+      (async () => {
+        const data = await requestPMTValidationAsyncAwait(
+          fields,
+          'doActionForField',
+          field
+        );
+        setBNFBankName(data.fields[13].value);
+        setBNFBankAccounts(data.fields[14].values);
+        setBNFBankAccount(data.fields[14].values[0]);
+      })();
+    }
   };
 
-  const requestPMTValidationAsyncAwait = async (fields, action) => {
+  const requestPMTValidationAsyncAwait = async (
+    fields,
+    action,
+    currentField = null
+  ) => {
     const response = await fetch('/pmtvalidation/validate/', {
       method: 'POST',
       headers: {
@@ -180,12 +207,22 @@ function Form() {
       body: JSON.stringify({
         fields: fields,
         action: action,
+        currentField: currentField,
       }),
     });
     const data = await response.json();
+    console.log(data);
     return data;
   };
 
+  useEffect(() => {
+    if (firstRender) {
+      setFirstRender(false);
+      return;
+    }
+    handleBlur();
+  }, [firstRender, bnfBankAccount, payerAccount]);
+
   useEffect(() => {
     const URLParams = new URLSearchParams(window.location.search);
     const cnum = URLParams.get('cnum');
@@ -306,7 +343,7 @@ function Form() {
                 id="bnf_bank_bic"
                 value={bnfBankBic}
                 onChange={(e) => setBNFBankBic(e.target.value)}
-                onBlur={handleBlur}
+                onBlur={(e) => handleBlur('bnf_bank_bic')}
                 style={{
                   maxWidth: '32ch',
                   borderColor: getBorderColor('bnf_bank_bic'),
@@ -315,8 +352,17 @@ function Form() {
             </div>
             <div className="child">№ Корр. счета:</div>
             <div className="child">
-              <select style={{ maxWidth: '34ch' }}>
-                <option>Выберите значение...</option>
+              <select
+                onChange={(e) => {
+                  setBNFBankAccount(e.target.value);
+                  /* handleBlur(); */
+                }}
+                value={bnfBankAccount}
+                style={{ maxWidth: '34ch' }}
+              >
+                {bnfBankAccounts.map((item, ind) => (
+                  <option key={`bnfBankAccount_${ind}`}>{item}</option>
+                ))}
               </select>
             </div>
             <div className="child">Номер счета:</div>
@@ -325,7 +371,7 @@ function Form() {
                 id="bnf_account"
                 value={bnfAccount}
                 onChange={(e) => setBNFAccount(e.target.value)}
-                onBlur={handleBlur}
+                onBlur={(e) => handleBlur('bnf_account')}
                 style={{
                   maxWidth: '32ch',
                   borderColor: getBorderColor('bnf_account'),
@@ -338,7 +384,7 @@ function Form() {
                 id="bnf_inn"
                 value={bnfINN}
                 onChange={(e) => setBNFINN(e.target.value)}
-                onBlur={handleBlur}
+                onBlur={(e) => handleBlur('bnf_inn')}
                 style={{
                   maxWidth: '32ch',
                   borderColor: getBorderColor('bnf_inn'),