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

feat(ott-1726): add choise of subscription on buy match popup (#546)

Browse Source
keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
PolyakovaM 4 years ago committed by Mirlan
parent b681fa3fd6
commit 64403dd85e
12 changed files with 289 additions and 21 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. 1
      src/config/lexics/indexLexics.tsx
  2. 118
      src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
  3. 21
      src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
  4. 1
      src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx
  5. 2
      src/features/BuyMatchPopup/index.tsx
  6. 2
      src/features/BuyMatchPopup/store/helpers.tsx
  7. 48
      src/features/BuyMatchPopup/store/hooks/index.tsx
  8. 57
      src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
  9. 29
      src/features/BuyMatchPopup/store/hooks/useSubscriptionsLexics.tsx
  10. 7
      src/features/BuyMatchPopup/styled.tsx
  11. 1
      src/features/BuyMatchPopup/types.tsx
  12. 15
      src/requests/getSubscriptions.tsx

1
src/config/lexics/indexLexics.tsx
Unescape View File

@ -47,6 +47,7 @@ const buyMatchPopupLexics = {
for_month: 13561, for_month: 13561,
for_view: 15064, for_view: 15064,
for_year: 13562, for_year: 13562,
next_choose: 15156,
pass_league: 15065, pass_league: 15065,
pass_match_access: 15067, pass_match_access: 15067,
pass_team: 15066, pass_team: 15066,

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

@ -0,0 +1,118 @@
import { useState } from 'react'
import styled from 'styled-components/macro'
import map from 'lodash/map'
import { MDASH } from 'config'
import { SelectSubscriptionData } from 'requests'
import { Name as Names } from 'features/Name'
import { T9n } from 'features/T9n'
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
import { CloseButton, HeaderActions } from 'features/PopupComponents'
import { ArrowLoader } from 'features/ArrowLoader'
import {
Body,
Button,
Footer,
Header,
HeaderTitle,
Wrapper,
} from 'features/BuyMatchPopup/styled'
import {
Description,
InfoWrapper,
Item,
List,
Name,
Pass,
} from '../SubscriptionsList/styled'
export const ChooseSub = styled.div`
font-weight: 600;
font-size: 16px;
margin: 30px 0;
`
export const SelectSubscriptionStep = () => {
const [active, setActive] = useState<number | null>(null)
const {
close,
initialSubscription,
loader,
match,
onChooseSub,
onSubscriptionPackagesSelect,
selectedSubscriptionPackage,
setSelectSubName,
} = useBuyMatchPopupStore()
if (!match || !initialSubscription) return null
const onItemClick = (subscription: SelectSubscriptionData, index: number) => {
onSubscriptionPackagesSelect({
...subscription.packages,
season: initialSubscription.season,
})
setActive(index)
setSelectSubName(subscription.lexic)
}
return (
<Wrapper>
<Header>
<HeaderTitle>
<Names nameObj={match.team1} />
{` ${MDASH} `}
<Names nameObj={match.team2} />
<ChooseSub>
<T9n t='choose_subscription' />
</ChooseSub>
</HeaderTitle>
<HeaderActions position='right'>
<CloseButton onClick={close} />
</HeaderActions>
</Header>
<Body marginTop={15}>
<List>
{
map(initialSubscription.data, (subscription, index) => (
<Item
key={subscription.id}
onClick={() => onItemClick(subscription, index)}
active={active === index}
>
<InfoWrapper>
<Pass>
<T9n t={subscription.lexic} />
</Pass>
<Name>
<T9n t={subscription.lexic2} />
</Name>
<Description>
<T9n t={subscription.lexic3} />
</Description>
</InfoWrapper>
</Item>
))
}
</List>
</Body>
<Footer>
{loader
? <ArrowLoader width='204px' disabled />
: (
<Button
disabled={!selectedSubscriptionPackage}
onClick={onChooseSub}
>
<T9n t='next_choose' />
</Button>
)}
</Footer>
</Wrapper>
)
}

21
src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
Unescape View File

@ -1,4 +1,4 @@
import { useEffect } from 'react' import { Fragment, useEffect } from 'react'
import isNull from 'lodash/isNull' import isNull from 'lodash/isNull'
@ -21,6 +21,7 @@ import {
Body, Body,
Footer, Footer,
Button, Button,
ButtonPrevious,
Header, Header,
HeaderTitle, HeaderTitle,
} from '../../styled' } from '../../styled'
@ -33,10 +34,13 @@ export const SubscriptionSelectionStep = () => {
const { const {
close, close,
getSub,
loader, loader,
match, match,
onBuyClick, onBuyClick,
selectedSubName,
selectedSubscription, selectedSubscription,
selectedSubStep,
} = useBuyMatchPopupStore() } = useBuyMatchPopupStore()
useEffect(() => { useEffect(() => {
@ -50,10 +54,25 @@ export const SubscriptionSelectionStep = () => {
return ( return (
<Wrapper> <Wrapper>
<Header> <Header>
{selectedSubStep
&& (
<HeaderActions position='left'>
<ButtonPrevious
onClick={getSub}
direction='left'
/>
</HeaderActions>
)}
<HeaderTitle> <HeaderTitle>
{selectedSubStep
? <T9n t={selectedSubName} />
: (
<Fragment>
<Name nameObj={match.team1} /> <Name nameObj={match.team1} />
{` ${MDASH} `} {` ${MDASH} `}
<Name nameObj={match.team2} /> <Name nameObj={match.team2} />
</Fragment>
)}
</HeaderTitle> </HeaderTitle>
<HeaderActions position='right'> <HeaderActions position='right'>
<CloseButton onClick={close} /> <CloseButton onClick={close} />

1
src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx
Unescape View File

@ -63,6 +63,7 @@ export const Item = styled.li.attrs(() => ({
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
overflow: auto;
:not(:last-child) { :not(:last-child) {
margin-bottom: 20px; margin-bottom: 20px;

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

@ -2,6 +2,7 @@ import { CardStep } from './components/CardStep'
import { ErrorStep } from './components/ErrorStep' import { ErrorStep } from './components/ErrorStep'
import { SuccessStep } from './components/SuccessStep' import { SuccessStep } from './components/SuccessStep'
import { SubscriptionSelectionStep } from './components/SubscriptionSelectionStep' import { SubscriptionSelectionStep } from './components/SubscriptionSelectionStep'
import { SelectSubscriptionStep } from './components/SelectSubscription'
import { Steps } from './types' import { Steps } from './types'
import { Modal } from './styled' import { Modal } from './styled'
@ -15,6 +16,7 @@ const components = {
[Steps.CardSelection]: CardStep, [Steps.CardSelection]: CardStep,
[Steps.Success]: SuccessStep, [Steps.Success]: SuccessStep,
[Steps.Error]: ErrorStep, [Steps.Error]: ErrorStep,
[Steps.SelectSubscription]: SelectSubscriptionStep,
} }
export const BuyMatchPopup = () => { export const BuyMatchPopup = () => {

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

@ -50,7 +50,7 @@ const transformSubscription = ({
team: teamName, team: teamName,
}, },
}, },
id: `${key} ${subscription.id}`, id: `${key} ${subscription.sub.id}`,
name: teamName, name: teamName,
originalObject: subscription, originalObject: subscription,
pass: passLexics[key], pass: passLexics[key],

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

@ -9,6 +9,7 @@ import { useHistory } from 'react-router-dom'
import type { PaymentIntent, StripeError } from '@stripe/stripe-js' import type { PaymentIntent, StripeError } from '@stripe/stripe-js'
import last from 'lodash/last' import last from 'lodash/last'
import isEmpty from 'lodash/isEmpty'
import { PAGES, ProfileTypes } from 'config' import { PAGES, ProfileTypes } from 'config'
@ -48,6 +49,8 @@ export const useBuyMatchPopup = () => {
const [match, setMatch] = useState<Match | null>(null) const [match, setMatch] = useState<Match | null>(null)
const [error, setError] = useState('') const [error, setError] = useState('')
const [loader, setLoader] = useState(false) const [loader, setLoader] = useState(false)
const [selectedSubStep, setSelectedSubStep] = useState(false)
const [selectedSubName, setSelectSubName] = useState<number>(0)
const goTo = useCallback( const goTo = useCallback(
(step: Steps, e?: MouseEvent<HTMLButtonElement>) => setSteps((state) => { (step: Steps, e?: MouseEvent<HTMLButtonElement>) => setSteps((state) => {
@ -65,27 +68,48 @@ export const useBuyMatchPopup = () => {
return newState return newState
}), []) }), [])
const openPopup = useCallback((matchData: Match) => {
setMatch(matchData)
setSteps([Steps.Subscriptions])
}, [])
const { const {
fetchSubscriptions, fetchSubscriptions,
fetchSubscriptionsPackages,
initialSubscription,
matchSubscriptions, matchSubscriptions,
onPeriodSelect, onPeriodSelect,
onSubscriptionPackagesSelect,
onSubscriptionSelect, onSubscriptionSelect,
resetSubscriptions, resetSubscriptions,
selectedPeriod, selectedPeriod,
selectedSubscription, selectedSubscription,
selectedSubscriptionPackage,
setSelectedSubscriptionPackage,
subscriptions, subscriptions,
} = useSubscriptions() } = useSubscriptions()
const onChooseSub = () => {
if (match) {
fetchSubscriptionsPackages(match)
setSelectedSubStep(true)
}
}
const openPopup = useCallback((matchData: Match) => {
setMatch(matchData)
}, [])
useEffect(() => {
if (!isEmpty(initialSubscription)) {
!initialSubscription?.data
? setSteps([Steps.Subscriptions])
: setSteps([Steps.SelectSubscription])
}
}, [subscriptions, initialSubscription])
const closePopup = () => { const closePopup = () => {
setMatch(null) setMatch(null)
setSteps([]) setSteps([])
setError('') setError('')
resetSubscriptions() resetSubscriptions()
setSelectedSubscriptionPackage(null)
setSelectedSubStep(false)
if (isMatchPage()) history.push(PAGES.home) if (isMatchPage()) history.push(PAGES.home)
} }
@ -158,28 +182,40 @@ export const useBuyMatchPopup = () => {
} }
} }
useEffect(() => { const getSub = useCallback(() => {
if (match) { if (match) {
fetchSubscriptions(match) fetchSubscriptions(match)
} }
}, [match, fetchSubscriptions]) }, [match, fetchSubscriptions])
useEffect(() => {
getSub()
}, [getSub])
return { return {
close: closePopup, close: closePopup,
currentStep: last(steps), currentStep: last(steps),
error, error,
getSub,
goBack, goBack,
goTo, goTo,
initialSubscription,
loader, loader,
match, match,
matchSubscriptions, matchSubscriptions,
onBuyClick, onBuyClick,
onChooseSub,
onPeriodSelect, onPeriodSelect,
onSubscriptionPackagesSelect,
onSubscriptionSelect, onSubscriptionSelect,
open: openPopup, open: openPopup,
postPaymentHandler, postPaymentHandler,
selectedPeriod, selectedPeriod,
selectedSubName,
selectedSubStep,
selectedSubscription, selectedSubscription,
selectedSubscriptionPackage,
setSelectSubName,
subscriptions, subscriptions,
} }
} }

57
src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
Unescape View File

@ -8,7 +8,7 @@ import find from 'lodash/find'
import isEmpty from 'lodash/isEmpty' import isEmpty from 'lodash/isEmpty'
import first from 'lodash/first' import first from 'lodash/first'
import { getSubscriptions } from 'requests' import { getSubscriptions, SubscriptionsByPeriods } from 'requests'
import { useLexicsStore } from 'features/LexicsStore' import { useLexicsStore } from 'features/LexicsStore'
@ -19,6 +19,7 @@ import type {
} from '../../types' } from '../../types'
import { SubscriptionType } from '../../types' import { SubscriptionType } from '../../types'
import { transformSubsciptions } from '../helpers' import { transformSubsciptions } from '../helpers'
import { useSubscriptionsLexics } from './useSubscriptionsLexics'
const defaultSubscriptions: MatchSubscriptions = { const defaultSubscriptions: MatchSubscriptions = {
[SubscriptionType.Month]: [], [SubscriptionType.Month]: [],
@ -28,24 +29,53 @@ const defaultSubscriptions: MatchSubscriptions = {
export const useSubscriptions = () => { export const useSubscriptions = () => {
const { suffix } = useLexicsStore() const { suffix } = useLexicsStore()
const { fetchLexics } = useSubscriptionsLexics()
const [selectedPeriod, setSelectedPeriod] = useState(SubscriptionType.Month) const [selectedPeriod, setSelectedPeriod] = useState(SubscriptionType.Month)
const [matchSubscriptions, setMatchSubscriptionsList] = useState(defaultSubscriptions) const [matchSubscriptions, setMatchSubscriptionsList] = useState(defaultSubscriptions)
const [selectedSubscription, setSelectedSubscription] = useState<MatchSubscription | null>(null) const [selectedSubscription, setSelectedSubscription] = useState<MatchSubscription | null>(null)
const [
initialSubscription, setInitialSubscription,
] = useState<SubscriptionsByPeriods | null>(null)
const [
selectedSubscriptionPackage, setSelectedSubscriptionPackage,
] = useState<SubscriptionsByPeriods | null>(null)
const fetchSubscriptions = useCallback((match: Match) => { const fetchSubscriptions = useCallback(async (match: Match) => {
getSubscriptions(match.sportType, match.id) const subscriptions = await getSubscriptions(match.sportType, match.id)
.then((subscriptions) => transformSubsciptions({ if (!subscriptions.data) {
const convertedSubscriptions = transformSubsciptions({
match, match,
subscriptions, subscriptions,
suffix, suffix,
})) })
.then((subscriptions) => { setInitialSubscription(subscriptions)
setMatchSubscriptionsList(subscriptions) setMatchSubscriptionsList(convertedSubscriptions)
const firstSubscription = find(subscriptions, (subscription) => !isEmpty(subscription)) const firstSubscription = find(
convertedSubscriptions, (subscription) => !isEmpty(subscription),
)
setSelectedPeriod(first(firstSubscription)?.type || SubscriptionType.Month) setSelectedPeriod(first(firstSubscription)?.type || SubscriptionType.Month)
} else {
setInitialSubscription(subscriptions)
fetchLexics(subscriptions.data)
}
}, [fetchLexics, suffix])
const fetchSubscriptionsPackages = useCallback((match) => {
if (selectedSubscriptionPackage) {
const convertedSubscriptions = transformSubsciptions({
match,
subscriptions: selectedSubscriptionPackage,
suffix,
}) })
}, [suffix]) setInitialSubscription(selectedSubscriptionPackage)
setMatchSubscriptionsList(convertedSubscriptions)
const firstSubscription = find(
convertedSubscriptions, (subscription) => !isEmpty(subscription),
)
setSelectedPeriod(first(firstSubscription)?.type || SubscriptionType.Month)
}
}, [selectedSubscriptionPackage, suffix])
const resetSubscriptions = useCallback(() => { const resetSubscriptions = useCallback(() => {
setSelectedSubscription(null) setSelectedSubscription(null)
@ -56,6 +86,10 @@ export const useSubscriptions = () => {
setSelectedSubscription(subscription === selectedSubscription ? null : subscription) setSelectedSubscription(subscription === selectedSubscription ? null : subscription)
} }
const onSubscriptionPackagesSelect = (packages: SubscriptionsByPeriods) => {
setSelectedSubscriptionPackage(packages === selectedSubscriptionPackage ? null : packages)
}
useEffect(() => { useEffect(() => {
const isOnlySubscriptionVariant = matchSubscriptions[selectedPeriod].length === 1 const isOnlySubscriptionVariant = matchSubscriptions[selectedPeriod].length === 1
if (isOnlySubscriptionVariant) { if (isOnlySubscriptionVariant) {
@ -67,12 +101,17 @@ export const useSubscriptions = () => {
return { return {
fetchSubscriptions, fetchSubscriptions,
fetchSubscriptionsPackages,
initialSubscription,
matchSubscriptions, matchSubscriptions,
onPeriodSelect: setSelectedPeriod, onPeriodSelect: setSelectedPeriod,
onSubscriptionPackagesSelect,
onSubscriptionSelect, onSubscriptionSelect,
resetSubscriptions, resetSubscriptions,
selectedPeriod, selectedPeriod,
selectedSubscription, selectedSubscription,
selectedSubscriptionPackage,
setSelectedSubscriptionPackage,
subscriptions: matchSubscriptions[selectedPeriod], subscriptions: matchSubscriptions[selectedPeriod],
} }
} }

29
src/features/BuyMatchPopup/store/hooks/useSubscriptionsLexics.tsx
Unescape View File

@ -0,0 +1,29 @@
import { useCallback } from 'react'
import isEmpty from 'lodash/isEmpty'
import flatMap from 'lodash/flatMap'
import uniq from 'lodash/uniq'
import type { SelectSubscriptionData } from 'requests'
import { useLexicsStore } from 'features/LexicsStore'
export const useSubscriptionsLexics = () => {
const { addLexicsConfig } = useLexicsStore()
const fetchLexics = useCallback((data: Array<SelectSubscriptionData>) => {
const lexics = uniq(flatMap(data, ({
lexic,
lexic2,
lexic3,
}) => [lexic, lexic2, lexic3]))
if (!isEmpty(lexics)) {
addLexicsConfig(lexics)
}
return data
}, [addLexicsConfig])
return { fetchLexics }
}

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

@ -5,6 +5,7 @@ import { isMobileDevice } from 'config/userAgent'
import { ButtonSolid } from 'features/Common' import { ButtonSolid } from 'features/Common'
import { ModalWindow } from 'features/Modal/styled' import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal' import { Modal as BaseModal } from 'features/Modal'
import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled'
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);
@ -183,3 +184,9 @@ export const ResultText = styled.span`
export const SmallButton = styled(Button)` export const SmallButton = styled(Button)`
min-width: 70px; min-width: 70px;
` `
export const ButtonPrevious = styled(Arrow)`
top: 30px;
left: 30px;
cursor: pointer;
`

1
src/features/BuyMatchPopup/types.tsx
Unescape View File

@ -5,6 +5,7 @@ import type { SubscriptionResponse } from 'requests'
export enum Steps { export enum Steps {
CardSelection = 'CardSelection', CardSelection = 'CardSelection',
Error = 'Error', Error = 'Error',
SelectSubscription = 'SelectSubscription',
Subscriptions = 'Subscriptions', Subscriptions = 'Subscriptions',
Success = 'Success', Success = 'Success',
} }

15
src/requests/getSubscriptions.tsx
Unescape View File

@ -8,13 +8,28 @@ import { callApi } from 'helpers'
const proc = PROCEDURES.get_match_subscriptions const proc = PROCEDURES.get_match_subscriptions
export type SelectSubscriptionData = {
id: number,
lexic: number,
lexic2: number,
lexic3: number,
packages: SelectSubscriptionPackages,
}
export type SubscriptionsByPeriods = { export type SubscriptionsByPeriods = {
data?: Array<SelectSubscriptionData>,
month: Subscriptions, month: Subscriptions,
pay_per_view: SubscriptionResponse, pay_per_view: SubscriptionResponse,
season: Season, season: Season,
year: Subscriptions, year: Subscriptions,
} }
export type SelectSubscriptionPackages = Pick<SubscriptionsByPeriods, (
'month'
| 'pay_per_view'
| 'year'
)>
export type Subscriptions = { export type Subscriptions = {
all: SubscriptionResponse, all: SubscriptionResponse,
team1: SubscriptionResponse, team1: SubscriptionResponse,

Write Preview
Loading…
Cancel
Save