107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
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.");
|
|
}
|
|
}, [mutation,query]);
|
|
|
|
const { data, isLoading, isFetching, error } = useQuery({
|
|
queryKey: ["profile", mutation],
|
|
queryFn: () => {
|
|
return axios.get("/profile");
|
|
},
|
|
});
|
|
return (
|
|
<>
|
|
{!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}
|
|
/>
|
|
<ProductConfigList
|
|
data={data?.data}
|
|
userTitle={data?.data?.result?.user_profile?.name}
|
|
isLoading={isLoading}
|
|
isFetching={isFetching}
|
|
error={error}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|