diff --git a/package-lock.json b/package-lock.json index 2af43d71..d9035f4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "lodash": "^4.17.15", "m3u8-parser": "^4.7.0", "mobx": "^6.5.0", - "mobx-react": "^7.3.0", + "mobx-react-lite": "^3.4.0", "oidc-client": "^1.11.5", "react": "^17.0.2", "react-datepicker": "^3.1.3", @@ -22974,41 +22974,17 @@ "url": "https://opencollective.com/mobx" } }, - "node_modules/mobx-react": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.3.0.tgz", - "integrity": "sha512-RGEcwZokopqyJE5JPwXKB9FWMSqFM9NJVO2QPI+z6laJTJeBHqvPicjnKgY5mvihxTeXB1+72TnooqUePeGV1g==", - "dependencies": { - "mobx-react-lite": "^3.3.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mobx" - }, - "peerDependencies": { - "mobx": "^6.1.0", - "react": "^16.8.0 || ^17" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/mobx-react-lite": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.3.0.tgz", - "integrity": "sha512-U/kMSFtV/bNVgY01FuiGWpRkaQVHozBq5CEBZltFvPt4FcV111hEWkgwqVg9GPPZSEuEdV438PEz8mk8mKpYlA==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz", + "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mobx" }, "peerDependencies": { "mobx": "^6.1.0", - "react": "^16.8.0 || ^17" + "react": "^16.8.0 || ^17 || ^18" }, "peerDependenciesMeta": { "react-dom": { @@ -50839,18 +50815,10 @@ "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.5.0.tgz", "integrity": "sha512-pHZ/cySF00FVENDWIDzJyoObFahK6Eg4d0papqm6d7yMkxWTZ/S/csqJX1A3PsYy4t5k3z2QnlwuCfMW5lSEwA==" }, - "mobx-react": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.3.0.tgz", - "integrity": "sha512-RGEcwZokopqyJE5JPwXKB9FWMSqFM9NJVO2QPI+z6laJTJeBHqvPicjnKgY5mvihxTeXB1+72TnooqUePeGV1g==", - "requires": { - "mobx-react-lite": "^3.3.0" - } - }, "mobx-react-lite": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.3.0.tgz", - "integrity": "sha512-U/kMSFtV/bNVgY01FuiGWpRkaQVHozBq5CEBZltFvPt4FcV111hEWkgwqVg9GPPZSEuEdV438PEz8mk8mKpYlA==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz", + "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==", "requires": {} }, "move-concurrently": { diff --git a/package.json b/package.json index 18c11fc5..39597514 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "lodash": "^4.17.15", "m3u8-parser": "^4.7.0", "mobx": "^6.5.0", - "mobx-react": "^7.3.0", + "mobx-react-lite": "^3.4.0", "oidc-client": "^1.11.5", "react": "^17.0.2", "react-datepicker": "^3.1.3", diff --git a/src/config/lexics/payment.tsx b/src/config/lexics/payment.tsx index d7d33afd..79f6124b 100644 --- a/src/config/lexics/payment.tsx +++ b/src/config/lexics/payment.tsx @@ -1,8 +1,12 @@ export const paymentLexics = { add_card: 8313, address: 15203, + after_canceling: 18191, + and_month: 18186, billing_address: 15489, + cancel_sub: 12671, card_holder_name: 2021, + change_card: 14018, city: 15206, country: 835, error_address_latin_letters: 15758, @@ -13,9 +17,17 @@ export const paymentLexics = { error_empty_country: 15753, error_empty_name: 15290, error_payment_unsuccessful: 14446, + if_you_cancel: 18189, + next_payment: 18183, payment_date: 15603, payment_method: 2010, + save_sub: 18190, + still_cancel: 2646, + sub_not_renewed: 15060, subscription_plan: 18182, sum: 838, + unsubscribe: 18188, + using_payment: 18187, watch_match: 18199, + will_automatically: 18185, } diff --git a/src/config/procedures.tsx b/src/config/procedures.tsx index b233904e..97997854 100644 --- a/src/config/procedures.tsx +++ b/src/config/procedures.tsx @@ -21,6 +21,7 @@ export const PROCEDURES = { get_user_match_second: 'get_user_match_second', get_user_payments: 'get_user_payments', get_user_preferences: 'get_user_preferences', + get_user_subscribes: 'get_user_subscribes', get_user_subscriptions: 'get_user_subscriptions', landing_get_match_info: 'landing_get_match_info', lst_c_country: 'lst_c_country', diff --git a/src/features/BuyMatchPopup/components/CardStep/index.tsx b/src/features/BuyMatchPopup/components/CardStep/index.tsx index f446166a..62928b5a 100644 --- a/src/features/BuyMatchPopup/components/CardStep/index.tsx +++ b/src/features/BuyMatchPopup/components/CardStep/index.tsx @@ -21,7 +21,12 @@ import { ButtonPrevious, } from '../../styled' -export const CardStep = () => { +type CardStepType = { + btnName?: string, + title?: string, +} + +export const CardStep = ({ btnName, title }: CardStepType) => { const { cards } = useCardsStore() const { close, goBack } = useBuyMatchPopupStore() @@ -34,7 +39,7 @@ export const CardStep = () => { - + @@ -48,7 +53,7 @@ export const CardStep = () => { inputsBackground='rgba(255, 255, 255, 0.1)' > diff --git a/src/features/UserAccount/components/CancelSubPopup/index.tsx b/src/features/UserAccount/components/CancelSubPopup/index.tsx new file mode 100644 index 00000000..c0c65f6e --- /dev/null +++ b/src/features/UserAccount/components/CancelSubPopup/index.tsx @@ -0,0 +1,100 @@ +import { ArrowLoader } from 'features/ArrowLoader' +import { T9n } from 'features/T9n' + +import type { Subscribe } from 'requests/getUserSubscribes' + +import { format } from 'date-fns' + +import { + Modal, + Wrapper, + Header, + HeaderTitle, + Body, + Footer, + ScSaveSubBtn, + Text, + ScCancelSub, + ScStillCancelBtn, + ScNotificationPopup, + ScOkBtn, +} from './styled' + +type Props = { + cancelSub: () => void, + error: string, + handleModalClose: () => void, + isFetching: boolean, + isModalOpen: boolean, + isSubCanceled: boolean, + subscribe: Subscribe, +} + +export const CancelSubPopup = (props: Props) => { + const { + cancelSub, + error, + handleModalClose, + isFetching, + isModalOpen, + isSubCanceled, + subscribe, + } = props + + const { + access_to, + name, + option_name, + } = subscribe + + return ( + + + {isSubCanceled || error ? ( + + + + + handleModalClose()}>Ok + + ) : ( + <> +
+ + + +
+ + + + + + {option_name} — {name} + + + +   + {access_to && format(new Date(access_to), 'dd.MM.yyyy')} + +
+ cancelSub()} + isFetching={isFetching} + > + {isFetching ? ( + + ) : ( + + )} + + handleModalClose()}> + + +
+ + + )} + + + ) +} diff --git a/src/features/UserAccount/components/CancelSubPopup/styled.tsx b/src/features/UserAccount/components/CancelSubPopup/styled.tsx new file mode 100644 index 00000000..56fa69ff --- /dev/null +++ b/src/features/UserAccount/components/CancelSubPopup/styled.tsx @@ -0,0 +1,195 @@ +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' +import { devices } from 'config/devices' + +import { ModalWindow } from 'features/Modal/styled' +import { Modal as BaseModal } from 'features/Modal' +import { Header as BaseHeader } from 'features/PopupComponents' + +import { ButtonSolid, ButtonOutline } from 'features/Common' + +export const Modal = styled(BaseModal)` + background-color: rgba(0, 0, 0, 0.7); + + ${ModalWindow} { + max-width: 642px; + max-height: 340px; + padding-top: 40px; + background-color: #333333; + border-radius: 5px; + + ${isMobileDevice + ? css` + height: auto; + top: -7vh; + width: 98%; + max-height: none; + padding: 0; + ` + : ''}; + } +` + +type WrapperProps = { + isFetching?: boolean, +} + +export const Wrapper = styled.div` + ${({ isFetching }) => ( + isFetching + ? css`pointer-events: none;` + : '' + )} +` + +export const Header = styled(BaseHeader)` + height: auto; + justify-content: center; + ${isMobileDevice + ? css` + @media ${devices.mobile}{ + padding-top: 33px; + } + ` + : ''}; +` + +export const HeaderTitle = styled.span` + font-weight: 700; + font-size: 24px; + line-height: 24px; + color: #FFFFFF; + ${isMobileDevice + ? css` + font-size: 14px; + line-height: 20px; + + @media (orientation: landscape) { + font-size: 20px; + } + ` + : ''}; +` + +export const Body = styled.div` + padding: 20px 40px; + display: flex; + flex-direction: column; + font-weight: normal; + font-size: 20px; + line-height: 27px; + ${isMobileDevice + ? css` + padding: 13px 25px 0; + flex-direction: column; + + @media (orientation: landscape){ + padding: 22px 23px 0 29px; + } + ` + : ''}; +` + +export const Footer = styled.div` + width: 100%; + display: flex; + justify-content: center; + margin-top: 25px; + + ${isMobileDevice + ? css` + flex-direction: column; + ` + : ''}; +` + +export const ScSaveSubBtn = styled(ButtonSolid)` + max-width: 270px; + border-radius: 5px; + font-weight: 600; + height: 50px; + font-size: 20px; + ${isMobileDevice + ? css` + max-width: none; + width: 100%; + min-height: 42px; + margin-bottom: 20px; + + @media (orientation: landscape){ + width: 290px; + min-height: 42px; + } + ` + : ''}; +` + +export const ScStillCancelBtn = styled(ButtonOutline)<{isFetching: boolean}>` + max-width: 270px; + height: 50px; + border-radius: 5px; + font-weight: 500; + font-size: 20px; + margin-right: 24px; + + ${({ isFetching }) => (isFetching ? 'border: none' : '')}; + + ${isMobileDevice + ? css` + max-width: none; + margin-bottom: 20px; + width: 100%; + + @media (orientation: landscape){ + width: 290px; + } + ` + : ''}; +` + +export const Text = styled.span` + display: block; + color: rgba(255, 255, 255, 0.7); + font-weight: 500; + font-size: 16px; + line-height: 20px; + + ${isMobileDevice + ? css` + font-size: 13px; + ` + : ''}; +` + +export const ScCancelSub = styled.div` + max-width: 562px; + height: 59px; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0) 100% + ), + #3f3f3f; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); + border-radius: 2px; + font-weight: 500; + font-size: 18px; + line-height: 22px; + padding: 20px; + margin: 20px 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +` + +export const ScNotificationPopup = styled.div` + display: flex; + flex-direction: column; + align-items: center; +` + +export const ScOkBtn = styled(ScSaveSubBtn)` + max-width: 70px; + margin-top: 40px; +` diff --git a/src/features/UserAccount/components/ChangeCardPopup/index.tsx b/src/features/UserAccount/components/ChangeCardPopup/index.tsx new file mode 100644 index 00000000..79a45ce5 --- /dev/null +++ b/src/features/UserAccount/components/ChangeCardPopup/index.tsx @@ -0,0 +1,36 @@ +import { useEffect } from 'react' + +import { useCardsStore } from 'features/CardsStore' +import { CardStep } from 'features/BuyMatchPopup/components/CardStep' + +import { Modal } from './styled' + +type Props = { + changeCardPopupOpen: boolean, + setChangeCardPopupOpen: (open: boolean) => void, +} + +export const ChangeCardPopup = ({ + changeCardPopupOpen, + setChangeCardPopupOpen, +}: Props) => { + const { fetchCards } = useCardsStore() + + useEffect(() => { + fetchCards() + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + + return ( + setChangeCardPopupOpen(false)} + withCloseButton + > + + + ) +} diff --git a/src/features/UserAccount/components/ChangeCardPopup/styled.tsx b/src/features/UserAccount/components/ChangeCardPopup/styled.tsx new file mode 100644 index 00000000..804804f8 --- /dev/null +++ b/src/features/UserAccount/components/ChangeCardPopup/styled.tsx @@ -0,0 +1,25 @@ +import styled, { css } from 'styled-components/macro' +import { ModalWindow } from 'features/Modal/styled' +import { Modal as BaseModal } from 'features/Modal' +import { isMobileDevice } from 'config/userAgent' + +export const Modal = styled(BaseModal)` + background-color: rgba(0, 0, 0, 0.7); + + ${ModalWindow} { + padding: 0; + background-color: #333333; + border-radius: 5px; + + ${isMobileDevice + ? css` + width: calc(100vw - 60px); + @media screen and (orientation: landscape){ + max-width: calc(100vw - 80px); + height: calc(100vh - 20px); + overflow: auto; + } + ` + : ''}; + } +` diff --git a/src/features/UserAccount/components/Header/index.tsx b/src/features/UserAccount/components/Header/index.tsx index 359d3eb7..0f4ea31c 100644 --- a/src/features/UserAccount/components/Header/index.tsx +++ b/src/features/UserAccount/components/Header/index.tsx @@ -20,19 +20,16 @@ const HeaderStyled = styled.header` min-height: auto; } - ${isMobileDevice ? css` - @media (max-width: 650px) { - margin-bottom: 20px; - } - @media (orientation: landscape) { - margin-bottom: 20px; - } - ` : ''}; + ${isMobileDevice + ? css` + padding: 20px 0; + ` + : ''}; ` export const HeaderLogo = styled(Logo)` - ${client.styles.userAccountLogo} - + ${client.styles.userAccountLogo}; + ${isMobileDevice ? client.styles.mobileHeaderLogo : ''}; diff --git a/src/features/UserAccount/components/PageSubscriptions/hooks.tsx b/src/features/UserAccount/components/PageSubscriptions/hooks.tsx new file mode 100644 index 00000000..4369b4ab --- /dev/null +++ b/src/features/UserAccount/components/PageSubscriptions/hooks.tsx @@ -0,0 +1,62 @@ +import { useEffect, useState } from 'react' + +import { getUserSubscribes, Subscribe } from 'requests/getUserSubscribes' +import { cancelSubscribe } from 'requests/cancelSubscribe' + +import { useAuthStore } from 'features/AuthStore' + +export const useUserSubscribes = () => { + const [selectedSubscribe, setSelectedSubscribe] = useState({} as Subscribe) + const [subscribes, setSubscribes] = useState([]) + const [isCancelPopupOpen, setIsCancelPopupOpen] = useState(false) + const [changeCardPopupOpen, setChangeCardPopupOpen] = useState(false) + const [isSubCanceled, setSubCanceled] = useState(false) + const [isFetching, setIsFetching] = useState(false) + const [error, setError] = useState('') + const { user } = useAuthStore() + + const handleClose = () => { + setIsCancelPopupOpen(false) + setChangeCardPopupOpen(false) + setError('') + } + + const cancelSub = async () => { + try { + setIsFetching(true) + if (selectedSubscribe?.sub_id) { + await cancelSubscribe(selectedSubscribe?.sub_id) + setSubCanceled(true) + } + } catch { + setError('error_payment_unsuccessful') + } + setIsFetching(false) + } + + useEffect(() => { + (async () => { + setIsFetching(true) + const allSubscribes = (await (getUserSubscribes(user?.profile?.email || ''))) + .sort((a, b) => Date.parse(b.access_to) - Date.parse(a.access_to)) + setSubscribes(allSubscribes) + setIsFetching(false) + })() + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + + return { + cancelSub, + changeCardPopupOpen, + error, + handleClose, + isCancelPopupOpen, + isFetching, + isSubCanceled, + selectedSubscribe, + setChangeCardPopupOpen, + setIsCancelPopupOpen, + setSelectedSubscribe, + subscribes, + } +} diff --git a/src/features/UserAccount/components/PageSubscriptions/index.tsx b/src/features/UserAccount/components/PageSubscriptions/index.tsx index 2c132656..5cf524a6 100644 --- a/src/features/UserAccount/components/PageSubscriptions/index.tsx +++ b/src/features/UserAccount/components/PageSubscriptions/index.tsx @@ -1,16 +1,26 @@ -import map from 'lodash/map' - -import { SportTypes } from 'config' - import { SubscriptionType } from 'features/BuyMatchPopup/types' import { T9n } from 'features/T9n' +import { Loader } from 'features/Loader' + +import type { Subscribe } from 'requests/getUserSubscribes' + +import format from 'date-fns/format' + +import { useUserSubscribes } from './hooks' + +import { ChangeCardPopup } from '../ChangeCardPopup' +import { CancelSubPopup } from '../CancelSubPopup' -import { UserSubscriptionsList } from '../UserSubscriptionsList' import { Wrapper, - SubscriptionsWrapper, - Tabs, - Tab, + ScItem, + ScText, + ScSubscribe, + ScCancelButton, + ScBtnWrap, + ScItemPaymentSum, + ScCard, + ScLoaderWrapper, } from './styled' type MatchSubscription = { @@ -24,85 +34,137 @@ type MatchSubscription = { export type MatchSubscriptions = Array -const data: Record = { - [SportTypes.FOOTBALL]: [ - { - description: 'Доступ к прямой трансляции, записи и хайлайты матча', - header: 'подписка на матч спартак-динамо', - isActive: true, - price: 999, - subscription_id: 1, - type: SubscriptionType.Month, - }, - { - description: 'все матчи спартака в сезоне 2020-2021', - header: 'подписка на матч спартак-динамо', - isActive: true, - price: 999, - subscription_id: 2, - type: SubscriptionType.Month, - }, - { - description: 'Доступ к прямой трансляции, записи и хайлайты матча', - header: 'подписка на матч спартак-динамо', - isActive: true, - price: 999, - subscription_id: 3, - type: SubscriptionType.Month, - }, - ], - [SportTypes.BASKETBALL]: [], - [SportTypes.HANDBALL]: [], - [SportTypes.VOLLEYBALL]: [], - [SportTypes.STREETBALL]: [], - [SportTypes.HOCKEY]: [ - { - description: 'все матчи спартака в сезоне 2020-2021', - header: 'подписка на матч спартак-динамо', - isActive: true, - price: 999, - subscription_id: 4, - type: SubscriptionType.Month, - }, - { - description: 'Доступ к прямой трансляции, записи и хайлайты матча', - header: 'подписка на матч спартак-динамо', - isActive: true, - price: 999, - subscription_id: 5, - type: SubscriptionType.Month, - }, - { - description: 'Доступ к прямой трансляции, записи и хайлайты матча', - header: 'подписка на матч спартак-динамо', - isActive: true, - price: 999, - subscription_id: 6, - type: SubscriptionType.Month, - }, - ], -} +export const PageSubscriptions = () => { + const { + cancelSub, + changeCardPopupOpen, + error, + handleClose, + isCancelPopupOpen, + isFetching, + isSubCanceled, + selectedSubscribe, + setChangeCardPopupOpen, + setIsCancelPopupOpen, + setSelectedSubscribe, + subscribes, + } = useUserSubscribes() + + return ( + <> + {isFetching + ? ( + + + + ) : ( + + {subscribes?.map((subscribe: Subscribe) => { + const { + access_to, + card, + is_active, + iso, + name, + option_name, + price, + purchase_type, + sub_id, + } = subscribe -export const PageSubscriptions = () => ( - - - - - - - - - - - { - map(data, (subscriptions, sport: SportTypes) => ( - - )) - } - - -) + const hideCancel = selectedSubscribe.sub_id === sub_id && isSubCanceled + + return ( + + + + + {option_name} — {name} + + + + + + + {iso} {price} + + + + + + {format(new Date(access_to), 'd MMM yyyy')} + + + + + + + {card} + {/* setChangeCardPopupOpen(true)} + /> + setChangeCardPopupOpen(true)} + /> */} + + + {is_active + && purchase_type === 'subscription' + && !hideCancel ? ( + + + {!error + && !isSubCanceled + && selectedSubscribe.sub_id === sub_id + && isCancelPopupOpen ? null : ( + { + setIsCancelPopupOpen(true) + setSelectedSubscribe(subscribe) + }} + > + + + )} + + + +   + {iso} {price} + +   + + + + ) : null} + + ) + })} + + )} + + + + ) +} diff --git a/src/features/UserAccount/components/PageSubscriptions/styled.tsx b/src/features/UserAccount/components/PageSubscriptions/styled.tsx index c5dffbe6..6e4e95fc 100644 --- a/src/features/UserAccount/components/PageSubscriptions/styled.tsx +++ b/src/features/UserAccount/components/PageSubscriptions/styled.tsx @@ -3,9 +3,14 @@ import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' import { popupScrollbarStyles } from 'features/PopupComponents' +import { customScrollbar } from 'features/Common' export const Wrapper = styled.div` width: 100%; + max-height: 600px; + overflow-y: auto; + + ${customScrollbar} ` export const SubscriptionsWrapper = styled.div` @@ -15,62 +20,163 @@ export const SubscriptionsWrapper = styled.div` margin-bottom: 28px; ${popupScrollbarStyles} + + ${isMobileDevice + ? css` + margin-bottom: 35px; + ` + : ''}; ` -export const Tabs = styled.div` +export const ScItem = styled.div` + font-weight: 500; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.6); display: flex; - margin-bottom: 40px; + flex-direction: row; + margin-bottom: 25px; + + .additional_info { + color: rgba(255, 255, 255, 0.3); + font-weight: 500; + font-size: 13px; + line-height: 22px; + text-transform: none; + + ${isMobileDevice + ? css` + font-size: 10px; + line-height: 15px; + margin-top: 20px; + + ` + : ''}; + } + + ${isMobileDevice + ? css` + flex-direction: column; + margin-bottom: 20px; + + ` + : ''}; + + .payment_title { + width: 360px; + + ${isMobileDevice + ? css` + font-size: 10px; + width: 150px; + ` + : ''}; + } + + .change { + margin-left: 10px; + text-decoration: underline; + text-transform: none; + color: rgba(255, 255, 255, 0.5); + cursor: pointer; + } + + .payment_method { + display: flex; + flex-direction: row; + } + + .payment_plan { + text-transform: none; + } +` + +export const ScText = styled.span` + color: #FFFFFF; + max-width: 560px; + + ${isMobileDevice + ? css` + font-size: 14px; + line-height: 17px; + align-items: center + ` + : ''}; + + ` + +export const ScCard = styled.div` + margin-right: 50px; + ${isMobileDevice ? css` - margin-top: 15px; + margin: 0; + width: 150px; ` - : ''} + : ''}; + ` + +export const ScBtnWrap = styled.div` + min-width: 360px; + + ${isMobileDevice + ? css` + min-width: 100%; + display: flex; + justify-content: center; + ` + : ''}; ` -type TabProps = { - active?: boolean, -} +export const ScSubscribe = styled.div` + margin-bottom: 70px; +` -export const Tab = styled.button` - position: relative; +export const ScItemPaymentSum = styled.div` + ${isMobileDevice + ? css` + display: flex; + flex-direction: row; + ` + : ''}; +` + +export const ScCancelButton = styled.button` border: none; + outline: none; padding: 0; background-color: transparent; - width: 288px; + cursor: pointer; + background: #294FC4; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); + border-radius: 5px; + width: 100%; + max-width: 244px; + height: 50px; + font-weight: 600; - font-size: 16px; + font-size: 20px; line-height: 50px; - color: rgba(255, 255, 255, 0.5); - cursor: pointer; + color: #FFFFFF; - ${({ active, theme }) => ( - active - ? css` - color: ${theme.colors.white}; - - ::after { - position: absolute; - bottom: 0; - left: 0; - content: ''; - width: 100%; - height: 4px; - background-color: #fff; - } - ` - : '')} + :disabled { + opacity: 0.5; + } ${isMobileDevice ? css` - font-size: 14px; - line-height: 14px; - ::after { - bottom: -15px; - height: 2px; - } - @media (orientation: landscape){ - width: 50%; - } + font-size: 16px; + line-height: 16px; + min-width: 100%; ` - : ''} + : ''}; +` + +export const ScLoaderWrapper = styled.div` + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; ` diff --git a/src/features/UserAccount/components/ScoreSwitch/index.tsx b/src/features/UserAccount/components/ScoreSwitch/index.tsx index 35f19246..6857200a 100644 --- a/src/features/UserAccount/components/ScoreSwitch/index.tsx +++ b/src/features/UserAccount/components/ScoreSwitch/index.tsx @@ -20,6 +20,14 @@ const Wrapper = styled.div` ${isMobileDevice ? css` margin-top: 0; + margin-bottom: 20px; + + + > * { + &:first-child { + justify-content: flex-start; + } + } ` : ''} @@ -50,7 +58,7 @@ export const ScoreSwitch = ({ className }: Props) => { return ( { > - + { - diff --git a/src/features/UserAccount/styled.tsx b/src/features/UserAccount/styled.tsx index c40f491d..ae714476 100644 --- a/src/features/UserAccount/styled.tsx +++ b/src/features/UserAccount/styled.tsx @@ -172,6 +172,7 @@ export const Navigations = styled.nav` width: 100%; border: none; margin-bottom: 0; + border-bottom: 1px solid rgba(255,255,255,0.4); } @media ${devices.mobile} { @@ -184,6 +185,7 @@ export const Navigations = styled.nav` border-right: 1px solid rgba(255, 255, 255, 0.4); height: 100%; } + ` : ''}; ` diff --git a/src/libs/index.ts b/src/libs/index.ts index 454c8f2c..1ab5d96b 100644 --- a/src/libs/index.ts +++ b/src/libs/index.ts @@ -1,5 +1,6 @@ export { Arrow } from './objects/Arrow' export { Date } from './objects/Date' +export { Edit } from './objects/Edit' export { Calendar } from './objects/Calendar' export { Basketball } from './objects/Basketball' export { Football } from './objects/Football' diff --git a/src/libs/objects/Edit.tsx b/src/libs/objects/Edit.tsx new file mode 100644 index 00000000..d1e51487 --- /dev/null +++ b/src/libs/objects/Edit.tsx @@ -0,0 +1,15 @@ +export const Edit = (): JSX.Element => ( + + + +) diff --git a/src/requests/cancelSubscribe.tsx b/src/requests/cancelSubscribe.tsx new file mode 100644 index 00000000..183f0b6e --- /dev/null +++ b/src/requests/cancelSubscribe.tsx @@ -0,0 +1,15 @@ +import { API_ROOT } from 'config' +import { callApi } from 'helpers' + +export const cancelSubscribe = (id: number): Promise => { + const config = { + body: { + id, + }, + } + + return callApi({ + config, + url: `${API_ROOT}/account/subscription/cancel`, + }) +} diff --git a/src/requests/getUserSubscribes.tsx b/src/requests/getUserSubscribes.tsx new file mode 100644 index 00000000..8d151e74 --- /dev/null +++ b/src/requests/getUserSubscribes.tsx @@ -0,0 +1,53 @@ +import { DATA_URL, PROCEDURES } from 'config' +import { callApi } from 'helpers' + +const proc = PROCEDURES.get_user_subscribes + +export type Subscribe = { + access_to: string, + c_payment_service: number, + c_subscription_option: number, + card: string, + currency_id: number, + dt_next_billing: string | null, + is_access: boolean, + is_active: boolean, + iso: string, + name: string, + option_name: string, + option_sys_name: string, + payment_type: string, + price: number, + purchase_type: string, + sub_external_id: number | null, + sub_id: number | null, + sub_info: Array, + ts_payment: string, +} + +type Team = { + id: number, + name_en: string, + name_ru: string, +} + +type Subscribes = Array + +export const getUserSubscribes = ( + _p_email: string, +) +: Promise => { + const config = { + body: { + params: { + _p_email, + }, + proc, + }, + } + + return callApi({ + config, + url: DATA_URL, + }) +}