feat(#188): add payment for tunis

pull/25/head
Andrei Dekterev 3 years ago committed by Gitea
parent 1d56682a60
commit 7a7b597586
  1. 55
      .drone.yml
  2. 17
      Makefile
  3. 29
      public/images/tunis_auth_logo_mobile.svg
  4. 4
      src/config/clients/index.tsx
  5. 1
      src/config/clients/lff.tsx
  6. 57
      src/config/clients/tunis.tsx
  7. 58
      src/config/clients/tunisia.tsx
  8. 7
      src/config/clients/types.tsx
  9. 15
      src/config/payments.tsx
  10. 4
      src/features/AuthServiceApp/config/clients/index.tsx
  11. 15
      src/features/AuthServiceApp/config/clients/tunisia.tsx
  12. 8
      src/features/AuthStore/helpers.tsx
  13. 69
      src/features/BuyMatchPopup/components/IframePayment/hooks.tsx
  14. 15
      src/features/BuyMatchPopup/components/IframePayment/index.tsx
  15. 0
      src/features/BuyMatchPopup/components/IframePayment/styled.tsx
  16. 23
      src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
  17. 2
      src/features/CompanyInfo/index.tsx
  18. 2
      src/features/HeaderMobile/styled.tsx
  19. 3
      src/features/HomePage/index.tsx
  20. 1
      src/features/MatchPage/components/LiveMatch/index.tsx
  21. 4
      src/features/ProfileCard/index.tsx
  22. 2
      src/features/ProfileHeader/styled.tsx
  23. 14
      src/features/Theme/config.tsx
  24. 4
      src/features/Theme/index.tsx
  25. 2
      src/features/UserAccount/index.tsx
  26. 6
      src/requests/getPaymentUrl.tsx

@ -172,32 +172,35 @@ steps:
depends_on:
- make-lff
# - name: make-diwansport
# image: node:16-alpine
# environment:
# REACT_APP_STRIPE_PK:
# from_secret: REACT_APP_STRIPE_PK
# commands:
# - apk add --no-cache make
# - make diwansport-prod
# depends_on:
# - npm-install
#
# - name: deploy-diwansport
# 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_insports-diwansport s3://insports-diwansport --delete
# - aws cloudfront create-invalidation --distribution-id E3LKAH6TR4O2JL --paths "/*"
# depends_on:
# - make-diwansport
- name: make-diwansport
image: node:16-alpine
environment:
REACT_APP_STRIPE_PK:
from_secret: REACT_APP_STRIPE_PK
commands:
- apk add --no-cache make
- make diwansport-prod
depends_on:
- npm-install
- name: deploy-diwansport
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_insports-diwansport s3://insports-diwansport --delete
- aws cloudfront create-invalidation --distribution-id E3LKAH6TR4O2JL --paths "/*"
- aws cloudfront create-invalidation --distribution-id E3LKAH6TR4O2JL --paths "/*" # # diwansport.net
- aws cloudfront create-invalidation --distribution-id E3NJ2G0QSB6MVI --paths "/*" # tunisia.insports.tv
depends_on:
- make-diwansport
---
kind: pipeline

@ -130,6 +130,12 @@ india-build: clean
REACT_APP_CLIENT=india \
npm run build
tunisia-build: clean
REACT_APP_TYPE=ott \
REACT_APP_ENV=staging \
REACT_APP_CLIENT=tunisia \
npm run build
lff-build: clean
REACT_APP_TYPE=ott \
REACT_APP_ENV=staging \
@ -180,7 +186,16 @@ lff-prod:
BUILD_PATH=build_lff \
npm run build && cp -r .well-known build_lff
deploy-all: prod preprod facr-prod lff-prod
diwansport-prod:
rm -rf build_tunisia && \
REACT_APP_TYPE=ott \
REACT_APP_ENV=production \
REACT_APP_STRIPE_PK=pk_live_51J5TEYEDSxVnTgDW5XxhC6ntKZKddXgKHq5HOCDmJTdfSKluMYCdLHOcUA3Miuy8HesxG1eS4c0dQRQpMsEHRrQL00USpu5xIq \
REACT_APP_CLIENT=tunisia \
BUILD_PATH=build_tunisia \
npm run build && cp -r .well-known build_tunisia
deploy-all: prod preprod facr-prod lff-prod diwansport-prod india-prod
test:
npm test

@ -0,0 +1,29 @@
<svg width="102" height="75" viewBox="0 0 102 75" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8_12573)">
<path d="M87.7871 0H14.2129C6.36333 0 0 6.37899 0 14.2479V47.1045C0 54.9734 6.36333 61.3524 14.2129 61.3524H87.7871C95.6367 61.3524 102 54.9734 102 47.1045V14.2479C102 6.37899 95.6367 0 87.7871 0Z" fill="#0B2E4D"/>
<path d="M88.6677 33.2715H13.3323C5.96907 33.2715 0 39.2553 0 46.6366V61.626C0 69.0074 5.96907 74.9911 13.3323 74.9911H88.6677C96.0309 74.9911 102 69.0074 102 61.626V46.6366C102 39.2553 96.0309 33.2715 88.6677 33.2715Z" fill="url(#paint0_linear_8_12573)"/>
<path d="M26.3565 21.1689C26.3565 26.5538 23.838 29.2551 18.801 29.2551C14.169 29.2551 11.853 26.8805 11.853 22.1223C11.853 20.8511 12.038 19.5182 12.4078 18.1146L17.1895 17.2583C16.7139 18.8031 16.4762 20.2773 16.4762 21.681C16.4762 24.3204 17.348 25.6358 19.1004 25.6358C20.0338 25.6358 20.6943 25.3444 21.0905 24.753C21.5044 24.1262 21.707 23.0404 21.707 21.4867V12.1559H26.3477V21.1689H26.3565ZM17.031 15.5545C16.5995 15.122 16.3881 14.6011 16.3881 13.992C16.3881 13.3829 16.5995 12.8621 17.031 12.4295C17.4536 12.0058 17.9644 11.7939 18.5808 11.7939C19.1972 11.7939 19.708 12.0058 20.1395 12.4295C20.571 12.8621 20.7823 13.3829 20.7823 13.992C20.7823 14.6011 20.571 15.122 20.1395 15.5545C19.708 15.9783 19.1884 16.1901 18.5808 16.1901C17.9732 16.1901 17.4536 15.9783 17.031 15.5545Z" fill="white"/>
<path d="M29.3945 6.42676H34.0177V23.6407H29.3945V6.42676Z" fill="white"/>
<path d="M36.7301 29.5023L36.9679 25.8035C38.0862 26.0154 39.3103 26.1213 40.64 26.1213C43.0088 26.1213 44.1976 25.3003 44.1976 23.6496V23.6231H43.0792C38.6322 23.6231 36.4043 21.7604 36.4043 18.0352C36.4043 16.2608 36.9327 14.8131 37.9982 13.6919C39.2134 12.4207 40.9746 11.7852 43.2818 11.7852C45.404 11.7852 47.2093 12.0676 48.6799 12.6326V20.0126H50.626V23.6231H48.6535C48.5302 25.5563 47.7817 27.0394 46.4167 28.0811C44.9902 29.1757 42.9472 29.723 40.2789 29.723C39.1077 29.723 37.9189 29.6436 36.7213 29.4847L36.7301 29.5023ZM44.1976 15.6958C43.8366 15.5016 43.3875 15.4133 42.8415 15.4133C42.2515 15.4133 41.7936 15.634 41.4501 16.0842C41.1419 16.4991 40.9834 17.0111 40.9834 17.6379C40.9834 19.2357 41.82 20.0302 43.4931 20.0302H44.1976V15.7046V15.6958Z" fill="white"/>
<path d="M50.2646 20.0303H55.3545V23.6408H50.2646V20.0303Z" fill="white"/>
<path d="M54.8613 20.0303H59.9512V23.6408H54.8613V20.0303Z" fill="white"/>
<path d="M59.4673 20.0303H64.5572V23.6408H59.4673V20.0303Z" fill="white"/>
<path d="M64.0728 20.0303H69.1626V23.6408H64.0728V20.0303Z" fill="white"/>
<path d="M68.6694 20.0305H72.8083V12.1562H77.4314V23.6322H68.6694V20.0217V20.0305ZM72.2359 28.8406C71.8308 29.2643 71.3288 29.4762 70.7388 29.4762C70.1488 29.4762 69.6645 29.2643 69.2682 28.8406C68.872 28.4168 68.6694 27.9048 68.6694 27.3046C68.6694 26.7043 68.8632 26.2099 69.2682 25.795C69.6733 25.3713 70.1665 25.1594 70.7388 25.1594C71.3112 25.1594 71.8308 25.3713 72.2359 25.795C72.6321 26.2187 72.8347 26.7219 72.8347 27.3046C72.8347 27.8872 72.6321 28.4168 72.2359 28.8406ZM76.9119 28.8406C76.5156 29.2643 76.0224 29.4762 75.4412 29.4762C74.8601 29.4762 74.3581 29.2643 73.953 28.8406C73.548 28.4168 73.3454 27.9048 73.3454 27.3046C73.3454 26.7043 73.548 26.2099 73.953 25.795C74.3581 25.3713 74.8512 25.1594 75.4412 25.1594C76.0313 25.1594 76.5156 25.3713 76.9119 25.795C77.3081 26.2187 77.5107 26.7219 77.5107 27.3046C77.5107 27.8872 77.3081 28.4168 76.9119 28.8406Z" fill="white"/>
<path d="M79.6855 20.0299H86.0435C85.9202 18.8028 85.4183 17.7788 84.5465 16.9402C83.6306 16.0574 82.3978 15.4925 80.8744 15.2364L81.9487 11.4141C87.699 12.5705 90.5698 15.9162 90.5698 21.4511V23.6404H79.6855V20.0299Z" fill="white"/>
<path d="M20.7294 63.4183C19.0651 64.8484 16.9604 65.5634 14.4067 65.5634C12.3373 65.5634 10.5761 65.378 9.10546 65.0161L9.61621 59.384C11.2189 60.0638 12.8568 60.408 14.53 60.408C15.9037 60.408 16.5906 59.9049 16.5906 58.8897C16.5906 58.2188 16.1767 57.6715 15.3401 57.2566C15.0583 57.1153 14.6356 56.9299 14.072 56.7092C13.35 56.4532 12.8568 56.2679 12.6014 56.1531C9.93322 55.0232 8.60352 53.0634 8.60352 50.265C8.60352 48.1111 9.38725 46.4073 10.9459 45.1538C12.5398 43.8915 14.7237 43.2559 17.5152 43.2559C18.9154 43.2559 20.2274 43.3971 21.4515 43.6708L20.9583 48.782C19.7519 48.3583 18.5279 48.1464 17.3039 48.1464C15.7452 48.1464 14.9615 48.6319 14.9615 49.5941C14.9615 50.1679 15.3929 50.6623 16.2471 51.1037C16.5289 51.2361 16.9604 51.4303 17.5592 51.6775L19.0739 52.2954C21.8213 53.5489 23.1951 55.4822 23.1951 58.104C23.1951 60.2403 22.3761 62.0059 20.7294 63.4183Z" fill="white"/>
<path d="M38.4733 56.3913C36.853 58.0068 34.581 58.8101 31.6574 58.8101C31.358 58.8101 31.0938 58.8013 30.8649 58.7748V65.1395H24.9648V43.6794C27.0783 43.5647 29.3767 43.5117 31.8423 43.5117C37.7512 43.5117 40.7012 45.8864 40.7012 50.6357C40.7012 52.9838 39.9615 54.8994 38.4733 56.3825V56.3913ZM31.6926 48.3669C31.4637 48.3669 31.1907 48.3758 30.8737 48.4023V53.8401C31.1731 53.9019 31.5253 53.9372 31.9304 53.9372C33.7268 53.9372 34.625 53.0015 34.625 51.1388C34.625 49.2762 33.6476 48.3758 31.7014 48.3758L31.6926 48.3669Z" fill="white"/>
<path d="M59.3964 62.4296C57.3446 64.5394 54.7732 65.5988 51.6999 65.5988C48.3977 65.5988 45.888 64.6454 44.1708 62.7298C42.5065 60.876 41.6787 58.2453 41.6787 54.8466C41.6787 51.448 42.7442 48.5878 44.8665 46.3986C46.9183 44.2976 49.4808 43.2471 52.5453 43.2471C55.8476 43.2471 58.3661 44.2005 60.0921 46.1161C61.7564 47.9611 62.5842 50.5829 62.5842 53.9904C62.5842 57.3978 61.5186 60.2668 59.3964 62.4385V62.4296ZM52.1755 48.6408C50.8722 48.6408 49.8507 49.1263 49.0934 50.0974C48.3361 51.0949 47.9662 52.4808 47.9662 54.2728C47.9662 58.1835 49.3399 60.1433 52.0874 60.1433C53.3907 60.1433 54.4122 59.6666 55.1519 58.7132C55.918 57.7333 56.2967 56.3474 56.2967 54.5553C56.2967 50.6094 54.9229 48.6408 52.1755 48.6408Z" fill="white"/>
<path d="M74.6221 65.1395L70.6594 57.3182H70.3776V65.1395H64.4775V43.6794C66.1419 43.5647 68.5811 43.5117 71.8041 43.5117C77.4752 43.5117 80.3107 45.7451 80.3107 50.2208C80.3107 51.5273 79.9673 52.719 79.2892 53.796C78.5848 54.8994 77.6513 55.6763 76.4713 56.1088C77.1054 57.0622 77.6161 57.892 78.0212 58.5894L81.799 65.1395H74.6309H74.6221ZM71.4959 48.3846C71.0116 48.3846 70.6417 48.4023 70.3776 48.4464V53.0544C70.677 53.0986 71.0028 53.1162 71.355 53.1162C73.1867 53.1162 74.0937 52.2953 74.0937 50.6621C74.0937 49.1438 73.2307 48.3758 71.4959 48.3758V48.3846Z" fill="white"/>
<path d="M91.6619 48.7644V65.1397H85.7618V48.7644H81.1299V43.6885H96.2938V48.7644H91.6619Z" fill="white"/>
</g>
<defs>
<linearGradient id="paint0_linear_8_12573" x1="0" y1="54.1401" x2="102" y2="54.1401" gradientUnits="userSpaceOnUse">
<stop stop-color="#005D6B"/>
<stop offset="1" stop-color="#1DB9AB"/>
</linearGradient>
<clipPath id="clip0_8_12573">
<rect width="102" height="75" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 6.7 KiB

