feat(ott-1671): add buy match popup on match page (#509)

* feat(ott-1671): add buy match popup on match page

* feat(ott-1671): fix pr

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()

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'
 

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,

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) => {

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'
 

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<MatchBase, (
+  'id'
+  | 'sportType'
+  | 'team1'
+  | 'team2'
+  | 'tournament'
+  | 'calc'
+  | 'hasVideo'
+)>
+
 export type MatchSubscriptions = Record<SubscriptionType, Array<MatchSubscription>>

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,
+  }
+}

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 (
     <PageWrapper>
       <ProfileHeader color='rgb(0,0,0)' height={4.5}>
@@ -26,10 +50,12 @@ const MatchPage = () => {
       </ProfileHeader>
       <Main>
         <UserFavorites />
-        <Wrapper>
-          {playFromOTT && <LiveMatch profile={profile} />}
-          {playFromScout && <FinishedMatch profile={profile} />}
-        </Wrapper>
+        {profile?.sub && (
+          <Wrapper>
+            {playFromOTT && <LiveMatch profile={profile} />}
+            {playFromScout && <FinishedMatch profile={profile} />}
+          </Wrapper>
+        )}
       </Main>
     </PageWrapper>
   )

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: {