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

4 years ago · 848adcca39
parent abc6e56d4a
commit 848adcca39
7 changed files with 35 additions and 29 deletions
--- a/src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
+++ b/src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
@ -3,6 +3,7 @@ import { useState } from 'react'
 import styled from 'styled-components/macro'

 import map from 'lodash/map'
+import isNull from 'lodash/isNull'

 import { MDASH } from 'config'
 import { SelectSubscriptionData } from 'requests'
@ -33,7 +34,15 @@ import {
 export const ChooseSub = styled.div`
  font-weight: 600;
  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 = () => {
@ -57,7 +66,7 @@ export const SelectSubscriptionStep = () => {
      ...subscription.packages,
      season: initialSubscription.season,
    })
-    setActive(index)
+    index === active ? setActive(null) : setActive(index)
    setSelectSubName(subscription.lexic)
  }

@ -77,10 +86,10 @@ export const SelectSubscriptionStep = () => {
        </HeaderActions>
      </Header>
      <Body marginTop={15}>
-        <List>
+        <ChooseSubList>
          {
            map(initialSubscription.data, (subscription, index) => (
-              <Item
+              <ChooseSubItem
                key={subscription.id}
                onClick={() => onItemClick(subscription, index)}
                active={active === index}
@ -96,17 +105,17 @@ export const SelectSubscriptionStep = () => {
                    <T9n t={subscription.lexic3} />
                  </Description>
                </InfoWrapper>
-              </Item>
+              </ChooseSubItem>
            ))
          }
-        </List>
+        </ChooseSubList>
      </Body>
      <Footer>
        {loader
          ? <ArrowLoader width='204px' disabled />
          : (
            <Button
-              disabled={!selectedSubscriptionPackage}
+              disabled={!selectedSubscriptionPackage || isNull(active)}
              onClick={onChooseSub}
            >
              <T9n t='next_choose' />
--- a/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
+++ b/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
@ -54,8 +54,7 @@ export const SubscriptionSelectionStep = () => {
  return (
    <Wrapper>
      <Header>
-        {selectedSubStep
-        && (
+        {selectedSubStep && (
          <HeaderActions position='left'>
            <ButtonPrevious
              onClick={getSub}
@ -78,7 +77,7 @@ export const SubscriptionSelectionStep = () => {
          <CloseButton onClick={close} />
        </HeaderActions>
      </Header>
-      <Body marginTop={15}>
+      <Body marginTop={20}>
        <Subscriptions />
        <SelectedCard />
      </Body>
--- a/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx
+++ b/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx
@ -15,7 +15,7 @@ export const List = styled.ul`
  display: flex;
  flex-direction: column;
  overflow-y: auto;
-  margin-top: 15px;
+  margin-top: 25px;
  padding: 0 40px;

  ${popupScrollbarStyles}
@ -63,7 +63,6 @@ export const Item = styled.li.attrs(() => ({
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
-  overflow: auto;

  :not(:last-child) {
    margin-bottom: 20px;
--- a/src/features/BuyMatchPopup/store/hooks/index.tsx
+++ b/src/features/BuyMatchPopup/store/hooks/index.tsx
@ -10,6 +10,7 @@ import type { PaymentIntent, StripeError } from '@stripe/stripe-js'

 import last from 'lodash/last'
 import isEmpty from 'lodash/isEmpty'
+import size from 'lodash/size'

 import { PAGES, ProfileTypes } from 'config'

@ -97,7 +98,7 @@ export const useBuyMatchPopup = () => {

  useEffect(() => {
    if (!isEmpty(initialSubscription)) {
-      !initialSubscription?.data
+      !initialSubscription?.data || size(initialSubscription?.data) === 1
        ? setSteps([Steps.Subscriptions])
        : setSteps([Steps.SelectSubscription])
    }
--- a/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
+++ b/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
@ -7,6 +7,7 @@ import {
 import find from 'lodash/find'
 import isEmpty from 'lodash/isEmpty'
 import first from 'lodash/first'
+import size from 'lodash/size'

 import { getSubscriptions, SubscriptionsByPeriods } from 'requests'

@ -43,10 +44,16 @@ export const useSubscriptions = () => {

  const fetchSubscriptions = useCallback(async (match: Match) => {
    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({
        match,
-        subscriptions,
+        subscriptions: subscriptionData,
        suffix,
      })
      setInitialSubscription(subscriptions)
--- a/src/features/BuyMatchPopup/styled.tsx
+++ b/src/features/BuyMatchPopup/styled.tsx
@ -84,7 +84,7 @@ export const Wrapper = styled.div<WrapperProps>`
  position: relative;
  height: ${({ height }) => (height ? `${height}px` : 'auto')};
  width: ${({ width }) => (width ? `${width}px` : '830px')};
-  padding: 20px 0 20px;
+  padding: 40px 0;

  @media (max-width: 750px){
    width: 100%;
@ -152,10 +152,6 @@ export const Footer = styled.div<FooterProps>`
  display: flex;
  justify-content: center;
  margin-top: 40px;
-
-  @media (max-width: 1370px) {
-    margin-top: 0px;
-  }
  ${isMobileDevice
    ? css`
      @media screen and (orientation: landscape){
@ -186,7 +182,7 @@ export const SmallButton = styled(Button)`
 `

 export const ButtonPrevious = styled(Arrow)`
-  top: 30px;
+  top: 45px;
  left: 30px;
  cursor: pointer;
 `
--- a/src/features/PaymentPeriodTabs/index.tsx
+++ b/src/features/PaymentPeriodTabs/index.tsx
@ -12,9 +12,8 @@ import { getCorrectPaymentTabs } from './helpers'

 const List = styled.ul`
  display: flex;
-  justify-content: center;
  min-width: 395px;
-  width: 70%;
+  justify-content: space-between;
  ${isMobileDevice
    ? css`
      min-width: 90%;
@ -36,7 +35,6 @@ type ItemProps = {

 const Item = styled.li<ItemProps>`
  position: relative;
-  width: 33.33%;
  font-weight: 600;
  font-size: 16px;
  line-height: 47px;
@ -53,13 +51,10 @@ const Item = styled.li<ItemProps>`
        ::after {
          position: absolute;
          content: '';
-          bottom: 9px;
-          width: 100%;
+          bottom: 0px;
+          width: 130px;
          height: 3px;
          background-color: #fff;
-          @media screen and (orientation: landscape){
-            bottom: 6px;
-          }
        }
      `
      : ''