add skeleton verification

Author: actions-user

src/pages/Verification/Tabs/bank-tab/BankCardsUpload.jsx

@@ -7,6 +7,7 @@ import { useState } from "react";
 import { getShebaInfo } from "@persian-tools/persian-tools";
 import { getFieldTranslationByNames } from "../../../../services/Utility";
 import useRequest from "../../../../services/Hooks/useRequest";
+import { Skeleton } from "../../../../components/Skeleton";
 
 const Container = styled.div`
   display: flex;
@@ -135,29 +136,68 @@ const IconWrapper = styled.div`
   }
 `;
 
+// اسکلتون برای کارت بانکی
+const SkeletonCard = styled.div`
+  width: 250px;
+  height: 190px;
+  border-radius: 10px;
+  background-color: ${(props) =>
+    props.theme.colors.newColors.otherColors.inputBg};
+  
+  @media (min-width: 840px) {
+    width: 305px;
+    height: 190px;
+  }
+  @media (min-width: 940px) {
+    width: 380px;
+    height: 190px;
+  }
+`;
+
 const BankCardsUpload = ({
   cards,
   setCards,
   openAddModal,
   setOpenAddModal,
   openDeleteModal,
   setOpenDeleteModal,
+  isLoading,
 }) => {
   const [deleteIndex, setDeleteIndex] = useState(null);
   const { Request, HTTP_METHOD } = useRequest();
-  const handleDeleteCard = ({ index, id }) => {
 
+  const handleDeleteCard = ({ index, id }) => {
     Request(`bank-accounts/${id}`, HTTP_METHOD.DELETE).then((response) => {
       setDeleteIndex(index);
       setOpenDeleteModal(true);
     });
   };
 
+  // اسکلتون لودینگ
+  if (isLoading) {
+    return (
+      <Container>
+        <BankCard>
+          {Array.from({ length: 1 }).map((_, index) => (
+            <SkeletonCard key={index}>
+              <Skeleton width="100%" height="190px" radius="10px" />
+            </SkeletonCard>
+          ))}
+          <UploadWrapper>
+            <Upload>
+              +<span> {getFieldTranslationByNames("890")}</span>
+            </Upload>
+          </UploadWrapper>
+        </BankCard>
+      </Container>
+    );
+  }
+
   return (
     <>
       <Container>
         <BankCard>
-          {cards.map((card, i) => {
+          {cards?.map((card, i) => {
             return (
               <UploadWrapper key={i}>
                 <Image>
@@ -207,4 +247,4 @@ const BankCardsUpload = ({
   );
 };
 
-export default BankCardsUpload;
+export default BankCardsUpload;

src/pages/Verification/Tabs/bank-tab/BankTab.jsx

@@ -1,5 +1,4 @@
 import BankCardsUpload from "./BankCardsUpload";
-
 import styled from "styled-components";
 import { useEffect, useState } from "react";
 import Title from "../../../../components/Title";
@@ -14,20 +13,33 @@ const Wrapper = styled.div`
   flex-direction: column;
   gap: 30px;
 `;
+
 const BankTab = () => {
   const [isError, setIsError] = useState(false);
   const [errors, setErrors] = useState([]);
   const [cards, setCards] = useState([]);
   const [openAddModal, setOpenAddModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
-  const { openErrorModal, setOpenErrorModal } = useState();
+  const [openErrorModal, setOpenErrorModal] = useState(false);
+  const [loading, setLoading] = useState(true); // اضافه شد
 
   const { Request } = useRequest();
+
   useEffect(() => {
-    Request("bank-accounts").then((response) => {
-      setCards(response.data.data);
-    });
+    setLoading(true);
+    Request("bank-accounts")
+      .then((response) => {
+        setCards(response.data.data || []);
+      })
+      .catch((error) => {
+        console.error("Error fetching bank accounts:", error);
+        setCards([]);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, []);
+
   return (
     <Container>
       <Wrapper>
@@ -49,6 +61,7 @@ const BankTab = () => {
           cards={cards}
           setCards={setCards}
           setIsError={setIsError}
+          isLoading={loading}
         />
       </Wrapper>
       {openErrorModal && (
@@ -58,4 +71,4 @@ const BankTab = () => {
   );
 };
 
-export default BankTab;
+export default BankTab;

src/pages/Verification/Tabs/identity-tab/IdentityInputs.jsx

@@ -15,6 +15,7 @@ import {
 } from "../../../../services/Utility";
 import * as Sentry from "@sentry/react";
 import Container from "../../../../components/Common/Container";
+
 const BankContainer = styled.div`
   margin: 20px 0;
   display: flex;
