add ads to main page

features(#564): add ads to main page

package.json

@@ -38,6 +38,7 @@
     "react": "^17.0.2",
     "react-datepicker": "^3.1.3",
     "react-dom": "^17.0.2",
+    "react-ga": "^3.3.1",
     "react-query": "^3.39.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

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

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react'
+
+import ReactGA from 'react-ga'
+
+import { updateAdsView } from 'requests'
+
+import { useToggle } from 'hooks'
+
+import { getLocalStorageItem } from 'helpers'
+
+import {
+  device,
+  COUNTRY,
+} from 'config'
+
+import type { AdComponentType } from './index'
+
+import { checkVideo } from '../../helpers'
+import {
+  adsViews,
+  EventGA,
+  ViewsType,
+} from '../../types'
+
+const countryCode = getLocalStorageItem(COUNTRY)
+
+export const useAd = ({ ad, close: hideElement }: AdComponentType) => {
+  const [isOpenAd, setIsOpenAd] = useState(true)
+  const views = getLocalStorageItem(adsViews) as ViewsType
+  const {
+    duration,
+    frequency,
+    id,
+    media,
+    name,
+    time_close,
+  } = ad
+
+  const isVideo = checkVideo(media.url)
+
+  const {
+    isOpen: isOpenCloseBtn,
+    open: showCloseBtn,
+  } = useToggle()
+
+  const handleClose = async () => {
+    setIsOpenAd(false)
+    await updateAdsView({ adv_id: id })
+    sendBannerClickEvent(EventGA.CLOSE)
+  }
+
+  const sendBannerClickEvent = (event: EventGA) => {
+    ReactGA.event({
+      action: event,
+      category: 'Advertisement',
+      label: `${name}_${countryCode ?? ''}_${device}`,
+      value: id,
+    })
+  }
+
+  const isNeedToShow = Number(views?.HOME) % frequency === 0
+
+  useEffect(() => {
+    !isNeedToShow && setIsOpenAd(false)
+
+    const timeoutCloseAd = setTimeout(handleClose, duration * 1000)
+    const timeoutCloseBtn = time_close && setTimeout(showCloseBtn, time_close * 1000)
+
+    return () => {
+      time_close && clearTimeout(timeoutCloseBtn)
+      clearTimeout(timeoutCloseAd)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return {
+    handleClose,
+    isNeedToShow,
+    isOpenAd,
+    isOpenCloseBtn,
+    isVideo,
+    sendBannerClickEvent,
+  }
+}

src/components/Ads/components/AdComponent/index.tsx

@@ -0,0 +1,78 @@
+import { memo, MouseEvent } from 'react'
+
+import type { AdType } from 'requests'
+
+import {
+  AdImg,
+  AdVideo,
+  AdWrapper,
+} from './styled'
+import { useAd } from './hooks'
+
+import { EventGA } from '../../types'
+import { CloseButton } from '../../../../features/PopupComponents'
+
+export type AdComponentType = {
+  ad: AdType,
+  close?: () => void,
+}
+export const AdComponent = memo(({ ad, close }: AdComponentType) => {
+  const {
+    link,
+    media,
+    position,
+  } = ad
+
+  const {
+    handleClose,
+    isNeedToShow,
+    isOpenAd,
+    isOpenCloseBtn,
+    isVideo,
+    sendBannerClickEvent,
+  } = useAd({ ad, close })
+
+  return (
+    position && isOpenAd && isNeedToShow
+      ? (
+        <AdWrapper
+          position={position.id}
+          isOpenAd={isOpenAd}
+        >
+          {isOpenCloseBtn && (
+            <CloseButton
+              onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                e.stopPropagation()
+                handleClose()
+              }}
+              size={12}
+              className='closeBtn'
+            />
+          )}
+          <a
+            href={link}
+            target='_blank'
+            rel='noreferrer'
+            onClick={() => link && sendBannerClickEvent(EventGA.CLICK)}
+          >
+            {isVideo
+              ? (
+                <AdVideo
+                  muted={isVideo}
+                  autoPlay={isVideo}
+                  loop={isVideo}
+                  src={media.url}
+                  position={position.id}
+                />
+              )
+              : (
+                <AdImg
+                  src={media.url}
+                  position={position.id}
+                />
+              )}
+          </a>
+        </AdWrapper>
+      ) : null
+  )
+})

src/components/Ads/components/AdComponent/styled.tsx

@@ -0,0 +1,63 @@
+import styled from 'styled-components'
+import { VIEW_ADS } from '../../types'
+
+type Props = {
+  position: number,
+}
+
+const chooseStyle = (type: number) => {
+  switch (true) {
+    case VIEW_ADS[type] === 'COLUMN':
+      return 'grid-row: 1 / 3; img {max-height: none;}'
+    case VIEW_ADS[type] === 'ROW':
+      return 'grid-column: 1 / 3'
+    case VIEW_ADS[type] === 'SQUARE':
+      return 'grid-row: 1 / 3; grid-column: 1 / 3; img {max-height: none;}'
+    case VIEW_ADS[type] === 'SECOND_COLUMN':
+      return 'grid-column: 2 / 3; grid-row: 1 / 1'
+    case VIEW_ADS[type] === 'SECOND_ROW':
+      return 'grid-column: 1 / 2; grid-row: 2 / 3;'
+    default:
+      return ''
+  }
+}
+
+const header = [7, 8, 9]
+
+export const AdImg = styled.img<Props>`
+  object-fit: cover;
+  width: 100%;
+  min-height: ${({ position }) => (!header.includes(position) && '100%')};
+  max-height: ${({ position }) => (header.includes(position) ? '13rem' : '100%')};
+  cursor: pointer;
+  border-radius: 3px;
+`
+
+export const AdVideo = styled.video<Props>`
+  object-fit: contain;
+  width: 100%;
+  cursor: pointer;
+  max-height: ${({ position }) => (header.includes(position) ? '283px' : '100%')};
+  background-color: black;
+  border-radius: 3px;
+`
+
+export const AdWrapper = styled.div<Props & {isOpenAd: boolean}>`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  
+  ${({ position }) => chooseStyle(position)};
+  
+  display: ${({ isOpenAd }) => (isOpenAd ? '' : 'none')};
+
+  .closeBtn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: none;
+    border-radius: 0;
+    z-index: 2;
+    cursor: pointer;
+  }
+`

src/components/Ads/components/MobileAd/index.tsx

@@ -0,0 +1,69 @@
+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,
+    media,
+    position,
+  } = ad
+
+  const {
+    handleClose,
+    isNeedToShow,
+    isOpenAd,
+    isOpenCloseBtn,
+    isVideo,
+    sendBannerClickEvent,
+  } = useAd({ ad, close })
+
+  return (
+    position && isOpenAd && isNeedToShow ? (
+      <MobileAdWrapper
+        className={className}
+        onClick={() => {
+          if (link) {
+            sendBannerClickEvent(EventGA.CLICK)
+            window.open(link, '_blank')
+          }
+        }}
+      >
+        {isOpenCloseBtn
+            && (
+              <CloseButton
+                onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                  e.stopPropagation()
+                  handleClose()
+                }}
+                size={8}
+                className='mobileCloseBtn'
+              />
+            )}
+        {isVideo
+          ? <Video position={position.id} src={media.url} />
+          : (
+            <Img position={position.id} src={media.url} />
+          )}
+      </MobileAdWrapper>
+    ) : null
+  )
+}

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

