fix(#658): fqtv build

.drone.yml

@@ -203,6 +203,35 @@ steps:
     depends_on:
       - make-diwansport
 
+  - name: make-fqtv
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make fqtv-prod
+    depends_on:
+      - npm-install
+
+  - name: deploy-fqtv
+    image: amazon/aws-cli:latest
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: AWS_ACCESS_KEY_ID
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: AWS_SECRET_ACCESS_KEY
+      AWS_DEFAULT_REGION:
+        from_secret: AWS_DEFAULT_REGION
+      AWS_MAX_ATTEMPTS: 10
+    commands:
+      - aws s3 sync build_fqtv s3://insports-fqtv-com-au --delete
+      - aws cloudfront create-invalidation --distribution-id E2MFJBSBIUQSDH --paths "/*"  # # fqtv.insports.tv
+      - aws cloudfront create-invalidation --distribution-id E22TED4Z46Q01V --paths "/*"  # fqtv.com.au
+
+    depends_on:
+      - make-fqtv
+
 ---
 kind: pipeline
 type: docker

.gitignore

@@ -11,11 +11,7 @@
 /cypress/screenshots
 
 # production
-/build
+/build*
-/build_auth
-/build_india
-/build_facr
-/build_lff
 
 # misc
 .DS_Store

Makefile

@@ -135,6 +135,12 @@ tunisia-build: clean
     REACT_APP_ENV=staging \
     REACT_APP_CLIENT=tunisia \
     npm run build
+		
+fqtv-build: clean
+	REACT_APP_TYPE=ott \
+    REACT_APP_ENV=staging \
+    REACT_APP_CLIENT=fqtv \
+    npm run build
 
 lff-build: clean
 	REACT_APP_TYPE=ott \

package.json

@@ -19,6 +19,7 @@
     "lff": "REACT_APP_CLIENT=lff react-scripts start",
     "india": "REACT_APP_CLIENT=india react-scripts start",
     "tunisia": "REACT_APP_CLIENT=tunisia react-scripts start",
+    "fqtv": "REACT_APP_CLIENT=fqtv react-scripts start",
     "insports": "REACT_APP_CLIENT=insports react-scripts start"
   },
   "dependencies": {

src/config/clients/fqtv.tsx

@@ -0,0 +1,56 @@
+import { css } from 'styled-components/macro'
+import {
+  ClientConfig,
+  ClientIds,
+  ClientNames,
+} from './types'
+
+export const fqtv: ClientConfig = {
+  auth: {
+    clientId: ClientIds.Fqtv,
+  },
+  currencyBadge: {
+    color: '#333333',
+    secondColor: 'rgba(255, 255, 255, 0.7)',
+    sign: 'Dollar',
+  },
+  defaultLanguage: 'en',
+  description: 'Queensland’s streamed competitions, including NPL Men, NPL Women and McDonald\'s FQPL Leagues.',
+  disabledPreferences: true,
+  name: ClientNames.Fqtv,
+  privacyLink: '/privacy-policy-and-statement?client_id=insports-ott-web',
+  showSearch: true,
+  showSmartBanner: true,
+  styles: {
+    background: '',
+    homePageHeader: css`
+      background: linear-gradient(0deg, rgba(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)), 
+      linear-gradient(0deg, #0061DC, #0061DC), 
+      no-repeat center center url(/images/fqtv-background.png);
+      background-size: 130% 105%;
+      background-blend-mode: normal, hard-light, normal;
+    `,
+    logo: 'fqtv-logo.svg',
+    logoHeight: 2.465,
+    logoLeft: 0.71,
+    logoTop: 1,
+    logoWidth: 6.37,
+    matchLogoHeight: 2.465,
+    matchLogoWidth: 6.37,
+    matchPageMobileHeaderLogo: css`
+      width: 90px;
+      height: 27px;
+      top: 0;
+    `,
+    mobileHeaderLogo: css`
+      width: 86px;
+      height: 33px;
+    `,
+    userAccountLogo: css`
+      width: 6.37rem;
+      height: 2.465rem;
+    `,
+  },
+  termsLink: '/terms-and-conditions?client_id=insports-ott-web',
+  title: 'FQTV is the official home of Football',
+}

src/config/clients/index.tsx

@@ -6,6 +6,7 @@ import { lff } from './lff'
 import { insports } from './insports'
 import { india } from './india'
 import { tunisia } from './tunisia'
+import { fqtv } from './fqtv'
 
 export const currentClient = process.env.REACT_APP_CLIENT || 'insports'
 
@@ -15,9 +16,11 @@ export const isInstatClient = currentClient === 'instat'
 export const isFacrClient = currentClient === 'facr'
 export const isIndiaClient = currentClient === 'india'
 export const isTunisClient = currentClient === 'tunisia'
+export const isFqtvClient = currentClient === 'fqtv'
 
 const clients = {
   facr,
+  fqtv,
   india,
   insports,
   instat,

src/config/clients/types.tsx

@@ -7,6 +7,7 @@ type StyledCss = ReturnType<typeof css>
 
 export enum ClientIds {
   Facr = 'facr-ott-web',
+  Fqtv = 'fqtv-ott-web',
   India = 'india-ott-web',
   Insports = 'insports-ott-web',
   Instat = 'ott-web',
@@ -15,13 +16,14 @@ export enum ClientIds {
 }
 
 export enum ClientNames {
-  Brasil = 'brasil',
+  Brasil = 'brasil', // Бразилия
-  Facr = 'facr',
+  Facr = 'facr', // Чехия
-  India = 'india',
+  Fqtv = 'fqtv', // Австралия
-  Insports = 'insports',
+  India = 'india', // Индия
-  Instat = 'instat',
+  Insports = 'insports', // Глобал
-  Lff = 'lff',
+  Instat = 'instat', // Глобал
-  Tunisia = 'tunisia'
+  Lff = 'lff', // Латвия
+  Tunisia = 'tunisia' // Тунис
 }
 
 export type ClientConfig = {

src/config/payments.tsx

@@ -7,16 +7,23 @@ export enum PaymentSystem {
   Stripe = 'stripe'
 }
 
+export enum CountryCode {
+  BR = 'BR', // Бразилия
+  IN = 'IN', // Индия
+  TN = 'TN' // Тунис
+}
+
 type PaymentsType = {
   [key in ClientNames]: PaymentSystem
 }
 
 export const payments: PaymentsType = {
   [ClientNames.Tunisia]: PaymentSystem.Paymee,
-  brasil: PaymentSystem.PagBrazil,
+  [ClientNames.Brasil]: PaymentSystem.PagBrazil,
   [ClientNames.India]: PaymentSystem.Paytm,
   [ClientNames.Insports]: PaymentSystem.Stripe,
   [ClientNames.Instat]: PaymentSystem.Stripe,
   [ClientNames.Facr]: PaymentSystem.Stripe,
   [ClientNames.Lff]: PaymentSystem.Stripe,
+  [ClientNames.Fqtv]: PaymentSystem.Stripe,
 }

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

@@ -0,0 +1,67 @@
+import styled, { css } from 'styled-components/macro'
+
+import { fqtv as platformFqtv } from 'config/clients/fqtv'
+import { isMobileDevice } from 'config/userAgent'
+
+import type { ClientConfig } from './types'
+
+const Background = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  background: linear-gradient(0deg, rgba(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)), 
+    linear-gradient(0deg, #0061DC, #0061DC), 
+    no-repeat center center url(/images/fqtv-background.png);
+  background-size: 130% 105%;
+  background-blend-mode: normal, hard-light, normal;  
+`
+
+export const fqtv: ClientConfig = {
+  ...platformFqtv,
+  background: Background,
+  styles: {
+    centerBlock: css`
+      margin-top: 9.15rem;
+      ${isMobileDevice ? css`
+        margin-top: 107px;
+        @media screen and (orientation: landscape) {
+          width: 290px;
+          margin: auto;
+        }
+      ` : ''};
+    `,
+    forgotPasswordInput: css`
+      border: none;
+    `,
+    input: css`
+      background-color: transparent;
+      :not(:last-of-type) {
+        border-color: ${({ theme }) => theme.colors.white};
+      }
+    `,
+    inputGroup: css`
+      border: 1px solid ${({ theme }) => theme.colors.white};
+    `,
+    logo: css`
+      background-image: url(/images/fqtv-auth-logo.svg);
+      background-position: center;
+      height: 142px;
+      width: 378px;
+      margin-bottom: 1.82rem;
+      
+      ${isMobileDevice ? css`
+          margin-bottom: 15px;
+          width: 200px;
+          height: 74px;
+        ` : ''}
+    `,
+    submitButton: css`
+      :disabled {
+        background: #FFFFFF;
+        color: #00244F;
+      }
+    `,
+  },
+}

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

@@ -6,9 +6,11 @@ import { instat } from './instat'
 import { lff } from './lff'
 import { india } from './india'
 import { tunisia } from './tunisia'
+import { fqtv } from './fqtv'
 
 const clients = {
   [ClientIds.Facr]: facr,
+  [ClientIds.Fqtv]: fqtv,
   [ClientIds.Instat]: instat,
   [ClientIds.Lff]: lff,
   [ClientIds.Insports]: insports,

src/features/AuthStore/helpers.tsx

@@ -27,6 +27,8 @@ export const getClientNameByRedirectUri = () => {
       return 'india.insports'
     case ClientNames.Tunisia:
       return 'diwan.insports'
+    case ClientNames.Fqtv:
+      return 'fqtv.insports'
     case ClientNames.Facr:
       return ClientNames.Facr
     case ClientNames.Instat:
@@ -38,6 +40,7 @@ export const getClientNameByRedirectUri = () => {
 
 const clientsForRedirect = {
   facr: ClientNames.Facr,
+  fqtv: ClientNames.Fqtv,
   india: ClientNames.India,
   lff: ClientNames.Lff,
   tunisia: ClientNames.Tunisia,

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

@@ -9,7 +9,7 @@ import {
 import isNull from 'lodash/isNull'
 
 import { MDASH } from 'config'
-import { payments } from 'config/payments'
+import { payments, CountryCode } from 'config/payments'
 import { client } from 'config/clients'
 
 import { CountryCodeType, getCountryCode } from 'requests/getCountryCode'
@@ -74,9 +74,9 @@ export const PackageSelectionStep = () => {
 
   const paymentSystem = useMemo(() => {
     switch (countryCode?.country_code) {
-      case 'BR':
+      case CountryCode.BR:
         return payments.brasil
-      case 'TN':
+      case CountryCode.TN:
         return payments.tunisia
       default:
         return payments[client.name]
@@ -85,8 +85,8 @@ export const PackageSelectionStep = () => {
 
   const isIframePayment = useMemo(() => {
     switch (countryCode?.country_code) {
-      case 'BR':
+      case CountryCode.BR:
-      case 'TN':
+      case CountryCode.TN:
         return true
       default:
         return false

src/features/Common/Button/styled.tsx

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
-import { client } from 'features/AuthServiceApp/config/clients'
 
 const baseButtonStyles = css`
   width: 272px;
@@ -54,7 +53,6 @@ export const solidButtonStyles = css`
     `
     : ''};  
   
-  ${client.styles.submitButton}
 `
 
 export const ButtonSolid = styled.button`

src/features/CompanyInfo/index.tsx

@@ -40,6 +40,7 @@ export const CompanyInfo = ({
           </Fragment>
         )
       case ClientNames.Tunisia:
+      case ClientNames.Fqtv:
         return ''
       case ClientNames.Lff:
         return (

src/features/HeaderMobile/styled.tsx

@@ -4,6 +4,7 @@ import isUndefined from 'lodash/isUndefined'
 
 import { client } from 'config/clients'
 import { isMobileDevice } from 'config/userAgent'
+import { ClientNames } from 'config/clients/types'
 
 import { ModalWindow } from 'features/Modal/styled'
 import { Modal as BaseModal } from 'features/Modal'
@@ -15,7 +16,12 @@ export const defaultHeaderStyles = (
   color: string = DEFAULT_HEADER_COLOR,
   headerImage: string | undefined | null,
 ) => {
-  if (['lff', 'tunisia'].includes(client.name)) {
+  if ([
+    ClientNames.Lff,
+    ClientNames.Tunisia,
+    ClientNames.Facr,
+    ClientNames.Fqtv,
+  ].includes(client.name)) {
     return client.styles.homePageHeader
   }
 
@@ -32,16 +38,16 @@ export const defaultHeaderStyles = (
     return css`
       background: ${color};
       z-index: 10;
-`
+  `
   }
-  return client.name === 'facr' ? client.styles.homePageHeader : css`
+  return css`
-  background: linear-gradient(
+    background: linear-gradient(
-    236deg,
+      236deg,
-    ${color} -4.49%,
+      ${color} -4.49%,
-    #000000 50%),
+      #000000 50%),
-    #000000;
+      #000000;
-  z-index: 10;
+    z-index: 10;
-`
+  `
 }
 
 type HeaderProps = {

src/features/ProfileHeader/styled.tsx

@@ -17,7 +17,12 @@ export const defaultHeaderStyles = (
   color: string = DEFAULT_HEADER_COLOR,
   headerImage: string | undefined | null,
 ) => {
-  if ([ClientNames.Lff, ClientNames.Tunisia, ClientNames.Facr].includes(client.name)
+  if ([
+    ClientNames.Lff,
+    ClientNames.Tunisia,
+    ClientNames.Facr,
+    ClientNames.Fqtv,
+  ].includes(client.name)
     && !isMatchPage()) {
     return client.styles.homePageHeader
   }
@@ -64,7 +69,10 @@ export const HeaderStyled = styled.header<HeaderProps>`
   ${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)}
 
   ${({ color }) => (
-    client.name === ClientNames.Lff || client.name === ClientNames.Facr || client.name === ClientNames.Tunisia ? css`
+    client.name === ClientNames.Lff
+    || client.name === ClientNames.Facr
+    || client.name === ClientNames.Fqtv
+    || client.name === ClientNames.Tunisia ? css`
       background: ${color};
     ` : ''
   )}
@@ -119,6 +127,8 @@ export const HeaderLogo = styled(Logo)`
         top: 5px;
         transform: translateX(-50%);
         position: absolute;
+
+        ${client.styles.matchPageMobileHeaderLogo}   
       }
     ` : ''}
   `)} 

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

@@ -7,7 +7,7 @@ type FullscreenProps = {
 }
 
 export const Controls = styled.div<FullscreenProps>`
-  z-index: 14;
+  z-index: 9;
   position: absolute;
   width: 100%;
   bottom: 22px;

src/features/Theme/config.tsx

@@ -105,6 +105,33 @@ export const tunisTheme: CustomTheme = {
   name: 'tunisia',
 }
 
-type Name = 'light' | 'dark' | 'lff' | 'facr' | 'tunisia'
+export const fqtvTheme: CustomTheme = {
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    background: '#1B1E27',
+    button: '#016BD8',
+    buttonHover: '#016BD8',
+    collapseTournamentBackground: 'linear-gradient(236.13deg, rgba(1, 48, 121, 0.8) -4.49%, rgba(52, 62, 73, 0.8) 98.29%), #363F49;',
+    comboboxBackground: '#1A2634',
+    comboboxItemHover: '#016BD8',
+    dateFilter: 'rgba(255, 255, 255, 0.5)',
+    error: '#FF4E77',
+    inputs: '#363F49',
+    liveMatchPlaylistBtnBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49',
+    liveMatchPlaylistBtnHover: '#016BD8',
+    loaderAuth: '#00244F',
+    matchCardBackground: '#363F49',
+    matchHeaderBackground: '#0C2340',
+    modalBackground: '#1A2634',
+    packageBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49',
+    playerActionBtnBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49',
+    searchBtnHover: '#016BD8',
+    unsubscribeItemBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49',
+  },
+  name: 'fqtv',
+}
+
+type Name = 'light' | 'dark' | 'lff' | 'facr' | 'tunisia' | 'fqtv'
 
 export type CustomTheme = typeof defaultTheme

src/features/Theme/index.tsx

@@ -16,6 +16,7 @@ import {
   CustomTheme,
   defaultTheme,
   facrTheme,
+  fqtvTheme,
   lffTheme,
   tunisTheme,
 } from './config'
@@ -57,6 +58,9 @@ export const Theme = ({ children }: Props) => {
       case ClientNames.Tunisia:
         setTheme(tunisTheme)
         break
+      case ClientNames.Fqtv:
+        setTheme(fqtvTheme)
+        break
       default:
         setTheme(defaultTheme)
         break

src/react-app-env.d.ts

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