feat(ott-821): add new conditions for match popup (#317)

* feat(ott-821): add new conditions for match popup

* style(ott-821): refactoring import

src/features/MatchCard/hooks.tsx

@@ -1,18 +1,35 @@
 import type { KeyboardEvent } from 'react'
 import { useCallback } from 'react'
+import { useHistory } from 'react-router-dom'
 
 import type { Match } from 'features/Matches'
 import { useMatchPopupStore } from 'features/MatchPopup'
 import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
+import { getProfileUrl } from '../ProfileLink/helpers'
+import { ProfileTypes } from '../../config'
 
 export const useCard = (match: Match) => {
   const { openPopup, setMatch } = useMatchPopupStore()
   const { open: openBuyMatchPopup } = useBuyMatchPopupStore()
-
+  const history = useHistory()
+  const redirectToMatchPage = useCallback(() => {
+    const matchLink = getProfileUrl({
+      id: match.id,
+      profileType: ProfileTypes.MATCHES,
+      sportType: match.sportType,
+    })
+    return history.push(matchLink)
+  }, [
+    history,
+    match.id,
+    match.sportType,
+  ])
   const openMatchPopup = useCallback(() => {
-    if (match.isClickable) {
+    if (match.isClickable && match.calc && match.hasVideo) {
       setMatch(match)
       openPopup()
+    } else if (match.calc && !match.hasVideo) {
+      redirectToMatchPage()
     } else if (!match.accessibleBySubscription) {
       openBuyMatchPopup(match)
     }
@@ -21,6 +38,7 @@ export const useCard = (match: Match) => {
     openPopup,
     openBuyMatchPopup,
     setMatch,
+    redirectToMatchPage,
   ])
 
   const onKeyPress = useCallback((e: KeyboardEvent<HTMLLIElement>) => {