diff --git a/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx b/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx index efe5a69a..76ae8e78 100644 --- a/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx +++ b/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' diff --git a/src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx b/src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx index d365772d..5efab8c3 100644 --- a/src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx +++ b/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) => ( onSelect?.(subscription)} active={includes(selectedSubscriptions, subscription)} >
- {subscription.header} +
- - {subscription.description} -
diff --git a/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx b/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx index 1545f3b6..e692131f 100644 --- a/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx +++ b/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; diff --git a/src/features/BuyMatchPopup/index.tsx b/src/features/BuyMatchPopup/index.tsx index db0cff87..73213bd8 100644 --- a/src/features/BuyMatchPopup/index.tsx +++ b/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 diff --git a/src/features/BuyMatchPopup/store/helpers.tsx b/src/features/BuyMatchPopup/store/helpers.tsx new file mode 100644 index 00000000..aad6bd0c --- /dev/null +++ b/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, + })) +) diff --git a/src/features/BuyMatchPopup/store/hooks/useLexicsFetcher.tsx b/src/features/BuyMatchPopup/store/hooks/useLexicsFetcher.tsx new file mode 100644 index 00000000..cabf783c --- /dev/null +++ b/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 } +} diff --git a/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx b/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx index 1b127ac0..4a1be9ff 100644 --- a/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx +++ b/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([]) const [selectedSubscriptions, setSelectedSubscriptions] = useState([]) 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)) } diff --git a/src/features/BuyMatchPopup/types.tsx b/src/features/BuyMatchPopup/types.tsx index be52b946..4e3b6e91 100644 --- a/src/features/BuyMatchPopup/types.tsx +++ b/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 diff --git a/src/features/PaymentPeriodTabs/index.tsx b/src/features/PaymentPeriodTabs/index.tsx index 0fc42c0d..380eb404 100644 --- a/src/features/PaymentPeriodTabs/index.tsx +++ b/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` diff --git a/src/features/UserAccount/components/PageSubscriptions/index.tsx b/src/features/UserAccount/components/PageSubscriptions/index.tsx index e139e0a9..f4e6f931 100644 --- a/src/features/UserAccount/components/PageSubscriptions/index.tsx +++ b/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 + const data: Record = { [SportTypes.FOOTBALL]: [ { diff --git a/src/features/UserAccount/components/SubscriptionsBySport/index.tsx b/src/features/UserAccount/components/SubscriptionsBySport/index.tsx index 030df53f..79caa160 100644 --- a/src/features/UserAccount/components/SubscriptionsBySport/index.tsx +++ b/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' diff --git a/src/features/UserAccount/components/SubscriptionsModal/index.tsx b/src/features/UserAccount/components/SubscriptionsModal/index.tsx index 0bec2f0c..a5732600 100644 --- a/src/features/UserAccount/components/SubscriptionsModal/index.tsx +++ b/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 { diff --git a/src/features/UserAccount/components/UserSubscriptionsList/index.tsx b/src/features/UserAccount/components/UserSubscriptionsList/index.tsx index bd22f099..b86c6dd3 100644 --- a/src/features/UserAccount/components/UserSubscriptionsList/index.tsx +++ b/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, diff --git a/src/requests/buyMatchSubscriptions.tsx b/src/requests/buyMatchSubscriptions.tsx index bea8e952..24e649dd 100644 --- a/src/requests/buyMatchSubscriptions.tsx +++ b/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) => ( + Promise.all(map(subscriptionIds, buyMatchSubscription)) +) diff --git a/src/requests/getMatchSubscriptions.tsx b/src/requests/getMatchSubscriptions.tsx deleted file mode 100644 index 86ae5ad4..00000000 --- a/src/requests/getMatchSubscriptions.tsx +++ /dev/null @@ -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 - -export const getMatchSubscriptions = (): Promise => { - const config = { - method: 'GET', - } - - return callApi({ - config, - url: `${API_ROOT}/account/get-subscriptions`, - }) -} diff --git a/src/requests/getSubscriptions.tsx b/src/requests/getSubscriptions.tsx index 20adf742..3a3781bf 100644 --- a/src/requests/getSubscriptions.tsx +++ b/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, + price_month: number | null, + price_year: number | null, } -export const getSubscriptions = (): Promise> => { +export type MatchSubscriptionsResponse = Array + +export const getSubscriptions = async (): Promise => { const config = { body: { params: {}, diff --git a/src/requests/index.tsx b/src/requests/index.tsx index 19bbc9a3..7c01182c 100644 --- a/src/requests/index.tsx +++ b/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'