@ -5,7 +5,7 @@ import { instat } from './instat'
import { lff } from './lff'
import { insports } from './insports'
import { india } from './india'
import { tunis } from './tunis'
import { tunisia } from './tunisia'
export const currentClient = process.env.REACT_APP_CLIENT || 'insports'
@ -22,7 +22,7 @@ const clients = {
insports,
instat,
lff,
tunis,
tunis: tunisia,
}
export const client: ClientConfig = clients[currentClient]

@ -11,6 +11,7 @@ export const lff: ClientConfig = {
},
defaultLanguage: 'lv',
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.',
disabledHighlights: true,
disabledPreferences: true,
name: ClientNames.Lff,
privacyLink: '/clients/instat/terms-and-conditions.html',

@ -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',
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: 'tunisia-logo.svg',
logoHeight: 1.922,
logoLeft: 1.1,
logoTop: 1.74,
logoWidth: 9,
matchLogoHeight: 1.922,
matchLogoTopMargin: 0.9,
matchLogoWidth: 9,
matchPageMobileHeaderLogo: css`
width: 100px;
height: 21px;
top: 5px;
`,
mobileHeaderLogo: css`
width: 100px;
height: 21px;
`,
userAccountLogo: css`
width: 9rem;
height: 1.922rem;
`,
},
termsLink: '/',
title: '',
}

