Preprod (#495)

* feat(ott-1637): change in match popup and match events requests (#488)

* Ott 1118 user match preferences (#492)

* Ott 1118 part 1 (#469)

* fix(1118): wip

* feat(1118): tournaments block

* feat(1118): resolved comments

* feat(1118): show and search tournaments (#472)

feat(1118): show loader on fetch

* Ott 1118 part 3 (#478)

* feat(1118): added lexics

* feat(1118): wip, load and save prefs

* feat(1118): virtualization using list

* Ott 1118 part 4 (#487)

* fix(1118): reverted useRequest hook change

* fix(1118): px -> rem

* fix(1118): request matches after apply

* fix(1118): wip

* refactor(1118): removed old filters from HeaderFiltersStore (#491)

* fix(1118): disabled preferences (#493)

* fix(ott-1662): add new langs (#494)

Co-authored-by: PolyakovaM <55061222+PolyakovaM@users.noreply.github.com>
Co-authored-by: Serg <936x936@gmail.com>

package.json

@@ -28,6 +28,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.1",
+    "react-window": "^1.8.6",
     "screenfull": "^5.0.2",
     "styled-components": "^5.1.1"
   },
@@ -55,6 +56,7 @@
     "@types/react-responsive": "^8.0.2",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.6",
+    "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.0",
     "commitizen": "^4.1.2",
     "eslint": "^7.14.0",

src/config/languages.tsx

@@ -14,6 +14,41 @@ export const langsList = [
     locale: 'cs',
     title: 'Čeština',
   },
+  {
+    className: 'ua',
+    locale: 'uk',
+    title: 'Українська',
+  },
+  {
+    className: 'fr',
+    locale: 'fr',
+    title: 'Français',
+  },
+  {
+    className: 'de',
+    locale: 'de',
+    title: 'Deutsch',
+  },
+  {
+    className: 'es',
+    locale: 'es',
+    title: 'Español',
+  },
+  {
+    className: 'pt',
+    locale: 'pt',
+    title: 'Português',
+  },
+  {
+    className: 'it',
+    locale: 'it',
+    title: 'Italiano',
+  },
+  {
+    className: 'pl',
+    locale: 'pl',
+    title: 'Polska',
+  },
 ] as const
 
 export type Languages = typeof langsList[number]['locale']

src/config/lexics/indexLexics.tsx

@@ -59,6 +59,14 @@ const buyMatchPopupLexics = {
   success_subscription: 14097,
 }
 
+const preferencesPopupLexics = {
+  all: 15449,
+  apply: 15117,
+  my_preferences: 15087,
+  search: 15127,
+  sport_types: 15088,
+}
+
 export const indexLexics = {
   add_to_favorites: 14967,
   add_to_favorites_error: 12943,
@@ -107,6 +115,7 @@ export const indexLexics = {
   watch_from_last_pause: 13022,
   watch_now: 13020,
 
+  ...preferencesPopupLexics,
   ...proceduresLexics,
   ...matchPopupLexics,
   ...buyMatchPopupLexics,

src/config/procedures.tsx

@@ -16,6 +16,7 @@ export const PROCEDURES = {
   get_user_favorites: 'get_user_favorites',
   get_user_info: 'get_user_info',
   get_user_match_second: 'get_user_match_second',
+  get_user_preferences: 'get_user_preferences',
   get_user_subscriptions: 'get_user_subscriptions',
   landing_get_match_info: 'landing_get_match_info',
   lst_c_country: 'lst_c_country',
@@ -29,5 +30,6 @@ export const PROCEDURES = {
   save_user_info: 'save_user_info',
   save_user_match_second: 'save_user_match_second',
   save_user_page: 'save_user_page',
+  save_user_preferences: 'save_user_preferences',
   save_user_subscription: 'save_user_subscription',
 }

src/features/App/AuthenticatedApp.tsx

@@ -18,6 +18,7 @@ import { MatchSwitchesStore } from 'features/MatchSwitches'
 import { UserFavoritesStore } from 'features/UserFavorites/store'
 import { MatchPopup, MatchPopupStore } from 'features/MatchPopup'
 import { BuyMatchPopup, BuyMatchPopupStore } from 'features/BuyMatchPopup'
+import { PreferencesPopup, PreferencesPopupStore } from 'features/PreferencesPopup'
 import { CardsStore } from 'features/CardsStore'
 
 const HomePage = lazy(() => import('features/HomePage'))
@@ -36,35 +37,38 @@ export const AuthenticatedApp = () => {
         <MatchSwitchesStore>
           <UserFavoritesStore>
             <ExtendedSearchStore>
-              <MatchPopupStore>
+              <PreferencesPopupStore>
-                <BuyMatchPopupStore>
+                <MatchPopupStore>
-                  <MatchPopup />
+                  <BuyMatchPopupStore>
-                  <BuyMatchPopup />
+                    <MatchPopup />
+                    <BuyMatchPopup />
+                    <PreferencesPopup />
 
-                  {/* в Switch как прямой children можно рендерить только Route или Redirect */}
+                    {/* в Switch как прямой children можно рендерить только Route или Redirect */}
-                  <Switch>
+                    <Switch>
-                    <Route path={PAGES.useraccount}>
+                      <Route path={PAGES.useraccount}>
-                      <UserAccount />
+                        <UserAccount />
-                    </Route>
+                      </Route>
-                    <Route exact path={PAGES.home}>
+                      <Route exact path={PAGES.home}>
-                      <HomePage />
+                        <HomePage />
-                    </Route>
+                      </Route>
-                    <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
+                      <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
-                      <TournamentPage />
+                        <TournamentPage />
-                    </Route>
+                      </Route>
-                    <Route path={`/:sportName${PAGES.team}/:pageId`}>
+                      <Route path={`/:sportName${PAGES.team}/:pageId`}>
-                      <TeamPage />
+                        <TeamPage />
-                    </Route>
+                      </Route>
-                    <Route path={`/:sportName${PAGES.player}/:pageId`}>
+                      <Route path={`/:sportName${PAGES.player}/:pageId`}>
-                      <PlayerPage />
+                        <PlayerPage />
-                    </Route>
+                      </Route>
-                    <Route path={`/:sportName${PAGES.match}/:pageId`}>
+                      <Route path={`/:sportName${PAGES.match}/:pageId`}>
-                      <MatchPage />
+                        <MatchPage />
-                    </Route>
+                      </Route>
-                    <Redirect to={PAGES.home} />
+                      <Redirect to={PAGES.home} />
-                  </Switch>
+                    </Switch>
-                </BuyMatchPopupStore>
+                  </BuyMatchPopupStore>
-              </MatchPopupStore>
+                </MatchPopupStore>
+              </PreferencesPopupStore>
             </ExtendedSearchStore>
           </UserFavoritesStore>
         </MatchSwitchesStore>

src/features/ArrowLoader/index.tsx

@@ -4,10 +4,12 @@ import { Wrapper, Arrows } from './styled'
 export const ArrowLoader = ({
   backgroundColor,
   backgroundSize,
+  className,
   disabled,
   width,
 }: ArrowLoaderProps) => (
   <Wrapper
+    className={className}
     width={width}
     backgroundColor={backgroundColor}
     disabled={disabled}

src/features/ArrowLoader/types.tsx

@@ -1,6 +1,7 @@
 export type ArrowLoaderProps = {
   backgroundColor?: string,
   backgroundSize?: string,
+  className?: string,
   disabled?: boolean,
   width?:string,
 }

src/features/Common/Checkbox/Icon.tsx

@@ -1,22 +1,14 @@
 import styled, { css } from 'styled-components/macro'
 
-import { devices } from 'config'
-
 type SvgColorStylesProps = {
   checked?: boolean,
 }
 
 export const svgColorStyles = css<SvgColorStylesProps>`
   fill: ${({ checked }) => (checked ? '#ffffff' : '#B8C1CC')};
-
-  @media ${devices.mobile} {
-    fill: ${({ checked }) => (checked ? '#294FC4' : '#B8C1CC')}
-  }
 `
 
 export const CheckboxSvg = styled.svg`
-  min-width: 24px;
-  min-height: 24px;
   margin-right: 22px;
   align-self: flex-start;
 

src/features/Common/Checkbox/index.tsx

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react'
+import type { ReactNode, InputHTMLAttributes } from 'react'
 
 import type { LexicsId } from 'features/LexicsStore/types'
 import { T9n } from 'features/T9n'
@@ -18,7 +18,7 @@ type Props = Pick<InputHTMLAttributes<HTMLInputElement>, (
   | 'onClick'
   | 'onChange'
 )> & {
-  label?: string,
+  label?: ReactNode,
   labelLexic?: LexicsId,
 }
 

src/features/HeaderFilters/store/helpers/isValidMatchStatus/__tests__/index.tsx

@@ -1,15 +0,0 @@
-import { MatchStatuses } from 'features/HeaderFilters/store/hooks'
-
-import { isValidMatchStatus } from '..'
-
-it('returns true for valid match statuses', () => {
-  expect(isValidMatchStatus(MatchStatuses.Finished)).toBe(true)
-  expect(isValidMatchStatus(MatchStatuses.Live)).toBe(true)
-  expect(isValidMatchStatus(MatchStatuses.Soon)).toBe(true)
-})
-
-it('returns false for invalid match statuses', () => {
-  expect(isValidMatchStatus(-1)).toBe(false)
-  expect(isValidMatchStatus(0)).toBe(false)
-  expect(isValidMatchStatus(4)).toBe(false)
-})

src/features/HeaderFilters/store/helpers/isValidMatchStatus/index.tsx

@@ -1,9 +0,0 @@
-import isNumber from 'lodash/isNumber'
-import includes from 'lodash/includes'
-import values from 'lodash/values'
-
-import { MatchStatuses } from '../../hooks'
-
-export const isValidMatchStatus = (value: number | null) => (
-  isNumber(value) && includes(values(MatchStatuses), value)
-)

src/features/HeaderFilters/store/helpers/isValidSportType/__tests__/index.tsx

@@ -1,15 +0,0 @@
-import { SportTypes } from 'config'
-
-import { isValidSportType } from '..'
-
-it('returns true for valid sport types', () => {
-  expect(isValidSportType(SportTypes.BASKETBALL)).toBe(true)
-  expect(isValidSportType(SportTypes.FOOTBALL)).toBe(true)
-  expect(isValidSportType(SportTypes.HOCKEY)).toBe(true)
-})
-
-it('returns false for invalid sport types', () => {
-  expect(isValidSportType(-1)).toBe(false)
-  expect(isValidSportType(0)).toBe(false)
-  expect(isValidSportType(4)).toBe(false)
-})

src/features/HeaderFilters/store/helpers/isValidSportType/index.tsx

@@ -1,9 +0,0 @@
-import isNumber from 'lodash/isNumber'
-import includes from 'lodash/includes'
-import values from 'lodash/values'
-
-import { SportTypes } from 'config'
-
-export const isValidSportType = (value: number | null) => (
-  isNumber(value) && includes(values(SportTypes), value)
-)

src/features/HeaderFilters/store/hooks/index.tsx

@@ -1,28 +1,17 @@
 import {
   useMemo,
-  useState,
   useEffect,
   useCallback,
 } from 'react'
 import { useLocation } from 'react-router-dom'
 import { isToday } from 'date-fns'
 
-import { SportTypes } from 'config'
-
 import { useQueryParamStore } from 'hooks'
 
 import { filterKeys } from '../config'
 import { getMoscowDate } from '../helpers/getMoscowDate'
 import { serializeDate } from '../helpers/dateSerializers'
 import { isValidDate } from '../helpers/isValidDate'
-import { isValidSportType } from '../helpers/isValidSportType'
-import { isValidMatchStatus } from '../helpers/isValidMatchStatus'
-
-export enum MatchStatuses {
-  Live = 2,
-  Finished = 3,
-  Soon = 1,
-}
 
 export const useFilters = () => {
   const { search } = useLocation()
@@ -36,88 +25,29 @@ export const useFilters = () => {
 
   const isTodaySelected = isToday(selectedDate)
 
-  const [
-    selectedMatchStatus,
-    setMatchStatus,
-  ] = useQueryParamStore<MatchStatuses | null>({
-    clearOnUnmount: true,
-    defaultValue: null,
-    key: filterKeys.MATCH_STATUS,
-    validator: isValidMatchStatus,
-  })
-
-  const setSelectedMatchStatus = useCallback((status: MatchStatuses) => {
-    if (status === selectedMatchStatus) {
-      setMatchStatus(null)
-    } else {
-      setMatchStatus(status)
-    }
-  }, [
-    selectedMatchStatus,
-    setMatchStatus,
-  ])
-
-  const [
-    selectedSportTypeId,
-    setSelectedSportTypeId,
-  ] = useQueryParamStore<SportTypes | null>({
-    clearOnUnmount: true,
-    defaultValue: null,
-    key: filterKeys.SPORT_TYPE,
-    validator: isValidSportType,
-  })
-
-  const [
-    selectedTournamentId,
-    setSelectedTournamentId,
-  ] = useState<number | null>(null)
-
   const resetFilters = useCallback(() => {
     setSelectedDate(new Date())
-    setMatchStatus(null)
+  }, [setSelectedDate])
-    setSelectedSportTypeId(null)
-    setSelectedTournamentId(null)
-  }, [
-    setSelectedDate,
-    setMatchStatus,
-    setSelectedSportTypeId,
-  ])
 
   useEffect(() => {
     if (!search) {
       resetFilters()
     }
-    if (!isTodaySelected) {
-      setMatchStatus(null)
-    }
   }, [
     isTodaySelected,
     resetFilters,
     search,
-    setMatchStatus,
   ])
 
   const store = useMemo(() => ({
     isTodaySelected,
     selectedDate,
     selectedDateFormatted: getMoscowDate(selectedDate),
-    selectedMatchStatus,
-    selectedSportTypeId,
-    selectedTournamentId,
     setSelectedDate,
-    setSelectedMatchStatus,
-    setSelectedSportTypeId,
-    setSelectedTournamentId,
   }), [
     isTodaySelected,
     selectedDate,
-    selectedMatchStatus,
-    selectedSportTypeId,
-    selectedTournamentId,
     setSelectedDate,
-    setSelectedMatchStatus,
-    setSelectedSportTypeId,
-    setSelectedTournamentId,
   ])
 
   return store

src/features/HomePage/hooks.tsx

@@ -1,82 +1,19 @@
 import { useCallback } from 'react'
 
-import filter from 'lodash/filter'
+import { getHomeMatches } from 'requests'
-import isPast from 'date-fns/isPast'
-import differenceInMinutes from 'date-fns/differenceInMinutes'
 
-import {
+import { useHeaderFiltersStore } from 'features/HeaderFilters'
-  getHomeMatches,
-  Matches,
-  MatchesBySection,
-} from 'requests'
-
-import { MatchStatuses, useHeaderFiltersStore } from 'features/HeaderFilters'
-import { useMatchSwitchesStore } from 'features/MatchSwitches'
-
-const matchesFilteredByStatus = (matches : Matches, status : MatchStatuses | null) => {
-  if (!status) return matches
-  const filteredMatches = filter(matches, (match) => {
-    const matchDate = new Date(match.date)
-    const matchIsStarted = isPast(matchDate)
-    const difTime = differenceInMinutes(new Date(), matchDate)
-
-    switch (status) {
-      case MatchStatuses.Soon:
-        return !matchIsStarted && (difTime > -60)
-      case MatchStatuses.Live:
-        return match.live && matchIsStarted
-      case MatchStatuses.Finished:
-        return matchIsStarted && (match.storage || match.has_video)
-      default: return false
-    }
-  })
-  return filteredMatches
-}
-
-const setMatches = (
-  matches : MatchesBySection,
-  status : MatchStatuses | null,
-): MatchesBySection => {
-  if (matches.isVideoSections) {
-    return {
-      ...matches,
-      broadcast: matchesFilteredByStatus(matches.broadcast, status),
-      features: matchesFilteredByStatus(matches.features, status),
-      highlights: matchesFilteredByStatus(matches.highlights, status),
-    }
-  } return {
-    ...matches,
-    broadcast: matchesFilteredByStatus(matches.broadcast, status),
-  }
-}
 
 export const useHomePage = () => {
-  const {
+  const { selectedDateFormatted } = useHeaderFiltersStore()
-    selectedDateFormatted,
-    selectedMatchStatus,
-    selectedSportTypeId,
-    selectedTournamentId,
-  } = useHeaderFiltersStore()
-  const { availableMatchesOnly } = useMatchSwitchesStore()
 
   const fetchMatches = useCallback(
     (limit: number, offset: number) => getHomeMatches({
-      availableMatchesOnly,
       date: selectedDateFormatted,
       limit,
-      matchStatus: null,
       offset,
-      sportType: selectedSportTypeId,
+    }),
-      tournamentId: selectedTournamentId,
+    [selectedDateFormatted],
-    })
-      .then((matches) => setMatches(matches, selectedMatchStatus)),
-    [
-      selectedDateFormatted,
-      selectedMatchStatus,
-      selectedSportTypeId,
-      selectedTournamentId,
-      availableMatchesOnly,
-    ],
   )
   return { fetchMatches }
 }

src/features/ItemsList/styled.tsx

@@ -87,6 +87,7 @@ export const Flag = styled.img`
 `
 
 export const TeamOrCountry = styled(NameBase)`
+  font-weight: normal;
   font-size: 0.49rem;
   line-height: 0.75rem;
   color: rgba(255, 255, 255, 0.7);

src/features/LexicsStore/helpers/isSupportedLang/__tests__/index.tsx

@@ -3,11 +3,18 @@ import { isSupportedLang } from '..'
 it('returns true for supported languages', () => {
   expect(isSupportedLang('ru')).toBe(true)
   expect(isSupportedLang('en')).toBe(true)
+  expect(isSupportedLang('cs')).toBe(true)
+  expect(isSupportedLang('uk')).toBe(true)
+  expect(isSupportedLang('fr')).toBe(true)
+  expect(isSupportedLang('de')).toBe(true)
+  expect(isSupportedLang('es')).toBe(true)
+  expect(isSupportedLang('pt')).toBe(true)
+  expect(isSupportedLang('it')).toBe(true)
+  expect(isSupportedLang('pl')).toBe(true)
 })
 
 it('returns false for not supported languages', () => {
-  expect(isSupportedLang('es')).toBe(false)
   expect(isSupportedLang('ja')).toBe(false)
-  expect(isSupportedLang('fr')).toBe(false)
+  expect(isSupportedLang('ro')).toBe(false)
-  expect(isSupportedLang('de')).toBe(false)
+  expect(isSupportedLang('tr')).toBe(false)
 })

src/features/MatchCard/CardFrontside/index.tsx

@@ -38,7 +38,6 @@ import {
   NameSignWrapper,
   HoverFrame,
 } from '../styled'
-import { MatchStatuses, useHeaderFiltersStore } from '../../HeaderFilters'
 
 type Props = {
   match: Match,
@@ -70,12 +69,10 @@ export const CardFrontside = ({
   const tournamentName = useName(tournament)
   const { isInFavorites } = useUserFavoritesStore()
   const { isScoreHidden } = useMatchSwitchesStore()
-  const { selectedMatchStatus } = useHeaderFiltersStore()
   const isInFuture = getUnixTime(date) > getUnixTime(new Date())
   const showScore = !(
     !calc
     || isInFuture
-    || selectedMatchStatus === MatchStatuses.Soon
     || isScoreHidden
   ) || (live && !isScoreHidden)
   const tournamentInFavorites = isInFavorites(ProfileTypes.TOURNAMENTS, tournament.id)

src/features/MatchSwitches/hooks.tsx

@@ -3,7 +3,6 @@ import isBoolean from 'lodash/isBoolean'
 import { useLocalStore } from 'hooks'
 
 const SCORE_KEY = 'score_hidden'
-const MATCH_AVAILABILITY_KEY = 'available_matches_only'
 
 export const useMatchSwitches = () => {
   const [isScoreHidden, setScoreHidden] = useLocalStore({
@@ -13,17 +12,8 @@ export const useMatchSwitches = () => {
   })
   const toggleScore = () => setScoreHidden(!isScoreHidden)
 
-  const [availableMatchesOnly, setAvailableMatchesOnly] = useLocalStore({
-    defaultValue: false,
-    key: MATCH_AVAILABILITY_KEY,
-    validator: isBoolean,
-  })
-  const toggleMatchAvailablity = () => setAvailableMatchesOnly(!availableMatchesOnly)
-
   return {
-    availableMatchesOnly,
     isScoreHidden,
-    toggleMatchAvailablity,
     toggleScore,
   }
 }

src/features/Matches/hooks.tsx

@@ -10,6 +10,8 @@ import type { MatchesBySection } from 'requests'
 
 import { useRequest } from 'hooks'
 
+import { usePreferencesStore } from 'features/PreferencesPopup'
+
 import { prepareMatches } from './helpers/prepareMatches'
 
 export type Match = ReturnType<typeof prepareMatches>[number]
@@ -29,6 +31,7 @@ const initialState = {
 }
 
 export const useMatches = ({ fetch }: Props) => {
+  const { userPreferences } = usePreferencesStore()
   const {
     isFetching,
     request: requestMatches,
@@ -65,7 +68,7 @@ export const useMatches = ({ fetch }: Props) => {
   useEffect(() => {
     fetchMatches(0).then(setMatches)
     pageRef.current = 1
-  }, [fetchMatches])
+  }, [fetchMatches, userPreferences])
 
   const preparedMatches = useMemo(() => ({
     broadcast: prepareMatches(matches.broadcast),

src/features/Menu/index.tsx

@@ -3,6 +3,8 @@ import { Link, useRouteMatch } from 'react-router-dom'
 import { PAGES } from 'config'
 import { isMobileDevice } from 'config/userAgent'
 
+import { usePreferencesStore } from 'features/PreferencesPopup'
+
 import { FavoritesMobilePopup } from '../FavoritesMobilePopup'
 import {
   MenuList,
@@ -11,6 +13,7 @@ import {
 } from './styled'
 
 export const Menu = () => {
+  const { openPopup } = usePreferencesStore()
   const isHomePage = useRouteMatch(PAGES.home)?.isExact
 
   return (
@@ -18,7 +21,7 @@ export const Menu = () => {
       {isMobileDevice && <FavoritesMobilePopup />}
       {
         isHomePage && (
-          <MenuItem>
+          <MenuItem onClick={openPopup}>
             <Icon src='header-settings' size='1.4rem' />
           </MenuItem>
         )

src/features/PlayerPage/hooks.tsx

@@ -9,13 +9,10 @@ import { useSportNameParam, usePageId } from 'hooks'
 import type { PlayerProfile } from 'requests/getPlayerInfo'
 import { getPlayerInfo, getPlayerMatches } from 'requests'
 
-import { useMatchSwitchesStore } from 'features/MatchSwitches'
-
 export const usePlayerPage = () => {
   const [playerProfile, setPlayerProfile] = useState<PlayerProfile>(null)
   const { sportType } = useSportNameParam()
   const playerId = usePageId()
-  const { availableMatchesOnly } = useMatchSwitchesStore()
 
   const {
     firstname_eng = '',
@@ -39,7 +36,6 @@ export const usePlayerPage = () => {
 
   const fetchMatches = useCallback(
     (limit: number, offset: number) => getPlayerMatches({
-      availableMatchesOnly,
       limit,
       offset,
       playerId,
@@ -48,7 +44,6 @@ export const usePlayerPage = () => {
     [
       playerId,
       sportType,
-      availableMatchesOnly,
     ],
   )
 

src/features/PreferencesPopup/components/Search/index.tsx

@@ -0,0 +1,74 @@
+import styled from 'styled-components/macro'
+
+import { ClearButton } from 'features/Search/styled'
+import { usePreferencesStore } from 'features/PreferencesPopup/store'
+import { useLexicsStore } from 'features/LexicsStore'
+
+const Wrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 36px;
+  margin-right: 5px;
+  background: #292929;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+
+  ::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    margin-left: 7px;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    background-image: url(/images/search.svg);
+    background-size: 14px;
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+  }
+`
+
+const Input = styled.input`
+  border: none;
+  background: transparent;
+  outline: none;
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin-bottom: 2px;
+  padding-left: 34px;
+  color: ${({ theme }) => theme.colors.text100};
+  caret-color: rgba(255, 255, 255, 0.5);
+  font-weight: normal;
+  font-size: 0.66rem;
+  line-height: 1.04rem;
+  letter-spacing: -0.4px;
+
+  ::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+  }
+`
+
+export const Search = () => {
+  const { translate } = useLexicsStore()
+  const {
+    clearQuery,
+    onQueryChange,
+    query,
+  } = usePreferencesStore()
+  return (
+    <Wrapper>
+      <Input
+        placeholder={translate('search')}
+        value={query}
+        onChange={onQueryChange}
+      />
+      {query && <ClearButton onClick={clearQuery} />}
+    </Wrapper>
+  )
+}

src/features/PreferencesPopup/components/SportList/index.tsx

@@ -0,0 +1,39 @@
+import map from 'lodash/map'
+import includes from 'lodash/includes'
+
+import { usePreferencesStore } from 'features/PreferencesPopup/store'
+import { T9n } from 'features/T9n'
+
+import { BlockTitle } from '../../styled'
+import {
+  Wrapper,
+  List,
+  Item,
+  Checkbox,
+} from './styled'
+
+export const SportsList = () => {
+  const {
+    onSportSelect,
+    selectedSports,
+    sports,
+  } = usePreferencesStore()
+  return (
+    <Wrapper>
+      <BlockTitle>
+        <T9n t='sport_types' />
+      </BlockTitle>
+      <List>
+        {map(sports, (sport) => (
+          <Item key={sport.id}>
+            <Checkbox
+              checked={includes(selectedSports, sport.id)}
+              labelLexic={sport.lexic}
+              onChange={() => onSportSelect(sport.id)}
+            />
+          </Item>
+        ))}
+      </List>
+    </Wrapper>
+  )
+}

src/features/PreferencesPopup/components/SportList/styled.tsx

@@ -0,0 +1,39 @@
+import styled from 'styled-components/macro'
+
+import { devices } from 'config'
+
+import { Checkbox as BaseCheckbox } from 'features/Common/Checkbox'
+import { Label } from 'features/Common/Checkbox/styled'
+import { CheckboxSvg } from 'features/Common/Checkbox/Icon'
+
+export const Wrapper = styled.div`
+  min-width: 264px;
+  display: flex;
+  flex-direction: column;
+
+  @media ${devices.tablet} {
+    min-width: 13rem;
+  }
+`
+
+export const List = styled.ul`
+  width: 100%;
+  margin-top: 6px;
+`
+
+export const Item = styled.li`
+  width: 100%;
+  display: flex;
+  padding: 6px 0;
+`
+
+export const Checkbox = styled(BaseCheckbox)`
+  ${Label} {
+    font-weight: normal;
+    font-size: 0.66rem;
+    line-height: 1rem;
+  }
+  ${CheckboxSvg} {
+    margin-right: 12px;
+  }
+`

src/features/PreferencesPopup/components/TournamentInfo/index.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components/macro'
+
+import type { Tournament } from 'requests/getSportTournaments'
+
+import {
+  ItemInfo,
+  Name,
+  Flag,
+  TeamOrCountry,
+} from 'features/ItemsList/styled'
+import { SportIcon } from 'features/SportIcon'
+
+const Wrapper = styled.div`
+  width: 100%;
+  max-width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`
+
+type Props = {
+  tournament: Tournament,
+}
+
+export const TournamentInfo = ({ tournament }: Props) => (
+  <Wrapper>
+    <Name nameObj={tournament} />
+    <ItemInfo>
+      <SportIcon sport={tournament.sport} />
+      <Flag src={`https://instatscout.com/images/flags/48/${tournament.country.id}.png`} />
+      <TeamOrCountry nameObj={tournament.country} />
+    </ItemInfo>
+  </Wrapper>
+)

src/features/PreferencesPopup/components/TournamentListItem/index.tsx

@@ -0,0 +1,59 @@
+import type { CSSProperties } from 'react'
+import type { ListChildComponentProps } from 'react-window'
+import styled from 'styled-components/macro'
+
+import floor from 'lodash/floor'
+
+import type { Tournament, Tournaments } from 'requests'
+
+import { TournamentInfo } from '../TournamentInfo'
+import { Checkbox } from '../../styled'
+
+const Item = styled.li`
+  width: 48.5%;
+  padding: 6.5px 0;
+`
+
+const getTwoColumnListStyles = (index: number) => {
+  const isEven = index % 2 === 0
+  const rowIndex = floor(index / 2)
+  const style: CSSProperties = {
+    position: 'absolute',
+    top: 48 * rowIndex,
+  }
+  if (isEven) {
+    style.left = 0
+  } else {
+    style.right = 0
+  }
+  return style
+}
+
+export type ItemData = {
+  isTournamentSelected: (tournament: Tournament) => boolean,
+  onTournamentSelect: (tournament: Tournament) => void,
+  tournaments: Tournaments,
+}
+
+export const TournamentListItem = ({
+  data,
+  index,
+}: ListChildComponentProps<ItemData>) => {
+  const {
+    isTournamentSelected,
+    onTournamentSelect,
+    tournaments,
+  } = data
+  const tournament = tournaments[index]
+  if (!tournament) return null
+
+  return (
+    <Item style={getTwoColumnListStyles(index)}>
+      <Checkbox
+        checked={isTournamentSelected(tournament)}
+        label={<TournamentInfo tournament={tournament} />}
+        onChange={() => onTournamentSelect(tournament)}
+      />
+    </Item>
+  )
+}

src/features/PreferencesPopup/components/TournamentsBlock/index.tsx

@@ -0,0 +1,53 @@
+import styled from 'styled-components/macro'
+
+import { T9n } from 'features/T9n'
+
+import { usePreferencesStore } from '../../store'
+import { Search } from '../Search'
+import { TournamentsList } from '../TournamentsList'
+
+import { BlockTitle, Checkbox } from '../../styled'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-left: 14px;
+  flex-grow: 1;
+`
+
+const CheckboxWrapper = styled.div`
+  margin: 20px 0 22px 2px;
+  margin-top: 20px;
+  margin-bottom: 22px;
+`
+
+export const TournamentsBlock = () => {
+  const {
+    allTournamentsSelected,
+    isTournamentSelected,
+    onSelectAllTournaments,
+    onTournamentSelect,
+    tournaments,
+  } = usePreferencesStore()
+  return (
+    <Wrapper>
+      <BlockTitle>
+        <T9n t='tournament' />
+      </BlockTitle>
+      <CheckboxWrapper>
+        <Checkbox
+          labelLexic='all'
+          checked={allTournamentsSelected}
+          onChange={onSelectAllTournaments}
+        />
+      </CheckboxWrapper>
+      <Search />
+      <TournamentsList
+        isTournamentSelected={isTournamentSelected}
+        onTournamentSelect={onTournamentSelect}
+        tournaments={tournaments}
+      />
+    </Wrapper>
+  )
+}

src/features/PreferencesPopup/components/TournamentsList/index.tsx

@@ -0,0 +1,68 @@
+import { memo } from 'react'
+import type { ListItemKeySelector } from 'react-window'
+import { FixedSizeList } from 'react-window'
+
+import styled from 'styled-components/macro'
+
+import size from 'lodash/size'
+
+import { customScrollbar } from 'features/Common'
+
+import type { ItemData } from '../TournamentListItem'
+import { TournamentListItem } from '../TournamentListItem'
+
+const getItemKey: ListItemKeySelector = (index, data) => {
+  const tournament = data[index]
+
+  return tournament
+    ? `${tournament.sport}_${tournament.id}`
+    : index
+}
+
+type Props = ItemData & {
+  className?: string,
+}
+
+const List = memo((props: Props) => {
+  const { className, tournaments } = props
+  return (
+    <FixedSizeList
+      className={className}
+      innerElementType='ul'
+      width='100%'
+      height={432}
+      itemSize={24}
+      itemCount={size(tournaments)}
+      itemKey={getItemKey}
+      itemData={props}
+    >
+      {TournamentListItem}
+    </FixedSizeList>
+  )
+})
+
+export const TournamentsList = styled(List)`
+  width: 100%;
+  height: 432px;
+  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+  overflow-y: auto;
+
+  @media (max-width: 1370px) {
+    height: 20rem !important;
+  }
+
+  ${customScrollbar}
+
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+  }
+`

src/features/PreferencesPopup/index.tsx

@@ -0,0 +1,61 @@
+import {
+  HeaderActions,
+  CloseButton,
+} from 'features/PopupComponents'
+import { T9n } from 'features/T9n'
+
+import { SportsList } from './components/SportList'
+import { TournamentsBlock } from './components/TournamentsBlock'
+import { usePreferencesStore } from './store'
+
+import {
+  Modal,
+  Wrapper,
+  Header,
+  HeaderTitle,
+  Body,
+  Footer,
+  ApplyButton,
+  Loader,
+} from './styled'
+
+export * from './store'
+
+export const PreferencesPopup = () => {
+  const {
+    closePopup,
+    isApplyButtonDisabled,
+    isFetching,
+    isOpen,
+    onApplyClick,
+  } = usePreferencesStore()
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      close={closePopup}
+      withCloseButton={false}
+    >
+      {isFetching && <Loader />}
+      <Wrapper isFetching={isFetching}>
+        <Header>
+          <HeaderTitle>
+            <T9n t='my_preferences' />
+          </HeaderTitle>
+          <HeaderActions position='right'>
+            <CloseButton onClick={closePopup} />
+          </HeaderActions>
+        </Header>
+        <Body>
+          <SportsList />
+          <TournamentsBlock />
+        </Body>
+        <Footer>
+          <ApplyButton onClick={onApplyClick} disabled={isApplyButtonDisabled}>
+            <T9n t='apply' />
+          </ApplyButton>
+        </Footer>
+      </Wrapper>
+    </Modal>
+  )
+}

src/features/PreferencesPopup/store/helpers.tsx

@@ -0,0 +1,50 @@
+import includes from 'lodash/includes'
+import toLower from 'lodash/toLower'
+import reduce from 'lodash/reduce'
+import filter from 'lodash/filter'
+
+import type { SportTypes } from 'config'
+import type { TournamentsBySports, Tournaments } from 'requests/getSportTournaments'
+
+const getFlatTournaments = (
+  tournamentsBySports: TournamentsBySports,
+  selectedSports: Array<SportTypes>,
+) => (
+  reduce(
+    selectedSports,
+    (acc, sport) => {
+      const sportTournaments = tournamentsBySports[sport]
+      if (sportTournaments) {
+        return [...acc, ...sportTournaments]
+      }
+      return acc
+    },
+    [] as Tournaments,
+  )
+)
+
+type NameKey = 'name_eng' | 'name_rus'
+
+type SearchProps = {
+  query: string,
+  selectedSports: Array<SportTypes>,
+  suffix: string,
+  tournamentsBySports: TournamentsBySports,
+}
+
+export const search = async ({
+  query,
+  selectedSports,
+  suffix,
+  tournamentsBySports,
+}: SearchProps) => {
+  const tournaments = getFlatTournaments(tournamentsBySports, selectedSports)
+  const nameKey = `name_${suffix}` as NameKey
+  return filter(
+    tournaments,
+    (tournament) => includes(
+      toLower(tournament[nameKey]),
+      toLower(query),
+    ),
+  )
+}

src/features/PreferencesPopup/store/hooks/index.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useCallback } from 'react'
+
+import isBoolean from 'lodash/isBoolean'
+import uniq from 'lodash/uniq'
+import map from 'lodash/map'
+
+import { useLocalStore, useToggle } from 'hooks'
+
+import { useTournamentsBySports } from './useTournamentsBySports'
+import { usePreferencesLoader } from './usePreferencesLoader'
+import { useSelectedTournaments } from './useTournaments'
+import { useSports } from './useSports'
+import { useSearch } from './useSearch'
+
+export const usePreferences = () => {
+  const [firstLoad, setFirstLoad] = useLocalStore({
+    // defaultValue: true,
+    defaultValue: false,
+    key: 'preferences_first_load',
+    validator: isBoolean,
+  })
+  const {
+    close,
+    isOpen,
+    // open,
+  } = useToggle()
+
+  const {
+    // fetchInitialSports,
+    onSportSelect,
+    selectedSports,
+    setInitialSelectedSports,
+    sports,
+  } = useSports()
+
+  const {
+    isFetching: isFetchingTournaments,
+    tournamentsBySports,
+  } = useTournamentsBySports(selectedSports)
+
+  const {
+    clearQuery,
+    onQueryChange,
+    query,
+    tournaments,
+  } = useSearch(tournamentsBySports, selectedSports)
+
+  const {
+    allTournamentsSelected,
+    isTournamentSelected,
+    onSelectAllTournaments,
+    onTournamentSelect,
+    selectedTournaments,
+    setInitialSelectedTournaments,
+  } = useSelectedTournaments(selectedSports, tournaments)
+
+  const {
+    // fetchInitialPreferences,
+    isApplyButtonDisabled,
+    isFetching: isFetchingPrefernces,
+    isSaving,
+    onApplyClick,
+    userPreferences,
+  } = usePreferencesLoader(selectedTournaments, close)
+
+  const reset = useCallback(() => {
+    if (!userPreferences) return
+
+    const initialSelectedSports = uniq(map(
+      userPreferences,
+      ({ sport }) => sport,
+    ))
+    setInitialSelectedTournaments(userPreferences)
+    setInitialSelectedSports(initialSelectedSports)
+  }, [
+    userPreferences,
+    setInitialSelectedTournaments,
+    setInitialSelectedSports,
+  ])
+
+  const openPopup = useCallback(() => {
+    // fetchInitialPreferences()
+    // fetchInitialSports()
+    // open()
+  }, [/* fetchInitialPreferences, fetchInitialSports, open */])
+
+  const closePopup = () => {
+    reset()
+    close()
+  }
+
+  useEffect(reset, [reset])
+  useEffect(() => {
+    if (firstLoad) {
+      openPopup()
+      setFirstLoad(false)
+    }
+  }, [
+    firstLoad,
+    openPopup,
+    setFirstLoad,
+  ])
+
+  return {
+    allTournamentsSelected,
+    clearQuery,
+    closePopup,
+    isApplyButtonDisabled,
+    isFetching: isFetchingPrefernces || isSaving || isFetchingTournaments,
+    isOpen,
+    isTournamentSelected,
+    onApplyClick,
+    onQueryChange,
+    onSelectAllTournaments,
+    onSportSelect,
+    onTournamentSelect,
+    openPopup,
+    query,
+    selectedSports,
+    sports,
+    tournaments,
+    userPreferences,
+  }
+}

src/features/PreferencesPopup/store/hooks/usePreferencesLoader.tsx

@@ -0,0 +1,68 @@
+import {
+  useCallback,
+  useState,
+  useMemo,
+} from 'react'
+
+import isEmpty from 'lodash/isEmpty'
+import isNull from 'lodash/isNull'
+import size from 'lodash/size'
+import xorWith from 'lodash/xorWith'
+import isEqual from 'lodash/isEqual'
+
+import type{ UserPreferences } from 'requests/getUserPreferences'
+import { getUserPreferences as getUserPreferencesRequest } from 'requests/getUserPreferences'
+import { saveUserPreferences as saveUserPreferencesRequest } from 'requests/saveUserPreferences'
+
+import { useRequest } from 'hooks'
+
+export const usePreferencesLoader = (
+  selectedTournaments: UserPreferences,
+  onApply: () => void,
+) => {
+  const [userPreferences, setUserPreferences] = useState<UserPreferences | null>(null)
+
+  const {
+    isFetching,
+    request: fetchUserPreferences,
+  } = useRequest(getUserPreferencesRequest)
+  const {
+    isFetching: isSaving,
+    request: saveUserPreferences,
+  } = useRequest(saveUserPreferencesRequest)
+
+  const fetchInitialPreferences = useCallback(() => {
+    if (isNull(userPreferences)) {
+      fetchUserPreferences().then(setUserPreferences)
+    }
+  }, [fetchUserPreferences, userPreferences])
+
+  const onApplyClick = () => {
+    const data = isEmpty(selectedTournaments) ? null : selectedTournaments
+    saveUserPreferences(data)
+      .then(fetchUserPreferences)
+      .then(setUserPreferences)
+      .then(onApply)
+  }
+
+  const isApplyButtonDisabled = useMemo(() => {
+    if (!userPreferences) return true
+
+    if (size(userPreferences) !== size(selectedTournaments)) return false
+
+    return isEmpty(xorWith(
+      userPreferences,
+      selectedTournaments,
+      isEqual,
+    ))
+  }, [selectedTournaments, userPreferences])
+
+  return {
+    fetchInitialPreferences,
+    isApplyButtonDisabled,
+    isFetching,
+    isSaving,
+    onApplyClick,
+    userPreferences,
+  }
+}

src/features/PreferencesPopup/store/hooks/useSearch.tsx

@@ -0,0 +1,62 @@
+import type { ChangeEvent, MouseEvent } from 'react'
+import {
+  useState,
+  useEffect,
+  useMemo,
+} from 'react'
+
+import debounce from 'lodash/debounce'
+
+import type { SportTypes } from 'config'
+import type { Tournaments, TournamentsBySports } from 'requests/getSportTournaments'
+
+import { useLexicsStore } from 'features/LexicsStore'
+
+import { search } from '../helpers'
+
+type SearchArgs = Parameters<typeof search>[0]
+
+export const useSearch = (
+  tournamentsBySports: TournamentsBySports,
+  selectedSports: Array<SportTypes>,
+) => {
+  const { suffix } = useLexicsStore()
+
+  const [query, setQuery] = useState('')
+  const [tournaments, setTournaments] = useState<Tournaments>([])
+
+  const onQueryChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setQuery(e.target.value)
+  }
+
+  const clearQuery = (e: MouseEvent) => {
+    e.stopPropagation()
+    setQuery('')
+  }
+
+  const debouncedSearch = useMemo(() => debounce((args: SearchArgs) => {
+    search(args).then(setTournaments)
+  }, 300), [])
+
+  useEffect(() => {
+    debouncedSearch({
+      query,
+      selectedSports,
+      suffix,
+      tournamentsBySports,
+    })
+  }, [
+    selectedSports,
+    query,
+    tournamentsBySports,
+    suffix,
+    debouncedSearch,
+  ])
+
+  return {
+    clearQuery,
+    onQueryChange,
+    query,
+    tournaments,
+  }
+}

src/features/PreferencesPopup/store/hooks/useSports.tsx

@@ -0,0 +1,35 @@
+import { useCallback, useState } from 'react'
+
+import includes from 'lodash/includes'
+import without from 'lodash/without'
+import isEmpty from 'lodash/isEmpty'
+
+import type { SportTypes } from 'config'
+import type { SportList } from 'requests/getSportList'
+import { getSportList } from 'requests/getSportList'
+
+export const useSports = () => {
+  const [sports, setSports] = useState<SportList>([])
+  const [selectedSports, setSelectedSports] = useState<Array<SportTypes>>([])
+
+  const fetchInitialSports = useCallback(() => {
+    if (isEmpty(sports)) {
+      getSportList().then(setSports)
+    }
+  }, [sports])
+
+  const onSportSelect = (sport: SportTypes) => {
+    const newSports = includes(selectedSports, sport)
+      ? without(selectedSports, sport)
+      : [sport, ...selectedSports]
+    setSelectedSports(newSports)
+  }
+
+  return {
+    fetchInitialSports,
+    onSportSelect,
+    selectedSports,
+    setInitialSelectedSports: setSelectedSports,
+    sports,
+  }
+}

src/features/PreferencesPopup/store/hooks/useTournaments.tsx

@@ -0,0 +1,77 @@
+import {
+  useMemo,
+  useState,
+  useCallback,
+  useEffect,
+} from 'react'
+
+import includes from 'lodash/includes'
+import isEmpty from 'lodash/isEmpty'
+import filter from 'lodash/filter'
+import remove from 'lodash/remove'
+import every from 'lodash/every'
+import find from 'lodash/find'
+import map from 'lodash/map'
+
+import type { SportTypes } from 'config'
+
+import type { Tournament, Tournaments } from 'requests/getSportTournaments'
+import type { UserPreferences } from 'requests/getUserPreferences'
+
+export const useSelectedTournaments = (
+  selectedSports: Array<SportTypes>,
+  tournaments: Tournaments,
+) => {
+  const [selectedTournaments, setSelectedTournaments] = useState<UserPreferences>([])
+
+  const isTournamentSelected = useCallback(({ id, sport }: Tournament) => (
+    Boolean(find(
+      selectedTournaments,
+      { sport, tournament_id: id },
+    ))
+  ), [selectedTournaments])
+
+  const onTournamentSelect = useCallback((tournament: Tournament) => {
+    const preference = { sport: tournament.sport, tournament_id: tournament.id }
+    if (isTournamentSelected(tournament)) {
+      remove(selectedTournaments, preference)
+      setSelectedTournaments([...selectedTournaments])
+    } else {
+      setSelectedTournaments([...selectedTournaments, preference])
+    }
+  }, [isTournamentSelected, selectedTournaments])
+
+  const allTournamentsSelected = useMemo(
+    () => {
+      if (isEmpty(tournaments)) return false
+
+      return every(tournaments, isTournamentSelected)
+    },
+    [isTournamentSelected, tournaments],
+  )
+
+  const onSelectAllTournaments = () => {
+    const newSelectedTournaments = allTournamentsSelected
+      ? []
+      : map(
+        tournaments,
+        ({ id, sport }) => ({ sport, tournament_id: id }),
+      )
+    setSelectedTournaments(newSelectedTournaments)
+  }
+
+  useEffect(() => {
+    setSelectedTournaments((oldTournaments) => (
+      filter(oldTournaments, ({ sport }) => includes(selectedSports, sport))
+    ))
+  }, [selectedSports])
+
+  return {
+    allTournamentsSelected,
+    isTournamentSelected,
+    onSelectAllTournaments,
+    onTournamentSelect,
+    selectedTournaments,
+    setInitialSelectedTournaments: setSelectedTournaments,
+  }
+}

src/features/PreferencesPopup/store/hooks/useTournamentsBySports.tsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react'
+
+import isEmpty from 'lodash/isEmpty'
+import filter from 'lodash/filter'
+
+import type { SportTypes } from 'config'
+
+import type { TournamentsBySports } from 'requests/getSportTournaments'
+import { getTournamentsBySports } from 'requests/getSportTournaments'
+
+import { useRequest } from 'hooks'
+
+export const useTournamentsBySports = (selectedSports: Array<SportTypes>) => {
+  const [tournamentsBySports, setTournamentsBySports] = useState<TournamentsBySports>({})
+
+  const {
+    isFetching,
+    request: fetchTournaments,
+  } = useRequest(getTournamentsBySports)
+
+  useEffect(() => {
+    const missingTournaments = filter(selectedSports, (sport) => !tournamentsBySports[sport])
+    if (!isEmpty(missingTournaments)) {
+      fetchTournaments(missingTournaments).then((newTournaments) => {
+        setTournamentsBySports({
+          ...tournamentsBySports,
+          ...newTournaments,
+        })
+      })
+    }
+  }, [selectedSports, tournamentsBySports, fetchTournaments])
+
+  return {
+    isFetching,
+    tournamentsBySports,
+  }
+}

src/features/PreferencesPopup/store/index.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import { createContext, useContext } from 'react'
+
+import { usePreferences } from './hooks'
+
+type Context = ReturnType<typeof usePreferences>
+type Props = { children: ReactNode }
+
+const PreferencesPopupContext = createContext({} as Context)
+
+export const PreferencesPopupStore = ({ children }: Props) => {
+  const value = usePreferences()
+  return (
+    <PreferencesPopupContext.Provider value={value}>
+      {children}
+    </PreferencesPopupContext.Provider>
+  )
+}
+
+export const usePreferencesStore = () => useContext(PreferencesPopupContext)

src/features/PreferencesPopup/styled.tsx

@@ -0,0 +1,106 @@
+import styled, { css } from 'styled-components/macro'
+
+import { ModalWindow } from 'features/Modal/styled'
+import { Modal as BaseModal } from 'features/Modal'
+import { Header as BaseHeader } from 'features/PopupComponents'
+
+import { ButtonSolid } from 'features/Common'
+import { Checkbox as BaseCheckbox } from 'features/Common/Checkbox'
+import { Label } from 'features/Common/Checkbox/styled'
+import { CheckboxSvg } from 'features/Common/Checkbox/Icon'
+import { ArrowLoader } from 'features/ArrowLoader'
+
+export const Modal = styled(BaseModal)`
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 0 60px;
+
+  ${ModalWindow} {
+    width: 1066px;
+    height: 781px;
+    padding: 0;
+    background-color: #333333;
+    border-radius: 5px;
+
+    @media (max-width: 1370px) {
+      width: 70rem;
+      height: auto;
+    }
+  }
+`
+
+type WrapperProps = {
+  isFetching?: boolean,
+}
+
+export const Wrapper = styled.div<WrapperProps>`
+  ${({ isFetching }) => (
+    isFetching
+      ? css`pointer-events: none;`
+      : ''
+  )}
+`
+
+export const Header = styled(BaseHeader)`
+  height: auto;
+  padding-top: 40px;
+  justify-content: center;
+`
+
+export const HeaderTitle = styled.span`
+  font-weight: 600;
+  font-size: 1.13rem;
+  line-height: 1.13rem;
+  color: #FFFFFF;
+`
+
+export const BlockTitle = styled.span`
+  font-weight: 600;
+  font-size: 0.56rem;
+  line-height: 0.85rem;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.5);
+`
+
+export const Body = styled.div`
+  padding: 25px 40px 0 42px;
+  display: flex;
+`
+
+export const Footer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 1.89rem;
+`
+
+export const Checkbox = styled(BaseCheckbox)`
+  ${Label} {
+    font-weight: 600;
+    font-size: 0.66rem;
+    line-height: 0.94rem;
+    letter-spacing: 0.1px;
+  }
+  ${CheckboxSvg} {
+    align-self: auto;
+    margin-right: 18px;
+    max-width: 20px;
+    max-height: 20px;
+  }
+`
+
+export const ApplyButton = styled(ButtonSolid)`
+  width: 270px;
+  border-radius: 5px;
+`
+
+export const Loader = styled(ArrowLoader)`
+  position: absolute;
+  z-index: 10;
+  background-color: #3f3f3f60;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+`

src/features/StripeElements/index.tsx

@@ -20,6 +20,7 @@ export const StripeElements = ({ children }: Props) => {
     <Elements
       key={lang}
       stripe={stripe}
+      // @ts-expect-error
       options={{ locale: lang }}
     >
       {children}

src/features/TeamPage/hooks.tsx

@@ -9,13 +9,10 @@ import { getTeamInfo, getTeamMatches } from 'requests'
 
 import { useSportNameParam, usePageId } from 'hooks'
 
-import { useMatchSwitchesStore } from 'features/MatchSwitches'
-
 export const useTeamPage = () => {
   const [teamProfile, setTeamProfile] = useState<TeamInfo>(null)
   const { sportType } = useSportNameParam()
   const teamId = usePageId()
-  const { availableMatchesOnly } = useMatchSwitchesStore()
 
   useEffect(() => {
     getTeamInfo(sportType, teamId)
@@ -28,7 +25,6 @@ export const useTeamPage = () => {
 
   const fetchMatches = useCallback(
     (limit: number, offset: number) => getTeamMatches({
-      availableMatchesOnly,
       limit,
       offset,
       sportType,
@@ -37,7 +33,6 @@ export const useTeamPage = () => {
     [
       teamId,
       sportType,
-      availableMatchesOnly,
     ],
   )
 

src/features/TournamentPage/hooks.tsx

@@ -10,14 +10,12 @@ import { getTournamentInfo, getTournamentMatches } from 'requests'
 import { useSportNameParam, usePageId } from 'hooks'
 
 import { useName } from 'features/Name'
-import { useMatchSwitchesStore } from 'features/MatchSwitches'
 
 export const useTournamentPage = () => {
   const [tournamentProfile, setTournamentProfile] = useState<TournamentInfo>(null)
   const { sportType } = useSportNameParam()
   const tournamentId = usePageId()
   const country = useName(tournamentProfile?.country || {})
-  const { availableMatchesOnly } = useMatchSwitchesStore()
 
   useEffect(() => {
     getTournamentInfo(sportType, tournamentId)
@@ -30,7 +28,6 @@ export const useTournamentPage = () => {
 
   const fetchMatches = useCallback(
     (limit: number, offset: number) => getTournamentMatches({
-      availableMatchesOnly,
       limit,
       offset,
       sportType,
@@ -39,7 +36,6 @@ export const useTournamentPage = () => {
     [
       tournamentId,
       sportType,
-      availableMatchesOnly,
     ],
   )
 

src/requests/getMatches/getHomeMatches.tsx

@@ -1,9 +1,7 @@
-import { PROCEDURES, SportTypes } from 'config'
+import { PROCEDURES } from 'config'
 
 import { client } from 'config/clients'
 
-import type { MatchStatuses } from 'features/HeaderFilters'
-
 import type { MatchesBySection } from './types'
 import { requestMatches } from './request'
 import { getMatchesPreviews } from './getPreviews'
@@ -11,23 +9,15 @@ import { getMatchesPreviews } from './getPreviews'
 const proc = PROCEDURES.get_matches
 
 type Args = {
-  availableMatchesOnly: boolean,
   date: string,
   limit: number,
-  matchStatus: MatchStatuses | null,
   offset: number,
-  sportType: SportTypes | null,
-  tournamentId: number | null,
 }
 
 export const getHomeMatches = async ({
-  availableMatchesOnly,
   date,
   limit,
-  matchStatus,
   offset,
-  sportType,
-  tournamentId,
 }: Args): Promise<MatchesBySection> => {
   const config = {
     body: {
@@ -35,10 +25,6 @@ export const getHomeMatches = async ({
         _p_date: date,
         _p_limit: limit,
         _p_offset: offset,
-        _p_sport: sportType,
-        _p_stream_status: matchStatus,
-        _p_sub_only: availableMatchesOnly,
-        _p_tournament_id: tournamentId,
         ...client.requests?.[proc],
       },
       proc,

src/requests/getMatches/getPlayerMatches.tsx

@@ -11,7 +11,6 @@ import { getMatchesPreviews } from './getPreviews'
 const proc = PROCEDURES.get_player_matches
 
 type Args = {
-  availableMatchesOnly: boolean,
   limit: number,
   offset: number,
   playerId: number,
@@ -19,7 +18,6 @@ type Args = {
 }
 
 export const getPlayerMatches = async ({
-  availableMatchesOnly,
   limit,
   offset,
   playerId,
@@ -32,7 +30,6 @@ export const getPlayerMatches = async ({
         _p_offset: offset,
         _p_player_id: playerId,
         _p_sport: sportType,
-        _p_sub_only: availableMatchesOnly,
         ...client.requests?.[proc],
       },
       proc,

src/requests/getMatches/getTeamMatches.tsx

@@ -11,7 +11,6 @@ import { requestMatches } from './request'
 const proc = PROCEDURES.get_team_matches
 
 type Args = {
-  availableMatchesOnly: boolean,
   limit: number,
   offset: number,
   sportType: SportTypes,
@@ -19,7 +18,6 @@ type Args = {
 }
 
 export const getTeamMatches = async ({
-  availableMatchesOnly,
   limit,
   offset,
   sportType,
@@ -31,7 +29,6 @@ export const getTeamMatches = async ({
         _p_limit: limit,
         _p_offset: offset,
         _p_sport: sportType,
-        _p_sub_only: availableMatchesOnly,
         _p_team_id: teamId,
         ...client.requests?.[proc],
       },

src/requests/getMatches/getTournamentMatches.tsx

@@ -11,7 +11,6 @@ import { requestMatches } from './request'
 const proc = PROCEDURES.get_tournament_matches
 
 type Args = {
-  availableMatchesOnly: boolean,
   limit: number,
   offset: number,
   sportType: SportTypes,
@@ -19,7 +18,6 @@ type Args = {
 }
 
 export const getTournamentMatches = async ({
-  availableMatchesOnly,
   limit,
   offset,
   sportType,
@@ -31,7 +29,6 @@ export const getTournamentMatches = async ({
         _p_limit: limit,
         _p_offset: offset,
         _p_sport: sportType,
-        _p_sub_only: availableMatchesOnly,
         _p_tournament_id: tournamentId,
         ...client.requests?.[proc],
       },

src/requests/getSportTournaments.tsx

@@ -1,3 +1,6 @@
+import reduce from 'lodash/reduce'
+import map from 'lodash/map'
+
 import {
   DATA_URL,
   PROCEDURES,
@@ -27,17 +30,10 @@ export type Tournament = {
 
 export type Tournaments = Array<Tournament>
 
-const LIMIT = 20
+const getSportTournaments = (sportId: SportTypes): Promise<Tournaments> => {
-
-export const getSportTournaments = (
-  sportId: SportTypes | null,
-  page: number = 0,
-): Promise<Tournaments> => {
   const config = {
     body: {
       params: {
-        _p_limit: LIMIT,
-        _p_offset: page * LIMIT,
         _p_sport: sportId,
       },
       proc,
@@ -49,3 +45,19 @@ export const getSportTournaments = (
     url: DATA_URL,
   })
 }
+
+export type TournamentsBySports = Partial<Record<SportTypes, Tournaments>>
+
+export const getTournamentsBySports = async (sportIds: Array<SportTypes>) => {
+  const responses = await Promise.all(map(sportIds, getSportTournaments))
+  const tournamentsBySports = reduce(
+    responses,
+    (acc, curr) => {
+      const { sport } = curr[0]
+      acc[sport] = curr
+      return acc
+    },
+    {} as TournamentsBySports,
+  )
+  return tournamentsBySports
+}

src/requests/getUserPreferences.tsx

@@ -0,0 +1,29 @@
+import {
+  DATA_URL,
+  PROCEDURES,
+  SportTypes,
+} from 'config'
+import { callApi } from 'helpers'
+
+const proc = PROCEDURES.get_user_preferences
+
+export type UserPreferences = Array<{
+  sport: SportTypes,
+  tournament_id: number,
+}>
+
+export const getUserPreferences = async () => {
+  const config = {
+    body: {
+      params: {},
+      proc,
+    },
+  }
+
+  const response: UserPreferences | null = await callApi({
+    config,
+    url: DATA_URL,
+  })
+
+  return response || []
+}

src/requests/saveUserPreferences.tsx

@@ -0,0 +1,25 @@
+import {
+  DATA_URL,
+  PROCEDURES,
+} from 'config'
+import { callApi } from 'helpers'
+
+import type { UserPreferences } from './getUserPreferences'
+
+const proc = PROCEDURES.save_user_preferences
+
+export const saveUserPreferences = (data: UserPreferences | null) => {
+  const config = {
+    body: {
+      params: {
+        _p_data: data,
+      },
+      proc,
+    },
+  }
+
+  return callApi({
+    config,
+    url: DATA_URL,
+  })
+}