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