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

fix(2105): subscriptions lexic and per view tab rendering

Browse Source
keep-around/18b5c8c2d85d9265c82f81450a4aa6ac0a73fdd3
Mirlan 4 years ago committed by Макситалиев Мирлан
parent c838b5b01b
commit 18b5c8c2d8
17 changed files with 368 additions and 336 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. 28
      src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
  2. 20
      src/features/BuyMatchPopup/components/Packages/index.tsx
  3. 70
      src/features/BuyMatchPopup/components/PackagesList/index.tsx
  4. 5
      src/features/BuyMatchPopup/components/PackagesList/styled.tsx
  5. 80
      src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
  6. 19
      src/features/BuyMatchPopup/components/SelectSubscription/styled.tsx
  7. 62
      src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx
  8. 4
      src/features/BuyMatchPopup/index.tsx
  9. 124
      src/features/BuyMatchPopup/store/helpers.tsx
  10. 62
      src/features/BuyMatchPopup/store/hooks/index.tsx
  11. 121
      src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
  12. 4
      src/features/BuyMatchPopup/store/hooks/useSubscriptionsLexics.tsx
  13. 21
      src/features/BuyMatchPopup/styled.tsx
  14. 24
      src/features/BuyMatchPopup/types.tsx
  15. 6
      src/features/PaymentPeriodTabs/helpers.tsx
  16. 25
      src/features/PaymentPeriodTabs/index.tsx
  17. 29
      src/requests/getSubscriptions.tsx

28
src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx → src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx
Unescape View File

