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

refactor(961): removed selected subscription confirmation step (#344)

Browse Source
keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan 5 years ago committed by GitHub
parent a604f767da
commit 85a5be7e79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 11 additions and 73 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. 49
      src/features/BuyMatchPopup/components/ConfirmationStep/index.tsx
  2. 5
      src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
  3. 1
      src/features/BuyMatchPopup/components/Subscriptions/index.tsx
  4. 8
      src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx
  5. 10
      src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx
  6. 2
      src/features/BuyMatchPopup/index.tsx
  7. 4
      src/features/BuyMatchPopup/store/hooks/index.tsx
  8. 4
      src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
  9. 1
      src/features/BuyMatchPopup/types.tsx

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

@ -1,49 +0,0 @@
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,
selectedSubscription,
subscribeToMatches,
} = 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={selectedSubscription ? [selectedSubscription] : []}
/>
</Body>
<Footer marginTop={35}>
<Button onClick={subscribeToMatches}>
<T9n t='buy_for' /> {selectedSubscription?.price} {currencySymbols.ruble}
</Button>
</Footer>
</Wrapper>
)
}

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

@ -9,7 +9,6 @@ import {
} from 'features/PopupComponents' } from 'features/PopupComponents'
import { Name } from 'features/Name' import { Name } from 'features/Name'
import { Steps } from '../../types'
import { useBuyMatchPopupStore } from '../../store' import { useBuyMatchPopupStore } from '../../store'
import { SelectedCard } from '../SelectedCard' import { SelectedCard } from '../SelectedCard'
import { Subscriptions } from '../Subscriptions' import { Subscriptions } from '../Subscriptions'
@ -23,9 +22,9 @@ import {
export const SubscriptionSelectionStep = () => { export const SubscriptionSelectionStep = () => {
const { const {
close, close,
goTo,
match, match,
selectedSubscription, selectedSubscription,
subscribeToMatch,
} = useBuyMatchPopupStore() } = useBuyMatchPopupStore()
if (!match) return null if (!match) return null
@ -49,7 +48,7 @@ export const SubscriptionSelectionStep = () => {
<Footer> <Footer>
<Button <Button
disabled={!selectedSubscription} disabled={!selectedSubscription}
onClick={(e) => goTo(Steps.Confirmation, e)} onClick={subscribeToMatch}
> >
<T9n t='buy_subscription' /> <T9n t='buy_subscription' />
</Button> </Button>

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

@ -39,7 +39,6 @@ export const Subscriptions = () => {
<T9n t='choose_subscription' /> <T9n t='choose_subscription' />
</Title> </Title>
<SubscriptionsList <SubscriptionsList
height={364}
subscriptions={subscriptions} subscriptions={subscriptions}
selectedSubscription={selectedSubscription} selectedSubscription={selectedSubscription}
onSelect={onSubscriptionSelect} onSelect={onSubscriptionSelect}

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

@ -12,19 +12,17 @@ import {
} from './styled' } from './styled'
type Props = { type Props = {
height?: number, onSelect: (subscription: MatchSubscription) => void,
onSelect?: (subscription: MatchSubscription) => void, selectedSubscription: MatchSubscription | null,
selectedSubscription?: MatchSubscription | null,
subscriptions: MatchSubscriptions, subscriptions: MatchSubscriptions,
} }
export const SubscriptionsList = ({ export const SubscriptionsList = ({
height,
onSelect, onSelect,
selectedSubscription, selectedSubscription,
subscriptions, subscriptions,
}: Props) => ( }: Props) => (
<List height={height}> <List>
{ {
map(subscriptions, (subscription) => ( map(subscriptions, (subscription) => (
<Item <Item

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

@ -4,14 +4,8 @@ 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'
type ListProps = { export const List = styled.ul`
height?: number, height: 364px;
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;

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

@ -1,6 +1,5 @@
import { useBuyMatchPopupStore } from './store' import { useBuyMatchPopupStore } from './store'
import { SubscriptionSelectionStep } from './components/SubscriptionSelectionStep' import { SubscriptionSelectionStep } from './components/SubscriptionSelectionStep'
import { ConfirmationStep } from './components/ConfirmationStep'
import { SuccessStep } from './components/SuccessStep' import { SuccessStep } from './components/SuccessStep'
import { ErrorStep } from './components/ErrorStep' import { ErrorStep } from './components/ErrorStep'
import { Modal } from './styled' import { Modal } from './styled'
@ -14,7 +13,6 @@ const Empty = () => null
const components = { const components = {
[Steps.Subscriptions]: SubscriptionSelectionStep, [Steps.Subscriptions]: SubscriptionSelectionStep,
[Steps.CardSelection]: Empty, [Steps.CardSelection]: Empty,
[Steps.Confirmation]: ConfirmationStep,
[Steps.Success]: SuccessStep, [Steps.Success]: SuccessStep,
[Steps.Error]: ErrorStep, [Steps.Error]: ErrorStep,
} }

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

@ -48,7 +48,7 @@ export const useBuyMatchPopup = () => {
resetSubscriptions, resetSubscriptions,
selectedPeriod, selectedPeriod,
selectedSubscription, selectedSubscription,
subscribeToMatches, subscribeToMatch,
subscriptions, subscriptions,
} = useSubscriptions(goTo) } = useSubscriptions(goTo)
@ -75,7 +75,7 @@ export const useBuyMatchPopup = () => {
open: openPopup, open: openPopup,
selectedPeriod, selectedPeriod,
selectedSubscription, selectedSubscription,
subscribeToMatches, subscribeToMatch,
subscriptions, subscriptions,
} }
} }

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

@ -43,7 +43,7 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
setSubscriptionsList([]) setSubscriptionsList([])
}, []) }, [])
const subscribeToMatches = (e: MouseEvent) => { const subscribeToMatch = (e: MouseEvent) => {
e.stopPropagation() e.stopPropagation()
if (selectedSubscription) { if (selectedSubscription) {
buyMatchSubscription(selectedSubscription) buyMatchSubscription(selectedSubscription)
@ -59,7 +59,7 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
resetSubscriptions, resetSubscriptions,
selectedPeriod, selectedPeriod,
selectedSubscription, selectedSubscription,
subscribeToMatches, subscribeToMatch,
subscriptions, subscriptions,
} }
} }

1
src/features/BuyMatchPopup/types.tsx
Unescape View File

@ -1,6 +1,5 @@
export enum Steps { export enum Steps {
CardSelection = 'CardSelection', CardSelection = 'CardSelection',
Confirmation = 'Confirmation',
Error = 'Error', Error = 'Error',
Subscriptions = 'Subscriptions', Subscriptions = 'Subscriptions',
Success = 'Success', Success = 'Success',

Write Preview
Loading…
Cancel
Save