fix(#188): added tinisia landing page, redirect to diwan.insports.tv

src/config/clients/index.tsx

@@ -14,7 +14,7 @@ export const isInSportsClient = currentClient === 'insports'
 export const isInstatClient = currentClient === 'instat'
 export const isFacrClient = currentClient === 'facr'
 export const isIndiaClient = currentClient === 'india'
-export const isTunisClient = currentClient === 'tunis'
+export const isTunisClient = currentClient === 'tunisia'
 
 const clients = {
   facr,
@@ -22,7 +22,7 @@ const clients = {
   insports,
   instat,
   lff,
-  tunis: tunisia,
+  tunisia,
 }
 
 export const client: ClientConfig = clients[currentClient]

src/config/lexics/joinMatch.tsx

@@ -1,4 +1,8 @@
 export const joinMatchLexics = {
+  diwan_desc: 20035,
+  diwan_join: 20037,
+  diwan_season: 19983,
+  diwan_title: 20036,
   join_insports_tv: 15420,
   join_now: 15422,
   promo_text: 15421,

src/features/App/index.tsx

@@ -9,7 +9,11 @@ import { matomoInstance } from 'config/matomo'
 import { isAvailable } from 'config/env'
 
 import { setClientTitleAndDescription } from 'helpers/setClientHeads'
-import { isMatchPage, isMatchPageRFEF } from 'helpers/isMatchPage'
+import {
+  isDiwanInsportsTvPage,
+  isMatchPage,
+  isMatchPageRFEF,
+} from 'helpers/isMatchPage'
 
 import { GlobalStores } from 'features/GlobalStores'
 import { useAuthStore } from 'features/AuthStore'
@@ -21,6 +25,7 @@ import { JoinMatchPageRFEF } from 'features/JoinMatchPageRFEF'
 
 import { UnavailableText } from 'components/UnavailableText'
 
+import { DiwanInsportsTv } from 'pages/DiwanInsportsTv'
 import { AuthenticatedApp } from './AuthenticatedApp'
 import { checkPage } from '../../helpers/checkPage'
 import { PAGES } from '../../config'
@@ -30,12 +35,16 @@ setClientTitleAndDescription(client.title, client.description)
 const Main = () => {
   const { loadingUser, user } = useAuthStore()
 
+  if (!user && isDiwanInsportsTvPage()) return <DiwanInsportsTv />
   if (!user && (isMatchPage() || checkPage(PAGES.tournament))) return <JoinMatchPage />
   if (!user && isMatchPageRFEF()) return <JoinMatchPageRFEF />
 
   if (user && isMatchPageRFEF()) {
     window.location.href = 'https://instat.tv/football/tournaments/131'
   }
+  if (user && isDiwanInsportsTvPage()) {
+    window.location.href = 'https://diwan.insports.tv/football/tournaments/316'
+  }
   // юзер считывается из localstorage или
   // access_token токен истек и запрашивается новый
   if (loadingUser || user?.expired) return null

src/features/AuthStore/helpers.tsx

@@ -26,7 +26,7 @@ export const getClientNameByRedirectUri = () => {
     case ClientNames.India:
       return 'india.insports'
     case ClientNames.Tunisia:
-      return 'tunisia.insports'
+      return 'diwan.insports'
     case ClientNames.Facr:
       return ClientNames.Facr
     case ClientNames.Instat:

src/features/AuthStore/hooks/useAuth.tsx

@@ -19,7 +19,11 @@ import {
 } from 'helpers/languageUrlParam'
 import { writeToken, removeToken } from 'helpers/token'
 import { setCookie, removeCookie } from 'helpers/cookie'
-import { isMatchPage, isMatchPageRFEF } from 'helpers/isMatchPage'
+import {
+  isDiwanInsportsTvPage,
+  isMatchPage,
+  isMatchPageRFEF,
+} from 'helpers/isMatchPage'
 
 import { useLocalStore, useToggle } from 'hooks'
 
@@ -130,7 +134,12 @@ export const useAuth = () => {
       signinRedirectCallback()
     } else {
       checkUser().catch(() => {
-        if (!isMatchPage() && !isMatchPageRFEF() && !checkPage(PAGES.tournament)) {
+        if (
+          !isMatchPage()
+          && !isMatchPageRFEF()
+          && !checkPage(PAGES.tournament)
+          && !isDiwanInsportsTvPage()
+        ) {
           login()
         }
 

src/features/ProfileHeader/styled.tsx

@@ -4,6 +4,7 @@ import isUndefined from 'lodash/isUndefined'
 
 import { client } from 'config/clients'
 import { isMobileDevice } from 'config/userAgent'
+import { ClientNames } from 'config/clients/types'
 
 import { Logo } from 'features/Logo'
 import { ScoreSwitch } from 'features/MatchSwitches'
@@ -13,7 +14,7 @@ export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
 export const defaultHeaderStyles = (
   color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
 ) => {
-  if (['lff', 'tunis'].includes(client.name)) {
+  if ([ClientNames.Lff, ClientNames.Tunisia, ClientNames.Facr].includes(client.name)) {
     return client.styles.homePageHeader
   }
 
@@ -32,14 +33,15 @@ export const defaultHeaderStyles = (
       z-index: 10;
 `
   }
-  return client.name === 'facr' ? client.styles.homePageHeader : css`
+
-  background: linear-gradient(
+  return css`
-    187deg,
+    background: linear-gradient(
-    ${color} -4.49%,
+      187deg,
-    #000000 68.29%),
+      ${color} -4.49%,
-    #000000;
+      #000000 68.29%),
-  z-index: 10;
+      #000000;
-`
+    z-index: 10;
+  `
 }
 
 type HeaderProps = {

src/features/Theme/config.tsx

@@ -88,6 +88,7 @@ export const tunisTheme: CustomTheme = {
     ...defaultTheme.colors,
     background: '#1D1D1D',
     button: '#0E8F84',
+    buttonHover: '#09aa9d',
     dateFilter: '#ffffff80',
     inputs: '#3A4849',
   },

src/helpers/isMatchPage/index.tsx

@@ -1,5 +1,6 @@
 import toNumber from 'lodash/toNumber'
 import isUndefined from 'lodash/isUndefined'
+import includes from 'lodash/includes'
 
 export const isMatchPage = () => {
   const splitPath = window.location.pathname.split('/')
@@ -15,3 +16,5 @@ export const isMatchPageRFEF = () => {
 
   return pageType === '1rfef'
 }
+
+export const isDiwanInsportsTvPage = () => includes(window.location.host, 'diwan')

src/pages/DiwanInsportsTv/index.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+
+import format from 'date-fns/format'
+
+import { isMobileDevice } from 'config'
+import { joinMatchLexics } from 'config/lexics/joinMatch'
+
+import { T9n } from 'features/T9n'
+import { useLexicsConfig } from 'features/LexicsStore'
+
+import { useAuthStore } from 'features/AuthStore'
+
+import {
+  Wrapper,
+  TunisiaLogo,
+  HeaderWrapper,
+  Footer,
+  BlockWrapper,
+  MatchInfo,
+  LigueImgWrapper,
+  Season,
+  MainInfoTitle,
+  MainInfoButton,
+  MainInfoContainer,
+  MainInfoText,
+  FooterRights,
+  ClubsLogo,
+  InsportsLogo,
+  ScGradient,
+  LigueImg,
+} from './styled'
+
+export const DiwanInsportsTv = () => {
+  useLexicsConfig(joinMatchLexics)
+  const { login } = useAuthStore()
+
+  const currentYear = format(new Date(), 'Y')
+
+  return (
+    <Wrapper>
+      <HeaderWrapper>
+        <InsportsLogo />
+        {isMobileDevice && <TunisiaLogo />}
+      </HeaderWrapper>
+      <MainInfoContainer>
+        <BlockWrapper>
+          <LigueImgWrapper>
+            <ScGradient />
+            <LigueImg />
+          </LigueImgWrapper>
+          <MatchInfo>
+            <Season>
+              <T9n t='diwan_season' />
+            </Season>
+            <MainInfoTitle>
+              <T9n t='diwan_title' />
+            </MainInfoTitle>
+            <MainInfoText>
+              <T9n t='diwan_desc' />
+            </MainInfoText>
+            <MainInfoButton onClick={login}>
+              <T9n t='diwan_join' />
+            </MainInfoButton>
+            {!isMobileDevice && (
+              <React.Fragment>
+                <TunisiaLogo />
+                <ClubsLogo />
+              </React.Fragment>
+            )}
+          </MatchInfo>
+        </BlockWrapper>
+      </MainInfoContainer>
+      <Footer>
+        <FooterRights>©inSports.tv {currentYear}</FooterRights>
+      </Footer>
+    </Wrapper>
+  )
+}

src/pages/DiwanInsportsTv/styled.tsx

@@ -0,0 +1,302 @@
+import styled, { css } from 'styled-components/macro'
+
+import { devices } from 'config'
+import { isMobileDevice } from 'config/userAgent'
+
+import { ButtonSolid } from 'features/Common'
+
+export const Wrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  ${isMobileDevice
+    ? css`
+      height: 100%;
+    `
+    : ''};
+`
+
+export const HeaderWrapper = styled.div`
+  padding: 20px 0;
+  padding-left: 20%;
+  width: 100%;
+  background: rgba(19, 21, 27, 0.7);
+  backdrop-filter: blur(20px);
+  display: flex;
+  align-items: center;
+
+  @media ${devices.laptop} {
+    padding-left: 5%;
+  }
+
+  ${isMobileDevice
+    ? css`
+      background: #000000;
+    `
+    : ''};
+`
+
+export const TunisiaLogo = styled.div`
+  background-image: url(/images/tunis-logo.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 229px;
+  height: 49px;
+  margin-bottom: 50px;
+
+  ${isMobileDevice
+    ? css`
+      width: 66px;
+      height: 14px;
+      margin-bottom: 0;
+    `
+    : ''};
+`
+
+export const InsportsLogo = styled.div`
+  background-image: url(/images/insports-logo.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 80px;
+  height: 25px;
+  margin-right: 25px;
+  position: relative;
+
+  
+
+  ${isMobileDevice
+    ? css`
+      width: 57px;
+      height: 18px;
+
+      ::after {
+        content: '';
+        position: absolute;
+        width: 0.5px;
+        height: 25px;
+        background: #FFFFFF;
+        right: -13px;
+        top: -3px;
+        opacity: 0.6;
+      }
+    `
+    : ''};
+`
+
+export const ClubsLogo = styled.div`
+  background-image: url(/images/tunis_clubs.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 408px;
+  height: 86px;
+`
+
+export const MainInfoContainer = styled.div`
+  ${isMobileDevice
+    ? css`
+      margin-top: 50px;
+      height: 100%;
+    `
+    : ''};
+`
+
+export const BlockWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-left: 20%;
+  width: 100%;
+  position: relative;
+
+  @media ${devices.laptop} {
+    padding-left: 5%;
+  }
+  @media ${devices.mobile} {
+    padding-left: 5.4rem;
+  }
+  ${isMobileDevice
+    ? css`
+      flex-direction: column;
+      padding: 5.4rem;
+      @media screen and (orientation: landscape){
+        padding-top: 20px;
+        height: auto;
+      }
+    `
+    : ''};
+`
+
+export const ScGradient = styled.div`
+  content: '';
+  position: absolute;
+  width: 620px;
+  height: 310px;
+  border-radius: 50%;
+  background: rgba(29, 185, 171, 0.4);
+  opacity: 0.7;
+  filter: blur(104.135px);
+  top: 30%;
+  left: 25px;
+  z-index: 1;
+
+  ${isMobileDevice
+    ? css`
+      filter: blur(50.135px);
+      border-radius: 40%;
+      width: 349px;
+      height: 210px;
+      left: -35px;
+      top: -71px;
+    `
+    : ''};
+  
+`
+
+export const LigueImg = styled.div`
+  background-image: url(/images/landing_${() => (
+    isMobileDevice
+      ? 'mobile_ligue_1.png'
+      : 'ligue_1.png'
+  )});
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  width: 670px;
+  height: 156px;
+  z-index: 2;
+
+  ${isMobileDevice
+    ? css`
+      width: 288px;
+      height: 66px;
+    `
+    : ''};
+`
+
+export const LigueImgWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 80%;
+  margin-right: 5%;
+  position: relative;
+
+  ${isMobileDevice
+    ? css`
+      margin-right: 0;
+      margin-bottom: 83px;
+      @media screen and (orientation: landscape){
+        display: block;
+        height: 100%;
+        width: 70%;
+      }
+    `
+    : ''};
+`
+
+export const MatchInfo = styled.div`
+  margin-bottom: 60px;
+  max-width: 670px;
+
+  ${isMobileDevice
+    ? css`
+      width: 100%;
+      height: 100%;
+      @media screen and (orientation: landscape){
+        padding-top: 0;
+      }
+    `
+    : ''};
+`
+
+export const Season = styled.div`
+  text-transform: uppercase;
+  background-color: rgba(0,0,0,0.4);
+  padding: 8px 25px;
+  color: #B9B9B9;
+  border-radius: 5px;
+  font-size: 13px;
+  font-weight: 600;
+  display: inline-flex;
+  margin-bottom: 50px;
+
+  ${isMobileDevice
+    ? css`
+      margin-bottom: 15px;
+      padding: 0.7em 2.5rem;
+      font-size: 10px;
+    `
+    : ''};
+`
+
+export const MainInfoTitle = styled.div`
+  font-weight: 600;
+  font-size: 2rem;
+  ${isMobileDevice
+    ? css`
+      font-size: 24px;
+      margin-bottom: 25px;
+    `
+    : ''};
+`
+
+export const MainInfoButton = styled(ButtonSolid)`
+  width: auto;
+  height: 70px;
+  font-size: 24px;
+  font-weight: 600;
+  border-radius: 5px;
+  margin-bottom: 50px;
+
+  ${isMobileDevice
+    ? css`
+      width: 100%;
+      font-size: 17px;
+      margin-bottom: 30px;
+      height: 40px;
+    `
+    : ''};
+`
+
+export const MainInfoText = styled.div`
+  margin: 40px 0;
+  font-size: 17px;
+  line-height: 150%;
+  ${isMobileDevice
+    ? css`
+      font-size: 12px;
+      margin: 0 0 25px;
+      letter-spacing: 0.1px;
+    `
+    : ''};
+`
+
+export const Footer = styled.div`
+  font-size: 14px;
+  background-color: black;
+  padding: 16px 0;
+  padding-left: 20%;
+  width: 100%;
+  @media ${devices.laptop} {
+    padding-left: 5%;
+  }
+  @media ${devices.mobile} {
+    padding-left: 35px;
+  }
+  ${isMobileDevice
+    ? css`
+      display: none;
+    `
+    : ''};
+`
+
+export const FooterRights = styled.div`
+  opacity: .5;
+  ${isMobileDevice
+    ? css`
+      font-size: 12px;
+    `
+    : ''};
+`

src/react-app-env.d.ts

@@ -3,7 +3,7 @@
 
 declare namespace NodeJS {
   export interface ProcessEnv {
-    REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india' | 'tunis',
+    REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india' | 'tunisia',
     REACT_APP_ENV: 'production' | 'preproduction' | 'staging',
     REACT_APP_STAGE: 'staging' | 'test-a' | 'test-b' | 'test-c' | 'test-d' | 'test-e' | 'test-f' | 'test-g' | 'test-h' | 'test-i' | 'test-j' | 'test',
     REACT_APP_TYPE: 'auth-service' | 'ott',