diff --git a/package.json b/package.json index 8c4c954d..9eba47e8 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "facr": "REACT_APP_CLIENT=facr react-scripts start", "lff": "REACT_APP_CLIENT=lff react-scripts start", "india": "REACT_APP_CLIENT=india react-scripts start", + "tunis": "REACT_APP_CLIENT=tunis react-scripts start", "insports": "REACT_APP_CLIENT=insports react-scripts start" }, "dependencies": { diff --git a/public/images/tunis-logo.svg b/public/images/tunis-logo.svg new file mode 100644 index 00000000..9f66058e --- /dev/null +++ b/public/images/tunis-logo.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/tunis_auth_logo.svg b/public/images/tunis_auth_logo.svg new file mode 100644 index 00000000..1b26b37c --- /dev/null +++ b/public/images/tunis_auth_logo.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/config/clients/index.tsx b/src/config/clients/index.tsx index aef4ea7d..f6835d60 100644 --- a/src/config/clients/index.tsx +++ b/src/config/clients/index.tsx @@ -5,6 +5,7 @@ import { instat } from './instat' import { lff } from './lff' import { insports } from './insports' import { india } from './india' +import { tunis } from './tunis' export const currentClient = process.env.REACT_APP_CLIENT || 'insports' @@ -13,6 +14,7 @@ export const isInSportsClient = currentClient === 'insports' export const isInstatClient = currentClient === 'instat' export const isFacrClient = currentClient === 'facr' export const isIndiaClient = currentClient === 'india' +export const isTunisClient = currentClient === 'tunis' const clients = { facr, @@ -20,6 +22,7 @@ const clients = { insports, instat, lff, + tunis, } export const client: ClientConfig = clients[currentClient] diff --git a/src/config/clients/tunis.tsx b/src/config/clients/tunis.tsx new file mode 100644 index 00000000..6764be26 --- /dev/null +++ b/src/config/clients/tunis.tsx @@ -0,0 +1,57 @@ +import { css } from 'styled-components/macro' + +import { + ClientConfig, + ClientIds, + ClientNames, +} from './types' + +const randomHash = () => ( + (Math.random() ** Math.random()) * 9999999999999999 +) + +export const tunis: ClientConfig = { + auth: { + clientId: ClientIds.Tunis, + metaDataUrlParams: `?hash=${randomHash()}`, + }, + defaultLanguage: 'fr', + description: 'Live sports streaming platform. All matches playing under the auspices of Czech Republic FA. Access to full matches, various player playlists, and highlights. Free access in the Czech Republic. Available across all devices', + disabledPreferences: false, + name: ClientNames.Tunis, + privacyLink: '/privacy-policy-and-statement', + showSearch: false, + styles: { + background: '', + homePageHeader: css` + background: radial-gradient( + 160.34% 257.27% at -7.45% 162.22%, + #2AB7AA 3.27%, + #02505C 43.69%, #0B2E4D 100%); + `, + logo: 'tunis-logo.svg', + logoHeight: 6.3, + logoLeft: 1.1, + logoTop: 1.74, + logoWidth: 8.25, + matchLogoHeight: 3.4, + matchLogoTopMargin: 0.9, + matchLogoWidth: 4.5, + matchPageMobileHeaderLogo: css` + width: 35px; + height: 25px; + top: 2px; + `, + mobileHeaderLogo: css` + width: 48px; + height: 37px; + `, + userAccountLogo: css` + width: 4.56rem; + height: 3.488rem; + `, + }, + termsLink: '/terms-and-conditions?client_id=facr-ott-web', + title: 'FACR.TV - The home of Czech football streaming', + userAccountLinksDisabled: true, +} diff --git a/src/config/clients/types.tsx b/src/config/clients/types.tsx index 7f45e754..98c61297 100644 --- a/src/config/clients/types.tsx +++ b/src/config/clients/types.tsx @@ -10,6 +10,7 @@ export enum ClientIds { Insports = 'insports-ott-web', Instat = 'ott-web', Lff = 'lff-ott-web', + Tunis = 'tunis-ott-web', } export enum ClientNames { @@ -18,6 +19,7 @@ export enum ClientNames { Insports = 'insports', Instat = 'instat', Lff = 'lff', + Tunis = 'tunis', } export type ClientConfig = { diff --git a/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx b/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx index 1123334b..91a89512 100644 --- a/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx +++ b/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx @@ -11,6 +11,8 @@ import { HeaderTitle, } from 'features/AuthServiceApp/components/RegisterPopup/styled' +import { client } from '../../config/clients/index' + export const Modal = styled(BaseModal)` ${ModalWindow} { min-height: 220px; @@ -59,6 +61,7 @@ export const ScApplyButton = styled(ApplyButton)` font-size: 14px; ` : ''}; + ${client.styles.popupApplyButton} ` export const ScLink = styled.a` diff --git a/src/features/AuthServiceApp/components/RegisterPopup/index.tsx b/src/features/AuthServiceApp/components/RegisterPopup/index.tsx index 8aef84d2..6d8d78b5 100644 --- a/src/features/AuthServiceApp/components/RegisterPopup/index.tsx +++ b/src/features/AuthServiceApp/components/RegisterPopup/index.tsx @@ -25,11 +25,6 @@ export const RegisterPopup = (props: Props) => { isModalOpen, } = props - // const handleNewConfirmation = () => { - // // TODO дописать логику для отправки доп. письма, может понадобится, когда допишут бэк - // // console.log('send new confirmation') - // } - return ( @@ -53,9 +48,6 @@ export const RegisterPopup = (props: Props) => { diff --git a/src/features/AuthServiceApp/components/RegisterPopup/styled.tsx b/src/features/AuthServiceApp/components/RegisterPopup/styled.tsx index f8877dd5..a661f487 100644 --- a/src/features/AuthServiceApp/components/RegisterPopup/styled.tsx +++ b/src/features/AuthServiceApp/components/RegisterPopup/styled.tsx @@ -7,7 +7,9 @@ import { ModalWindow } from 'features/Modal/styled' import { Modal as BaseModal } from 'features/Modal' import { Header as BaseHeader } from 'features/PopupComponents' -import { ButtonSolid, ButtonOutline } from 'features/Common' +import { ButtonSolid } from 'features/Common' + +import { client } from '../../config/clients' export const Modal = styled(BaseModal)` background-color: rgba(0, 0, 0, 0.7); @@ -139,26 +141,9 @@ export const ApplyButton = styled(ButtonSolid)` } ` : ''}; + ${client.styles.popupApplyButton} ` -export const SendConfirmationButton = styled(ButtonOutline)` - width: 100%; - height: 50px; - border-radius: 5px; - font-weight: 500; - font-size: 20px; - ${isMobileDevice - ? css` - @media ${devices.mobile}{ - width: 100%; - } - - @media (orientation: landscape){ - width: 290px; - } - ` - : ''}; -` export const Text = styled.span` margin-bottom: 20px; ` diff --git a/src/features/AuthServiceApp/config/clients/index.tsx b/src/features/AuthServiceApp/config/clients/index.tsx index 040a93d5..6de84332 100644 --- a/src/features/AuthServiceApp/config/clients/index.tsx +++ b/src/features/AuthServiceApp/config/clients/index.tsx @@ -5,6 +5,7 @@ import { insports } from './insports' import { instat } from './instat' import { lff } from './lff' import { india } from './india' +import { tunis } from './tunis' const clients = { [ClientIds.Facr]: facr, @@ -12,6 +13,7 @@ const clients = { [ClientIds.Lff]: lff, [ClientIds.Insports]: insports, [ClientIds.India]: india, + [ClientIds.Tunis]: tunis, } const params = new URLSearchParams(window.location.search) diff --git a/src/features/AuthServiceApp/config/clients/tunis.tsx b/src/features/AuthServiceApp/config/clients/tunis.tsx new file mode 100644 index 00000000..b587b6e8 --- /dev/null +++ b/src/features/AuthServiceApp/config/clients/tunis.tsx @@ -0,0 +1,67 @@ +import styled, { css } from 'styled-components/macro' + +import { tunis as platformTunis } from 'config/clients/tunis' + +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(2, 46, 48, 0.3), + rgba(2, 46, 48, 0.3)), + radial-gradient(152.89% 271.81% at 0% 96.71%, #2AB7AA 3.27%, #02505C 43.69%, #0B2E4D 100%); +` + +export const tunis: ClientConfig = { + ...platformTunis, + background: Background, + styles: { + centerBlock: css` + margin-top: 9.15rem; + ${isMobileDevice ? css` + margin-top: 107px; + @media screen and (orientation: landscape) { + width: 290px; + margin: auto; + } + ` : ''}; + `, + input: css` + background-color: transparent; + :not(:last-of-type) { + border-color: ${({ theme }) => theme.colors.white}; + } + `, + inputGroup: css` + border: 1px solid ${({ theme }) => theme.colors.white}; + `, + loader: css` + color: #0B2E4D; + `, + logo: css` + background-image: url(/images/tunis_auth_logo.svg); + width: 200px; + height: 178px; + margin-bottom: 1.82rem; + + ${isMobileDevice ? css` + margin-bottom: 20px; + width: 130px; + height: 100px; + ` : ''} + `, + popupApplyButton: css` + background-color: #0E8F84; + color: ${({ theme }) => theme.colors.white}; + `, + popupLoader: '#FFFFFF', + submitButton: css` + background-color: ${({ theme }) => theme.colors.white}; + color: #0B2E4D; + `, + }, +} diff --git a/src/features/AuthServiceApp/config/clients/types.tsx b/src/features/AuthServiceApp/config/clients/types.tsx index 5a305af6..0542b57a 100644 --- a/src/features/AuthServiceApp/config/clients/types.tsx +++ b/src/features/AuthServiceApp/config/clients/types.tsx @@ -12,6 +12,7 @@ export type ClientConfig = { background: FC<{ children: ReactNode }>, defaultLanguage: string, description: string, + isHideSelectLanguages?: boolean, name: ClientNames, privacyLink: string, styles: { diff --git a/src/features/AuthStore/helpers.tsx b/src/features/AuthStore/helpers.tsx index 2faf2926..d9d1f050 100644 --- a/src/features/AuthStore/helpers.tsx +++ b/src/features/AuthStore/helpers.tsx @@ -25,6 +25,8 @@ export const getClientNameByRedirectUri = () => { return 'lff.instat' case ClientNames.India: return 'india.insports' + case ClientNames.Tunis: + return ClientNames.Tunis case ClientNames.Facr: return ClientNames.Facr case ClientNames.Instat: @@ -42,6 +44,7 @@ const redirectUrl = () => { || client.name === 'lff' || client.name === 'facr' || client.name === 'india' + || client.name === 'tunis' ): return `${window.origin}/redirect` case (ENV === 'staging' || ENV === 'preproduction'): diff --git a/src/features/CompanyInfo/index.tsx b/src/features/CompanyInfo/index.tsx index 12c5b4a4..1cc5a30d 100644 --- a/src/features/CompanyInfo/index.tsx +++ b/src/features/CompanyInfo/index.tsx @@ -39,6 +39,8 @@ export const CompanyInfo = ({ ) + case ClientNames.Tunis: + return '' case ClientNames.Lff: return ( diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 56a364a5..9740e798 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -3,7 +3,7 @@ declare namespace NodeJS { export interface ProcessEnv { - REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india', + REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india' | 'tunis', 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',