diff --git a/src/components/InfoIcon/InfoIcon.tsx b/src/components/InfoIcon/InfoIcon.tsx
new file mode 100644
index 00000000..3433ad37
--- /dev/null
+++ b/src/components/InfoIcon/InfoIcon.tsx
@@ -0,0 +1,5 @@
+import { Icon } from 'features/Icon'
+
+export const InfoIcon = () => (
+
+)
diff --git a/src/config/lexics/payment.tsx b/src/config/lexics/payment.tsx
index f8f4d195..d7d33afd 100644
--- a/src/config/lexics/payment.tsx
+++ b/src/config/lexics/payment.tsx
@@ -17,4 +17,5 @@ export const paymentLexics = {
payment_method: 2010,
subscription_plan: 18182,
sum: 838,
+ watch_match: 18199,
}
diff --git a/src/config/lexics/userAccount.tsx b/src/config/lexics/userAccount.tsx
index 209248c6..dc98b64a 100644
--- a/src/config/lexics/userAccount.tsx
+++ b/src/config/lexics/userAccount.tsx
@@ -2,6 +2,7 @@ import { publicLexics } from './public'
import { paymentLexics } from './payment'
const navigations = {
+ about_the_project: 18170,
bank_card: 14205,
logout: 15058,
my_devices: 15052,
@@ -35,6 +36,7 @@ export const userAccountLexics = {
subscriptions: 13016,
subscriptions_active: 15061,
subscriptions_removed: 15062,
+ unsubscribe_prompt: 18198,
user_account: 12928,
...navigations,
...publicLexics,
diff --git a/src/config/pages.tsx b/src/config/pages.tsx
index cf088427..357ab69b 100644
--- a/src/config/pages.tsx
+++ b/src/config/pages.tsx
@@ -1,4 +1,5 @@
export const PAGES = {
+ about_the_project: 'https://instatsport.com/InStatTV/ott_platform',
home: '/',
match: '/matches',
player: '/players',
diff --git a/src/features/AuthServiceApp/components/Registration/index.tsx b/src/features/AuthServiceApp/components/Registration/index.tsx
index 7f883aa6..c22cc405 100644
--- a/src/features/AuthServiceApp/components/Registration/index.tsx
+++ b/src/features/AuthServiceApp/components/Registration/index.tsx
@@ -20,6 +20,7 @@ import {
ButtonSolid,
Error,
LanguageSelectWrapper,
+ Wrapper,
} from '../../styled'
import {
Label,
@@ -27,6 +28,7 @@ import {
ButtonOutline,
CheckboxWrapper,
} from './styled'
+import { CompanyInfo } from '../../../CompanyInfo'
const Registration = () => {
const history = useHistory()
@@ -51,90 +53,93 @@ const Registration = () => {
} = useRegistrationForm()
return (
-
-
-
+
+
+
)
}
diff --git a/src/features/BuyMatchPopup/components/BrazilPayment/hooks.tsx b/src/features/BuyMatchPopup/components/BrazilPayment/hooks.tsx
new file mode 100644
index 00000000..5caaf332
--- /dev/null
+++ b/src/features/BuyMatchPopup/components/BrazilPayment/hooks.tsx
@@ -0,0 +1,84 @@
+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 { 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)
+
+ const accessMatch = await getMatchInfo(sportType, id)
+ if (accessMatch?.access) {
+ close()
+ history.push(matchLink)
+ }
+ }
+
+ useEffect(() => {
+ if (open) {
+ (async () => {
+ const json: ResponsePaymentArray = await getBrazilPaymentUrl({ item: originalObject, product_name: `${pack} ${teams}` })
+ setSrc(json?.url || '')
+ })()
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectedPackage, open])
+
+ return {
+ closePopup,
+ matchLink,
+ src,
+ }
+}
diff --git a/src/features/BuyMatchPopup/components/BrazilPayment/index.tsx b/src/features/BuyMatchPopup/components/BrazilPayment/index.tsx
index 5606c310..45ab0d83 100644
--- a/src/features/BuyMatchPopup/components/BrazilPayment/index.tsx
+++ b/src/features/BuyMatchPopup/components/BrazilPayment/index.tsx
@@ -1,66 +1,54 @@
-import {
- useEffect,
- useState,
- MouseEvent,
-} from 'react'
-
import { Loader } from 'features/Loader'
-import { useLexicsStore } from 'features/LexicsStore'
-import { MatchPackage } from 'features/BuyMatchPopup/types'
+import { MatchPackage, Match } from 'features/BuyMatchPopup/types'
+import { T9n } from 'features/T9n'
-import { getBrazilPaymentUrl } from 'requests/getBrazilPaymentUrl'
+import { useBrazilPayment } from './hooks'
-import isNumber from 'lodash/isNumber'
+import {
+ LoaderWrapper,
+ ScButton,
+ ScModal,
+} from './styled'
-import { ScModal, LoaderWrapper } from './styled'
+import { Button } from '../../styled'
-type Props = {
+export type Props = {
+ match: Match,
open: boolean,
selectedPackage: MatchPackage,
setIsOpenBrasilian: (open: boolean) => void,
}
-type ResponsePayment = {
- url: string,
-}
-
-type ResponsePaymentArray = ResponsePayment | null
-
export const BrazilPayment = ({
+ match,
open,
selectedPackage,
setIsOpenBrasilian,
}: Props) => {
const {
- name,
- nameLexic,
- originalObject,
- pass,
- } = selectedPackage
- const [src, setSrc] = useState('')
- const { translate } = useLexicsStore()
- const teams = isNumber(nameLexic) ? translate(String(nameLexic)) : name
- const pack = translate(String(pass))
-
- const closePopup = (e?: MouseEvent) => {
- e?.stopPropagation()
- setIsOpenBrasilian(false)
- }
-
- useEffect(() => {
- if (open) {
- (async () => {
- const json: ResponsePaymentArray = await getBrazilPaymentUrl({ item: originalObject, product_name: `${pack} ${teams}` })
- setSrc(json?.url || '')
- })()
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [selectedPackage, open])
+ closePopup,
+ matchLink,
+ src,
+ } = useBrazilPayment({
+ match,
+ open,
+ selectedPackage,
+ setIsOpenBrasilian,
+ })
return (
{src && open ? (
-
+ <>
+
+
+
+
+ >
) : (
diff --git a/src/features/BuyMatchPopup/components/BrazilPayment/styled.tsx b/src/features/BuyMatchPopup/components/BrazilPayment/styled.tsx
index 0b4ab8bc..4c558283 100644
--- a/src/features/BuyMatchPopup/components/BrazilPayment/styled.tsx
+++ b/src/features/BuyMatchPopup/components/BrazilPayment/styled.tsx
@@ -13,6 +13,7 @@ export const ScModal = styled(BaseModal)`
padding: 50px;
background-color: #333333;
border-radius: 5px;
+ justify-content: center;
${isMobileDevice
? css`
@@ -38,3 +39,9 @@ export const LoaderWrapper = styled.div`
align-items: center;
justify-content: center;
`
+
+export const ScButton = styled.div`
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+`
diff --git a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
index 8fd65222..262c65f1 100644
--- a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
+++ b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
@@ -109,6 +109,7 @@ export const PackageSelectionStep = () => {
{selectedPackage && isOpenBrasilian && (
{
const [match, setMatch] = useState(null)
const [error, setError] = useState('')
const [loader, setLoader] = useState(false)
+ const { user } = useAuthStore()
const goTo = useCallback(
(step: Steps, e?: MouseEvent) => setSteps((state) => {
@@ -105,7 +107,7 @@ export const useBuyMatchPopup = () => {
setError('')
resetSubscriptions()
setSelectedPackage(null)
- if (isMatchPage()) history.push(PAGES.home)
+ if (isMatchPage() && user?.profile.country_code !== 'BR') history.push(PAGES.home)
}
const redirectToMatchProfile = ({ id, sportType }: Match) => {
diff --git a/src/features/CompanyInfo/config.tsx b/src/features/CompanyInfo/config.tsx
index b741b1b7..f7ceed43 100644
--- a/src/features/CompanyInfo/config.tsx
+++ b/src/features/CompanyInfo/config.tsx
@@ -3,4 +3,5 @@ export const lexics = [
18082,
18083,
18084,
+ 18170,
]
diff --git a/src/features/CompanyInfo/index.tsx b/src/features/CompanyInfo/index.tsx
index 25459619..ab2b47a2 100644
--- a/src/features/CompanyInfo/index.tsx
+++ b/src/features/CompanyInfo/index.tsx
@@ -1,10 +1,11 @@
import { T9n } from 'features/T9n'
import { useLexicsConfig } from 'features/LexicsStore'
+import { PAGES } from 'config'
import {
+ CompanyInfoLink,
CompanyInfoText,
CompanyInfoWrapper,
- CompanyName,
} from './styled'
import { lexics } from './config'
@@ -21,9 +22,15 @@ export const CompanyInfo = ({
return (
-
-
-
+
+ {' | '}
+
+
+
+
diff --git a/src/features/CompanyInfo/styled.tsx b/src/features/CompanyInfo/styled.tsx
index 0e89b6bd..d9eb21d9 100644
--- a/src/features/CompanyInfo/styled.tsx
+++ b/src/features/CompanyInfo/styled.tsx
@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom'
+
import styled, { css } from 'styled-components/macro'
import { isMobileDevice } from 'config/userAgent'
@@ -8,14 +10,16 @@ export const CompanyInfoWrapper = styled.div`
font-weight: 400;
font-size: 12px;
line-height: 15px;
- color: rgba(255, 255, 255, 0.6);
+ color: rgba(255, 255, 255, 0.5);
${isMobileDevice ? css`
margin-top: 20px;
` : ''}
`
-export const CompanyName = styled.div`
- color: rgba(255, 255, 255, 0.8);
-`
export const CompanyInfoText = styled.div``
+
+export const CompanyInfoLink = styled(Link)`
+ color: rgba(255, 255, 255, 0.7);
+ text-decoration: underline;
+`
diff --git a/src/features/UserAccount/components/UnsubscribePrompt/index.tsx b/src/features/UserAccount/components/UnsubscribePrompt/index.tsx
new file mode 100644
index 00000000..8c0e4379
--- /dev/null
+++ b/src/features/UserAccount/components/UnsubscribePrompt/index.tsx
@@ -0,0 +1,32 @@
+import { InfoIcon } from 'components/InfoIcon/InfoIcon'
+import styled, { css } from 'styled-components'
+import { T9n } from 'features/T9n'
+import { isMobileDevice } from 'config/userAgent'
+
+const Wrapper = styled.div`
+ display: flex;
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 16px;
+ max-width: 340px;
+ margin-top: 50px;
+
+ ${isMobileDevice
+ ? css`
+ margin-top: 25px;
+ font-size: 12px;
+ `
+ : ''}
+`
+
+const WrapperIcon = styled.div`
+ margin-right: 10px;
+`
+
+export const UnsubscribePrompt = () => (
+
+
+
+
+
+
+)
diff --git a/src/features/UserAccount/index.tsx b/src/features/UserAccount/index.tsx
index be856f31..dc59001d 100644
--- a/src/features/UserAccount/index.tsx
+++ b/src/features/UserAccount/index.tsx
@@ -16,6 +16,7 @@ import { PageBankCards } from './components/PageBankCards'
import { PageSubscriptions } from './components/PageSubscriptions'
import { PagePaymentsHistory } from './components/PagePaymentsHistory'
import { ScoreSwitch } from './components/ScoreSwitch'
+import { UnsubscribePrompt } from './components/UnsubscribePrompt'
import {
Aside,
Body,
@@ -61,8 +62,16 @@ const UserAccount = () => {
>
+
+
+
+
diff --git a/src/libs/index.ts b/src/libs/index.ts
index ade6a4dc..454c8f2c 100644
--- a/src/libs/index.ts
+++ b/src/libs/index.ts
@@ -10,3 +10,4 @@ export { Star } from './objects/Star'
export { Dollar } from './objects/Dollar'
export { Close } from './objects/Close'
export { PoweredByInstat } from './objects/PoweredByInstat'
+export { Info } from './objects/Info'
diff --git a/src/libs/objects/Info.tsx b/src/libs/objects/Info.tsx
new file mode 100644
index 00000000..3570f1b2
--- /dev/null
+++ b/src/libs/objects/Info.tsx
@@ -0,0 +1,14 @@
+export const Info = () => (
+
+)
diff --git a/src/requests/getMatchInfo.tsx b/src/requests/getMatchInfo.tsx
index b6e71d66..31960455 100644
--- a/src/requests/getMatchInfo.tsx
+++ b/src/requests/getMatchInfo.tsx
@@ -17,6 +17,7 @@ export type Team = {
}
export type MatchInfo = {
+ access?: boolean,
calc: boolean,
country_id: number,
date: string,