fix(#2598): modernization of facr tv

src/features/CompanyInfo/config.tsx

@@ -1,7 +1,9 @@
 export const lexics = [
+  16689,
   18081,
   18082,
   18083,
   18084,
   18170,
+  19588,
 ]

src/features/CompanyInfo/index.tsx

@@ -1,6 +1,11 @@
+import { Fragment, useMemo } from 'react'
+
 import { T9n } from 'features/T9n'
 import { useLexicsConfig } from 'features/LexicsStore'
+
 import { PAGES } from 'config'
+import { client } from 'config/clients'
+import { ClientNames } from 'config/clients/types'
 
 import {
   CompanyInfoLink,
@@ -20,26 +25,48 @@ export const CompanyInfo = ({
 }: TCompanyInfo) => {
   useLexicsConfig(lexics)
 
+  const companyInfoContent = useMemo(() => {
+    switch (client.name) {
+      case ClientNames.Facr:
+        return (
+          <Fragment>
+            <CompanyInfoText>
+              <T9n t='16689' />
+            </CompanyInfoText>
+            <CompanyInfoText>
+              <T9n t='19588' />
+            </CompanyInfoText>
+          </Fragment>
+        )
+      default:
+        return (
+          <Fragment>
+            <CompanyInfoText>
+              <T9n t='18081' />{' | '}
+              <CompanyInfoLink
+                to={{ pathname: PAGES.about_the_project }}
+                target='_blank'
+              >
+                <T9n t='18170' />
+              </CompanyInfoLink>
+            </CompanyInfoText>
+            <CompanyInfoText>
+              <T9n t='18082' />
+            </CompanyInfoText>
+            <CompanyInfoText>
+              <T9n t='18083' />
+            </CompanyInfoText>
+            <CompanyInfoText>
+              <T9n t='18084' />
+            </CompanyInfoText>
+          </Fragment>
+        )
+    }
+  }, [])
+
   return (
     <CompanyInfoWrapper style={{ maxWidth: width, textAlign }}>
-      <CompanyInfoText>
+      {companyInfoContent}
-        <T9n t='18081' />{' | '}
-        <CompanyInfoLink
-          to={{ pathname: PAGES.about_the_project }}
-          target='_blank'
-        >
-          <T9n t='18170' />
-        </CompanyInfoLink>
-      </CompanyInfoText>
-      <CompanyInfoText>
-        <T9n t='18082' />
-      </CompanyInfoText>
-      <CompanyInfoText>
-        <T9n t='18083' />
-      </CompanyInfoText>
-      <CompanyInfoText>
-        <T9n t='18084' />
-      </CompanyInfoText>
     </CompanyInfoWrapper>
   )
 }

src/features/HeaderMobile/index.tsx

@@ -1,17 +1,30 @@
+import { useRecoilValue } from 'recoil'
+
 import { HeaderMenu } from 'features/HeaderMenu'
 import { DateFilter } from 'features/HeaderFilters'
 import { ScoreSwitch } from 'features/MatchSwitches'
 import { SportsFilter } from 'features/SportsFilter'
+import { isSportFilterShownAtom } from 'features/HomePage/Atoms/HomePageAtoms'
+
+import {
+  HeaderStyled,
+  ScoreSwitchWrapper,
+  ScSportsWrapper,
+} from './styled'
 
-import { HeaderStyled, ScSportsWrapper } from './styled'
+export const HeaderMobile = () => {
+  const isSportFilterShown = useRecoilValue(isSportFilterShownAtom)
 
-export const HeaderMobile = () => (
+  return (
-  <HeaderStyled>
+    <HeaderStyled>
-    <HeaderMenu />
+      <HeaderMenu />
-    <DateFilter />
+      <DateFilter />
-    <ScSportsWrapper>
+      <ScSportsWrapper>
-      <SportsFilter />
+        {isSportFilterShown ? <SportsFilter /> : null}
-      <ScoreSwitch />
+        <ScoreSwitchWrapper>
-    </ScSportsWrapper>
+          <ScoreSwitch />
-  </HeaderStyled>
+        </ScoreSwitchWrapper>
-)
+      </ScSportsWrapper>
+    </HeaderStyled>
+  )
+}

src/features/HeaderMobile/styled.tsx

@@ -210,3 +210,7 @@ export const ScSport = styled.div<SportProps>`
   margin-top: 18px;
   cursor: pointer;
 `
+
+export const ScoreSwitchWrapper = styled.div`
+  margin-left: auto;
+`

src/features/HomePage/Atoms/HomePageAtoms.tsx

@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const isSportFilterShownAtom = atom({
+  default: true,
+  key: 'isSportFilterShownAtom',
+})

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

@@ -1,3 +1,5 @@
+import { useRecoilValue } from 'recoil'
+
 import { SportsFilter } from 'features/SportsFilter'
 import { SelectFilter } from 'components/SelectFilter'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
@@ -10,6 +12,8 @@ import {
   ScFilterItem,
 } from './styled'
 
+import { isSportFilterShownAtom } from '../../Atoms/HomePageAtoms'
+
 export const HeaderFilters = () => {
   const {
     isShowTournament,
@@ -19,6 +23,7 @@ export const HeaderFilters = () => {
     setSelectedFilters,
     setSelectedLeague,
   } = useHeaderFiltersStore()
+  const isSportFilterShown = useRecoilValue(isSportFilterShownAtom)
 
   const isActiveFilter = (filterItem: string) => selectedFilters.indexOf(filterItem) >= 0
 
@@ -52,7 +57,7 @@ export const HeaderFilters = () => {
           />
         </>
       )}
-      {isShowTournament && <SportsFilter />}
+      {isShowTournament && isSportFilterShown && <SportsFilter />}
 
       {isShowTournament && (
         <ScFilterItemsWrap>

src/features/HomePage/hooks.tsx

@@ -5,11 +5,18 @@ import {
 } from 'react'
 import format from 'date-fns/format'
 
-import { getHomeMatches } from 'requests/getMatches'
+import { useSetRecoilState } from 'recoil'
+
+import { client } from 'config/clients'
+import { ClientNames } from 'config/clients/types'
+
 import { useAuthStore } from 'features/AuthStore'
+import { useHeaderFiltersStore } from 'features/HeaderFilters'
+
+import { getHomeMatches } from 'requests/getMatches'
 import { getAgreements, setAgreements } from 'requests/getAgreements'
 
-import { useHeaderFiltersStore } from 'features/HeaderFilters'
+import { isSportFilterShownAtom } from './Atoms/HomePageAtoms'
 
 /**
  * возвращает смещение в минутах относительно UTC
@@ -29,6 +36,7 @@ export const useHomePage = () => {
   const { user } = useAuthStore()
   const { selectedDate } = useHeaderFiltersStore()
   const [isShowConfirmPopup, setIsShowConfirmPopup] = useState(false)
+  const setIsSportFilterShown = useSetRecoilState(isSportFilterShownAtom)
 
   const handleCloseConfirmPopup = useCallback(async () => {
     await setAgreements(user?.profile?.email || '')
@@ -54,6 +62,13 @@ export const useHomePage = () => {
     }),
     [selectedDate],
   )
+
+  useEffect(() => {
+    if (client.name === ClientNames.Facr) {
+      setIsSportFilterShown(false)
+    }
+  }, [setIsSportFilterShown])
+
   return {
     fetchMatches,
     handleCloseConfirmPopup,

src/features/ProfileCard/index.tsx

@@ -1,8 +1,12 @@
+import { useMemo } from 'react'
+
 import { Link } from 'react-router-dom'
 
 import type { ObjectWithName } from 'features/Name'
 
 import { PAGES, ProfileTypes } from 'config'
+import { client } from 'config/clients'
+import { ClientNames } from 'config/clients/types'
 
 import { checkPage } from 'helpers/checkPage'
 
@@ -49,6 +53,15 @@ export const ProfileCard = ({ profile }: ProfileType) => {
   const tournamentId = profile.additionalInfo?.tournamentId
   const isPlayerPage = checkPage(PAGES.player)
 
+  const isGetHighLightShown = useMemo(() => {
+    switch (client.name) {
+      case ClientNames.Facr:
+        return false
+      default:
+        return true
+    }
+  }, [])
+
   return (
     <Wrapper>
       <Logo
@@ -78,7 +91,7 @@ export const ProfileCard = ({ profile }: ProfileType) => {
             <StarIcon isFavorite={isFavorite} />
             <T9n t='add_to_favorites' />
           </FavoriteButton>
-          {isPlayerPage && (
+          {isPlayerPage && isGetHighLightShown && (
             <Link to={PAGES.highlights}>
               <SсGetHighlightBtn
                 onClick={() => setPlayerHighlight({

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

@@ -1,6 +1,9 @@
+import { useMemo } from 'react'
+
 import { client } from 'config/clients'
 import { formIds } from 'config/form'
 import { AUTH_SERVICE } from 'config/routes'
+import { ClientNames } from 'config/clients/types'
 
 import { Combobox } from 'features/Combobox'
 import { Input } from 'features/Common'
@@ -43,6 +46,15 @@ export const PersonalInfoForm = (props: Props) => {
     updateFormValue,
   } = useUserInfo(props)
 
+  const isPrivacyPolicyShown = useMemo(() => {
+    switch (client.name) {
+      case ClientNames.Facr:
+        return false
+      default:
+        return true
+    }
+  }, [])
+
   return (
     <Form>
       <Input
@@ -118,12 +130,14 @@ export const PersonalInfoForm = (props: Props) => {
         >
           <T9n t='terms_and_conditions' />
         </PrivacyPolicyLink>
-        <PrivacyPolicyLink
+        {isPrivacyPolicyShown && (
-          target='_blank'
+          <PrivacyPolicyLink
-          href={`${AUTH_SERVICE}${client.privacyLink}`}
+            target='_blank'
-        >
+            href={`${AUTH_SERVICE}${client.privacyLink}`}
-          <T9n t='privacy_policy_and_statement' />
+          >
-        </PrivacyPolicyLink>
+            <T9n t='privacy_policy_and_statement' />
+          </PrivacyPolicyLink>
+        )}
       </PrivacyWrapper>
     </Form>
   )

src/features/UserAccount/index.tsx

@@ -1,8 +1,12 @@
+import { useMemo } from 'react'
+
 import { Route, Link } from 'react-router-dom'
 
 import { PAGES } from 'config'
 import { isProduction } from 'config/env'
 import { userAccountLexics } from 'config/lexics/userAccount'
+import { ClientNames } from 'config/clients/types'
+
 import { useAuthStore } from 'features/AuthStore'
 
 import { usePageLogger } from 'hooks/usePageLogger'
@@ -34,6 +38,15 @@ const UserAccount = () => {
   usePageLogger(PAGES.useraccount)
   useLexicsConfig(userAccountLexics)
 
+  const isGetHighLightShown = useMemo(() => {
+    switch (client.name) {
+      case ClientNames.Facr:
+        return false
+      default:
+        return true
+    }
+  }, [])
+
   return (
     <UserAccountWrapper>
       <Header />
@@ -71,11 +84,13 @@ const UserAccount = () => {
             </StyledLink>
 
             <ScoreSwitch />
-            <Link to={`${PAGES.highlights}`}>
+            {isGetHighLightShown && (
-              <ScButtonGetHighlight>
+              <Link to={`${PAGES.highlights}`}>
-                <T9n t='get_highlights' />
+                <ScButtonGetHighlight>
-              </ScButtonGetHighlight>
+                  <T9n t='get_highlights' />
-            </Link>
+                </ScButtonGetHighlight>
+              </Link>
+            )}
           </Navigations>
         </Aside>
         <ContentWrapper>