Merge branch 'dev' into 'main'

INN taxnumber in verification tab

See merge request frontend/admin!45

package.json

@@ -42,6 +42,7 @@
     "start-server-and-test": "^2.0.0",
     "styled-components": "^5.3.5",
     "typescript": "^4.8.2",
+    "use-debounce": "^9.0.4",
     "web-vitals": "^2.1.4",
     "zustand": "^4.3.8"
   },

src/api/verification.ts

@@ -13,14 +13,16 @@ export type Verification = {
   status: "org" | "nko";
   updated_at: string;
   comment: string;
+  taxnumber: string;
   files: File[];
 };
 
 type PatchVerificationBody = {
-  id: string;
-  status: "org" | "nko";
-  comment: string;
-  accepted: boolean;
+  id?: string;
+  status?: "org" | "nko";
+  comment?: string;
+  accepted?: boolean;
+  taxnumber?: string;
 };
 
 const baseUrl =
@@ -55,7 +57,7 @@ export const patchVerification = async (
     >({
       method: "patch",
       useToken: true,
-      url: baseUrl + `/verification/verification`,
+      url: baseUrl + `/verification`,
       body,
     });
 

src/pages/dashboard/ModalUser/VerificationTab.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { Box, Typography, TextField, Button } from "@mui/material";
 import { verification, patchVerification } from "@root/api/verification";
 import { enqueueSnackbar } from "notistack";
+import { useDebouncedCallback } from "use-debounce";
 
 import type { ChangeEvent } from "react";
 import type { Verification } from "@root/api/verification";
@@ -12,8 +13,9 @@ type VerificationTabProps = {
 
 export const VerificationTab = ({ userId }: VerificationTabProps) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [user, setUser] = useState<Verification | null>(null);
+  const [verificationInfo, setVerificationInfo] = useState<Verification | null>(null);
   const [comment, setComment] = useState<string>("");
+  const [INN, setINN] = useState<string>("");
 
   const requestVefification = async () => {
     setIsLoading(true);
@@ -29,25 +31,34 @@ export const VerificationTab = ({ userId }: VerificationTabProps) => {
     }
 
     if (verificationResponse) {
-      setUser(verificationResponse);
+      setVerificationInfo(verificationResponse);
       setComment(verificationResponse.comment);
+      setINN(verificationResponse.taxnumber)
     }
   };
 
+  const debouncedINNHC =  useDebouncedCallback((str) => {
+      patchVerification({
+        taxnumber: str.replace(/[^0-9]/g,""),
+        id: verificationInfo?._id,
+      });
+    }, 2000);
+  
+
   useEffect(() => {
     requestVefification();
   }, []);
 
   const verify = async (accepted: boolean) => {
-    if (!user) {
+    if (!verificationInfo) {
       return;
     }
 
     const [_, patchVerificationError] = await patchVerification({
       accepted,
       comment,
-      id: user._id,
-      status: user.status,
+      id: verificationInfo._id,
+      status: verificationInfo.status,
     });
 
     if (patchVerificationError) {
@@ -63,10 +74,10 @@ export const VerificationTab = ({ userId }: VerificationTabProps) => {
         sx={{
           marginBottom: "10px",
           fontWeight: "bold",
-          color: user?.accepted ? "#0D9F00" : "#E02C2C",
+          color: verificationInfo?.accepted ? "#0D9F00" : "#E02C2C",
         }}
       >
-        {user?.accepted ? "Верификация пройдена" : "Не верифицирован"}
+        {verificationInfo?.accepted ? "Верификация пройдена" : "Не верифицирован"}
       </Typography>
       {isLoading ? (
         <Typography
@@ -74,8 +85,9 @@ export const VerificationTab = ({ userId }: VerificationTabProps) => {
         >
           Загрузка данных...
         </Typography>
-      ) : user && user.files.length > 0 ? (
-        user.files.map(({ name, url }, index) => (
+      ) : 
+      verificationInfo && verificationInfo.files.length > 0 ? (
+        verificationInfo.files.map(({ name, url }, index) => (
           <Box sx={{ marginBottom: "25px" }} key={name + url}>
             <Typography sx={{ fontWeight: "bold", fontSize: "18px" }}>
               {index + 1}.{" "}
@@ -89,6 +101,7 @@ export const VerificationTab = ({ userId }: VerificationTabProps) => {
             </Typography>
             <Typography>
               <a
+               target="_blank"
                 style={{
                   color: "#7E2AEA",
                   textDecoration: "none",
@@ -108,7 +121,18 @@ export const VerificationTab = ({ userId }: VerificationTabProps) => {
           Пользователь не загружал данные
         </Typography>
       )}
-      {user?.comment && (
+      <TextField
+      value={INN}
+      onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>{
+        if (!verificationInfo) {
+          return;
+        }
+        setINN(event.target.value)
+        debouncedINNHC(event.target.value)}
+      } 
+      placeholder="ИНН"
+      />
+      {verificationInfo?.comment && (
         <Box sx={{ marginBottom: "15px" }}>
           <Typography
             component="span"
@@ -116,7 +140,7 @@ export const VerificationTab = ({ userId }: VerificationTabProps) => {
           >
             Комментарий:
           </Typography>
-          <Typography component="span"> {user.comment}</Typography>
+          <Typography component="span"> {verificationInfo.comment}</Typography>
         </Box>
       )}
       <TextField

yarn.lock

@@ -12355,6 +12355,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-debounce@^9.0.4:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-9.0.4.tgz#51d25d856fbdfeb537553972ce3943b897f1ac85"
+  integrity sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==
+
 use-sync-external-store@1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"