fix(836): match card clickability (#305)

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<Match, (
 )> | null
 
 export const useBuyMatchPopup = () => {
-  const { closePopup: closeMatchPopup } = useMatchPopupStore()
   const [steps, setSteps] = useState<Array<Steps>>([])
   const [match, setMatch] = useState<MatchData>(null)
   const {
@@ -41,9 +39,7 @@ export const useBuyMatchPopup = () => {
     return newState
   }), [])
 
-  const openPopup = (e: MouseEvent<HTMLButtonElement>, matchData: MatchData) => {
-    closeMatchPopup()
-    e.stopPropagation()
+  const openPopup = (matchData: MatchData) => {
     setMatch(matchData)
     setSteps([Steps.Subscriptions])
   }

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 = ({
               </TeamLogos>
             )
         }
-        {!accessibleBySubscription && (
-          <BuyMatchButton
-            onClick={(e) => open(e, match)}
-          />
-        )}
+        {!accessibleBySubscription && <BuyMatchBadge />}
         {(accessibleBySubscription && !accessibleInUsersCountry) && <NoAccessMessage />}
         <MatchDate>
           {formattedDate}

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

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;