feat(962): added logic after subscription buying (#345)

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

@@ -4,24 +4,26 @@ import {
   useState,
   useEffect,
 } from 'react'
+import { useHistory } from 'react-router-dom'
 
 import last from 'lodash/last'
 
+import { ProfileTypes } from 'config'
+import { buyMatchSubscription } from 'requests'
+
 import type { Match } from 'features/Matches/hooks'
+import { useMatchPopupStore } from 'features/MatchPopup'
 import { Steps } from 'features/BuyMatchPopup/types'
+import { getProfileUrl } from 'features/ProfileLink/helpers'
 
 import { useSubscriptions } from './useSubscriptions'
 
-type MatchData = Pick<Match, (
-  'id'
-  | 'team1'
-  | 'team2'
-  | 'sportType'
-)> | null
-
 export const useBuyMatchPopup = () => {
+  const history = useHistory()
+  const { openMatchPopup } = useMatchPopupStore()
+
   const [steps, setSteps] = useState<Array<Steps>>([])
-  const [match, setMatch] = useState<MatchData>(null)
+  const [match, setMatch] = useState<Match | null>(null)
 
   const goTo = useCallback(
     (step: Steps, e?: MouseEvent<HTMLButtonElement>) => setSteps((state) => {
@@ -36,7 +38,7 @@ export const useBuyMatchPopup = () => {
     return newState
   }), [])
 
-  const openPopup = (matchData: MatchData) => {
+  const openPopup = (matchData: Match) => {
     setMatch(matchData)
     setSteps([Steps.Subscriptions])
   }
@@ -48,9 +50,8 @@ export const useBuyMatchPopup = () => {
     resetSubscriptions,
     selectedPeriod,
     selectedSubscription,
-    subscribeToMatch,
     subscriptions,
-  } = useSubscriptions(goTo)
+  } = useSubscriptions()
 
   const closePopup = () => {
     setMatch(null)
@@ -58,6 +59,36 @@ export const useBuyMatchPopup = () => {
     resetSubscriptions()
   }
 
+  const redirectToMatchProfile = ({ id, sportType }: Match) => {
+    const matchLink = getProfileUrl({
+      id,
+      profileType: ProfileTypes.MATCHES,
+      sportType,
+    })
+    history.push(matchLink)
+  }
+
+  const handleSuccessfulSubscription = () => {
+    closePopup()
+    if (!match) return
+    if (match.calc) {
+      openMatchPopup(match)
+    } else if (match.hasVideo) {
+      redirectToMatchProfile(match)
+    } else {
+      window.location.reload()
+    }
+  }
+
+  const subscribeToMatch = (e: MouseEvent) => {
+    e.stopPropagation()
+    if (selectedSubscription) {
+      buyMatchSubscription(selectedSubscription)
+        .then(handleSuccessfulSubscription)
+        .catch(() => goTo(Steps.Error))
+    }
+  }
+
   useEffect(() => {
     if (match) {
       fetchSubscriptions(match.sportType, match.id)

src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx

@@ -1,4 +1,3 @@
-import type { MouseEvent } from 'react'
 import {
   useMemo,
   useState,
@@ -7,19 +6,16 @@ import {
 
 import filter from 'lodash/filter'
 
-import {
+import { getSubscriptions } from 'requests'
-  getSubscriptions,
-  buyMatchSubscription,
-} from 'requests'
 
 import { SportTypes } from 'config'
 
 import type { MatchSubscriptions, MatchSubscription } from '../../types'
-import { Steps, SubscriptionType } from '../../types'
+import { SubscriptionType } from '../../types'
 import { transformSubsciptions } from '../helpers'
 import { useLexicsFetcher } from './useLexicsFetcher'
 
-export const useSubscriptions = (goTo: (step: Steps) => void) => {
+export const useSubscriptions = () => {
   const { fetchLexics } = useLexicsFetcher()
   const [selectedPeriod, setSelectedPeriod] = useState(SubscriptionType.Month)
   const [subscriptionsList, setSubscriptionsList] = useState<MatchSubscriptions>([])
@@ -43,15 +39,6 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
     setSubscriptionsList([])
   }, [])
 
-  const subscribeToMatch = (e: MouseEvent) => {
-    e.stopPropagation()
-    if (selectedSubscription) {
-      buyMatchSubscription(selectedSubscription)
-        .then(() => goTo(Steps.Success))
-        .catch(() => goTo(Steps.Error))
-    }
-  }
-
   return {
     fetchSubscriptions,
     onPeriodSelect: setSelectedPeriod,
@@ -59,7 +46,6 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
     resetSubscriptions,
     selectedPeriod,
     selectedSubscription,
-    subscribeToMatch,
     subscriptions,
   }
 }