@ -12,10 +12,11 @@ import { T9n } from 'features/T9n'
import { Name } from 'features/Name'
import { useCardsStore } from 'features/CardsStore'
import { ArrowLoader } from 'features/ArrowLoader'
import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled'
import { useBuyMatchPopupStore } from '../../store'
import { SelectedCard } from '../SelectedCard'
import { Subscriptions } from '../Subscriptions'
import { Packages } from '../Packages'
import {
Wrapper,
Body,
@ -26,7 +27,7 @@ import {
HeaderTitle,
} from '../../styled'
export const SubscriptionSelectionStep = () => {
export const PackageSelectionStep = () => {
const {
cards,
fetchCards,
@ -34,13 +35,13 @@ export const SubscriptionSelectionStep = () => {
const {
close,
getSub,
goBack,
hasPreviousStep,
loader,
match,
onBuyClick,
selectedSubName,
selectedPackage,
selectedSubscription,
selectedSubStep,
} = useBuyMatchPopupStore()
useEffect(() => {
@ -54,17 +55,16 @@ export const SubscriptionSelectionStep = () => {
return (
<Wrapper>
<Header>
{selectedSubStep && (
{hasPreviousStep && (
<HeaderActions position='left'>
<ButtonPrevious
onClick={getSub}
direction='left'
/>
<ButtonPrevious onClick={goBack}>
<Arrow direction='left' />
</ButtonPrevious>
</HeaderActions>
)}
<HeaderTitle>
{selectedSubStep
? <T9n t={selectedSubName} />
{hasPreviousStep && selectedSubscription
? <T9n t={selectedSubscription?.lexic} />
: (
<Fragment>
<Name nameObj={match.team1} />
@ -78,7 +78,7 @@ export const SubscriptionSelectionStep = () => {
</HeaderActions>
</Header>
<Body marginTop={20}>
<Subscriptions />
<Packages />
<SelectedCard />
</Body>
<Footer>
@ -86,7 +86,7 @@ export const SubscriptionSelectionStep = () => {
? <ArrowLoader width='204px' disabled />
: (
<Button
disabled={!selectedSubscription}
disabled={!selectedPackage}
onClick={onBuyClick}
>
<T9n t='buy_subscription' />

20
src/features/BuyMatchPopup/components/Subscriptions/index.tsx → src/features/BuyMatchPopup/components/Packages/index.tsx
Unescape View File

@ -3,7 +3,7 @@ import styled from 'styled-components/macro'
import { PaymentPeriodTabs } from 'features/PaymentPeriodTabs'
import { useBuyMatchPopupStore } from '../../store'
import { SubscriptionsList } from '../SubscriptionsList'
import { PackagesList } from '../PackagesList'
const Wrapper = styled.div`
width: 100%;
@ -12,27 +12,29 @@ const Wrapper = styled.div`
align-items: center;
`
export const Subscriptions = () => {
export const Packages = () => {
const {
matchSubscriptions,
onPackageSelect,
onPeriodSelect,
onSubscriptionSelect,
selectedPackage,
selectedPeriod,
selectedSubscription,
subscriptions,
} = useBuyMatchPopupStore()
if (!selectedSubscription) return null
return (
<Wrapper>
<PaymentPeriodTabs
onPeriodSelect={onPeriodSelect}
selectedPeriod={selectedPeriod}
matchSubscriptions={matchSubscriptions}
/>
<SubscriptionsList
subscriptions={subscriptions}
selectedSubscription={selectedSubscription}
onSelect={onSubscriptionSelect}
/>
<PackagesList
packages={subscriptions}
selectedPackage={selectedPackage}
onSelect={onPackageSelect}
/>
</Wrapper>
)

70
src/features/BuyMatchPopup/components/PackagesList/index.tsx
Unescape View File

@ -0,0 +1,70 @@
import isNumber from 'lodash/isNumber'
import map from 'lodash/map'
import { T9n } from 'features/T9n'
import { MatchPackage, SubscriptionType } from 'features/BuyMatchPopup/types'
import {
Pass,
Name,
Description,
InfoWrapper,
Item,
List,
Price,
} from './styled'
type Props = {
onSelect: (subscription: MatchPackage) => void,
packages: Array<MatchPackage>,
selectedPackage: MatchPackage | null,
}
export const PackagesList = ({
onSelect,
packages,
selectedPackage,
}: Props) => (
<List>
{
map(
packages,
(subPackage) => (
<Item
key={subPackage.id}
onClick={() => onSelect(subPackage)}
active={subPackage === selectedPackage}
>
<InfoWrapper>
<Pass>
<T9n t={subPackage.pass} />
</Pass>
<Name>
{
isNumber(subPackage.nameLexic)
? <T9n t={subPackage.nameLexic} />
: subPackage.name
}
</Name>
<Description>
<T9n
t={subPackage.description.lexic}
values={subPackage.description.values}
/>
</Description>
</InfoWrapper>
<Price
amount={subPackage.price}
currency={subPackage.currency}
perPeriod={
subPackage.type !== SubscriptionType.Month
? null
: `per_${subPackage.type}`
}
/>
</Item>
),
)
}
</List>
)

5
src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx → src/features/BuyMatchPopup/components/PackagesList/styled.tsx
Unescape View File

@ -12,8 +12,6 @@ import {
export const List = styled.ul`
width: 100%;
height: 460px;
display: flex;
flex-direction: column;
overflow-y: auto;
margin-top: 25px;
padding: 0 40px;
@ -63,6 +61,7 @@ export const Item = styled.li.attrs(() => ({
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background-color 0.3s;
:not(:last-child) {
margin-bottom: 20px;
@ -97,7 +96,7 @@ export const Item = styled.li.attrs(() => ({
}
`
: ''};
@media (max-width: 850px) and (orientation: landscape){
min-height: 52.29px;
height: 52.29px;

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

@ -1,18 +1,12 @@
import { useState } from 'react'
import styled from 'styled-components/macro'
import first from 'lodash/first'
import map from 'lodash/map'
import isNull from 'lodash/isNull'
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,
@ -25,52 +19,28 @@ import {
import {
Description,
InfoWrapper,
Item,
List,
Name,
Pass,
} from '../SubscriptionsList/styled'
import { Price } from './styled'
export const ChooseSub = styled.div`
font-weight: 600;
font-size: 16px;
margin: 35px 0 17px;
`
export const ChooseSubItem = styled(Item)`
min-height: auto;
`
} from '../PackagesList/styled'
export const ChooseSubList = styled(List)`
height: auto;
`
import {
Price,
ChooseSub,
ChooseSubItem,
ChooseSubList,
} from './styled'
export const SelectSubscriptionStep = () => {
const [active, setActive] = useState<number | null>(null)
const {
close,
initialSubscription,
loader,
match,
onChooseSub,
onSubscriptionPackagesSelect,
selectedSubscriptionPackage,
setSelectSubName,
matchSubscriptions,
onNext,
onSubscriptionSelect,
selectedSubscription,
} = useBuyMatchPopupStore()
if (!match || !initialSubscription) return null
const onItemClick = (subscription: SelectSubscriptionData, index: number) => {
onSubscriptionPackagesSelect({
...subscription.packages,
season: initialSubscription.season,
})
index === active ? setActive(null) : setActive(index)
setSelectSubName(subscription.lexic)
}
if (!match || !matchSubscriptions) return null
return (
<Wrapper>
@ -89,11 +59,11 @@ export const SelectSubscriptionStep = () => {
</Header>
<Body marginTop={15}>
<ChooseSubList>
{map(initialSubscription.data, (subscription, index) => (
{map(matchSubscriptions, (subscription) => (
<ChooseSubItem
key={subscription.id}
onClick={() => onItemClick(subscription, index)}
active={active === index}
onClick={() => onSubscriptionSelect(subscription)}
active={subscription === selectedSubscription}
>
<InfoWrapper>
<Pass>
@ -109,7 +79,7 @@ export const SelectSubscriptionStep = () => {
<Price
amount={subscription.min_price || 0}
currency={subscription.packages.month.all.currency_iso}
currency={first(subscription.packages.month)?.currency}
isFrom={Boolean(subscription.min_price)}
/>
</ChooseSubItem>
@ -117,16 +87,12 @@ export const SelectSubscriptionStep = () => {
</ChooseSubList>
</Body>
<Footer>
{loader
? <ArrowLoader width='204px' disabled />
: (
<Button
disabled={!selectedSubscriptionPackage || isNull(active)}
onClick={onChooseSub}
>
<T9n t='next_choose' />
</Button>
)}
<Button
disabled={!selectedSubscription}
onClick={onNext}
>
<T9n t='next_choose' />
</Button>
</Footer>
</Wrapper>
)

19
src/features/BuyMatchPopup/components/SelectSubscription/styled.tsx
Unescape View File

@ -2,6 +2,11 @@ import styled from 'styled-components/macro'
import { Price as BasePrice } from 'features/Price'
import { PriceAmount, PriceDetails } from 'features/Price/styled'
import {
Item,
List,
} from '../PackagesList/styled'
export const Price = styled(BasePrice)`
${PriceAmount} {
font-size: 24px;
@ -12,3 +17,17 @@ export const Price = styled(BasePrice)`
font-size: 12px;
}
`
export const ChooseSub = styled.div`
font-weight: 600;
font-size: 16px;
margin: 35px 0 17px;
`
export const ChooseSubItem = styled(Item)`
min-height: auto;
`
export const ChooseSubList = styled(List)`
height: auto;
`

62
src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx
Unescape View File

@ -1,62 +0,0 @@
import map from 'lodash/map'
import { T9n } from 'features/T9n'
import { MatchSubscription, SubscriptionType } from 'features/BuyMatchPopup/types'
import {
Pass,
Name,
Description,
InfoWrapper,
Item,
List,
Price,
} from './styled'
type Props = {
onSelect: (subscription: MatchSubscription) => void,
selectedSubscription: MatchSubscription | null,
subscriptions: Array<MatchSubscription>,
}
export const SubscriptionsList = ({
onSelect,
selectedSubscription,
subscriptions,
}: Props) => (
<List>
{
map(
subscriptions,
(subscription) => {
const { description, type } = subscription
return (
<Item
key={subscription.id}
onClick={() => onSelect?.(subscription)}
active={subscription === selectedSubscription}
>
<InfoWrapper>
<Pass>
<T9n t={subscription.pass} />
</Pass>
<Name>
{subscription.name}
</Name>
<Description>
<T9n t={description.lexic} values={description.values} />
</Description>
</InfoWrapper>
<Price
amount={subscription.price}
currency={subscription.currency}
perPeriod={type !== SubscriptionType.Month ? null : `per_${type}`}
/>
</Item>
)
},
)
}
</List>
)

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

@ -1,7 +1,7 @@
import { CardStep } from './components/CardStep'
import { ErrorStep } from './components/ErrorStep'
import { SuccessStep } from './components/SuccessStep'
import { SubscriptionSelectionStep } from './components/SubscriptionSelectionStep'
import { PackageSelectionStep } from './components/PackageSelectionStep'
import { SelectSubscriptionStep } from './components/SelectSubscription'
import { Steps } from './types'
@ -12,7 +12,7 @@ export * from './store'
export * from './store/helpers'
const components = {
[Steps.Subscriptions]: SubscriptionSelectionStep,
[Steps.SelectPackage]: PackageSelectionStep,
[Steps.CardSelection]: CardStep,
[Steps.Success]: SuccessStep,
[Steps.Error]: ErrorStep,

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

@ -3,8 +3,10 @@ import map from 'lodash/map'
import { currencySymbols } from 'config'
import type {
SubscriptionsByPeriods,
Subscriptions,
SubscriptionsData,
Subscription,
Packages,
Season,
} from 'requests/getSubscriptions'
import { getName } from 'features/Name'
@ -12,7 +14,9 @@ import { getName } from 'features/Name'
import type {
MatchSubscriptions,
MatchSubscription,
MatchPackage,
Match,
Desciption,
} from '../types'
import { SubscriptionType } from '../types'
import {
@ -23,79 +27,119 @@ import {
type SubscriptionArgs = {
match: Match,
subscriptions: SubscriptionsByPeriods,
season: Season,
subscription: Subscription,
suffix: string,
}
const transformSubscription = ({
const transformPackage = ({
match,
subscriptions,
season,
subscription,
suffix,
}: SubscriptionArgs) => (
type: SubscriptionType.Month | SubscriptionType.Year,
): Array<MatchSubscription> => {
const { season } = subscriptions
return map(subscriptions[type], (subscription, rawKey) => {
const key = rawKey as keyof Subscriptions
): Array<MatchPackage> => (
map(subscription.packages[type], (subscriptionPackage, rawKey) => {
const key = rawKey as keyof Packages
const isLeaguePass = key === 'all'
const teamName = getName({
nameObj: match[passNameKeys[key]],
suffix,
})
return {
currency: currencySymbols[subscription.currency_iso],
description: {
const description: Desciption = isLeaguePass
? {
lexic: subscription.lexic3,
values: {},
}
: {
lexic: descriptionLexics[key],
values: {
season: season.name,
team: teamName,
},
},
id: `${key} ${subscription.sub.id}`,
}
const nameLexic = isLeaguePass ? subscription.lexic2 : null
return {
currency: currencySymbols[subscriptionPackage.currency_iso],
description,
id: `${key} ${subscriptionPackage.sub.id}`,
name: teamName,
originalObject: subscription,
nameLexic,
originalObject: subscriptionPackage,
pass: passLexics[key],
price: subscription.price,
seasonName: season.name,
price: subscriptionPackage.price,
type,
}
})
}
)
type SubsciptionsArgs = {
type PackagesArgs = {
match: Match,
subscriptions: SubscriptionsByPeriods,
season: Season,
subscription: Subscription,
suffix: string,
}
export const transformSubsciptions = ({
const transformPackages = ({
match,
subscriptions,
season,
subscription,
suffix,
}: SubsciptionsArgs): MatchSubscriptions => {
const { pay_per_view: payPerView } = subscriptions
}: PackagesArgs): MatchSubscription => {
const { pay_per_view: payPerView } = subscription.packages
const team1Name = getName({ nameObj: match.team1, suffix })
const team2Name = getName({ nameObj: match.team2, suffix })
const transformByType = transformSubscription({
const transformByType = transformPackage({
match,
subscriptions,
season,
subscription,
suffix,
})
return {
const packages = {
[SubscriptionType.Month]: transformByType(SubscriptionType.Month),
[SubscriptionType.Year]: transformByType(SubscriptionType.Year),
[SubscriptionType.PayPerView]: subscriptions.pay_per_view ? ([{
currency: currencySymbols[payPerView?.currency_iso],
description: {
lexic: 'description_match_live_and_on_demand',
values: {},
},
id: '0',
name: `${team1Name} - ${team2Name}`,
originalObject: payPerView,
pass: 'pass_match_access',
price: payPerView?.price,
type: SubscriptionType.PayPerView,
}]) : [],
[SubscriptionType.PayPerView]:
payPerView
? [{
currency: currencySymbols[payPerView.currency_iso],
description: {
lexic: 'description_match_live_and_on_demand',
values: {},
},
id: '0',
name: `${team1Name} - ${team2Name}`,
originalObject: payPerView,
pass: 'pass_match_access',
price: payPerView.price,
type: SubscriptionType.PayPerView,
}]
: [],
}
return {
...subscription,
packages,
}
}
type SubsciptionsArgs = {
match: Match,
subscriptions: SubscriptionsData,
suffix: string,
}
export const transformSubscriptions = ({
match,
subscriptions,
suffix,
}: SubsciptionsArgs): MatchSubscriptions => map(
subscriptions.data,
(subscription) => transformPackages({
match,
season: subscriptions.season,
subscription,
suffix,
}),
)

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

@ -50,8 +50,6 @@ export const useBuyMatchPopup = () => {
const [match, setMatch] = useState<Match | null>(null)
const [error, setError] = useState('')
const [loader, setLoader] = useState(false)
const [selectedSubStep, setSelectedSubStep] = useState(false)
const [selectedSubName, setSelectSubName] = useState<number>(0)
const goTo = useCallback(
(step: Steps, e?: MouseEvent<HTMLButtonElement>) => setSteps((state) => {
@ -71,46 +69,42 @@ export const useBuyMatchPopup = () => {
const {
fetchSubscriptions,
fetchSubscriptionsPackages,
initialSubscription,
matchSubscriptions,
onPackageSelect,
onPeriodSelect,
onSubscriptionPackagesSelect,
onSubscriptionSelect,
resetSubscriptions,
selectedPackage,
selectedPeriod,
selectedSubscription,
selectedSubscriptionPackage,
setSelectedSubscriptionPackage,
setSelectedPackage,
subscriptions,
} = useSubscriptions()
const onChooseSub = () => {
if (match) {
fetchSubscriptionsPackages(match)
setSelectedSubStep(true)
}
}
const onNext = (e: MouseEvent<HTMLButtonElement>) => goTo(Steps.SelectPackage, e)
const openPopup = useCallback((matchData: Match) => {
setMatch(matchData)
setSteps([])
}, [])
useEffect(() => {
if (!isEmpty(initialSubscription)) {
!initialSubscription?.data || size(initialSubscription?.data) === 1
? setSteps([Steps.Subscriptions])
: setSteps([Steps.SelectSubscription])
if (isEmpty(matchSubscriptions)) return
if (size(matchSubscriptions) === 1) {
setSteps([Steps.SelectPackage])
onSubscriptionSelect(matchSubscriptions[0])
} else {
setSteps([Steps.SelectSubscription])
}
}, [subscriptions, initialSubscription])
}, [matchSubscriptions, onSubscriptionSelect])
const closePopup = () => {
setMatch(null)
setSteps([])
setError('')
resetSubscriptions()
setSelectedSubscriptionPackage(null)
setSelectedSubStep(false)
setSelectedPackage(null)
if (isMatchPage()) history.push(PAGES.home)
}
@ -142,8 +136,8 @@ export const useBuyMatchPopup = () => {
}
const onConfirmationSuccess = ({ id }: PaymentIntent) => {
if (!selectedSubscription) return
const item = selectedSubscription.originalObject
if (!selectedPackage) return
const item = selectedPackage.originalObject
notifySuccessfulSubscription({ item, paymentIntentId: id })
.then(onSuccessfulSubscription, goToError)
}
@ -163,10 +157,10 @@ export const useBuyMatchPopup = () => {
}
const subscribeToMatch = () => {
if (!selectedSubscription || !defaultCard) return
if (!selectedPackage || !defaultCard) return
const item = selectedSubscription.originalObject
const buy = requests[selectedSubscription.type]
const item = selectedPackage.originalObject
const buy = requests[selectedPackage.type]
setLoader(true)
buy({ cardId: defaultCard.id, item }).then(
onSuccessfulSubscription,
@ -183,40 +177,32 @@ export const useBuyMatchPopup = () => {
}
}
const getSub = useCallback(() => {
useEffect(() => {
if (match) {
fetchSubscriptions(match)
}
}, [match, fetchSubscriptions])
useEffect(() => {
getSub()
}, [getSub])
return {
close: closePopup,
currentStep: last(steps),
error,
getSub,
goBack,
goTo,
initialSubscription,
hasPreviousStep: size(steps) > 1,
loader,
match,
matchSubscriptions,
onBuyClick,
onChooseSub,
onNext,
onPackageSelect,
onPeriodSelect,
onSubscriptionPackagesSelect,
onSubscriptionSelect,
open: openPopup,
postPaymentHandler,
selectedPackage,
selectedPeriod,
selectedSubName,
selectedSubStep,
selectedSubscription,
selectedSubscriptionPackage,
setSelectSubName,
subscriptions,
}
}

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

@ -9,116 +9,105 @@ import isEmpty from 'lodash/isEmpty'
import first from 'lodash/first'
import size from 'lodash/size'
import { getSubscriptions, SubscriptionsByPeriods } from 'requests'
import { getSubscriptions } from 'requests/getSubscriptions'
import { useLexicsStore } from 'features/LexicsStore'
import type {
MatchSubscriptions,
MatchSubscription,
MatchPackage,
Match,
} from '../../types'
import { SubscriptionType } from '../../types'
import { transformSubsciptions } from '../helpers'
import { transformSubscriptions } from '../helpers'
import { useSubscriptionsLexics } from './useSubscriptionsLexics'
const defaultSubscriptions: MatchSubscriptions = {
[SubscriptionType.Month]: [],
[SubscriptionType.Year]: [],
[SubscriptionType.PayPerView]: [],
const defaultSubscriptions: MatchSubscriptions = []
const defaultPeriod = SubscriptionType.Month
const getInitialPeriod = (subscription?: MatchSubscription) => {
const { packages } = subscription || {}
if (!packages) return defaultPeriod
return first(packages.year)?.type
|| first(packages.month)?.type
|| first(packages.pay_per_view)?.type
|| defaultPeriod
}
export const useSubscriptions = () => {
const { suffix } = useLexicsStore()
const { fetchLexics } = useSubscriptionsLexics()
const [selectedPeriod, setSelectedPeriod] = useState(SubscriptionType.Month)
const [matchSubscriptions, setMatchSubscriptionsList] = useState(defaultSubscriptions)
const [selectedSubscription, setSelectedSubscription] = useState<MatchSubscription | null>(null)
const [selectedPeriod, setSelectedPeriod] = useState(defaultPeriod)
const [
matchSubscriptions,
setMatchSubscriptionsList,
] = useState(defaultSubscriptions)
const [
initialSubscription, setInitialSubscription,
] = useState<SubscriptionsByPeriods | null>(null)
selectedSubscription,
setSelectedSubscription,
] = useState<MatchSubscription | null>(null)
const [
selectedSubscriptionPackage, setSelectedSubscriptionPackage,
] = useState<SubscriptionsByPeriods | null>(null)
selectedPackage,
setSelectedPackage,
] = useState<MatchPackage | null>(null)
const fetchSubscriptions = useCallback(async (match: Match) => {
const subscriptions = await getSubscriptions(match.sportType, match.id)
const subscriptionData = subscriptions.data && size(subscriptions.data) === 1
? {
...subscriptions.data[0].packages,
season: subscriptions.season,
}
: subscriptions
if (!subscriptions.data || size(subscriptions.data) === 1) {
const convertedSubscriptions = transformSubsciptions({
match,
subscriptions: subscriptionData,
suffix,
})
setInitialSubscription(subscriptions)
setMatchSubscriptionsList(convertedSubscriptions)
const firstSubscription = find(
convertedSubscriptions, (subscription) => !isEmpty(subscription),
)
setSelectedPeriod(first(firstSubscription)?.type || SubscriptionType.Month)
} else {
setInitialSubscription(subscriptions)
fetchLexics(subscriptions.data)
}
const convertedSubscriptions = transformSubscriptions({
match,
subscriptions,
suffix,
})
setMatchSubscriptionsList(convertedSubscriptions)
fetchLexics(subscriptions.data || [])
const firstPackage = find(
convertedSubscriptions, (subscription) => !isEmpty(subscription),
)
setSelectedPeriod(getInitialPeriod(firstPackage))
}, [fetchLexics, suffix])
const fetchSubscriptionsPackages = useCallback((match) => {
if (selectedSubscriptionPackage) {
const convertedSubscriptions = transformSubsciptions({
match,
subscriptions: selectedSubscriptionPackage,
suffix,
})
setInitialSubscription(selectedSubscriptionPackage)
setMatchSubscriptionsList(convertedSubscriptions)
const firstSubscription = find(
convertedSubscriptions, (subscription) => !isEmpty(subscription),
)
setSelectedPeriod(first(firstSubscription)?.type || SubscriptionType.Month)
}
}, [selectedSubscriptionPackage, suffix])
const onSubscriptionSelect = useCallback((nextSubscription: MatchSubscription) => {
setSelectedSubscription(nextSubscription)
const nextPeriod = getInitialPeriod(nextSubscription)
setSelectedPeriod(nextPeriod)
}, [])
const resetSubscriptions = useCallback(() => {
setSelectedSubscription(null)
setSelectedPackage(null)
setMatchSubscriptionsList(defaultSubscriptions)
}, [])
const onSubscriptionSelect = (subscription: MatchSubscription) => {
setSelectedSubscription(subscription === selectedSubscription ? null : subscription)
}
const onSubscriptionPackagesSelect = (packages: SubscriptionsByPeriods) => {
setSelectedSubscriptionPackage(packages === selectedSubscriptionPackage ? null : packages)
const onPackageSelect = (subscriptionPackage: MatchPackage) => {
setSelectedPackage(subscriptionPackage === selectedPackage ? null : subscriptionPackage)
}
useEffect(() => {
const isOnlySubscriptionVariant = matchSubscriptions[selectedPeriod].length === 1
if (!selectedSubscription) return
const packages = selectedSubscription.packages[selectedPeriod]
const isOnlySubscriptionVariant = size(packages) === 1
if (isOnlySubscriptionVariant) {
setSelectedSubscription(matchSubscriptions[selectedPeriod][0])
setSelectedPackage(packages[0])
} else {
setSelectedSubscription(null)
setSelectedPackage(null)
}
}, [matchSubscriptions, selectedPeriod])
}, [selectedSubscription, selectedPeriod])
return {
fetchSubscriptions,
fetchSubscriptionsPackages,
initialSubscription,
matchSubscriptions,
onPackageSelect,
onPeriodSelect: setSelectedPeriod,
onSubscriptionPackagesSelect,
onSubscriptionSelect,
resetSubscriptions,
selectedPackage,
selectedPeriod,
selectedSubscription,
selectedSubscriptionPackage,
setSelectedSubscriptionPackage,
subscriptions: matchSubscriptions[selectedPeriod],
setSelectedPackage,
subscriptions: selectedSubscription?.packages?.[selectedPeriod] || [],
}
}

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

@ -4,14 +4,14 @@ import isEmpty from 'lodash/isEmpty'
import flatMap from 'lodash/flatMap'
import uniq from 'lodash/uniq'
import type { SelectSubscriptionData } from 'requests'
import type { Subscriptions } from 'requests/getSubscriptions'
import { useLexicsStore } from 'features/LexicsStore'
export const useSubscriptionsLexics = () => {
const { addLexicsConfig } = useLexicsStore()
const fetchLexics = useCallback((data: Array<SelectSubscriptionData>) => {
const fetchLexics = useCallback((data: Subscriptions) => {
const lexics = uniq(flatMap(data, ({
lexic,
lexic2,

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

@ -5,7 +5,6 @@ import { isMobileDevice } from 'config/userAgent'
import { ButtonSolid } from 'features/Common'
import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal'
import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled'
export const Modal = styled(BaseModal)`
background-color: rgba(0, 0, 0, 0.7);
@ -45,7 +44,7 @@ export const HeaderTitle = styled.h2`
font-weight: 700;
`
: ''};
`
export const Button = styled(ButtonSolid)`
@ -104,7 +103,7 @@ export const Wrapper = styled.div<WrapperProps>`
@media (max-width: 1370px) {
max-width: 743px;
max-height: 650px;
}
@media (max-width: 650px){
width: 100%;
@ -125,11 +124,11 @@ type BodyProps = {
export const Body = styled.div<BodyProps>`
margin-top: ${({ marginTop }) => (marginTop ? `${marginTop}px` : '')};
margin-bottom: ${({ marginBottom }) => (
marginBottom ? `${marginBottom}px` : ''
)};
padding: ${({ padding }) => (padding || '')};
${isMobileDevice
? css`
@ -172,7 +171,6 @@ export const ResultText = styled.span`
? css`
font-size: 14px;
line-height: 18px;
/* margin-top: 10px; */
`
: ''};
`
@ -181,8 +179,13 @@ export const SmallButton = styled(Button)`
min-width: 70px;
`
export const ButtonPrevious = styled(Arrow)`
top: 45px;
left: 30px;
export const ButtonPrevious = styled.button`
border: none;
outline: none;
background-color: transparent;
padding: 15px;
position: absolute;
top: 30px;
left: 20px;
cursor: pointer;
`

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

@ -1,12 +1,13 @@
import type { SubscriptionResponse, Subscription } from 'requests/getSubscriptions'
import type { LexicsId, Values } from 'features/LexicsStore/types'
import type { Match as MatchBase } from 'features/Matches/hooks'
import type { SubscriptionResponse } from 'requests'
export enum Steps {
CardSelection = 'CardSelection',
Error = 'Error',
SelectPackage = 'SelectPackage',
SelectSubscription = 'SelectSubscription',
Subscriptions = 'Subscriptions',
Success = 'Success',
}
@ -16,20 +17,20 @@ export enum SubscriptionType {
Year = 'year',
}
type Desciption = {
export type Desciption = {
lexic: LexicsId,
values: Values,
}
export type MatchSubscription = {
export type MatchPackage = {
currency: string,
description: Desciption,
id: string,
name: string,
nameLexic?: LexicsId | null,
originalObject: SubscriptionResponse,
pass: string,
price: number,
seasonName?: string,
type: SubscriptionType,
}
@ -43,4 +44,15 @@ export type Match = Pick<MatchBase, (
| 'hasVideo'
)>
export type MatchSubscriptions = Record<SubscriptionType, Array<MatchSubscription>>
export type MatchSubscription = Pick<Subscription, (
'id'
| 'lexic'
| 'lexic2'
| 'lexic3'
| 'min_price'
)>
& {
packages: Record<SubscriptionType, Array<MatchPackage>>,
}
export type MatchSubscriptions = Array<MatchSubscription>

6
src/features/PaymentPeriodTabs/helpers.tsx
Unescape View File

@ -2,7 +2,7 @@ import omitBy from 'lodash/omitBy'
import isEmpty from 'lodash/isEmpty'
import map from 'lodash/map'
import type { MatchSubscriptions, SubscriptionType } from 'features/BuyMatchPopup/types'
import type { MatchSubscription, SubscriptionType } from 'features/BuyMatchPopup/types'
type PaymentTab = {
tabLexic: string,
@ -22,8 +22,8 @@ const getTabLexic = (type: string) => {
}
}
export const getCorrectPaymentTabs = (matchSubscriptions: MatchSubscriptions) => {
const matchSubscriptionsWithValues = omitBy(matchSubscriptions, isEmpty)
export const getCorrectPaymentTabs = (matchSubscriptions: MatchSubscription) => {
const matchSubscriptionsWithValues = omitBy(matchSubscriptions.packages, isEmpty)
return map(matchSubscriptionsWithValues, (matchSubscription, key) => ({
tabLexic: getTabLexic(key),
type: key,

25
src/features/PaymentPeriodTabs/index.tsx
Unescape View File

@ -6,7 +6,7 @@ import styled, { css } from 'styled-components/macro'
import { isMobileDevice } from 'config/userAgent'
import type { MatchSubscriptions, SubscriptionType } from 'features/BuyMatchPopup/types'
import type { MatchSubscription, SubscriptionType } from 'features/BuyMatchPopup/types'
import { T9n } from 'features/T9n'
import { getCorrectPaymentTabs } from './helpers'
@ -49,17 +49,22 @@ const Item = styled.li<ItemProps>`
justify-content: center;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: color 0.3s;
::after {
transition: background-color 0.3s;
position: absolute;
content: '';
bottom: 0px;
width: 130px;
height: 3px;
}
${({ active }) => (
active
? css`
color: #fff;
::after {
position: absolute;
content: '';
bottom: 0px;
width: 130px;
height: 3px;
background-color: #fff;
}
`
@ -79,20 +84,20 @@ const Item = styled.li<ItemProps>`
type Props = {
className?: string,
matchSubscriptions: MatchSubscriptions,
onPeriodSelect: (period: SubscriptionType) => void,
selectedPeriod: SubscriptionType,
selectedSubscription: MatchSubscription,
}
export const PaymentPeriodTabs = ({
className,
matchSubscriptions,
onPeriodSelect,
selectedPeriod,
selectedSubscription,
}: Props) => {
const matchSubscriptionsWithValues = useMemo(() => (
getCorrectPaymentTabs(matchSubscriptions)
), [matchSubscriptions])
getCorrectPaymentTabs(selectedSubscription)
), [selectedSubscription])
return (
<List className={className} countSubscriptions={size(matchSubscriptionsWithValues)}>

29
src/requests/getSubscriptions.tsx
Unescape View File

@ -8,30 +8,29 @@ import { callApi } from 'helpers'
const proc = PROCEDURES.get_match_subscriptions
export type SelectSubscriptionData = {
export type Subscription = {
id: number,
lexic: number,
lexic2: number,
lexic3: number,
min_price?: number,
packages: SelectSubscriptionPackages,
packages: PackagesGroup,
}
export type SubscriptionsByPeriods = {
data?: Array<SelectSubscriptionData>,
month: Subscriptions,
pay_per_view: SubscriptionResponse,
export type Subscriptions = Array<Subscription>
export type SubscriptionsData = {
data?: Subscriptions,
season: Season,
year: Subscriptions,
}
export type SelectSubscriptionPackages = Pick<SubscriptionsByPeriods, (
'month'
| 'pay_per_view'
| 'year'
)>
type PackagesGroup = {
month: Packages,
pay_per_view: SubscriptionResponse,
year: Packages,
}
export type Subscriptions = {
export type Packages = {
all: SubscriptionResponse,
team1: SubscriptionResponse,
team2: SubscriptionResponse,
@ -59,7 +58,7 @@ type Sub = {
team_id?: number,
}
type Season = {
export type Season = {
id: number,
name: string,
}
@ -67,7 +66,7 @@ type Season = {
export const getSubscriptions = async (
sport: SportTypes,
matchId: number,
): Promise<SubscriptionsByPeriods> => {
): Promise<SubscriptionsData> => {
const config = {
body: {
params: {

Write Preview
Loading…
Cancel
Save