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

@@ -70,14 +70,15 @@ type DateButtonProps = {
   isActive: boolean,
 }
 
-export const DateButton = styled(BaseButton)<DateButtonProps>`
+export const DateButton = styled(BaseButton) <DateButtonProps>`
   position: absolute;
   top: 0.2rem;
   right: 4.6rem;
   width: 1.3rem;
   height: 1.26rem;
   color: ${({ theme: { colors } }) => colors.dateButton};
-
+  margin-left: 10px;
+  
   ${isMobileDevice
     ? css`
       position: static;
@@ -135,7 +136,7 @@ type WeekDayProps = {
   selected?: boolean,
 }
 
-export const WeekDay = styled(BaseButton)<WeekDayProps>`
+export const WeekDay = styled(BaseButton) <WeekDayProps>`
   width: 4rem;
   display: flex;
   flex-direction: column;

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>
-          {previewImage && (
+        <PreviewWrapper isGradientPreview={isLffClient} color={getCardColor(tournament.id)}>
+          {!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%;
@@ -139,7 +147,7 @@ type LiveType = {
   color?: string,
 }
 
-export const LiveSign = styled(MatchDate)<LiveType>`
+export const LiveSign = styled(MatchDate) <LiveType>`
   background-color: ${({ color }) => color ?? '#CC0000'};
   margin-left: auto;
   

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>
-          {previewImage && (
+        <PreviewWrapper isGradientPreview={isLffClient} color={getCardColor(tournament.id)}>
+          {!isLffClient && previewImage && (
             <Preview
               title={tournamentName}
               src={previewImage}

src/features/MatchCard/styled.tsx

@@ -12,7 +12,7 @@ type CardProps = {
 
 export const CardWrapperOuter = styled.li.attrs({
   tabIndex: 0,
-})<CardProps>`
+}) <CardProps>`
   padding-top: ${({ isMatchPage }) => (isMatchPage ? 0 : '100%')};
   position: relative;
 
@@ -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>
-          <SportIcon fill={open ? '#ffffff' : ''} sport={sportType} />
-          <CountryFlag
-            src={`https://instatscout.com/images/flags/48/${countryId}.png`}
-          />
+          {!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}>
@@ -67,9 +73,9 @@ export const TournamentMobile = ({
       </CardWrapper>
       <ScMatchesWrapper>
         {open
-        && tournamentMatches?.map((match: Match) => (
-          <MatchCard key={match.id} match={match} />
-        ))}
+          && tournamentMatches?.map((match: Match) => (
+            <MatchCard key={match.id} match={match} />
+          ))}
       </ScMatchesWrapper>
     </CardWrapperOuter>
   )

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>
-      <SportIcon sport={sportType ?? sportTypeFromUrl} />
-      <CountryFlag src={`https://instatscout.com/images/flags/48/${countryId}.png`} />
+      {!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,37 +56,40 @@ const UserAccount = () => {
             <StyledLink to={`${PAGES.useraccount}/personal-info`}>
               <T9n t='personal_info' />
             </StyledLink>
-            <StyledLink
-              disabled={user?.profile?.country_code === 'BR'}
-              to={`${PAGES.useraccount}/bank-cards`}
-            >
-              <T9n t='bank_card' />
-            </StyledLink>
-            <StyledLink to={`${PAGES.useraccount}/subscriptions`}>
-              <T9n t='my_subscriptions' />
-            </StyledLink>
-            <StyledLink
-              to={`${PAGES.useraccount}/payment-history`}
-            >
-              <T9n t='payment_history' />
-            </StyledLink>
-            <StyledLink
-              disabled={isProduction || client.userAccountLinksDisabled}
-              to={`${PAGES.useraccount}/devices`}
-            >
-              <T9n t='my_devices' />
-            </StyledLink>
-            {isAvailableToClient && (
-              <StyledLink
-                target='_blank'
-                to={{ pathname: PAGES.about_the_project }}
-              >
-                <T9n t='about_the_project' />
-              </StyledLink>
+            {!isLffClient && (
+              <Fragment>
+                <StyledLink
+                  disabled={user?.profile?.country_code === 'BR'}
+                  to={`${PAGES.useraccount}/bank-cards`}
+                >
+                  <T9n t='bank_card' />
+                </StyledLink>
+                <StyledLink to={`${PAGES.useraccount}/subscriptions`}>
+                  <T9n t='my_subscriptions' />
+                </StyledLink>
+                <StyledLink
+                  to={`${PAGES.useraccount}/payment-history`}
+                >
+                  <T9n t='payment_history' />
+                </StyledLink>
+                <StyledLink
+                  disabled={isProduction || client.userAccountLinksDisabled}
+                  to={`${PAGES.useraccount}/devices`}
+                >
+                  <T9n t='my_devices' />
+                </StyledLink>
+                {isAvailableToClient && (
+                  <StyledLink
+                    target='_blank'
+                    to={{ pathname: PAGES.about_the_project }}
+                  >
+                    <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: