diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx index 2b8f6c59..e94c981d 100644 --- a/src/features/App/index.tsx +++ b/src/features/App/index.tsx @@ -3,6 +3,8 @@ import { Router } from 'react-router-dom' import { history } from 'config' +import { isMatchPage } from 'helpers/isMatchPage' + import { GlobalStores } from 'features/GlobalStores' import { useAuthStore } from 'features/AuthStore' import { Background } from 'features/Background' @@ -11,7 +13,6 @@ import { Theme } from 'features/Theme' import { JoinMatchPage } from 'features/JoinMatchPage' import { AuthenticatedApp } from './AuthenticatedApp' -import { isMatchPage } from '../JoinMatchPage/helpers' const Main = () => { const { loadingUser, user } = useAuthStore() diff --git a/src/features/AuthStore/hooks/useAuth.tsx b/src/features/AuthStore/hooks/useAuth.tsx index db7793df..1cc1a114 100644 --- a/src/features/AuthStore/hooks/useAuth.tsx +++ b/src/features/AuthStore/hooks/useAuth.tsx @@ -15,11 +15,11 @@ import { PAGES } from 'config' import { writeToken, removeToken } from 'helpers/token' import { setCookie, removeCookie } from 'helpers/cookie' +import { isMatchPage } from 'helpers/isMatchPage' import { useLocalStore, useToggle } from 'hooks' import { queryParamStorage } from 'features/QueryParamsStorage' -import { isMatchPage } from 'features/JoinMatchPage/helpers' import { getClientSettings } from '../helpers' diff --git a/src/features/BuyMatchPopup/store/helpers.tsx b/src/features/BuyMatchPopup/store/helpers.tsx index 2ef42b62..70ef78ff 100644 --- a/src/features/BuyMatchPopup/store/helpers.tsx +++ b/src/features/BuyMatchPopup/store/helpers.tsx @@ -7,10 +7,13 @@ import type { Subscriptions, } from 'requests/getSubscriptions' -import type { Match } from 'features/Matches' import { getName } from 'features/Name' -import type { MatchSubscriptions, MatchSubscription } from '../types' +import type { + MatchSubscriptions, + MatchSubscription, + Match, +} from '../types' import { SubscriptionType } from '../types' import { passLexics, diff --git a/src/features/BuyMatchPopup/store/hooks/index.tsx b/src/features/BuyMatchPopup/store/hooks/index.tsx index daf08175..184e7108 100644 --- a/src/features/BuyMatchPopup/store/hooks/index.tsx +++ b/src/features/BuyMatchPopup/store/hooks/index.tsx @@ -10,7 +10,9 @@ import type { PaymentIntent, StripeError } from '@stripe/stripe-js' import last from 'lodash/last' -import { ProfileTypes } from 'config' +import { PAGES, ProfileTypes } from 'config' + +import { isMatchPage } from 'helpers/isMatchPage' import { buyMatchSubscription, @@ -20,9 +22,12 @@ import { } from 'requests/buySubscription' import type { OnFailedPaymentActionData } from 'requests/buySubscription' -import type { Match } from 'features/Matches/hooks' import { useCardsStore } from 'features/CardsStore' -import { Steps, SubscriptionType } from 'features/BuyMatchPopup/types' +import { + Match, + Steps, + SubscriptionType, +} from 'features/BuyMatchPopup/types' import { getProfileUrl } from 'features/ProfileLink/helpers' import { useSubscriptions } from './useSubscriptions' @@ -60,10 +65,10 @@ export const useBuyMatchPopup = () => { return newState }), []) - const openPopup = (matchData: Match) => { + const openPopup = useCallback((matchData: Match | null) => { setMatch(matchData) setSteps([Steps.Subscriptions]) - } + }, []) const { fetchSubscriptions, @@ -81,6 +86,7 @@ export const useBuyMatchPopup = () => { setSteps([]) setError('') resetSubscriptions() + if (isMatchPage()) history.push(PAGES.home) } const redirectToMatchProfile = ({ id, sportType }: Match) => { diff --git a/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx b/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx index 4a8d2080..7951c11d 100644 --- a/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx +++ b/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx @@ -10,10 +10,13 @@ import first from 'lodash/first' import { getSubscriptions } from 'requests' -import type { Match } from 'features/Matches' import { useLexicsStore } from 'features/LexicsStore' -import type { MatchSubscriptions, MatchSubscription } from '../../types' +import type { + MatchSubscriptions, + MatchSubscription, + Match, +} from '../../types' import { SubscriptionType } from '../../types' import { transformSubsciptions } from '../helpers' diff --git a/src/features/BuyMatchPopup/types.tsx b/src/features/BuyMatchPopup/types.tsx index 6879387b..1418bbc7 100644 --- a/src/features/BuyMatchPopup/types.tsx +++ b/src/features/BuyMatchPopup/types.tsx @@ -1,4 +1,5 @@ import type { LexicsId, Values } from 'features/LexicsStore/types' +import type { Match as MatchBase } from 'features/Matches/hooks' import type { SubscriptionResponse } from 'requests' export enum Steps { @@ -31,4 +32,14 @@ export type MatchSubscription = { type: SubscriptionType, } +export type Match = Pick + export type MatchSubscriptions = Record> diff --git a/src/features/MatchPage/helpers/prepareMatchProfile.tsx b/src/features/MatchPage/helpers/prepareMatchProfile.tsx new file mode 100644 index 00000000..efd7ae8a --- /dev/null +++ b/src/features/MatchPage/helpers/prepareMatchProfile.tsx @@ -0,0 +1,28 @@ +import type { MatchInfo } from 'requests' + +import { SportTypes } from 'config' + +import type { Match } from 'features/BuyMatchPopup/types' + +type Args = { + matchId: number, + profile: MatchInfo, + sportType: SportTypes, +} + +export const prepareMatchProfile = ({ + matchId, + profile, + sportType, +}: Args): Match | null => { + if (!profile) return null + return { + calc: profile.calc, + hasVideo: profile.has_video, + id: matchId, + sportType, + team1: profile.team1, + team2: profile.team2, + tournament: profile.tournament, + } +} diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx index 9af0d25c..1b81fdf3 100644 --- a/src/features/MatchPage/index.tsx +++ b/src/features/MatchPage/index.tsx @@ -1,7 +1,11 @@ +import { useEffect } from 'react' + import { usePageLogger } from 'hooks/usePageLogger' +import { usePageParams } from 'hooks/usePageParams' import { ProfileHeader } from 'features/ProfileHeader' import { UserFavorites } from 'features/UserFavorites' +import { useBuyMatchPopupStore } from 'features/BuyMatchPopup' import { PageWrapper, Main, @@ -10,15 +14,35 @@ import { import { MatchProfileCard } from './components/MatchProfileCard' import { FinishedMatch } from './components/FinishedMatch' import { LiveMatch } from './components/LiveMatch' +import { prepareMatchProfile } from './helpers/prepareMatchProfile' import { useMatchProfile } from './hooks/useMatchProfile' import { Wrapper } from './styled' const MatchPage = () => { usePageLogger() const profile = useMatchProfile() + const { open: openBuyMatchPopup } = useBuyMatchPopupStore() + const { profileId: matchId, sportType } = usePageParams() + const playFromScout = profile?.has_video && !profile?.live const playFromOTT = !profile?.has_video && (profile?.live || profile?.storage) + useEffect(() => { + if (profile && !profile?.sub) { + const matchProfile = prepareMatchProfile({ + matchId, + profile, + sportType, + }) + openBuyMatchPopup(matchProfile) + } + }, [ + matchId, + openBuyMatchPopup, + profile, + sportType, + ]) + return ( @@ -26,10 +50,12 @@ const MatchPage = () => {
- - {playFromOTT && } - {playFromScout && } - + {profile?.sub && ( + + {playFromOTT && } + {playFromScout && } + + )}
) diff --git a/src/features/JoinMatchPage/helpers.tsx b/src/helpers/isMatchPage/index.tsx similarity index 100% rename from src/features/JoinMatchPage/helpers.tsx rename to src/helpers/isMatchPage/index.tsx diff --git a/src/requests/getMatchInfo.tsx b/src/requests/getMatchInfo.tsx index a9325de1..74c42b42 100644 --- a/src/requests/getMatchInfo.tsx +++ b/src/requests/getMatchInfo.tsx @@ -22,6 +22,7 @@ export type MatchInfo = { has_video: boolean, live: boolean, storage: boolean, + sub: boolean, team1: Team, team2: Team, tournament: {