diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx
index 7d0faec2..d0c13168 100644
--- a/src/features/MatchCard/CardFrontside/index.tsx
+++ b/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,
- accessibleInUsersCountry,
+ access,
calc,
date,
formattedDate,
@@ -105,8 +105,8 @@ export const CardFrontside = ({
)
}
- {!accessibleBySubscription && }
- {(accessibleBySubscription && !accessibleInUsersCountry) && }
+ {access === MatchAccess.NoCountryAccess && }
+ {access === MatchAccess.CanBuyMatch && }
{formattedDate}
diff --git a/src/features/MatchCard/hooks.tsx b/src/features/MatchCard/hooks.tsx
index 39f0d430..39bd7a73 100644
--- a/src/features/MatchCard/hooks.tsx
+++ b/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 {
- fetchMatchPlaylists,
- openPopup,
- setMatch,
- } = useMatchPopupStore()
+ const { openMatchPopup } = 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) {
- setMatch(match)
- openPopup()
- fetchMatchPlaylists(match)
- } else if (!match.calc && match.hasVideo) {
- redirectToMatchPage()
- } else if (!match.accessibleBySubscription) {
- openBuyMatchPopup(match)
+
+ const onMatchClick = useCallback(() => {
+ switch (match.access) {
+ case MatchAccess.CanBuyMatch:
+ openBuyMatchPopup(match)
+ break
+ case MatchAccess.ViewMatchPopup:
+ openMatchPopup(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) => {
if (e.key === 'Enter') {
- openMatchPopup()
+ onMatchClick()
}
- }, [openMatchPopup])
+ }, [onMatchClick])
return {
onKeyPress,
- openMatchPopup,
+ onMatchClick,
}
}
diff --git a/src/features/MatchCard/index.tsx b/src/features/MatchCard/index.tsx
index 46fdd3c4..153848f2 100644
--- a/src/features/MatchCard/index.tsx
+++ b/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 (
)
diff --git a/src/features/MatchPopup/store/hooks/index.tsx b/src/features/MatchPopup/store/hooks/index.tsx
index ae257982..3017a2fd 100644
--- a/src/features/MatchPopup/store/hooks/index.tsx
+++ b/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,
diff --git a/src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx b/src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx
new file mode 100644
index 00000000..5f518bea
--- /dev/null
+++ b/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)
+})
diff --git a/src/features/Matches/helpers/getMatchClickAction/index.tsx b/src/features/Matches/helpers/getMatchClickAction/index.tsx
new file mode 100644
index 00000000..6ac3bb11
--- /dev/null
+++ b/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
+ }
+}
diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx
index 338d4b9d..87a272a0 100644
--- a/src/features/Matches/helpers/prepareMatches.tsx
+++ b/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 = ({
- access,
- calc,
- date: matchDate,
- has_video,
- id,
- live,
- preview,
- sport,
- storage,
- sub,
- team1,
- team2,
- tournament,
-}: Match) => {
+import { getMatchAccess } from './getMatchClickAction'
+
+const prepareMatch = (match: Match) => {
+ const {
+ calc,
+ date: matchDate,
+ has_video,
+ id,
+ live,
+ preview,
+ sport,
+ storage,
+ team1,
+ team2,
+ tournament,
+ } = match
const date = new Date(matchDate)
- const accessable = sub && access
return {
- accessibleBySubscription: sub,
- accessibleInUsersCountry: access,
+ access: getMatchAccess(match),
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),