feat(#2818): add favourite team popup for espan primera tournament

src/components/ItemInfo/ItemInfo.tsx

@@ -0,0 +1,28 @@
+import { ProfileTypes, PROFILE_NAMES } from 'config'
+
+import {
+  ScWrapper,
+  ScLogo,
+  ScName,
+} from './styled'
+
+type ItemInfoType = {
+  active?: boolean,
+  id: number,
+  name: string,
+  onClick: (val: any) => void,
+  type: ProfileTypes,
+}
+
+export const ItemInfo = ({
+  active,
+  id,
+  name,
+  onClick,
+  type,
+}: ItemInfoType) => (
+  <ScWrapper onClick={onClick}>
+    <ScLogo src={`https://instatscout.com/images/${PROFILE_NAMES[type]}/180/${id}.png`} />
+    <ScName active={active}>{name}</ScName>
+  </ScWrapper>
+)

src/components/ItemInfo/styled.tsx

@@ -0,0 +1,56 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+
+export const ScLogo = styled.img`
+  width: 24px;
+  object-fit: cover;
+  margin-right: 10px;
+
+  ${isMobileDevice
+    ? css`
+            width: 15px;
+          `
+    : ''};
+`
+
+export const ScName = styled.span<{active?: boolean}>`
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 21px;
+
+  ${({ active }) => (active
+    ? css`
+            font-weight: 700;
+            font-size: 17px;
+            line-height: 21px;
+      `
+    : '')};
+
+  ${isMobileDevice
+    ? css`
+            font-size: 12px;
+            line-height: 15px
+      `
+    : ''};
+`
+
+export const ScWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  max-width: 300px;
+
+  :hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+    cursor: pointer;
+
+    ${isMobileDevice
+    ? css`
+            font-size: 12px;
+            line-height: 15px
+      `
+    : ''};
+}
+`

src/config/lexics/indexLexics.tsx

@@ -6,6 +6,7 @@ import { highlightsPageLexic } from './highlightsPageLexic'
 const matchPopupLexics = {
   actions: 1020,
   apply: 13491,
+  choose_fav_team: 19776,
   commentators: 15424,
   episode_duration: 13410,
   events: 1020,
@@ -14,6 +15,7 @@ const matchPopupLexics = {
   from_start_match: 15395,
   gk: 3515,
   go_back_to_match: 13405,
+  group: 7850,
   half_time: 1033,
   languages: 15030,
   match_interviews: 13031,

src/config/routes.tsx

@@ -12,8 +12,8 @@ export const APIS = {
     auth: 'https://auth.insports.tv',
   },
   staging: {
-    api: 'https://api.test.insports.tv',
+    api: 'https://api.insports.tv',
-    auth: 'https://auth.test.insports.tv',
+    auth: 'https://auth.insports.tv',
   },
 }
 

src/features/MatchPage/components/FavouriteTeam/hooks.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react'
+
+import {
+  getFavouriteTeam,
+  FavouriteTeams,
+  ResponseType,
+} from 'requests/getFavouriteTeam'
+import { saveFavouriteTeam } from 'requests/saveFavouriteTeam'
+
+/* eslint-disable */
+const groupTeams = {
+  1086: 'group_1',
+  7032: 'group_1',
+  6132: 'group_1',
+  7321: 'group_1',
+  62: 'group_1',
+  7329: 'group_1',
+  17958: 'group_1',
+  1076: 'group_1',
+  6337: 'group_1',
+  9114: 'group_1',
+  9143: 'group_1',
+  7011: 'group_1',
+  6996: 'group_1',
+  3945: 'group_1',
+  6330: 'group_1',
+  7346: 'group_1',
+  6331: 'group_1',
+  31608: 'group_1',
+  6335: 'group_1',
+  6332: 'group_1',
+  9108: 'group_1',
+  1089: 'group_2',
+  7102: 'group_2',
+  7018: 'group_2',
+  6549: 'group_2',
+  3965: 'group_2',
+  2103: 'group_2',
+  167340: 'group_2',
+  6606: 'group_2',
+  7016: 'group_2',
+  7015: 'group_2',
+  7288: 'group_2',
+  1093: 'group_2',
+  1092: 'group_2',
+  1085: 'group_2',
+  3882: 'group_2',
+  7307: 'group_2',
+  7306: 'group_2',
+  7108: 'group_2',
+  1088: 'group_2',
+  1077: 'group_2',
+}
+
+export const useFavouriteTeam = () => {
+  const [teams, setTeams] = useState<Array<FavouriteTeams>>([])
+  const [active, setActive] = useState<number | null>(null)
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+  const [group1, setGroup1] = useState<Array<FavouriteTeams>>([])
+  const [group2, setGroup2] = useState<Array<FavouriteTeams>>([])
+
+  const changeActive = (team: FavouriteTeams) => {
+    setActive((prev) => (prev === team.id ? null : team.id))
+  }
+
+  const onSaveFavouriteTeam = () => {
+    active && saveFavouriteTeam(
+        {
+          answer_id: active,
+          survey_id: 1,
+        })
+    setIsOpen(false)
+  }
+
+  useEffect(() => {
+    getFavouriteTeam({
+      country_id: 77,
+      season: 30,
+      sport_id: 1,
+      tournament_id: 131,
+    }).then(({ data, status }: ResponseType) => {
+      if(!status) {
+        setTeams(data)
+        setIsOpen(true)
+      }else{
+        return
+      }
+    })
+  }, [])
+
+  useEffect(() => {
+    setGroup1(teams?.filter(
+      (team: FavouriteTeams) => groupTeams[team.id as keyof typeof groupTeams] === 'group_1',
+    ))
+    setGroup2(teams?.filter(
+      (team: FavouriteTeams) => groupTeams[team.id as keyof typeof groupTeams] === 'group_2',
+    ))
+  }, [teams])
+
+  return {
+    active,
+    changeActive,
+    group1,
+    group2,
+    isOpen,
+    onSaveFavouriteTeam,
+  }
+}

src/features/MatchPage/components/FavouriteTeam/index.tsx

@@ -0,0 +1,85 @@
+import { T9n } from 'features/T9n'
+
+import { Wrapper } from 'features/PreferencesPopup/styled'
+
+import { ItemInfo } from 'components/ItemInfo/ItemInfo'
+
+import type { FavouriteTeams } from 'requests/getFavouriteTeam'
+
+import { useFavouriteTeam } from './hooks'
+
+import {
+  Button,
+  ButtonsBlock,
+  ScBody,
+  ScGroup,
+  ScGroupName,
+  ScGroups,
+  ScHeaderTitle,
+  ScModalContainer,
+  ScTeamsList,
+} from './styled'
+
+export const FavouriteTeamPopup = () => {
+  const {
+    active,
+    changeActive,
+    group1,
+    group2,
+    isOpen,
+    onSaveFavouriteTeam,
+  } = useFavouriteTeam()
+
+  return (
+    <ScModalContainer isOpen={isOpen} withCloseButton={false}>
+      <Wrapper>
+        <ScBody>
+          <ScHeaderTitle>
+            <T9n t='choose_fav_team' />
+          </ScHeaderTitle>
+          <ScGroups>
+            <ScGroup>
+              <ScGroupName>
+                <T9n t='group' /> 1
+              </ScGroupName>
+              <ScTeamsList>
+                {group1?.map((team: FavouriteTeams) => (
+                  <ItemInfo
+                    active={team.id === active}
+                    key={team.id}
+                    id={team.id}
+                    name={team.name_en}
+                    type={2}
+                    onClick={() => changeActive(team)}
+                  />
+                ))}
+              </ScTeamsList>
+            </ScGroup>
+            <ScGroup>
+              <ScGroupName>
+                <T9n t='group' /> 2
+              </ScGroupName>
+              <ScTeamsList>
+                {group2?.map((team: FavouriteTeams) => (
+                  <ItemInfo
+                    active={team.id === active}
+                    key={team.id}
+                    id={team.id}
+                    name={team.name_en}
+                    type={2}
+                    onClick={() => changeActive(team)}
+                  />
+                ))}
+              </ScTeamsList>
+            </ScGroup>
+          </ScGroups>
+          <ButtonsBlock>
+            <Button disabled={!active} onClick={onSaveFavouriteTeam}>
+              Ok
+            </Button>
+          </ButtonsBlock>
+        </ScBody>
+      </Wrapper>
+    </ScModalContainer>
+  )
+}

src/features/MatchPage/components/FavouriteTeam/styled.tsx

@@ -0,0 +1,140 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+
+import { ModalWindow } from 'features/Modal/styled'
+import { Modal as BaseModal } from 'features/Modal'
+import { customScrollbar, ButtonSolid } from 'features/Common'
+import { HeaderTitle } from 'features/PreferencesPopup/styled'
+
+export const ScModalContainer = styled(BaseModal)`
+  ${ModalWindow} {
+    width: 1446px;
+    height: 670px;
+    padding: 0;
+    background: #333333;
+    border-radius: 5px;
+    ${customScrollbar}
+    
+    ${isMobileDevice
+    ? css`
+         width: 95vw;
+         height: 95vh;
+         `
+    : ''};
+  }
+`
+
+export const ScBody = styled.div`
+  padding: 30px 0px;
+  display: flex;
+  flex-direction: column;
+
+  ${isMobileDevice
+    ? css`
+            padding: 20px 0;
+      `
+    : ''};
+`
+
+export const ScHeaderTitle = styled(HeaderTitle)`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 34px;
+
+  ${isMobileDevice
+    ? css`
+            font-size: 15px;
+            line-height: 18px;
+      `
+    : ''};
+`
+
+export const ScGroups = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin: 50px 70px;
+  width: 100%;
+
+  ${isMobileDevice
+    ? css`
+            margin: 0;
+            margin-top: 20px;
+            width: auto;  
+            overflow-y: auto;
+          `
+    : ''};
+`
+
+export const ScGroup = styled.div`
+  width: 100%;
+  ${isMobileDevice
+    ? css`
+            height: 75vh;
+
+            @media screen and (orientation: landscape){
+              height: 60vh;
+            }
+      `
+    : ''};
+`
+
+export const ScGroupName = styled.span`
+  display: block;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 28px;
+  margin-left: 10px;
+
+  ${isMobileDevice
+    ? css`
+            font-size: 15px;
+            line-height: 17px;
+      `
+    : ''};
+`
+
+export const ScTeamsList = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+
+    max-height: 389px;
+    margin-top: 20px;
+
+  ${isMobileDevice
+    ? css`
+            flex-wrap: unset;
+            max-height: unset;
+
+          `
+    : ''};
+`
+
+export const ButtonsBlock = styled.div`
+  display: flex;
+  justify-content: center;
+
+  ${isMobileDevice
+    ? css`
+            margin-top: 15px;
+      `
+    : ''};
+`
+
+export const Button = styled(ButtonSolid)`
+  width: 134px;
+  height: 50px;
+  background: #294FC4;
+  border-radius: 5px;
+
+  ${isMobileDevice
+    ? css`
+            width: 300px;
+            height: 40px;
+      `
+    : ''};
+`

src/features/MatchPage/index.tsx

@@ -21,6 +21,7 @@ import { SubscriptionGuard } from './components/SubscriptionGuard'
 import { LiveMatch } from './components/LiveMatch'
 import { Wrapper } from './styled'
 import { FinishedMatch } from './components/FinishedMatch'
+import { FavouriteTeamPopup } from './components/FavouriteTeam'
 
 const MatchPageComponent = () => {
   usePageLogger()
@@ -62,7 +63,6 @@ const MatchPageComponent = () => {
     const sportName = history.location.pathname.split('/')[1]
     history.push(`/${sportName}/tournaments/${profile.tournament.id}`)
   }
-
   return (
     <PageWrapper>
       <ProfileHeader color='#2B2A28' height={4.5} />
@@ -79,6 +79,7 @@ const MatchPageComponent = () => {
           </Wrapper>
         </SubscriptionGuard>
       </Main>
+      {profile?.tournament.id === 131 && <FavouriteTeamPopup />}
     </PageWrapper>
   )
 }

src/features/TournamentPage/index.tsx

@@ -12,6 +12,8 @@ import {
 
 import { useTournamentPage } from './hooks'
 
+import { FavouriteTeamPopup } from '../MatchPage/components/FavouriteTeam'
+
 const TournamentPage = () => {
   usePageLogger()
   const {
@@ -35,6 +37,7 @@ const TournamentPage = () => {
           <Matches fetch={fetchMatches} />
         </Content>
       </Main>
+      {tournamentId === 131 && <FavouriteTeamPopup />}
     </PageWrapper>
   )
 }

src/requests/getFavouriteTeam.tsx

@@ -0,0 +1,39 @@
+import { API_ROOT } from 'config'
+
+import { callApi } from 'helpers'
+
+export type FavouriteTeamType = {
+  country_id?: number,
+  season: number,
+  sport_id: number,
+  tournament_id: number,
+}
+
+export type FavouriteTeams = {
+  active?: boolean,
+  group?: string,
+  id: number,
+  name_en: string,
+  name_ru: string,
+}
+
+export type ResponseType = {
+  data: Array<FavouriteTeams>,
+  msg: string,
+  status: string,
+}
+
+export const getFavouriteTeam = async ({
+  season,
+  sport_id,
+  tournament_id,
+}: FavouriteTeamType): Promise<ResponseType> => {
+  const config = {
+    method: 'GET',
+  }
+
+  return callApi({
+    config,
+    url: `${API_ROOT}/v1/survey/teams/${sport_id}/${tournament_id}/${season}`,
+  })
+}

src/requests/saveFavouriteTeam.tsx

@@ -0,0 +1,25 @@
+import { API_ROOT } from 'config'
+import { callApi } from 'helpers'
+
+type SaveFavouriteTeamType = {
+  answer_id: number,
+  survey_id: number,
+}
+
+export const saveFavouriteTeam = async ({
+  answer_id,
+  survey_id,
+}: SaveFavouriteTeamType): Promise<{status: string}> => {
+  const config = {
+    body: {
+      answer_id,
+      survey_id,
+    },
+    method: 'POST',
+  }
+
+  return callApi({
+    config,
+    url: `${API_ROOT}/v1/survey/answer`,
+  })
+}