You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.4 KiB
115 lines
2.4 KiB
import { useMemo } from 'react'
|
|
|
|
import map from 'lodash/map'
|
|
import size from 'lodash/size'
|
|
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import type { MatchSubscription, SubscriptionType } from 'features/BuyMatchPopup/types'
|
|
import { T9n } from 'features/T9n'
|
|
|
|
import { getCorrectPaymentTabs } from './helpers'
|
|
|
|
type ListProps = {
|
|
countSubscriptions: number,
|
|
}
|
|
const List = styled.ul<ListProps>`
|
|
display: flex;
|
|
min-width: 395px;
|
|
justify-content: ${({ countSubscriptions }) => (countSubscriptions === 1
|
|
? 'center'
|
|
: 'space-between')};
|
|
${isMobileDevice
|
|
? css`
|
|
min-width: 90%;
|
|
width: 90%;
|
|
position: relative;
|
|
justify-content: center;
|
|
@media screen and (orientation: landscape){
|
|
margin-top: -5px;
|
|
width: 50%;
|
|
min-width: 50%;
|
|
}
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
type ItemProps = {
|
|
active?: boolean,
|
|
}
|
|
|
|
const Item = styled.li<ItemProps>`
|
|
position: relative;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
line-height: 47px;
|
|
display: flex;
|
|
align-items: center;
|
|
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 {
|
|
background-color: #fff;
|
|
}
|
|
`
|
|
: ''
|
|
)}
|
|
${isMobileDevice
|
|
? css`
|
|
font-size: 10px;
|
|
width: 33%;
|
|
white-space: nowrap;
|
|
::after {
|
|
height: 2px;
|
|
}
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
type Props = {
|
|
className?: string,
|
|
onPeriodSelect: (period: SubscriptionType) => void,
|
|
selectedPeriod: SubscriptionType,
|
|
selectedSubscription: MatchSubscription,
|
|
}
|
|
|
|
export const PaymentPeriodTabs = ({
|
|
className,
|
|
onPeriodSelect,
|
|
selectedPeriod,
|
|
selectedSubscription,
|
|
}: Props) => {
|
|
const matchSubscriptionsWithValues = useMemo(() => (
|
|
getCorrectPaymentTabs(selectedSubscription)
|
|
), [selectedSubscription])
|
|
|
|
return (
|
|
<List className={className} countSubscriptions={size(matchSubscriptionsWithValues)}>
|
|
{map(matchSubscriptionsWithValues, ({ tabLexic, type }) => (
|
|
<Item
|
|
key={type}
|
|
active={selectedPeriod === type}
|
|
onClick={() => onPeriodSelect(type)}
|
|
>
|
|
<T9n t={tabLexic} />
|
|
</Item>
|
|
))}
|
|
</List>
|
|
)
|
|
}
|
|
|