Bug -> add rule and fix bug

src/pages/rule/section/Rules.tsx

@@ -60,6 +60,18 @@ const ListRules = () => {
             نخواهد شد.
           </p>
         </li>
+        <li className="flex flex-row mt-2 gap-2 w-full bg-gray-800 p-2 rounded-md items-center">
+          <img src={Warning} alt="warning" className="w-[2rem]" />
+          <p className="font-normal max-sm:text-xs max-md:text-sm md:text-lg text-start">
+            ⚠️ اتصال سرویس‌ها
+            <br />
+            با توجه به شرایط فعلی، هیچ تضمینی برای اتصال دائمی سرویس‌ها وجود ندارد. ممکن است اتصال مجدداً قطع شود یا حتی در برخی مواقع امکان برقراری آن فراهم نشود. در حال حاضر، وضعیت کاملاً مشخص و قابل پیش‌بینی نیست.
+            <br />
+            با این حال، ما مانند همیشه تمام تلاش خود را به کار می‌گیریم. خوشبختانه تا این لحظه، تلاش‌هایمان بی‌نتیجه نبوده و هر بار پس از بروز مشکل، توانسته‌ایم اتصال را مجدداً برقرار کرده و پایداری سرویس‌ها را حفظ کنیم.
+            <br />
+            از همراهی و صبوری شما سپاسگزاریم.
+          </p>
+        </li>
       </ul>
     </div>
   );

src/pages/shop/section/productList/ProductList.tsx

@@ -11,7 +11,7 @@ const ProductList = () => {
   const { id } = useSelector((state: RootState) => state.configIdState);
 
   // soheil
-  const [activeId, setActiveId] = useState(2);
+  const [activeId, setActiveId] = useState<number>(0);
   const axios = useAxios();
   const { data, error, isLoading, isFetching } = useQuery({
     queryKey: ["categories"],
@@ -22,6 +22,11 @@ const ProductList = () => {
   useEffect(() => {
     if (id !== "") setActiveId(Number(id));
   }, [id]);
+  useEffect(() => {
+    if (data?.data?.result?.default_category) {
+      setActiveId(Number(data.data.result.default_category));
+    }
+  }, [data]);
 
   return (
     <div className="relative w-full h-full max-md:mt-4 md:mt-8 " id="configs">
@@ -41,7 +46,7 @@ const ProductList = () => {
           برای انتخاب سرویس مورد نظر کلیک کنید تا براتون نمایش داده شود
         </h1>
         <ButtonList
-          ProductsList={data?.data?.result}
+          ProductsList={data?.data?.result?.categories}
           isLoading={isLoading}
           isFetching={isFetching}
           error={error}

src/pages/shop/section/productList/components/ListAllProduct.tsx

@@ -11,8 +11,7 @@ import toast from "react-hot-toast";
 
 const ListAllProduct = ({ activeId }: { activeId: number }) => {
   const axios = useAxios();
-  const [isOpen, setIsOpen] = useState(false);
-  const [configId, setConfigId] = useState(1);
+  const [selectedConfigId, setSelectedConfigId] = useState<number | null>(null);
   const { token } = useSelector((state: RootState) => state.token);
   const navigate = useNavigate();
   const { data, error, isLoading, isFetching } = useQuery({
@@ -66,7 +65,13 @@ const ListAllProduct = ({ activeId }: { activeId: number }) => {
   }
   return (
     <>
-      <ModalBuy isOpen={isOpen} setIsOpen={setIsOpen} configId={configId} />
+      {selectedConfigId !== null && (
+        <ModalBuy
+          isOpen={selectedConfigId !== null}
+          setIsOpen={(open) => { if (!open) setSelectedConfigId(null); }}
+          configId={selectedConfigId}
+        />
+      )}
       <div
         className="w-full h-full border-4 gap-5 border-spacing-1 shadow-lg shadow-white border-solid border-white rounded-lg p-3 grid max-sm:grid-cols-1 max-md:grid-cols-2 max-lg:grid-cols-3 lg:grid-cols-4"
         id="listConfig"
@@ -97,8 +102,7 @@ const ListAllProduct = ({ activeId }: { activeId: number }) => {
                     }
 
                     if (token) {
-                      setIsOpen(true);
-                      setConfigId(Number(item.id));
+                      setSelectedConfigId(Number(item.id));
                     } else {
                       toast.error("برای خرید باید وارد شوید");
                       navigate("/login");

src/pages/shop/section/productList/components/ModalBuy.tsx

@@ -140,7 +140,7 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => {
     toast.promise(mutation.mutateAsync({ ...formik.values, status: "buy" }), {
       loading: "درحال انتقال به درگاه پرداخت...",
       success: (res: AxiosResponse) => {
-        window.location.href = res?.data?.result?.action;
+        window.location.href = res?.data?.result?.payment?.action;
         return `${res.data.alert}`;
       },
       error: (err: AxiosError) => {
@@ -217,6 +217,10 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => {
               کاربر گرامی لطفا از خاموش بودن vpn خود اطمینان حاصل فرمایید تا در
               درگاه پرداخت مشکلی نداشته باشید{" "}
             </Alert>
+                        <div className="w-full bg-gray-800 rounded-md p-2 text-xs text-gray-400 leading-6 text-right">
+              <p className="font-bold text-yellow-400 text-xs mb-1">⚠️ اتصال سرویس‌ها</p>
+              <p>با توجه به شرایط فعلی، هیچ تضمینی برای اتصال دائمی سرویس‌ها وجود ندارد. ممکن است اتصال مجدداً قطع شود یا حتی در برخی مواقع امکان برقراری آن فراهم نشود. با این حال، تمام تلاش خود را می‌کنیم تا هر چه سریع‌تر مشکل را برطرف کنیم. از همراهی و صبوری شما سپاسگزاریم.</p>
+            </div>
             <h1 className="font-bold">
               مبلغ قابل پرداخت :{" "}
               <span className="px-[2px] rounded-md bg-secondTheme text-gray-950">