UCB_PAYMENT/src/Form.jsx

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('');
  const [payerAddress, setPayerAddress] = useState('');
  const [clientId, setClientId] = useState('');
  const [payerBankAccount, setPayerBankAccount] = useState('');
  const [amount, setAmount] = useState('0-00');
  const [payerAccounts, setPayerAccounts] = useState([]);
  const [payerAccount, setPayerAccount] = useState('');
  const [chargesDetails, setChargesDetails] = useState('OUR');
  const [bnfAccount, setBNFAccount] = useState('');
  const [bnfBankBic, setBNFBankBic] = useState('');
  const [bnfINN, setBNFINN] = useState('');
  const [bnfKPP, setBNFKPP] = useState('');
  const [bnfName, setBNFName] = useState('');
  const [bnfBankName, setBNFBankName] = useState('');
  const [paymentDetails, setPaymentDetails] = useState('');
  const [codePurpose, setCodePurpose] = useState('1');
  const [taxUINCode, setTaxUINCode] = useState('');

  const fields = [
    {
      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 = () => {
    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');

    (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);
      setPayerAddress(data.fields[7].value);
      setClientId(data.fields[1].value);
      setPayerBankAccount(data.fields[12].value);
      setPayerAccounts(data.accounts);
      setPayerAccount(data.accounts[0]?.cbAccountNumber);
    })();
  }, []);

  return (
    <>
      <div className="payment">
        <div className="title_wrapper">
          <div className="title">
            Рублевый перевод на счета других клиентов или в другие банки,
            включая налоговые платежи
          </div>
          <div className="title">№2 от 03.07.2024</div>
        </div>
        <div className="section_wrapper">
          <div className="section_header">Плательщик</div>
          <div className="section_line"></div>
        </div>
        <div className="payer">
          <div className="child">Плательщик:</div>
          <div className="child">{`${payerName} ${clientId}`}</div>
          <div className="child">Номер счета:</div>
          <div className="child">
            <select
              value={payerAccount}
              onChange={(e) => setPayerAccount(e.target.value)}
              onClick={() => setFirstRender(false)}
            >
              {payerAccounts.map((item, ind) => (
                <option key={`cbAccountNumber_${ind}`}>
                  {item.description
                    ? `${item.cbAccountNumber}|${item.description}`
                    : item.cbAccountNumber}
                </option>
              ))}
            </select>
          </div>
          <div className="child">ИНН:</div>
          <div className="child">{payerINN}</div>
          <div className="child">Сумма:</div>
          <div className="child">
            <span>
              <input
                value={amount}
                onChange={(e) => setAmount(e.target.value)}
                onBlur={handleBlur}
              />
              RUB
            </span>
          </div>
          <div className="child">Телефон или электронный адрес:</div>
          <div className="child">{payerPhoneEmail}</div>
          <div className="child"></div>
          <div className="child"></div>
          <div className="child">Адрес места жительства:</div>
          <div className="child">{payerAddress}</div>
          <div className="child">Комиссии и расходы:</div>
          <div className="child">
            <select
              value={chargesDetails}
              onChange={(e) => setChargesDetails(e.target.value)}
              onClick={() => setFirstRender(false)}
            >
              <option>BEN</option>
              <option>OUR</option>
              <option>SHA</option>
            </select>
          </div>
        </div>
        <div className="section_wrapper_1">
          <div className="section_header">Получатель</div>
          <div className="section_line"></div>
        </div>
        <div className="receiver_1">
          <div className="child"></div>
          <div className="child"></div>
          <div className="child">БИК:</div>
          <div className="child">
            <input
              value={bnfBankBic}
              onChange={(e) => setBNFBankBic(e.target.value)}
              onBlur={handleBlur}
              style={{ maxWidth: '32ch' }}
            />
          </div>
          <div className="child">№ Корр. счета:</div>
          <div className="child">
            <select style={{ maxWidth: '34ch' }}>
              <option>Выберите значение...</option>
            </select>
          </div>
          <div className="child">Номер счета:</div>
          <div className="child">
            <input
              value={bnfAccount}
              onChange={(e) => setBNFAccount(e.target.value)}
              onBlur={handleBlur}
              style={{ maxWidth: '32ch' }}
            />
          </div>
          <div className="child">ИНН:</div>
          <div className="child">
            <input
              value={bnfINN}
              onChange={(e) => setBNFINN(e.target.value)}
              onBlur={handleBlur}
              style={{ maxWidth: '32ch' }}
            />
          </div>
          <div className="child">КПП (103):</div>
          <div className="child">
            <input
              value={bnfKPP}
              onChange={(e) => setBNFKPP(e.target.value)}
              onBlur={handleBlur}
              style={{ maxWidth: '32ch' }}
            />
          </div>
        </div>
        <div className="receiver_2">
          <div className="child">Наименование:</div>
          <div className="child">
            <input
              value={bnfName}
              onChange={(e) => setBNFName(e.target.value)}
              onBlur={handleBlur}
              style={{ width: '100ch' }}
            />
          </div>
          <div className="child">Банк получателя:</div>
          <div className="child">{bnfBankName}</div>
          <div className="child">Назначение платежа:</div>
          <div className="child">
            <textarea
              value={paymentDetails}
              onChange={(e) => setPaymentDetails(e.target.value)}
              onBlur={handleBlur}
              style={{
                height: '60px',
                width: '133ch',
              }}
            />
          </div>
          <div className="child">Код вида дохода:</div>
          <div className="child">
            <select
              style={{ width: '102ch' }}
              value={codePurpose}
              onChange={(e) => setCodePurpose(e.target.value)}
              onClick={() => setFirstRender(false)}
            >
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div className="child">Код (УИП) (22):</div>
          <div className="child">
            <input
              value={taxUINCode}
              onChange={(e) => setTaxUINCode(e.target.value)}
              onBlur={handleBlur}
              style={{ maxWidth: '32ch' }}
            />
          </div>
        </div>
      </div>
    </>
  );
}

export default App;