@ -10,16 +10,17 @@ export enum ClientIds {
Insports = 'insports-ott-web',
Instat = 'ott-web',
Lff = 'lff-ott-web',
Tunis = 'tunis-ott-web',
Tunisia = 'tunis-ott-web',
}
export enum ClientNames {
Brasil = 'brasil',
Facr = 'facr',
India = 'india',
Insports = 'insports',
Instat = 'instat',
Lff = 'lff',
Tunis = 'tunis',
Tunisia = 'tunisia'
}
export type ClientConfig = {
@ -30,6 +31,8 @@ export type ClientConfig = {
},
defaultLanguage: string,
description: string,
disabledFilters?: boolean,
disabledHighlights?: boolean,
disabledPreferences?: boolean,
name: ClientNames,
privacyLink: string,

@ -0,0 +1,15 @@
import { ClientNames } from './clients/types'
type PaymentsType = {
[key in ClientNames]: string
}
export const payments: PaymentsType = {
[ClientNames.Tunisia]: 'paymee',
brasil: 'pag_brasil',
[ClientNames.India]: 'paytm',
[ClientNames.Insports]: 'stripe',
[ClientNames.Instat]: 'stripe',
[ClientNames.Facr]: 'stripe',
[ClientNames.Lff]: 'stripe',
}

@ -5,7 +5,7 @@ import { insports } from './insports'
import { instat } from './instat'
import { lff } from './lff'
import { india } from './india'
import { tunis } from './tunis'
import { tunisia } from './tunisia'
const clients = {
[ClientIds.Facr]: facr,
@ -13,7 +13,7 @@ const clients = {
[ClientIds.Lff]: lff,
[ClientIds.Insports]: insports,
[ClientIds.India]: india,
[ClientIds.Tunis]: tunis,
[ClientIds.Tunisia]: tunisia,
}
const params = new URLSearchParams(window.location.search)

@ -1,6 +1,6 @@
import styled, { css } from 'styled-components/macro'
import { tunis as platformTunis } from 'config/clients/tunis'
import { tunisia as platformTunis } from 'features/AuthServiceApp/config/clients/tunisia'
import { isMobileDevice } from 'config/userAgent'
import type { ClientConfig } from './types'
@ -16,7 +16,7 @@ const Background = styled.div`
radial-gradient(152.89% 271.81% at 0% 96.71%, #2AB7AA 3.27%, #02505C 43.69%, #0B2E4D 100%);
`
export const tunis: ClientConfig = {
export const tunisia: ClientConfig = {
...platformTunis,
background: Background,
styles: {
@ -44,14 +44,15 @@ export const tunis: ClientConfig = {
`,
logo: css`
background-image: url(/images/tunis_auth_logo.svg);
width: 200px;
height: 178px;
width: 102px;
height: 75px;
margin-bottom: 1.82rem;
${isMobileDevice ? css`
margin-bottom: 20px;
width: 130px;
height: 100px;
background-image: url(/images/tunis_auth_logo_mobile.svg);
margin-bottom: 20px;
width: 102px;
height: 75px;
` : ''}
`,
popupApplyButton: css`

@ -22,11 +22,11 @@ export interface Settings extends UserManagerSettings {
export const getClientNameByRedirectUri = () => {
switch (client.name) {
case ClientNames.Lff:
return 'lff.instat'
return 'lff.insports'
case ClientNames.India:
return 'india.insports'
case ClientNames.Tunis:
return ClientNames.Tunis
case ClientNames.Tunisia:
return 'tunisia.insports'
case ClientNames.Facr:
return ClientNames.Facr
case ClientNames.Instat:
@ -44,7 +44,7 @@ const redirectUrl = () => {
|| client.name === 'lff'
|| client.name === 'facr'
|| client.name === 'india'
|| client.name === 'tunis'
|| client.name === 'tunisia'
):
return `${window.origin}/redirect`
case (ENV === 'staging' || ENV === 'preproduction'):

@ -1,12 +1,14 @@
import {
MouseEvent,
useEffect,
useState,
MouseEvent,
} from 'react'
import { useHistory } from 'react-router-dom'
import { ProfileTypes } from 'config'
import { ClientNames } from 'config/clients/types'
import { payments } from 'config/payments'
import isNumber from 'lodash/isNumber'
@ -15,7 +17,7 @@ import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
import { getProfileUrl } from 'features/ProfileLink/helpers'
import { getMatchInfo } from 'requests/getMatchInfo'
import { getBrazilPaymentUrl } from 'requests/getBrazilPaymentUrl'
import { getPaymentUrl } from 'requests/getPaymentUrl'
import type { Props } from './index'
@ -25,11 +27,12 @@ type ResponsePayment = {
type ResponsePaymentArray = ResponsePayment | null
export const useBrazilPayment = ({
export const useIframePayment = ({
match,
open,
paymentSystem,
selectedPackage,
setIsOpenBrasilian,
setIsOpenIframe,
}: Props) => {
const history = useHistory()
const { close } = useBuyMatchPopupStore()
@ -58,7 +61,7 @@ export const useBrazilPayment = ({
const closePopup = async (e?: MouseEvent) => {
e?.stopPropagation()
setIsOpenBrasilian(false)
setIsOpenIframe(false)
setError('')
const accessMatch = await getMatchInfo(sportType, id)
@ -68,22 +71,60 @@ export const useBrazilPayment = ({
}
}
// const paymentPaymee = async () => {
// const response: ResponseTypeTunis = await getTunisPaymentToken({
// amount: originalObject.price,
// note: `${pack} ${teams}`,
// vendor: 5020,
// })
// setSrc(`https://sandbox.paymee.tn/gateway/${response?.data.token}` || '')
//
// window.addEventListener(
// 'message',
// (event) => {
// if (event.data.event_id === 'paymee.complete') {
// // Execute Step 3
// setSrc(`https://sandbox.paymee.tn/api/v1/payments/${response?.data.token}/check`)
// }
// }, false,
// )
// }
const paymentRequest = async () => {
const json: ResponsePaymentArray = await getPaymentUrl({
action: pass === 'pass_match_access' ? 'one_payment' : 'create_subscription',
item: originalObject,
product_name: `${pack} ${teams}`,
service: paymentSystem,
})
setSrc(json?.url || '')
}
if (paymentSystem === payments[ClientNames.Brasil]) {
// eslint-disable-next-line
window.onmessage = function (event) {
if (event.data === 'close') {
closePopup()
window.onmessage = function (event) {
if (event.data === 'close') {
closePopup()
}
}
if (paymentSystem === payments[ClientNames.Tunisia]) {
window.addEventListener(
'message',
(event) => {
if (event.data.event_id === 'paymee.complete') {
closePopup()
}
}, false,
)
}
}
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 || '')
await paymentRequest()
} catch (err) {
setError('error_payment_unsuccessful')
}

@ -2,7 +2,7 @@ import { Loader } from 'features/Loader'
import { MatchPackage, Match } from 'features/BuyMatchPopup/types'
import { T9n } from 'features/T9n'
import { useBrazilPayment } from './hooks'
import { useIframePayment } from './hooks'
import {
LoaderWrapper,
@ -12,25 +12,28 @@ import {
export type Props = {
match: Match,
open: boolean,
paymentSystem: string,
selectedPackage: MatchPackage,
setIsOpenBrasilian: (open: boolean) => void,
setIsOpenIframe: (open: boolean) => void,
}
export const BrazilPayment = ({
export const IframePayment = ({
match,
open,
paymentSystem,
selectedPackage,
setIsOpenBrasilian,
setIsOpenIframe,
}: Props) => {
const {
closePopup,
error,
src,
} = useBrazilPayment({
} = useIframePayment({
match,
open,
paymentSystem,
selectedPackage,
setIsOpenBrasilian,
setIsOpenIframe,
})
return (

@ -8,6 +8,8 @@ import {
import isNull from 'lodash/isNull'
import { MDASH } from 'config'
import { payments } from 'config/payments'
import { client } from 'config/clients'
import { CountryCodeType, getCountryCode } from 'requests/getCountryCode'
@ -18,7 +20,7 @@ import { useCardsStore } from 'features/CardsStore'
import { ArrowLoader } from 'features/ArrowLoader'
import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled'
import { BrazilPayment } from '../BrazilPayment'
import { IframePayment } from '../IframePayment'
import { useBuyMatchPopupStore } from '../../store'
import { SelectedCard } from '../SelectedCard'
@ -38,7 +40,7 @@ export const PackageSelectionStep = () => {
cards,
fetchCards,
} = useCardsStore()
const [isOpenBrasilian, setIsOpenBrasilian] = useState(false)
const [isOpenIframe, setIsOpenIframe] = useState(false)
const [countryCode, setCountryCode] = useState<CountryCodeType | null>(null)
const {
@ -65,7 +67,7 @@ export const PackageSelectionStep = () => {
if (!match) return null
const isBrasil = countryCode?.country_code === 'BR'
const isStripe = payments[client.name] === 'stripe'
const getUserCountry = () => {
getCountryCode().then(setCountryCode)
@ -75,8 +77,8 @@ export const PackageSelectionStep = () => {
cards?.length
&& lastSelectedPackage === selectedPackage?.id
&& setDisabledBuyBtn(true)
if (isBrasil) {
setIsOpenBrasilian(true)
if (!isStripe) {
setIsOpenIframe(true)
} else {
onBuyClick(e)
}
@ -110,7 +112,7 @@ export const PackageSelectionStep = () => {
</Header>
<Body marginTop={20}>
<Packages />
{isBrasil ? null : <SelectedCard />}
{isStripe && <SelectedCard />}
</Body>
<Footer>
{loader ? (
@ -124,12 +126,13 @@ export const PackageSelectionStep = () => {
</Button>
)}
</Footer>
{selectedPackage && isOpenBrasilian && (
<BrazilPayment
{selectedPackage && !isStripe && (
<IframePayment
match={match}
open={isOpenBrasilian}
open={isOpenIframe}
paymentSystem={countryCode?.country_code === 'BR' ? payments.brasil : payments[client.name]}
selectedPackage={selectedPackage}
setIsOpenBrasilian={setIsOpenBrasilian}
setIsOpenIframe={setIsOpenIframe}
/>
)}
</Wrapper>

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

@ -14,7 +14,7 @@ export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
export const defaultHeaderStyles = (
color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
) => {
if (client.name === 'lff') {
if (['lff', 'tunis'].includes(client.name)) {
return client.styles.homePageHeader
}

@ -20,6 +20,7 @@ import { useHomePage } from './hooks'
import { Header } from './components/Header'
import { HeaderMobile } from '../HeaderMobile'
import { HeaderFilters } from './components/HeaderFilters'
import { client } from '../../config/clients'
const Home = () => {
usePageLogger(PAGES.home)
@ -46,7 +47,7 @@ const Home = () => {
<Main>
<UserFavorites />
<Content>
{isMobileDevice ? null : <HeaderFilters />}
{!isMobileDevice && !client.disabledFilters && <HeaderFilters />}
<Matches fetch={fetchMatches} />
<ConfirmPopup
isModalOpen={isShowConfirmPopup}

@ -31,7 +31,6 @@ export const LiveMatch = () => {
resume,
streamUrl,
} = useLiveMatch()
return (
<Fragment>
<Container>

@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'
import type { ObjectWithName } from 'features/Name'
import { PAGES, ProfileTypes } from 'config'
import { client, isLffClient } from 'config/clients'
import { client } from 'config/clients'
import { ClientNames } from 'config/clients/types'
import { checkPage } from 'helpers/checkPage'
@ -94,7 +94,7 @@ export const ProfileCard = ({ profile }: ProfileType) => {
<StarIcon isFavorite={isFavorite} />
<T9n t='add_to_favorites' />
</FavoriteButton>
{!isLffClient && isPlayerPage && isGetHighLightShown && (
{!client.disabledHighlights && isPlayerPage && isGetHighLightShown && (
<Link to={PAGES.highlights}>
<SсGetHighlightBtn
onClick={() => setPlayerHighlight({

@ -13,7 +13,7 @@ export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
export const defaultHeaderStyles = (
color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
) => {
if (client.name === 'lff') {
if (['lff', 'tunis'].includes(client.name)) {
return client.styles.homePageHeader
}

@ -82,6 +82,18 @@ export const facrTheme: CustomTheme = {
name: 'facr',
}
type Name = 'light' | 'dark' | 'lff' | 'facr'
export const tunisTheme: CustomTheme = {
...defaultTheme,
colors: {
...defaultTheme.colors,
background: '#1D1D1D',
button: '#0E8F84',
dateFilter: '#ffffff80',
inputs: '#3A4849',
},
name: 'tunis',
}
type Name = 'light' | 'dark' | 'lff' | 'facr' | 'tunis'
export type CustomTheme = typeof lightTheme

@ -13,6 +13,7 @@ import {
defaultTheme,
facrTheme,
lffTheme,
tunisTheme,
} from './config'
import { ClientNames } from '../../config/clients/types'
@ -31,6 +32,9 @@ export const Theme = ({ children }: Props) => {
case ClientNames.Facr:
setTheme(facrTheme)
break
case ClientNames.Tunisia:
setTheme(tunisTheme)
break
default:
setTheme(defaultTheme)
break

@ -85,7 +85,7 @@ const UserAccount = () => {
</Fragment>
)}
<ScoreSwitch />
{!isLffClient && (
{!client.disabledHighlights && (
<Link to={`${PAGES.highlights}`}>
<ScButtonGetHighlight>
<T9n t='get_highlights' />

@ -8,12 +8,14 @@ type Props = {
action: 'one_payment' | 'create_subscription',
item: SubscriptionResponse,
product_name: string,
service: string,
}
export const getBrazilPaymentUrl = async ({
export const getPaymentUrl = async ({
action,
item,
product_name,
service,
}: Props) => {
const config = {
body: {
@ -22,7 +24,7 @@ export const getBrazilPaymentUrl = async ({
item: { ...item, product_name },
url_return: `${window.location.origin}${PAGES.thanksForSubscribe}`,
},
service: 'pag_brasil',
service,
},
}
Loading…
Cancel
Save