feat(#ott-2640): pre-release rework

src/config/clients/index.tsx

@@ -6,6 +6,8 @@ import { lff } from './lff'
 
 export const currentClient = process.env.REACT_APP_CLIENT || 'instat'
 
+export const isLffClient = currentClient === 'lff'
+
 const clients = {
   facr,
   instat,

src/config/clients/lff.tsx

@@ -42,6 +42,6 @@ export const lff: ClientConfig = {
     `,
   },
   termsLink: '/terms-and-conditions?client_id=lff-ott-web',
-  title: 'InStat TV - The Home of Sports Streaming',
+  title: 'Latvijas Futbola federācija',
   userAccountLinksDisabled: true,
 }

src/features/CompanyInfo/config.tsx

@@ -6,4 +6,5 @@ export const lexics = [
   18084,
   18170,
   19588,
+  19590,
 ]

src/features/CompanyInfo/index.tsx

@@ -39,6 +39,14 @@ export const CompanyInfo = ({
             </CompanyInfoText>
           </Fragment>
         )
+      case ClientNames.Lff:
+        return (
+          <Fragment>
+            <CompanyInfoText>
+              <T9n t='19590' />
+            </CompanyInfoText>
+          </Fragment>
+        )
       default:
         return (
           <Fragment>

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

@@ -77,6 +77,7 @@ export const DateButton = styled(BaseButton)<DateButtonProps>`
   width: 1.3rem;
   height: 1.26rem;
   color: ${({ theme: { colors } }) => colors.dateButton};
+  margin-left: 10px;
   
   ${isMobileDevice
     ? css`

src/features/HeaderMobile/index.tsx

@@ -1,6 +1,7 @@
 import { useRecoilValue } from 'recoil'
 
 import { isIOS } from 'config/userAgent'
+import { isLffClient } from 'config/clients'
 
 import { HeaderMenu } from 'features/HeaderMenu'
 import { DateFilter } from 'features/HeaderFilters'
@@ -34,7 +35,7 @@ export const HeaderMobile = ({ isOpenDownload, setIsOpenDownload }: HeaderBanner
         <HeaderMenu />
         <DateFilter />
         <ScSportsWrapper>
-          {isSportFilterShown ? <SportsFilter /> : null}
+          {!isLffClient && isSportFilterShown ? <SportsFilter /> : null}
           <ScoreSwitchWrapper>
             <ScoreSwitch />
           </ScoreSwitchWrapper>

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

@@ -1,5 +1,7 @@
 import { useRecoilValue } from 'recoil'
 
+import { isLffClient } from 'config/clients'
+
 import { SportsFilter } from 'features/SportsFilter'
 import { SelectFilter } from 'components/SelectFilter'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
@@ -57,7 +59,7 @@ export const HeaderFilters = () => {
           />
         </>
       )}
-      {isShowTournament && isSportFilterShown && <SportsFilter />}
+      {!isLffClient && isShowTournament && isSportFilterShown && <SportsFilter />}
 
       {isShowTournament && (
         <ScFilterItemsWrap>

src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx

@@ -4,6 +4,7 @@ import { useLocation, useRouteMatch } from 'react-router'
 import getUnixTime from 'date-fns/getUnixTime'
 
 import { ProfileTypes, PAGES } from 'config'
+import { isLffClient } from 'config/clients'
 
 import type { Match } from 'features/Matches'
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
@@ -11,6 +12,7 @@ import { useName } from 'features/Name'
 import { T9n } from 'features/T9n'
 import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
 import { useUserFavoritesStore } from 'features/UserFavorites/store'
+import { getCardColor } from 'helpers/getCardColor'
 
 import { NoAccessMessage } from '../../NoAccessMessage'
 import { getPrepareTimeFormat } from '../../helpers'
@@ -91,8 +93,8 @@ export const CardFrontsideMobile = ({
     <CardWrapperOuter onClick={onClick} onKeyPress={onKeyPress}>
       <CardWrapper>
         <HoverFrame />
-        <PreviewWrapper>
+        <PreviewWrapper isGradientPreview={isLffClient} color={getCardColor(tournament.id)}>
-          {previewImage && (
+          {!isLffClient && previewImage && (
             <Preview title={tournamentName} src={previewImage} />
           )}
           {access === MatchAccess.NoCountryAccess ? (

src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx

@@ -64,11 +64,19 @@ export const HoverFrame = styled.div`
   }
 `
 
-export const PreviewWrapper = styled.div`
+type TPreviewWrapper = {
+  color?: string,
+  isGradientPreview?: boolean,
+}
+
+export const PreviewWrapper = styled.div<TPreviewWrapper>`
   position: relative;
   display: flex;
   width: 100%;
   height: 60%;
+  ${({ color, isGradientPreview }) => isGradientPreview
+    && css`
+    background: ${color};`}
   ${isMobileDevice
     ? css`
         width: 40%;

src/features/MatchCard/CardFrontside/index.tsx

@@ -4,7 +4,9 @@ import { useLocation, useRouteMatch } from 'react-router'
 import getUnixTime from 'date-fns/getUnixTime'
 
 import { ProfileTypes, PAGES } from 'config'
+import { isLffClient } from 'config/clients'
 
+import { getCardColor } from 'helpers/getCardColor'
 import type { Match } from 'features/Matches'
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
 import { useName } from 'features/Name'
@@ -98,8 +100,8 @@ export const CardFrontside = ({
     >
       <CardWrapper isMatchPage={isMatchPage}>
         <HoverFrame />
-        <PreviewWrapper>
+        <PreviewWrapper isGradientPreview={isLffClient} color={getCardColor(tournament.id)}>
-          {previewImage && (
+          {!isLffClient && previewImage && (
             <Preview
               title={tournamentName}
               src={previewImage}

src/features/MatchCard/styled.tsx

@@ -66,12 +66,19 @@ export const HoverFrame = styled.div`
     border: 2px solid #fff
   }
 `
+type TPreviewWrapper = {
+  color?: string,
+  isGradientPreview?: boolean,
+}
 
-export const PreviewWrapper = styled.div`
+export const PreviewWrapper = styled.div<TPreviewWrapper>`
   position: relative;
   display: flex;
   width: 100%;
   height: 60%;
+  ${({ color, isGradientPreview }) => isGradientPreview
+    && css`
+    background: ${color};`}
   ${isMobileDevice
     ? css`
       width: 50%;

src/features/PageLayout/styled.tsx

@@ -34,5 +34,5 @@ export const BodyBackdrop = styled.div`
   background-color: rgba(0, 0, 0, 0.7);
   width: 100vw;
   height: calc(100vh - 8.5rem);
-  z-index: 1;
+  z-index: 2;
 `

src/features/ProfileCard/index.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'
 import type { ObjectWithName } from 'features/Name'
 
 import { PAGES, ProfileTypes } from 'config'
-import { client } from 'config/clients'
+import { client, isLffClient } from 'config/clients'
 import { ClientNames } from 'config/clients/types'
 
 import { checkPage } from 'helpers/checkPage'
@@ -91,7 +91,7 @@ export const ProfileCard = ({ profile }: ProfileType) => {
             <StarIcon isFavorite={isFavorite} />
             <T9n t='add_to_favorites' />
           </FavoriteButton>
-          {isPlayerPage && isGetHighLightShown && (
+          {!isLffClient && isPlayerPage && isGetHighLightShown && (
             <Link to={PAGES.highlights}>
               <SсGetHighlightBtn
                 onClick={() => setPlayerHighlight({

src/features/ProfileHeader/hooks.tsx

@@ -40,6 +40,10 @@ export const useProfileColor = (profileId?: number) => {
   ) {
     return getColor(profileId)
   }
+  const lffColorConfig = [928, 1620]
+  if (client.name === 'lff' && profileId && lffColorConfig.includes(profileId)) {
+    return getColor(profileId)
+  }
 
   return color
 }

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

@@ -1,4 +1,6 @@
-import { useState } from 'react'
+import { Fragment, useState } from 'react'
+
+import { isLffClient } from 'config/clients'
 
 import { SportIcon } from 'components/SportIcon/SportIcon'
 import { T9n } from 'features/T9n'
@@ -44,10 +46,14 @@ export const TournamentMobile = ({
         open={open}
       >
         <ScFirstInfo>
+          {!isLffClient && (
+            <Fragment>
               <SportIcon fill={open ? '#ffffff' : ''} sport={sportType} />
               <CountryFlag
                 src={`https://instatscout.com/images/flags/48/${countryId}.png`}
               />
+            </Fragment>
+          )}
           <TournamentName nameObj={tournament} />
           {isFavorite && (
             <FavoriteSign marginLeft={12} color={currentColor}>

src/features/TournamentSubtitle/index.tsx

@@ -1,9 +1,12 @@
+import { Fragment } from 'react'
+
 import { SportIcon } from 'components/SportIcon/SportIcon'
 
 import { useName } from 'features/Name'
 import { useUserFavoritesStore } from 'features/UserFavorites/store'
 
 import { ProfileTypes, SportTypes } from 'config'
+import { isLffClient } from 'config/clients'
 
 import { usePageParams } from 'hooks/usePageParams'
 
@@ -35,11 +38,15 @@ export const TournamentSubtitle = ({
 
   return (
     <Wrapper>
+      {!isLffClient && (
+        <Fragment>
           <SportIcon sport={sportType ?? sportTypeFromUrl} />
           <CountryFlag src={`https://instatscout.com/images/flags/48/${countryId}.png`} />
+        </Fragment>
+      )}
       {tournament && (
         <NameSignWrapper>
-          <TournamentName title={tournamentName}>
+          <TournamentName isLeftSide={isLffClient} title={tournamentName}>
             {tournamentName}
           </TournamentName>
           {tournamentInFavorites && <FavoriteSign marginLeft={12} />}

src/features/TournamentSubtitle/styled.tsx

@@ -34,12 +34,16 @@ const nameStyles = css`
   overflow: hidden;
 `
 
-export const TournamentName = styled.span`
+type TTournamentName = {
+  isLeftSide?: boolean,
+}
+
+export const TournamentName = styled.span<TTournamentName>`
   max-width: 95%;
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.567rem;
   line-height: 0.95rem;
-  margin-left: 0.567rem;
+  margin-left: ${({ isLeftSide }) => (isLeftSide ? '0px' : '0.567rem')};
   ${isMobileDevice
     ? css`
       font-size: 10px;

src/features/UserAccount/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { Fragment, useMemo } from 'react'
 
 import { Route, Link } from 'react-router-dom'
 
@@ -14,7 +14,7 @@ import { usePageLogger } from 'hooks/usePageLogger'
 import { useLexicsConfig } from 'features/LexicsStore'
 import { T9n } from 'features/T9n'
 
-import { client } from 'config/clients'
+import { client, isLffClient } from 'config/clients'
 import { Header } from './components/Header'
 import { PagePersonalInfo } from './components/PagePersonalInfo'
 import { PageBankCards } from './components/PageBankCards'
@@ -56,6 +56,8 @@ const UserAccount = () => {
             <StyledLink to={`${PAGES.useraccount}/personal-info`}>
               <T9n t='personal_info' />
             </StyledLink>
+            {!isLffClient && (
+              <Fragment>
                 <StyledLink
                   disabled={user?.profile?.country_code === 'BR'}
                   to={`${PAGES.useraccount}/bank-cards`}
@@ -84,9 +86,10 @@ const UserAccount = () => {
                     <T9n t='about_the_project' />
                   </StyledLink>
                 )}
-
+              </Fragment>
+            )}
             <ScoreSwitch />
-            {isAvailableToClient && (
+            {!isLffClient && isAvailableToClient && (
               <Link to={`${PAGES.highlights}`}>
                 <ScButtonGetHighlight>
                   <T9n t='get_highlights' />

src/helpers/getCardColor/index.tsx

@@ -0,0 +1,18 @@
+import { isMobileDevice } from 'config/userAgent'
+
+const degree = isMobileDevice ? '270deg' : '0deg'
+
+export const getCardColor = (id: number | undefined): string => {
+  const defaultColor = 'none'
+
+  if (!id) return defaultColor
+
+  switch (id) {
+    case 928:
+      return `linear-gradient(${degree}, rgba(63,63,63,1) 35%, rgba(49,186,177,1) 100%);`
+    case 1620:
+      return `linear-gradient(${degree}, rgba(63,63,63,1) 35%, rgba(96,24,75,1) 100%);`
+    default:
+      return defaultColor
+  }
+}

src/helpers/getColor/index.ts

@@ -14,6 +14,10 @@ export const getColor = (id: number | undefined): string => {
       return 'linear-gradient(83.42deg, #000000 53.04%, #000000 94.83%), #000000'
     case 3067:
       return 'linear-gradient(83.42deg, #007179 53.04%, #007179 94.83%), #000000'
+    case 928:
+      return 'linear-gradient(90deg, rgba(21,83,79,1) 0%, rgba(49,186,177,1) 100%);'
+    case 1620:
+      return 'linear-gradient(90deg, rgba(47,4,39,1) 0%, rgba(96,24,75,1) 100%);'
     case 5665:
     case 23:
     case 2719: