add client insports

src/config/clients/index.tsx

@@ -1,16 +1,17 @@
 import type { ClientConfig } from './types'
 
 import { facr } from './facr'
-import { instat } from './instat'
+import { instat, insports } from './instat'
 import { lff } from './lff'
 
-export const currentClient = process.env.REACT_APP_CLIENT || 'instat'
+export const currentClient = process.env.REACT_APP_CLIENT || 'insports'
 
 export const isLffClient = currentClient === 'lff'
 
 const clients = {
   facr,
   instat,
+  insports,
   lff,
 }
 

src/config/clients/instat.tsx

@@ -44,3 +44,43 @@ export const instat: ClientConfig = {
   termsLink: '/terms-and-conditions',
   title: 'InStat TV - The Home of Sports Streaming',
 }
+
+export const insports: ClientConfig = {
+  auth: {
+    clientId: ClientIds.Instat,
+  },
+  defaultLanguage: 'en',
+  description: 'Live sports streaming platform. Football, basketball, ice hockey and more. Access to various player playlists and game highlights. Multiple subscription options. Available across all devices.',
+  disabledPreferences: true,
+  name: ClientNames.Insports,
+  privacyLink: '/privacy-policy-and-statement',
+  showSearch: true,
+  styles: {
+    background: 'background-image: url(/images/Checker.png);',
+    logo: 'logo.svg',
+    logoHeight: 1.465,
+    logoLeft: 1.7,
+    logoTop: 1.5,
+    logoWidth: 6.37,
+    matchLogoHeight: 1.465,
+    matchLogoWidth: 6.37,
+    matchPageMobileHeaderLogo: css`
+      width: 65px;
+      height: 15px;
+    `,
+    mobileHeaderLogo: css`
+      width: 84px;
+      height: 20px;
+      @media screen and (orientation: landscape){
+        width: 92px;
+        height: 22px;
+      }
+    `,
+    userAccountLogo: css`
+      width: 6.37rem;
+      height: 1.465rem;
+    `,
+  },
+  termsLink: '/terms-and-conditions',
+  title: 'InStat TV - The Home of Sports Streaming',
+}

src/config/clients/types.tsx

@@ -8,12 +8,14 @@ export enum ClientIds {
   Facr = 'facr-ott-web',
   Instat = 'ott-web',
   Lff = 'lff-ott-web',
+  Insports = 'ott-web',
 }
 
 export enum ClientNames {
   Facr = 'facr',
   Instat = 'instat',
   Lff = 'lff',
+  Insports = 'insports',
 }
 
 export type ClientConfig = {

src/features/AuthServiceApp/config/clients/index.tsx

@@ -1,15 +1,17 @@
-import { ClientIds } from 'config/clients/types'
+import { ClientIds, ClientNames } from 'config/clients/types'
 
 import { facr } from './facr'
-import { instat } from './instat'
+import { instat, insports } from './instat'
 import { lff } from './lff'
 
 const clients = {
   [ClientIds.Facr]: facr,
   [ClientIds.Instat]: instat,
   [ClientIds.Lff]: lff,
+  [ClientIds.Insports]: insports,
 }
+
 const params = new URLSearchParams(window.location.search)
 const clientId = params.get('client_id') as ClientIds
 
-export const client = clients[clientId] || instat
+export const client = clients[clientId] || insports

src/features/AuthServiceApp/config/clients/instat.tsx

@@ -39,3 +39,36 @@ export const instat: ClientConfig = {
     `,
   },
 }
+
+export const insports: ClientConfig = {
+  ...platformInstat,
+  background: Background,
+  styles: {
+    centerBlock: css`
+      margin-top: 9.15rem;
+      ${isMobileDevice ? css`
+        margin-top: 107px;
+        @media screen and (orientation: landscape) {
+          width: 290px;
+          margin: auto;
+        }
+      ` : ''};
+    `,
+    logo: css`
+      background-image: url(/images/logo.svg);
+      height: 54px;
+      width: 234px;
+      margin-bottom: 1.82rem;
+
+      ${isMobileDevice ? css`
+          margin-bottom: 78px;
+          width: 207px;
+          height: 48px;
+          @media screen and (orientation: landscape){
+            width: 92px;
+            height: 22px;
+          }
+        ` : ''}
+    `,
+  },
+}

src/features/AuthStore/helpers.tsx

@@ -22,8 +22,10 @@ export const getClientNameByRedirectUri = () => {
       return 'lff.instat'
     case ClientNames.Facr:
       return ClientNames.Facr
-    default:
+    case ClientNames.Instat:
       return ClientNames.Instat
+    default:
+      return ClientNames.Insports
   }
 }
 

src/features/HeaderMobile/styled.tsx

@@ -18,7 +18,7 @@ export const defaultHeaderStyles = (
     return client.styles.homePageHeader
   }
 
-  if (headerImage && client.name === 'instat') {
+  if (headerImage && (client.name === 'instat' || client.name === 'insports')) {
     return css`background: url(${headerImage}.png);
       background-size: 100% 100%;
       @media (max-width: 450px){

src/features/ProfileHeader/styled.tsx

@@ -17,7 +17,7 @@ export const defaultHeaderStyles = (
     return client.styles.homePageHeader
   }
 
-  if (headerImage && client.name === 'instat') {
+  if (headerImage && (client.name === 'instat' || client.name === 'insports')) {
     return css`background: url(${headerImage}.png);
       background-size: 100% 100%;
       @media (max-width: 450px){

src/react-app-env.d.ts

@@ -3,7 +3,7 @@
 
 declare namespace NodeJS {
   export interface ProcessEnv {
-    REACT_APP_CLIENT: 'instat' | 'facr' | 'lff',
+    REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports',
     REACT_APP_ENV: 'production' | 'preproduction' | 'staging',
     REACT_APP_STAGE: 'staging' | 'a-staging' | 'b-staging' | 'c-staging' | 'd-staging' | 'e-staging' | 'f-staging' | 'g-staging' | 'h-staging' | 'i-staging',
     REACT_APP_TYPE: 'auth-service' | 'ott',