convert number

src/App.tsx

@@ -14,6 +14,7 @@ import ToastContainer from './components/Toast';
 import { getRefreshToken, removeRefreshToken, removeToken, setRefreshToken, setToken } from './config/func';
 import { refreshToken } from './pages/auth/service/Service';
 import BuySpace from './shared/components/BuySpace'
+import useConvertNumbers from './hooks/useConvertNumbers'
 
 declare global {
   interface Window {
@@ -96,6 +97,7 @@ const queryClient = new QueryClient({
 });
 
 const App: FC = () => {
+  useConvertNumbers()
   return (
     <BrowserRouter>
       <I18nextProvider i18n={i18next}>

src/hooks/useConvertNumbers.ts

@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+
+const toPersianDigits = (text: string): string => {
+  return text.replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[parseInt(d, 10)]);
+};
+
+const convertNumbersInDOM = (node: Node): void => {
+  if (node.nodeType === Node.TEXT_NODE) {
+    node.nodeValue = toPersianDigits(node.nodeValue || "");
+  } else if (node.nodeType === Node.ELEMENT_NODE) {
+    // Skip conversion if element has 'en' class
+    if ((node as Element).classList?.contains("en")) {
+      return;
+    }
+    node.childNodes.forEach(convertNumbersInDOM);
+  }
+};
+
+const useConvertNumbers = (): void => {
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "childList") {
+          mutation.addedNodes.forEach(convertNumbersInDOM);
+        }
+      });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    // اجرای اولیه روی کل صفحه
+    convertNumbersInDOM(document.body);
+
+    return () => observer.disconnect();
+  }, []);
+};
+
+export default useConvertNumbers;

src/langs/fa.json

@@ -17,7 +17,10 @@
     "add_space": "اضافه کردن فضا"
   },
   "space": {
-    "title": "خرید فضای ذخیره سازی"
+    "title": "خرید فضای ذخیره سازی",
+    "select_space": "لطفا یک فضا انتخاب کنید",
+    "enter_space": "فضای دلخواه‌",
+    "price": "قیمت :"
   },
   "header": {
     "search": "جستجو"

src/pages/home/Home.tsx

@@ -42,7 +42,7 @@ const Home: FC = () => {
                                     onClick={() => handleChangeWorkspace(item.id)}
                                 >
                                     <div className='mt-5'>
-                                        {item.businessName}
+                                        {item.businessName + ' ( ' + item.slug + ' )'}
                                     </div>
 
                                     <div className='mt-5'>
@@ -58,15 +58,6 @@ const Home: FC = () => {
 
                                     </div>
 
-                                    <div className='mt-5 flex justify-end w-full'>
-
-                                        <a onClick={(e) => {
-                                            e.stopPropagation()
-                                        }} target='_blank' href={`${import.meta.env.VITE_DZONE_URL}/${item.slug}`}>
-                                            {`${import.meta.env.VITE_DZONE_URL}/${item.slug}`}
-                                        </a>
-                                    </div>
-
 
                                 </div>
                             )

src/shared/components/BuySpace.tsx

@@ -2,6 +2,8 @@ import DefaulModal from '@/components/DefaulModal'
 import { useSharedStore } from '@/shared/store/sharedStore'
 import { useTranslation } from 'react-i18next'
 import { FC } from 'react'
+import { clx } from '@/helpers/utils'
+import Input from '@/components/Input'
 
 const BuySpace: FC = () => {
 
@@ -16,8 +18,30 @@ const BuySpace: FC = () => {
             isHeader={true}
             title_header={t('space.title')}
         >
-            <div className='mt-5'>
+            <div>
+                <div className='mt-8 text-sm'>
+                    {t('space.select_space')}
+                </div>
+                <div className='mt-4 flex gap-4 flex-wrap'>
+                    <div className={clx(
+                        'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
+                        // amountSelected === amount && 'border-black'
+                    )}>
+                        {'1000000'.toLocaleString()} تومان
+                    </div>
+                </div>
 
+                <div className='mt-8'>
+                    <Input
+                        label={t('space.enter_space')}
+                        className='bg-white/50'
+                    />
+                </div>
+
+                <div className='mt-6 flex gap-1'>
+                    <div className='text-xs'>{t('space.price')}</div>
+                    <div className='font-bold text-xs'>{'1000000'.toLocaleString()} تومان</div>
+                </div>
             </div>
         </DefaulModal >
     )