.eslintrc

@@ -80,8 +80,16 @@
     ],
     "typescript-sort-keys/interface": 1,
     "typescript-sort-keys/string-enum": 1,
-
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      },
+    ],
+    "react/jsx-no-useless-fragment": [2, { "allowExpressions": true }],
     "camelcase": "off",
+    "default-param-last": 0,
     "import/no-unresolved": "off",
     "import/prefer-default-export": "off",
     "indent": "off",

package.json

@@ -27,6 +27,7 @@
     "@stripe/stripe-js": "^1.13.2",
     "babel-polyfill": "^6.26.0",
     "date-fns": "^2.14.0",
+    "eslint-plugin-typescript-sort-keys": "^2.3.0",
     "history": "^4.10.1",
     "hls.js": "^1.1.1",
     "lodash": "^4.17.15",
@@ -53,10 +54,10 @@
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-docs": "^6.3.12",
     "@storybook/addon-links": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
+    "@storybook/addons": "^7.0.2",
     "@storybook/preset-create-react-app": "^3.0.0",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^6.3.12",
+    "@storybook/react": "^7.0.2",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^7.1.2",
@@ -73,8 +74,8 @@
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.15",
     "commitizen": "^4.2.4",
-    "eslint": "^7.0.1",
-    "eslint-config-airbnb": "18.2.1",
+    "eslint": "^8.38.0",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
@@ -82,13 +83,12 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-sort-destructure-keys": "^1.3.5",
-    "eslint-plugin-typescript-sort-keys": "^1.5.0",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
     "gzipper": "^3.7.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.7",
     "miragejs": "^0.1.45",
-    "storybook-addon-styled-component-theme": "^1.3.0",
+    "storybook-addon-styled-component-theme": "^2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",
     "stylelint-config-styled-components": "^0.1.1",

src/components/AccessTimer/index.tsx

