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

feat(735): added subscription confirmation and resulting steps (#315)

Browse Source
keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan 5 years ago committed by GitHub
parent 3ecbd9020f
commit 3da64ed59a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 328 additions and 108 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. 6
      src/config/lexics/indexLexics.tsx
  2. 48
      src/features/BuyMatchPopup/components/ConfirmationStep/index.tsx
  3. 34
      src/features/BuyMatchPopup/components/ErrorStep/index.tsx
  4. 40
      src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
  5. 17
      src/features/BuyMatchPopup/components/Subscriptions/index.tsx
  6. 72
      src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx
  7. 10
      src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx
  8. 36
      src/features/BuyMatchPopup/components/SuccessStep/index.tsx
  9. 16
      src/features/BuyMatchPopup/index.tsx
  10. 39
      src/features/BuyMatchPopup/store/hooks/index.tsx
  11. 50
      src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
  12. 43
      src/features/BuyMatchPopup/styled.tsx
  13. 4
      src/features/PaymentPeriodTabs/index.tsx
  14. 18
      src/requests/buyMatchSubscriptions.tsx
  15. 2
      src/requests/getMatchSubscriptions.tsx
  16. 1
      src/requests/index.tsx

6
src/config/lexics/indexLexics.tsx
Unescape View File

@ -21,13 +21,19 @@ const matchPopupLexics = {
} }
const buyMatchPopupLexics = { const buyMatchPopupLexics = {
buy_for: 14095,
buy_subscription: 13565, buy_subscription: 13565,
change_card: 13564, change_card: 13564,
choose_subscription: 13563, choose_subscription: 13563,
error_not_enough_balance: 14098,
for_month: 13561, for_month: 13561,
for_year: 13562, for_year: 13562,
payment: 14096,
payment_confirmation: 14094,
per_month: 13573, per_month: 13573,
per_year: 13574, per_year: 13574,
subscription_done: 2668,
success_subscription: 14097,
} }
export const indexLexics = { export const indexLexics = {

48
src/features/BuyMatchPopup/components/ConfirmationStep/index.tsx
Unescape View File

@ -0,0 +1,48 @@
import { currencySymbols } from 'config'
import { T9n } from 'features/T9n'
import {
CloseButton,
Header,
HeaderActions,
HeaderTitle,
} from 'features/PopupComponents'
import { useBuyMatchPopupStore } from '../../store'
import { SubscriptionsList } from '../SubscriptionsList'
import {
Wrapper,
Footer,
Button,
Body,
} from '../../styled'
export const ConfirmationStep = () => {
const {
close,
selectedSubscriptions,
subscribeToMatches,
totalPrice,
} = useBuyMatchPopupStore()
return (
<Wrapper>
<Header height={50}>
<HeaderTitle>
<T9n t='payment_confirmation' />
</HeaderTitle>
<HeaderActions position='right'>
<CloseButton onClick={close} />
</HeaderActions>
</Header>
<Body marginTop={25}>
<SubscriptionsList subscriptions={selectedSubscriptions} />
</Body>
<Footer marginTop={35}>
<Button onClick={subscribeToMatches}>
<T9n t='buy_for' /> {totalPrice} {currencySymbols.ruble}
</Button>
</Footer>
</Wrapper>
)
}

34
src/features/BuyMatchPopup/components/ErrorStep/index.tsx
Unescape View File

@ -0,0 +1,34 @@
import { T9n } from 'features/T9n'
import {
Header,
HeaderTitle,
HeaderActions,
CloseButton,
} from 'features/PopupComponents'
import { useBuyMatchPopupStore } from '../../store'
import {
Wrapper,
Body,
ResultText,
} from '../../styled'
export const ErrorStep = () => {
const { close } = useBuyMatchPopupStore()
return (
<Wrapper width={517}>
<Header height={50}>
<HeaderTitle>
<T9n t='payment' />
</HeaderTitle>
<HeaderActions position='right'>
<CloseButton onClick={close} />
</HeaderActions>
</Header>
<Body marginTop={30} marginBottom={35}>
<ResultText t='error_not_enough_balance' />
</Body>
</Wrapper>
)
}

40
src/features/BuyMatchPopup/components/MatchSubscriptions/index.tsx → src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
Unescape View File

@ -1,11 +1,6 @@
import styled from 'styled-components/macro'
import isEmpty from 'lodash/isEmpty'
import { MDASH } from 'config' import { MDASH } from 'config'
import { T9n } from 'features/T9n' import { T9n } from 'features/T9n'
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
import { import {
CloseButton, CloseButton,
Header, Header,
@ -15,27 +10,21 @@ import {
import { Name } from 'features/Name' import { Name } from 'features/Name'
import { Steps } from 'features/BuyMatchPopup/types' import { Steps } from 'features/BuyMatchPopup/types'
import { useBuyMatchPopupStore } from '../../store'
import { SelectedCard } from '../SelectedCard' import { SelectedCard } from '../SelectedCard'
import { Subscriptions } from '../Subscriptions' import { Subscriptions } from '../Subscriptions'
import { Button } from '../../styled' import {
Wrapper,
const Wrapper = styled.div` Body,
width: 870px; Footer,
height: 695px; Button,
` } from '../../styled'
const Center = styled.div`
width: 100%;
display: flex;
justify-content: center;
`
export const MatchSubscriptionsStep = () => { export const SubscriptionSelectionStep = () => {
const { const {
close, close,
goTo, goTo,
match, match,
selectedSubscriptions,
} = useBuyMatchPopupStore() } = useBuyMatchPopupStore()
if (!match) return null if (!match) return null
@ -52,16 +41,17 @@ export const MatchSubscriptionsStep = () => {
<CloseButton onClick={close} /> <CloseButton onClick={close} />
</HeaderActions> </HeaderActions>
</Header> </Header>
<Subscriptions /> <Body>
<SelectedCard /> <Subscriptions />
<Center> <SelectedCard />
</Body>
<Footer>
<Button <Button
disabled={isEmpty(selectedSubscriptions)} onClick={(e) => goTo(Steps.Confirmation, e)}
onClick={(e) => goTo(e, Steps.Confirmation)}
> >
<T9n t='buy_subscription' /> <T9n t='buy_subscription' />
</Button> </Button>
</Center> </Footer>
</Wrapper> </Wrapper>
) )
} }

17
src/features/BuyMatchPopup/components/Subscriptions/index.tsx
Unescape View File

@ -1,9 +1,9 @@
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { T9n } from 'features/T9n' import { T9n } from 'features/T9n'
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
import { PaymentPeriodTabs } from 'features/PaymentPeriodTabs' import { PaymentPeriodTabs } from 'features/PaymentPeriodTabs'
import { useBuyMatchPopupStore } from '../../store'
import { SubscriptionsList } from '../SubscriptionsList' import { SubscriptionsList } from '../SubscriptionsList'
const Wrapper = styled.div` const Wrapper = styled.div`
@ -22,7 +22,13 @@ const Title = styled.span`
` `
export const Subscriptions = () => { export const Subscriptions = () => {
const { onPeriodSelect, selectedPeriod } = useBuyMatchPopupStore() const {
onPeriodSelect,
onSubscriptionSelect,
selectedPeriod,
selectedSubscriptions,
subscriptions,
} = useBuyMatchPopupStore()
return ( return (
<Wrapper> <Wrapper>
<PaymentPeriodTabs <PaymentPeriodTabs
@ -32,7 +38,12 @@ export const Subscriptions = () => {
<Title> <Title>
<T9n t='choose_subscription' /> <T9n t='choose_subscription' />
</Title> </Title>
<SubscriptionsList /> <SubscriptionsList
height={364}
subscriptions={subscriptions}
selectedSubscriptions={selectedSubscriptions}
onSelect={onSubscriptionSelect}
/>
</Wrapper> </Wrapper>
) )
} }

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

@ -1,7 +1,7 @@
import map from 'lodash/map' import map from 'lodash/map'
import includes from 'lodash/includes' import includes from 'lodash/includes'
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store' import type { MatchSubscriptions, MatchSubscription } from 'requests'
import { import {
List, List,
@ -12,41 +12,39 @@ import {
Price, Price,
} from './styled' } from './styled'
export const SubscriptionsList = () => { type Props = {
const { height?: number,
onSubscriptionSelect, onSelect?: (subscription: MatchSubscription) => void,
selectedSubscriptions, selectedSubscriptions?: MatchSubscriptions,
subscriptions, subscriptions: MatchSubscriptions,
} = useBuyMatchPopupStore() }
return ( export const SubscriptionsList = ({
<List> height,
{ onSelect,
map(subscriptions, ({ selectedSubscriptions,
description, subscriptions,
header, }: Props) => (
price, <List height={height}>
subscription_id, {
type, map(subscriptions, (subscription) => (
}) => ( <Item
<Item key={subscription.subscription_id}
key={subscription_id} onClick={() => onSelect?.(subscription)}
onClick={() => onSubscriptionSelect(subscription_id)} active={includes(selectedSubscriptions, subscription)}
active={includes(selectedSubscriptions, subscription_id)} >
> <InfoWrapper>
<InfoWrapper> <Header>
<Header> {subscription.header}
{header} </Header>
</Header> <Description>
<Description> {subscription.description}
{description} </Description>
</Description> </InfoWrapper>
</InfoWrapper>
<Price amount={price} perPeriod={`per_${type}`} /> <Price amount={subscription.price} perPeriod={`per_${subscription.type}`} />
</Item> </Item>
)) ))
} }
</List> </List>
) )
}

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

@ -4,8 +4,14 @@ import { popupScrollbarStyles } from 'features/PopupComponents'
import { Price as BasePrice } from 'features/Price' import { Price as BasePrice } from 'features/Price'
import { PriceAmount, PriceDetails } from 'features/Price/styled' import { PriceAmount, PriceDetails } from 'features/Price/styled'
export const List = styled.ul` type ListProps = {
height: 364px; height?: number,
marginTop?: number,
}
export const List = styled.ul<ListProps>`
max-height: 364px;
height: ${({ height }) => (height ? `${height}px` : 'auto')};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;

36
src/features/BuyMatchPopup/components/SuccessStep/index.tsx
Unescape View File

@ -0,0 +1,36 @@
import { T9n } from 'features/T9n'
import {
Header,
HeaderTitle,
} from 'features/PopupComponents'
import { useBuyMatchPopupStore } from '../../store'
import {
Wrapper,
Body,
Footer,
Button,
ResultText,
} from '../../styled'
export const SuccessStep = () => {
const { close } = useBuyMatchPopupStore()
return (
<Wrapper width={517}>
<Header height={50}>
<HeaderTitle>
<T9n t='payment' />
</HeaderTitle>
</Header>
<Body marginTop={30} marginBottom={40}>
<ResultText t='success_subscription' />
</Body>
<Footer>
<Button onClick={close}>
<T9n t='subscription_done' />
</Button>
</Footer>
</Wrapper>
)
}

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

@ -1,6 +1,8 @@
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup' import { useBuyMatchPopupStore } from './store'
import { SubscriptionSelectionStep } from './components/SubscriptionSelectionStep'
import { MatchSubscriptionsStep } from './components/MatchSubscriptions' import { ConfirmationStep } from './components/ConfirmationStep'
import { SuccessStep } from './components/SuccessStep'
import { ErrorStep } from './components/ErrorStep'
import { Modal } from './styled' import { Modal } from './styled'
import { Steps } from './types' import { Steps } from './types'
@ -9,11 +11,11 @@ export * from './store'
const Empty = () => null const Empty = () => null
const components = { const components = {
[Steps.Subscriptions]: MatchSubscriptionsStep, [Steps.Subscriptions]: SubscriptionSelectionStep,
[Steps.CardSelection]: Empty, [Steps.CardSelection]: Empty,
[Steps.Confirmation]: Empty, [Steps.Confirmation]: ConfirmationStep,
[Steps.Success]: Empty, [Steps.Success]: SuccessStep,
[Steps.Error]: Empty, [Steps.Error]: ErrorStep,
} }
export const BuyMatchPopup = () => { export const BuyMatchPopup = () => {

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

@ -1,5 +1,9 @@
import type { MouseEvent } from 'react' import type { MouseEvent } from 'react'
import { useCallback, useState } from 'react' import {
useCallback,
useState,
useEffect,
} from 'react'
import last from 'lodash/last' import last from 'lodash/last'
@ -17,18 +21,10 @@ type MatchData = Pick<Match, (
export const useBuyMatchPopup = () => { export const useBuyMatchPopup = () => {
const [steps, setSteps] = useState<Array<Steps>>([]) const [steps, setSteps] = useState<Array<Steps>>([])
const [match, setMatch] = useState<MatchData>(null) const [match, setMatch] = useState<MatchData>(null)
const {
onPeriodSelect,
onSubscriptionSelect,
resetSubscriptions,
selectedPeriod,
selectedSubscriptions,
subscriptions,
} = useSubscriptions()
const goTo = useCallback( const goTo = useCallback(
(e: MouseEvent<HTMLButtonElement>, step: Steps) => setSteps((state) => { (step: Steps, e?: MouseEvent<HTMLButtonElement>) => setSteps((state) => {
e.stopPropagation() e?.stopPropagation()
return [...state, step] return [...state, step]
}), }),
[], [],
@ -47,9 +43,25 @@ export const useBuyMatchPopup = () => {
const closePopup = () => { const closePopup = () => {
setMatch(null) setMatch(null)
setSteps([]) setSteps([])
resetSubscriptions()
} }
const {
fetchSubscriptions,
onPeriodSelect,
onSubscriptionSelect,
selectedPeriod,
selectedSubscriptions,
subscribeToMatches,
subscriptions,
totalPrice,
} = useSubscriptions(goTo)
useEffect(() => {
if (match) {
fetchSubscriptions()
}
}, [match, fetchSubscriptions])
return { return {
close: closePopup, close: closePopup,
currentStep: last(steps), currentStep: last(steps),
@ -59,9 +71,10 @@ export const useBuyMatchPopup = () => {
onPeriodSelect, onPeriodSelect,
onSubscriptionSelect, onSubscriptionSelect,
open: openPopup, open: openPopup,
resetSubscriptions,
selectedPeriod, selectedPeriod,
selectedSubscriptions, selectedSubscriptions,
subscribeToMatches,
subscriptions, subscriptions,
totalPrice,
} }
} }

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

@ -1,22 +1,30 @@
import type { MouseEvent } from 'react'
import { import {
useMemo, useMemo,
useState, useState,
useEffect,
useCallback, useCallback,
} from 'react' } from 'react'
import sumBy from 'lodash/sumBy'
import filter from 'lodash/filter' import filter from 'lodash/filter'
import without from 'lodash/without'
import includes from 'lodash/includes' import includes from 'lodash/includes'
import type { MatchSubscriptions } from 'requests' import type { MatchSubscriptions, MatchSubscription } from 'requests'
import { SubscriptionType, getMatchSubscriptions } from 'requests' import {
SubscriptionType,
getMatchSubscriptions,
buyMatchSubscriptions,
} from 'requests'
import { Steps } from 'features/BuyMatchPopup/types'
export const useSubscriptions = () => { export const useSubscriptions = (goTo: (step: Steps) => void) => {
const [selectedPeriod, setSelectedPeriod] = useState(SubscriptionType.Month) const [selectedPeriod, setSelectedPeriod] = useState(SubscriptionType.Month)
const [subscriptionsList, setSubscriptionsList] = useState<MatchSubscriptions>([]) const [subscriptionsList, setSubscriptionsList] = useState<MatchSubscriptions>([])
const [selectedSubscriptions, setSelectedSubscriptions] = useState<Array<number>>([]) const [selectedSubscriptions, setSelectedSubscriptions] = useState<MatchSubscriptions>([])
useEffect(() => { const fetchSubscriptions = useCallback(() => {
getMatchSubscriptions().then(setSubscriptionsList) getMatchSubscriptions().then(setSubscriptionsList)
}, []) }, [])
@ -25,16 +33,16 @@ export const useSubscriptions = () => {
[selectedPeriod, subscriptionsList], [selectedPeriod, subscriptionsList],
) )
const onSubscriptionSelect = (id: number) => { const totalPrice = useMemo(
if (includes(selectedSubscriptions, id)) { () => sumBy(selectedSubscriptions, (subscription) => subscription.price),
const newSubscriptions = filter( [selectedSubscriptions],
selectedSubscriptions, )
(subscriptionId) => subscriptionId !== id,
) const onSubscriptionSelect = (selected: MatchSubscription) => {
setSelectedSubscriptions(newSubscriptions) const newSubscriptions = includes(selectedSubscriptions, selected)
} else { ? without(selectedSubscriptions, selected)
setSelectedSubscriptions([...selectedSubscriptions, id]) : [...selectedSubscriptions, selected]
} setSelectedSubscriptions(newSubscriptions)
} }
const resetSubscriptions = useCallback(() => { const resetSubscriptions = useCallback(() => {
@ -42,12 +50,22 @@ export const useSubscriptions = () => {
setSelectedSubscriptions([]) setSelectedSubscriptions([])
}, []) }, [])
const subscribeToMatches = (e: MouseEvent) => {
e.stopPropagation()
buyMatchSubscriptions()
.then(() => goTo(Steps.Success))
.catch(() => goTo(Steps.Error))
}
return { return {
fetchSubscriptions,
onPeriodSelect: setSelectedPeriod, onPeriodSelect: setSelectedPeriod,
onSubscriptionSelect, onSubscriptionSelect,
resetSubscriptions, resetSubscriptions,
selectedPeriod, selectedPeriod,
selectedSubscriptions, selectedSubscriptions,
subscribeToMatches,
subscriptions, subscriptions,
totalPrice,
} }
} }

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

@ -5,13 +5,14 @@ import { devices } from 'config'
import { Modal as BaseModal } from 'features/Modal' import { Modal as BaseModal } from 'features/Modal'
import { ModalWindow } from 'features/Modal/styled' import { ModalWindow } from 'features/Modal/styled'
import { ButtonSolid } from 'features/Common' import { ButtonSolid } from 'features/Common'
import { T9n } from 'features/T9n'
export const Modal = styled(BaseModal)` export const Modal = styled(BaseModal)`
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
${ModalWindow} { ${ModalWindow} {
min-width: 517px; min-width: 517px;
min-height: 310px; min-height: auto;
padding: 20px 0; padding: 20px 0;
background-color: #3F3F3F; background-color: #3F3F3F;
border-radius: 5px; border-radius: 5px;
@ -37,3 +38,43 @@ export const Button = styled(ButtonSolid)`
opacity: 0.5; opacity: 0.5;
} }
` `
type WrapperProps = {
width?: number,
}
export const Wrapper = styled.div<WrapperProps>`
width: ${({ width }) => (width ? `${width}px` : '870px')};
`
type BodyProps = {
marginBottom?: number,
marginTop?: number,
}
export const Body = styled.div<BodyProps>`
margin-top: ${({ marginTop }) => (marginTop ? `${marginTop}px` : '')};
margin-bottom: ${({ marginBottom }) => (marginBottom ? `${marginBottom}px` : '')};
`
type FooterProps = {
marginTop?: number,
}
export const Footer = styled.div<FooterProps>`
width: 100%;
display: flex;
justify-content: center;
margin-top: ${({ marginTop }) => (marginTop ? `${marginTop}px` : '')};
margin-bottom: 15px;
`
export const ResultText = styled(T9n)`
width: 100%;
display: inline-block;
text-align: center;
font-weight: normal;
font-size: 20px;
line-height: 27px;
`

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

@ -14,9 +14,7 @@ type ItemProps = {
active?: boolean, active?: boolean,
} }
export const Item = styled.li.attrs(() => ({ export const Item = styled.li<ItemProps>`
tabIndex: 0,
}))<ItemProps>`
width: 50%; width: 50%;
font-size: 20px; font-size: 20px;
line-height: 42px; line-height: 42px;

18
src/requests/buyMatchSubscriptions.tsx
Unescape View File

@ -0,0 +1,18 @@
import { API_ROOT } from 'config'
import { callApi } from 'helpers'
export const buyMatchSubscriptions = () => {
const config = {
body: {
_p_c_subscription_plan: 1,
_p_is_scheduled: 0,
},
}
callApi({
config,
url: `${API_ROOT}/account/purchase`,
})
return Promise.resolve()
}

2
src/requests/getMatchSubscriptions.tsx
Unescape View File

@ -6,7 +6,7 @@ export enum SubscriptionType {
Year = 'year', Year = 'year',
} }
type MatchSubscription = { export type MatchSubscription = {
description: string, description: string,
header: string, header: string,
price: number, price: number,

1
src/requests/index.tsx
Unescape View File

@ -25,3 +25,4 @@ export * from './getSportActions'
export * from './getMatchPlaylists' export * from './getMatchPlaylists'
export * from './getPlayerPlaylists' export * from './getPlayerPlaylists'
export * from './getMatchSubscriptions' export * from './getMatchSubscriptions'
export * from './buyMatchSubscriptions'

Write Preview
Loading…
Cancel
Save