fix(#242): add return to start page with buypoup

3 years ago · 62281019f1
parent 9bf9f65f51
commit 62281019f1
10 changed files with 66 additions and 46 deletions
--- a/src/features/AuthStore/hooks/useAuth.tsx
+++ b/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,
  ])

--- a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
+++ b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
@ -12,8 +12,6 @@ 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'
@ -22,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'

@ -45,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,
@ -109,32 +113,30 @@ export const PackageSelectionStep = () => {

  return (
    <Wrapper>
-      {!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>
+
+      <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>
      <Body marginTop={20}>
        <Packages />
        {!isIframePayment && <SelectedCard />}
@ -145,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>
--- a/src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
+++ b/src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
@ -57,7 +57,7 @@ export const SelectSubscriptionStep = () => {
  return (
    <Wrapper>
      <Header>
-        {!isSubscribePopup
+        {!isSubscribePopup()
        && (
          <HeaderTitle>
            <Names nameObj={match.team1} />
--- a/src/features/BuyMatchPopup/store/helpers.tsx
+++ b/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: {
--- a/src/features/BuyMatchPopup/store/hooks/index.tsx
+++ b/src/features/BuyMatchPopup/store/hooks/index.tsx
@ -113,6 +113,10 @@ export const useBuyMatchPopup = () => {
    setError('')
    resetSubscriptions()
    setSelectedPackage(null)
+
+    if (isSubscribePopup()) {
+      history.replace({ search: '' })
+    }
  }

  const redirectToMatchProfile = ({ id, sportType }: Match) => {
@ -127,7 +131,7 @@ export const useBuyMatchPopup = () => {
  const onSuccessfulSubscription = () => goTo(Steps.Success)
  const postPaymentHandler = () => {
    if (!match) return
-    if (!isSubscribePopup) {
+    if (!isSubscribePopup()) {
      redirectToMatchProfile(match)
    }
    closePopup()
--- a/src/features/BuyMatchPopup/styled.tsx
+++ b/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;
--- a/src/features/MatchPage/components/SubscriptionGuard/index.tsx
+++ b/src/features/MatchPage/components/SubscriptionGuard/index.tsx
@ -22,9 +22,9 @@ export const SubscriptionGuard = ({ children }: Props) => {
  const { user } = useAuthStore()

  useEffect(() => {
-    if (user && matchProfile && (
-      !matchProfile.sub
-      || isSubscribePopup)) {
+    if ((user && matchProfile
+      && !matchProfile.sub)
+      || (matchProfile && isSubscribePopup())) {
      const profile = prepareMatchProfile({
        matchId,
        profile: matchProfile,
--- a/src/features/Matches/helpers/getMatchClickAction/tests/index.tsx
+++ b/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)
 })
--- a/src/features/Matches/helpers/getMatchClickAction/index.tsx
+++ b/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
--- a/src/helpers/openSubscribePopup/index.tsx
+++ b/src/helpers/openSubscribePopup/index.tsx
@ -17,7 +17,7 @@ export const openSubscribePopup = ({
  matchConfig,
  openBuyMatchPopup,
 }: openSubscribePopupType) => {
-  if (isSubscribePopup) {
+  if (isSubscribePopup()) {
    getMatchInfo(matchConfig.sportId, matchConfig.matchId)
      .then((match: MatchInfo) => {
        const matchProfile = match && prepareMatchProfile({
@ -30,4 +30,4 @@ export const openSubscribePopup = ({
  }
 }

-export const isSubscribePopup = checkUrlParams('subscribe') && getAllUrlParams('id').length
+export const isSubscribePopup = () => checkUrlParams('subscribe') && getAllUrlParams('id').length