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.
 
 
 
 
spa_instat_tv/src/features/Register/components/SubscriptionsStep/index.tsx

69 lines
2.3 KiB

import { Fragment } from 'react'
import { useRouteMatch } from 'react-router-dom'
import { PAGES } from 'config'
import { T9n } from 'features/T9n'
import { ButtonSolid } from 'features/Common/Button'
import { ArrowLeft, ArrowRight } from 'features/Common/Arrows'
import { MainSubscription } from 'features/Register/components/MainSubscription'
import { AdditionalSubscription } from 'features/Register/components/AdditionalSubscription'
import {
SubscriptionsBlock,
AdditionalBlockTitle,
BlockTitle,
SubscriptionList,
SubscriptionListItem,
PricesBlock,
TotalInfoBlock,
TotalInfoText,
TotalPriceAmmount,
TotalPriceDetails,
ButtonsBlock,
} from './styled'
export const SubscriptionStep = () => {
const isSubsStep = useRouteMatch(`${PAGES.register}/subscriptions`)?.isExact || false
return (
<Fragment>
<SubscriptionsBlock isSubsStep={isSubsStep}>
<BlockTitle>
<T9n t='step_title_subscription' />
</BlockTitle>
<SubscriptionList>
<SubscriptionListItem>
<MainSubscription title='Бесплатная' price={0} />
</SubscriptionListItem>
<SubscriptionListItem>
<MainSubscription title='Базовая' price={1999} />
</SubscriptionListItem>
</SubscriptionList>
</SubscriptionsBlock>
<SubscriptionsBlock forAdditionalTitle>
<AdditionalBlockTitle>
<T9n t='subscription_extra' />
</AdditionalBlockTitle>
<PricesBlock>
<ArrowLeft />
<AdditionalSubscription title='Российская премьер-лига' price={1999} />
<AdditionalSubscription title='Primera División' price={1999} />
<AdditionalSubscription title='Manchester United' price={999} />
<AdditionalSubscription title='Василий Березуцкий' price={299} />
<ArrowRight />
</PricesBlock>
</SubscriptionsBlock>
<ButtonsBlock>
<TotalInfoBlock>
<TotalInfoText>Базовая + 2 дополнительно <T9n t='subscription_for' />
<TotalPriceAmmount>6997</TotalPriceAmmount>
<TotalPriceDetails> / МЕС</TotalPriceDetails>
</TotalInfoText>
</TotalInfoBlock>
<ButtonSolid>
<T9n t='subscription_done' />
</ButtonSolid>
</ButtonsBlock>
</Fragment>
)
}