@@ -107,7 +107,7 @@ export const AccessTimer = ({
                 <T9n t='sign_in_full_game' />
               </SignText>
             </TimerContainer>
-            <SignInBtn onClick={() => logout('saveToken')}>
+            <SignInBtn onClick={() => logout('saveToken')} id='match_register'>
               <T9n t='sign_in' />
             </SignInBtn>
           </AccessTimerContainer>

src/components/PictureInPicture/PiP.tsx

@@ -53,7 +53,7 @@ export const PiP = memo(({ isPlaying, videoRef }: PipProps) => {
   }, [videoRef, isPlaying, user])
 
   return (
-    <PipWrapper>
+    <PipWrapper id='match_video_pic_in_pic'>
       <Icon refIcon='PiP' onClick={togglePip} />
     </PipWrapper>
   )

src/components/SimplePopup/index.tsx

@@ -58,7 +58,10 @@ export const SimplePopup = (props: Props) => {
         {buttonName
         && (
           <Footer>
-            <ScApplyButton onClick={onHandle}>
+            <ScApplyButton
+              onClick={onHandle}
+              id='match_afterlimit_register'
+            >
               <T9n t={buttonName} />
             </ScApplyButton>
           </Footer>

src/components/SmartBanner/index.tsx

@@ -51,6 +51,7 @@ export const SmartBanner = ({ setIsOpenDownload }: SmartBannerProps) => (
         )
         setIsOpenDownload(false)
       }}
+      id='download_app'
     >
       <ScBtnDownload>Download</ScBtnDownload>
     </a>

src/config/clients/facr.tsx

@@ -9,7 +9,7 @@ import {
 } from './types'
 
 const randomHash = () => (
-  (Math.random() ** Math.random()) * 9999999999999999
+  (Math.random() ** Math.random()) * 100000000000000
 )
 
 const params = {

src/config/clients/tunisia.tsx

@@ -7,7 +7,7 @@ import {
 } from './types'
 
 const randomHash = () => (
-  (Math.random() ** Math.random()) * 9999999999999999
+  (Math.random() ** Math.random()) * 100000000000000
 )
 
 export const tunisia: ClientConfig = {

src/features/AddCardForm/index.tsx

@@ -42,6 +42,7 @@ export const AddCardForm = ({
         <OutlineButton
           type='button'
           onClick={onAddClick}
+          id='personal_cards_add'
         >
           <Icon src='plusIcon' />
           <T9n t='add_card' />

src/features/AudioTracks/index.tsx

@@ -89,13 +89,11 @@ export const AudioTracks = ({
   return (
     <Fragment>
       {audioTracks?.length > 1 && (
-        <Fragment>
-          <SelectedAudioTrack onClick={open}>
-            {!selectedAudioTrack && audioTracks[0].name}
-            {selectedAudioTrack?.name}
-            <IconArrow active={isOpen} />
-          </SelectedAudioTrack>
-        </Fragment>
+        <SelectedAudioTrack onClick={open}>
+          {!selectedAudioTrack && audioTracks[0].name}
+          {selectedAudioTrack?.name}
+          <IconArrow active={isOpen} />
+        </SelectedAudioTrack>
       )}
       {content}
     </Fragment>

src/features/AuthServiceApp/components/ConfirmPopup/index.tsx

@@ -44,11 +44,11 @@ export const ConfirmPopup = (props: Props) => {
           </ScText>
           <ScText>
             <T9n t='by_clicking' />
-            <ScLink href={`${AUTH_SERVICE}${client.termsLink}`} target='_blank'>
+            <ScLink href={`${AUTH_SERVICE}${client.termsLink}`} target='_blank' id='personal_t_k'>
               <T9n t='terms_and_conditions' />
             </ScLink>&nbsp;
             <T9n t='and' />
-            <ScLink href={`${AUTH_SERVICE}${client.privacyLink}`} target='_blank'>
+            <ScLink href={`${AUTH_SERVICE}${client.privacyLink}`} target='_blank' id='personal_policy'>
               <T9n t='privacy_policy_and_statement' />
             </ScLink>
           </ScText>

src/features/AuthServiceApp/components/Login/index.tsx

@@ -121,7 +121,10 @@ const Login = () => {
               }
             </ButtonSolid>
 
-            <RegisterButton to={`${PAGES.registration}${window.location.search}`}>
+            <RegisterButton
+              to={`${PAGES.registration}${window.location.search}`}
+              id='auth_registration'
+            >
               <T9n t='register' />
             </RegisterButton>
             <ContinueWith t='or_continue_with' />

src/features/AuthServiceApp/components/RegisterPopup/index.tsx

@@ -47,7 +47,11 @@ export const RegisterPopup = (props: Props) => {
           </Text>
         </Body>
         <Footer>
-          <ApplyButton onClick={() => handleModalClose()}>Ok</ApplyButton>
+          <ApplyButton
+            onClick={() => handleModalClose()}
+            id='auth_register_ok'
+          >Ok
+          </ApplyButton>
         </Footer>
       </Wrapper>
     </Modal>

src/features/AuthServiceApp/components/Registration/index.tsx

@@ -131,7 +131,7 @@ const Registration = () => {
           </CheckboxWrapper>
 
           <ButtonsBlock>
-            <ButtonSolid disabled={isSubmitDisabled} type='submit'>
+            <ButtonSolid disabled={isSubmitDisabled} type='submit' id='auth_register'>
               {
                 isFetching
                   ? <ScArrowLoader />

src/features/AuthServiceApp/hooks/useParamsUrl.tsx

@@ -22,12 +22,14 @@ export const useParamsUrl = () => {
   const urlSearchParams = useMemo(() => new URLSearchParams(location.search), [location.search])
 
   // safari начал поддержку Object.fromEntries с версии 12.1
-  const params = useMemo(() => (
-    Array.from(urlSearchParams.entries()).reduce((acc, [key, value]) => ({
-      ...acc,
-      [key]: value,
-    }), {})),
-  [urlSearchParams])
+  const params = useMemo(
+    () => (
+      Array.from(urlSearchParams.entries()).reduce((acc, [key, value]) => ({
+        ...acc,
+        [key]: value,
+      }), {})),
+    [urlSearchParams],
+  )
 
   return {
     client_id,

src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx

@@ -152,6 +152,7 @@ export const PackageSelectionStep = () => {
               logout('saveToken')
             }
           }}
+          id='purchase_buy'
         >
           {loader ? (
             <ArrowLoader disabled />

src/features/BuyMatchPopup/components/SelectSubscription/index.tsx

@@ -45,12 +45,12 @@ export const SelectSubscriptionStep = () => {
     selectedSubscription,
   } = useBuyMatchPopupStore()
 
-  const getPackagesCurrency = useCallback(
-    (packages: Record<SubscriptionType, Array<MatchPackage>>) => {
-      const packageWithValue = Object.entries(packages).find(([key, value]) => value.length)?.[1][0]
-      return packageWithValue ? packageWithValue.currency : 'RUB'
-    }, [],
-  )
+  const getPackagesCurrency = useCallback((
+    packages: Record<SubscriptionType, Array<MatchPackage>>,
+  ) => {
+    const packageWithValue = Object.entries(packages).find(([key, value]) => value.length)?.[1][0]
+    return packageWithValue ? packageWithValue.currency : 'RUB'
+  }, [])
 
   if (!match || !matchSubscriptions) return null
 
@@ -105,6 +105,7 @@ export const SelectSubscriptionStep = () => {
         <Button
           disabled={!selectedSubscription}
           onClick={onNext}
+          id='purchase_next'
         >
           <T9n t='next_choose' />
         </Button>

src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx

@@ -83,9 +83,7 @@ export const useSubscriptions = () => {
     })
     setMatchSubscriptionsList(convertedSubscriptions)
     fetchLexics(subscriptions.data || [])
-    const firstPackage = find(
-      convertedSubscriptions, (subscription) => !isEmpty(subscription),
-    )
+    const firstPackage = find(convertedSubscriptions, (subscription) => !isEmpty(subscription))
     setSelectedPeriod(getInitialPeriod(firstPackage))
   }, [fetchLexics, suffix])
 

src/features/Common/Input/index.tsx

@@ -26,6 +26,7 @@ type Props = {
   disabled?: boolean,
   editIcon?: boolean,
   iconName?: string,
+  id?: string,
   inputWidth?: number,
   label?: string,
   labelAfter?: string,
@@ -54,6 +55,7 @@ export const Input = ({
   editIcon = false,
   error,
   iconName,
+  id,
   inputWidth,
   label,
   labelAfter,
@@ -84,6 +86,7 @@ export const Input = ({
         wrapperHeight={wrapperHeight}
         hasRightIcon={editIcon}
         error={error}
+        id={id}
       >
         <Label>
           <LabelTitle labelWidth={labelWidth} isUserAccountPage={isUserAccountPage}>

src/features/CompanyInfo/index.tsx

@@ -43,11 +43,9 @@ export const CompanyInfo = ({
         return ''
       case ClientNames.Lff:
         return (
-          <Fragment>
-            <CompanyInfoText>
-              <T9n t='19590' />
-            </CompanyInfoText>
-          </Fragment>
+          <CompanyInfoText>
+            <T9n t='19590' />
+          </CompanyInfoText>
         )
       case ClientNames.Insports:
         return (

src/features/HeaderFilters/components/DateFilter/index.tsx

@@ -48,7 +48,11 @@ export const DateFilter = () => {
         <MonthYear onClick={openDatePicker}>
           {date.month} {' '} {date.year}
         </MonthYear>
-        <DateButton isActive={isOpen} onClick={openDatePicker}>
+        <DateButton
+          isActive={isOpen}
+          onClick={openDatePicker}
+          id='main_calendar'
+        >
           <Icon refIcon='Calendar' color='#fff' />
         </DateButton>
       </MonthWrapper>

src/features/HeaderMenu/index.tsx

@@ -10,7 +10,7 @@ import { HeaderGroup, HeaderLogo } from './styled'
 export const HeaderMenu = () => (
   <HeaderGroup>
     <Search />
-    <Link to={PAGES.home}>
+    <Link to={PAGES.home} id='general_main_page'>
       <HeaderLogo />
     </Link>
     <Menu />

src/features/HeaderMobile/styled.tsx

@@ -12,7 +12,8 @@ import { customScrollbar } from 'features/Common'
 export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
 
 export const defaultHeaderStyles = (
-  color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
+  color: string = DEFAULT_HEADER_COLOR,
+  headerImage: string | undefined | null,
 ) => {
   if (['lff', 'tunisia'].includes(client.name)) {
     return client.styles.homePageHeader

src/features/HomePage/components/Header/index.tsx

@@ -34,6 +34,7 @@ export const Header = () => {
               updateDate()
               resetFilters()
             }}
+            id='general_main_page'
           >
             <HeaderLogo />
           </Link>

src/features/HomePage/components/HeaderFilters/index.tsx

@@ -76,18 +76,21 @@ export const HeaderFilters = () => {
           <ScFilterItem
             className={isActiveFilter('live') ? 'activeLive' : ''}
             onClick={() => checkFilter('live')}
+            id='main_live'
           >
             <T9n t='live' />
           </ScFilterItem>
           <ScFilterItem
             className={isActiveFilter('upcoming') ? 'activeButton' : ''}
             onClick={() => checkFilter('upcoming')}
+            id='main_upcoming'
           >
             <T9n t='upcoming' />
           </ScFilterItem>
           <ScFilterItem
             className={isActiveFilter('completed') ? 'activeButton' : ''}
             onClick={() => checkFilter('completed')}
+            id='main_completed'
           >
             <T9n t='completed' />
           </ScFilterItem>

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

@@ -89,8 +89,10 @@ export const MatchDescription = () => {
 
   const isChangedTimeFormat = includes(['US', 'CA'], user?.profile.country_code)
   const localDate = format(parseDate(date), isMobileDevice ? 'MMM d, y' : 'MMMM d, y')
-  const changedTimeFormat = format(parseDate(date),
-    isChangedTimeFormat ? 'h:mm a' : 'HH:mm')
+  const changedTimeFormat = format(
+    parseDate(date),
+    isChangedTimeFormat ? 'h:mm a' : 'HH:mm',
+  )
 
   return (
     <Description isHidden={!profileCardShown}>

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

@@ -160,20 +160,23 @@ export const useMatchPage = () => {
     let getIntervalMatch: ReturnType<typeof setInterval>
     if (matchProfile?.live && !matchProfile.youtube_link) {
       getIntervalMatch = setInterval(
-        () => getMatchInfo(sportType, matchId).then(setMatchProfile), 1000 * 60 * 3,
+        () => getMatchInfo(sportType, matchId).then(setMatchProfile),
+        1000 * 60 * 3,
       )
     }
     return () => clearInterval(getIntervalMatch)
   }, [
     matchProfile,
     sportType,
-    matchId])
+    matchId,
+  ])
 
   useEffect(() => {
     if (user || !userInfo?.email) return
 
     const counter = setInterval(
-      () => getMatchViewDuration(Number(userInfo?.email)), 1000 * 30,
+      () => getMatchViewDuration(Number(userInfo?.email)),
+      1000 * 30,
     )
     // eslint-disable-next-line
     return () => clearInterval(counter)

src/features/MatchPage/store/hooks/useFitersPopup.tsx

@@ -46,10 +46,12 @@ export const useFiltersPopup = ({
 
   const isAllActionsChecked = every(uniqEvents, (el) => (includes(activeEvents, el)))
   const isFirstTeamPlayersChecked = every(
-    uniqPlayersTeam1, (el) => (includes(activeFirstTeamPlayers, el)),
+    uniqPlayersTeam1,
+    (el) => (includes(activeFirstTeamPlayers, el)),
   )
   const isSecondTeamPlayersChecked = every(
-    uniqPlayersTeam2, (el) => (includes(activeSecondTeamPlayers, el)),
+    uniqPlayersTeam2,
+    (el) => (includes(activeSecondTeamPlayers, el)),
   )
 
   const toggle = () => {

src/features/MatchPage/store/hooks/useStatsTab.tsx

@@ -89,8 +89,8 @@ export const useStatsTab = ({
   })) as Array<EventPlaylistOption>
 
   const playNextEpisode = ({
-    order,
     episodesToPlay = stateEpisodesToPlay,
+    order,
   }: PlayNextEpisodeArgs = {}) => {
     const currentOrder = order === 0 ? order : plaingOrder
     const isLastEpisode = currentOrder === episodesToPlay.length

src/features/MatchPopup/components/LiveMatchPlaylist/index.tsx

@@ -26,13 +26,13 @@ export const LiveMatchPlaylist = () => {
   const sport = getSportLexic(match.sportType)
   return (
     <List>
-      <Item>
+      <Item id='main_watch_live'>
         <SimplePlaylistButton
           to={`/${sport}${PAGES.match}/${match.id}`}
           title={isMobileDevice ? 'watch' : 'watch_live_stream'}
         />
       </Item>
-      <Item>
+      <Item id='main_watch_beginning'>
         <SimplePlaylistButton
           to={`/${sport}${PAGES.match}/${match.id}/?resume=${0}`}
           title='watch_from_beginning'

src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx

@@ -46,17 +46,19 @@ const Item = styled.li`
 `
 
 export const MatchPlaylists = forwardRef(
-  ({
-    live,
-    onSelect,
-    playlists,
-    selectedMathPlaylist,
-  }: Props,
-  ref: ForwardedRef<HTMLUListElement>) => (
+  (
+    {
+      live,
+      onSelect,
+      playlists,
+      selectedMathPlaylist,
+    }: Props,
+    ref: ForwardedRef<HTMLUListElement>,
+  ) => (
     <List ref={ref}>
       {
         map(playlists, (playlist) => (
-          <Item key={playlist.id}>
+          <Item key={playlist.id} id={`match_watch_${playlist.id}`}>
             <PlayButton
               duration={playlist.duration}
               active={isEqual(playlist, selectedMathPlaylist)}

src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx

@@ -61,12 +61,14 @@ export const PlayersPlaylists = ({
         <Tab
           active={selectedTeam === Teams.TEAM1}
           onClick={() => setSelectedTeam(Teams.TEAM1)}
+          id='match_players_team1'
         >
           <Name nameObj={profile.team1} prefix='abbrev_' />
         </Tab>
         <Tab
           active={selectedTeam === Teams.TEAM2}
           onClick={() => setSelectedTeam(Teams.TEAM2)}
+          id='match_players_team2'
         >
           <Name nameObj={profile.team2} prefix='abbrev_' />
         </Tab>

src/features/MatchSidePlaylists/components/PlayersTable/index.tsx

@@ -1,5 +1,3 @@
-import { Fragment } from 'react'
-
 import { useTour } from '@reactour/tour'
 
 import map from 'lodash/map'
@@ -88,18 +86,16 @@ export const PlayersTable = (props: PlayersTableProps) => {
             onScroll={handleScroll}
           >
             {!isExpanded && paramsCount > DISPLAYED_PARAMS_COLUMNS && (
-              <Fragment>
-                <ArrowButtonRight
-                  aria-label='Scroll to right'
-                  onClick={slideRight}
-                  visible={showRightArrow}
-                >
-                  <Arrow direction='right' data-step={Steps.ShowMoreStats} />
-                  {Boolean(currentStep === Steps.ShowMoreStats && isOpen) && (
-                    <Spotlight />
-                  )}
-                </ArrowButtonRight>
-              </Fragment>
+              <ArrowButtonRight
+                aria-label='Scroll to right'
+                onClick={slideRight}
+                visible={showRightArrow}
+              >
+                <Arrow direction='right' data-step={Steps.ShowMoreStats} />
+                {Boolean(currentStep === Steps.ShowMoreStats && isOpen) && (
+                  <Spotlight />
+                )}
+              </ArrowButtonRight>
             )}
             <Table
               role='marquee'

src/features/MatchSidePlaylists/components/TabEvents/index.tsx

@@ -76,14 +76,16 @@ export const TabEvents = ({
             <Tab
               active={activeStatus}
               onClick={isLiveMatch ? setReversed : setUnreversed}
+              id='match_plays_sort_start'
             />
             <Tab
               active={!activeStatus}
               onClick={isLiveMatch ? setUnreversed : setReversed}
+              id='match_plays_sort_final'
             />
           </Tabs>
           <LikeToggle src={likeImage} onClick={likeToggle} />
-          <Filters active={!isEmptyFilters} onClick={togglePopup}>
+          <Filters active={!isEmptyFilters} onClick={togglePopup} id='match_plays_filter'>
             <HoverTooltip>
               <T9n t='filter_match_events' />
             </HoverTooltip>

src/features/MatchSidePlaylists/components/TabStats/index.tsx

@@ -95,6 +95,7 @@ export const TabStats = () => {
               aria-pressed={selectedTab === Tabs.TEAM1}
               onClick={() => setSelectedTab(Tabs.TEAM1)}
               data-step={Steps.PlayersTab}
+              id='match_stats_team1'
             >
               <TabTitle
                 teamColor={team1.shirt_color}
@@ -125,6 +126,7 @@ export const TabStats = () => {
             <Tab
               aria-pressed={selectedTab === Tabs.TEAM2}
               onClick={() => setSelectedTab(Tabs.TEAM2)}
+              id='match_stats_team2'
             >
               <TabTitle
                 teamColor={team2.shirt_color}
@@ -160,13 +162,13 @@ export const TabStats = () => {
         >
           <SwitchTitle t={switchTitleLexic} />
           <SwitchButton
-            id='switchButton'
+            id='match_stats_cur_final'
             isFinalStatsType={isFinalStatsType}
             onClick={toggleStatsType}
             onMouseOver={isMobileDevice
               ? undefined
               : onMouseOver({
-                anchorId: 'switchButton',
+                anchorId: 'match_stats_cur/_inal',
                 horizontalPosition: 'right',
                 tooltipText: translate(switchButtonTooltipLexic),
               })}

src/features/MatchSidePlaylists/index.tsx

@@ -144,6 +144,7 @@ export const MatchSidePlaylists = ({
             <Tab
               aria-pressed={selectedTab === Tabs.WATCH}
               onClick={() => onTabClick(Tabs.WATCH)}
+              id='match_watch'
             >
               <TabButton>
                 <TabIcon icon='watch' />
@@ -155,6 +156,7 @@ export const MatchSidePlaylists = ({
             <Tab
               aria-pressed={selectedTab === Tabs.EVENTS}
               onClick={() => onTabClick(Tabs.EVENTS)}
+              id='match_plays'
             >
               <TabButton>
                 <TabIcon icon='plays' />
@@ -166,6 +168,7 @@ export const MatchSidePlaylists = ({
             <Tab
               aria-pressed={selectedTab === Tabs.PLAYERS}
               onClick={() => onTabClick(Tabs.PLAYERS)}
+              id='match_players'
             >
               <TabButton>
                 <TabIcon icon='players' />
@@ -178,6 +181,7 @@ export const MatchSidePlaylists = ({
               aria-pressed={selectedTab === Tabs.STATS}
               onClick={() => onTabClick(Tabs.STATS)}
               data-step={Steps.Start}
+              id='match_stats'
             >
               {Boolean(currentStep === Steps.Start && isOpen) && (
                 <Spotlight />

src/features/MatchSwitches/components/ScoreSwitch/index.tsx

@@ -18,6 +18,7 @@ export const ScoreSwitch = () => {
         role='switch'
         onClick={toggleScore}
         aria-checked={!isScoreHidden}
+        id='general_scores'
       >
         <Title t={isMobileDevice ? 'scores' : 'hide_score'} />
         <Icon

src/features/Menu/index.tsx

@@ -39,6 +39,7 @@ export const Menu = () => {
       >
         <Link
           to={`${PAGES.useraccount}/personal-info`}
+          id='general_personal_info'
         >
           <Icon src='userAccount' size='0.95rem' />
         </Link>

src/features/MultiSourcePlayer/components/Settings/index.tsx

@@ -22,7 +22,7 @@ export const Settings = (props: Props) => {
   } = useSettings(props)
   return (
     <Fragment>
-      <SettingsButton onClick={open} />
+      <SettingsButton onClick={open} id='match_video_quality' />
       {
         isOpen && (
           <OutsideClick onClick={close}>

src/features/ProfileCard/index.tsx

@@ -1,7 +1,3 @@
-import { useMemo } from 'react'
-
-import { Link } from 'react-router-dom'
-
 import type { ObjectWithName } from 'features/Name'
 
 import {
@@ -9,8 +5,6 @@ import {
   ProfileTypes,
   URL_AWS,
 } from 'config'
-import { client } from 'config/clients'
-import { ClientNames } from 'config/clients/types'
 
 import { checkPage } from 'helpers/checkPage'
 
@@ -29,7 +23,6 @@ import {
   InfoFlag,
   StyledLink,
   SсBtnWrapper,
-  SсGetHighlightBtn,
   DetailsWrapper,
 } from './styled'
 import { useProfileCard } from './hooks'
@@ -50,22 +43,35 @@ export const ProfileCard = ({ profile }: ProfileType) => {
     isFavorite,
     profileId,
     profileType,
-    setPlayerHighlight,
     sportType,
     toggleFavorites,
   } = useProfileCard()
 
   const tournamentId = profile.additionalInfo?.tournamentId
-  const isPlayerPage = checkPage(PAGES.player)
 
-  const isGetHighLightShown = useMemo(() => {
-    switch (client.name) {
-      case ClientNames.Facr:
-        return false
+  const setGoogleAnalylicsID = () => {
+    switch (true) {
+      case checkPage(PAGES.player):
+        return 'player_favourites'
+      case checkPage(PAGES.team):
+        return 'team_favourites'
+      case checkPage(PAGES.tournament):
+        return 'tournament_favourites'
       default:
-        return true
+        return ''
     }
-  }, [])
+  }
+
+  // const isPlayerPage = checkPage(PAGES.player)
+  //
+  // const isGetHighLightShown = useMemo(() => {
+  //   switch (client.name) {
+  //     case ClientNames.Facr:
+  //       return false
+  //     default:
+  //       return true
+  //   }
+  // }, [])
 
   return (
     <Wrapper>
@@ -94,10 +100,15 @@ export const ProfileCard = ({ profile }: ProfileType) => {
           </InfoItems>
         </Details>
         <SсBtnWrapper>
-          <FavoriteButton isFavorite={isFavorite} onClick={toggleFavorites}>
+          <FavoriteButton
+            isFavorite={isFavorite}
+            onClick={toggleFavorites}
+            id={setGoogleAnalylicsID()}
+          >
             <StarIcon isFavorite={isFavorite} />
             <T9n t='add_to_favorites' />
           </FavoriteButton>
+          {/* временно отключили
           {!client.disabledHighlights && isPlayerPage && isGetHighLightShown && (
             <Link to={PAGES.highlights}>
               <SсGetHighlightBtn
@@ -108,11 +119,12 @@ export const ProfileCard = ({ profile }: ProfileType) => {
                   },
                   sportType,
                 })}
+                id='player_highlights'
               >
                 <T9n t='get_highlights' />
               </SсGetHighlightBtn>
             </Link>
-          )}
+          )} */}
         </SсBtnWrapper>
       </DetailsWrapper>
     </Wrapper>

src/features/ProfileHeader/index.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import type { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 
@@ -56,34 +55,32 @@ export const ProfileHeader = ({
     && profileType === ProfileTypes.TOURNAMENTS ? `/images/${profileId}` : headerImage
 
   return (
-    <Fragment>
-      <HeaderStyled
-        headerImage={imageHeader}
-        color={headerColor || color}
-        height={height}
+    <HeaderStyled
+      headerImage={imageHeader}
+      color={headerColor || color}
+      height={height}
+    >
+      <Position
+        top={client.styles.logoTop}
+        left={client.styles.logoLeft}
       >
-        <Position
-          top={client.styles.logoTop}
-          left={client.styles.logoLeft}
-        >
-          <HeaderGroup>
-            <Link to={PAGES.home}>
-              <HeaderLogo />
-            </Link>
+        <HeaderGroup>
+          <Link to={PAGES.home} id='general_main_page'>
+            <HeaderLogo />
+          </Link>
 
-            {client.showSearch && <Search />}
-          </HeaderGroup>
-        </Position>
+          {client.showSearch && <Search />}
+        </HeaderGroup>
+      </Position>
 
-        {children}
+      {children}
 
-        <Position top={isMobileDevice ? client.styles.logoTop : undefined} right={0.71}>
-          <HeaderGroup>
-            {!isMobileDevice ? <ScoreSwitch /> : null}
-            <Menu />
-          </HeaderGroup>
-        </Position>
-      </HeaderStyled>
-    </Fragment>
+      <Position top={isMobileDevice ? client.styles.logoTop : undefined} right={0.71}>
+        <HeaderGroup>
+          {!isMobileDevice ? <ScoreSwitch /> : null}
+          <Menu />
+        </HeaderGroup>
+      </Position>
+    </HeaderStyled>
   )
 }

src/features/ProfileHeader/styled.tsx

@@ -14,7 +14,8 @@ import { isMatchPage } from 'helpers/isMatchPage'
 export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
 
 export const defaultHeaderStyles = (
-  color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
+  color: string = DEFAULT_HEADER_COLOR,
+  headerImage: string | undefined | null,
 ) => {
   if ([ClientNames.Lff, ClientNames.Tunisia, ClientNames.Facr].includes(client.name)
     && !isMatchPage()) {

src/features/Search/index.tsx

@@ -62,6 +62,7 @@ export const Search = () => {
             type='search'
             value={query}
             onChange={onChange}
+            id='general_search'
           />
           {(query || isOpen) && <ClearButton onClick={clearQuery} />}
           {isFetching && (

src/features/SportsFilter/components/SelectSport/index.tsx

@@ -18,7 +18,7 @@ export const SelectSport = ({
   open,
   sport,
 }: SportsFilterProps) => (
-  <ScSportsFilter onClick={onModalOpen}>
+  <ScSportsFilter onClick={onModalOpen} id='main_filters'>
     <ScFilterTitle opacity={sport[0] === 'all_sports' ? 0.5 : 1}>
       <T9n t={
         sport[0] === 'all_sports'

src/features/SportsFilter/components/SelectSportPopup/index.tsx

@@ -33,33 +33,31 @@ export const SelectSportPopup = ({
 
   // TODO: переделать на вариант без указания all_sports
   return (
-    <>
-      <ScModal
-        isOpen={isOpen}
-        withCloseButton={isMobileDevice}
-        close={onModalClose}
-        closeSize={9}
-      >
-        <ScHeaderGroup>
-          <ScHeaderTitle>
-            <T9n t='choose_sport' />
-          </ScHeaderTitle>
-        </ScHeaderGroup>
-        <ScBody>
-          {sportNames?.map((sport: string) => (
-            <ScSport
-              key={sport}
-              onClick={() => onSportClick(sport)}
-              className={selectedSport.indexOf(sport) >= 0 ? 'active' : ''}
-              active={selectedSport.indexOf(sport) >= 0}
-            >
-              <ScSportName>
-                <T9n t={getSport({ sportName: sport })?.lexic ?? 'all_sports'} />
-              </ScSportName>
-            </ScSport>
-          ))}
-        </ScBody>
-      </ScModal>
-    </>
+    <ScModal
+      isOpen={isOpen}
+      withCloseButton={isMobileDevice}
+      close={onModalClose}
+      closeSize={9}
+    >
+      <ScHeaderGroup>
+        <ScHeaderTitle>
+          <T9n t='choose_sport' />
+        </ScHeaderTitle>
+      </ScHeaderGroup>
+      <ScBody>
+        {sportNames?.map((sport: string) => (
+          <ScSport
+            key={sport}
+            onClick={() => onSportClick(sport)}
+            className={selectedSport.indexOf(sport) >= 0 ? 'active' : ''}
+            active={selectedSport.indexOf(sport) >= 0}
+          >
+            <ScSportName>
+              <T9n t={getSport({ sportName: sport })?.lexic ?? 'all_sports'} />
+            </ScSportName>
+          </ScSport>
+        ))}
+      </ScBody>
+    </ScModal>
   )
 }

src/features/SportsFilter/components/SelectSportPopup/styled.tsx

@@ -13,7 +13,8 @@ import { customScrollbar } from 'features/Common'
 export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
 
 export const defaultHeaderStyles = (
-  color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
+  color: string = DEFAULT_HEADER_COLOR,
+  headerImage: string | undefined | null,
 ) => {
   if (headerImage && client.name !== 'facr') {
     return css`background: url(${headerImage}.png);

src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx

@@ -54,6 +54,7 @@ export const ControlsMobile = (controlsProps: {props: ControlsPropsExtended}) =>
             <LiveBtn
               onClick={backToLive}
               isLiveTime={isLiveTime}
+              id='main_watch_live'
             >
               <T9n t='live' />
             </LiveBtn>
@@ -68,6 +69,7 @@ export const ControlsMobile = (controlsProps: {props: ControlsPropsExtended}) =>
           <Fullscreen
             onClick={onFullscreenClick}
             isFullscreen={isFullscreen}
+            id='match_video_full_screen'
           />
         </ControlsGroup>
       </ControlsRow>

src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { ButtonBase, hoverStyles } from '../../../../styled'
 

src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx

@@ -73,6 +73,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
           <PlayStop
             playing={playing}
             onClickCapture={togglePlaying}
+            id='match_video_start_stop'
           />
           {!isLive && !isStorage && (
             <Fragment>
@@ -98,8 +99,8 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
           <PlaybackTime>
             {playBackTime}
           </PlaybackTime>
-          <Backward onClick={rewindBackward}>{REWIND_SECONDS}</Backward>
-          <Forward onClick={rewindForward}>{REWIND_SECONDS}</Forward>
+          <Backward onClick={rewindBackward} id='match_video_back'>{REWIND_SECONDS}</Backward>
+          <Forward onClick={rewindForward} id='match_video_forward'>{REWIND_SECONDS}</Forward>
         </ControlsGroup>
 
         <ControlsGroup>
@@ -112,6 +113,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
             <LiveBtn
               onClick={backToLive}
               isLiveTime={isLiveTime}
+              id='match_video_live'
             >
               <T9n t='live' />
             </LiveBtn>
@@ -128,6 +130,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
           <Fullscreen
             onClick={onFullscreenClick}
             isFullscreen={isFullscreen}
+            id='match_video_full_screen'
           />
         </ControlsGroup>
       </ControlsRow>

src/features/StreamPlayer/components/VolumeBar/index.tsx

@@ -24,7 +24,7 @@ export const VolumeBar = ({
   const progressRef = useSlider({ onChange })
   return (
     <Wrapper>
-      <VolumeButton onClick={onClick} muted={muted} />
+      <VolumeButton onClick={onClick} muted={muted} id='match_video_mute' />
       <VolumeProgressList ref={progressRef}>
         <VolumeProgress value={muted ? 0 : value} />
         <Scrubber value={muted ? 0 : value} />

src/features/StreamPlayer/index.tsx

@@ -155,7 +155,7 @@ export const StreamPlayer = (props: Props) => {
         <CenterControls controlsVisible={centerControlsVisible} playing={playing}>
           {isMobileDevice
             ? <RewindMobile isBackward rewindCallback={rewindBackward} />
-            : <Backward size='lg' onClick={rewindBackward}>{REWIND_SECONDS}</Backward>}
+            : <Backward size='lg' onClick={rewindBackward} id='match_video_screen_back'>{REWIND_SECONDS}</Backward>}
           <PlayStop
             size='lg'
             fullWidth
@@ -165,10 +165,11 @@ export const StreamPlayer = (props: Props) => {
               togglePlaying()
               hideCenterControls()
             }}
+            id='match_video_screen_start_stop'
           />
           {isMobileDevice
             ? <RewindMobile isForward rewindCallback={rewindForward} />
-            : <Forward size='lg' onClick={rewindForward}>{REWIND_SECONDS}</Forward>}
+            : <Forward size='lg' onClick={rewindForward} id='match_video_screen_forward'>{REWIND_SECONDS}</Forward>}
         </CenterControls>
       )}
 

src/features/TeamPage/hooks.tsx

@@ -17,14 +17,16 @@ export const useTeamPage = () => {
   const { profileId: teamId, sportType } = usePageParams()
   const { open: openBuyMatchPopup } = useBuyMatchPopupStore()
 
-  useEffect(() => {
-    getTeamInfo(sportType, teamId)
-      .then(setTeamProfile)
-  },
-  [
-    sportType,
-    teamId,
-  ])
+  useEffect(
+    () => {
+      getTeamInfo(sportType, teamId)
+        .then(setTeamProfile)
+    },
+    [
+      sportType,
+      teamId,
+    ],
+  )
 
   useEffect(() => {
     openSubscribePopup({

src/features/TournamentPage/hooks.tsx

@@ -34,18 +34,20 @@ export const useTournamentPage = () => {
 
   const { isFavorite, toggleFavorites } = useProfileCard()
 
-  useEffect(() => {
-    if (!isPermittedTournament(tournamentId, sportType)) {
-      history.push('/')
-    }
-    getTournamentInfo(sportType, tournamentId)
-      .then(setTournamentProfile)
-  },
-  [
-    history,
-    sportType,
-    tournamentId,
-  ])
+  useEffect(
+    () => {
+      if (!isPermittedTournament(tournamentId, sportType)) {
+        history.push('/')
+      }
+      getTournamentInfo(sportType, tournamentId)
+        .then(setTournamentProfile)
+    },
+    [
+      history,
+      sportType,
+      tournamentId,
+    ],
+  )
 
   useEffect(() => {
     !isFavorite

src/features/UserAccount/components/Header/index.tsx

@@ -37,7 +37,7 @@ export const HeaderLogo = styled(Logo)`
 
 export const Header = () => (
   <HeaderStyled>
-    <Link to={PAGES.home}>
+    <Link to={PAGES.home} id='general_main_page'>
       <HeaderLogo />
     </Link>
     <LogoutButton />

src/features/UserAccount/components/LogoutButton/index.tsx

@@ -44,7 +44,7 @@ export const LogoutButton = () => {
   const { logout } = useAuthStore()
 
   return (
-    <Button onClick={() => logout()}>
+    <Button onClick={() => logout()} id='personal_log_out'>
       <ExitIcon />
       <T9n t='logout' />
     </Button>

src/features/UserAccount/components/PagePersonalInfo/hooks/index.tsx

@@ -77,8 +77,7 @@ export const useUserInfo = () => {
     saveUserInfo(data).then(() => {
       fetchUserInfo()
 
-      const lang_iso = find(languageList,
-        (language) => language.id === data.language_id)?.iso_639_1
+      const lang_iso = find(languageList, (language) => language.id === data.language_id)?.iso_639_1
 
       if (lang_iso) {
         changeLang(lang_iso)

src/features/UserAccount/components/PersonalInfoForm/index.tsx

@@ -132,6 +132,7 @@ export const PersonalInfoForm = (props: Props) => {
         <PrivacyPolicyLink
           target='_blank'
           href={`${AUTH_SERVICE}${client.termsLink}`}
+          id='personal_t_k'
         >
           <T9n t='terms_and_conditions' />
         </PrivacyPolicyLink>
@@ -139,6 +140,7 @@ export const PersonalInfoForm = (props: Props) => {
           <PrivacyPolicyLink
             target='_blank'
             href={`${AUTH_SERVICE}${client.privacyLink}`}
+            id='personal_policy'
           >
             <T9n t='privacy_policy_and_statement' />
           </PrivacyPolicyLink>

src/features/UserAccount/components/ScoreSwitch/index.tsx

@@ -64,6 +64,7 @@ export const ScoreSwitch = ({ className }: Props) => {
         role='switch'
         onClick={toggleScore}
         aria-checked={isScoreHidden}
+        id='general_scores'
       >
         <Title t='hide_score' />
         <Icon

src/features/UserAccount/index.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 
-import { Route, Link } from 'react-router-dom'
+import { Route } from 'react-router-dom'
 
 import { PAGES } from 'config'
 import { isProduction } from 'config/env'
@@ -34,7 +34,6 @@ import {
   Navigations,
   StyledLink,
   UserAccountWrapper,
-  ScButtonGetHighlight,
 } from './styled'
 import { CompanyInfo } from '../CompanyInfo'
 import { PoweredByInsports } from './components/PoweredByInsports/PoweredByInsports'
@@ -58,14 +57,19 @@ const UserAccount = () => {
                 <StyledLink
                   disabled={user?.profile?.country_code === 'BR'}
                   to={`${PAGES.useraccount}/bank-cards`}
+                  id='personal_cards'
                 >
                   <T9n t='bank_card' />
                 </StyledLink>
-                <StyledLink to={`${PAGES.useraccount}/subscriptions`}>
+                <StyledLink
+                  to={`${PAGES.useraccount}/subscriptions`}
+                  id='personal_subscriptions'
+                >
                   <T9n t='my_subscriptions' />
                 </StyledLink>
                 <StyledLink
                   to={`${PAGES.useraccount}/payment-history`}
+                  id='personal_history'
                 >
                   <T9n t='payment_history' />
                 </StyledLink>
@@ -86,6 +90,7 @@ const UserAccount = () => {
               </Fragment>
             )}
             <ScoreSwitch />
+            {/* временно отключили
             {!client.disabledHighlights && (
               <Link to={`${PAGES.highlights}`}>
                 <ScButtonGetHighlight>
@@ -93,6 +98,7 @@ const UserAccount = () => {
                 </ScButtonGetHighlight>
               </Link>
             )}
+            */}
           </Navigations>
         </Aside>
         <ContentWrapper>

src/features/UserFavorites/index.tsx

@@ -83,6 +83,7 @@ export const UserFavorites = ({ marginTop }: Props) => {
               onFocus={getPosition}
               onMouseOver={getPosition}
               key={`${item.type}_${item.sport}_${item.id}`}
+              id='main_favourites'
             >
               <UserSportFavXWrapper
                 onClick={() => addRemoveFavorite({

src/helpers/bodyScrollLock/index.tsx

@@ -212,7 +212,8 @@ export const enableBodyScroll = (targetElement: HTMLElement | Element) => {
 
 // Disable body scroll locking
 export const disableBodyScroll = (
-  targetElement: HTMLElement | Element, options?: BodyScrollOptions,
+  targetElement: HTMLElement | Element,
+  options?: BodyScrollOptions,
 ) => {
   // targetElement must be provided
   if (!targetElement) {

src/pages/HighlightsPage/components/FormHighlights/hooks.tsx

@@ -378,7 +378,8 @@ export const useHighlightsForm = () => {
   useEffect(() => {
     formState?.selectedTeam?.id
     && getTeamPlayers(
-      formState?.sport?.id || playerHighlight.sportType, formState?.selectedTeam?.id
+      formState?.sport?.id || playerHighlight.sportType,
+      formState?.selectedTeam?.id
         || playerHighlight?.profile?.additionalInfo?.id,
     )
       .then((state) => {

src/requests/getSelectedSubscriptions.tsx

@@ -2,8 +2,7 @@ import { callApi } from 'helpers'
 import { Subscriptions } from './getSubscriptions'
 import { API_ROOT } from '../config'
 
-export const getSelectedSubscriptions = async (
-): Promise<Subscriptions> => {
+export const getSelectedSubscriptions = async (): Promise<Subscriptions> => {
   const config = {
     method: 'GET',
   }

src/requests/getTeamPlayers.tsx

@@ -21,8 +21,10 @@ export type Player = {
   weight: string | number | null,
 }
 
-export const getTeamPlayers = (_p_sport_id: number,
-  _p_team_id: number)
+export const getTeamPlayers = (
+  _p_sport_id: number,
+  _p_team_id: number,
+)
 : Promise<Array<Player>> => {
   const config = {
     body: {