feat(ott-2838): add tooltips

src/features/MatchCard/CardFrontside/index.tsx

@@ -59,17 +59,20 @@ export const CardFrontside = ({
   const {
     access,
     countryId,
+    countryInfo,
     date,
     group,
     live,
     preview,
     previewURL,
+    sportInfo,
     sportType,
     team1,
     team2,
     time,
     tournament,
   } = match
+
   const isHomePage = useRouteMatch(PAGES.home)?.isExact
   const isMatchPage = location.pathname.includes(PAGES.match)
   const tournamentName = useName(tournament)
@@ -172,8 +175,10 @@ export const CardFrontside = ({
           </Teams>
           {!isMatchPage && (
             <TournamentSubtitle
-              sportType={sportType}
               countryId={countryId}
+              countryInfo={countryInfo}
+              sportInfo={sportInfo}
+              sportType={sportType}
               tournament={tournament.is_super_tournament ? group : tournament}
             />
           )}

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

@@ -48,8 +48,10 @@ export const MatchDescription = () => {
   if (!profile) return <Description />
 
   const {
+    country,
     country_id,
     date,
+    sport,
     team1,
     team2,
     tournament,
@@ -87,7 +89,9 @@ export const MatchDescription = () => {
           </StyledLink>
         </Title>
         <TournamentSubtitle
+          countryInfo={country}
           countryId={country_id}
+          sportInfo={sport}
           tournament={tournament}
           time={isMobileDevice ? changedTimeFormat : null}
           date={isMobileDevice ? localDate : null}

src/features/Matches/helpers/prepareMatches.tsx

@@ -11,6 +11,7 @@ import { getMatchAccess } from './getMatchClickAction'
 const prepareMatch = (match: Match) => {
   const {
     calc,
+    country,
     country_id,
     date: matchDate,
     group,
@@ -21,16 +22,19 @@ const prepareMatch = (match: Match) => {
     preview,
     previewURL,
     sport,
+    sport_info,
     storage,
     team1,
     team2,
     tournament,
   } = match
+
   const date = parseDate(matchDate)
   return {
     access: getMatchAccess(match),
     calc,
     countryId: country_id,
+    countryInfo: country,
     date,
     formattedDate: format(date, 'dd.MM.yy'),
     group,
@@ -40,6 +44,7 @@ const prepareMatch = (match: Match) => {
     live,
     preview,
     previewURL,
+    sportInfo: sport_info,
     sportType: sport,
     storage,
     team1,

src/features/TournamentList/components/CollapseTournament/index.tsx

@@ -2,7 +2,13 @@ import { ProfileTypes } from 'config'
 
 import { T9n } from 'features/T9n'
 import { Icon } from 'features/Icon'
+import { Name } from 'features/Name'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
+import {
+  CountryWrapper,
+  SportWrapper,
+  Tooltip,
+} from 'features/TournamentSubtitle/styled'
 
 import { SportIcon } from 'components/SportIcon/SportIcon'
 
@@ -47,6 +53,8 @@ export const CollapseTournament = ({
     setSelectTournament(tournament)
   }
 
+  const { countryInfo, sportInfo } = tournamentMatches[0]
+
   return (
     <CardWrapperOuter onClick={() => handleClick()}>
       <CardWrapper>
@@ -70,14 +78,28 @@ export const CollapseTournament = ({
         </PreviewWrapper>
         <Info>
           <FirstInfo>
-            <SportIcon
-              size='0.65rem'
-              fill='#ffffff'
-              sport={sportType}
-            />
-            <CountryFlag
-              src={`https://instatscout.com/images/flags/48/${countryId}.png`}
-            />
+            <SportWrapper>
+              <SportIcon
+                size='0.65rem'
+                fill='#ffffff'
+                sport={sportType}
+              />
+              {sportInfo && (
+                <Tooltip>
+                  <T9n t={sportInfo.lexic} />
+                </Tooltip>
+              )}
+            </SportWrapper>
+            <CountryWrapper>
+              <CountryFlag
+                src={`https://instatscout.com/images/flags/48/${countryId}.png`}
+              />
+              {countryInfo && (
+                <Tooltip>
+                  <Name nameObj={countryInfo} />
+                </Tooltip>
+              )}
+            </CountryWrapper>
             {isFavorite && (
               <FavoriteSign color='rgba(255, 255, 255, 0.5)'>
                 <Icon styles={{ display: 'flex' }} refIcon='Star' />

src/features/TournamentList/components/CollapseTournament/styled.tsx

@@ -162,14 +162,13 @@ export const SecondaryInfo = styled.div`
 export const CountryFlag = styled.img`
   width: 0.71rem;
   height: 0.75rem;
-  margin-left: 0.567rem;
   object-fit: contain;
   object-position: bottom;
+
   ${isMobileDevice
     ? css`
       width: 12px;
       height: 8px;
-      margin-left: 3.5px;
     `
     : ''};
 `

src/features/TournamentSubtitle/index.tsx

@@ -3,6 +3,7 @@ import { Fragment } from 'react'
 import { SportIcon } from 'components/SportIcon/SportIcon'
 
 import { Name } from 'features/Name'
+import { T9n } from 'features/T9n'
 import { useUserFavoritesStore } from 'features/UserFavorites/store'
 
 import { ProfileTypes, SportTypes } from 'config'
@@ -11,16 +12,19 @@ import { isMobileDevice } from 'config/userAgent'
 
 import { usePageParams } from 'hooks/usePageParams'
 
-import { TournamentType } from 'requests'
+import { TournamentType, SportInfo } from 'requests'
 
 import { isMatchPage } from 'helpers/isMatchPage'
 
 import {
   CountryFlag,
+  CountryWrapper,
   FavoriteSign,
-  Wrapper,
+  SportWrapper,
   StyledLink,
   SubtitleMain,
+  Tooltip,
+  Wrapper,
 } from './styled'
 import {
   Time,
@@ -30,7 +34,9 @@ import {
 
 type Props = {
   countryId: number,
+  countryInfo?: TournamentType,
   date?: string | null,
+  sportInfo?: SportInfo,
   sportType?: SportTypes,
   time?: string | null,
   tournament: TournamentType,
@@ -38,7 +44,9 @@ type Props = {
 
 export const TournamentSubtitle = ({
   countryId,
+  countryInfo,
   date,
+  sportInfo,
   sportType,
   time,
   tournament,
@@ -52,11 +60,25 @@ export const TournamentSubtitle = ({
       <SubtitleMain>
         {!isLffClient && (
           <Fragment>
-            <SportIcon
-              size={isMobileDevice ? 10 : '0.65rem'}
-              sport={sportType ?? sportTypeFromUrl}
-            />
-            <CountryFlag src={`https://instatscout.com/images/flags/48/${countryId}.png`} />
+            <SportWrapper>
+              <SportIcon
+                size={isMobileDevice ? 10 : '0.65rem'}
+                sport={sportType ?? sportTypeFromUrl}
+              />
+              {sportInfo && (
+                <Tooltip>
+                  <T9n t={sportInfo.lexic} />
+                </Tooltip>
+              )}
+            </SportWrapper>
+            <CountryWrapper>
+              <CountryFlag src={`https://instatscout.com/images/flags/48/${countryId}.png`} />
+              {countryInfo && (
+                <Tooltip>
+                  <Name nameObj={countryInfo} />
+                </Tooltip>
+              )}
+            </CountryWrapper>
           </Fragment>
         )}
         <StyledLink

src/features/TournamentSubtitle/styled.tsx

@@ -17,10 +17,49 @@ export const SubtitleMain = styled.div`
   align-items: center;
 `
 
+export const Tooltip = styled.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 100%;
+  padding: 0 6px;
+  line-height: 1.0625rem;
+  background-color: #fff;
+  border-radius: 6px;
+  color: #000;
+  font-weight: 400;
+  font-size: 0.6875rem;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-left: 5px;
+  z-index: 3;
+  display: none;
+`
+
+export const SportWrapper = styled.div`
+  display: flex;
+  z-index: 3;
+  position: relative;
+
+  &:hover {
+    ${Tooltip} {
+      display: block;
+    }
+  }
+`
+
+export const CountryWrapper = styled(SportWrapper)`
+  z-index: 2;
+  margin-left: 0.567rem;
+
+  ${isMobileDevice
+    ? css`margin-left: 3.5px;`
+    : ''}
+`
+
 export const CountryFlag = styled.img`
   width: 0.71rem;
   height: 0.75rem;
-  margin-left: 0.567rem;
   object-fit: contain;
   object-position: bottom;
 
@@ -28,9 +67,8 @@ export const CountryFlag = styled.img`
     ? css`
       width: 12px;
       height: 8px;
-      margin-left: 3.5px;
     `
-    : ''};
+    : ''}
 `
 
 export const NameSignWrapper = styled.div`
@@ -60,10 +98,10 @@ export const StyledLink = styled(ProfileLink)<StyledLinkProps>`
 
       ${isMobileDevice
       ? css`
-        font-size: 10px;
-      `
+          font-size: 10px;
+        `
       : ''};
-    ` : null)}  
+    ` : '')}
 `
 
 type FavoriteSignProps = {

src/requests/getMatchInfo.tsx

@@ -5,6 +5,8 @@ import {
 
 import { callApi } from 'helpers'
 
+import { TournamentType, SportInfo } from './getMatches/types'
+
 const proc = PROCEDURES.get_match_info
 
 export type Team = {
@@ -27,11 +29,13 @@ type VideoBounds = Array<VideoBound>
 export type MatchInfo = {
   access?: boolean,
   calc: boolean,
+  country: TournamentType,
   country_id: number,
   date: string,
   has_video: boolean,
   live: boolean,
   playbackUrl?: string,
+  sport: SportInfo,
   storage: boolean,
   sub: boolean,
   team1: Team,

src/requests/getMatches/types.tsx

@@ -14,11 +14,17 @@ type Team = {
   score?: number,
 }
 
+export type SportInfo = {
+  id: number,
+  lexic: number,
+}
+
 export type Match = {
   access: boolean,
   /** тип трансляции */
   c_type_broadcast: number,
   calc: boolean,
+  country: TournamentType,
   country_id: number,
   date: string,
   /** Информация о турнире, если турнир входит в супер турнир */
@@ -33,6 +39,7 @@ export type Match = {
   preview?: string,
   previewURL?: string,
   sport: SportTypes,
+  sport_info: SportInfo,
   /** наличие завершенного hls стрима */
   storage: boolean,
   sub: boolean,