diff --git a/public/images/plusIcon.png b/public/images/plusIcon.png deleted file mode 100644 index ff276379..00000000 Binary files a/public/images/plusIcon.png and /dev/null differ diff --git a/public/images/plusIcon.svg b/public/images/plusIcon.svg new file mode 100644 index 00000000..5673b326 --- /dev/null +++ b/public/images/plusIcon.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/config/procedures.tsx b/src/config/procedures.tsx index b4995a48..32bff37f 100644 --- a/src/config/procedures.tsx +++ b/src/config/procedures.tsx @@ -16,10 +16,13 @@ export const PROCEDURES = { get_user_favorites: 'get_user_favorites', get_user_info: 'get_user_info', get_user_match_second: 'get_user_match_second', + get_user_subscriptions: 'get_user_subscriptions', logout_user: 'logout_user', lst_c_country: 'lst_c_country', param_lexical: 'param_lexical', + save_user_custom_subscription: 'save_user_custom_subscription', save_user_favorite: 'save_user_favorite', save_user_info: 'save_user_info', save_user_match_second: 'save_user_match_second', + save_user_subscription: 'save_user_subscription', } diff --git a/src/features/Combobox/styled.tsx b/src/features/Combobox/styled.tsx index 1a2e1c8a..f8a1cbda 100644 --- a/src/features/Combobox/styled.tsx +++ b/src/features/Combobox/styled.tsx @@ -10,7 +10,6 @@ export const Label = styled.label` export const PopOver = styled.ul` position: absolute; - min-height: 70px; max-height: 400px; width: 100%; top: 55px; diff --git a/src/features/Header/styled.tsx b/src/features/Header/styled.tsx index f8cbfef7..c97baee8 100644 --- a/src/features/Header/styled.tsx +++ b/src/features/Header/styled.tsx @@ -9,6 +9,7 @@ export const HomeButtonLink = styled(Link)` background-image: url('/images/home-btn.svg'); background-repeat: no-repeat; background-position: center; + &:hover{ background-image: url('/images/home-btn-hover.svg'); cursor:pointer; diff --git a/src/features/UserAccount/components/PlusIcon/styled.tsx b/src/features/UserAccount/components/PlusIcon/styled.tsx index 567fc944..1af73b48 100644 --- a/src/features/UserAccount/components/PlusIcon/styled.tsx +++ b/src/features/UserAccount/components/PlusIcon/styled.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components/macro' export const PlusIconWrapper = styled.span` width: 20px; height: 20px; - margin: 0 22px; - background: url('/images/plusIcon.png') no-repeat; + margin-right: 22px; + margin-left: 10px; + background: url('/images/plusIcon.svg') no-repeat; ` diff --git a/src/features/UserAccount/components/UserAccountButton/styled.tsx b/src/features/UserAccount/components/UserAccountButton/styled.tsx index c823067a..5ab5285b 100644 --- a/src/features/UserAccount/components/UserAccountButton/styled.tsx +++ b/src/features/UserAccount/components/UserAccountButton/styled.tsx @@ -1,17 +1,20 @@ import styled from 'styled-components/macro' +import { outlineButtonStyles } from 'features/Common/Button' + import { TextWrapper } from '../CardNumber/styled' export const UserAccountButtonWrapper = styled.div` + ${outlineButtonStyles}; + width: 288px; + margin-top: 20px; display: flex; align-items: center; - justify-content: flex-start; - height: 48px; - background-color: transparent; - border: 1.5px solid #3F3F3F; - border-radius: 2px; - margin-top: 20px; - width: 100%; + align-self: flex-start; + color: white; + font-weight: bold; + border-color: #0033CC; + background-color: #0033CC; &:hover { cursor: pointer; @@ -20,5 +23,5 @@ export const UserAccountButtonWrapper = styled.div` export const PlusIconTextWrapper = styled(TextWrapper)` font-size: 20px; - color: #494949; + color: white; ` diff --git a/src/features/UserAccount/components/UserAccountSubscription/index.tsx b/src/features/UserAccount/components/UserAccountSubscription/index.tsx index f584ef95..d00ba920 100644 --- a/src/features/UserAccount/components/UserAccountSubscription/index.tsx +++ b/src/features/UserAccount/components/UserAccountSubscription/index.tsx @@ -1,14 +1,12 @@ import React from 'react' import { Price } from 'features/Register/components/Price' -import { Radio } from 'features/Common/Radio' -import { Checkbox } from 'features/Common/Checkbox' import { - CheckboxWrapper, UserAccountSubscriptionWrapper, UserAccountBoldTextWrapper, UserAccountNormalTextWrapper, + Text, } from './styled' import { PriceWrapper } from '../CardNumber/styled' @@ -25,8 +23,6 @@ type Props = { export const UserAccountSubscription = ({ amount, - checked, - inputType, label, noMarginBottom, noMarginTop, @@ -37,20 +33,7 @@ export const UserAccountSubscription = ({ noMarginTop={noMarginTop} noMarginBottom={noMarginBottom} > - {inputType === 'radio' ? ( - {}} - /> - ) : ( - - {}} - label={label} - /> - - )} + {label} {packageName && {packageName}} {packageAction && {packageAction}} diff --git a/src/features/UserAccount/components/UserAccountSubscription/styled.tsx b/src/features/UserAccount/components/UserAccountSubscription/styled.tsx index fe3fca59..13eb5f4f 100644 --- a/src/features/UserAccount/components/UserAccountSubscription/styled.tsx +++ b/src/features/UserAccount/components/UserAccountSubscription/styled.tsx @@ -32,8 +32,8 @@ export const UserAccountSubscriptionWrapperStyles = css` }}; margin-top: ${({ noMarginTop }) => (noMarginTop ? '0' : '20px')}; margin-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '0' : '20px')}; + padding-left: 20px; width: 100%; - ${RadioLabel}::before { margin-left: 22px; } @@ -51,7 +51,7 @@ export const UserAccountSubscriptionWrapper = styled.div` export const CheckboxWrapper = styled.div` ${CheckboxLabel} { font-weight: bold; - font-size: 14px; + font-size: 16px; line-height: 24px; &::before { @@ -60,16 +60,26 @@ export const CheckboxWrapper = styled.div` } ` +export const Text = styled.p` + color: #fff; + font-size: 18px; + cursor: default; +` + export const UserAccountBoldTextWrapper = styled(TextWrapper)` color: #fff; font-weight: bold; font-size: 20px; margin-right: 24px; + + &:hover { + cursor: default; +} ` export const UserAccountNormalTextWrapper = styled(TextWrapper)` color: #fff; font-weight: normal; - font-size: 14px; + font-size: 16px; margin-right: 24px; ` diff --git a/src/features/UserAccount/hooks/index.tsx b/src/features/UserAccount/hooks/useUserInfo.tsx similarity index 99% rename from src/features/UserAccount/hooks/index.tsx rename to src/features/UserAccount/hooks/useUserInfo.tsx index 1bb349e3..6c49eb1c 100644 --- a/src/features/UserAccount/hooks/index.tsx +++ b/src/features/UserAccount/hooks/useUserInfo.tsx @@ -42,7 +42,6 @@ export const useUserInfo = () => { (fieldName: string) => trim(readFormValue(fieldName)), [readFormValue], ) - const handleSubmit = useCallback(() => { if (validateForm()) { const firstname = readTrimmedValue(formIds.firstname) diff --git a/src/features/UserAccount/hooks/useUserSubscriptions.tsx b/src/features/UserAccount/hooks/useUserSubscriptions.tsx new file mode 100644 index 00000000..86403530 --- /dev/null +++ b/src/features/UserAccount/hooks/useUserSubscriptions.tsx @@ -0,0 +1,41 @@ +import { + useEffect, + useState, + useCallback, +} from 'react' + +import map from 'lodash/map' + +import { getUserSubscriptions } from 'requests/getUserSubscriptions' + +import { useLexicsStore } from 'features/LexicsStore' + +export type Team = { + id: number, + name_eng: string, + name_rus: string, +} + +export const useUserSubscriptions = () => { + const [subscriptions, setSubscriptions] = useState>([]) + const { suffix } = useLexicsStore() + + type Names = 'name_eng' | 'name_rus' + + useEffect(() => { + getUserSubscriptions().then((res) => { + setSubscriptions(res.custom[0].teams) + }) + }, []) + + const normalizeSubscriptions = useCallback(() => { + const nameKey = `name_${suffix}` as Names + + return map(subscriptions, (team) => ({ + ...team, + name: team[nameKey], + })) + }, [subscriptions, suffix]) + + return normalizeSubscriptions() +} diff --git a/src/features/UserAccount/index.tsx b/src/features/UserAccount/index.tsx index 6de927ce..f24bb76a 100644 --- a/src/features/UserAccount/index.tsx +++ b/src/features/UserAccount/index.tsx @@ -1,5 +1,7 @@ import React from 'react' +import map from 'lodash/map' + import { userAccountLexics } from 'config/lexics/userAccount' import { formIds } from 'config/form' @@ -15,7 +17,8 @@ import { UserAccountButton } from './components/UserAccountButton' import { PageTitle } from './components/PageTitle' import { UserAccountSubscription } from './components/UserAccountSubscription' import { TextNoBorder } from './components/TextNoBorder' -import { useUserInfo } from './hooks' +import { useUserInfo } from './hooks/useUserInfo' +import { useUserSubscriptions } from './hooks/useUserSubscriptions' import { FormWrapper, @@ -48,6 +51,8 @@ export const UserAccount = () => { updateFormValue, } = useUserInfo() + const subscriptions = useUserSubscriptions() + return ( @@ -181,49 +186,20 @@ export const UserAccount = () => { - - - - - + // packageAction={translate('add_card')} + // Ещё не решили что делать с add card + /> + {map(subscriptions, (subscription) => ( + + ))} , +} + +type UserSubscription = { + custom: Array, + id: number, + lexic: number, +} + +export const getUserSubscriptions = (): Promise => { + const config = { + body: { + params: {}, + proc, + }, + } + + return callApi({ + config, + url: DATA_URL, + }).then(getResponseData(proc)) +} diff --git a/src/requests/saveUserCustomSubscription.tsx b/src/requests/saveUserCustomSubscription.tsx new file mode 100644 index 00000000..46c8bbcc --- /dev/null +++ b/src/requests/saveUserCustomSubscription.tsx @@ -0,0 +1,43 @@ +import { + DATA_URL, + PROCEDURES, +} from 'config' +import { callApi } from 'helpers' + +const proc = PROCEDURES.save_user_custom_subscription + +type Response = { + _p_error: string | null, + _p_status: 1 | 2, +} + +const responseStatus = { + FAILURE: 2, + SUCCESS: 1, +} + +export const saveUserCustomSubscription = async () => { + const config = { + body: { + params: { + _p_action: 1, + _p_id: 1, + _p_sport: 1, + _p_status: 1, + _p_type: 1, + _p_user_id: 1, + }, + proc, + }, + } + + const response: Response = await callApi({ + config, + url: DATA_URL, + }) + + if (response._p_status === responseStatus.SUCCESS) { + return Promise.resolve(response) + } + return Promise.reject(response._p_error) +} diff --git a/src/requests/saveUserSubscription.tsx b/src/requests/saveUserSubscription.tsx new file mode 100644 index 00000000..c4d8a031 --- /dev/null +++ b/src/requests/saveUserSubscription.tsx @@ -0,0 +1,42 @@ +import { + DATA_URL, + PROCEDURES, +} from 'config' +import { callApi } from 'helpers' + +const proc = PROCEDURES.save_user_subscription + +type Type = { + subscriptionId: number, +} + +type Response = { + _p_error: string | null, + _p_status: 1 | 2, +} + +const responseStatus = { + FAILURE: 2, + SUCCESS: 1, +} + +export const saveUserSubscription = async ({ subscriptionId }: Type) => { + const config = { + body: { + params: { + p_subscription_id: subscriptionId, + }, + proc, + }, + } + + const response: Response = await callApi({ + config, + url: DATA_URL, + }) + + if (response._p_status === responseStatus.SUCCESS) { + return Promise.resolve(response) + } + return Promise.reject(response._p_error) +}