fix(in-685): fix access to match

src/features/BuyMatchPopup/index.tsx

@@ -23,10 +23,10 @@ export const BuyMatchPopup = () => {
   const {
     close,
     currentStep,
-    match,
+    isPopupOpen,
   } = useBuyMatchPopupStore()
 
-  if (!match || !currentStep) return null
+  if (!isPopupOpen || !currentStep) return null
 
   const Step = components[currentStep]
 

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

@@ -33,6 +33,9 @@ import {
   SubscriptionType,
 } from 'features/BuyMatchPopup/types'
 import { getProfileUrl } from 'features/ProfileLink/helpers'
+import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
+
+import { useToggle } from 'hooks'
 
 import { isSubscribePopup } from 'helpers'
 
@@ -57,6 +60,11 @@ export const useBuyMatchPopup = () => {
   const [disabledBuyBtn, setDisabledBuyBtn] = useState(false)
   const [showClearBtn, setShowClearBtn] = useState(false)
   const [lastSelectedPackage, setLastSelectedPackage] = useState('')
+  const {
+    close,
+    isOpen,
+    open,
+  } = useToggle()
   const setDataHighlights = useSetRecoilState(dataForPayHighlights)
 
   const goTo = useCallback(
@@ -93,8 +101,9 @@ export const useBuyMatchPopup = () => {
 
   const openPopup = useCallback((matchData: Match) => {
     setMatch(matchData)
+    open()
     setSteps([])
-  }, [])
+  }, [open])
 
   useEffect(() => {
     if (isEmpty(matchSubscriptions)) return
@@ -108,7 +117,7 @@ export const useBuyMatchPopup = () => {
   }, [matchSubscriptions, onSubscriptionSelect])
 
   const closePopup = () => {
-    setMatch(null)
+    close()
     setSteps([])
     setError('')
     resetSubscriptions()
@@ -132,6 +141,7 @@ export const useBuyMatchPopup = () => {
   const postPaymentHandler = () => {
     if (!match) return
     if (!isSubscribePopup()) {
+      setMatch((prev) => prev && { ...prev, access: MatchAccess.RedirectToProfile })
       redirectToMatchProfile(match)
     }
     closePopup()
@@ -215,6 +225,7 @@ export const useBuyMatchPopup = () => {
     goBack,
     goTo,
     hasPreviousStep: size(steps) > 1,
+    isPopupOpen: isOpen,
     lastSelectedPackage,
     loader,
     match,

src/features/BuyMatchPopup/types.tsx

@@ -2,6 +2,7 @@ import type { SubscriptionResponse, Subscription } from 'requests/getSubscriptio
 
 import type { LexicsId, Values } from 'features/LexicsStore/types'
 import type { Match as MatchBase } from 'features/Matches/hooks'
+import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
 
 export enum Steps {
   CardSelection = 'CardSelection',
@@ -42,7 +43,9 @@ export type Match = Pick<MatchBase, (
   | 'tournament'
   | 'calc'
   | 'hasVideo'
-)>
+)> & {
+  access?: MatchAccess,
+}
 
 export type MatchSubscription = Pick<Subscription, (
   'id'

src/features/MatchPage/components/SubscriptionGuard/index.tsx

@@ -1,13 +1,19 @@
 import type { ReactNode } from 'react'
 import { Fragment, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
 
-import { usePageParams } from 'hooks/usePageParams'
+import { PAGES } from 'config'
+
+import { usePageParams } from 'hooks'
 
 import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
 import { useMatchPageStore } from 'features/MatchPage/store'
+import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
 
 import { isSubscribePopup } from 'helpers'
 
+import { getMatchInfo } from 'requests'
+
 import { prepareMatchProfile } from '../../helpers/prepareMatchProfile'
 import { useAuthStore } from '../../../AuthStore'
 
@@ -16,14 +22,26 @@ type Props = {
 }
 
 export const SubscriptionGuard = ({ children }: Props) => {
-  const { profile: matchProfile } = useMatchPageStore()
-  const { open: openBuyMatchPopup } = useBuyMatchPopupStore()
+  const { profile: matchProfile, setMatchProfile } = useMatchPageStore()
+  const { match, open: openBuyMatchPopup } = useBuyMatchPopupStore()
   const { profileId: matchId, sportType } = usePageParams()
   const { user } = useAuthStore()
+  const history = useHistory()
+
+  const checkAccess = async () => {
+    const profile = await getMatchInfo(sportType, matchId)
+
+    if (!profile?.sub) {
+      history.replace(PAGES.home)
+    }
+  }
 
   useEffect(() => {
+    let timer: NodeJS.Timeout
+
     if ((user && matchProfile
-      && !matchProfile.sub)
+      && !matchProfile.sub
+      && match?.access !== MatchAccess.RedirectToProfile)
       || (matchProfile && isSubscribePopup())) {
       const profile = prepareMatchProfile({
         matchId,
@@ -32,12 +50,26 @@ export const SubscriptionGuard = ({ children }: Props) => {
       })
       openBuyMatchPopup(profile)
     }
+
+    if (match?.access === MatchAccess.RedirectToProfile) {
+      setMatchProfile((profile) => profile && {
+        ...profile,
+        access: true,
+        sub: true,
+      })
+
+      timer = setTimeout(checkAccess, 30000)
+    }
+
+    return () => timer && clearTimeout(timer)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     matchId,
     openBuyMatchPopup,
-    matchProfile,
+    matchProfile?.sub,
     sportType,
     user,
+    match?.access,
   ])
 
   return (

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

@@ -453,6 +453,7 @@ export const useMatchPage = () => {
     setIsPlayingFiltersEpisodes: isStatsPlaylist
       ? setStatsIsPlayinFiltersEpisodes
       : setIsPlayersStatsFetching,
+    setMatchProfile,
     setPlaingOrder: isStatsPlaylist ? setStatsPlaingOrder : setPlaingOrder,
     setPlayingData,
     setPlayingProgress,