receip + active or in active service + ...

src/pages/service/MyServices.tsx

@@ -11,6 +11,7 @@ import { useGetAds } from '../ads/hooks/useAdsData'
 import { AdsDisplayLocation } from '../ads/types/AdsTypes'
 import { Helmet } from 'react-helmet-async'
 import ServiceItemSkeleton from './components/ServiceItemSkeleton'
+import { clx } from '../../helpers/utils'
 
 const MyServices: FC = () => {
 
@@ -60,7 +61,10 @@ const MyServices: FC = () => {
                             :
                             getServices.data?.data?.subscriptions?.map((item: MyServicesItem) => {
                                 return (
-                                    <Link key={item.id} to={Pages.services.detail + item.id} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
+                                    <Link key={item.id} to={item.status === 'ACTIVE' ? Pages.services.detail + item.id : ''} className={clx(
+                                        'flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6',
+                                        item.status === 'INACTIVE' && 'opacity-50'
+                                    )}>
                                         <ServiceSection
                                             item={{
                                                 author: item.plan.service.author,
@@ -77,14 +81,21 @@ const MyServices: FC = () => {
                                                 serviceLanguage: item.plan.service.serviceLanguage,
                                                 softwareLanguage: item.plan.service.softwareLanguage,
                                                 updatedAt: item.plan.service.updatedAt,
-                                                userCount: item.plan.service?.userCount
+                                                userCount: item.plan.service?.userCount,
                                             }}
                                         />
                                         <div className='mt-6 flex gap-1 items-center'>
                                             <StatusCircle
-                                                color='#00BA4B'
+                                                color={item.status === 'ACTIVE' ? '#00BA4B' : '#FF0000'}
                                             />
-                                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                                            <div className='text-xs text-description'>
+                                                {
+                                                    item.status === 'ACTIVE' ?
+                                                        t('active')
+                                                        :
+                                                        t('inactive')
+                                                }
+                                            </div>
                                         </div>
 
                                     </Link>

src/pages/service/types/ServiecTypes.ts

@@ -85,6 +85,7 @@ export type MyServicesItem = {
     createdAt: string;
     duration: number;
     isActive: boolean;
+    status: "ACTIVE" | "INACTIVE";
     name: string;
     price: number;
     service: {