refactor(907): changed endpoint of subscriptions list (#328)

* refactor(907): changed endpoint of subscriptions list

* fix(907): pr fix

src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx

@@ -8,8 +8,8 @@ import {
   HeaderTitle,
 } from 'features/PopupComponents'
 import { Name } from 'features/Name'
-import { Steps } from 'features/BuyMatchPopup/types'
 
+import { Steps } from '../../types'
 import { useBuyMatchPopupStore } from '../../store'
 import { SelectedCard } from '../SelectedCard'
 import { Subscriptions } from '../Subscriptions'

src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx

@@ -1,14 +1,14 @@
 import map from 'lodash/map'
 import includes from 'lodash/includes'
 
-import type { MatchSubscriptions, MatchSubscription } from 'requests'
+import type { MatchSubscriptions, MatchSubscription } from 'features/BuyMatchPopup/types'
+import { T9n } from 'features/T9n'
 
 import {
   List,
   Item,
   InfoWrapper,
   Header,
-  Description,
   Price,
 } from './styled'
 
@@ -29,17 +29,14 @@ export const SubscriptionsList = ({
     {
       map(subscriptions, (subscription) => (
         <Item
-          key={subscription.subscription_id}
+          key={subscription.id}
           onClick={() => onSelect?.(subscription)}
           active={includes(selectedSubscriptions, subscription)}
         >
           <InfoWrapper>
             <Header>
-              {subscription.header}
+              <T9n t={subscription.lexic} />
             </Header>
-            <Description>
-              {subscription.description}
-            </Description>
           </InfoWrapper>
 
           <Price amount={subscription.price} perPeriod={`per_${subscription.type}`} />

src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx

@@ -64,13 +64,6 @@ export const Header = styled.span`
   letter-spacing: 0.03em;
 `
 
-export const Description = styled.p`
-  margin-top: 10px;
-  font-weight: 500;
-  font-size: 17px;
-  letter-spacing: 0.03em;
-`
-
 export const Price = styled(BasePrice)`
   ${PriceAmount} {
     font-size: 24px;

src/features/BuyMatchPopup/index.tsx

@@ -7,6 +7,7 @@ import { Modal } from './styled'
 import { Steps } from './types'
 
 export * from './store'
+export * from './store/helpers'
 
 const Empty = () => null
 

src/features/BuyMatchPopup/store/helpers.tsx

@@ -0,0 +1,15 @@
+import map from 'lodash/map'
+import isNumber from 'lodash/isNumber'
+
+import type { MatchSubscriptionsResponse } from 'requests'
+
+import { SubscriptionType } from '../types'
+
+export const transformSubsciptions = (subscriptions: MatchSubscriptionsResponse) => (
+  map(subscriptions, (subscription) => ({
+    id: subscription.id,
+    lexic: subscription.lexic,
+    price: subscription.price_month || subscription.price_year || 0,
+    type: isNumber(subscription.price_month) ? SubscriptionType.Month : SubscriptionType.Year,
+  }))
+)

src/features/BuyMatchPopup/store/hooks/useLexicsFetcher.tsx

@@ -0,0 +1,21 @@
+import { useCallback } from 'react'
+
+import isEmpty from 'lodash/isEmpty'
+import map from 'lodash/map'
+
+import { useLexicsStore } from 'features/LexicsStore'
+
+import type { MatchSubscriptions } from '../../types'
+
+export const useLexicsFetcher = () => {
+  const { addLexicsConfig } = useLexicsStore()
+  const fetchLexics = useCallback((subscriptions: MatchSubscriptions) => {
+    const lexics = map(subscriptions, ({ lexic }) => lexic)
+    if (!isEmpty(lexics)) {
+      addLexicsConfig(lexics)
+    }
+    return subscriptions
+  }, [addLexicsConfig])
+
+  return { fetchLexics }
+}

src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx

@@ -5,28 +5,34 @@ import {
   useCallback,
 } from 'react'
 
+import map from 'lodash/map'
 import sumBy from 'lodash/sumBy'
 import filter from 'lodash/filter'
 import without from 'lodash/without'
 import includes from 'lodash/includes'
 
-import type { MatchSubscriptions, MatchSubscription } from 'requests'
 import {
-  SubscriptionType,
-  getMatchSubscriptions,
+  getSubscriptions,
   buyMatchSubscriptions,
 } from 'requests'
 
-import { Steps } from 'features/BuyMatchPopup/types'
+import type { MatchSubscriptions, MatchSubscription } from '../../types'
+import { Steps, SubscriptionType } from '../../types'
+import { transformSubsciptions } from '../helpers'
+import { useLexicsFetcher } from './useLexicsFetcher'
 
 export const useSubscriptions = (goTo: (step: Steps) => void) => {
+  const { fetchLexics } = useLexicsFetcher()
   const [selectedPeriod, setSelectedPeriod] = useState(SubscriptionType.Month)
   const [subscriptionsList, setSubscriptionsList] = useState<MatchSubscriptions>([])
   const [selectedSubscriptions, setSelectedSubscriptions] = useState<MatchSubscriptions>([])
 
   const fetchSubscriptions = useCallback(() => {
-    getMatchSubscriptions().then(setSubscriptionsList)
-  }, [])
+    getSubscriptions()
+      .then(transformSubsciptions)
+      .then(fetchLexics)
+      .then(setSubscriptionsList)
+  }, [fetchLexics])
 
   const subscriptions = useMemo(
     () => filter(subscriptionsList, { type: selectedPeriod }),
@@ -52,7 +58,8 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
 
   const subscribeToMatches = (e: MouseEvent) => {
     e.stopPropagation()
-    buyMatchSubscriptions()
+    const ids = map(selectedSubscriptions, ({ id }) => id)
+    buyMatchSubscriptions(ids)
       .then(() => goTo(Steps.Success))
       .catch(() => goTo(Steps.Error))
   }

src/features/BuyMatchPopup/types.tsx

@@ -5,3 +5,17 @@ export enum Steps {
   Subscriptions = 'Subscriptions',
   Success = 'Success',
 }
+
+export enum SubscriptionType {
+  Month = 'month',
+  Year = 'year',
+}
+
+export type MatchSubscription = {
+  id: number,
+  lexic: number,
+  price: number,
+  type: SubscriptionType,
+}
+
+export type MatchSubscriptions = Array<MatchSubscription>

src/features/PaymentPeriodTabs/index.tsx

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components/macro'
 
-import { SubscriptionType } from 'requests'
-
+import { SubscriptionType } from 'features/BuyMatchPopup/types'
 import { T9n } from 'features/T9n'
 
 const List = styled.ul`

src/features/UserAccount/components/PageSubscriptions/index.tsx

@@ -2,8 +2,7 @@ import map from 'lodash/map'
 
 import { SportTypes } from 'config'
 
-import type { MatchSubscriptions } from 'requests'
-import { SubscriptionType } from 'requests'
+import { SubscriptionType } from 'features/BuyMatchPopup/types'
 
 import { useToggle } from 'hooks'
 
@@ -12,6 +11,16 @@ import { UserSubscriptionsList } from '../UserSubscriptionsList'
 import { Wrapper, SubscriptionsWrapper } from './styled'
 import { SolidButton, Icon } from '../../styled'
 
+export type MatchSubscription = {
+  description: string,
+  header: string,
+  price: number,
+  subscription_id: number,
+  type: SubscriptionType,
+}
+
+export type MatchSubscriptions = Array<MatchSubscription>
+
 const data: Record<SportTypes, MatchSubscriptions> = {
   [SportTypes.FOOTBALL]: [
     {

src/features/UserAccount/components/SubscriptionsBySport/index.tsx

@@ -4,7 +4,7 @@ import map from 'lodash/map'
 
 import { SportTypes } from 'config'
 
-import { SubscriptionType } from 'requests'
+import { SubscriptionType } from 'features/BuyMatchPopup/types'
 
 import { popupScrollbarStyles } from 'features/PopupComponents'
 

src/features/UserAccount/components/SubscriptionsModal/index.tsx

@@ -1,4 +1,4 @@
-import { SubscriptionType } from 'requests'
+import { SubscriptionType } from 'features/BuyMatchPopup/types'
 
 import { SubscriptionsBySport } from '../SubscriptionsBySport'
 import {

src/features/UserAccount/components/UserSubscriptionsList/index.tsx

@@ -3,8 +3,7 @@ import map from 'lodash/map'
 
 import { SportTypes } from 'config'
 
-import type { MatchSubscriptions } from 'requests'
-
+import type { MatchSubscriptions } from '../PageSubscriptions'
 import { InlineButton } from '../../styled'
 import {
   Wrapper,

src/requests/buyMatchSubscriptions.tsx

@@ -1,18 +1,22 @@
+import map from 'lodash/map'
+
 import { API_ROOT } from 'config'
 import { callApi } from 'helpers'
 
-export const buyMatchSubscriptions = () => {
+const buyMatchSubscription = (subscriptionId: number) => {
   const config = {
     body: {
-      _p_c_subscription_plan: 1,
-      _p_is_scheduled: 0,
+      is_scheduled: 0,
+      subscription_plan: subscriptionId,
     },
   }
 
-  callApi({
+  return callApi({
     config,
     url: `${API_ROOT}/account/purchase`,
   })
-
-  return Promise.resolve()
 }
+
+export const buyMatchSubscriptions = (subscriptionIds: Array<number>) => (
+  Promise.all(map(subscriptionIds, buyMatchSubscription))
+)

src/requests/getMatchSubscriptions.tsx

@@ -1,28 +0,0 @@
-import { API_ROOT } from 'config'
-import { callApi } from 'helpers'
-
-export enum SubscriptionType {
-  Month = 'month',
-  Year = 'year',
-}
-
-export type MatchSubscription = {
-  description: string,
-  header: string,
-  price: number,
-  subscription_id: number,
-  type: SubscriptionType,
-}
-
-export type MatchSubscriptions = Array<MatchSubscription>
-
-export const getMatchSubscriptions = (): Promise<MatchSubscriptions> => {
-  const config = {
-    method: 'GET',
-  }
-
-  return callApi({
-    config,
-    url: `${API_ROOT}/account/get-subscriptions`,
-  })
-}

src/requests/getSubscriptions.tsx

@@ -1,25 +1,18 @@
-import {
-  DATA_URL,
-  PROCEDURES,
-} from 'config'
+import { DATA_URL, PROCEDURES } from 'config'
 import { callApi } from 'helpers'
 
 const proc = PROCEDURES.get_subscriptions
 
-type Tournament = {
-  id: number,
-  name_eng: string,
-  name_rus: string,
-  sport: number,
-}
-
-export type SubscriptionType = {
+type Subscription = {
   id: number,
   lexic: number,
-  tournaments: Array<Tournament>,
+  price_month: number | null,
+  price_year: number | null,
 }
 
-export const getSubscriptions = (): Promise<Array<SubscriptionType>> => {
+export type MatchSubscriptionsResponse = Array<Subscription>
+
+export const getSubscriptions = async (): Promise<MatchSubscriptionsResponse> => {
   const config = {
     body: {
       params: {},

src/requests/index.tsx

@@ -24,5 +24,5 @@ export * from './getMatchesPreviewImages'
 export * from './getSportActions'
 export * from './getMatchPlaylists'
 export * from './getPlayerPlaylists'
-export * from './getMatchSubscriptions'
+export * from './getSubscriptions'
 export * from './buyMatchSubscriptions'