From 9990d8eec6562c2fd3c51d141775eee874264dd0 Mon Sep 17 00:00:00 2001 From: Margarita Date: Thu, 25 May 2023 20:28:21 +0400 Subject: [PATCH] feat(vid-143): match download popup --- public/images/checkedRadiobutton.png | Bin 0 -> 568 bytes public/images/downloadIcon.png | Bin 0 -> 624 bytes public/images/radiobutton.png | Bin 0 -> 755 bytes src/config/lexics/indexLexics.tsx | 2 + src/config/lexics/matchDownload.tsx | 8 + .../components/MatchDownloadPopup/index.tsx | 73 ++++++++ .../components/MatchDownloadPopup/styled.tsx | 158 ++++++++++++++++++ .../components/MatchDownloadButton/index.tsx | 67 ++++++++ .../components/MatchPlaylists/index.tsx | 4 +- src/features/MatchSidePlaylists/styled.tsx | 15 ++ src/requests/getUserInfo.tsx | 12 ++ 11 files changed, 338 insertions(+), 1 deletion(-) create mode 100644 public/images/checkedRadiobutton.png create mode 100644 public/images/downloadIcon.png create mode 100644 public/images/radiobutton.png create mode 100644 src/config/lexics/matchDownload.tsx create mode 100644 src/features/MatchPage/components/MatchDownloadPopup/index.tsx create mode 100644 src/features/MatchPage/components/MatchDownloadPopup/styled.tsx create mode 100644 src/features/MatchSidePlaylists/components/MatchDownloadButton/index.tsx diff --git a/public/images/checkedRadiobutton.png b/public/images/checkedRadiobutton.png new file mode 100644 index 0000000000000000000000000000000000000000..6ded0e5955cef339daff231378259fe4a4f75ff7 GIT binary patch literal 568 zcmV-80>}M{P)P000>X1^@s6#OZ}&00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPop^{!S+>TYAaZ za$+I?fD~1ZvO#eumZ$D0J<0{;oFvJ~%moEUDN$}P4IN587B2}9WT}j0x z{2N#3(V~1{Wxa`1;6(PME8eo0k3~7Es%&iWEwqrgj}j=Dn6y*=x$;jnLCO;$f)d96 zO(*{aZM9fiYm!npT2a|IOv6sZDumsIs;I=`sRSXShHZ`9OI<|?%i!4G3EL|fY95?K zCLJt8BVzb}Q>@J2eQ13a!ZsIFfj?De)*B+pcyM8znde|x-&wz`0*j)TZvs+9vR;XS zo?HqY&k#w^-!;p*P;5s!-mAxi`bHzVdi&h9gQM1AgKa z*qf=~ZE4_t(AFMc>|GC4GE$l2to<#f*73vDoiO`oEBXZps1fNEp1jxq0000Tk11DA#c^q|1p~yV_4wj;86(`^mPWyRQIYhP^CE6 zEHXIai`f4N3&GV@U&Jy96K~Mkh+^7^Vm-5>SV9nA#0n}CzMy z=w%<15VW0nY#__7ZX*lA5~~)Y11=%g*|!v*5XL1HIZeLc#**TdF4P9XSWkkhlgZJ; z)2{^a2Ca=Krj2058b?L07C|X(!~G0O;Z$5BJXQ&%8y6(GIO$S@_l@CzW)M7A>;A&N zzf6y&Xw-5Oqn}Bws;O$`MjwSaS-eOt2=aPW3LX7!O{sS_0R901V#xLV=4QhH0000< KMNUMnLSTZIHv*IZ literal 0 HcmV?d00001 diff --git a/public/images/radiobutton.png b/public/images/radiobutton.png new file mode 100644 index 0000000000000000000000000000000000000000..191398a7c89e95961a026d9284e5ce14382fa831 GIT binary patch literal 755 zcmVP000>X1^@s6#OZ}&00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP{A`)&8Z@`}v zVY{84&AMzW*!HOxPUTkHvs^JRO$6P*0vUNhGloaKm^q$~MD0PvV2z zjlnPk0WXueRwlaU2Z}{IeotavsAwZ6(6wO+0_Kz14NCxfrifNN$s@=jx?TX6O_Tu5 zuDq#z`SJTHQ=|)iEV?_Y7XkHT_MjUZbS|@l=DRM zTHtaz7rW76Iu=TVpwnW@X>^Z_qKOrh0AkJUC^hZw`Rr1m?hVz($Mn}CM!^2}VI#Bj`f_SJ@^R~F+&3Cbg;F6~=NMluR?|B*zDGGVxXuJEM|kQ# zig?PIt6G}gXf#CMy)vo4g`V9?PIgptlCW~4QRsotXjqW@sW@Q(a?d7e?mktW233OL lO!3D_N9!ECb6=xj_y;feKaG+08xjBj002ovPDHLkV1gREOuhgB literal 0 HcmV?d00001 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,