service item disabled and other...

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-e7681877'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.kim5d4lsg4"
+    "revision": "0.c4ipjkbi9g8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/ServiceItem.tsx

@@ -10,7 +10,8 @@ type Props = {
     item: ItemServiceType,
     className?: string,
     isLinkPanel?: boolean,
-    businessName?: string
+    businessName?: string,
+    isDisabled?: boolean
 }
 
 const ServiceItem: FC<Props> = (props: Props) => {
@@ -19,7 +20,7 @@ const ServiceItem: FC<Props> = (props: Props) => {
     const { item } = props
 
     return (
-        <div className={`flex-1 flex flex-col self-stretch min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4 ${props.className}`}>
+        <div className={`flex-1 flex flex-col self-stretch min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4 ${props.className} ${props.isDisabled ? 'opacity-50' : ''}`}>
             <div className='flex gap-2 items-center'>
                 <div className='xl:size-[50px] size-10 overflow-hidden rounded-xl'>
                     <img src={item.icon} alt={item.name} className='w-full h-full' />
@@ -41,7 +42,7 @@ const ServiceItem: FC<Props> = (props: Props) => {
             </div>
 
             <div className='mt-4 flex-1 flex items-end'>
-                <Link target={props.isLinkPanel ? '_blank' : ''} to={props.isLinkPanel ? item.link : Pages.services.detail + item.id}>
+                <Link target={props.isLinkPanel && !props.isDisabled ? '_blank' : ''} to={props.isDisabled ? '#' : props.isLinkPanel ? item.link : Pages.services.detail + item.id}>
                     <Button
                         className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                     >

src/pages/home/Home.tsx

@@ -44,9 +44,7 @@ const Home: FC = () => {
                                             <div key={item.id} className='relative drtl'>
                                                 <img src={item.imageUrl} className='w-full rounded-xl min-h-[190px] max-h-[300px] h-full object-cover' />
                                                 <div className='absolute bg-black bg-opacity-20 size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
-                                                    <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
-
-                                                    </button>
+                                                    <div></div>
 
                                                     <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
                                                         <div className='xl:text-lg text-sm'>

src/pages/service/MyServices.tsx

@@ -62,6 +62,7 @@ const MyServices: FC = () => {
                                         item={item.plan.service}
                                         isLinkPanel
                                         businessName={item.businessName}
+                                        isDisabled={item.status === 'INACTIVE'}
                                     />
                                 )
                             })

src/pages/service/OtherServices.tsx

@@ -40,9 +40,7 @@ const OtherServices: FC = () => {
                                             <div key={item.id} className='relative drtl'>
                                                 <img src={item.imageUrl} className='w-full rounded-xl min-h-[190px] max-h-[300px] h-full object-cover' />
                                                 <div className='absolute bg-black bg-opacity-20 size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
-                                                    <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
-
-                                                    </button>
+                                                    <div></div>
 
                                                     <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
                                                         <div className='xl:text-lg text-sm'>