@@ -24,6 +25,7 @@ const BankContainer = styled.div`
     grid-template-columns: 2fr 3fr;
   }
 `;
+
 const IdentityInputs = ({
   data,
   kyc,
@@ -43,12 +45,14 @@ const IdentityInputs = ({
   const [uploadResponse, setUploadResponse] = useState(null);
   const [isVideoUploaded, setIsVideoUploaded] = useState(false);
   const [textVerify, setTextVerify] = useState("");
+  const [isSending, setIsSending] = useState(false); // حالت لودینگ دکمه
   const { Request, HTTP_METHOD } = useRequest();
+
   const sendHandler = () => {
     let errorMessages = [];
-    let newDetails = [...data]; // کپی از دیتیلز برای به‌روزرسانی ارور‌ها
+    let newDetails = [...data];
 
-    // Validation checks and storing error messages and fields
+    // Validation checks
     if (!inputValues.fname) {
       errorMessages.push("نام وارد نشده است.");
       newDetails[0].error = true;
@@ -121,7 +125,18 @@ const IdentityInputs = ({
     }
 
     setErrors(errorMessages);
-    setDetails(newDetails); // به‌روزرسانی دیتیلز با ارور‌ها
+    setDetails(newDetails);
+
+    if (errorMessages.length > 0) {
+      setIdentityError(true);
+      Sentry.captureMessage("Identity verification form validation failed", {
+        level: "warning",
+        extra: { errors: errorMessages },
+      });
+      return;
+    }
+
+    setIsSending(true); // شروع لودینگ
 
     const requestData = new FormData();
     requestData.append("fname", inputValues.fname);
@@ -142,32 +157,26 @@ const IdentityInputs = ({
     );
     requestData.append("_method", "put");
 
-    if (errorMessages.length === 0) {
-      setIdentityError(false);
-      Request(`kyc`, HTTP_METHOD.POST, requestData, {
-        "Content-Type": "multipart/form-data",
+    Request(`kyc`, HTTP_METHOD.POST, requestData, {
+      "Content-Type": "multipart/form-data",
+    })
+      .then((res) => {
+        setSubmitted(true);
       })
-        .then((res) => {
-          setSubmitted(true);
-        })
-        .catch((error) => {
-          Sentry.captureException(error, {
-            tags: {
-              section: "identity-verification",
-            },
-          });
-          ToastError(error.response.data.message);
+      .catch((error) => {
+        Sentry.captureException(error, {
+          tags: { section: "identity-verification" },
         });
-    } else {
-      setIdentityError(true);
-      Sentry.captureMessage("Identity verification form validation failed", {
-        level: "warning",
-        extra: {
-          errors: errorMessages,
-        },
+        ToastError(error.response?.data?.message || "خطا در ارسال اطلاعات");
+      })
+      .finally(() => {
+        setIsSending(false); // پایان لودینگ
       });
-    }
   };
+
+  // بررسی غیرفعال بودن دکمه
+  const isDisabled = !isVideoUploaded;
+
   return (
     <Container identityError={identityError}>
       <BankContainer>
@@ -202,7 +211,7 @@ const IdentityInputs = ({
           large
           label={getFieldTranslationByNames("877")}
           onclick={sendHandler}
-          disabled={isVideoUploaded ? false : true/*"pending" for loading ui*/ }
+          disabled={isDisabled ? true : isSending ? "pending" : false}
         />
       </BankContainer>
       {openErrorModal && (
@@ -212,4 +221,4 @@ const IdentityInputs = ({
   );
 };
 
-export default IdentityInputs;
+export default IdentityInputs;