@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+type Props = {
+  position: number,
+}
+
+export const MobileAdWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  
+  .mobileCloseBtn{
+    position: absolute;
+    right: -10px;
+    background: none;
+    border-radius: 0;
+    color: rgba(0, 0, 0, 0.6);
+    top: 10px;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+  }
+`
+export const Img = styled.img<Props>`
+  object-fit: cover;
+  height: ${({ position }) => (position === 10 ? '50px' : '75px')};
+  border-radius: 2px;
+  width: 100%;
+`
+
+export const Video = styled.video<Props>`
+  max-height: 100%;
+  object-fit: cover;
+  min-width: 100%;
+  height: ${({ position }) => (position === 10 ? '50px' : '75px')};
+  border-radius: 2px;
+`

src/components/Ads/helpers/calcMaxDurationAds.tsx

@@ -0,0 +1,16 @@
+import { AdResponse, AdsListType } from 'requests'
+
+export const calcMaxAdDurationAds = (advertisements: AdResponse) => {
+  const allAds = Object.values(advertisements)
+
+  const combineAds = allAds.reduce((result, currentAd) => {
+    result.push(...currentAd)
+
+    return result
+  }, [] as AdsListType)
+
+  const maxDuration = combineAds
+    .reduce((result, { duration }) => Math.max(result, duration), 0)
+
+  return maxDuration
+}

src/components/Ads/helpers/index.tsx

@@ -0,0 +1 @@
+export * from './isVideo'

src/components/Ads/helpers/isVideo.tsx

@@ -0,0 +1,2 @@
+const regexp = /^https?:\/\/\S+(?:mp4)$/
+export const checkVideo = (url: string) => regexp.test(url)

src/components/Ads/hooks.tsx

@@ -0,0 +1,44 @@
+import { useQuery } from 'react-query'
+import { useRecoilState } from 'recoil'
+
+import { isMobileDevice, querieKeys } from 'config'
+
+import { getAds } from 'requests'
+
+import { useLang } from 'features/LexicsStore/hooks/useLang'
+
+import { useMemo } from 'react'
+import {
+  DeviceType,
+  PageType,
+} from './types'
+import { calcMaxAdDurationAds } from './helpers/calcMaxDurationAds'
+import { useAuthStore } from '../../features/AuthStore'
+import { adsStore } from '../../pages/HighlightsPage/storeHighlightsAtoms'
+
+export const useAds = () => {
+  const [ads, setAds] = useRecoilState(adsStore)
+  const { lang } = useLang()
+  const { user } = useAuthStore()
+
+  useQuery({
+    queryFn: async () => {
+      if (user) {
+        const adsList = await getAds({
+          client_type: isMobileDevice ? DeviceType.MOBILE : DeviceType.WEB,
+          language: lang,
+          type_id: PageType.HOME,
+        })
+        adsList && setAds(adsList)
+        return adsList
+      }
+      return {}
+    },
+    queryKey: querieKeys.ads,
+    staleTime: useMemo(() => Math.max(calcMaxAdDurationAds(ads), 60 * 1000), [ads]),
+  })
+
+  return {
+    ads,
+  }
+}

src/components/Ads/index.tsx

@@ -0,0 +1,30 @@
+import type { AdType } from 'requests'
+
+import {
+  HeaderWrapAd,
+} from './styled'
+
+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 ? (
+    <HeaderWrapAd column={ads?.length}>
+      {ads.map((ad: AdType) => (
+        !isMobileDevice ? (
+          <AdComponent
+            ad={ad}
+            key={ad.id}
+          />
+        ) : (
+          <MobileAd
+            ad={ad}
+            key={ad.id}
+          />
+        )
+      ))}
+    </HeaderWrapAd>
+  ) : null
+)

src/components/Ads/styled.tsx

@@ -0,0 +1,15 @@
+import styled, { css } from 'styled-components'
+import { isMobileDevice } from '../../config'
+
+export const HeaderWrapAd = styled.div<{column: number}>`
+  width: 100%;
+  margin-bottom: 0.7rem;
+  display: grid;
+  grid-column-gap: 0.9rem;
+  grid-template-columns: ${({ column }) => (column > 1 ? `repeat(${column},${16.3 * 6 / column}%)` : 'repeat(1, 98.7%)')};
+  
+  ${isMobileDevice && css`
+    padding: 0px 0.71rem;
+    grid-template-columns: none;
+  `}}
+`

src/components/Ads/types.tsx

@@ -0,0 +1,37 @@
+import { AdsListType } from '../../requests'
+
+export enum PageType {
+  HOME = 1,
+  MATCH = 2,
+}
+
+export enum DeviceType {
+  MOBILE = 'mobile',
+  WEB = 'web'
+}
+
+export type ViewsType = Partial<Record<keyof typeof PageType, number>>
+
+export enum EventGA {
+  CLICK = 'banner_click',
+  CLOSE = 'banner_close'
+}
+
+export enum VIEW_ADS {
+  ROW = 4,
+  COLUMN = 5,
+  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
+}
+
+export const HEADER_MOBILE_ADS = [10, 11]
+
+export type AdsPropsType = Record<'ads', AdsListType | undefined>
+
+export const adsViews = 'adsViews'

src/config/index.tsx

@@ -12,3 +12,4 @@ export * from './userAgent'
 export * from './queries'
 export * from './keyboardKeys'
 export * from './clients'
+export * from './localStorageKeys'

src/config/localStorageKeys.tsx

@@ -0,0 +1 @@
+export const COUNTRY = 'COUNTRY'

src/config/queries.tsx

@@ -1,4 +1,5 @@
 export const querieKeys = {
+  ads: 'ads',
   liveMatchScores: 'liveMatchScores',
   matchScore: 'matchScore',
   sportsList: 'sportsList',

src/config/routes.tsx

@@ -29,6 +29,12 @@ const STATS_APIS = {
   staging: 'https://statistic-stage.insports.tv',
 }
 
+const ADS_APIS = {
+  preproduction: 'https://ads.insports.tv/v1/ads',
+  production: 'https://ads.insports.tv/v1/ads',
+  staging: 'https://ads-test.insports.tv/v1/ads',
+}
+
 const env = isProduction ? ENV : readSelectedApi() ?? ENV
 
 export const VIEWS_API = VIEWS_APIS[env]
@@ -37,3 +43,4 @@ export const API_ROOT = APIS[env].api
 export const DATA_URL = `${API_ROOT}/data`
 export const URL_AWS = 'https://cf-aws.insports.tv'
 export const STATS_API_URL = STATS_APIS[env]
+export const ADS_API_URL = ADS_APIS[env]

src/config/userAgent.tsx

@@ -3,3 +3,5 @@ export const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
 export const isAndroid = /Android/.test(navigator.userAgent)
 
 export const isMobileDevice = /iPhone|Android/.test(navigator.userAgent)
+
+export const device = navigator.userAgent

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

@@ -6,16 +6,18 @@ import {
 
 import addDays from 'date-fns/addDays'
 
-import { useToggle } from 'hooks'
+import { useLocalStore, useToggle } from 'hooks'
 
 import { useLexicsStore } from 'features/LexicsStore'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 
+import isObject from 'lodash/isObject'
 import {
   getDisplayDate,
   getWeekName,
   getWeeks,
 } from '../helpers'
+import { ViewsType } from '../../../../../components/Ads/types'
 
 export const useDateFilter = () => {
   const {
@@ -46,6 +48,15 @@ export const useDateFilter = () => {
   const parseFilters = filters && JSON.parse(filters)
   const lastDate = parseFilters?.selectedDate
   const weekName = getWeekName(selectedDate, 'en')
+  const validator = (value: unknown) => Boolean(value) && isObject(value)
+
+  const [adsViews, setAdsViews] = useLocalStore<ViewsType>({
+    clearOnUnmount: true,
+    defaultValue: { HOME: 0 },
+    key: 'adsViews',
+    validator,
+  })
+
   useEffect(() => {
     if (lastDate === selectedDate.getDate()
         && parseFilters
@@ -57,6 +68,10 @@ 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])

src/features/HomePage/hooks.tsx

@@ -14,10 +14,19 @@ import { ClientNames } from 'config/clients/types'
 import { useAuthStore } from 'features/AuthStore'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 
-import { getHomeMatches } from 'requests/getMatches'
+import {
-import { getAgreements, setAgreements } from 'requests/getAgreements'
+  getHomeMatches,
+  getAgreements,
+  setAgreements,
+  getCountryCode,
+} from 'requests'
+
+import { setLocalStorageItem } from 'helpers'
+
+import { COUNTRY } from 'config'
 
 import { isSportFilterShownAtom } from './Atoms/HomePageAtoms'
+import { useAds } from '../../components/Ads/hooks'
 
 /**
  * возвращает смещение в минутах относительно UTC
@@ -34,18 +43,27 @@ const getTimezoneOffset = (date: Date) => {
 const getDate = (date: Date) => format(date, 'yyyy-MM-dd')
 
 export const useHomePage = () => {
-  const { user, userInfo } = useAuthStore()
+  const { userInfo } = useAuthStore()
   const { selectedDate } = useHeaderFiltersStore()
   const [isOpenDownload, setIsOpenDownload] = useState(false)
   const [isShowConfirmPopup, setIsShowConfirmPopup] = useState(false)
   const setIsSportFilterShown = useSetRecoilState(isSportFilterShownAtom)
 
+  const { ads } = useAds()
+
   const handleCloseConfirmPopup = useCallback(async () => {
     await setAgreements(`${userInfo?.email}` || '')
     setIsShowConfirmPopup(false)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setIsShowConfirmPopup, userInfo])
 
+  const countryCode = async () => {
+    const { country_code } = await getCountryCode()
+    country_code && setLocalStorageItem(COUNTRY, country_code)
+
+    return country_code
+  }
+
   useEffect(() => {
     if (userInfo?.email) {
       (async () => {
@@ -65,6 +83,8 @@ export const useHomePage = () => {
     ) {
       setIsOpenDownload(true)
     }
+
+    countryCode()
   }, [])
 
   const fetchMatches = useCallback(
@@ -75,7 +95,7 @@ export const useHomePage = () => {
       timezoneOffset: getTimezoneOffset(selectedDate),
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedDate, user],
+    [selectedDate, userInfo?.email],
   )
 
   useEffect(() => {
@@ -85,6 +105,7 @@ export const useHomePage = () => {
   }, [setIsSportFilterShown])
 
   return {
+    ads,
     fetchMatches,
     handleCloseConfirmPopup,
     isOpenDownload,

src/features/HomePage/index.tsx

@@ -20,10 +20,13 @@ import { useHomePage } from './hooks'
 import { Header } from './components/Header'
 import { HeaderMobile } from '../HeaderMobile'
 import { HeaderFilters } from './components/HeaderFilters'
+import { HeaderAds } from '../../components/Ads'
+import { HEADER_MOBILE_ADS } from '../../components/Ads/types'
 
 const Home = () => {
   usePageLogger(PAGES.home)
   const {
+    ads,
     fetchMatches,
     handleCloseConfirmPopup,
     isOpenDownload,
@@ -46,8 +49,17 @@ const Home = () => {
       <Main>
         <UserFavorites />
         <Content>
-          {isMobileDevice ? null : <HeaderFilters />}
+          {!isMobileDevice && <HeaderFilters />}
-          {/* {userInfo?.email && <Matches fetch={fetchMatches} />} */}
+          {userInfo?.email
+              && ads
+              && (
+                <HeaderAds ads={
+                  isMobileDevice
+                    ? ads?.mobile?.filter(({ position }) => HEADER_MOBILE_ADS.includes(position.id))
+                    : ads?.header
+                }
+                />
+              )}
           <Matches fetch={fetchMatches} />
           <ConfirmPopup
             isModalOpen={isShowConfirmPopup}

src/features/Matches/components/MatchesList/index.tsx

@@ -28,6 +28,7 @@ export const MatchesList = ({
   title,
 }: Props) => {
   const Component = matchesComponents[as]
+
   return (
     <Fragment>
       {!isEmpty(matches) && (

src/features/MatchesGrid/index.tsx

@@ -2,9 +2,9 @@ import { memo, useEffect } from 'react'
 import { useRouteMatch } from 'react-router-dom'
 import { useQuery } from 'react-query'
 
-import { PAGES } from 'config/pages'
+import { isMobileDevice, PAGES } from 'config'
 
-import type { LiveScore } from 'requests'
+import type { AdType, LiveScore } from 'requests'
 import { getLiveScores } from 'requests'
 
 import { MatchCard } from 'features/MatchCard'
@@ -12,9 +12,14 @@ import { TournamentList } from 'features/TournamentList'
 import type { Match } from 'features/Matches'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 
+import { readToken } from 'helpers'
+
+import { useRecoilValue } from 'recoil'
 import { Wrapper } from './styled'
 import { useMatchSwitchesStore } from '../MatchSwitches'
 import { querieKeys } from '../../config'
+import { AdComponent } from '../../components/Ads/components/AdComponent'
+import { adsStore } from '../../pages/HighlightsPage/storeHighlightsAtoms'
 
 type MatchesGridProps = {
   matches: Array<Match>,
@@ -24,6 +29,10 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => {
   const isHomePage = useRouteMatch(PAGES.home)?.isExact
   const { isScoreHidden } = useMatchSwitchesStore()
 
+  const ads = useRecoilValue(adsStore)
+
+  const currentAds = ads?.match_cell?.length ? ads?.match_cell : ads?.block
+
   const {
     compareSport,
     isShowTournament,
@@ -76,6 +85,12 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => {
 
   return (
     <Wrapper>
+      {!isMobileDevice
+          && readToken()
+          && currentAds
+          && (
+            currentAds?.map((ad: AdType) => <AdComponent ad={ad} />)
+          )}
       {isHomePage && isShowTournament ? (
         <TournamentList matches={filteredMatches()} />
       ) : (

src/features/MatchesGrid/styled.tsx

@@ -4,8 +4,14 @@ import { isMobileDevice } from 'config/userAgent'
 
 export const Wrapper = styled.ul`
   display: grid;
