diff --git a/public/images/landing_rfef.png b/public/images/landing_rfef.png new file mode 100644 index 00000000..104da6b1 Binary files /dev/null and b/public/images/landing_rfef.png differ diff --git a/public/images/rfef_logo.png b/public/images/rfef_logo.png new file mode 100644 index 00000000..9ec075e0 Binary files /dev/null and b/public/images/rfef_logo.png differ diff --git a/src/config/lexics/joinMatch.tsx b/src/config/lexics/joinMatch.tsx index 728c9763..32143301 100644 --- a/src/config/lexics/joinMatch.tsx +++ b/src/config/lexics/joinMatch.tsx @@ -2,5 +2,16 @@ export const joinMatchLexics = { join_instat_tv: 15420, join_now: 15422, promo_text: 15421, + rfef_button: 19766, + rfef_desc1: 19765, + rfef_desc2: 19770, + rfef_desc3: 19771, + rfef_desc4: 19772, + rfef_desc5: 19773, + rfef_price_desc1: 19774, + rfef_price_desc2: 19775, + rfef_price1: 19763, + rfef_price2: 19764, + rfef_title: 19762, watch_live: 15423, } diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx index 2309a0ce..f034ae04 100644 --- a/src/features/App/index.tsx +++ b/src/features/App/index.tsx @@ -16,6 +16,7 @@ import { Background } from 'features/Background' import { GlobalStyles } from 'features/GlobalStyles' import { Theme } from 'features/Theme' import { JoinMatchPage } from 'features/JoinMatchPage' +import { JoinMatchPageRFEF } from 'features/JoinMatchPageRFEF' import { AuthenticatedApp } from './AuthenticatedApp' @@ -24,7 +25,8 @@ setClientTitleAndDescription(client.title, client.description) const Main = () => { const { loadingUser, user } = useAuthStore() - if (!user && isMatchPage()) return + if (!user && isMatchPage() && !window.location.href.includes('1rfef')) return + if (!user && window.location.href.includes('1rfef')) return // юзер считывается из localstorage или // access_token токен истек и запрашивается новый diff --git a/src/features/JoinMatchPageRFEF/hooks.tsx b/src/features/JoinMatchPageRFEF/hooks.tsx new file mode 100644 index 00000000..ac66e9c0 --- /dev/null +++ b/src/features/JoinMatchPageRFEF/hooks.tsx @@ -0,0 +1,42 @@ +import { + useEffect, + useState, +} from 'react' + +import format from 'date-fns/format' + +import type { UnauthenticatedMatch } from 'requests' +import { getUnauthenticatedMatch } from 'requests' + +import { parseDate } from 'helpers/parseDate' + +import { usePageParams } from 'hooks/usePageParams' + +import { useAuthStore } from 'features/AuthStore' + +export const useUnauthenticatedMatch = () => { + const { login } = useAuthStore() + + const [ + matchInfo, setMatchInfo, + ] = useState(null) + + const { profileId: matchId, sportType } = usePageParams() + + const matchDate = matchInfo?.date + ? format(parseDate(matchInfo.date), 'd MMM HH:mm') + : '' + + useEffect(() => { + if (sportType && matchId) getUnauthenticatedMatch(sportType, matchId).then(setMatchInfo) + + return () => setMatchInfo(null) + }, [sportType, matchId]) + + return { + live: matchInfo?.live, + matchDate, + matchInfo, + onJoinClick: login, + } +} diff --git a/src/features/JoinMatchPageRFEF/index.tsx b/src/features/JoinMatchPageRFEF/index.tsx new file mode 100644 index 00000000..3774251f --- /dev/null +++ b/src/features/JoinMatchPageRFEF/index.tsx @@ -0,0 +1,101 @@ +import { useEffect } from 'react' +import format from 'date-fns/format' + +import { joinMatchLexics } from 'config/lexics/joinMatch' + +// import { usePageParams } from 'hooks/usePageParams' + +import { T9n } from 'features/T9n' +// import { Name } from 'features/Name' +import { useLexicsConfig, useLexicsStore } from 'features/LexicsStore' + +import { useUnauthenticatedMatch } from './hooks' + +import { + Wrapper, + MainLogo, + HeaderWrapper, + Footer, + Container, + ColoredText, + BlockWrapper, + BoldText, + MatchInfo, + SportImgWrapper, + LogoRFEF, + PriceDesc, + PriceInfo, + PriceWrapper, + NormalText, + TitleDescWrapper, + Button, + SportImgMobileDevice, + FooterLogo, + FooterRights, + MainTitle, + Price, +} from './styled' + +export const JoinMatchPageRFEF = () => { + useLexicsConfig(joinMatchLexics) + + // const { sportType } = usePageParams() + const { + // live, + // matchDate, + // matchInfo, + onJoinClick, + } = useUnauthenticatedMatch() + + const currentYear = format(new Date(), 'Y') + + const { changeLang } = useLexicsStore() + + useEffect(() => { + changeLang('es') + }, [changeLang]) + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/features/JoinMatchPageRFEF/styled.tsx b/src/features/JoinMatchPageRFEF/styled.tsx new file mode 100644 index 00000000..6dbad745 --- /dev/null +++ b/src/features/JoinMatchPageRFEF/styled.tsx @@ -0,0 +1,396 @@ +import styled, { css } from 'styled-components/macro' + +import { devices } from 'config' +import { isMobileDevice } from 'config/userAgent' + +import { Logo } from 'features/Logo' +import { T9n } from 'features/T9n' + +export const Wrapper = styled.div` + width: 100vw; + height: 100vh; + color: white; + display: flex; + flex-direction: column; + justify-content: space-between; +` + +export const HeaderWrapper = styled.div` + /* background-color: #13151B; */ + background-color: rgba(19, 21, 27, 0.7); + padding: 20px 0; + padding-left: 20%; + width: 100%; + @media ${devices.laptop} { + padding-left: 5%; + } + ${isMobileDevice + ? css` + display: none; + ` + : ''}; +` + +export const MainLogo = styled(Logo)` + height: 20px; + width: 80px; +` + +export const BlockWrapper = styled.div` + height: 100%; + display: flex; + align-items: center; + padding-left: 20%; + width: 100%; + @media ${devices.laptop} { + padding-left: 5%; + } + @media ${devices.mobile} { + padding-left: 5.4rem; + } + ${isMobileDevice + ? css` + padding: 5.4rem; + overflow: scroll; + @media screen and (orientation: landscape){ + padding-top: 20px; + height: auto; + } + ` + : ''}; +` + +export const SportImgWrapper = styled.div` + background-image: url(/images/landing_rfef.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + width: 512px; + height: 80%; + margin-right: 5%; + ${isMobileDevice + ? css` + display: none; + /* @media screen and (orientation: landscape){ + display: block; + height: 100%; + width: 70%; + } */ + ` + : ''}; +` +export const Container = styled.div` + ${isMobileDevice + ? css` + display: flex; + align-items: center; + margin-bottom: 15px; + ` + : ''}; +` + +export const MatchInfo = styled.div` + ${isMobileDevice + ? css` + width: 100%; + height: 100%; + @media screen and (orientation: landscape){ + padding-top: 0; + } + ` + : ''}; +` + +export const LogoRFEF = styled.div` + width: 93px; + height: 126px; + background-image: url(/images/rfef_logo.png); + background-repeat: no-repeat; + background-size: contain; + margin-bottom: 20px; + + ${isMobileDevice + ? css` + width: 43px; + min-width: 43px; + height: 59px; + margin-right: 15px; + margin-bottom: 0; + ` + : ''}; +` + +export const MainTitle = styled.h1` + font-size: 36px; + font-weight: 400; + margin-bottom: 40px; + + ${isMobileDevice + ? css` + font-size: 19px; + margin-bottom: 0; + ` + : ''}; +` + +export const PriceInfo = styled.div`` + +export const PriceWrapper = styled.div` + margin-bottom: 10px; + + &:last-child { + margin-bottom: 45px; + } + + ${isMobileDevice + ? css` + font-size: 14px; + ` + : ''}; + +` + +export const Price = styled(T9n)` + font-weight: 500; + font-size: 30px; + margin-right: 10px; + + ${isMobileDevice + ? css` + font-size: 18px; + ` + : ''}; +` + +export const PriceDesc = styled(T9n)` + font-weight: 500; + font-size: 20px; + color: rgba(255, 255, 255, 0.5); + + ${isMobileDevice + ? css` + font-size: 14px; + ` + : ''}; +` + +export const TitleDescWrapper = styled.div` + font-size: 17px; + margin-bottom: 100px; + + ${isMobileDevice + ? css` + font-size: 15px; + margin-bottom: 20px; + ` + : ''}; + +` + +export const NormalText = styled(T9n)` + font-weight: 400; + margin-right: 5px; +` + +export const ColoredText = styled(T9n)` + color: #FF655F; + margin-right: 5px; +` + +export const BoldText = styled(T9n)` + font-weight: 700; + margin-right: 5px; +` + +// export const TitleNormal = styled.span` +// font-weight: 400; +// ` + +// export const TitleColored = styled.span` +// font-weight: 700; +// color: #FF655F; +// ` + +// export const TitleBold = styled.span` +// font-weight: 700; +// ` + +export const Button = styled.button` + width: 260px; + height: 50px; + background-color: #FF2E25; + border-radius: 5px; + outline: none; + border: none; + color: #fff; + font-weight: 600; + font-size: 20px; + cursor: pointer; + + ${isMobileDevice + ? css` + width: 100%; + ` + : ''}; +` + +// export const DateInfoWrapper = styled.div` +// display: flex; +// align-items: center; +// font-size: 15px; +// font-weight: 600; +// ${isMobileDevice +// ? css` +// justify-content: space-between; +// font-size: 2.3rem; +// ` +// : ''}; +// ` + +// export const DateInfo = styled.div` +// text-transform: uppercase; +// background-color: rgba(0,0,0,0.4); +// padding: 8px 25px; +// color: #B9B9B9; +// margin-right: 25px; +// border-radius: 5px; +// ${isMobileDevice +// ? css` +// padding: 0.7em 2.5rem; +// ` +// : ''}; +// ` + +// export const WatchLive = styled.div` +// display: flex; +// align-items: center; +// ` + +// export const WatchLiveText = styled.div` +// color: #EB5757; +// letter-spacing: .2rem; +// ` + +// export const WatchLiveCircle = styled.div` +// width: 20px; +// height: 20px; +// border-radius: 50%; +// background-color: #CC0000; +// margin-right: 5px; +// ${isMobileDevice +// ? css` +// width: 15px; +// height: 15px; +// ` +// : ''}; +// ` + +// export const TeamsNameWrapper = styled.div` +// margin: 35px 0 40px; +// font-size: 20px; +// font-weight: 500; +// ${isMobileDevice +// ? css` +// margin: 10px 0; +// font-size: 2.4rem; +// ` +// : ''}; +// ` + +// export const MainInfoTitle = styled.div` +// font-weight: 600; +// font-size: 2rem; +// ${isMobileDevice +// ? css` +// font-size: 3.8rem; +// margin-bottom: 15px; +// ` +// : ''}; +// ` + +// export const MainInfoButton = styled(ButtonSolid)` +// width: 260px; +// height: 50px; +// font-size: 20px; +// ${isMobileDevice +// ? css` +// width: 100%; +// border-radius: 10px; +// font-size: 17px; +// margin-bottom: 30px; +// ` +// : ''}; +// ` + +// export const MainInfoText = styled.div` +// max-width: 400px; +// margin: 40px 0; +// font-size: 17px; +// line-height: 150%; +// ${isMobileDevice +// ? css` +// font-size: 2.2rem; +// margin: 15px 0 25px; +// ` +// : ''}; +// ` + +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: flex; + padding: 15px 35px; + justify-content: space-between; + align-items: center; + ` + : ''}; +` + +export const FooterLogo = styled(Logo)` + display: none; + ${isMobileDevice + ? css` + display: block; + width: 48px; + height: 11px; + opacity: .4; + ` + : ''}; +` + +export const FooterRights = styled.div` + opacity: .5; + ${isMobileDevice + ? css` + font-size: 12px; + ` + : ''}; +` + +export const SportImgMobileDevice = styled(SportImgWrapper)` + display: none; + ${isMobileDevice + ? css` + display: block; + height: 50%; + width: 100%; + margin-right: 0; + @media screen and (orientation: landscape){ + display: none; + } + ` + : ''}; +` + +// export const EmptySpan = styled.span``