Load terms dynamically and link checkout to terms page

src/pages/rule/section/Rules.tsx

@@ -1,86 +1,63 @@
+import { useQuery } from "@tanstack/react-query";
 import Warning from "../../../assets/gifs/warning.gif";
+import useAxios from "../../../hooks/useAxios";
+import Alert from "../../../components/alert/Alert";
+import Button from "../../../components/button";
+
+type TermsContent = {
+  title: string;
+  introduction: string;
+  notice: string;
+  preamble: string;
+  clauses: string[];
+};
 
 const Rules = () => {
+  const axios = useAxios();
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ["siteTerms"],
+    queryFn: async () => {
+      const response = await axios.get<{ result: TermsContent }>("/home/terms");
+      return response.data.result;
+    },
+    staleTime: 0,
+  });
+
+  if (isLoading) {
+    return <p role="status" className="p-4 text-center">در حال دریافت قوانین و مقررات...</p>;
+  }
+
+  if (isError || !data) {
     return (
-    <div className="relative w-full h-full flex flex-col px-4 py-4 text-start">
-      <h1 className="font-bold text-xl md:text-2xl text-center">
-        قوانین و مقررات
-      </h1>
-      <p className="font-normal text-sm mt-2 md:text-lg text-start">
-        لطفا با دقت زیاد متن توضیح زیر را بخوانید :<br />
-        قوانین پرشین پینگ لطفا قبل از خریداری به نکاتی که در زیر گفته شده دقت
-        کنید و با آگاهی به این شرایط خرید بفرمایید:
-      </p>
-      <p className="font-bold text-sm mt-2 md:text-lg text-yellow-500 text-start">
-        این سرویس تابع قوانین ایران می‌باشد
-      </p>
-      <p className="font-normal text-sm mt-2 md:text-lg text-start">
-        با تهیه و استفاده از اکانت پرشین پینگ می‌پذیرید:
-      </p>
-      <ListRules />
+      <div className="p-4 flex flex-col items-center gap-3">
+        <Alert type="warning">دریافت قوانین و مقررات انجام نشد. دوباره تلاش کنید.</Alert>
+        <Button onClick={() => refetch()}>تلاش دوباره</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative w-full h-full flex flex-col px-4 py-4 text-start" dir="rtl">
+      <h1 className="font-bold text-xl md:text-2xl text-center">{data.title}</h1>
+      {data.introduction && (
+        <p className="font-normal text-sm mt-2 md:text-lg text-start whitespace-pre-line">{data.introduction}</p>
+      )}
+      {data.notice && (
+        <p className="font-bold text-sm mt-2 md:text-lg text-yellow-500 text-start whitespace-pre-line">{data.notice}</p>
+      )}
+      {data.preamble && (
+        <p className="font-normal text-sm mt-2 md:text-lg text-start whitespace-pre-line">{data.preamble}</p>
+      )}
+      <ul className="w-full h-full mt-2">
+        {data.clauses.map((clause, index) => (
+          <li key={index} className="flex flex-row mt-2 gap-2 w-full bg-gray-800 p-2 rounded-md items-center">
+            <img src={Warning} alt="" className="w-[2rem] shrink-0" />
+            <p className="font-normal max-sm:text-xs max-md:text-sm md:text-lg text-start whitespace-pre-line">{clause}</p>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 };
 
 export default Rules;
-
-const ListRules = () => {
-  return (
-    <div className="w-full h-full mt-2">
-      <ul>
-        <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">
-            هرگونه استفاده غیر مجاز و غیر قانونی به عهده شخص استفاده‌کننده
-            می‌باشد.
-          </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">
-            در صورتی که سرویس خریداری شده یک کاربره باشد و اگر سرویس خود را در
-            اختیار شخص دیگری قرار دهید سرویس شما به صورت خودکار مسدود خواهد شد.{" "}
-          </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">
-            در صورتی که مشکلی برای سرویس‌ها به وجود بیاید تمام سعی خود را
-            می‌کنیم تا هر چه سریع‌تر مشکل را برطرف کنیم. بازه زمانی بین 10 دقیقه
-            الی حداکثر 24 ساعت می‌باشد.{" "}
-          </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">
-            تمامی سرویس‌های ما مخصوص بازی می‌باشد و برای کاهش پینگ در بازی‌های
-            آنلاین و عبور از تحریم بازی‌ها استفاده می‌شود و هرگونه استفاده غیر
-            مجاز از سرویس‌ها به عنوان V.p.n و استفاده‌های دیگر ممنوع می‌باشد و
-            در صورت مشاهده سرویس شما مسدود می‌گردد و هزینه‌ای هم برگشت داده
-            نخواهد شد.
-          </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">
-            به‌دلیل برخی پروتکل‌های امنیتی و به‌منظور جلوگیری از سوءاستفاده،
-            برای خریدهای با مبلغ بیش از ۲۰ میلیون تومان، احراز هویت پیشرفته
-            انجام می‌شود.
-          </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/components/ModalBuy.tsx

@@ -503,7 +503,7 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => {
         )}
         {data?.data?.result?.max_config !== 0 && !isLoading && !isFetching && (
           <p className="w-full text-center text-xs text-gray-500 mt-1">
-            با خرید، <span className="text-gray-400">قوانین و مقررات</span> را
+            با خرید، <a href="/rule" target="_blank" rel="noopener noreferrer" className="text-gray-400 underline">قوانین و مقررات</a> را
             می‌پذیرید.
           </p>
         )}