fix(#ott2714): rfef landing

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,
 }

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 <JoinMatchPage />
+  if (!user && isMatchPage() && !window.location.href.includes('1rfef')) return <JoinMatchPage />
+  if (!user && window.location.href.includes('1rfef')) return <JoinMatchPageRFEF />
 
   // юзер считывается из localstorage или
   // access_token токен истек и запрашивается новый

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<UnauthenticatedMatch>(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,
+  }
+}

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 (
+    <Wrapper>
+      <HeaderWrapper>
+        <MainLogo />
+      </HeaderWrapper>
+      <BlockWrapper>
+        <SportImgWrapper />
+        <MatchInfo>
+          <Container>
+            <LogoRFEF />
+            <MainTitle>
+              <T9n t='rfef_title' />
+            </MainTitle>
+          </Container>
+          <PriceInfo>
+            <PriceWrapper>
+              <Price t='rfef_price1' />
+              <PriceDesc t='rfef_price_desc1' />
+            </PriceWrapper>
+            <PriceWrapper>
+              <Price t='rfef_price2' />
+              <PriceDesc t='rfef_price_desc2' />
+            </PriceWrapper>
+          </PriceInfo>
+          <SportImgMobileDevice />
+          <TitleDescWrapper>
+            <NormalText t='rfef_desc1' />
+            <ColoredText t='rfef_desc2' />
+            <NormalText t='rfef_desc3' />
+            <BoldText t='rfef_desc4' />
+            <NormalText t='rfef_desc5' />
+          </TitleDescWrapper>
+          <Button onClick={onJoinClick}>
+            <T9n t='rfef_button' />
+          </Button>
+        </MatchInfo>
+      </BlockWrapper>
+      <Footer>
+        <FooterLogo />
+        <FooterRights>©InStat TV {currentYear}</FooterRights>
+      </Footer>
+    </Wrapper>
+  )
+}

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``