ads and invoce

src/pages/service/MyServices.tsx

@@ -3,17 +3,19 @@ import { useTranslation } from 'react-i18next'
 import Input from '../../components/Input'
 import ServiceSection from '../../components/ServiceSection'
 import StatusCircle from '../../components/StatusCircle'
-import BannerImage from '../../assets/images/banner.png'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { useGetMyServices } from './hooks/useServiceData'
 import { MyServicesItem } from './types/ServiecTypes'
+import { useGetAds } from '../ads/hooks/useAdsData'
+import { AdsDisplayLocation } from '../ads/types/AdsTypes'
 
 const MyServices: FC = () => {
 
     const { t } = useTranslation('global')
     const [search, setSearch] = useState<string>('')
     const getServices = useGetMyServices(search)
+    const getAdsLeft = useGetAds(AdsDisplayLocation.MY_SERVICES_PAGE)
 
     return (
         <div className='w-full flex gap-6 mt-4'>
@@ -84,18 +86,22 @@ const MyServices: FC = () => {
 
                 </div>
             </div>
-            <div className='bg-white w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
-                <img
-                    src={BannerImage}
-                    className='w-full backdrop-blur-[100px] h-[550px] object-cover'
-                />
 
-                <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
-                    <div className='max-w-[80%] text-sm leading-6 text-white'>
-                        سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
+            {
+                getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
+                <a href={getAdsLeft.data?.data?.ads[0].link} target='_blank' className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
+                    <img
+                        src={getAdsLeft.data.data.ads[0].imageUrl}
+                        className='w-full backdrop-blur-[100px] h-[550px] object-cover'
+                    />
+
+                    <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
+                        <div className='max-w-[80%] text-sm leading-6 text-white'>
+                            {getAdsLeft.data.data.ads[0].title}
+                        </div>
                     </div>
-                </div>
-            </div>
+                </a>
+            }
         </div>
     )
 }