feat(vid-143): match download popup

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,
 }

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,
+}

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 (
+    <Modal
+      close={closePopup}
+      isOpen={isModalOpen}
+    >
+      <Wrapper>
+        <Header>
+          <DownloadIcon src='/images/downloadIcon.png' />
+          <HeaderTitle>
+            <FirstTitle t='download_full_match' />
+            <SecondTitle t='choose_what_to_download' />
+          </HeaderTitle>
+        </Header>
+        <RadioButtonsWrapper>
+          <Label>
+            <Input
+              defaultChecked={selected}
+              name='in_game_time_only'
+              onClick={() => setSelected(true)}
+            />
+            <T9n t='in_game_time_only' />
+          </Label>
+          <Label>
+            <Input
+              name='entire_record'
+              defaultChecked={!selected}
+              onClick={() => setSelected(false)}
+            />
+            <T9n t='entire_record' />
+          </Label>
+        </RadioButtonsWrapper>
+        <Footer>
+          <ScApplyButton>
+            <T9n t='download_single_file' />
+          </ScApplyButton>
+          <ScApplyButton disabled={!selected}>
+            <T9n t='download_files_for_periods' />
+          </ScApplyButton>
+        </Footer>
+      </Wrapper>
+    </Modal>
+  )
+}

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;
+      }`
+    : ''};
+`
+

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<TeamsAndTournaments>,
+    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 (
+    <Item>
+      <MatchDownloadPopup
+        isModalOpen={isOpen}
+        closePopup={close}
+      />
+      <DownloadButton onClick={open}>
+        <Title>
+          <T9n t='download_full_match' />
+        </Title>
+      </DownloadButton>
+    </Item>
+  )
+}

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(
             </Item>
           ))
         }
+        <MatchDownloadButton />
       </List>
     )
   },

src/features/MatchSidePlaylists/styled.tsx

@@ -219,6 +219,21 @@ export const Button = styled.button<ButtonProps>`
   }}
 `
 
+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;

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<TeamsAndTournaments> | null,
+    tournaments: Array<TeamsAndTournaments> | null,
+  },
   email: string,
   firstname: string | null,
   has_subscription: boolean,