(force) Update project: Added 60 new features and made various changes

{warning: this all chnaged}

src/pages/profile/section/components/ModalConfigDetails.tsx

@@ -8,6 +8,9 @@ import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { setCategoryId } from "../../../../redux/slices/categoryId";
+import Input from "../../../../components/input";
+import LoaderSpaceConfig from "./LoaderSpaceConfig";
+import { AxiosError } from "axios";
 
 const ModalConfigDetails = ({
   isOpen,
@@ -23,6 +26,9 @@ const ModalConfigDetails = ({
   username,
   password,
   categoryId,
+  isLoadSpaceConfig,
+  error,
+  useMaxTraffic,
 }: {
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
@@ -37,10 +43,14 @@ const ModalConfigDetails = ({
   username: string;
   password: string;
   categoryId: number;
+  isLoadSpaceConfig: boolean;
+  error: AxiosError | any;
+  useMaxTraffic: boolean;
 }) => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
-  const [copyText, setCopyText] = useState<string>("");
+  const [_, setCopyText] = useState<string>("");
+  const [isCopyError, setIsCopyError] = useState(false);
 
   const copyToClipboard = async (textToCopy: string) => {
     try {
@@ -48,12 +58,8 @@ const ModalConfigDetails = ({
 
       toast.success("متن با موفقیت کپی شد!");
     } catch (err) {
-      try {
-        await navigator.clipboard.writeText(copyText);
-        toast.success("متن با موفقیت کپی شد!");
-      } catch (err) {
-        toast.error(`Failed to copy: , ${err}`);
-      }
+      setIsCopyError(true);
+      toast.error(`Failed to copy: , ${err}`);
     }
   };
   return (
@@ -68,48 +74,95 @@ const ModalConfigDetails = ({
           تاریخ خرید : {dateBuy}
         </h1>
         <div className="w-full h-full flex flex-row-reverse gap-2 flex-wrap justify-center items-center">
-          {isDisabled ? (
+          {isDisabled || useMaxTraffic ? (
             <div className="w-full h-full flex flex-wrap justify-center items-center">
-              <Button extra="!m-0 !px-2 !py-1 shadow-md flex-1 shadow-secondTheme !bg-secondTheme font-bold hover:!bg-gray-800 hover:!shadow-gray-800 ">
+              {/* <Button extra="!m-0 !px-2 !py-1 shadow-md flex-1 shadow-secondTheme !bg-secondTheme font-bold hover:!bg-gray-800 hover:!shadow-gray-800 ">
                 تمدید
-              </Button>
+              </Button> */}
+              <div className="w-full h-full text-xs sm:text-sm md:text-base">
+                {useMaxTraffic ? (
+                  <h1>مشترک گرامی کانفیگ شما به دلیل اتمام حجم غیر فعال است</h1>
+                ) : isDisabled && (
+                  <h1>مشترک گرامی کانفیگ شما به دلیل پایان اعتبار غیر فعال است</h1>
+                )}
+              </div>
             </div>
           ) : (
             <>
               {type === "gaming" ? (
                 <>
-                  <Button
-                    onClick={() => {
-                      setCopyText(username);
-                      copyToClipboard(username);
-                    }}
-                    extra="!m-0 !px-2 !py-1.5 flex flex-row-reverse justify-center items-center gap-1 shadow-md shadow-white"
-                  >
-                    کپی یوزرنیم
-                    <IoCopy />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      setCopyText(password);
-                      copyToClipboard(password);
-                    }}
-                    extra="!m-0 !px-2 !py-1.5 flex flex-row-reverse justify-center items-center gap-1 shadow-md shadow-white"
-                  >
-                    کپی پسورد
-                    <IoCopy />
-                  </Button>
+                  {isCopyError ? (
+                    <div className="w-full h-full flex flex-col gap-2">
+                      <h1 className="bg-red-600 rounded-md p-1">
+                        کاربر گرامی کپی خودکار موفقیت آمیز نبود لطفا به صورت
+                        دستی از زیر انتخاب کرده و کپی کنید
+                      </h1>
+                      <Input
+                        type="text"
+                        value={`نام کاربری : ${username}`}
+                        disabled={true}
+                      />
+                      <Input
+                        type="text"
+                        value={`رمز عبور : ${password}`}
+                        disabled={true}
+                      />
+                    </div>
+                  ) : (
+                    <>
+                      <Button
+                        onClick={() => {
+                          setCopyText(password);
+                          copyToClipboard(password);
+                        }}
+                        extra="!m-0 !px-2 !py-1.5 flex flex-row-reverse justify-center items-center gap-1 shadow-md shadow-white"
+                      >
+                        کپی پسورد
+                        <IoCopy />
+                      </Button>
+                      <Button
+                        onClick={() => {
+                          setCopyText(username);
+                          copyToClipboard(username);
+                        }}
+                        extra="!m-0 !px-2 !py-1.5 flex flex-row-reverse justify-center items-center gap-1 shadow-md shadow-white"
+                      >
+                        کپی یوزرنیم
+                        <IoCopy />
+                      </Button>
+                    </>
+                  )}
                 </>
               ) : (
-                <Button
-                  onClick={() => {
-                    setCopyText(textCopy);
-                    copyToClipboard(textCopy);
-                  }}
-                  extra="!m-0 !px-2 !py-1.5 flex flex-row-reverse justify-center items-center gap-1 shadow-md shadow-white"
-                >
-                  کپی
-                  <IoCopy />
-                </Button>
+                <>
+                  {isCopyError ? (
+                    <>
+                      <div className="w-full h-full flex flex-col gap-2">
+                        <h1 className="bg-red-600 rounded-md p-1">
+                          کاربر گرامی کپی خودکار موفقیت آمیز نبود لطفا به صورت
+                          دستی از زیر انتخاب کرده و کپی کنید
+                        </h1>
+                        <textarea
+                          value={textCopy}
+                          className="outline-none border-none sm:text-sm rounded-lg block w-full p-2.5 md:p-3 bg-gray-700 border-gray-600 placeholder-gray-400 text-white"
+                          disabled={true}
+                          rows={8}
+                        ></textarea>
+                      </div>
+                    </>
+                  ) : (
+                    <Button
+                      onClick={() => {
+                        setCopyText(textCopy);
+                        copyToClipboard(textCopy);
+                      }}
+                      extra="!m-0 !px-2 !py-1.5 flex flex-row-reverse justify-center items-center gap-1 shadow-md shadow-white"
+                    >
+                      کپی
+                      <IoCopy />
+                    </Button>
+                  )}
+                </>
               )}
               <Button
                 onClick={() => {
@@ -127,7 +180,18 @@ const ModalConfigDetails = ({
         </div>
         {!isDisabled && isShowTraffic && (
           <div className="w-full h-full">
-            <ProgressSpace startSpace={traffic} endSpace={maxTraffic} />
+            {isLoadSpaceConfig ? (
+              <div className="flex w-full h-full justify-center items-center">
+                <LoaderSpaceConfig />
+              </div>
+            ) : error ? (
+              <div className="w-full h-full text-center">
+                {" "}
+                خطایی رخ داد : {error?.message}
+              </div>
+            ) : (
+              <ProgressSpace startSpace={traffic} endSpace={maxTraffic} />
+            )}
           </div>
         )}
       </div>