empty page

src/App.tsx

@@ -61,7 +61,6 @@ const queryClient = new QueryClient({
           try {
             const refreshTokenValue = await getRefreshToken();
             const { data } = await refreshToken({ refreshToken: refreshTokenValue || '' });
-            console.log('data', data);
 
             if (data?.accessToken?.token) {
               // Save the new token

src/langs/fa.json

@@ -463,5 +463,11 @@
     "status": "وضعیت",
     "active": "فعال",
     "deactive": "غیرفعال"
+  },
+  "empty": {
+    "empty_my_service": "سرویسی یافت نشد.",
+    "add_service": "افزودن سرویس",
+    "empty_discount": "تخفیفی یافت نشد.",
+    "my_services": "سرویس های من"
   }
 }

src/pages/discounts/List.tsx

@@ -5,6 +5,7 @@ import Td from '../../components/Td'
 import { useTranslation } from 'react-i18next'
 import { DiscountItemType } from './types/DiscountTypes'
 import moment from 'moment-jalaali'
+import EmptyDiscount from './components/EmptyDiscount'
 
 const MyDiscountList: FC = () => {
 
@@ -17,42 +18,46 @@ const MyDiscountList: FC = () => {
                 getDiscounts.isPending ?
                     <PageLoading />
                     :
-                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                    getDiscounts.data?.data?.discounts?.length > 0 ?
-                        <table className='w-full text-sm '>
+                        <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
-                            <thead className='thead'>
+                            <table className='w-full text-sm '>
-                                <tr>
+                                <thead className='thead'>
-                                    <Td text={t('discount.number')} />
+                                    <tr>
-                                    <Td text={t('discount.type')} />
+                                        <Td text={t('discount.number')} />
-                                    <Td text={t('discount.code')} />
+                                        <Td text={t('discount.type')} />
-                                    <Td text={t('discount.start_date')} />
+                                        <Td text={t('discount.code')} />
-                                    <Td text={t('discount.end_date')} />
+                                        <Td text={t('discount.start_date')} />
-                                    <Td text={t('discount.percent_ammount')} />
+                                        <Td text={t('discount.end_date')} />
-                                    <Td text={t('discount.service')} />
+                                        <Td text={t('discount.percent_ammount')} />
-                                    <Td text={t('discount.status')} />
+                                        <Td text={t('discount.service')} />
-                                </tr>
+                                        <Td text={t('discount.status')} />
-                            </thead>
+                                    </tr>
-                            <tbody>
+                                </thead>
-                                {
+                                <tbody>
-                                    getDiscounts.data?.data?.discounts?.map((item: DiscountItemType, index: number) => {
+                                    {
-                                        return (
+
-                                            <tr key={item.id} className='tr'>
+                                        getDiscounts.data?.data?.discounts?.map((item: DiscountItemType, index: number) => {
-                                                <Td text={String(index + 1)} />
+                                            return (
-                                                <Td text={t(`discount.${item.type}`)} />
+                                                <tr key={item.id} className='tr'>
-                                                <Td text={item.code} />
+                                                    <Td text={String(index + 1)} />
-                                                <Td text={moment(item.startDate).format('jYYYY-jMM-jDD')} />
+                                                    <Td text={t(`discount.${item.type}`)} />
-                                                <Td text={moment(item.endDate).format('jYYYY-jMM-jDD')} />
+                                                    <Td text={item.code} />
-                                                <Td text={item.type === 'CODE' ? item.amount + '%' : item.amount + 'تومان'} />
+                                                    <Td text={moment(item.startDate).format('jYYYY-jMM-jDD')} />
-                                                <Td text={item.subscriptionPlans[0]?.service?.name} />
+                                                    <Td text={moment(item.endDate).format('jYYYY-jMM-jDD')} />
-                                                <Td text={''}>
+                                                    <Td text={item.type === 'CODE' ? item.amount + '%' : item.amount + 'تومان'} />
-                                                    {item.isActive ? <span className='text-green-400'>{t('discount.active')}</span> : <span className='text-gray-500'>{t('discount.inactive')}</span>}
+                                                    <Td text={item.subscriptionPlans[0]?.service?.name} />
-                                                </Td>
+                                                    <Td text={''}>
-                                            </tr>
+                                                        {item.isActive ? <span className='text-green-400'>{t('discount.active')}</span> : <span className='text-gray-500'>{t('discount.inactive')}</span>}
-                                        )
+                                                    </Td>
-                                    })
+                                                </tr>
-                                }
+                                            )
-                            </tbody>
+                                        })
-                        </table>
+                                    }
-                    </div>
+                                </tbody>
+                            </table>
+                        </div>
+                        :
+                        <EmptyDiscount />
             }
         </div>
     )

src/pages/discounts/components/EmptyDiscount.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react'
+import empty from '../../../assets/images/discount_empty_icon.png'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../components/Button'
+import { Add } from 'iconsax-react'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../../config/Pages'
+
+const EmptyDiscount: FC = () => {
+    const { t } = useTranslation('global')
+    return (
+        <div className='bg-white xl:p-8 p-4 rounded-3xl w-full'>
+            <div className='flex flex-col items-center justify-center'>
+                <img src={empty} alt='empty' className='w-[85px]' />
+                <div className='mt-6 text-xs'>
+                    {t('empty.empty_discount')}
+                </div>
+                <Link to={Pages.services.mine} className='mt-6'>
+                    <Button
+                        className='w-full px-4'
+                    >
+                        <div className='flex items-center gap-2'>
+                            <Add size={20} color='white' />
+                            {t('empty.my_services')}
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default EmptyDiscount

src/pages/service/MyServices.tsx

@@ -8,6 +8,7 @@ import { AdsDisplayLocation } from '../ads/types/AdsTypes'
 import { Helmet } from 'react-helmet-async'
 import ServiceItemSkeleton from './components/ServiceItemSkeleton'
 import ServiceItem from '../../components/ServiceItem'
+import EmptyMyService from './components/EmptyMyService'
 
 const MyServices: FC = () => {
 
@@ -55,17 +56,20 @@ const MyServices: FC = () => {
                         getServices.isPending ?
                             Array.from({ length: 4 }).map((_, index) => <ServiceItemSkeleton key={index} />)
                             :
-                            getServices.data?.data?.subscriptions?.map((item: MyServicesItem) => {
+                            getServices.data?.data?.subscriptions?.length > 0 ?
-                                return (
+                                getServices.data?.data?.subscriptions?.map((item: MyServicesItem) => {
-                                    <ServiceItem
+                                    return (
-                                        key={item.id}
+                                        <ServiceItem
-                                        item={item.plan.service}
+                                            key={item.id}
-                                        isLinkPanel
+                                            item={item.plan.service}
-                                        businessName={item.businessName}
+                                            isLinkPanel
-                                        isDisabled={item.status === 'INACTIVE'}
+                                            businessName={item.businessName}
-                                    />
+                                            isDisabled={item.status === 'INACTIVE'}
-                                )
+                                        />
-                            })
+                                    )
+                                })
+                                :
+                                <EmptyMyService />
                     }
                     <div className='flex-1 min-w-[40%] xl:min-w-[20%] px-6'></div>
                     <div className='flex-1 min-w-[40%] xl:min-w-[20%] px-6'></div>

src/pages/service/components/EmptyMyService.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react'
+import empty from '../../../assets/images/myservices_empty_icon.png'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../components/Button'
+import { Add } from 'iconsax-react'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../../config/Pages'
+
+const EmptyMyService: FC = () => {
+    const { t } = useTranslation('global')
+    return (
+        <div className='bg-white xl:p-8 p-4 rounded-3xl w-full'>
+            <div className='flex flex-col items-center justify-center'>
+                <img src={empty} alt='empty' className='w-[85px]' />
+                <div className='mt-6 text-xs'>
+                    {t('empty.empty_my_service')}
+                </div>
+                <Link to={Pages.services.other} className='mt-6'>
+                    <Button
+                        className='w-full px-4'
+                    >
+                        <div className='flex items-center gap-2'>
+                            <Add size={20} color='white' />
+                            {t('empty.add_service')}
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default EmptyMyService