+  grid-template-columns: repeat(6, 15.6%);
   grid-gap: 0.9rem;
-  grid-template-columns: repeat(6, 15.7%);
+
+  .secondRow {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+  }
+  
   ${isMobileDevice
     ? css`
      display: flex;

src/features/TournamentList/components/TournamentMobile/index.tsx

@@ -1,7 +1,10 @@
 import { Fragment, useState } from 'react'
 
 import { isLffClient } from 'config/clients'
-import { URL_AWS } from 'config'
+import {
+  isMobileDevice,
+  URL_AWS,
+} from 'config'
 
 import { SportIcon } from 'components/SportIcon/SportIcon'
 import { T9n } from 'features/T9n'
@@ -14,6 +17,8 @@ import {
   LiveSign,
 } from 'features/MatchCard/CardFrontside/MatchCardMobile/styled'
 
+import { AdType } from 'requests'
+import { useRecoilValue } from 'recoil'
 import {
   CardWrapperOuter,
   CardWrapper,
@@ -25,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,
@@ -40,6 +48,8 @@ export const TournamentMobile = ({
 
   const currentColor = open ? '#ffffff' : 'rgba(255, 255, 255, 0.5)'
 
+  const ads = useRecoilValue(adsStore)
+
   return (
     <CardWrapperOuter>
       <CardWrapper
@@ -75,10 +85,29 @@ export const TournamentMobile = ({
         </ScSecondInfo>
       </CardWrapper>
       <ScMatchesWrapper>
-        {open
+        {open && (
-          && tournamentMatches?.map((match: Match) => (
+          <>
-            <MatchCard key={match.id} match={match} />
+            {isMobileDevice && ads?.mobile?.map((ad: AdType) => (
-          ))}
+              ad.position.id === VIEW_ADS.MOBILE_IN_COLLAPSE_HEADER && (
+                <MobileAd
+                  ad={ad}
+                  key={ad.id}
+                  className='mobileAdInCell'
+                />
+              )))}
+            {tournamentMatches?.map((match: Match) => (
+              <MatchCard key={match.id} match={match} />
+            ))}
+            {isMobileDevice && ads?.mobile?.map((ad: AdType) => (
+              ad.position.id === VIEW_ADS.MOBILE_IN_COLLAPSE_FOOTER && (
+                <MobileAd
+                  ad={ad}
+                  key={ad.id}
+                  className='mobileAdInCell'
+                />
+              )))}
+          </>
+        )}
       </ScMatchesWrapper>
     </CardWrapperOuter>
   )

src/features/TournamentList/components/TournamentMobile/styled.tsx

@@ -80,6 +80,10 @@ export const ScSecondInfo = styled.div`
 export const ScMatchesWrapper = styled.ul`
   display: flex;
   flex-direction: column;
+  
+  .mobileAdInCell {
+    margin: 6px 0 0;
+  }
 `
 
 export const ScStar = styled(Icon)`

src/features/TournamentList/index.tsx

@@ -32,6 +32,7 @@ export type TournamentListProps = {
 
 export const TournamentList = ({ matches }: TournamentTypeProps) => {
   const { tournaments, tournamentSort } = useTournaments(matches)
+
   const isHomePage = useRouteMatch(PAGES.home)?.isExact
 
   switch (true) {

src/index.tsx

@@ -5,14 +5,13 @@ import {
 } from 'react'
 import ReactDOM from 'react-dom'
 
+import { isIOS } from 'config/userAgent'
+// import { makeServer } from 'utilits/mirage/server'
+
 import * as Sentry from '@sentry/react'
 import { BrowserTracing } from '@sentry/react'
-
-import { isIOS, ENV } from 'config'
-
-// import { makeServer } from 'utilits/mirage/Mirage'
-
 import * as serviceWorker from './serviceWorker'
+import { ENV } from './config'
 
 if (process.env.NODE_ENV !== 'development') {
   Sentry.init({

src/pages/HighlightsPage/storeHighlightsAtoms.tsx

@@ -1,6 +1,6 @@
 import { atom, selector } from 'recoil'
 
-import type { Match } from 'requests'
+import type { AdResponse, Match } from 'requests'
 
 export type MatchType = Match & {
   isChecked: boolean,
@@ -43,6 +43,11 @@ export const fetchingMatches = atom({
   key: 'fetchingMatches',
 })
 
+export const adsStore = atom({
+  default: {} as AdResponse,
+  key: 'adsStore',
+})
+
 export const checkedMatches = selector({
   get: ({ get }) => {
     const matches = get(playerMatchesState)

src/requests/getAds/getAds.tsx

@@ -0,0 +1,52 @@
+import { callApi } from 'helpers'
+
+import { ADS_API_URL } from 'config'
+import { DeviceType } from '../../components/Ads/types'
+
+export type AdsParams = {
+  client_type: DeviceType,
+  language: string,
+  type_id: number,
+}
+
+export type AdType = {
+  'duration': number,
+  'frequency': number,
+  'id': number,
+  'impressions': number,
+  'link': string,
+  'media': {
+    url: string,
+  },
+  'name': string,
+  'position': {
+    'id': number,
+    'name_eng': string,
+    'name_rus': string,
+    'source_type': string,
+  },
+  remaining_views: number,
+  'time_close': number,
+  'type': {
+    'id': number,
+    'name_eng': string,
+    'name_rus': string,
+  },
+}
+
+export type PositionName = 'header' | 'block' | 'match_cell' | 'mobile'
+
+export type AdResponse = Record<PositionName, AdsListType>
+
+export type AdsListType = Array<AdType>
+
+export const getAds = (params: AdsParams): Promise<AdResponse> => {
+  const config = {
+    body: params,
+  }
+
+  return callApi({
+    config,
+    url: ADS_API_URL,
+  })
+}

src/requests/getAds/index.tsx

@@ -0,0 +1,2 @@
+export * from './getAds'
+export * from './updateAdsView'

src/requests/getAds/updateAdsView.tsx

@@ -0,0 +1,29 @@
+import { callApi } from 'helpers'
+
+import { ADS_API_URL } from 'config'
+
+export type AdsViewParams = {
+  adv_id: number,
+}
+
+type AdsViewResponse = {
+  'data': string,
+  'message': string,
+  'reason': string,
+  'status': 'failed' | 'failed' | 'success',
+}
+
+export const updateAdsView = (
+  { adv_id }: AdsViewParams,
+): Promise<AdsViewResponse> => {
+  const config = {
+    body: {
+      adv_id,
+    },
+  }
+
+  return callApi({
+    config,
+    url: `${ADS_API_URL}/${adv_id}/view`,
+  })
+}

src/requests/index.tsx

@@ -34,3 +34,7 @@ export * from './getMatchParticipants'
 export * from './getStatsEvents'
 export * from './getTokenVirtualUser'
 export * from './checkDevice'
+export * from './getAds'
+export * from './getFavouriteTeam'
+export * from './getCountryCode'
+export * from './getAgreements'

src/utilits/mirage/Mirage.tsx

@@ -1,31 +0,0 @@
-/* eslint-disable */
-import {
-  createServer,
-  Model,
-} from 'miragejs'
-
-import { ResponseType } from 'requests/getFavouriteTeam'
-
-import { surveys } from './fixtures/surveys'
-
-export function makeServer({ environment = 'test' } = {}) {
-  const server = createServer({
-    environment,
-    factories: {},
-    fixtures: {
-      surveys,
-    },
-    models: {
-      surveys: Model.extend<Partial<ResponseType>>({}),
-    },
-    routes() {
-      this.passthrough('https://api.insports.tv/***')
-      this.passthrough('https://insports.tv/***')
-      this.passthrough('https://images.insports.tv/***')
-      this.passthrough('https://auth.insports.tv/***')
-      this.passthrough('${URL_AWS}/***')
-      this.get('https://api.insports.tv/v1/survey/teams/1/131/30', (schema: any) => schema.all('surveys').models[0].attrs)
-    },
-  })
-  return server
-}

src/utilits/mirage/fixtures/getAds.tsx

@@ -0,0 +1,300 @@
+/* eslint-disable */
+export const getAds = () => {
+  return {
+    "mobile": [
+      {
+        "id": 71,
+        "name": "Test 2",
+        "type": {
+          "id": 1,
+          "name_eng": "Main",
+          "name_rus": "Главная"
+        },
+        "position": {
+          "id": 12,
+          "source_type": "Web",
+          "name_eng": "Web main ad 2 (1x1)",
+          "name_rus": "Веб: главная 2 (1x1)"
+        },
+        "link": "https://www.google.com/",
+        "impressions": 10,
+        "frequency": 2,
+        "duration": 120,
+        "time_close": 150,
+        "media": {
+          "url": "https://cf-aws-staging.insports.tv/media/folder/71/en/web.png"
+        },
+        "remaining_views": 9
+      },{
+        "id": 71,
+        "name": "Test 2",
+        "type": {
+          "id": 1,
+          "name_eng": "Main",
+          "name_rus": "Главная"
+        },
+        "position": {
+          "id": 25,
+          "source_type": "Web",
+          "name_eng": "Web main ad 2 (1x1)",
+          "name_rus": "Веб: главная 2 (1x1)"
+        },
+        "link": "https://www.google.com/",
+        "impressions": 10,
+        "frequency": 2,
+        "duration": 120,
+        "time_close": 150,
+        "media": {
+          "url": "https://cf-aws-staging.insports.tv/media/folder/71/en/web.png"
+        },
+        "remaining_views": 9
+      },
+      {
+        "id": 72,
+        "name": "Best mens boots for sport advertise here",
+        "type": {
+          "id": 1,
+          "name_eng": "Main",
+          "name_rus": "Главная"
+        },
+        "position": {
+          "id": 11,
+          "source_type": "Web",
+          "name_eng": "Web main ad 7 (1x1)",
+          "name_rus": "Веб: главная 7 (1x1)"
+        },
+        "link": "https://www.google.com/",
+        "impressions": 2,
+        "frequency": 1,
+        "duration": 300,
+        "time_close": 500,
+        "media": {
+          "url": "https://cf-aws-staging.insports.tv/media/folder/72/en/web.png"
+        },
+        "remaining_views": 9
+      }
+    ],
+    "match_cell": [
+      {
+        "id": 71,
+        "name": "Test 2",
+        "type": {
+          "id": 1,
+          "name_eng": "Main",
+          "name_rus": "Главная"
+        },
+        "position": {
+          "id": 1,
+          "source_type": "Web",
+          "name_eng": "Web main ad 2 (1x1)",
+          "name_rus": "Веб: главная 2 (1x1)"
+        },
+        "link": "https://www.google.com/",
+        "impressions": 10,
+        "frequency": 2,
+        "duration": 15,
+        "time_close": 15,
+        "media": {
+          "url": "https://cf-aws-staging.insports.tv/media/folder/71/en/web.png"
+        },
+        "remaining_views": 9
+      },
+      {
+        "id": 71,
+        "name": "Test 2",
+        "type": {
+          "id": 1,
+          "name_eng": "Main",
+          "name_rus": "Главная"
+        },
+        "position": {
+          "id": 2,
+          "source_type": "Web",
+          "name_eng": "Web main ad 2 (1x1)",
+          "name_rus": "Веб: главная 2 (1x1)"
+        },
+        "link": "https://www.google.com/",
+        "impressions": 10,
+        "frequency": 2,
+        "duration": 12,
+        "time_close": 15,
+        "media": {
+          "url": "https://cf-aws-staging.insports.tv/media/folder/71/en/web.png"
+        },
+        "remaining_views": 9
+      },
+      {
+        "id": 72,
+        "name": "Test 3",
+        "type": {
+          "id": 1,
+          "name_eng": "Main",
+          "name_rus": "Главная"
+        },
+        "position": {
+          "id": 3,
+          "source_type": "Web",
+          "name_eng": "Web main ad 7 (1x1)",
+          "name_rus": "Веб: главная 7 (1x1)"
+        },
+        "link": "https://www.google.com/",
+        "impressions": 10,
+        "frequency": 3,
+        "duration": 15,
+        "time_close": 15,
+        "media": {
+          "url": "https://cf-aws-staging.insports.tv/media/folder/72/en/web.png"
+        },
+        "remaining_views": 9
+      }
+    ],
+    "header": [
+      // {
+      //   "id": 77,
+      //   "name": "Test 8",
+      //   "type": {
+      //     "id": 1,
+      //     "name_eng": "Main",
+      //     "name_rus": "Главная"
+      //   },
+      //   "position": {
+      //     "id": 8,
+      //     "source_type": "Web",
+      //     "name_eng": "Web main ad 2 (3x1)",
+      //     "name_rus": "Веб: главная 2(3x1)"
+      //   },
+      //   "link": null,
+      //   "impressions": 10,
+      //   "frequency": 2,
+      //   "duration": 120,
+      //   "time_close": 15,
+      //   "media": {
+      //     "url": "https://cf-aws-staging.insports.tv/media/folder/77/en/web.png"
+      //   },
+      //   "remaining_views": 10
+      // },
+      {
+        "id": 78,
+        "name": "Test 9",
+        "type": {
+          "id": 1,
+          "name_eng": "Main",
+          "name_rus": "Главная"
+        },
+        "position": {
+          "id": 9,
+          "source_type": "Web",
+          "name_eng": "Web main ad (6x1)",
+          "name_rus": "Веб: главная (6x1)"
+        },
+        "link": null,
+        "impressions": 10,
+        "frequency": 2,
+        "duration": 10,
+        "time_close": 15,
+        "media": {
+          "url": "https://cf-aws-staging.insports.tv/media/folder/78/en/web.png"
+        },
+        "remaining_views": 15
+      },
+      {
+        "id": 76,
+        "name": "Test 7",
+        "type": {
+          "id": 1,
+          "name_eng": "Main",
+          "name_rus": "Главная"
+        },
+        "position": {
+          "id": 7,
+          "source_type": "Web",
+          "name_eng": "Web main ad (3x1)",
+          "name_rus": "Веб: главная (3x1)"
+        },
+        "link": null,
+        "impressions": 10,
+        "frequency": 4,
+        "duration": 10,
+        "time_close": 15,
+        "media": {
+          "url": "https://cf-aws-staging.insports.tv/media/folder/76/en/web.png"
+        },
+        "remaining_views": 15
+      }
+    ],
+    "block": [
+      // {
+      //   "id": 75,
+      //   "name": "Test 6",
+      //   "type": {
+      //     "id": 1,
+      //     "name_eng": "Main",
+      //     "name_rus": "Главная"
+      //   },
+      //   "position": {
+      //     "id": 6,
+      //     "source_type": "Web",
+      //     "name_eng": "Web main ad (2x2)",
+      //     "name_rus": "Веб: главная (2x2)"
+      //   },
+      //   "link": null,
+      //   "impressions": 10,
+      //   "frequency": 3,
+      //   "duration": 120,
+      //   "time_close": null,
+      //   "media": {
+      //     "url": "https://cf-aws-staging.insports.tv/media/folder/75/en/web.png"
+      //   },
+      //   "remaining_views": 10
+      // },
+      // {
+      //   "id": 73,
+      //   "name": "Test 4",
+      //   "type": {
+      //     "id": 1,
+      //     "name_eng": "Main",
+      //     "name_rus": "Главная"
+      //   },
+      //   "position": {
+      //     "id": 4,
+      //     "source_type": "Web",
+      //     "name_eng": "Web main ad (2x1)",
+      //     "name_rus": "Веб: главная (2x1)"
+      //   },
+      //   "link": null,
+      //   "impressions": 10,
+      //   "frequency": 1,
+      //   "duration": 120,
+      //   "time_close": null,
+      //   "media": {
+      //     "url": "https://cf-aws-staging.insports.tv/media/folder/73/en/web.png"
+      //   },
+      //   "remaining_views": 9
+      // },
+      // {
+      //   "id": 74,
+      //   "name": "Test 5",
+      //   "type": {
+      //     "id": 1,
+      //     "name_eng": "Main",
+      //     "name_rus": "Главная"
+      //   },
+      //   "position": {
+      //     "id": 5,
+      //     "source_type": "Web",
+      //     "name_eng": "Web main ad (1x2)",
+      //     "name_rus": "Веб: главная (1x2)"
+      //   },
+      //   "link": null,
+      //   "impressions": 10,
+      //   "frequency": 2,
+      //   "duration": 120,
+      //   "time_close": null,
+      //   "media": {
+      //     "url": "https://cf-aws-staging.insports.tv/media/folder/74/en/web.png"
+      //   },
+      //   "remaining_views": 9
+      // }
+    ]
+  }
+}

src/utilits/mirage/fixtures/index.tsx

@@ -0,0 +1,2 @@
+export * from './getAds'
+export * from './surveys'

src/utilits/mirage/models/index.tsx

@@ -0,0 +1,8 @@
+/* eslint-disable */
+import { Model } from 'miragejs'
+import type { ResponseType, AdResponse } from 'requests'
+
+export const models = {
+  ads: Model.extend<Partial<AdResponse>>({}),
+  surveys: Model.extend<Partial<ResponseType>>({}),
+}

src/utilits/mirage/server.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import {
+  createServer,
+} from 'miragejs'
+
+import {
+  ADS_API_URL,
+  APIS,
+  AUTH_SERVICE,
+  STATS_API_URL,
+  URL_AWS,
+  VIEWS_API,
+} from 'config'
+import { API_ROOT } from 'features/AuthServiceApp/config/routes'
+
+import { surveys, getAds } from './fixtures'
+import { models } from './models'
+
+
+const mainDomain = 'insports.tv'
+export function makeServer({ environment = 'test' } = {}) {
+  const server = createServer({
+    environment,
+    fixtures: {
+      surveys,
+      ads: getAds(),
+    },
+    models: models,
+    routes() {
+      this.passthrough(`${API_ROOT}/***`)
+      this.passthrough(`${VIEWS_API}/***`)
+      this.passthrough(`${STATS_API_URL}/***`)
+      this.passthrough(`${APIS.production.api}/***`)
+      this.passthrough(`${APIS.staging.api}/***`)
+      this.passthrough(`${AUTH_SERVICE}/***`)
+      this.passthrough(`https://${mainDomain}/***`)
+      this.passthrough(`https://images.${mainDomain}/***`)
+      this.passthrough(`${URL_AWS}/***`)
+      this.post(`${ADS_API_URL}`, getAds)
+      this.logging = true;
+    },
+  })
+  return server
+}