src/features/AuthStore/hooks/useAuth.tsx

@@ -141,7 +141,7 @@ export const useAuth = () => {
         if (page.includes(PAGES.useraccount)) {
           history.push(PAGES.home)
         } else {
-          const route = `${page}${page === '/' ? search : ''}`
+          const route = `${page}${search}`
           history.push(route)
         }
         markUserLoaded()
@@ -204,11 +204,11 @@ export const useAuth = () => {
   // ])
 
   useEffect(() => {
+    // попытаемся обновить токен используя refresh_token
     const tryRenewToken = () => {
       userManager.signinSilent()
         .catch(() => user && logout())
     }
-    // попытаемся обновить токен используя refresh_token
     // если запросы вернули 401 | 403
     window.addEventListener('FORBIDDEN_REQUEST', tryRenewToken)
 
@@ -250,6 +250,7 @@ export const useAuth = () => {
     loadingUser,
     login,
     logout,
+    setSearch,
     setUserInfo,
     user,
     userInfo,
@@ -261,6 +262,7 @@ export const useAuth = () => {
     userInfo,
     login,
     loadingUser,
+    setSearch,
     setUserInfo,
   ])
 

src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx

@@ -20,6 +20,7 @@ import { Name } from 'features/Name'
 import { useCardsStore } from 'features/CardsStore'
 import { ArrowLoader } from 'features/ArrowLoader'
 import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled'
+import { useAuthStore } from 'features/AuthStore'
 
 import { IframePayment } from '../IframePayment'
 
@@ -43,6 +44,11 @@ export const PackageSelectionStep = () => {
   } = useCardsStore()
   const [isOpenIframe, setIsOpenIframe] = useState(false)
   const [countryCode, setCountryCode] = useState<CountryCodeType | null>(null)
+  const {
+    logout,
+    setSearch,
+    user,
+  } = useAuthStore()
 
   const {
     close,
@@ -107,6 +113,7 @@ export const PackageSelectionStep = () => {
 
   return (
     <Wrapper>
+
       <Header>
         {hasPreviousStep && (
           <HeaderActions position='left'>
@@ -140,7 +147,14 @@ export const PackageSelectionStep = () => {
         ) : (
           <Button
             disabled={!selectedPackage || disabledBuyBtn}
-            onClick={onHandleClick}
+            onClick={(e) => {
+              if (user) {
+                onHandleClick(e)
+              } else {
+                setSearch(window.location.search)
+                logout('saveToken')
+              }
+            }}
           >
             <T9n t='buy_subscription' />
           </Button>

src/features/BuyMatchPopup/components/SelectSubscription/index.tsx

@@ -4,6 +4,8 @@ import map from 'lodash/map'
 
 import { MDASH } from 'config'
 
+import { isSubscribePopup } from 'helpers'
+
 import { Name as Names } from 'features/Name'
 import { T9n } from 'features/T9n'
 import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
@@ -32,7 +34,6 @@ import {
   ChooseSubItem,
   ChooseSubList,
 } from './styled'
-import { checkUrlParams, getAllUrlParams } from '../../../../helpers/parseUrlParams/parseUrlParams'
 
 export const SelectSubscriptionStep = () => {
   const {
@@ -56,8 +57,7 @@ export const SelectSubscriptionStep = () => {
   return (
     <Wrapper>
       <Header>
-        {(!checkUrlParams('subscribe')
+        {!isSubscribePopup()
-        && !getAllUrlParams('id'))
         && (
           <HeaderTitle>
             <Names nameObj={match.team1} />

src/features/BuyMatchPopup/store/helpers.tsx

@@ -9,6 +9,8 @@ import type {
   Season,
 } from 'requests/getSubscriptions'
 
+import { isSubscribePopup } from 'helpers'
+
 import { getName } from 'features/Name'
 
 import type {
@@ -101,7 +103,7 @@ const transformPackages = ({
     [SubscriptionType.Month]: transformByType(SubscriptionType.Month),
     [SubscriptionType.Year]: transformByType(SubscriptionType.Year),
     [SubscriptionType.PayPerView]:
-      payPerView
+      payPerView && !isSubscribePopup()
         ? [{
           currency: currencySymbols[payPerView.currency_iso],
           description: {

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

@@ -34,6 +34,8 @@ import {
 } from 'features/BuyMatchPopup/types'
 import { getProfileUrl } from 'features/ProfileLink/helpers'
 
+import { isSubscribePopup } from 'helpers'
+
 import { useSubscriptions } from './useSubscriptions'
 import { useStripe3DSecure } from './useStripe3DSecure'
 
@@ -111,6 +113,10 @@ export const useBuyMatchPopup = () => {
     setError('')
     resetSubscriptions()
     setSelectedPackage(null)
+
+    if (isSubscribePopup()) {
+      history.replace({ search: '' })
+    }
   }
 
   const redirectToMatchProfile = ({ id, sportType }: Match) => {
@@ -125,7 +131,9 @@ export const useBuyMatchPopup = () => {
   const onSuccessfulSubscription = () => goTo(Steps.Success)
   const postPaymentHandler = () => {
     if (!match) return
+    if (!isSubscribePopup()) {
       redirectToMatchProfile(match)
+    }
     closePopup()
   }
 

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

@@ -10,6 +10,7 @@ import first from 'lodash/first'
 import size from 'lodash/size'
 
 import { getSubscriptions } from 'requests/getSubscriptions'
+import { getSelectedSubscriptions } from 'requests/getSelectedSubscriptions'
 
 import { useLexicsStore } from 'features/LexicsStore'
 
@@ -63,7 +64,14 @@ export const useSubscriptions = () => {
   const fetchSubscriptions = useCallback(async (match: Match) => {
     let subscriptions
     if (checkUrlParams('id') && checkUrlParams('subscribe')) {
-      subscriptions = await getSubscriptions(MATCH_CONFIG.sportId, MATCH_CONFIG.matchId)
+      const subs = await getSelectedSubscriptions()
+      subscriptions = {
+        data: subs,
+        season: {
+          id: 0,
+          name: `${new Date().getFullYear()}`,
+        },
+      }
     } else {
       subscriptions = await getSubscriptions(match.sportType, match.id)
     }

src/features/BuyMatchPopup/styled.tsx

@@ -8,7 +8,7 @@ import { Modal as BaseModal } from 'features/Modal'
 
 export const Modal = styled(BaseModal)`
   background-color: rgba(0, 0, 0, 0.7);
-
+  z-index: 52;
   ${ModalWindow} {
     padding: 0;
     background-color: #333333;

src/features/MatchPage/components/SubscriptionGuard/index.tsx

@@ -6,7 +6,8 @@ import { usePageParams } from 'hooks/usePageParams'
 import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
 import { useMatchPageStore } from 'features/MatchPage/store'
 
-import { checkUrlParams, getAllUrlParams } from 'helpers/parseUrlParams/parseUrlParams'
+import { isSubscribePopup } from 'helpers'
+
 import { prepareMatchProfile } from '../../helpers/prepareMatchProfile'
 import { useAuthStore } from '../../../AuthStore'
 
@@ -21,10 +22,9 @@ export const SubscriptionGuard = ({ children }: Props) => {
   const { user } = useAuthStore()
 
   useEffect(() => {
-    if (user && matchProfile && (
+    if ((user && matchProfile
-      !matchProfile.sub
+      && !matchProfile.sub)
-      || (checkUrlParams('subscribe')
+      || (matchProfile && isSubscribePopup())) {
-            && getAllUrlParams('id')))) {
       const profile = prepareMatchProfile({
         matchId,
         profile: matchProfile,

src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx

@@ -16,13 +16,15 @@ const createMatch = (args: Args) => ({
   ...args,
 } as Match)
 
+const user = undefined
+
 it('equals to no country access type', () => {
   const match = createMatch({
     access: false,
     sub: false,
   })
 
-  expect(getMatchAccess(match)).toBe(MatchAccess.CanBuyMatch)
+  expect(getMatchAccess(match, user)).toBe(MatchAccess.ViewMatchPopupWithoutUser)
 })
 
 it('equals to  redirect type', () => {
@@ -34,7 +36,7 @@ it('equals to  redirect type', () => {
     sub: true,
   })
 
-  expect(getMatchAccess(match)).toBe(MatchAccess.RedirectToProfile)
+  expect(getMatchAccess(match, user)).toBe(MatchAccess.ViewMatchPopupWithoutUser)
 })
 
 it('equals to  can buy type', () => {
@@ -43,7 +45,7 @@ it('equals to  can buy type', () => {
     sub: false,
   })
 
-  expect(getMatchAccess(match)).toBe(MatchAccess.CanBuyMatch)
+  expect(getMatchAccess(match, user)).toBe(MatchAccess.ViewMatchPopupWithoutUser)
 })
 
 it('equals to view match popup type', () => {
@@ -54,7 +56,7 @@ it('equals to view match popup type', () => {
     sub: true,
   })
 
-  expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup)
+  expect(getMatchAccess(match, user)).toBe(MatchAccess.ViewMatchPopupWithoutUser)
 
   match = createMatch({
     access: true,
@@ -65,7 +67,7 @@ it('equals to view match popup type', () => {
     sub: true,
   })
 
-  expect(getMatchAccess(match)).toBe(MatchAccess.RedirectToProfile)
+  expect(getMatchAccess(match, user)).toBe(MatchAccess.ViewMatchPopupWithoutUser)
 
   match = createMatch({
     access: true,
@@ -77,5 +79,5 @@ it('equals to view match popup type', () => {
     sub: true,
   })
 
-  expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup)
+  expect(getMatchAccess(match, user)).toBe(MatchAccess.NoAccess)
 })

src/features/Matches/helpers/getMatchClickAction/index.tsx

@@ -2,6 +2,7 @@ import type { Match } from 'requests'
 
 import type { User } from 'oidc-client'
 import { isFuture } from 'date-fns'
+import { isSubscribePopup } from '../../../../helpers'
 
 export enum MatchAccess {
   CanBuyMatch = 'CanBuyMatch',
@@ -28,7 +29,7 @@ export const getMatchAccess = (match: Match, user: User | undefined) => {
   switch (true) {
     case !user && isFutureDate:
       return MatchAccess.NoAccess
-    case !user:
+    case !user && !isSubscribePopup():
       return MatchAccess.ViewMatchPopupWithoutUser
     case !sub:
       return MatchAccess.CanBuyMatch

src/features/PlayerPage/hooks.tsx

@@ -9,9 +9,15 @@ import { usePageParams } from 'hooks/usePageParams'
 import type { PlayerProfile } from 'requests/getPlayerInfo'
 import { getPlayerInfo, getPlayerMatches } from 'requests'
 
+import { openSubscribePopup } from 'helpers'
+
+import { MATCH_CONFIG } from '../BuyMatchPopup/store/hooks/useSubscriptions'
+import { useBuyMatchPopupStore } from '../BuyMatchPopup'
+
 export const usePlayerPage = () => {
   const [playerProfile, setPlayerProfile] = useState<PlayerProfile>(null)
   const { profileId: playerId, sportType } = usePageParams()
+  const { open: openBuyMatchPopup } = useBuyMatchPopupStore()
 
   const {
     firstname_eng = '',
@@ -33,6 +39,14 @@ export const usePlayerPage = () => {
     getPlayerInfo(playerId, sportType).then(setPlayerProfile)
   }, [playerId, sportType])
 
+  useEffect(() => {
+    openSubscribePopup({
+      matchConfig: MATCH_CONFIG,
+      openBuyMatchPopup,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const fetchMatches = useCallback(
     (limit: number, offset: number) => getPlayerMatches({
       limit,

src/features/TeamPage/hooks.tsx

@@ -8,10 +8,14 @@ import type { TeamInfo } from 'requests'
 import { getTeamInfo, getTeamMatches } from 'requests'
 
 import { usePageParams } from 'hooks/usePageParams'
+import { openSubscribePopup } from '../../helpers'
+import { MATCH_CONFIG } from '../BuyMatchPopup/store/hooks/useSubscriptions'
+import { useBuyMatchPopupStore } from '../BuyMatchPopup'
 
 export const useTeamPage = () => {
   const [teamProfile, setTeamProfile] = useState<TeamInfo>(null)
   const { profileId: teamId, sportType } = usePageParams()
+  const { open: openBuyMatchPopup } = useBuyMatchPopupStore()
 
   useEffect(() => {
     getTeamInfo(sportType, teamId)
@@ -22,6 +26,14 @@ export const useTeamPage = () => {
     teamId,
   ])
 
+  useEffect(() => {
+    openSubscribePopup({
+      matchConfig: MATCH_CONFIG,
+      openBuyMatchPopup,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const fetchMatches = useCallback(
     (limit: number, offset: number) => getTeamMatches({
       limit,

src/features/TournamentPage/hooks.tsx

@@ -7,24 +7,21 @@ import { useHistory } from 'react-router'
 
 import type { TournamentInfo } from 'requests'
 import {
-  getMatchInfo,
   getTournamentInfo,
   getTournamentMatches,
-  MatchInfo,
 } from 'requests'
 
-import { checkUrlParams, getAllUrlParams } from 'helpers/parseUrlParams/parseUrlParams'
+import { checkUrlParams } from 'helpers/parseUrlParams/parseUrlParams'
 
 import { usePageParams } from 'hooks/usePageParams'
+import { openSubscribePopup } from 'helpers'
 
 import { useName } from 'features/Name'
-import { useAuthStore } from 'features/AuthStore'
-
 import { isPermittedTournament } from '../../helpers/isPermittedTournament'
 import { useProfileCard } from '../ProfileCard/hooks'
 import { useBuyMatchPopupStore } from '../BuyMatchPopup'
 import { MATCH_CONFIG } from '../BuyMatchPopup/store/hooks/useSubscriptions'
-import { prepareMatchProfile } from '../MatchPage/helpers/prepareMatchProfile'
+import { useAuthStore } from '../AuthStore'
 
 export const useTournamentPage = () => {
   const [tournamentProfile, setTournamentProfile] = useState<TournamentInfo>(null)
@@ -32,6 +29,7 @@ export const useTournamentPage = () => {
   const { open: openBuyMatchPopup } = useBuyMatchPopupStore()
   const country = useName(tournamentProfile?.country || {})
   const history = useHistory()
+
   const { user } = useAuthStore()
 
   const { isFavorite, toggleFavorites } = useProfileCard()
@@ -76,18 +74,12 @@ export const useTournamentPage = () => {
   }
 
   useEffect(() => {
-    if ((checkUrlParams('subscribe')
+    openSubscribePopup(
-            && getAllUrlParams('id'))) {
+      {
-      getMatchInfo(MATCH_CONFIG.sportId, MATCH_CONFIG.matchId)
+        matchConfig: MATCH_CONFIG,
-        .then((match: MatchInfo) => {
+        openBuyMatchPopup,
-          const matchProfile = match && prepareMatchProfile({
+      },
-            matchId: MATCH_CONFIG.matchId,
+    )
-            profile: match,
-            sportType: MATCH_CONFIG.sportId,
-          })
-          matchProfile && openBuyMatchPopup(matchProfile)
-        })
-    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

src/helpers/index.tsx

@@ -8,4 +8,5 @@ export * from './secondsToHms'
 export * from './redirectToUrl'
 export * from './getRandomString'
 export * from './selectedApi'
+export * from './openSubscribePopup'
 export * from './getCurrentYear'

src/helpers/openSubscribePopup/index.tsx

@@ -0,0 +1,33 @@
+import type { Match } from 'features/BuyMatchPopup/types'
+
+import { checkUrlParams, getAllUrlParams } from '../parseUrlParams/parseUrlParams'
+import { getMatchInfo, MatchInfo } from '../../requests'
+import { prepareMatchProfile } from '../../features/MatchPage/helpers/prepareMatchProfile'
+
+type openSubscribePopupType = {
+  matchConfig: {
+    matchId: number,
+    sportId: number,
+  },
+  openBuyMatchPopup: (matchProfile: Match) => void,
+}
+
+// TODO переделать потом на открытие без запроса матча
+export const openSubscribePopup = ({
+  matchConfig,
+  openBuyMatchPopup,
+}: openSubscribePopupType) => {
+  if (isSubscribePopup()) {
+    getMatchInfo(matchConfig.sportId, matchConfig.matchId)
+      .then((match: MatchInfo) => {
+        const matchProfile = match && prepareMatchProfile({
+          matchId: matchConfig.matchId,
+          profile: match,
+          sportType: matchConfig.sportId,
+        })
+        matchProfile && openBuyMatchPopup(matchProfile)
+      })
+  }
+}
+
+export const isSubscribePopup = () => checkUrlParams('subscribe') && getAllUrlParams('id').length