feat: add new feature and fix bugs

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

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction, useState } from "react";
 import MuiModal from "../../../../common/modal";
 import Button from "../../../../components/button";
-import { IoCopy } from "react-icons/io5";
+import { IoCopy, IoDownload } from "react-icons/io5";
 import Alert from "../../../../components/alert/Alert";
 import ProgressSpace from "../../../../components/progressSpace";
 import toast from "react-hot-toast";
@@ -11,6 +11,7 @@ import { setCategoryId } from "../../../../redux/slices/categoryId";
 import Input from "../../../../components/input";
 import LoaderSpaceConfig from "./LoaderSpaceConfig";
 import { AxiosError } from "axios";
+import { downloadWireGuardConfig } from "../../utils/wireguardConfig";
 
 const ModalConfigDetails = ({
   isOpen,
@@ -25,6 +26,7 @@ const ModalConfigDetails = ({
   type,
   username,
   password,
+  wireguardUsername,
   categoryId,
   isLoadSpaceConfig,
   error,
@@ -39,18 +41,20 @@ const ModalConfigDetails = ({
   textCopy: string;
   maxTraffic: number | "unlimited";
   traffic: number;
-  type: string;
+  type: string | null;
   username: string;
   password: string;
+  wireguardUsername?: string | null;
   categoryId: number;
   isLoadSpaceConfig: boolean;
-  error: AxiosError | any;
+  error: AxiosError | Error | null;
   useMaxTraffic: boolean;
 }) => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
-  const [_, setCopyText] = useState<string>("");
   const [isCopyError, setIsCopyError] = useState(false);
+  const configType = type ?? "";
+  const isWireGuard = configType.toLowerCase() === "wireguard";
 
   const copyToClipboard = async (textToCopy: string) => {
     try {
@@ -62,6 +66,16 @@ const ModalConfigDetails = ({
       toast.error(`Failed to copy: , ${err}`);
     }
   };
+  const downloadWireGuardFile = () => {
+    if (!textCopy) {
+      toast.error("کانفیگ وایرگارد موجود نیست");
+      return;
+    }
+
+    downloadWireGuardConfig(textCopy, wireguardUsername);
+    toast.success("فایل کانفیگ دانلود شد");
+  };
+
   return (
     <MuiModal
       isOpenModal={isOpen}
@@ -89,7 +103,7 @@ const ModalConfigDetails = ({
             </div>
           ) : (
             <>
-              {type === "gaming" ? (
+              {configType === "gaming" ? (
                 <>
                   {isCopyError ? (
                     <div className="w-full h-full flex flex-col gap-2">
@@ -112,7 +126,6 @@ const ModalConfigDetails = ({
                     <>
                       <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"
@@ -122,7 +135,6 @@ const ModalConfigDetails = ({
                       </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"
@@ -151,16 +163,27 @@ const ModalConfigDetails = ({
                       </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>
+                    <>
+                      {isWireGuard ? (
+                        <Button
+                          onClick={downloadWireGuardFile}
+                          extra="!m-0 !px-2 !py-1.5 flex flex-row-reverse justify-center items-center gap-1 shadow-md shadow-white"
+                        >
+                          دانلود فایل
+                          <IoDownload />
+                        </Button>
+                      ) : (
+                        <Button
+                          onClick={() => {
+                            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>
+                      )}
+                    </>
                   )}
                 </>
               )}