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

5 years ago · 85a5be7e79
parent a604f767da
commit 85a5be7e79
9 changed files with 11 additions and 73 deletions
--- a/src/features/BuyMatchPopup/components/ConfirmationStep/index.tsx
+++ b/src/features/BuyMatchPopup/components/ConfirmationStep/index.tsx
@ -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>
-  )
-}
--- a/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
+++ b/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
@ -9,7 +9,6 @@ import {
 } from 'features/PopupComponents'
 import { Name } from 'features/Name'

-import { Steps } from '../../types'
 import { useBuyMatchPopupStore } from '../../store'
 import { SelectedCard } from '../SelectedCard'
 import { Subscriptions } from '../Subscriptions'
@ -23,9 +22,9 @@ import {
 export const SubscriptionSelectionStep = () => {
  const {
    close,
-    goTo,
    match,
    selectedSubscription,
+    subscribeToMatch,
  } = useBuyMatchPopupStore()

  if (!match) return null
@ -49,7 +48,7 @@ export const SubscriptionSelectionStep = () => {
      <Footer>
        <Button
          disabled={!selectedSubscription}
-          onClick={(e) => goTo(Steps.Confirmation, e)}
+          onClick={subscribeToMatch}
        >
          <T9n t='buy_subscription' />
        </Button>
--- a/src/features/BuyMatchPopup/components/Subscriptions/index.tsx
+++ b/src/features/BuyMatchPopup/components/Subscriptions/index.tsx
@ -39,7 +39,6 @@ export const Subscriptions = () => {
        <T9n t='choose_subscription' />
      </Title>
      <SubscriptionsList
-        height={364}
        subscriptions={subscriptions}
        selectedSubscription={selectedSubscription}
        onSelect={onSubscriptionSelect}
--- a/src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx
+++ b/src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx
@ -12,19 +12,17 @@ import {
 } from './styled'

 type Props = {
-  height?: number,
-  onSelect?: (subscription: MatchSubscription) => void,
-  selectedSubscription?: MatchSubscription | null,
+  onSelect: (subscription: MatchSubscription) => void,
+  selectedSubscription: MatchSubscription | null,
  subscriptions: MatchSubscriptions,
 }

 export const SubscriptionsList = ({
-  height,
  onSelect,
  selectedSubscription,
  subscriptions,
 }: Props) => (
-  <List height={height}>
+  <List>
    {
      map(subscriptions, (subscription) => (
        <Item
--- a/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx
+++ b/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx
@ -4,14 +4,8 @@ import { popupScrollbarStyles } from 'features/PopupComponents'
 import { Price as BasePrice } from 'features/Price'
 import { PriceAmount, PriceDetails } from 'features/Price/styled'

-type ListProps = {
-  height?: number,
-  marginTop?: number,
-}
-
-export const List = styled.ul<ListProps>`
-  max-height: 364px;
-  height: ${({ height }) => (height ? `${height}px` : 'auto')};
+export const List = styled.ul`
+  height: 364px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
--- a/src/features/BuyMatchPopup/index.tsx
+++ b/src/features/BuyMatchPopup/index.tsx
@ -1,6 +1,5 @@
 import { useBuyMatchPopupStore } from './store'
 import { SubscriptionSelectionStep } from './components/SubscriptionSelectionStep'
-import { ConfirmationStep } from './components/ConfirmationStep'
 import { SuccessStep } from './components/SuccessStep'
 import { ErrorStep } from './components/ErrorStep'
 import { Modal } from './styled'
@ -14,7 +13,6 @@ const Empty = () => null
 const components = {
  [Steps.Subscriptions]: SubscriptionSelectionStep,
  [Steps.CardSelection]: Empty,
-  [Steps.Confirmation]: ConfirmationStep,
  [Steps.Success]: SuccessStep,
  [Steps.Error]: ErrorStep,
 }
--- a/src/features/BuyMatchPopup/store/hooks/index.tsx
+++ b/src/features/BuyMatchPopup/store/hooks/index.tsx
@ -48,7 +48,7 @@ export const useBuyMatchPopup = () => {
    resetSubscriptions,
    selectedPeriod,
    selectedSubscription,
-    subscribeToMatches,
+    subscribeToMatch,
    subscriptions,
  } = useSubscriptions(goTo)

@ -75,7 +75,7 @@ export const useBuyMatchPopup = () => {
    open: openPopup,
    selectedPeriod,
    selectedSubscription,
-    subscribeToMatches,
+    subscribeToMatch,
    subscriptions,
  }
 }
--- a/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
+++ b/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
@ -43,7 +43,7 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
    setSubscriptionsList([])
  }, [])

-  const subscribeToMatches = (e: MouseEvent) => {
+  const subscribeToMatch = (e: MouseEvent) => {
    e.stopPropagation()
    if (selectedSubscription) {
      buyMatchSubscription(selectedSubscription)
@ -59,7 +59,7 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
    resetSubscriptions,
    selectedPeriod,
    selectedSubscription,
-    subscribeToMatches,
+    subscribeToMatch,
    subscriptions,
  }
 }
--- a/src/features/BuyMatchPopup/types.tsx
+++ b/src/features/BuyMatchPopup/types.tsx
@ -1,6 +1,5 @@
 export enum Steps {
  CardSelection = 'CardSelection',
-  Confirmation = 'Confirmation',
  Error = 'Error',
  Subscriptions = 'Subscriptions',
  Success = 'Success',