feat(#188): add payment for tunis
fix(#188): tunisia payment part 2 fix(#188): added favicon, terms and condition link, fix config tunisia fix(#188): added tinisia landing page, redirect to diwan.insports.tv fix(#188): fix pr comment add autodeploy diwan.insports.tv fix(#188): check geo initial mount, diwan update disabled for prod fix(#188): changed action to one_payment for paymee, disabled check geo fix(#188): failed paymee page fix(#188): replaced DT to TND fix(#188): added preloader fix(#188): replaced history.push to redirectToUrl fix(#188): changed error time to 1 min fix(#286): stripe locale, payment plan displayng fix(#286): fix stylespull/82/head
Andrei Dekterev
3 years ago
committed by
Gitea
parent
6dad0f3758
commit
a5757e44fe
|
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,78 @@ |
|||||||
|
import { Fragment } from 'react' |
||||||
|
|
||||||
|
import format from 'date-fns/format' |
||||||
|
|
||||||
|
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 { |
||||||
|
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 = format(new Date(), 'Y') |
||||||
|
|
||||||
|
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,302 @@ |
|||||||
|
import styled, { css } from 'styled-components/macro' |
||||||
|
|
||||||
|
import { devices } from 'config' |
||||||
|
import { isMobileDevice } from 'config/userAgent' |
||||||
|
|
||||||
|
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,13 @@ |
|||||||
|
import { T9n } from 'features/T9n' |
||||||
|
|
||||||
|
import { FailedPaymeeWrapper } from './styled' |
||||||
|
|
||||||
|
// эта страница рассчитана на открытие во фрейме
|
||||||
|
// при неудачной оплате paymee
|
||||||
|
const FailedPaymeePage = () => ( |
||||||
|
<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