fix(#2445): add button for go to matchpage

src/config/lexics/payment.tsx

@@ -17,4 +17,5 @@ export const paymentLexics = {
   payment_method: 2010,
   subscription_plan: 18182,
   sum: 838,
+  watch_match: 18199,
 }

src/features/BuyMatchPopup/components/BrazilPayment/hooks.tsx

@@ -11,10 +11,12 @@ 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 = {
@@ -30,10 +32,13 @@ export const useBrazilPayment = ({
   setIsOpenBrasilian,
 }: Props) => {
   const history = useHistory()
+  const { close } = useBuyMatchPopupStore()
 
   const [src, setSrc] = useState('')
   const { translate } = useLexicsStore()
 
+  const { id, sportType } = match
+
   const {
     name,
     nameLexic,
@@ -44,19 +49,19 @@ export const useBrazilPayment = ({
   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 { id, sportType } = match
     const accessMatch = await getMatchInfo(sportType, id)
-
-    if (accessMatch?.access) {
-      const matchLink = getProfileUrl({
-        id,
-        profileType: ProfileTypes.MATCHES,
-        sportType,
-      })
+    if (!accessMatch?.access) {
+      close()
       history.push(matchLink)
     }
   }
@@ -73,6 +78,7 @@ export const useBrazilPayment = ({
 
   return {
     closePopup,
+    matchLink,
     src,
   }
 }

src/features/BuyMatchPopup/components/BrazilPayment/index.tsx

@@ -1,9 +1,16 @@
 import { Loader } from 'features/Loader'
 import { MatchPackage, Match } from 'features/BuyMatchPopup/types'
+import { T9n } from 'features/T9n'
 
 import { useBrazilPayment } from './hooks'
 
-import { ScModal, LoaderWrapper } from './styled'
+import {
+  LoaderWrapper,
+  ScButton,
+  ScModal,
+} from './styled'
+
+import { Button } from '../../styled'
 
 export type Props = {
   match: Match,
@@ -18,7 +25,11 @@ export const BrazilPayment = ({
   selectedPackage,
   setIsOpenBrasilian,
 }: Props) => {
-  const { closePopup, src } = useBrazilPayment({
+  const {
+    closePopup,
+    matchLink,
+    src,
+  } = useBrazilPayment({
     match,
     open,
     selectedPackage,
@@ -28,7 +39,16 @@ export const BrazilPayment = ({
   return (
     <ScModal isOpen={open} withCloseButton close={closePopup}>
       {src && open ? (
-        <iframe title='BrazilPayment' src={src} height={600} width='100%' />
+        <>
+          <iframe title='BrazilPayment' src={src} height={600} width='100%' />
+          <ScButton>
+            <Button>
+              <a href={matchLink} style={{ color: 'white' }}>
+                <T9n t='watch_match' />
+              </a>
+            </Button>
+          </ScButton>
+        </>
       ) : (
         <LoaderWrapper>
           <Loader color='#515151' />

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;
+`

src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx

@@ -56,7 +56,7 @@ export const PackageSelectionStep = () => {
 
   if (!match) return null
 
-  const isBrasil = user?.profile.country_code === 'BR'
+  const isBrasil = user?.profile.country_code !== 'BR'
 
   const onHandleClick = (e?: MouseEvent<HTMLButtonElement>) => {
     if (isBrasil) {

src/features/BuyMatchPopup/store/hooks/index.tsx

@@ -30,6 +30,7 @@ import {
   Steps,
   SubscriptionType,
 } from 'features/BuyMatchPopup/types'
+import { useAuthStore } from 'features/AuthStore'
 import { getProfileUrl } from 'features/ProfileLink/helpers'
 
 import { useSubscriptions } from './useSubscriptions'
@@ -50,6 +51,7 @@ export const useBuyMatchPopup = () => {
   const [match, setMatch] = useState<Match | null>(null)
   const [error, setError] = useState('')
   const [loader, setLoader] = useState(false)
+  const { user } = useAuthStore()
 
   const goTo = useCallback(
     (step: Steps, e?: MouseEvent<HTMLButtonElement>) => 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) => {