fix(#242): add sub popup to player and team pages

3 years ago · 9bf9f65f51
parent 40369dcded
commit 9bf9f65f51
9 changed files with 107 additions and 47 deletions
--- a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
+++ b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
@ -12,6 +12,8 @@ import { MDASH } from 'config'
 import { payments } from 'config/payments'
 import { client } from 'config/clients'

+import { isSubscribePopup } from 'helpers'
+
 import { CountryCodeType, getCountryCode } from 'requests/getCountryCode'

 import { CloseButton, HeaderActions } from 'features/PopupComponents'
@ -107,29 +109,32 @@ export const PackageSelectionStep = () => {

  return (
    <Wrapper>
-      <Header>
-        {hasPreviousStep && (
-          <HeaderActions position='left'>
-            <ButtonPrevious onClick={goBack}>
-              <Arrow direction='left' />
-            </ButtonPrevious>
-          </HeaderActions>
-        )}
-        <HeaderTitle>
-          {hasPreviousStep && selectedSubscription ? (
-            <T9n t={selectedSubscription?.lexic} />
-          ) : (
-            <Fragment>
-              <Name nameObj={match.team1} />
-              {` ${MDASH} `}
-              <Name nameObj={match.team2} />
-            </Fragment>
+      {!isSubscribePopup
+          && (
+            <Header>
+              {hasPreviousStep && (
+                <HeaderActions position='left'>
+                  <ButtonPrevious onClick={goBack}>
+                    <Arrow direction='left' />
+                  </ButtonPrevious>
+                </HeaderActions>
+              )}
+              <HeaderTitle>
+                {hasPreviousStep && selectedSubscription ? (
+                  <T9n t={selectedSubscription?.lexic} />
+                ) : (
+                  <Fragment>
+                    <Name nameObj={match.team1} />
+                    {` ${MDASH} `}
+                    <Name nameObj={match.team2} />
+                  </Fragment>
+                )}
+              </HeaderTitle>
+              <HeaderActions position='right'>
+                <CloseButton onClick={close} />
+              </HeaderActions>
+            </Header>
          )}
-        </HeaderTitle>
-        <HeaderActions position='right'>
-          <CloseButton onClick={close} />
-        </HeaderActions>
-      </Header>
      <Body marginTop={20}>
        <Packages />
        {!isIframePayment && <SelectedCard />}
--- a/src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
+++ b/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'
@ -17,8 +19,6 @@ import {
  Wrapper,
 } from 'features/BuyMatchPopup/styled'

-import { checkUrlParams, getAllUrlParams } from 'helpers/parseUrlParams/parseUrlParams'
-
 import { MatchPackage, SubscriptionType } from '../../types'

 import {
@ -57,8 +57,7 @@ export const SelectSubscriptionStep = () => {
  return (
    <Wrapper>
      <Header>
-        {(!checkUrlParams('subscribe')
-        && !getAllUrlParams('id'))
+        {!isSubscribePopup
        && (
          <HeaderTitle>
            <Names nameObj={match.team1} />
--- a/src/features/BuyMatchPopup/store/hooks/index.tsx
+++ b/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'

@ -89,7 +91,7 @@ export const useBuyMatchPopup = () => {

  const onNext = (e: MouseEvent<HTMLButtonElement>) => goTo(Steps.SelectPackage, e)

-  const openPopup = useCallback((matchData: Match | null) => {
+  const openPopup = useCallback((matchData: Match) => {
    setMatch(matchData)
    setSteps([])
  }, [])
@ -125,7 +127,9 @@ export const useBuyMatchPopup = () => {
  const onSuccessfulSubscription = () => goTo(Steps.Success)
  const postPaymentHandler = () => {
    if (!match) return
-    redirectToMatchProfile(match)
+    if (!isSubscribePopup) {
+      redirectToMatchProfile(match)
+    }
    closePopup()
  }

--- a/src/features/MatchPage/components/SubscriptionGuard/index.tsx
+++ b/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'

@ -23,8 +24,7 @@ export const SubscriptionGuard = ({ children }: Props) => {
  useEffect(() => {
    if (user && matchProfile && (
      !matchProfile.sub
-      || (checkUrlParams('subscribe')
-            && getAllUrlParams('id')))) {
+      || isSubscribePopup)) {
      const profile = prepareMatchProfile({
        matchId,
        profile: matchProfile,
--- a/src/features/PlayerPage/hooks.tsx
+++ b/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,
--- a/src/features/TeamPage/hooks.tsx
+++ b/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,
--- a/src/features/TournamentPage/hooks.tsx
+++ b/src/features/TournamentPage/hooks.tsx
@ -7,22 +7,20 @@ 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 { 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 = () => {
@ -76,18 +74,12 @@ export const useTournamentPage = () => {
  }

  useEffect(() => {
-    if ((checkUrlParams('subscribe')
-        && getAllUrlParams('id'))) {
-      getMatchInfo(MATCH_CONFIG.sportId, MATCH_CONFIG.matchId)
-        .then((match: MatchInfo) => {
-          const matchProfile = match && prepareMatchProfile({
-            matchId: MATCH_CONFIG.matchId,
-            profile: match,
-            sportType: MATCH_CONFIG.sportId,
-          })
-          matchProfile && openBuyMatchPopup(matchProfile)
-        })
-    }
+    openSubscribePopup(
+      {
+        matchConfig: MATCH_CONFIG,
+        openBuyMatchPopup,
+      },
+    )
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

--- a/src/helpers/index.tsx
+++ b/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'
--- a/src/helpers/openSubscribePopup/index.tsx
+++ b/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