diff --git a/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx similarity index 76% rename from src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx rename to src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx index 6cdd180f..2059c496 100644 --- a/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx +++ b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx @@ -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 (
- {selectedSubStep && ( + {hasPreviousStep && ( - + + + )} - {selectedSubStep - ? + {hasPreviousStep && selectedSubscription + ? : ( @@ -78,7 +78,7 @@ export const SubscriptionSelectionStep = () => {
- + ) diff --git a/src/features/BuyMatchPopup/components/SelectSubscription/styled.tsx b/src/features/BuyMatchPopup/components/SelectSubscription/styled.tsx index cafb98ff..eab2b6aa 100644 --- a/src/features/BuyMatchPopup/components/SelectSubscription/styled.tsx +++ b/src/features/BuyMatchPopup/components/SelectSubscription/styled.tsx @@ -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; +` diff --git a/src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx b/src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx deleted file mode 100644 index 8a5a4f7c..00000000 --- a/src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx +++ /dev/null @@ -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, -} - -export const SubscriptionsList = ({ - onSelect, - selectedSubscription, - subscriptions, -}: Props) => ( - - { - map( - subscriptions, - (subscription) => { - const { description, type } = subscription - - return ( - onSelect?.(subscription)} - active={subscription === selectedSubscription} - > - - - - - - {subscription.name} - - - - - - - - ) - }, - ) - } - -) diff --git a/src/features/BuyMatchPopup/index.tsx b/src/features/BuyMatchPopup/index.tsx index bee6cac0..0b9244cd 100644 --- a/src/features/BuyMatchPopup/index.tsx +++ b/src/features/BuyMatchPopup/index.tsx @@ -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, diff --git a/src/features/BuyMatchPopup/store/helpers.tsx b/src/features/BuyMatchPopup/store/helpers.tsx index 710c0487..cf89faef 100644 --- a/src/features/BuyMatchPopup/store/helpers.tsx +++ b/src/features/BuyMatchPopup/store/helpers.tsx @@ -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 => { - const { season } = subscriptions - return map(subscriptions[type], (subscription, rawKey) => { - const key = rawKey as keyof Subscriptions +): Array => ( + 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, + }), +) diff --git a/src/features/BuyMatchPopup/store/hooks/index.tsx b/src/features/BuyMatchPopup/store/hooks/index.tsx index c733670d..b0f5f750 100644 --- a/src/features/BuyMatchPopup/store/hooks/index.tsx +++ b/src/features/BuyMatchPopup/store/hooks/index.tsx @@ -50,8 +50,6 @@ export const useBuyMatchPopup = () => { const [match, setMatch] = useState(null) const [error, setError] = useState('') const [loader, setLoader] = useState(false) - const [selectedSubStep, setSelectedSubStep] = useState(false) - const [selectedSubName, setSelectSubName] = useState(0) const goTo = useCallback( (step: Steps, e?: MouseEvent) => 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) => 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, } } diff --git a/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx b/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx index dc65693a..0d063491 100644 --- a/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx +++ b/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx @@ -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(null) + const [selectedPeriod, setSelectedPeriod] = useState(defaultPeriod) + const [ + matchSubscriptions, + setMatchSubscriptionsList, + ] = useState(defaultSubscriptions) const [ - initialSubscription, setInitialSubscription, - ] = useState(null) + selectedSubscription, + setSelectedSubscription, + ] = useState(null) const [ - selectedSubscriptionPackage, setSelectedSubscriptionPackage, - ] = useState(null) + selectedPackage, + setSelectedPackage, + ] = useState(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] || [], } } diff --git a/src/features/BuyMatchPopup/store/hooks/useSubscriptionsLexics.tsx b/src/features/BuyMatchPopup/store/hooks/useSubscriptionsLexics.tsx index b2255b33..75532e3e 100644 --- a/src/features/BuyMatchPopup/store/hooks/useSubscriptionsLexics.tsx +++ b/src/features/BuyMatchPopup/store/hooks/useSubscriptionsLexics.tsx @@ -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) => { + const fetchLexics = useCallback((data: Subscriptions) => { const lexics = uniq(flatMap(data, ({ lexic, lexic2, diff --git a/src/features/BuyMatchPopup/styled.tsx b/src/features/BuyMatchPopup/styled.tsx index 68e9e103..8f9ed5c2 100644 --- a/src/features/BuyMatchPopup/styled.tsx +++ b/src/features/BuyMatchPopup/styled.tsx @@ -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` @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` 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; ` diff --git a/src/features/BuyMatchPopup/types.tsx b/src/features/BuyMatchPopup/types.tsx index 9318fc7b..c72f6fa9 100644 --- a/src/features/BuyMatchPopup/types.tsx +++ b/src/features/BuyMatchPopup/types.tsx @@ -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 -export type MatchSubscriptions = Record> +export type MatchSubscription = Pick +& { + packages: Record>, +} + +export type MatchSubscriptions = Array diff --git a/src/features/PaymentPeriodTabs/helpers.tsx b/src/features/PaymentPeriodTabs/helpers.tsx index 7b0458d5..e8ade685 100644 --- a/src/features/PaymentPeriodTabs/helpers.tsx +++ b/src/features/PaymentPeriodTabs/helpers.tsx @@ -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, diff --git a/src/features/PaymentPeriodTabs/index.tsx b/src/features/PaymentPeriodTabs/index.tsx index 475d6076..9e4c7beb 100644 --- a/src/features/PaymentPeriodTabs/index.tsx +++ b/src/features/PaymentPeriodTabs/index.tsx @@ -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` 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` 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 ( diff --git a/src/requests/getSubscriptions.tsx b/src/requests/getSubscriptions.tsx index 8ba65203..e6f86a07 100644 --- a/src/requests/getSubscriptions.tsx +++ b/src/requests/getSubscriptions.tsx @@ -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, - month: Subscriptions, - pay_per_view: SubscriptionResponse, +export type Subscriptions = Array + +export type SubscriptionsData = { + data?: Subscriptions, season: Season, - year: Subscriptions, } -export type SelectSubscriptionPackages = Pick +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 => { +): Promise => { const config = { body: { params: {