feat(in-717): ads fixes

src/components/Ads/components/AdComponent/hooks.tsx

@@ -27,8 +27,10 @@ import {
 const countryCode = getLocalStorageItem(COUNTRY)
 
 export const useAd = ({ ad }: AdComponentType) => {
-  const [isOpenAd, setIsOpenAd] = useState(true)
+  const isMatch = isMatchPage()
-  const [isNeedToShow, setIsNeedToShow] = useState(true)
+
+  const [isOpenAd, setIsOpenAd] = useState(isMatch)
+  const [isNeedToShow, setIsNeedToShow] = useState(isMatch)
   const [shownTime, setShownTime] = useState(0)
 
   const { isFullscreen } = useMatchPageStore()
@@ -72,7 +74,7 @@ export const useAd = ({ ad }: AdComponentType) => {
 
   const handleClose = () => {
     setIsOpenAd(false)
-    isMatchPage() && setIsNeedToShow(false)
+    isMatch && setIsNeedToShow(false)
     sendBannerClickEvent(EventGA.CLOSE)
   }
 
@@ -89,7 +91,7 @@ export const useAd = ({ ad }: AdComponentType) => {
   useEffect(() => {
     setShownTime(0)
 
-    if (isMatchPage()) {
+    if (isMatch) {
       const interval = setInterval(() => {
         setIsNeedToShow(true)
         setIsOpenAd(true)
@@ -105,6 +107,7 @@ export const useAd = ({ ad }: AdComponentType) => {
     isNeedToShow,
     views?.HOME,
     isNeedBanner,
+    isMatch,
   ])
 
   useEffect(() => {
@@ -136,14 +139,18 @@ export const useAd = ({ ad }: AdComponentType) => {
   ])
 
   useEffect(() => {
-    if (!isNeedToShow || (!isMatchPage() && !isNeedBanner)) return
+    if (!isNeedToShow || (!isMatch && !isNeedBanner)) return
 
     (async () => {
       await updateAdsView({ adv_id: id })
     })()
     sendBannerClickEvent(EventGA.DISPLAY)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, isNeedToShow])
+  }, [
+    id,
+    isNeedToShow,
+    isMatch,
+  ])
 
   return {
     handleClose,

src/components/Ads/components/MobileAd/styled.tsx

@@ -9,6 +9,7 @@ import {
   PLAYER_MOBILE_FULL_SCREEN,
   PLAYER_MOBILE_ADS,
   MATCH_PAGE_MOBILE_ADS,
+  VIEW_ADS,
 } from '../../types'
 
 type Props = {
@@ -40,6 +41,9 @@ const chooseStyle = (type: number) => {
         padding: 5px; 
         background-color: rgba(0, 0, 0, 0.7);
       `
+    case VIEW_ADS.MOBILE_IN_COLLAPSE_FOOTER:
+    case VIEW_ADS.MOBILE_IN_COLLAPSE_HEADER:
+      return 'margin-top: 6px'
     default:
       return ''
   }

src/features/HeaderFilters/components/DateFilter/hooks/index.tsx

@@ -74,6 +74,13 @@ export const useDateFilter = () => {
     validator,
   })
 
+  const addAdsViews = () => {
+    setAdsViews({
+      ...adsViews,
+      HOME: (adsViews.HOME ?? 0) + 1,
+    })
+  }
+
   useEffect(() => {
     if (lastDate === selectedDate.getDate()
         && parseFilters
@@ -85,20 +92,18 @@ export const useDateFilter = () => {
       setIsShowTournament(true)
       setSelectedFilters([])
       setSelectedLeague(['all_competitions'])
-      setAdsViews({
-        ...adsViews,
-        HOME: (adsViews.HOME ?? 0) + 1,
-      })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDate])
 
   const onPreviousClick = () => {
+    addAdsViews()
     const numberAddDays = weekName === 'Mon' ? -1 : -7
     setSelectedDate(addDays(selectedDate, numberAddDays))
   }
 
   const onNextClick = () => {
+    addAdsViews()
     const numberAddDays = weekName === 'Sun' ? 1 : 7
     setSelectedDate(addDays(selectedDate, numberAddDays))
   }
@@ -108,6 +113,7 @@ export const useDateFilter = () => {
 
   const onDateChange = (newDate: Date | null) => {
     if (newDate) {
+      addAdsViews()
       setSelectedDate(newDate)
       close()
     }
@@ -119,6 +125,7 @@ export const useDateFilter = () => {
   }
 
   return {
+    addAdsViews,
     close,
     date,
     isMonthMode,

src/features/HeaderFilters/components/DateFilter/index.tsx

@@ -26,6 +26,7 @@ import { useHeaderFiltersStore } from '../../store'
 
 export const DateFilter = () => {
   const {
+    addAdsViews,
     close,
     date,
     isOpen,
@@ -72,6 +73,7 @@ export const DateFilter = () => {
                 selected={day.date.getDate() === selectedDate.getDate()}
                 onClick={() => {
                   if (day.date.getDate() !== selectedDate.getDate()) {
+                    addAdsViews()
                     onWeekDayClick(day.date)
                   } else {
                     resetFilters()

src/features/HeaderFilters/components/FacrDateFilter/index.tsx

@@ -38,6 +38,7 @@ import {
 
 export const FacrDateFilter = () => {
   const {
+    addAdsViews,
     close,
     date,
     isMonthMode,
@@ -151,6 +152,7 @@ export const FacrDateFilter = () => {
                     selected={day.date.getDate() === selectedDate.getDate()}
                     onClick={() => {
                       if (day.date.getDate() !== selectedDate.getDate()) {
+                        addAdsViews()
                         onWeekDayClick(day.date)
                       } else {
                         resetFilters()