|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
@ -0,0 +1,12 @@ |
|||||||
|
<?xml version="1.0" encoding="utf-8"?> |
||||||
|
<browserconfig> |
||||||
|
<msapplication> |
||||||
|
<tile> |
||||||
|
<square70x70logo src="/mstile-70x70.png"/> |
||||||
|
<square144x144logo src="/mstile-144x144.png"/> |
||||||
|
<square150x150logo src="/mstile-150x150.png"/> |
||||||
|
<square310x310logo src="/mstile-310x310.png"/> |
||||||
|
<TileColor>#da532c</TileColor> |
||||||
|
</tile> |
||||||
|
</msapplication> |
||||||
|
</browserconfig> |
||||||
|
After Width: | Height: | Size: 477 B |
|
After Width: | Height: | Size: 982 B |
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,19 @@ |
|||||||
|
{ |
||||||
|
"name": "", |
||||||
|
"short_name": "", |
||||||
|
"icons": [ |
||||||
|
{ |
||||||
|
"src": "/android-chrome-192x192.png", |
||||||
|
"sizes": "192x192", |
||||||
|
"type": "image/png" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"src": "/android-chrome-512x512.png", |
||||||
|
"sizes": "512x512", |
||||||
|
"type": "image/png" |
||||||
|
} |
||||||
|
], |
||||||
|
"theme_color": "#ffffff", |
||||||
|
"background_color": "#ffffff", |
||||||
|
"display": "standalone" |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
@ -1,57 +0,0 @@ |
|||||||
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, |
|
||||||
} |
|
||||||
@ -0,0 +1,58 @@ |
|||||||
|
import { css } from 'styled-components/macro' |
||||||
|
|
||||||
|
import { |
||||||
|
ClientConfig, |
||||||
|
ClientIds, |
||||||
|
ClientNames, |
||||||
|
} from './types' |
||||||
|
|
||||||
|
const randomHash = () => ( |
||||||
|
(Math.random() ** Math.random()) * 9999999999999999 |
||||||
|
) |
||||||
|
|
||||||
|
export const tunisia: ClientConfig = { |
||||||
|
auth: { |
||||||
|
clientId: ClientIds.Tunisia, |
||||||
|
metaDataUrlParams: `?hash=${randomHash()}`, |
||||||
|
}, |
||||||
|
defaultLanguage: 'fr', |
||||||
|
description: '', |
||||||
|
disabledFilters: true, |
||||||
|
disabledHighlights: true, |
||||||
|
disabledPreferences: true, |
||||||
|
name: ClientNames.Tunisia, |
||||||
|
privacyLink: '/privacy-policy-and-statement?client_id=insports-ott-web', |
||||||
|
showSearch: true, |
||||||
|
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: 1.922, |
||||||
|
logoLeft: 1.1, |
||||||
|
logoTop: 1.74, |
||||||
|
logoWidth: 9, |
||||||
|
matchLogoHeight: 1.922, |
||||||
|
matchLogoTopMargin: 1, |
||||||
|
matchLogoWidth: 9, |
||||||
|
matchPageMobileHeaderLogo: css` |
||||||
|
width: 100px; |
||||||
|
height: 21px; |
||||||
|
top: 5px; |
||||||
|
`,
|
||||||
|
mobileHeaderLogo: css` |
||||||
|
width: 100px; |
||||||
|
height: 21px; |
||||||
|
`,
|
||||||
|
userAccountLogo: css` |
||||||
|
width: 9rem; |
||||||
|
height: 1.922rem; |
||||||
|
`,
|
||||||
|
}, |
||||||
|
termsLink: '/terms-and-conditions?client_id=insports-ott-web', |
||||||
|
title: 'Diwan Sport - The home of Tunisian Ligue Professionnelle 1', |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import { ClientNames } from './clients/types' |
||||||
|
|
||||||
|
export enum PaymentSystem { |
||||||
|
PagBrazil = 'pag_brasil', |
||||||
|
Paymee = 'paymee', |
||||||
|
Paytm = 'paytm', |
||||||
|
Stripe = 'stripe' |
||||||
|
} |
||||||
|
|
||||||
|
type PaymentsType = { |
||||||
|
[key in ClientNames]: PaymentSystem |
||||||
|
} |
||||||
|
|
||||||
|
export const payments: PaymentsType = { |
||||||
|
[ClientNames.Tunisia]: PaymentSystem.Paymee, |
||||||
|
brasil: PaymentSystem.PagBrazil, |
||||||
|
[ClientNames.India]: PaymentSystem.Paytm, |
||||||
|
[ClientNames.Insports]: PaymentSystem.Stripe, |
||||||
|
[ClientNames.Instat]: PaymentSystem.Stripe, |
||||||
|
[ClientNames.Facr]: PaymentSystem.Stripe, |
||||||
|
[ClientNames.Lff]: PaymentSystem.Stripe, |
||||||
|
} |
||||||
@ -1,101 +0,0 @@ |
|||||||
import { |
|
||||||
useEffect, |
|
||||||
useState, |
|
||||||
MouseEvent, |
|
||||||
} from 'react' |
|
||||||
|
|
||||||
import { useHistory } from 'react-router-dom' |
|
||||||
|
|
||||||
import { ProfileTypes } from 'config' |
|
||||||
|
|
||||||
import isNumber from 'lodash/isNumber' |
|
||||||
|
|
||||||
import { useLexicsStore } from 'features/LexicsStore' |
|
||||||
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store' |
|
||||||
import { getProfileUrl } from 'features/ProfileLink/helpers' |
|
||||||
|
|
||||||
import { getMatchInfo } from 'requests/getMatchInfo' |
|
||||||
import { getBrazilPaymentUrl } from 'requests/getBrazilPaymentUrl' |
|
||||||
|
|
||||||
import type { Props } from './index' |
|
||||||
|
|
||||||
type ResponsePayment = { |
|
||||||
url: string, |
|
||||||
} |
|
||||||
|
|
||||||
type ResponsePaymentArray = ResponsePayment | null |
|
||||||
|
|
||||||
export const useBrazilPayment = ({ |
|
||||||
match, |
|
||||||
open, |
|
||||||
selectedPackage, |
|
||||||
setIsOpenBrasilian, |
|
||||||
}: Props) => { |
|
||||||
const history = useHistory() |
|
||||||
const { close } = useBuyMatchPopupStore() |
|
||||||
|
|
||||||
const [src, setSrc] = useState('') |
|
||||||
const [error, setError] = useState('') |
|
||||||
const { translate } = useLexicsStore() |
|
||||||
|
|
||||||
const { id, sportType } = match |
|
||||||
|
|
||||||
const { |
|
||||||
name, |
|
||||||
nameLexic, |
|
||||||
originalObject, |
|
||||||
pass, |
|
||||||
} = selectedPackage |
|
||||||
|
|
||||||
const teams = isNumber(nameLexic) ? translate(String(nameLexic)) : name |
|
||||||
const pack = translate(String(pass)) |
|
||||||
|
|
||||||
const matchLink = getProfileUrl({ |
|
||||||
id, |
|
||||||
profileType: ProfileTypes.MATCHES, |
|
||||||
sportType, |
|
||||||
}) |
|
||||||
|
|
||||||
const closePopup = async (e?: MouseEvent) => { |
|
||||||
e?.stopPropagation() |
|
||||||
setIsOpenBrasilian(false) |
|
||||||
setError('') |
|
||||||
|
|
||||||
const accessMatch = await getMatchInfo(sportType, id) |
|
||||||
if (accessMatch?.access) { |
|
||||||
close() |
|
||||||
history.push(matchLink) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// eslint-disable-next-line
|
|
||||||
window.onmessage = function (event) { |
|
||||||
if (event.data === 'close') { |
|
||||||
closePopup() |
|
||||||
} |
|
||||||
} |
|
||||||
useEffect(() => { |
|
||||||
if (open) { |
|
||||||
(async () => { |
|
||||||
try { |
|
||||||
const json: ResponsePaymentArray = await getBrazilPaymentUrl({ |
|
||||||
action: pass === 'pass_match_access' ? 'one_payment' : 'create_subscription', |
|
||||||
item: originalObject, |
|
||||||
product_name: `${pack} ${teams}`, |
|
||||||
}) |
|
||||||
setSrc(json?.url || '') |
|
||||||
} catch (err) { |
|
||||||
setError('error_payment_unsuccessful') |
|
||||||
} |
|
||||||
})() |
|
||||||
} |
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [selectedPackage, open]) |
|
||||||
|
|
||||||
return { |
|
||||||
closePopup, |
|
||||||
error, |
|
||||||
matchLink, |
|
||||||
src, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,173 @@ |
|||||||
|
import { |
||||||
|
MouseEvent, |
||||||
|
useCallback, |
||||||
|
useEffect, |
||||||
|
useState, |
||||||
|
} from 'react' |
||||||
|
|
||||||
|
import { PAGES, ProfileTypes } from 'config' |
||||||
|
import { ClientNames } from 'config/clients/types' |
||||||
|
import { payments, PaymentSystem } from 'config/payments' |
||||||
|
|
||||||
|
import isNumber from 'lodash/isNumber' |
||||||
|
|
||||||
|
import { useLexicsStore } from 'features/LexicsStore' |
||||||
|
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store' |
||||||
|
import { getProfileUrl } from 'features/ProfileLink/helpers' |
||||||
|
|
||||||
|
import { getMatchInfo } from 'requests/getMatchInfo' |
||||||
|
import { getPaymentUrl } from 'requests/getPaymentUrl' |
||||||
|
|
||||||
|
import { redirectToUrl } from 'helpers' |
||||||
|
|
||||||
|
import type { Props } from './index' |
||||||
|
|
||||||
|
type ResponsePayment = { |
||||||
|
url: string, |
||||||
|
} |
||||||
|
|
||||||
|
type ResponsePaymentArray = ResponsePayment | null |
||||||
|
|
||||||
|
export const useIframePayment = ({ |
||||||
|
match, |
||||||
|
open, |
||||||
|
paymentSystem, |
||||||
|
selectedPackage, |
||||||
|
setIsOpenIframe, |
||||||
|
}: Props) => { |
||||||
|
const { close } = useBuyMatchPopupStore() |
||||||
|
|
||||||
|
const [src, setSrc] = useState('') |
||||||
|
const [error, setError] = useState('') |
||||||
|
const [isPaymentProcessing, setIsPaymentProcessing] = useState(false) |
||||||
|
const { translate } = useLexicsStore() |
||||||
|
|
||||||
|
const { id, sportType } = match |
||||||
|
|
||||||
|
const { |
||||||
|
name, |
||||||
|
nameLexic, |
||||||
|
originalObject, |
||||||
|
pass, |
||||||
|
} = selectedPackage |
||||||
|
|
||||||
|
const teams = isNumber(nameLexic) ? translate(String(nameLexic)) : name |
||||||
|
const pack = translate(String(pass)) |
||||||
|
|
||||||
|
const matchLink = getProfileUrl({ |
||||||
|
id, |
||||||
|
profileType: ProfileTypes.MATCHES, |
||||||
|
sportType, |
||||||
|
}) |
||||||
|
|
||||||
|
const closePopup = useCallback(async (e?: MouseEvent) => { |
||||||
|
e?.stopPropagation() |
||||||
|
|
||||||
|
if (error) { |
||||||
|
setIsOpenIframe(false) |
||||||
|
setError('') |
||||||
|
} |
||||||
|
|
||||||
|
const accessMatch = await getMatchInfo(sportType, id) |
||||||
|
if (accessMatch?.access) { |
||||||
|
setIsPaymentProcessing(false) |
||||||
|
setIsOpenIframe(false) |
||||||
|
setError('') |
||||||
|
close() |
||||||
|
redirectToUrl(matchLink) |
||||||
|
} |
||||||
|
}, [close, error, id, matchLink, setIsOpenIframe, sportType]) |
||||||
|
|
||||||
|
const paymentRequest = async () => { |
||||||
|
let url_cancel |
||||||
|
let url_return |
||||||
|
let action: Parameters<typeof getPaymentUrl>[0]['action'] |
||||||
|
|
||||||
|
switch (paymentSystem) { |
||||||
|
case PaymentSystem.Paymee: |
||||||
|
url_cancel = `${window.origin}/failed-paymee` |
||||||
|
url_return = null |
||||||
|
// paymee не умеет работать с подписками
|
||||||
|
action = 'one_payment' |
||||||
|
break |
||||||
|
default: |
||||||
|
url_return = `${window.location.origin}${PAGES.thanksForSubscribe}` |
||||||
|
action = pass === 'pass_match_access' ? 'one_payment' : 'create_subscription' |
||||||
|
break |
||||||
|
} |
||||||
|
|
||||||
|
const payment: ResponsePaymentArray = await getPaymentUrl({ |
||||||
|
action, |
||||||
|
item: originalObject, |
||||||
|
product_name: `${pack} ${teams}`, |
||||||
|
service: paymentSystem, |
||||||
|
url_cancel, |
||||||
|
url_return, |
||||||
|
}) |
||||||
|
setSrc(payment?.url || '') |
||||||
|
} |
||||||
|
|
||||||
|
if (paymentSystem === payments[ClientNames.Brasil]) { |
||||||
|
// eslint-disable-next-line
|
||||||
|
window.onmessage = function (event) { |
||||||
|
if (event.data === 'close') { |
||||||
|
closePopup() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
let interval: ReturnType<typeof setInterval> |
||||||
|
let timeout: ReturnType<typeof setTimeout> |
||||||
|
|
||||||
|
const paymentCallback = (event: MessageEvent<{ event_id: string }>) => { |
||||||
|
if (event.data.event_id === 'paymee.complete') { |
||||||
|
setIsPaymentProcessing(true) |
||||||
|
interval = setInterval(() => closePopup(), 2000) |
||||||
|
timeout = setTimeout(() => { |
||||||
|
clearInterval(interval) |
||||||
|
setIsPaymentProcessing(false) |
||||||
|
setError('failed_paymee') |
||||||
|
setSrc('') |
||||||
|
}, 60000) |
||||||
|
} |
||||||
|
} |
||||||
|
if (paymentSystem === payments[ClientNames.Tunisia]) { |
||||||
|
window.addEventListener( |
||||||
|
'message', |
||||||
|
paymentCallback, |
||||||
|
false, |
||||||
|
) |
||||||
|
} |
||||||
|
return () => { |
||||||
|
window.removeEventListener( |
||||||
|
'message', |
||||||
|
paymentCallback, |
||||||
|
false, |
||||||
|
) |
||||||
|
clearInterval(interval) |
||||||
|
clearTimeout(timeout) |
||||||
|
} |
||||||
|
}, [closePopup, paymentSystem]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (open) { |
||||||
|
(async () => { |
||||||
|
try { |
||||||
|
await paymentRequest() |
||||||
|
} catch (err) { |
||||||
|
setError('error_payment_unsuccessful') |
||||||
|
} |
||||||
|
})() |
||||||
|
} |
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [selectedPackage, open]) |
||||||
|
|
||||||
|
return { |
||||||
|
closePopup, |
||||||
|
error, |
||||||
|
isPaymentProcessing, |
||||||
|
matchLink, |
||||||
|
src, |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import format from 'date-fns/format' |
||||||
|
|
||||||
|
export const getCurrentYear = () => format(new Date(), 'Y') |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import type { Match } from 'features/BuyMatchPopup/types' |
||||||
|
|
||||||
|
import { checkUrlParams, getAllUrlParams } from '../parseUrlParams/parseUrlParams' |
||||||
|
import { getMatchInfo, MatchInfo } from '../../requests' |
||||||
|
import { prepareMatchProfile } from '../../features/MatchPage/helpers/prepareMatchProfile' |
||||||
|
|
||||||
|
type openSubscribePopupType = { |
||||||
|
matchConfig: { |
||||||
|
matchId: number, |
||||||
|
sportId: number, |
||||||
|
}, |
||||||
|
openBuyMatchPopup: (matchProfile: Match) => void, |
||||||
|
} |
||||||
|
|
||||||
|
// TODO переделать потом на открытие без запроса матча
|
||||||
|
export const openSubscribePopup = ({ |
||||||
|
matchConfig, |
||||||
|
openBuyMatchPopup, |
||||||
|
}: openSubscribePopupType) => { |
||||||
|
if (isSubscribePopup()) { |
||||||
|
getMatchInfo(matchConfig.sportId, matchConfig.matchId) |
||||||
|
.then((match: MatchInfo) => { |
||||||
|
const matchProfile = match && prepareMatchProfile({ |
||||||
|
matchId: matchConfig.matchId, |
||||||
|
profile: match, |
||||||
|
sportType: matchConfig.sportId, |
||||||
|
}) |
||||||
|
matchProfile && openBuyMatchPopup(matchProfile) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export const isSubscribePopup = () => checkUrlParams('subscribe') && getAllUrlParams('id').length |
||||||
@ -0,0 +1,78 @@ |
|||||||
|
import { Fragment } from 'react' |
||||||
|
|
||||||
|
import { isMobileDevice } from 'config' |
||||||
|
import { joinMatchLexics } from 'config/lexics/joinMatch' |
||||||
|
|
||||||
|
import { T9n } from 'features/T9n' |
||||||
|
import { useLexicsConfig } from 'features/LexicsStore' |
||||||
|
|
||||||
|
import { useAuthStore } from 'features/AuthStore' |
||||||
|
|
||||||
|
import { getCurrentYear } from 'helpers' |
||||||
|
|
||||||
|
import { |
||||||
|
Wrapper, |
||||||
|
TunisiaLogo, |
||||||
|
HeaderWrapper, |
||||||
|
Footer, |
||||||
|
BlockWrapper, |
||||||
|
MatchInfo, |
||||||
|
LigueImgWrapper, |
||||||
|
Season, |
||||||
|
MainInfoTitle, |
||||||
|
MainInfoButton, |
||||||
|
MainInfoContainer, |
||||||
|
MainInfoText, |
||||||
|
FooterRights, |
||||||
|
ClubsLogo, |
||||||
|
InsportsLogo, |
||||||
|
ScGradient, |
||||||
|
LigueImg, |
||||||
|
} from './styled' |
||||||
|
|
||||||
|
export const DiwanInsportsTv = () => { |
||||||
|
useLexicsConfig(joinMatchLexics) |
||||||
|
const { login } = useAuthStore() |
||||||
|
|
||||||
|
const currentYear = getCurrentYear() |
||||||
|
|
||||||
|
return ( |
||||||
|
<Wrapper> |
||||||
|
<HeaderWrapper> |
||||||
|
<InsportsLogo /> |
||||||
|
{isMobileDevice && <TunisiaLogo />} |
||||||
|
</HeaderWrapper> |
||||||
|
<MainInfoContainer> |
||||||
|
<BlockWrapper> |
||||||
|
<LigueImgWrapper> |
||||||
|
<ScGradient /> |
||||||
|
<LigueImg /> |
||||||
|
</LigueImgWrapper> |
||||||
|
<MatchInfo> |
||||||
|
<Season> |
||||||
|
<T9n t='diwan_season' /> |
||||||
|
</Season> |
||||||
|
<MainInfoTitle> |
||||||
|
<T9n t='diwan_title' /> |
||||||
|
</MainInfoTitle> |
||||||
|
<MainInfoText> |
||||||
|
<T9n t='diwan_desc' /> |
||||||
|
</MainInfoText> |
||||||
|
<MainInfoButton onClick={login}> |
||||||
|
<T9n t='diwan_join' /> |
||||||
|
</MainInfoButton> |
||||||
|
{!isMobileDevice && ( |
||||||
|
<Fragment> |
||||||
|
<TunisiaLogo /> |
||||||
|
<ClubsLogo /> |
||||||
|
</Fragment> |
||||||
|
)} |
||||||
|
</MatchInfo> |
||||||
|
</BlockWrapper> |
||||||
|
</MainInfoContainer> |
||||||
|
<Footer> |
||||||
|
<FooterRights>©inSports.tv {currentYear}</FooterRights> |
||||||
|
</Footer> |
||||||
|
</Wrapper> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,301 @@ |
|||||||
|
import styled, { css } from 'styled-components/macro' |
||||||
|
|
||||||
|
import { devices, isMobileDevice } from 'config' |
||||||
|
|
||||||
|
import { ButtonSolid } from 'features/Common' |
||||||
|
|
||||||
|
export const Wrapper = styled.div` |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
color: white; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
height: 100%; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const HeaderWrapper = styled.div` |
||||||
|
padding: 20px 0; |
||||||
|
padding-left: 20%; |
||||||
|
width: 100%; |
||||||
|
background: rgba(19, 21, 27, 0.7); |
||||||
|
backdrop-filter: blur(20px); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
@media ${devices.laptop} { |
||||||
|
padding-left: 5%; |
||||||
|
} |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
background: #000000; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const TunisiaLogo = styled.div` |
||||||
|
background-image: url(/images/tunis-logo.svg); |
||||||
|
background-size: contain; |
||||||
|
background-repeat: no-repeat; |
||||||
|
width: 229px; |
||||||
|
height: 49px; |
||||||
|
margin-bottom: 50px; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
width: 66px; |
||||||
|
height: 14px; |
||||||
|
margin-bottom: 0; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const InsportsLogo = styled.div` |
||||||
|
background-image: url(/images/insports-logo.svg); |
||||||
|
background-size: contain; |
||||||
|
background-repeat: no-repeat; |
||||||
|
width: 80px; |
||||||
|
height: 25px; |
||||||
|
margin-right: 25px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
width: 57px; |
||||||
|
height: 18px; |
||||||
|
|
||||||
|
::after { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
width: 0.5px; |
||||||
|
height: 25px; |
||||||
|
background: #FFFFFF; |
||||||
|
right: -13px; |
||||||
|
top: -3px; |
||||||
|
opacity: 0.6; |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const ClubsLogo = styled.div` |
||||||
|
background-image: url(/images/tunis_clubs.svg); |
||||||
|
background-size: contain; |
||||||
|
background-repeat: no-repeat; |
||||||
|
width: 408px; |
||||||
|
height: 86px; |
||||||
|
` |
||||||
|
|
||||||
|
export const MainInfoContainer = styled.div` |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
margin-top: 50px; |
||||||
|
height: 100%; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const BlockWrapper = styled.div` |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding-left: 20%; |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
@media ${devices.laptop} { |
||||||
|
padding-left: 5%; |
||||||
|
} |
||||||
|
@media ${devices.mobile} { |
||||||
|
padding-left: 5.4rem; |
||||||
|
} |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
flex-direction: column; |
||||||
|
padding: 5.4rem; |
||||||
|
@media screen and (orientation: landscape){ |
||||||
|
padding-top: 20px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScGradient = styled.div` |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
width: 620px; |
||||||
|
height: 310px; |
||||||
|
border-radius: 50%; |
||||||
|
background: rgba(29, 185, 171, 0.4); |
||||||
|
opacity: 0.7; |
||||||
|
filter: blur(104.135px); |
||||||
|
top: 30%; |
||||||
|
left: 25px; |
||||||
|
z-index: 1; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
filter: blur(50.135px); |
||||||
|
border-radius: 40%; |
||||||
|
width: 349px; |
||||||
|
height: 210px; |
||||||
|
left: -35px; |
||||||
|
top: -71px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
|
||||||
|
` |
||||||
|
|
||||||
|
export const LigueImg = styled.div` |
||||||
|
background-image: url(/images/landing_${() => ( |
||||||
|
isMobileDevice |
||||||
|
? 'mobile_ligue_1.png' |
||||||
|
: 'ligue_1.png' |
||||||
|
)}); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
background-size: contain; |
||||||
|
width: 670px; |
||||||
|
height: 156px; |
||||||
|
z-index: 2; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
width: 288px; |
||||||
|
height: 66px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const LigueImgWrapper = styled.div` |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 80%; |
||||||
|
margin-right: 5%; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
margin-right: 0; |
||||||
|
margin-bottom: 83px; |
||||||
|
@media screen and (orientation: landscape){ |
||||||
|
display: block; |
||||||
|
height: 100%; |
||||||
|
width: 70%; |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const MatchInfo = styled.div` |
||||||
|
margin-bottom: 60px; |
||||||
|
max-width: 670px; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
@media screen and (orientation: landscape){ |
||||||
|
padding-top: 0; |
||||||
|
} |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const Season = styled.div` |
||||||
|
text-transform: uppercase; |
||||||
|
background-color: rgba(0,0,0,0.4); |
||||||
|
padding: 8px 25px; |
||||||
|
color: #B9B9B9; |
||||||
|
border-radius: 5px; |
||||||
|
font-size: 13px; |
||||||
|
font-weight: 600; |
||||||
|
display: inline-flex; |
||||||
|
margin-bottom: 50px; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
margin-bottom: 15px; |
||||||
|
padding: 0.7em 2.5rem; |
||||||
|
font-size: 10px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const MainInfoTitle = styled.div` |
||||||
|
font-weight: 600; |
||||||
|
font-size: 2rem; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
font-size: 24px; |
||||||
|
margin-bottom: 25px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const MainInfoButton = styled(ButtonSolid)` |
||||||
|
width: auto; |
||||||
|
height: 70px; |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 600; |
||||||
|
border-radius: 5px; |
||||||
|
margin-bottom: 50px; |
||||||
|
|
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
width: 100%; |
||||||
|
font-size: 17px; |
||||||
|
margin-bottom: 30px; |
||||||
|
height: 40px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const MainInfoText = styled.div` |
||||||
|
margin: 40px 0; |
||||||
|
font-size: 17px; |
||||||
|
line-height: 150%; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
font-size: 12px; |
||||||
|
margin: 0 0 25px; |
||||||
|
letter-spacing: 0.1px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const Footer = styled.div` |
||||||
|
font-size: 14px; |
||||||
|
background-color: black; |
||||||
|
padding: 16px 0; |
||||||
|
padding-left: 20%; |
||||||
|
width: 100%; |
||||||
|
@media ${devices.laptop} { |
||||||
|
padding-left: 5%; |
||||||
|
} |
||||||
|
@media ${devices.mobile} { |
||||||
|
padding-left: 35px; |
||||||
|
} |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
display: none; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const FooterRights = styled.div` |
||||||
|
opacity: .5; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
font-size: 12px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
import { T9n } from 'features/T9n' |
||||||
|
|
||||||
|
import { FailedPaymeeWrapper } from './styled' |
||||||
|
|
||||||
|
// эта страница рассчитана на открытие во фрейме
|
||||||
|
// при неудачной оплате paymee
|
||||||
|
const FailedPaymeePage = () => { |
||||||
|
const iframeZendesk = document.querySelector('#launcher') as HTMLElement |
||||||
|
if (iframeZendesk) iframeZendesk.style.display = 'none' |
||||||
|
|
||||||
|
return ( |
||||||
|
<FailedPaymeeWrapper> |
||||||
|
<T9n t='failed_paymee' /> |
||||||
|
</FailedPaymeeWrapper> |
||||||
|
) |
||||||
|
} |
||||||
|
export default FailedPaymeePage |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import styled from 'styled-components/macro' |
||||||
|
|
||||||
|
export const FailedPaymeeWrapper = styled.div` |
||||||
|
color: #FFFFFF; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 22px; |
||||||
|
text-align: center; |
||||||
|
` |
||||||
Loading…
Reference in new issue