diff --git a/src/components/Ads/components/AdComponent/hooks.tsx b/src/components/Ads/components/AdComponent/hooks.tsx index 9a35bc5f..75781f3f 100644 --- a/src/components/Ads/components/AdComponent/hooks.tsx +++ b/src/components/Ads/components/AdComponent/hooks.tsx @@ -24,7 +24,7 @@ import { const countryCode = getLocalStorageItem(COUNTRY) -export const useAd = ({ ad }: AdComponentType) => { +export const useAd = ({ ad, close: hideElement }: AdComponentType) => { const [isOpenAd, setIsOpenAd] = useState(true) const views = getLocalStorageItem(adsViews) as ViewsType const { diff --git a/src/components/Ads/components/AdComponent/index.tsx b/src/components/Ads/components/AdComponent/index.tsx index 72b3f4e1..fc9ab980 100644 --- a/src/components/Ads/components/AdComponent/index.tsx +++ b/src/components/Ads/components/AdComponent/index.tsx @@ -14,8 +14,9 @@ import { CloseButton } from '../../../../features/PopupComponents' export type AdComponentType = { ad: AdType, + close?: () => void, } -export const AdComponent = memo(({ ad }: AdComponentType) => { +export const AdComponent = memo(({ ad, close }: AdComponentType) => { const { link, media, @@ -29,7 +30,7 @@ export const AdComponent = memo(({ ad }: AdComponentType) => { isOpenCloseBtn, isVideo, sendBannerClickEvent, - } = useAd({ ad }) + } = useAd({ ad, close }) return ( position && isOpenAd && isNeedToShow diff --git a/src/components/Ads/components/MobileAd/index.tsx b/src/components/Ads/components/MobileAd/index.tsx index bc117bbe..af4b35f7 100644 --- a/src/components/Ads/components/MobileAd/index.tsx +++ b/src/components/Ads/components/MobileAd/index.tsx @@ -1,25 +1,25 @@ import { MouseEvent } from 'react' import type { AdType } from 'requests' - import { CloseButton } from 'features/PopupComponents' import { Img, MobileAdWrapper, Video, } from './styled' - import { useAd } from '../AdComponent/hooks' import { EventGA } from '../../types' type MobileAdTypes = { ad: AdType, className?: string, + close?: () => void, } export const MobileAd = ({ ad, className, + close, }: MobileAdTypes) => { const { link, @@ -34,7 +34,7 @@ export const MobileAd = ({ isOpenCloseBtn, isVideo, sendBannerClickEvent, - } = useAd({ ad }) + } = useAd({ ad, close }) return ( position && isOpenAd && isNeedToShow ? ( diff --git a/src/components/Ads/hooks.tsx b/src/components/Ads/hooks.tsx index f39ddc53..1caef83d 100644 --- a/src/components/Ads/hooks.tsx +++ b/src/components/Ads/hooks.tsx @@ -8,14 +8,12 @@ import { getAds } from 'requests' import { useLang } from 'features/LexicsStore/hooks/useLang' import { useMemo } from 'react' - -import { useAuthStore } from 'features/AuthStore' - import { DeviceType, PageType, } from './types' import { calcMaxAdDurationAds } from './helpers/calcMaxDurationAds' +import { useAuthStore } from '../../features/AuthStore' import { adsStore } from '../../pages/HighlightsPage/storeHighlightsAtoms' export const useAds = () => { diff --git a/src/components/Ads/index.tsx b/src/components/Ads/index.tsx index 4309af81..d802994f 100644 --- a/src/components/Ads/index.tsx +++ b/src/components/Ads/index.tsx @@ -1,7 +1,5 @@ import type { AdType } from 'requests' -import { isMobileDevice } from 'config' - import { HeaderWrapAd, } from './styled' @@ -9,6 +7,7 @@ import { import { AdComponent } from './components/AdComponent' import { AdsPropsType } from './types' import { MobileAd } from './components/MobileAd' +import { isMobileDevice } from '../../config' export const HeaderAds = ({ ads }: AdsPropsType) => ( ads?.length ? ( diff --git a/src/components/Ads/styled.tsx b/src/components/Ads/styled.tsx index 5f36a29c..1aa7e95d 100644 --- a/src/components/Ads/styled.tsx +++ b/src/components/Ads/styled.tsx @@ -1,6 +1,5 @@ import styled, { css } from 'styled-components' - -import { isMobileDevice } from 'config' +import { isMobileDevice } from '../../config' export const HeaderWrapAd = styled.div<{column: number}>` width: 100%; diff --git a/src/components/Ads/types.tsx b/src/components/Ads/types.tsx index 0ccf89dc..3b16312e 100644 --- a/src/components/Ads/types.tsx +++ b/src/components/Ads/types.tsx @@ -1,4 +1,4 @@ -import { AdsListType } from 'requests' +import { AdsListType } from '../../requests' export enum PageType { HOME = 1, @@ -23,6 +23,9 @@ export enum VIEW_ADS { SQUARE = 6, SECOND_COLUMN = 2, SECOND_ROW= 3, + HEADER_1 = 7, + HEADER_2 = 8, + HEADER_LONG = 9, MOBILE_IN_COLLAPSE_HEADER = 12, MOBILE_IN_COLLAPSE_FOOTER = 25 } diff --git a/src/features/TournamentList/components/TournamentMobile/index.tsx b/src/features/TournamentList/components/TournamentMobile/index.tsx index cdf28ea6..7b6d3be6 100644 --- a/src/features/TournamentList/components/TournamentMobile/index.tsx +++ b/src/features/TournamentList/components/TournamentMobile/index.tsx @@ -1,7 +1,5 @@ import { Fragment, useState } from 'react' -import { useRecoilValue } from 'recoil' - import { isLffClient } from 'config/clients' import { isMobileDevice, @@ -20,10 +18,7 @@ import { } from 'features/MatchCard/CardFrontside/MatchCardMobile/styled' import { AdType } from 'requests' - -import { VIEW_ADS } from 'components/Ads/types' -import { MobileAd } from 'components/Ads/components/MobileAd' -import { adsStore } from 'pages/HighlightsPage/storeHighlightsAtoms' +import { useRecoilValue } from 'recoil' import { CardWrapperOuter, CardWrapper, @@ -35,6 +30,9 @@ import { } from './styled' import { TournamentProps } from '../..' +import { VIEW_ADS } from '../../../../components/Ads/types' +import { MobileAd } from '../../../../components/Ads/components/MobileAd' +import { adsStore } from '../../../../pages/HighlightsPage/storeHighlightsAtoms' export const TournamentMobile = ({ tournament,