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

feat(ott-1726): choise subscriptions fix (#568)

Browse Source
keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
PolyakovaM 4 years ago committed by Mirlan
parent abc6e56d4a
commit 848adcca39
7 changed files with 35 additions and 29 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. 23
      src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
  2. 5
      src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
  3. 3
      src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx
  4. 3
      src/features/BuyMatchPopup/store/hooks/index.tsx
  5. 11
      src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
  6. 8
      src/features/BuyMatchPopup/styled.tsx
  7. 11
      src/features/PaymentPeriodTabs/index.tsx

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

@ -3,6 +3,7 @@ import { useState } from 'react'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import map from 'lodash/map' import map from 'lodash/map'
import isNull from 'lodash/isNull'
import { MDASH } from 'config' import { MDASH } from 'config'
import { SelectSubscriptionData } from 'requests' import { SelectSubscriptionData } from 'requests'
@ -33,7 +34,15 @@ import {
export const ChooseSub = styled.div` export const ChooseSub = styled.div`
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
margin: 30px 0; margin: 35px 0 17px;
`
export const ChooseSubItem = styled(Item)`
min-height: auto;
`
export const ChooseSubList = styled(List)`
height: auto;
` `
export const SelectSubscriptionStep = () => { export const SelectSubscriptionStep = () => {
@ -57,7 +66,7 @@ export const SelectSubscriptionStep = () => {
...subscription.packages, ...subscription.packages,
season: initialSubscription.season, season: initialSubscription.season,
}) })
setActive(index) index === active ? setActive(null) : setActive(index)
setSelectSubName(subscription.lexic) setSelectSubName(subscription.lexic)
} }
@ -77,10 +86,10 @@ export const SelectSubscriptionStep = () => {
</HeaderActions> </HeaderActions>
</Header> </Header>
<Body marginTop={15}> <Body marginTop={15}>
<List> <ChooseSubList>
{ {
map(initialSubscription.data, (subscription, index) => ( map(initialSubscription.data, (subscription, index) => (
<Item <ChooseSubItem
key={subscription.id} key={subscription.id}
onClick={() => onItemClick(subscription, index)} onClick={() => onItemClick(subscription, index)}
active={active === index} active={active === index}
@ -96,17 +105,17 @@ export const SelectSubscriptionStep = () => {
<T9n t={subscription.lexic3} /> <T9n t={subscription.lexic3} />
</Description> </Description>
</InfoWrapper> </InfoWrapper>
</Item> </ChooseSubItem>
)) ))
} }
</List> </ChooseSubList>
</Body> </Body>
<Footer> <Footer>
{loader {loader
? <ArrowLoader width='204px' disabled /> ? <ArrowLoader width='204px' disabled />
: ( : (
<Button <Button
disabled={!selectedSubscriptionPackage} disabled={!selectedSubscriptionPackage || isNull(active)}
onClick={onChooseSub} onClick={onChooseSub}
> >
<T9n t='next_choose' /> <T9n t='next_choose' />

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

@ -54,8 +54,7 @@ export const SubscriptionSelectionStep = () => {
return ( return (
<Wrapper> <Wrapper>
<Header> <Header>
{selectedSubStep {selectedSubStep && (
&& (
<HeaderActions position='left'> <HeaderActions position='left'>
<ButtonPrevious <ButtonPrevious
onClick={getSub} onClick={getSub}
@ -78,7 +77,7 @@ export const SubscriptionSelectionStep = () => {
<CloseButton onClick={close} /> <CloseButton onClick={close} />
</HeaderActions> </HeaderActions>
</Header> </Header>
<Body marginTop={15}> <Body marginTop={20}>
<Subscriptions /> <Subscriptions />
<SelectedCard /> <SelectedCard />
</Body> </Body>

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

@ -15,7 +15,7 @@ export const List = styled.ul`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
margin-top: 15px; margin-top: 25px;
padding: 0 40px; padding: 0 40px;
${popupScrollbarStyles} ${popupScrollbarStyles}
@ -63,7 +63,6 @@ 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;

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

@ -10,6 +10,7 @@ import type { PaymentIntent, StripeError } from '@stripe/stripe-js'
import last from 'lodash/last' import last from 'lodash/last'
import isEmpty from 'lodash/isEmpty' import isEmpty from 'lodash/isEmpty'
import size from 'lodash/size'
import { PAGES, ProfileTypes } from 'config' import { PAGES, ProfileTypes } from 'config'
@ -97,7 +98,7 @@ export const useBuyMatchPopup = () => {
useEffect(() => { useEffect(() => {
if (!isEmpty(initialSubscription)) { if (!isEmpty(initialSubscription)) {
!initialSubscription?.data !initialSubscription?.data || size(initialSubscription?.data) === 1
? setSteps([Steps.Subscriptions]) ? setSteps([Steps.Subscriptions])
: setSteps([Steps.SelectSubscription]) : setSteps([Steps.SelectSubscription])
} }

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

@ -7,6 +7,7 @@ import {
import find from 'lodash/find' 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 size from 'lodash/size'
import { getSubscriptions, SubscriptionsByPeriods } from 'requests' import { getSubscriptions, SubscriptionsByPeriods } from 'requests'
@ -43,10 +44,16 @@ export const useSubscriptions = () => {
const fetchSubscriptions = useCallback(async (match: Match) => { const fetchSubscriptions = useCallback(async (match: Match) => {
const subscriptions = await getSubscriptions(match.sportType, match.id) const subscriptions = await getSubscriptions(match.sportType, match.id)
if (!subscriptions.data) { 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({ const convertedSubscriptions = transformSubsciptions({
match, match,
subscriptions, subscriptions: subscriptionData,
suffix, suffix,
}) })
setInitialSubscription(subscriptions) setInitialSubscription(subscriptions)

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

@ -84,7 +84,7 @@ export const Wrapper = styled.div<WrapperProps>`
position: relative; position: relative;
height: ${({ height }) => (height ? `${height}px` : 'auto')}; height: ${({ height }) => (height ? `${height}px` : 'auto')};
width: ${({ width }) => (width ? `${width}px` : '830px')}; width: ${({ width }) => (width ? `${width}px` : '830px')};
padding: 20px 0 20px; padding: 40px 0;
@media (max-width: 750px){ @media (max-width: 750px){
width: 100%; width: 100%;
@ -152,10 +152,6 @@ export const Footer = styled.div<FooterProps>`
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 40px; margin-top: 40px;
@media (max-width: 1370px) {
margin-top: 0px;
}
${isMobileDevice ${isMobileDevice
? css` ? css`
@media screen and (orientation: landscape){ @media screen and (orientation: landscape){
@ -186,7 +182,7 @@ export const SmallButton = styled(Button)`
` `
export const ButtonPrevious = styled(Arrow)` export const ButtonPrevious = styled(Arrow)`
top: 30px; top: 45px;
left: 30px; left: 30px;
cursor: pointer; cursor: pointer;
` `

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

@ -12,9 +12,8 @@ import { getCorrectPaymentTabs } from './helpers'
const List = styled.ul` const List = styled.ul`
display: flex; display: flex;
justify-content: center;
min-width: 395px; min-width: 395px;
width: 70%; justify-content: space-between;
${isMobileDevice ${isMobileDevice
? css` ? css`
min-width: 90%; min-width: 90%;
@ -36,7 +35,6 @@ type ItemProps = {
const Item = styled.li<ItemProps>` const Item = styled.li<ItemProps>`
position: relative; position: relative;
width: 33.33%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
line-height: 47px; line-height: 47px;
@ -53,13 +51,10 @@ const Item = styled.li<ItemProps>`
::after { ::after {
position: absolute; position: absolute;
content: ''; content: '';
bottom: 9px; bottom: 0px;
width: 100%; width: 130px;
height: 3px; height: 3px;
background-color: #fff; background-color: #fff;
@media screen and (orientation: landscape){
bottom: 6px;
}
} }
` `
: '' : ''

Write Preview
Loading…
Cancel
Save