fix(913): match card clickability fixes (#338)

* fix(913): match card clickability fixes

* fix(913): review fix

src/features/MatchCard/CardFrontside/index.tsx

@@ -9,6 +9,7 @@ import { SportName } from 'features/Common'
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
 import { useName } from 'features/Name'
 import { T9n } from 'features/T9n'
+import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
 
 import { NoAccessMessage } from '../NoAccessMessage'
 import {
@@ -45,8 +46,7 @@ export const CardFrontside = ({
   showSportName,
 }: Props) => {
   const {
-    accessibleBySubscription,
+    access,
-    accessibleInUsersCountry,
     calc,
     date,
     formattedDate,
@@ -105,8 +105,8 @@ export const CardFrontside = ({
               </TeamLogos>
             )
         }
-        {!accessibleBySubscription && <BuyMatchBadge />}
+        {access === MatchAccess.NoCountryAccess && <NoAccessMessage />}
-        {(accessibleBySubscription && !accessibleInUsersCountry) && <NoAccessMessage />}
+        {access === MatchAccess.CanBuyMatch && <BuyMatchBadge />}
         <MatchTimeInfo>
           <MatchDate>
             {formattedDate}

src/features/MatchCard/hooks.tsx

@@ -8,13 +8,10 @@ import type { Match } from 'features/Matches'
 import { useMatchPopupStore } from 'features/MatchPopup'
 import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
 import { getProfileUrl } from 'features/ProfileLink/helpers'
+import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
 
 export const useCard = (match: Match) => {
-  const {
+  const { openMatchPopup } = useMatchPopupStore()
-    fetchMatchPlaylists,
-    openPopup,
-    setMatch,
-  } = useMatchPopupStore()
   const { open: openBuyMatchPopup } = useBuyMatchPopupStore()
   const history = useHistory()
   const redirectToMatchPage = useCallback(() => {
@@ -29,33 +26,38 @@ export const useCard = (match: Match) => {
     match.id,
     match.sportType,
   ])
-  const openMatchPopup = useCallback(() => {
+
-    if (match.isClickable) {
+  const onMatchClick = useCallback(() => {
-      setMatch(match)
+    switch (match.access) {
-      openPopup()
+      case MatchAccess.CanBuyMatch:
-      fetchMatchPlaylists(match)
+        openBuyMatchPopup(match)
-    } else if (!match.calc && match.hasVideo) {
+        break
-      redirectToMatchPage()
+      case MatchAccess.ViewMatchPopup:
-    } else if (!match.accessibleBySubscription) {
+        openMatchPopup(match)
-      openBuyMatchPopup(match)
+        break
+      case MatchAccess.RedirectToProfile:
+        redirectToMatchPage()
+        break
+      case MatchAccess.NoCountryAccess:
+      case MatchAccess.NoAccess:
+      default:
+        break
     }
   }, [
     match,
-    openPopup,
+    openMatchPopup,
     openBuyMatchPopup,
-    setMatch,
     redirectToMatchPage,
-    fetchMatchPlaylists,
   ])
 
   const onKeyPress = useCallback((e: KeyboardEvent<HTMLLIElement>) => {
     if (e.key === 'Enter') {
-      openMatchPopup()
+      onMatchClick()
     }
-  }, [openMatchPopup])
+  }, [onMatchClick])
 
   return {
     onKeyPress,
-    openMatchPopup,
+    onMatchClick,
   }
 }

src/features/MatchCard/index.tsx

@@ -15,14 +15,14 @@ export const MatchCard = ({ match }: Props) => {
   const isHomePage = useRouteMatch(PAGES.home)?.isExact
   const {
     onKeyPress,
-    openMatchPopup,
+    onMatchClick,
   } = useCard(match)
 
   return (
     <CardFrontside
       match={match}
       showSportName={isHomePage}
-      onClick={openMatchPopup}
+      onClick={onMatchClick}
       onKeyPress={onKeyPress}
     />
   )

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

@@ -91,6 +91,12 @@ export const useMatchPopup = () => {
       .then(setMatchPlaylists)
   }, [fetchLexics])
 
+  const openMatchPopup = (selectedMatch: MatchData) => {
+    setMatch(selectedMatch)
+    openPopup()
+    fetchMatchPlaylists(selectedMatch)
+  }
+
   return {
     actions,
     closePopup,
@@ -104,7 +110,7 @@ export const useMatchPopup = () => {
     onActionClick: setSelectedActions,
     onDurationChange: setEpisodeDuration,
     onFormatSelect: setSelectedPlaylistFormat,
-    openPopup,
+    openMatchPopup,
     page,
     selectedActions,
     selectedPlaylistFormat,

src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx

@@ -0,0 +1,70 @@
+import type { Match } from 'requests'
+
+import { getMatchAccess, MatchAccess } from '..'
+
+type Args = {
+  access?: boolean,
+  calc?: boolean,
+  has_video?: boolean,
+  live?: boolean,
+  storage?: boolean,
+  sub?: boolean,
+}
+
+const createMatch = (args: Args) => ({
+  ...args,
+} as Match)
+
+it('equals to no country access type', () => {
+  const match = createMatch({
+    access: false,
+    sub: false,
+  })
+  expect(getMatchAccess(match)).toBe(MatchAccess.NoCountryAccess)
+})
+
+it('equals to  redirect type', () => {
+  const match = createMatch({
+    access: true,
+    calc: false,
+    has_video: true,
+    sub: true,
+  })
+  expect(getMatchAccess(match)).toBe(MatchAccess.RedirectToProfile)
+})
+
+it('equals to  can buy type', () => {
+  const match = createMatch({
+    access: true,
+    sub: false,
+  })
+  expect(getMatchAccess(match)).toBe(MatchAccess.CanBuyMatch)
+})
+
+it('equals to view match popup type', () => {
+  let match = createMatch({
+    access: true,
+    live: true,
+    sub: true,
+  })
+  expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup)
+
+  match = createMatch({
+    access: true,
+    calc: true,
+    has_video: true,
+    live: false,
+    sub: true,
+  })
+  expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup)
+
+  match = createMatch({
+    access: true,
+    calc: true,
+    has_video: false,
+    live: false,
+    storage: true,
+    sub: true,
+  })
+  expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup)
+})

src/features/Matches/helpers/getMatchClickAction/index.tsx

@@ -0,0 +1,32 @@
+import type { Match } from 'requests'
+
+export enum MatchAccess {
+  CanBuyMatch = 'CanBuyMatch',
+  NoAccess = 'NoAccess',
+  NoCountryAccess = 'NoCountryAccess',
+  RedirectToProfile = 'RedirectToProfile',
+  ViewMatchPopup = 'ViewMatchPopup',
+}
+
+export const getMatchAccess = ({
+  access,
+  calc,
+  has_video,
+  live,
+  storage,
+  sub,
+}: Match) => {
+  switch (true) {
+    case !access:
+      return MatchAccess.NoCountryAccess
+    case !sub:
+      return MatchAccess.CanBuyMatch
+    case !calc && has_video:
+      return MatchAccess.RedirectToProfile
+    case live:
+    case calc && (has_video || storage):
+      return MatchAccess.ViewMatchPopup
+    default:
+      return MatchAccess.NoAccess
+  }
+}

src/features/Matches/helpers/prepareMatches.tsx

@@ -3,39 +3,33 @@ import map from 'lodash/map'
 import format from 'date-fns/format'
 
 import type { Match } from 'requests'
+
 import { getSportLexic } from 'helpers'
 
-const prepareMatch = ({
+import { getMatchAccess } from './getMatchClickAction'
-  access,
+
-  calc,
+const prepareMatch = (match: Match) => {
-  date: matchDate,
+  const {
-  has_video,
+    calc,
-  id,
+    date: matchDate,
-  live,
+    has_video,
-  preview,
+    id,
-  sport,
+    live,
-  storage,
+    preview,
-  sub,
+    sport,
-  team1,
+    storage,
-  team2,
+    team1,
-  tournament,
+    team2,
-}: Match) => {
+    tournament,
+  } = match
   const date = new Date(matchDate)
-  const accessable = sub && access
   return {
-    accessibleBySubscription: sub,
+    access: getMatchAccess(match),
-    accessibleInUsersCountry: access,
     calc,
     date,
     formattedDate: format(date, 'dd.MM.yy'),
     hasVideo: has_video,
     id,
-    isClickable: live
-      ? accessable
-      : (accessable && calc && (
-        has_video
-      || storage
-      )),
     live,
     preview,
     sportName: getSportLexic(sport),