frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

fix(#242): add return to start page with buypoup
continuous-integration/drone/push Build is passing
Details

Browse Source
pull/82/head
Andrei Dekterev 3 years ago
parent 9bf9f65f51
commit 62281019f1
10 changed files with 66 additions and 46 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      src/features/AuthStore/hooks/useAuth.tsx
  2. 65
      src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
  3. 2
      src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
  4. 4
      src/features/BuyMatchPopup/store/helpers.tsx
  5. 6
      src/features/BuyMatchPopup/store/hooks/index.tsx
  6. 2
      src/features/BuyMatchPopup/styled.tsx
  7. 6
      src/features/MatchPage/components/SubscriptionGuard/index.tsx
  8. 14
      src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx
  9. 3
      src/features/Matches/helpers/getMatchClickAction/index.tsx
  10. 4
      src/helpers/openSubscribePopup/index.tsx

6
src/features/AuthStore/hooks/useAuth.tsx
Unescape View File

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

65
src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
Unescape View File

@ -12,8 +12,6 @@ import { MDASH } from 'config'
import { payments } from 'config/payments' import { payments } from 'config/payments'
import { client } from 'config/clients' import { client } from 'config/clients'
import { isSubscribePopup } from 'helpers'
import { CountryCodeType, getCountryCode } from 'requests/getCountryCode' import { CountryCodeType, getCountryCode } from 'requests/getCountryCode'
import { CloseButton, HeaderActions } from 'features/PopupComponents' import { CloseButton, HeaderActions } from 'features/PopupComponents'
@ -22,6 +20,7 @@ import { Name } from 'features/Name'
import { useCardsStore } from 'features/CardsStore' import { useCardsStore } from 'features/CardsStore'
import { ArrowLoader } from 'features/ArrowLoader' import { ArrowLoader } from 'features/ArrowLoader'
import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled' import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled'
import { useAuthStore } from 'features/AuthStore'
import { IframePayment } from '../IframePayment' import { IframePayment } from '../IframePayment'
@ -45,6 +44,11 @@ export const PackageSelectionStep = () => {
} = useCardsStore() } = useCardsStore()
const [isOpenIframe, setIsOpenIframe] = useState(false) const [isOpenIframe, setIsOpenIframe] = useState(false)
const [countryCode, setCountryCode] = useState<CountryCodeType | null>(null) const [countryCode, setCountryCode] = useState<CountryCodeType | null>(null)
const {
logout,
setSearch,
user,
} = useAuthStore()
const { const {
close, close,
@ -109,32 +113,30 @@ export const PackageSelectionStep = () => {
return ( return (
<Wrapper> <Wrapper>
{!isSubscribePopup
&& ( <Header>
<Header> {hasPreviousStep && (
{hasPreviousStep && ( <HeaderActions position='left'>
<HeaderActions position='left'> <ButtonPrevious onClick={goBack}>
<ButtonPrevious onClick={goBack}> <Arrow direction='left' />
<Arrow direction='left' /> </ButtonPrevious>
</ButtonPrevious> </HeaderActions>
</HeaderActions> )}
)} <HeaderTitle>
<HeaderTitle> {hasPreviousStep && selectedSubscription ? (
{hasPreviousStep && selectedSubscription ? ( <T9n t={selectedSubscription?.lexic} />
<T9n t={selectedSubscription?.lexic} /> ) : (
) : ( <Fragment>
<Fragment> <Name nameObj={match.team1} />
<Name nameObj={match.team1} /> {` ${MDASH} `}
{` ${MDASH} `} <Name nameObj={match.team2} />
<Name nameObj={match.team2} /> </Fragment>
</Fragment>
)}
</HeaderTitle>
<HeaderActions position='right'>
<CloseButton onClick={close} />
</HeaderActions>
</Header>
)} )}
</HeaderTitle>
<HeaderActions position='right'>
<CloseButton onClick={close} />
</HeaderActions>
</Header>
<Body marginTop={20}> <Body marginTop={20}>
<Packages /> <Packages />
{!isIframePayment && <SelectedCard />} {!isIframePayment && <SelectedCard />}
@ -145,7 +147,14 @@ export const PackageSelectionStep = () => {
) : ( ) : (
<Button <Button
disabled={!selectedPackage || disabledBuyBtn} disabled={!selectedPackage || disabledBuyBtn}
onClick={onHandleClick} onClick={(e) => {
if (user) {
onHandleClick(e)
} else {
setSearch(window.location.search)
logout('saveToken')
}
}}
> >
<T9n t='buy_subscription' /> <T9n t='buy_subscription' />
</Button> </Button>

2
src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
Unescape View File

@ -57,7 +57,7 @@ export const SelectSubscriptionStep = () => {
return ( return (
<Wrapper> <Wrapper>
<Header> <Header>
{!isSubscribePopup {!isSubscribePopup()
&& ( && (
<HeaderTitle> <HeaderTitle>
<Names nameObj={match.team1} /> <Names nameObj={match.team1} />

4
src/features/BuyMatchPopup/store/helpers.tsx
Unescape View File

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

6
src/features/BuyMatchPopup/store/hooks/index.tsx
Unescape View File

@ -113,6 +113,10 @@ export const useBuyMatchPopup = () => {
setError('') setError('')
resetSubscriptions() resetSubscriptions()
setSelectedPackage(null) setSelectedPackage(null)
if (isSubscribePopup()) {
history.replace({ search: '' })
}
} }
const redirectToMatchProfile = ({ id, sportType }: Match) => { const redirectToMatchProfile = ({ id, sportType }: Match) => {
@ -127,7 +131,7 @@ export const useBuyMatchPopup = () => {
const onSuccessfulSubscription = () => goTo(Steps.Success) const onSuccessfulSubscription = () => goTo(Steps.Success)
const postPaymentHandler = () => { const postPaymentHandler = () => {
if (!match) return if (!match) return
if (!isSubscribePopup) { if (!isSubscribePopup()) {
redirectToMatchProfile(match) redirectToMatchProfile(match)
} }
closePopup() closePopup()

2
src/features/BuyMatchPopup/styled.tsx
Unescape View File

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

6
src/features/MatchPage/components/SubscriptionGuard/index.tsx
Unescape View File

@ -22,9 +22,9 @@ export const SubscriptionGuard = ({ children }: Props) => {
const { user } = useAuthStore() const { user } = useAuthStore()
useEffect(() => { useEffect(() => {
if (user && matchProfile && ( if ((user && matchProfile
!matchProfile.sub && !matchProfile.sub)
|| isSubscribePopup)) { || (matchProfile && isSubscribePopup())) {
const profile = prepareMatchProfile({ const profile = prepareMatchProfile({
matchId, matchId,
profile: matchProfile, profile: matchProfile,

14
src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx
Unescape View File

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

3
src/features/Matches/helpers/getMatchClickAction/index.tsx
Unescape View File

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

4
src/helpers/openSubscribePopup/index.tsx
Unescape View File

@ -17,7 +17,7 @@ export const openSubscribePopup = ({
matchConfig, matchConfig,
openBuyMatchPopup, openBuyMatchPopup,
}: openSubscribePopupType) => { }: openSubscribePopupType) => {
if (isSubscribePopup) { if (isSubscribePopup()) {
getMatchInfo(matchConfig.sportId, matchConfig.matchId) getMatchInfo(matchConfig.sportId, matchConfig.matchId)
.then((match: MatchInfo) => { .then((match: MatchInfo) => {
const matchProfile = match && prepareMatchProfile({ 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

Write Preview
Loading…
Cancel
Save