feat(in-454): default landing

src/config/lexics/indexLexics.tsx

@@ -3,6 +3,7 @@ import { publicLexics } from './public'
 import { highlightsPageLexic } from './highlightsPageLexic'
 import { mailingsLexics } from './mailings'
 import { sportsLexic } from './sportsLexic'
+import { landingLexics } from './landingLexics'
 
 const matchPopupLexics = {
   actions: 1020,
@@ -219,4 +220,5 @@ export const indexLexics = {
   ...paymentLexics,
   ...sportsLexic,
   ...sportsPopup,
+  ...landingLexics,
 }

src/config/lexics/landingLexics.tsx

@@ -0,0 +1,9 @@
+export const landingLexics = {
+  default_season: 19983,
+  inactive_button: 20083,
+  inactive_description_1: 20084,
+  inactive_description_2: 20086,
+  inactive_period: 801,
+  inactive_title_1: 20087,
+  inactive_title_2: 20088,
+}

src/features/App/AuthenticatedApp.tsx

@@ -35,7 +35,7 @@ const MatchPage = lazy(() => import('features/MatchPage'))
 const PlayerPage = lazy(() => import('features/PlayerPage'))
 const TournamentPage = lazy(() => import('features/TournamentPage'))
 const SystemSettings = lazy(() => import('features/SystemSettings'))
-const TournamentLanding = lazy(() => import('features/TournamentLanding'))
+const Landings = lazy(() => import('features/Landings'))
 const HighlightsPage = lazy(() => import('pages/HighlightsPage'))
 
 const ThanksPage = lazy(() => import('pages/ThanksPage'))
@@ -96,7 +96,7 @@ export const AuthenticatedApp = () => {
                               <HighlightsPage />
                             </Route>
                             <Route path={`${PAGES.landing}`}>
-                              <TournamentLanding />
+                              <Landings />
                             </Route>
                             <Redirect to={PAGES.home} />
                           </Switch>

src/features/AuthStore/hooks/useAuth.tsx

@@ -10,6 +10,7 @@ import type { User } from 'oidc-client'
 
 import isString from 'lodash/isString'
 import isBoolean from 'lodash/isBoolean'
+import includes from 'lodash/includes'
 
 import { PAGES } from 'config'
 
@@ -20,7 +21,6 @@ import {
   readToken,
   setCookie,
   removeCookie,
-  isMatchPage,
   TOKEN_KEY,
 } from 'helpers'
 
@@ -125,15 +125,12 @@ export const useAuth = () => {
     validator: isBoolean,
   })
 
-  useEffect(() => {
+  const [landingUrlFrom, setLandingUrlFrom] = useSessionStore({
-    if (isMatchPage()) setPage(history.location.pathname)
+    clearOnUnmount: true,
-    if (history.location.pathname !== page) setIsFromLanding(false)
+    defaultValue: '',
-  }, [
+    key: 'landingUrlFrom',
-    history.location.pathname,
+    validator: isString,
-    page,
+  })
-    setIsFromLanding,
-    setPage,
-  ])
 
   const getTemporaryToken = async () => {
     try {
@@ -281,7 +278,11 @@ export const useAuth = () => {
 
       setUserInfo(userInfoFetched)
 
-      userInfoFetched.language.iso && changeLang(userInfoFetched.language.iso)
+      if (includes(window.location.pathname, PAGES.landing)) {
+        changeLang(navigator.language.substring(0, 2))
+      } else {
+        userInfoFetched.language.iso && changeLang(userInfoFetched.language.iso)
+      }
 
       // eslint-disable-next-line no-empty
     } catch (error) {}
@@ -295,11 +296,13 @@ export const useAuth = () => {
     fetchUserInfo,
     isFromLanding,
     isNewDeviceLogin,
+    landingUrlFrom,
     loadingUser,
     login,
     logout,
     page,
     setIsFromLanding,
+    setLandingUrlFrom,
     setPage,
     setSearch,
     setUserInfo,
@@ -311,6 +314,7 @@ export const useAuth = () => {
     logout,
     user,
     userInfo,
+    landingUrlFrom,
     login,
     loadingUser,
     setSearch,
@@ -318,6 +322,7 @@ export const useAuth = () => {
     setUserInfo,
     page,
     setIsFromLanding,
+    setLandingUrlFrom,
     isFromLanding,
   ])
 

src/features/Landings/TeamLogoImg/index.tsx

@@ -24,14 +24,16 @@ type Props = {
 export const TeamLogoImg = ({
   src,
 }: Props) => {
-  const [isLogoError, setIsImgError] = useState(false)
+  const [isLogoError, setIsLogoError] = useState(true)
 
-  const onError = () => setIsImgError(true)
+  const onError = () => setIsLogoError(true)
+  const onLoad = () => setIsLogoError(false)
 
   return (
     <LogoImg
       src={src}
       onError={onError}
+      onLoad={onLoad}
       isLogoError={isLogoError}
     />
   )

src/features/Landings/hooks.tsx

@@ -0,0 +1,163 @@
+import {
+  useEffect,
+  useState,
+} from 'react'
+
+import size from 'lodash/size'
+import includes from 'lodash/includes'
+
+import type { TournamentInfo } from 'requests/getTournamentInfo'
+import type { Landing } from 'requests/getLanding'
+import { getLanding } from 'requests/getLanding'
+import { getLandingLogo } from 'requests/getLandingMedia'
+import { getTournamentInfo } from 'requests/getTournamentInfo'
+
+import { PAGES } from 'config/pages'
+
+import { redirectToUrl } from 'helpers/redirectToUrl'
+
+import { useLexicsStore } from 'features/LexicsStore'
+import { useAuthStore } from 'features/AuthStore'
+
+import { getLandingName, isPastLandingDate } from './helpers'
+import { getName, useName } from '../Name'
+
+export const useLandings = () => {
+  const [tournamentInfo, setTournamentInfo] = useState<Landing | null>(null)
+  const [isInactiveLanding, setIsInactiveLanding] = useState(false)
+  const [isNonExistLanding, setIsNonExistLanding] = useState(false)
+  const [nonExistLogoSrc, setNonExistLogoSrc] = useState('')
+  const [tournamentProfile, setTournamentProfile] = useState<TournamentInfo>(null)
+
+  const { addLexicsConfig, suffix } = useLexicsStore()
+  const {
+    landingUrlFrom,
+    setIsFromLanding,
+    user,
+  } = useAuthStore()
+
+  const buttonLexic = tournamentInfo?.lexic_button || ''
+  const period = tournamentInfo?.lexic_period || ''
+  const title = tournamentInfo?.lexic_title || ''
+  const description = tournamentInfo?.lexic_description || ''
+  const gallery = tournamentInfo?.media.gallery
+
+  useEffect(() => {
+    const lexics = [buttonLexic, period, title, description]
+    addLexicsConfig(lexics)
+  }, [
+    addLexicsConfig,
+    buttonLexic,
+    description,
+    period,
+    title,
+  ])
+
+  const redirectToHomePage = () => redirectToUrl(PAGES.home)
+  const onButtonClick = () => {
+    if (includes(landingUrlFrom, PAGES.match) || includes(landingUrlFrom, PAGES.tournament)) {
+      setIsFromLanding(true)
+      redirectToUrl(landingUrlFrom)
+      sessionStorage.removeItem('landingUrlFrom')
+    } else {
+      redirectToUrl(tournamentInfo?.url_button || '')
+    }
+  }
+
+  useEffect(() => {
+    (async () => {
+      const landingData = sessionStorage.getItem('landingData')
+      const parseLandingDate = landingData && JSON.parse(landingData)
+
+      if (parseLandingDate && parseLandingDate.defaultLanding) {
+        setIsNonExistLanding(true)
+        getTournamentInfo(parseLandingDate.sportType, parseLandingDate.tournamentId)
+          .then(setTournamentProfile)
+        return getLandingLogo({
+          sport_id: parseLandingDate.sportType,
+          tournament_id: parseLandingDate.tournamentId,
+        })
+          .then(({ logo_url }) => setNonExistLogoSrc(logo_url || '/images/tournament-fallback.png'))
+      }
+
+      try {
+        const data = landingUrlFrom
+          ? await getLanding({
+            landingName: parseLandingDate.landing_id || parseLandingDate.url_landing,
+            seasonId: parseLandingDate.season_id,
+            sportId: parseLandingDate.sport_id,
+            tournamentId: parseLandingDate.tournament_id,
+          })
+          : await getLanding({ landingName: getLandingName() })
+
+        if (user) return redirectToUrl(data.url_button || '')
+        if (isPastLandingDate(data.date_to)) setIsInactiveLanding(true)
+        return setTournamentInfo(data)
+      } catch (err) {
+        return redirectToHomePage()
+      }
+    })()
+  }, [landingUrlFrom, user])
+
+  const [sliderItemId, setSliderItemId] = useState(0)
+
+  const onSliderSwitchClick = (itemId: number) => setSliderItemId(itemId)
+
+  const imgCounter = size(gallery)
+
+  useEffect(() => {
+    if (sliderItemId === imgCounter) {
+      setSliderItemId(0)
+    }
+    const getSliderInterval = setInterval(() => {
+      setSliderItemId(sliderItemId + 1)
+    }, 5000)
+    return () => clearInterval(getSliderInterval)
+  }, [imgCounter, sliderItemId])
+
+  const isInactiveLandingData = () => {
+    if (!tournamentInfo?.tournaments || !isInactiveLanding) return null
+
+    const {
+      season,
+      tournament_eng,
+      tournament_rus,
+    } = tournamentInfo.tournaments[0]
+
+    const currentTournamentsTitle = {
+      name_eng: tournament_eng,
+      name_rus: tournament_rus,
+    }
+
+    const tournamentsTitle = getName({ nameObj: currentTournamentsTitle, suffix })
+
+    return {
+      season,
+      tournamentsTitle,
+    }
+  }
+
+  const defaultTournamentName = useName(tournamentProfile || {})
+
+  return {
+    buttonColor: tournamentInfo?.button_color,
+    buttonLexic,
+    defaultTournamentName,
+    description,
+    gallery,
+    isInactiveLanding,
+    isInactiveLandingData: isInactiveLandingData(),
+    isNonExistLanding,
+    logo: tournamentInfo?.media.logo,
+    logoInsports: tournamentInfo?.logo_insports,
+    nonExistLogoSrc,
+    onButtonClick,
+    onSliderSwitchClick,
+    period,
+    redirectToHomePage,
+    sliderItemId,
+    teams: tournamentInfo?.teams,
+    title,
+    tournamentInfo,
+  }
+}

src/features/Landings/index.tsx

@@ -0,0 +1,193 @@
+import {
+  BaseSyntheticEvent,
+  Fragment,
+  useCallback,
+} from 'react'
+
+import format from 'date-fns/format'
+
+import map from 'lodash/map'
+
+import { isMobileDevice } from 'config/userAgent'
+
+import { T9n } from 'features/T9n'
+
+import { useLandings } from './hooks'
+import { TeamLogoImg } from './TeamLogoImg'
+
+import {
+  Wrapper,
+  InsportsLogo,
+  HeaderWrapper,
+  Footer,
+  BlockWrapper,
+  TournamentInfo,
+  DateInfo,
+  InsportsImg,
+  TournamentMedia,
+  TournamentLogo,
+  TournamentTitle,
+  TournamentButton,
+  MainInfoContainer,
+  TournamentDescription,
+  TeamsLogo,
+  SliderContainer,
+  SliderWrapper,
+  MainLogoImg,
+  MainLogoWrapper,
+  SliderSwitch,
+  SliderSwitchItem,
+  SliderImg,
+  LogoBackground,
+  TournamentInfoContainer,
+} from './styled'
+
+const Landings = () => {
+  const {
+    buttonColor,
+    buttonLexic,
+    defaultTournamentName,
+    description,
+    gallery,
+    isInactiveLanding,
+    isInactiveLandingData,
+    isNonExistLanding,
+    logo,
+    logoInsports,
+    nonExistLogoSrc,
+    onButtonClick,
+    onSliderSwitchClick,
+    period,
+    redirectToHomePage,
+    sliderItemId,
+    teams,
+    title,
+    tournamentInfo,
+  } = useLandings()
+
+  const fallbackSrc = '/images/tournament-fallback.png'
+  const onError = useCallback((e: BaseSyntheticEvent) => {
+    // eslint-disable-next-line no-param-reassign
+    e.target.onError = ''
+    // eslint-disable-next-line no-param-reassign
+    e.target.src = fallbackSrc
+  }, [fallbackSrc])
+
+  if ((!tournamentInfo && !isNonExistLanding)
+    || (isNonExistLanding && !nonExistLogoSrc)) return null
+
+  const currentYear = format(new Date(), 'Y')
+
+  return (
+    <Wrapper>
+      <HeaderWrapper>
+        {isMobileDevice && <TournamentLogo src={logo} />}
+        <InsportsLogo onClick={redirectToHomePage} />
+      </HeaderWrapper>
+      <MainInfoContainer>
+        <BlockWrapper>
+          {
+            gallery && !isInactiveLanding && !isNonExistLanding
+              ? (
+                <SliderWrapper>
+                  <SliderContainer>
+                    {map(gallery, (img, itemId) => (
+                      <SliderImg
+                        isAnimatedImg={itemId === sliderItemId}
+                        key={img.id}
+                        src={img.url}
+                      />
+                    ))}
+                  </SliderContainer>
+                  <SliderSwitch>
+                    {map(gallery, (img, itemId) => (
+                      <SliderSwitchItem
+                        onClick={() => onSliderSwitchClick(itemId)}
+                        slideOpacity={itemId === sliderItemId}
+                        key={img.id}
+                      />
+                    ))}
+                  </SliderSwitch>
+                </SliderWrapper>
+              )
+              : (
+                <MainLogoWrapper>
+                  <LogoBackground />
+                  <MainLogoImg
+                    src={logo || nonExistLogoSrc}
+                    onError={onError}
+                  />
+                </MainLogoWrapper>
+              )
+          }
+          <TournamentInfoContainer>
+            <TournamentInfo>
+              {isInactiveLanding || isNonExistLanding
+                ? (
+                  <Fragment>
+                    <DateInfo>
+                      {isInactiveLanding
+                        ? <T9n t='inactive_period' />
+                        : <T9n t='default_season' />}&nbsp;
+                      {isInactiveLandingData?.season}
+                    </DateInfo>
+                    <TournamentTitle>
+                      <T9n t='inactive_title_1' />&nbsp;
+                      {isInactiveLandingData?.tournamentsTitle || defaultTournamentName}&nbsp;
+                      <T9n t='inactive_title_2' />
+                    </TournamentTitle>
+                    <TournamentDescription>
+                      <T9n t='inactive_description_1' />&nbsp;
+                      {isInactiveLandingData?.tournamentsTitle || defaultTournamentName}&nbsp;
+                      <T9n t='inactive_description_2' />
+                    </TournamentDescription>
+                  </Fragment>
+                )
+                : (
+                  <Fragment>
+                    <DateInfo>
+                      <T9n t={period} />
+                    </DateInfo>
+                    <TournamentTitle>
+                      <T9n t={title} />
+                    </TournamentTitle>
+                    <TournamentDescription>
+                      <T9n t={description} />
+                    </TournamentDescription>
+                  </Fragment>
+                )}
+              <TournamentButton
+                buttonColor={buttonColor}
+                onClick={onButtonClick}
+              >
+                <T9n t={isInactiveLanding || isNonExistLanding
+                  ? 'inactive_button'
+                  : buttonLexic}
+                />
+              </TournamentButton>
+            </TournamentInfo>
+            {(teams || ((logo || logoInsports) && !isInactiveLanding)) && (
+              <TournamentMedia>
+                {gallery && !isInactiveLanding && <TournamentLogo src={logo} />}
+                {teams && (
+                  <TeamsLogo>
+                    {map(teams, (item) => (
+                      <TeamLogoImg
+                        key={item.id}
+                        src={item.logo}
+                      />
+                    ))}
+                  </TeamsLogo>
+                )}
+                {(logoInsports && !isInactiveLanding) && <InsportsImg src='/images/insports-logo.svg' />}
+              </TournamentMedia>
+            )}
+          </TournamentInfoContainer>
+        </BlockWrapper>
+      </MainInfoContainer>
+      <Footer>©inSports.tv {currentYear}</Footer>
+    </Wrapper>
+  )
+}
+
+export default Landings

src/features/Landings/styled.tsx

@@ -2,9 +2,8 @@ import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
 
-import { ButtonSolid } from 'features/Common'
+import { ButtonSolid, customScrollbar } from 'features/Common'
 import { Logo } from 'features/Logo'
-import { T9n } from 'features/T9n'
 
 type ButtonProps = {
   buttonColor?: string,
@@ -24,6 +23,10 @@ export const Wrapper = styled.div`
   color: white;
   display: flex;
   flex-direction: column;
+  overflow-y: scroll;
+  justify-content: ${(isMobileDevice ? '' : 'space-between')};
+
+  ${customScrollbar}
 `
 
 export const HeaderWrapper = styled.div`
@@ -56,12 +59,11 @@ export const InsportsLogo = styled(Logo)`
 `
 
 export const MainInfoContainer = styled.div`
-  height: 100%;
-
   ${isMobileDevice
     ? css`
       overflow: scroll;
       position: relative;
+      height: 87%;
     `
     : ''};
 `
@@ -101,6 +103,7 @@ export const MainLogoWrapper = styled.div`
   width: 50%;
   position: relative;
   align-items: center;
+  margin-right: 1%;
 
   ${isMobileDevice
     ? css`
@@ -113,8 +116,8 @@ export const MainLogoWrapper = styled.div`
 `
 
 export const MainLogoImg = styled.img`
-  width: 35%;
+  width: 48%;
-  height: 35%;
+  height: 48%;
   position: relative;
 
   ${isMobileDevice
@@ -198,7 +201,7 @@ export const SliderSwitchItem = styled.div<SliderSwitchProps>`
   height: 4px;
   border-radius: 2px;
   background-color: white;
-  opacity: ${({ slideOpacity }) => (slideOpacity ? '1' : '.3')};;
+  opacity: ${({ slideOpacity }) => (slideOpacity ? '1' : '.3')};
   margin-right: 10px;
   cursor: pointer;
   transition: .7s;
@@ -231,17 +234,17 @@ export const TournamentInfo = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-top: ${(isMobileDevice ? 'none' : '90px')};
+  margin-top: ${(isMobileDevice ? 'none' : '4.25rem')};
 `
 
-export const DateInfo = styled(T9n)`
+export const DateInfo = styled.div`
   text-transform: uppercase;
   background-color: rgba(0, 0, 0, 0.4);
   padding: 8px 25px;
   color: #B9B9B9;
   width: fit-content;
   border-radius: 5px;
-  font-size: 13px;
+  font-size: .62rem;
   font-weight: 600;
   
   ${isMobileDevice
@@ -249,14 +252,14 @@ export const DateInfo = styled(T9n)`
       font-size: 10px;
       border-radius: 3px;
       background-color: rgba(0, 0, 0, 0.7);
-      padding: 5px 10px;`
+      padding: 3px 10px;`
     : ''};
 `
 
-export const TournamentTitle = styled(T9n)`
+export const TournamentTitle = styled.div`
   font-weight: 700;
-  font-size: 50px;
+  font-size: 2.36rem;
-  margin-top: 50px;
+  margin-top: 2.4rem;
   
   ${isMobileDevice
     ? css`
@@ -271,11 +274,13 @@ export const TournamentTitle = styled(T9n)`
 export const TournamentButton = styled(ButtonSolid)<ButtonProps>`
   width: 320px;
   height: fit-content;
-  font-size: 24px;
+  font-size: 1.13rem;;
   font-weight: 600;
   border-radius: 5px;
-  margin-bottom: 90px;
+  margin-bottom: 4.25rem;
-  padding: 20px 0;
+  padding: 0.94rem 3rem;
+  display: flex;
+  justify-content: center;
   background-color: ${({ buttonColor }) => (buttonColor ? `${buttonColor}` : '#294FC3')};
 
   ${isMobileDevice
@@ -288,16 +293,17 @@ export const TournamentButton = styled(ButtonSolid)<ButtonProps>`
     : ''};
 `
 
-export const TournamentDescription = styled(T9n)`
+export const TournamentDescription = styled.div`
-  max-width: 400px;
+  max-width: 26.6rem;
-  margin: 50px 0;
+  margin: 2.4rem 0;
-  font-size: 17px;
+  font-size: 0.8rem;
+  letter-spacing: 0.1px;
+  line-height: 150%;
   
   ${isMobileDevice
     ? css`
+      max-width: 100%;
       font-size: 12px;
-      line-height: 150%;
-      letter-spacing: 0.1px;
       margin: 25px 0 30px;
     `
     : ''};
@@ -307,7 +313,7 @@ export const TournamentMedia = styled.div`
   display: flex;
   align-items: center;
   height: 130px;
-  margin-bottom: 25px;
+  margin-bottom: 1.2rem;
 
   ${isMobileDevice
     ? css`

src/features/MatchPage/store/hooks/index.tsx

@@ -3,6 +3,7 @@ import {
   useState,
   useMemo,
 } from 'react'
+import { useHistory } from 'react-router'
 
 import includes from 'lodash/includes'
 import filter from 'lodash/filter'
@@ -79,10 +80,13 @@ export const useMatchPage = () => {
 
   const {
     isFromLanding,
+    landingUrlFrom,
     setIsFromLanding,
+    setLandingUrlFrom,
     user,
     userInfo,
   } = useAuthStore()
+  const history = useHistory()
 
   const {
     close: hideProfileCard,
@@ -138,14 +142,32 @@ export const useMatchPage = () => {
   }))
 
   useEffect(() => {
-    if (user || isFromLanding) return
+    if (user || isFromLanding || history.length > 1) return
+    setLandingUrlFrom(window.location.pathname)
     getLandingStatus({ matchId, sportType })
-      .then(({ landing_id }) => {
+      .then((data) => {
+        sessionStorage.setItem(
+          'landingData',
+          JSON.stringify({ ...data, defaultLanding: false }),
+        )
         setIsFromLanding(false)
-        if (landing_id) redirectToUrl(`${PAGES.landing}/${landing_id}`)
+        if (data.landing_id) redirectToUrl(`${PAGES.landing}/${data.landing_id}`)
       })
+      .catch(() => {
+        getMatchInfo(sportType, matchId).then((data) => {
+          sessionStorage.setItem('landingData', JSON.stringify({
+            defaultLanding: true,
+            sportType,
+            tournamentId: data?.tournament.id,
+          }))
+          redirectToUrl(`${PAGES.landing}/default`)
+        })
+      })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
+    setLandingUrlFrom,
     isFromLanding,
+    landingUrlFrom,
     matchId,
     setIsFromLanding,
     sportType,

src/features/TournamentLanding/hooks.tsx

@@ -1,96 +0,0 @@
-import {
-  useEffect,
-  useState,
-} from 'react'
-
-import size from 'lodash/size'
-import includes from 'lodash/includes'
-
-import type { TournamentLanding } from 'requests/getTournamentLanding'
-import { getTournamentLanding } from 'requests/getTournamentLanding'
-
-import { PAGES } from 'config/pages'
-
-import { redirectToUrl } from 'helpers/redirectToUrl'
-
-import { useLexicsStore } from 'features/LexicsStore'
-import { useAuthStore } from 'features/AuthStore'
-
-import { getLandingName, isPastLandingDate } from './helpers'
-
-export const useTournamentLanding = () => {
-  const [tournamentInfo, setTournamentInfo] = useState<TournamentLanding | null>(null)
-
-  const { addLexicsConfig } = useLexicsStore()
-  const { page, setIsFromLanding } = useAuthStore()
-
-  const buttonLexic = tournamentInfo?.lexic_button || ''
-  const period = tournamentInfo?.lexic_period || ''
-  const title = tournamentInfo?.lexic_title || ''
-  const description = tournamentInfo?.lexic_description || ''
-  const gallery = tournamentInfo?.media.gallery
-
-  useEffect(() => {
-    const lexics = [buttonLexic, period, title, description]
-    addLexicsConfig(lexics)
-  }, [
-    addLexicsConfig,
-    buttonLexic,
-    description,
-    period,
-    title,
-  ])
-
-  const redirectToHomePage = () => redirectToUrl(PAGES.home)
-  const onButtonClick = () => {
-    if (includes(page, 'matches')) {
-      setIsFromLanding(true)
-      redirectToUrl(page)
-    } else {
-      redirectToUrl(tournamentInfo?.url_button || '')
-    }
-  }
-
-  useEffect(() => {
-    getTournamentLanding(getLandingName())
-      .then((data) => (
-        isPastLandingDate(data.date_to)
-          ? redirectToHomePage()
-          : setTournamentInfo(data)
-      ))
-      .catch(redirectToHomePage)
-  }, [])
-
-  const [sliderItemId, setSliderItemId] = useState(0)
-
-  const onSliderSwitchClick = (itemId: number) => setSliderItemId(itemId)
-
-  const imgCounter = size(gallery)
-
-  useEffect(() => {
-    if (sliderItemId === imgCounter) {
-      setSliderItemId(0)
-    }
-    const getSliderInterval = setInterval(() => {
-      setSliderItemId(sliderItemId + 1)
-    }, 5000)
-    return () => clearInterval(getSliderInterval)
-  }, [imgCounter, sliderItemId])
-
-  return {
-    buttonColor: tournamentInfo?.button_color,
-    buttonLexic,
-    description,
-    gallery,
-    logo: tournamentInfo?.media.logo,
-    logoInsports: tournamentInfo?.logo_insports,
-    onButtonClick,
-    onSliderSwitchClick,
-    period,
-    redirectToHomePage,
-    sliderItemId,
-    teams: tournamentInfo?.teams,
-    title,
-    tournamentInfo,
-  }
-}

src/features/TournamentLanding/index.tsx

@@ -1,134 +0,0 @@
-import format from 'date-fns/format'
-
-import map from 'lodash/map'
-
-import { isMobileDevice } from 'config/userAgent'
-
-import { T9n } from 'features/T9n'
-
-import { useTournamentLanding } from './hooks'
-import { TeamLogoImg } from './TeamLogoImg'
-
-import {
-  Wrapper,
-  InsportsLogo,
-  HeaderWrapper,
-  Footer,
-  BlockWrapper,
-  TournamentInfo,
-  DateInfo,
-  InsportsImg,
-  TournamentMedia,
-  TournamentLogo,
-  TournamentTitle,
-  TournamentButton,
-  MainInfoContainer,
-  TournamentDescription,
-  TeamsLogo,
-  SliderContainer,
-  SliderWrapper,
-  MainLogoImg,
-  MainLogoWrapper,
-  SliderSwitch,
-  SliderSwitchItem,
-  SliderImg,
-  LogoBackground,
-  TournamentInfoContainer,
-} from './styled'
-
-const TournamentLanding = () => {
-  const {
-    buttonColor,
-    buttonLexic,
-    description,
-    gallery,
-    logo,
-    logoInsports,
-    onButtonClick,
-    onSliderSwitchClick,
-    period,
-    redirectToHomePage,
-    sliderItemId,
-    teams,
-    title,
-    tournamentInfo,
-  } = useTournamentLanding()
-
-  if (!tournamentInfo) return null
-
-  const currentYear = format(new Date(), 'Y')
-
-  return (
-    <Wrapper>
-      <HeaderWrapper>
-        {isMobileDevice && <TournamentLogo src={logo} />}
-        <InsportsLogo onClick={redirectToHomePage} />
-      </HeaderWrapper>
-      <MainInfoContainer>
-        <BlockWrapper>
-          {
-            gallery
-              ? (
-                <SliderWrapper>
-                  <SliderContainer>
-                    {map(gallery, (img, itemId) => (
-                      <SliderImg
-                        isAnimatedImg={itemId === sliderItemId}
-                        key={img.id}
-                        src={img.url}
-                      />
-                    ))}
-                  </SliderContainer>
-                  <SliderSwitch>
-                    {map(gallery, (img, itemId) => (
-                      <SliderSwitchItem
-                        onClick={() => onSliderSwitchClick(itemId)}
-                        slideOpacity={itemId === sliderItemId}
-                        key={img.id}
-                      />
-                    ))}
-                  </SliderSwitch>
-                </SliderWrapper>
-              )
-              : (
-                <MainLogoWrapper>
-                  <LogoBackground />
-                  <MainLogoImg src={logo} />
-                </MainLogoWrapper>
-              )
-          }
-          <TournamentInfoContainer>
-            <TournamentInfo>
-              <DateInfo t={period} />
-              <TournamentTitle t={title} />
-              <TournamentDescription t={description} />
-              <TournamentButton
-                buttonColor={buttonColor}
-                onClick={onButtonClick}
-              >
-                <T9n t={buttonLexic} />
-              </TournamentButton>
-            </TournamentInfo>
-            <TournamentMedia>
-              {gallery && <TournamentLogo src={logo} />}
-              {teams && (
-                <TeamsLogo>
-                  {map(teams, (item) => (
-                    <TeamLogoImg
-                      key={item.id}
-                      src={item.logo}
-                    />
-                  ))}
-                </TeamsLogo>
-              )}
-              {logoInsports && <InsportsImg src='/images/insports-logo.svg' />}
-            </TournamentMedia>
-          </TournamentInfoContainer>
-        </BlockWrapper>
-      </MainInfoContainer>
-      <Footer>©inSports.tv {currentYear}</Footer>
-    </Wrapper>
-  )
-}
-
-export default TournamentLanding

src/features/TournamentPage/hooks.tsx

@@ -11,13 +11,18 @@ import {
   getTournamentMatches,
 } from 'requests'
 
+import { openSubscribePopup, redirectToUrl } from 'helpers'
+
+import { PAGES } from 'config/pages'
+
+import { useName } from 'features/Name'
+
 import { checkUrlParams } from 'helpers/parseUrlParams/parseUrlParams'
 
 import { usePageParams } from 'hooks/usePageParams'
-import { openSubscribePopup } from 'helpers'
 
-import { useName } from 'features/Name'
 import { isPermittedTournament } from '../../helpers/isPermittedTournament'
+import { getLandingStatus } from '../../requests/getLandingStatus'
 import { useProfileCard } from '../ProfileCard/hooks'
 import { useBuyMatchPopupStore } from '../BuyMatchPopup'
 import { MATCH_CONFIG } from '../BuyMatchPopup/store/hooks/useSubscriptions'
@@ -30,7 +35,12 @@ export const useTournamentPage = () => {
   const country = useName(tournamentProfile?.country || {})
   const history = useHistory()
 
-  const { user } = useAuthStore()
+  const {
+    isFromLanding,
+    setIsFromLanding,
+    setLandingUrlFrom,
+    user,
+  } = useAuthStore()
 
   const { isFavorite, toggleFavorites } = useProfileCard()
 
@@ -49,6 +59,36 @@ export const useTournamentPage = () => {
     ],
   )
 
+  useEffect(() => {
+    if (user || isFromLanding || history.length > 1) return
+    setLandingUrlFrom(window.location.pathname)
+    getLandingStatus({ sportType, tournamentId })
+      .then((data) => {
+        sessionStorage.setItem(
+          'landingData',
+          JSON.stringify({ ...data, defaultLanding: false }),
+        )
+        setIsFromLanding(false)
+        if (data.landing_id) redirectToUrl(`${PAGES.landing}/${data.landing_id}`)
+      })
+      .catch(() => {
+        sessionStorage.setItem('landingData', JSON.stringify({
+          defaultLanding: true,
+          sportType,
+          tournamentId,
+        }))
+        redirectToUrl(`${PAGES.landing}/default`)
+      })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    setLandingUrlFrom,
+    isFromLanding,
+    tournamentId,
+    setIsFromLanding,
+    sportType,
+    user,
+  ])
+
   useEffect(() => {
     !isFavorite
     && checkUrlParams('from') === 'landing'

src/requests/getLanding.tsx

@@ -1,3 +1,5 @@
+import isUndefined from 'lodash/isUndefined'
+
 import { API_ROOT } from 'config'
 import { callApi } from 'helpers'
 
@@ -25,7 +27,7 @@ type Gallery = {
   url: string,
 }
 
-export type TournamentLanding = {
+export type Landing = {
   button_color?: string,
   date_from: string,
   date_to: string,
@@ -42,19 +44,31 @@ export type TournamentLanding = {
   },
   name: string,
   teams: Array<Teams>,
-  tournaments: Array<Tournaments>,
+  tournaments: Array<Tournaments> | null,
   url_button?: string,
 }
 
-export const getTournamentLanding = async (
+type Args = {
   landingName: number | string,
-): Promise<TournamentLanding> => {
+  seasonId?: number,
+  sportId?: number,
+  tournamentId?: number,
+}
+
+export const getLanding = async ({
+  landingName,
+  seasonId,
+  sportId,
+  tournamentId,
+}: Args): Promise<Landing> => {
   const config = {
     method: 'GET',
   }
 
   return callApi({
     config,
-    url: `${API_ROOT}/v1/landings/${landingName}`,
+    url: `${API_ROOT}/v1/landings/${landingName}${isUndefined(seasonId)
+      ? ''
+      : `?season_id=${seasonId}&sport_id=${sportId}&tournament_id=${tournamentId}`}`,
   })
 }

src/requests/getLandingMedia.tsx

@@ -0,0 +1,25 @@
+import { API_ROOT } from 'config'
+import { callApi } from 'helpers'
+
+export type LandingMedia = {
+  logo_url: string,
+}
+
+type Args = {
+  sport_id: number,
+  tournament_id?: number,
+}
+
+export const getLandingLogo = async ({
+  sport_id,
+  tournament_id,
+}: Args): Promise<LandingMedia> => {
+  const config = {
+    method: 'GET',
+  }
+
+  return callApi({
+    config,
+    url: `${API_ROOT}/v1/tournaments/${sport_id}/${tournament_id}/media`,
+  })
+}

src/requests/getLandingStatus.tsx

@@ -1,21 +1,35 @@
+import isUndefined from 'lodash/isUndefined'
+
 import { API_ROOT } from 'config'
 import { callApi } from 'helpers'
 
 type Args = {
-  matchId: number,
+  matchId?: number,
   sportType: number,
+  tournamentId?: number,
+}
+
+type LandingStatus = {
+  landing_id: number,
+  season_id: number,
+  sport_id: number,
+  tournament_id: number,
+  url_landing: string,
 }
 
 export const getLandingStatus = async ({
   matchId,
   sportType,
-}: Args): Promise<{landing_id: number | null}> => {
+  tournamentId,
+}: Args): Promise<LandingStatus> => {
   const config = {
     method: 'GET',
   }
 
   return callApi({
     config,
-    url: `${API_ROOT}/v1/landings/${sportType}/${matchId}/status`,
+    url: `${API_ROOT}/v1/landings/status/${sportType}?${
+      isUndefined(matchId) ? '' : `match_id=${matchId}`}${
+      isUndefined(tournamentId) ? '' : `tournament_id=${tournamentId}`}`,
   })
 }

src/requests/index.tsx

@@ -8,7 +8,7 @@ export * from './getUserSportFavs'
 export * from './modifyUserSportFavs'
 export * from './getSportTournaments'
 export * from './getTournamentInfo'
-export * from './getTournamentLanding'
+export * from './getLanding'
 export * from './getTeamInfo'
 export * from './getUserInfo'
 export * from './getMatchInfo'