diff --git a/public/images/checkedRadiobutton.png b/public/images/checkedRadiobutton.png new file mode 100644 index 00000000..6ded0e59 Binary files /dev/null and b/public/images/checkedRadiobutton.png differ diff --git a/public/images/downloadIcon.png b/public/images/downloadIcon.png new file mode 100644 index 00000000..48f39d4c Binary files /dev/null and b/public/images/downloadIcon.png differ diff --git a/public/images/radiobutton.png b/public/images/radiobutton.png new file mode 100644 index 00000000..191398a7 Binary files /dev/null and b/public/images/radiobutton.png differ diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 7830ed5e..5d498ce0 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -4,6 +4,7 @@ import { highlightsPageLexic } from './highlightsPageLexic' import { mailingsLexics } from './mailings' import { sportsLexic } from './sportsLexic' import { landingLexics } from './landingLexics' +import { matchDownload } from './matchDownload' const matchPopupLexics = { actions: 1020, @@ -221,4 +222,5 @@ export const indexLexics = { ...sportsLexic, ...sportsPopup, ...landingLexics, + ...matchDownload, } diff --git a/src/config/lexics/matchDownload.tsx b/src/config/lexics/matchDownload.tsx new file mode 100644 index 00000000..43f7291a --- /dev/null +++ b/src/config/lexics/matchDownload.tsx @@ -0,0 +1,8 @@ +export const matchDownload = { + choose_what_to_download: 20193, + download_files_for_periods: 20197, + download_full_match: 9435, + download_single_file: 20196, + entire_record: 20195, + in_game_time_only: 20194, +} diff --git a/src/features/MatchPage/components/MatchDownloadPopup/index.tsx b/src/features/MatchPage/components/MatchDownloadPopup/index.tsx new file mode 100644 index 00000000..ec97ad86 --- /dev/null +++ b/src/features/MatchPage/components/MatchDownloadPopup/index.tsx @@ -0,0 +1,73 @@ +import { useState } from 'react' + +import { T9n } from 'features/T9n' + +import { + Header, + Footer, + Modal, + ScApplyButton, + HeaderTitle, + Wrapper, + DownloadIcon, + FirstTitle, + SecondTitle, + RadioButtonsWrapper, + Input, + Label, +} from './styled' + +type Props = { + closePopup: () => void, + isModalOpen: boolean, +} + +export const MatchDownloadPopup = ({ + closePopup, + isModalOpen, +}: Props) => { + const [selected, setSelected] = useState(true) + + return ( + + +
+ + + + + +
+ + + + + + + + ) +} diff --git a/src/features/MatchPage/components/MatchDownloadPopup/styled.tsx b/src/features/MatchPage/components/MatchDownloadPopup/styled.tsx new file mode 100644 index 00000000..9ec9dc8a --- /dev/null +++ b/src/features/MatchPage/components/MatchDownloadPopup/styled.tsx @@ -0,0 +1,158 @@ +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config' + +import { T9n } from 'features/T9n' +import { ModalWindow, ModalCloseButton } from 'features/Modal/styled' +import { Header as BaseHeader } from 'features/PopupComponents' +import { + ApplyButton, + Modal as BaseModal, +} from 'features/AuthServiceApp/components/RegisterPopup/styled' + +export const Modal = styled(BaseModal)` + + ${ModalWindow} { + width: 577px; + height: 490px; + padding: 80px 90px 65px; + min-height: auto; + + ${ModalCloseButton} { + height: 28px; + width: 28px; + + svg { + width: 20px; + height: 12px; + } + } + + ${isMobileDevice + ? css` + max-width: 95vw; + max-height: 75vh; + top: -3vh; + padding: 60px 14px 20px;` + : ''}; +` + +export const Wrapper = styled.div`` + +export const Header = styled(BaseHeader)` + display: flex; + align-items: center; + height: 100%; +` + +export const DownloadIcon = styled.img` + margin-right: 25px; + + ${isMobileDevice + ? css` + height: 55px; + width: 44px;` + : ''}; +` + +export const HeaderTitle = styled.div` + display: flex; + flex-direction: column; +` + +export const FirstTitle = styled(T9n)` + font-weight: 700; + font-size: 24px; + line-height: 24px; + margin-bottom: 10px; + + ${isMobileDevice + ? css` + font-size: 20px;` + : ''}; +` + +export const SecondTitle = styled(T9n)` + font-weight: 400; + font-size: 20px; + line-height: 28px; + + ${isMobileDevice + ? css` + font-size: 14px; + line-height: 17px;` + : ''}; +` + +export const RadioButtonsWrapper = styled.div` + margin: 25px 0; +` + +export const Label = styled.label` + display: flex; + cursor: pointer; + font-size: 18px; + line-height: 50px; + align-items: center; + + ${isMobileDevice + ? css` + font-size: 14px;` + : ''}; +` + +export const Input = styled.input.attrs(() => ({ + type: 'radio', +}))` + margin: 0 25px 0 0; + appearance: none; + width: 25px; + height: 25px; + cursor: pointer; + background-image: url(/images/${({ defaultChecked }) => ( + defaultChecked + ? 'checkedRadiobutton.png' + : 'radiobutton.png' + )}); + + + ${isMobileDevice + ? css` + margin-right: 10px;` + : ''}; + +` + +export const Footer = styled.div`` + +export const ScApplyButton = styled(ApplyButton)` + width: 400px; + height: 50px; + margin: 0; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #3F3F3F; + transition: background-color 0.3s; + + :first-child { + margin-bottom: 20px; + } + + &:hover { + background-color: ${({ theme: { colors } }) => colors.button}; + } + + :disabled { + pointer-events: none; + } + + ${isMobileDevice + ? css` + font-size: 14px; + width: 100%; + height: 50px; + + :first-child { + margin-bottom: 10px; + }` + : ''}; +` + diff --git a/src/features/MatchSidePlaylists/components/MatchDownloadButton/index.tsx b/src/features/MatchSidePlaylists/components/MatchDownloadButton/index.tsx new file mode 100644 index 00000000..2f15f826 --- /dev/null +++ b/src/features/MatchSidePlaylists/components/MatchDownloadButton/index.tsx @@ -0,0 +1,67 @@ +import some from 'lodash/some' + +import type { TeamsAndTournaments } from 'requests' + +import { useToggle } from 'hooks/useToggle' + +import { T9n } from 'features/T9n' +import { useMatchPageStore } from 'features/MatchPage/store' +import { useAuthStore } from 'features/AuthStore' +import { MatchDownloadPopup } from 'features/MatchPage/components/MatchDownloadPopup' + +import { usePageParams } from 'hooks/usePageParams' + +import { Item } from '../MatchPlaylists' +import { DownloadButton, Title } from '../../styled' + +export const MatchDownloadButton = () => { + const { user, userInfo } = useAuthStore() + const { profile } = useMatchPageStore() + const { sportType } = usePageParams() + + const { + close, + isOpen, + open, + } = useToggle() + + const checkDownloadData = ( + checkArray: Array, + id?: number, + ) => some(checkArray, (['c_sport', sportType] && ['id', id])) + + const teams = userInfo?.download.teams + const tournaments = userInfo?.download.tournaments + + const isAvailableTeams = () => { + if (teams) { + return checkDownloadData(teams, profile?.team1.id) + || checkDownloadData(teams, profile?.team2.id) + } + + return null + } + + const isAvailableTournaments = () => { + if (tournaments) return checkDownloadData(tournaments, profile?.tournament.id) + return null + } + + const isNeedDownloadButton = user && (isAvailableTournaments() || isAvailableTeams()) + + if (!isNeedDownloadButton) return null + + return ( + + + + + <T9n t='download_full_match' /> + + + + ) +} diff --git a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx index fcb98356..f9f8766e 100644 --- a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx @@ -20,6 +20,7 @@ import { useMatchPageStore } from 'features/MatchPage/store' import { useLexicsStore } from 'features/LexicsStore' import { PlayButton } from '../PlayButton' +import { MatchDownloadButton } from '../MatchDownloadButton' export const LIST_INDENT = 30 @@ -34,7 +35,7 @@ const List = styled.ul` margin-bottom: ${LIST_INDENT}px; ` -const Item = styled.li` +export const Item = styled.li` margin-bottom: 12px; width: 100%; height: 36px; @@ -94,6 +95,7 @@ export const MatchPlaylists = forwardRef( )) } + ) }, diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx index c43f595d..e4e15c3d 100644 --- a/src/features/MatchSidePlaylists/styled.tsx +++ b/src/features/MatchSidePlaylists/styled.tsx @@ -219,6 +219,21 @@ export const Button = styled.button` }} ` +export const DownloadButton = styled(Button)` + + :hover { + background-color: ${({ theme }) => theme.colors.buttonHover}; + } + + ${({ active }) => (active + ? css` + border: 1px solid #FFFFFF; + border-radius: 2px; + background-color: black; + ` + : '')} +` + export const Title = styled.span` font-weight: 600; font-size: 14px; diff --git a/src/requests/getUserInfo.tsx b/src/requests/getUserInfo.tsx index e02528b6..78a97b7d 100644 --- a/src/requests/getUserInfo.tsx +++ b/src/requests/getUserInfo.tsx @@ -6,6 +6,13 @@ import { callApi } from 'helpers' const proc = PROCEDURES.get_user_info +export type TeamsAndTournaments = { + c_sport: number, + id: number, + name_eng: string, + name_rus: string, +} + export type UserInfo = { address_line1: string | null, address_line2: string | null, @@ -16,6 +23,11 @@ export type UserInfo = { name_eng: string, name_rus: string, }, + download: { + id?: number, + teams: Array | null, + tournaments: Array | null, + }, email: string, firstname: string | null, has_subscription: boolean,