feat : dynamic profile api and add logout btn

src/pages/profile/index.tsx

@@ -1,12 +1,94 @@
 import ProfileDetails from "./section/ProfileDetails";
 import ProductConfigList from "./section/ProductConfigList";
+import { useQueryParams } from "../../hooks/useQueryParams";
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import useAxios from "../../hooks/useAxios";
+import { AxiosError, AxiosResponse } from "axios";
+import ModalPayment from "./section/components/ModalPayment";
+import { useNavigate } from "react-router-dom";
 
 const Profile = () => {
+  const query = useQueryParams();
+  const axios = useAxios();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isPayment, setIsPayment] = useState<boolean>(false);
+  const [message, setMessage] = useState<string>("");
+  const navigate = useNavigate();
+  const mutation = useMutation({
+    mutationKey: ["statusPayment"],
+    mutationFn: (values: { trackId: string }) => {
+      return axios.post("/home/config/confirm", values);
+    },
+    onSuccess: (data) => {
+      setIsOpen(true);
+      setIsPayment(true);
+      setMessage(data?.data?.result?.alert);
+      navigate("/profile", { replace: true });
+    },
+    onError: (err: AxiosError) => {
+      let errorMessage = "یک خطای غیرمنتظره رخ داد";
+      if (
+        err.response?.data &&
+        typeof err.response.data === "object" &&
+        "alert" in err.response.data
+      ) {
+        errorMessage = (err.response.data as { alert: string }).alert;
+      }
+      setIsOpen(true);
+      setIsPayment(false);
+      setMessage(errorMessage);
+      navigate("/profile", { replace: true });
+    },
+  });
+  useEffect(() => {
+    const trackId = query.get("trackId");
+    
+    if (trackId) {
+      toast.promise(mutation.mutateAsync({ trackId }), {
+        loading: "درحال تایید درگاه پرداخت...",
+        success: (res: AxiosResponse) => {
+          return `${res.data.alert}`;
+        },
+        error: (err: AxiosError) => {
+          let errorMessage = "یک خطای غیرمنتظره رخ داد";
+          if (
+            err.response?.data &&
+            typeof err.response.data === "object" &&
+            "alert" in err.response.data
+          ) {
+            errorMessage = (err.response.data as { alert: string }).alert;
+          }
+          return errorMessage;
+        },
+      });
+    } else {
+      console.error("Track ID is missing or invalid.");
+    }
+  }, []);
+
+  const {data,isLoading,isFetching,error} = useQuery({
+    queryKey:["profile",mutation],
+    queryFn:()=>{
+      return axios.get('/profile');
+    }
+  })
   return (
-    <div className="relative h-full w-full flex flex-col gap-4">
-        <ProfileDetails />
-        <ProductConfigList />
-    </div>
+    <>
+      {!mutation.isPending && (
+        <ModalPayment
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          isPayment={isPayment}
+          message={message}
+        />
+      )}
+      <div className="relative h-full w-full flex flex-col gap-4">
+        <ProfileDetails data={data?.data} isLoading={isLoading} isFetching={isFetching} error={error} userTitle=""/>
+        <ProductConfigList data={data?.data} userTitle={data?.data?.result?.user_profile?.name} isLoading={isLoading} isFetching={isFetching} error={error} />
+      </div>
+    </>
   );
 };