diff --git a/public/images/landing_ligue_1.png b/public/images/landing_ligue_1.png new file mode 100644 index 00000000..4f8c4058 Binary files /dev/null and b/public/images/landing_ligue_1.png differ diff --git a/public/images/landing_mobile_ligue_1.png b/public/images/landing_mobile_ligue_1.png new file mode 100644 index 00000000..1deafbfb Binary files /dev/null and b/public/images/landing_mobile_ligue_1.png differ diff --git a/public/images/tunis_clubs.svg b/public/images/tunis_clubs.svg new file mode 100644 index 00000000..79079e60 --- /dev/null +++ b/public/images/tunis_clubs.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/config/clients/index.tsx b/src/config/clients/index.tsx index ed298f2e..18647023 100644 --- a/src/config/clients/index.tsx +++ b/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] diff --git a/src/config/lexics/joinMatch.tsx b/src/config/lexics/joinMatch.tsx index 15d9b05c..01d61260 100644 --- a/src/config/lexics/joinMatch.tsx +++ b/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, diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx index 80f86180..30bbc3d1 100644 --- a/src/features/App/index.tsx +++ b/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 if (!user && (isMatchPage() || checkPage(PAGES.tournament))) return if (!user && isMatchPageRFEF()) return 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 diff --git a/src/features/AuthStore/helpers.tsx b/src/features/AuthStore/helpers.tsx index f56ab034..c2fd3612 100644 --- a/src/features/AuthStore/helpers.tsx +++ b/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: diff --git a/src/features/AuthStore/hooks/useAuth.tsx b/src/features/AuthStore/hooks/useAuth.tsx index fa414650..31937cac 100644 --- a/src/features/AuthStore/hooks/useAuth.tsx +++ b/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() } diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index 7196d670..fe83d799 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/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( - 187deg, - ${color} -4.49%, - #000000 68.29%), - #000000; - z-index: 10; -` + + return css` + background: linear-gradient( + 187deg, + ${color} -4.49%, + #000000 68.29%), + #000000; + z-index: 10; + ` } type HeaderProps = { diff --git a/src/features/Theme/config.tsx b/src/features/Theme/config.tsx index 38a65d88..edf14b05 100644 --- a/src/features/Theme/config.tsx +++ b/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', }, diff --git a/src/helpers/isMatchPage/index.tsx b/src/helpers/isMatchPage/index.tsx index ba8e3fa0..2969aecb 100644 --- a/src/helpers/isMatchPage/index.tsx +++ b/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') diff --git a/src/pages/DiwanInsportsTv/index.tsx b/src/pages/DiwanInsportsTv/index.tsx new file mode 100644 index 00000000..af01608e --- /dev/null +++ b/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 ( + + + + {isMobileDevice && } + + + + + + + + + + + + + + + + + + + + + {!isMobileDevice && ( + + + + + )} + + + + + + ) +} diff --git a/src/pages/DiwanInsportsTv/styled.tsx b/src/pages/DiwanInsportsTv/styled.tsx new file mode 100644 index 00000000..37bfbb9a --- /dev/null +++ b/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; + ` + : ''}; +` diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 9740e798..07cb0cb4 100644 --- a/src/react-app-env.d.ts +++ b/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',