diff --git a/src/features/BuyMatchPopup/store/hooks/index.tsx b/src/features/BuyMatchPopup/store/hooks/index.tsx index bad5d886..abb70811 100644 --- a/src/features/BuyMatchPopup/store/hooks/index.tsx +++ b/src/features/BuyMatchPopup/store/hooks/index.tsx @@ -4,7 +4,6 @@ import { useCallback, useState } from 'react' import last from 'lodash/last' import type { Match } from 'features/Matches/hooks' -import { useMatchPopupStore } from 'features/MatchPopup' import { Steps } from 'features/BuyMatchPopup/types' import { useSubscriptions } from './useSubscriptions' @@ -16,7 +15,6 @@ type MatchData = Pick | null export const useBuyMatchPopup = () => { - const { closePopup: closeMatchPopup } = useMatchPopupStore() const [steps, setSteps] = useState>([]) const [match, setMatch] = useState(null) const { @@ -41,9 +39,7 @@ export const useBuyMatchPopup = () => { return newState }), []) - const openPopup = (e: MouseEvent, matchData: MatchData) => { - closeMatchPopup() - e.stopPropagation() + const openPopup = (matchData: MatchData) => { setMatch(matchData) setSteps([Steps.Subscriptions]) } diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index c912d2e5..7bf328bb 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -7,7 +7,6 @@ import { ProfileTypes } from 'config' import type { Match } from 'features/Matches' import { SportName } from 'features/Common' import { useMatchSwitchesStore } from 'features/MatchSwitches' -import { useBuyMatchPopupStore } from 'features/BuyMatchPopup' import { useName } from 'features/Name' import { NoAccessMessage } from '../NoAccessMessage' @@ -25,7 +24,7 @@ import { TournamentName, TeamLogos, TeamLogo, - BuyMatchButton, + BuyMatchBadge, } from '../styled' import { MatchStatuses, useHeaderFiltersStore } from '../../HeaderFilters' @@ -58,7 +57,6 @@ export const CardFrontside = ({ tournament, } = match const tournamentName = useName(tournament) - const { open } = useBuyMatchPopupStore() const { isScoreHidden } = useMatchSwitchesStore() const { selectedMatchStatus } = useHeaderFiltersStore() const isInFuture = getUnixTime(date) > getUnixTime(new Date()) @@ -103,11 +101,7 @@ export const CardFrontside = ({ ) } - {!accessibleBySubscription && ( - open(e, match)} - /> - )} + {!accessibleBySubscription && } {(accessibleBySubscription && !accessibleInUsersCountry) && } {formattedDate} diff --git a/src/features/MatchCard/hooks.tsx b/src/features/MatchCard/hooks.tsx index 94f6e79f..70fd1d49 100644 --- a/src/features/MatchCard/hooks.tsx +++ b/src/features/MatchCard/hooks.tsx @@ -3,18 +3,23 @@ import { useCallback } from 'react' import type { Match } from 'features/Matches' import { useMatchPopupStore } from 'features/MatchPopup' +import { useBuyMatchPopupStore } from 'features/BuyMatchPopup' export const useCard = (match: Match) => { const { openPopup, setMatch } = useMatchPopupStore() + const { open: openBuyMatchPopup } = useBuyMatchPopupStore() const openMatchPopup = useCallback(() => { if (match.isClickable) { setMatch(match) openPopup() + } else if (!match.accessibleBySubscription) { + openBuyMatchPopup(match) } }, [ match, openPopup, + openBuyMatchPopup, setMatch, ]) diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index d1f3fa27..bf40bd52 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -163,11 +163,7 @@ export const TeamLogo = styled(ProfileLogo)` } ` -export const BuyMatchButton = styled.button` - border: none; - background: none; - padding: 0; - +export const BuyMatchBadge = styled.span` position: absolute; right: 12px; bottom: 12px;