Implement fetching payer data using getClientInfo.

src/App.css

@@ -77,7 +77,7 @@ body {
   height: 100vh;
   height: 100svh;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1.3fr 0.5fr 1fr;
   grid-template-rows: 1rem 1rem 1rem 1rem;
   grid-row-gap: 15px;
 }

src/App.jsx

@@ -1,8 +1,43 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import './App.css';
 
 function App() {
-  const [count, setCount] = useState(0);
+  const [payerName, setPayerName] = useState('');
+  const [payerINN, setPayerINN] = useState('');
+  const [payerPhoneEmail, setPayerPhoneEmail] = useState('');
+  const [payerAddress, setPayerAddress] = useState('');
+  const [clientId, setClientId] = useState('');
+  const [payerBankAccount, setPayerBankAccount] = useState('');
+
+  useEffect(() => {
+    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: '00234052' },
+            { name: 'form_type', value: 'EXT-RUB' },
+          ],
+          action: 'getClientInfo',
+        }),
+      });
+
+      const data = await response.json();
+      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);
+    };
+
+    fetchUsingAsyncAwaitWithFetchApi();
+  }, []);
 
   return (
     <>
@@ -20,17 +55,15 @@ function App() {
         </div>
         <div className="payer">
           <div className="child">Плательщик:</div>
-          <div className="child">Шигорина Наталья Николаевна 00234052</div>
+          <div className="child">{`${payerName} ${clientId}`}</div>
           <div className="child">Номер счета:</div>
           <div className="child">
             <select>
-              <option>12321</option>
+              <option>{payerBankAccount}</option>
-              <option>12322</option>
-              <option>12323</option>
             </select>
           </div>
           <div className="child">ИНН:</div>
-          <div className="child">123456789123</div>
+          <div className="child">{payerINN}</div>
           <div className="child">Сумма:</div>
           <div className="child">
             <span>
@@ -39,13 +72,11 @@ function App() {
             </span>
           </div>
           <div className="child">Телефон или электронный адрес:</div>
-          <div className="child">+7-4942326120 schnn@mail.ru</div>
+          <div className="child">{payerPhoneEmail}</div>
           <div className="child"></div>
           <div className="child"></div>
           <div className="child">Адрес места жительства:</div>
-          <div className="child">
+          <div className="child">{payerAddress}</div>
-            г. Москва, ул. Дмитрия Ульянова 158/1, кв. 12
-          </div>
           <div className="child">Комиссии и расходы:</div>
           <div className="child">
             <select>

vite.config.js

@@ -1,7 +1,18 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  server: {
+    proxy: {
+      '/pmtvalidation': {
+        target: 'http://ucbqawebowl67:8009',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/pmtvalidation/, 'pmtvalidation'),
+      },
+    },
+    host: true,
+    strictPort: true,
+  },
+});