diff --git a/src/features/BuyMatchPopup/index.tsx b/src/features/BuyMatchPopup/index.tsx index b8efaa2d..a0932bc6 100644 --- a/src/features/BuyMatchPopup/index.tsx +++ b/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] diff --git a/src/features/BuyMatchPopup/store/hooks/index.tsx b/src/features/BuyMatchPopup/store/hooks/index.tsx index 4de6393c..2f16a9d7 100644 --- a/src/features/BuyMatchPopup/store/hooks/index.tsx +++ b/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, diff --git a/src/features/BuyMatchPopup/types.tsx b/src/features/BuyMatchPopup/types.tsx index c72f6fa9..370fc8cb 100644 --- a/src/features/BuyMatchPopup/types.tsx +++ b/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 +)> & { + access?: MatchAccess, +} export type MatchSubscription = Pick { - 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 ( diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx index e4624170..280c4ede 100644 --- a/src/features/MatchPage/store/hooks/index.tsx +++ b/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,