fix(#2525): add highlights page with form and matches
Andrei Dekterev
4 years ago
parent
72ef0c71c1
commit
e8d7452d2e
Binary file not shown.
@ -0,0 +1,17 @@ |
|||||||
|
export const Sound = () => ( |
||||||
|
<svg |
||||||
|
width='24' |
||||||
|
height='15' |
||||||
|
viewBox='0 0 24 15' |
||||||
|
fill='none' |
||||||
|
xmlns='http://www.w3.org/2000/svg' |
||||||
|
> |
||||||
|
<path |
||||||
|
opacity='0.5' |
||||||
|
fillRule='evenodd' |
||||||
|
clipRule='evenodd' |
||||||
|
d='M0.5 3.85443H4.9571L10.6721 0.0834967C11.0045 -0.135849 11.4475 0.102562 11.4475 0.500835V13.7497C11.4475 14.148 11.0045 14.3864 10.6721 14.167L4.95671 10.3958H0.5C0.223858 10.3958 0 10.172 0 9.89584V4.35443C0 4.07828 0.223858 3.85443 0.5 3.85443ZM20.9665 14.7222L20.3088 13.9904C23.5785 10.3523 23.5785 4.42471 20.3088 0.786605L20.9665 0.054802C24.6026 4.11108 24.6026 10.6764 20.9665 14.7222ZM16.924 11.7055L17.8232 12.4657C21.1373 9.66374 21.1373 5.11329 17.8232 2.31133L16.924 3.07155C19.7371 5.44996 19.7371 9.32708 16.924 11.7055ZM15.6147 10.2092L14.6674 9.36539C15.8854 8.28052 15.8854 6.50857 14.6674 5.41165L15.6147 4.56786C17.3604 6.13489 17.3604 8.6542 15.6147 10.2092Z' |
||||||
|
fill='currentColor' |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
) |
||||||
@ -1,18 +1,293 @@ |
|||||||
import { useEffect, useState } from 'react' |
import { |
||||||
|
ChangeEvent, |
||||||
|
FormEvent, |
||||||
|
useEffect, |
||||||
|
useRef, |
||||||
|
useState, |
||||||
|
useMemo, |
||||||
|
} from 'react' |
||||||
|
|
||||||
|
import debounce from 'lodash/debounce' |
||||||
|
|
||||||
|
import { useRecoilState } from 'recoil' |
||||||
|
|
||||||
|
import { useUserFavoritesStore } from 'features/UserFavorites/store' |
||||||
|
|
||||||
import { getSportList } from 'requests/getSportList' |
import { getSportList } from 'requests/getSportList' |
||||||
|
import { |
||||||
|
getSportTeams, |
||||||
|
Team, |
||||||
|
SportTeamsType, |
||||||
|
} from 'requests/getSportTeams' |
||||||
|
import { getPlayerMatches } from 'requests/getMatches/getPlayerMatches' |
||||||
|
import { getTeamPlayers, Player } from 'requests/getTeamPlayers' |
||||||
|
|
||||||
|
import { playerMatchesState, dataForPayHighlights } from '../../storeHighlightsAtoms' |
||||||
|
|
||||||
|
export type SportType = { |
||||||
|
id: number, |
||||||
|
lexic: string, |
||||||
|
name: string, |
||||||
|
name_eng: string, |
||||||
|
name_rus?: string, |
||||||
|
} |
||||||
|
|
||||||
|
type SportTypeName = SportType& { |
||||||
|
name: string, |
||||||
|
} |
||||||
|
|
||||||
|
type PlayerType = Player & { |
||||||
|
name: string, |
||||||
|
} |
||||||
|
|
||||||
|
type TeamType = Team & { |
||||||
|
name: string, |
||||||
|
} |
||||||
|
|
||||||
|
type FormType = { |
||||||
|
duration: string, |
||||||
|
playerValue: string, |
||||||
|
players: Array<string>, |
||||||
|
selectedPlayer: PlayerType | null, |
||||||
|
selectedSound: any, |
||||||
|
selectedTeam: Team | null, |
||||||
|
sport: SportTypeName, |
||||||
|
stats: { |
||||||
|
id: number, |
||||||
|
name: string, |
||||||
|
}, |
||||||
|
teamValue: string, |
||||||
|
} |
||||||
|
|
||||||
|
const sounds = [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: 'No', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: 'Sound 1', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: 'Sound 2', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: 'Sound 3', |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
const summaryStats = [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: 'No', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: 'Yes', |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
export const useHighlightsForm = () => { |
export const useHighlightsForm = () => { |
||||||
const [sports, setSports] = useState<any>() |
const { playerHighlight } = useUserFavoritesStore() |
||||||
const players: any = [] |
|
||||||
|
const [sports, setSports] = useState<Array<SportTypeName>>([]) |
||||||
|
const [teams, setTeams] = useState<Array<TeamType>>([]) |
||||||
|
const [playersData, setPlayersData] = useState<Array<PlayerType>>([]) |
||||||
|
const [players, setPlayers] = useState<Array<PlayerType>>([]) |
||||||
|
const [formState, setFormState] = useState<FormType>({} as FormType) |
||||||
|
const [playerMatches, setPlayerMatches] = useRecoilState(playerMatchesState) |
||||||
|
const [dataHighlights, setDatahighlights] = useRecoilState(dataForPayHighlights) |
||||||
|
|
||||||
|
const formRef = useRef<HTMLFormElement>(null) |
||||||
|
|
||||||
|
const onSportSelect = (selectedSport: SportTypeName | null) => { |
||||||
|
if (selectedSport) { |
||||||
|
setFormState((state) => ({ |
||||||
|
...state, |
||||||
|
playerValue: '', |
||||||
|
selectedPlayer: null, |
||||||
|
selectedTeam: null, |
||||||
|
sport: selectedSport, |
||||||
|
teamValue: '', |
||||||
|
})) |
||||||
|
setTeams([]) |
||||||
|
setPlayers([]) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onTeamSelect = (selectedTeam: TeamType | null) => { |
||||||
|
if (selectedTeam) { |
||||||
|
setFormState((state) => ({ |
||||||
|
...state, |
||||||
|
selectedTeam, |
||||||
|
})) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onPlayerSelect = (selectedPlayer: PlayerType | null) => { |
||||||
|
if (!selectedPlayer) return |
||||||
|
setFormState((state) => ({ |
||||||
|
...state, |
||||||
|
selectedPlayer, |
||||||
|
})) |
||||||
|
} |
||||||
|
|
||||||
|
const onSoundSelect = (selectedSound: any) => { |
||||||
|
if (!selectedSound) return |
||||||
|
setFormState((state) => ({ |
||||||
|
...state, |
||||||
|
selectedSound, |
||||||
|
})) |
||||||
|
} |
||||||
|
|
||||||
|
const onStatsSelect = (stats: any) => { |
||||||
|
if (!stats) return |
||||||
|
setFormState((state) => ({ |
||||||
|
...state, |
||||||
|
stats, |
||||||
|
})) |
||||||
|
} |
||||||
|
|
||||||
|
const onChangeMaxDuration = (e: ChangeEvent<HTMLInputElement>) => { |
||||||
|
if ((Number(e.target.value) > 0 && Number(e.target.value) <= 100) || e.target.value === '') { |
||||||
|
setFormState((state) => ({ |
||||||
|
...state, |
||||||
|
duration: e.target.value, |
||||||
|
})) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onChangeSummary = (e: ChangeEvent<HTMLInputElement>) => { |
||||||
|
const regex = /[0-5]/.test(e.target.value) |
||||||
|
if ((regex && e.target.value.length <= 1) || e.target.value === '') { |
||||||
|
setFormState((state) => ({ |
||||||
|
...state, |
||||||
|
summaryDuration: e.target.value, |
||||||
|
})) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onChangeTeam = (e: ChangeEvent<HTMLInputElement>) => { |
||||||
|
setFormState((state: FormType) => ({ |
||||||
|
...state, |
||||||
|
selectedTeam: null, |
||||||
|
teamValue: e?.target?.value, |
||||||
|
})) |
||||||
|
} |
||||||
|
|
||||||
|
const onChangePlayer = (e: ChangeEvent<HTMLInputElement>) => { |
||||||
|
setFormState((state: FormType) => ({ |
||||||
|
...state, |
||||||
|
playerValue: e?.target?.value, |
||||||
|
selectedPlayer: null, |
||||||
|
})) |
||||||
|
setPlayers( |
||||||
|
playersData?.filter( |
||||||
|
(player: PlayerType) => player |
||||||
|
&& player.name |
||||||
|
?.toLowerCase() |
||||||
|
.indexOf(e?.target?.value.toLowerCase()) >= 0, |
||||||
|
), |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const handleSubmit = (e: FormEvent<HTMLFormElement>) => { |
||||||
|
e.preventDefault() |
||||||
|
} |
||||||
|
|
||||||
console.log('sports', sports) |
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
getSportList().then(setSports) |
getSportList().then((state: any) => setSports( |
||||||
// getTeams().then(teams)
|
state?.map((sport: SportType) => ({ |
||||||
|
...sport, |
||||||
|
name: sport?.name_eng, |
||||||
|
})), |
||||||
|
)) |
||||||
}, []) |
}, []) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (playerHighlight?.sportType) { |
||||||
|
setFormState((prevState: any) => ({ |
||||||
|
...prevState, |
||||||
|
sport: sports?.find((sportType) => sportType.id === playerHighlight.sportType), |
||||||
|
teams: teams?.find(({ id }) => id === playerHighlight.profile.additionalInfo.id), |
||||||
|
})) |
||||||
|
} |
||||||
|
}, [sports, playerHighlight, teams]) |
||||||
|
|
||||||
|
const fetchTeams = useMemo( |
||||||
|
() => debounce(() => getSportTeams(formState?.sport?.id, -1, formState.teamValue).then( |
||||||
|
({ data }: SportTeamsType) => setTeams( |
||||||
|
data?.map((team: Team) => ({ |
||||||
|
...team, |
||||||
|
name: team.name_eng, |
||||||
|
})), |
||||||
|
), |
||||||
|
), 300), |
||||||
|
[formState.teamValue], |
||||||
|
) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (formState?.teamValue?.length >= 3 && formState?.sport) { |
||||||
|
fetchTeams() |
||||||
|
} |
||||||
|
}, [formState.teamValue, formState?.sport, playerHighlight]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (formState?.selectedPlayer?.id) { |
||||||
|
setDatahighlights({ |
||||||
|
duration: Number(formState?.duration), |
||||||
|
lang: 'en', |
||||||
|
matches: playerMatches?.map((match) => match.id), |
||||||
|
player_id: formState?.selectedPlayer?.id, |
||||||
|
sport_id: formState?.sport.id, |
||||||
|
stats: Boolean(formState?.stats?.id), |
||||||
|
}) |
||||||
|
} |
||||||
|
}, [formState, playerMatches]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
formState?.selectedTeam |
||||||
|
&& getTeamPlayers(formState?.sport?.id, formState?.selectedTeam?.id) |
||||||
|
.then((state: any) => setPlayersData(state?.map((player: PlayerType) => ({ |
||||||
|
...player, |
||||||
|
name: `${player?.firstname_eng} ${player?.lastname_eng}`, |
||||||
|
})))) |
||||||
|
}, [formState?.selectedTeam, playerHighlight]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!formState?.selectedPlayer) return |
||||||
|
|
||||||
|
formState?.selectedPlayer |
||||||
|
&& getPlayerMatches({ |
||||||
|
limit: 1000, |
||||||
|
offset: 0, |
||||||
|
playerId: formState?.selectedPlayer?.id, |
||||||
|
sportType: formState?.sport?.id, |
||||||
|
}) |
||||||
|
.then(({ broadcast }) => setPlayerMatches( |
||||||
|
broadcast.map((match: any) => ({ ...match, isChecked: false })), |
||||||
|
)) |
||||||
|
}, [formState?.selectedPlayer, formState?.selectedTeam]) |
||||||
|
|
||||||
return { |
return { |
||||||
|
formRef, |
||||||
|
formState, |
||||||
|
handleSubmit, |
||||||
|
onChangeMaxDuration, |
||||||
|
onChangePlayer, |
||||||
|
onChangeTeam, |
||||||
|
onPlayerSelect, |
||||||
|
onSoundSelect, |
||||||
|
onSportSelect, |
||||||
|
onStatsSelect, |
||||||
|
onTeamSelect, |
||||||
|
playerMatches, |
||||||
players, |
players, |
||||||
|
sounds, |
||||||
sports, |
sports, |
||||||
// teams,
|
summaryStats, |
||||||
|
teams, |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,21 @@ |
|||||||
|
import { ChangeEvent } from 'react' |
||||||
|
|
||||||
|
import { useRecoilState } from 'recoil' |
||||||
|
|
||||||
|
import { playerMatchesState } from '../../storeHighlightsAtoms' |
||||||
|
|
||||||
|
export const useHighlighMatches = () => { |
||||||
|
const [playerMatches, setPlayerMatches] = useRecoilState(playerMatchesState) |
||||||
|
|
||||||
|
const onChangeSelectedMatches = ({ target }: ChangeEvent<HTMLInputElement>) => setPlayerMatches( |
||||||
|
(prev) => prev.map( |
||||||
|
(match) => (Number(match.id) === Number(target.id) |
||||||
|
? { ...match, isChecked: !match.isChecked } : match), |
||||||
|
), |
||||||
|
) |
||||||
|
|
||||||
|
return { |
||||||
|
onChangeSelectedMatches, |
||||||
|
playerMatches, |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
import { T9n } from 'features/T9n' |
||||||
|
import { Checkbox } from 'features/Common/Checkbox' |
||||||
|
import { ArrowLoader } from 'features/ArrowLoader' |
||||||
|
import { SportIcon } from 'features/SportIcon' |
||||||
|
|
||||||
|
import { useHighlighMatches } from './hooks' |
||||||
|
|
||||||
|
import { |
||||||
|
ScTitle, |
||||||
|
ScMatchesWrapper, |
||||||
|
ScMatchesList, |
||||||
|
ScLabel, |
||||||
|
ScDate, |
||||||
|
ScTournament, |
||||||
|
ScTournamentName, |
||||||
|
ScCountryFlag, |
||||||
|
ScFakeDate, |
||||||
|
ScFakeTournamentName, |
||||||
|
ScFakeTournament, |
||||||
|
ScFakeCheckbox, |
||||||
|
ScFakeWrapper, |
||||||
|
ScLoaderWrapper, |
||||||
|
} from './styled' |
||||||
|
|
||||||
|
export const MatchesHighlights = ({ matches }: any) => { |
||||||
|
const { onChangeSelectedMatches, playerMatches } = useHighlighMatches() |
||||||
|
|
||||||
|
return ( |
||||||
|
<ScMatchesWrapper> |
||||||
|
<ScTitle> |
||||||
|
<T9n t='matches_highlight' /> |
||||||
|
</ScTitle> |
||||||
|
<ScMatchesList> |
||||||
|
{playerMatches.length ? (playerMatches?.map(({ |
||||||
|
country_id, |
||||||
|
date, |
||||||
|
id, |
||||||
|
isChecked, |
||||||
|
sport, |
||||||
|
team1, |
||||||
|
team2, |
||||||
|
tournament, |
||||||
|
}: any) => ( |
||||||
|
<Checkbox |
||||||
|
key={id} |
||||||
|
id={id} |
||||||
|
checked={isChecked} |
||||||
|
onChange={onChangeSelectedMatches} |
||||||
|
label={( |
||||||
|
<ScLabel> |
||||||
|
<ScDate> |
||||||
|
{date} |
||||||
|
</ScDate> |
||||||
|
{team1.name_eng} - {team2.name_eng} |
||||||
|
<ScTournament> |
||||||
|
<SportIcon sport={sport} /> |
||||||
|
<ScCountryFlag |
||||||
|
src={`https://instatscout.com/images/flags/48/${country_id}.png`} |
||||||
|
/> |
||||||
|
<ScTournamentName>{tournament.name_eng}</ScTournamentName> |
||||||
|
</ScTournament> |
||||||
|
</ScLabel> |
||||||
|
)} |
||||||
|
/> |
||||||
|
))) : (Array.from(Array(12)).map(() => ( |
||||||
|
<ScFakeWrapper> |
||||||
|
<ScFakeCheckbox /> |
||||||
|
<ScFakeTournament> |
||||||
|
<ScFakeDate /> |
||||||
|
<ScFakeTournamentName /> |
||||||
|
</ScFakeTournament> |
||||||
|
</ScFakeWrapper> |
||||||
|
)))} |
||||||
|
{/* <ScLoaderWrapper> |
||||||
|
<ArrowLoader /> |
||||||
|
</ScLoaderWrapper> */} |
||||||
|
</ScMatchesList> |
||||||
|
</ScMatchesWrapper> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,108 @@ |
|||||||
|
import styled, { css } from 'styled-components/macro' |
||||||
|
import { isMobileDevice } from 'config/userAgent' |
||||||
|
|
||||||
|
import { customScrollbar } from 'features/Common' |
||||||
|
|
||||||
|
export const ScMatchesWrapper = styled.div` |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
color: white; |
||||||
|
min-width: 360px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScTitle = styled.span` |
||||||
|
font-weight: 700; |
||||||
|
font-size: 34px; |
||||||
|
line-height: 40px; |
||||||
|
margin-bottom: 75px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScMatchesList = styled.div` |
||||||
|
max-height: 500px; |
||||||
|
overflow-y: auto; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
${customScrollbar} |
||||||
|
` |
||||||
|
|
||||||
|
export const ScLabel = styled.div` |
||||||
|
font-weight: 600; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 20px; |
||||||
|
margin-bottom: 16px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScDate = styled.span` |
||||||
|
font-weight: 400; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScTournament = styled.div` |
||||||
|
color: rgba(255, 255, 255, 0.7); |
||||||
|
font-size: 10px; |
||||||
|
font-weight: 400; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 16px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScTournamentName = styled.span` |
||||||
|
margin-left: 5px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScCountryFlag = styled.img` |
||||||
|
width: 0.71rem; |
||||||
|
height: 0.75rem; |
||||||
|
margin-left: 0.567rem; |
||||||
|
object-fit: contain; |
||||||
|
object-position: bottom; |
||||||
|
${isMobileDevice |
||||||
|
? css` |
||||||
|
width: 12px; |
||||||
|
height: 8px; |
||||||
|
margin-left: 3.5px; |
||||||
|
` |
||||||
|
: ''}; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScFakeDate = styled.div` |
||||||
|
background: #4E4E4E; |
||||||
|
border-radius: 4px; |
||||||
|
width: 218px; |
||||||
|
height: 10px; |
||||||
|
margin-bottom: 7px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScFakeTournamentName = styled.div` |
||||||
|
background: rgba(78, 78, 78, 0.6); |
||||||
|
border-radius: 4px; |
||||||
|
width: 92px; |
||||||
|
height: 10px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScFakeTournament = styled.div` |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScFakeCheckbox = styled.div` |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
|
||||||
|
background: #4E4E4E; |
||||||
|
border-radius: 4px; |
||||||
|
margin-right: 20px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScFakeWrapper = styled.div` |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 14px; |
||||||
|
` |
||||||
|
|
||||||
|
export const ScLoaderWrapper = styled.div` |
||||||
|
position: absolute; |
||||||
|
left: 30%; |
||||||
|
top: 50%; |
||||||
|
z-index: 1; |
||||||
|
` |
||||||
@ -1,27 +1,67 @@ |
|||||||
|
import { Link } from 'react-router-dom' |
||||||
|
|
||||||
|
import { PAGES } from 'config' |
||||||
|
|
||||||
|
import { useRecoilValue, useRecoilState } from 'recoil' |
||||||
|
|
||||||
|
import { T9n } from 'features/T9n' |
||||||
|
import { CompanyInfo } from 'features/CompanyInfo' |
||||||
|
import { ChangeCardPopup } from 'features/UserAccount/components/ChangeCardPopup' |
||||||
|
import { MultiSourcePlayer } from 'features/MultiSourcePlayer' |
||||||
|
|
||||||
import { PriceInfo } from './components/PriceInfo' |
import { PriceInfo } from './components/PriceInfo' |
||||||
import { FormHighlights } from './components/FormHighlights' |
import { FormHighlights } from './components/FormHighlights' |
||||||
|
import { MatchesHighlights } from './components/MatchesHighlights' |
||||||
|
|
||||||
|
import { |
||||||
|
playerMatchesState, |
||||||
|
openPopupChangeCard, |
||||||
|
} from './storeHighlightsAtoms' |
||||||
|
|
||||||
import { |
import { |
||||||
ScHeader, |
ScHeader, |
||||||
ScHeaderLogo, |
ScHeaderLogo, |
||||||
ScWrapper, |
ScWrapper, |
||||||
ScWrapperContent, |
ScWrapperContent, |
||||||
|
ScButton, |
||||||
|
ScButtonWrap, |
||||||
} from './styled' |
} from './styled' |
||||||
|
|
||||||
const HighlightsPage = () => { |
const HighlightsPage = () => { |
||||||
console.log(123) |
const playerMatches = useRecoilValue(playerMatchesState) |
||||||
|
const [isOpenPopupChangeCard, setIsOpenPopupChangeCard] = useRecoilState(openPopupChangeCard) |
||||||
|
const countIsCheckedMatches = playerMatches?.filter( |
||||||
|
({ isChecked }: any) => isChecked, |
||||||
|
).length |
||||||
|
|
||||||
|
console.log(playerMatches) |
||||||
|
|
||||||
return ( |
return ( |
||||||
<ScWrapper> |
<ScWrapper> |
||||||
<ScHeader> |
<ScHeader> |
||||||
<ScHeaderLogo /> |
<Link to={PAGES.home}> |
||||||
|
<ScHeaderLogo /> |
||||||
|
</Link> |
||||||
</ScHeader> |
</ScHeader> |
||||||
<ScWrapperContent> |
<ScWrapperContent> |
||||||
<PriceInfo price={0} /> |
<PriceInfo price={countIsCheckedMatches * 25} /> |
||||||
<FormHighlights /> |
<FormHighlights /> |
||||||
|
<MatchesHighlights /> |
||||||
</ScWrapperContent> |
</ScWrapperContent> |
||||||
|
<ScButtonWrap onClick={() => setIsOpenPopupChangeCard(true)}> |
||||||
|
<ScButton disabled={!!countIsCheckedMatches}> |
||||||
|
<T9n t='order_and_buy' /> |
||||||
|
</ScButton> |
||||||
|
</ScButtonWrap> |
||||||
|
<CompanyInfo textAlign='center' /> |
||||||
|
<ChangeCardPopup |
||||||
|
btnName='buy_subscription' |
||||||
|
changeCardPopupOpen={isOpenPopupChangeCard} |
||||||
|
setChangeCardPopupOpen={setIsOpenPopupChangeCard} |
||||||
|
title='payment' |
||||||
|
/> |
||||||
</ScWrapper> |
</ScWrapper> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
export default HighlightsPage |
export default HighlightsPage |
||||||
|
|||||||
@ -0,0 +1,30 @@ |
|||||||
|
import { atom } from 'recoil' |
||||||
|
|
||||||
|
import type { Match } from 'requests' |
||||||
|
|
||||||
|
export type PlayerMatchesType = Array<Match & {isChecked: boolean} |
||||||
|
> |
||||||
|
|
||||||
|
type DataForm = { |
||||||
|
duration: number, |
||||||
|
lang: string, |
||||||
|
matches: Array<number>, |
||||||
|
player_id: number, |
||||||
|
sport_id: number, |
||||||
|
stats: boolean, |
||||||
|
} |
||||||
|
|
||||||
|
export const playerMatchesState = atom({ |
||||||
|
default: [] as PlayerMatchesType, |
||||||
|
key: 'playerMatchesState', |
||||||
|
}) |
||||||
|
|
||||||
|
export const openPopupChangeCard = atom({ |
||||||
|
default: false, |
||||||
|
key: 'openPopupChangeCard', |
||||||
|
}) |
||||||
|
|
||||||
|
export const dataForPayHighlights = atom({ |
||||||
|
default: {} as DataForm, |
||||||
|
key: 'dataForPayHighlights', |
||||||
|
}) |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
import { |
||||||
|
DATA_URL, |
||||||
|
PROCEDURES, |
||||||
|
} from 'config' |
||||||
|
import { callApi } from 'helpers' |
||||||
|
|
||||||
|
const proc = PROCEDURES.get_sport_teams |
||||||
|
|
||||||
|
export type Team = { |
||||||
|
c_country?: number, |
||||||
|
c_gender?: number, |
||||||
|
c_sport?: number, |
||||||
|
c_team_type?: number, |
||||||
|
country_en?: string, |
||||||
|
country_iso?: string, |
||||||
|
country_ru?: string, |
||||||
|
dl?: boolean, |
||||||
|
id: number, |
||||||
|
name_eng: string, |
||||||
|
name_national: string, |
||||||
|
name_rus: string, |
||||||
|
short_name_eng?: string, |
||||||
|
short_name_rus?: string, |
||||||
|
ts: string, |
||||||
|
} |
||||||
|
|
||||||
|
export type SportTeamsType = { |
||||||
|
data: Array<Team>, |
||||||
|
more: boolean, |
||||||
|
} |
||||||
|
export const getSportTeams = ( |
||||||
|
sport_id: number, |
||||||
|
_p_limit: number, |
||||||
|
_p_name: string, |
||||||
|
) |
||||||
|
: Promise<SportTeamsType> => { |
||||||
|
const config = { |
||||||
|
body: { |
||||||
|
params: { |
||||||
|
_p_limit, |
||||||
|
_p_name, |
||||||
|
sport_id, |
||||||
|
}, |
||||||
|
proc, |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
return callApi({ |
||||||
|
config, |
||||||
|
url: DATA_URL, |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import { |
||||||
|
DATA_URL, |
||||||
|
PROCEDURES, |
||||||
|
} from 'config' |
||||||
|
import { callApi } from 'helpers' |
||||||
|
|
||||||
|
const proc = PROCEDURES.get_team_players |
||||||
|
|
||||||
|
export type Player = { |
||||||
|
birthday: string | null, |
||||||
|
c_gender: number, |
||||||
|
firstname_eng: string, |
||||||
|
firstname_rus: string, |
||||||
|
height: string | number, |
||||||
|
id: number, |
||||||
|
lastname_eng: string, |
||||||
|
lastname_rus: string, |
||||||
|
nickname_eng: string | number| null, |
||||||
|
nickname_rus: string | number | null, |
||||||
|
sport_id: number, |
||||||
|
weight: string | number | null, |
||||||
|
} |
||||||
|
|
||||||
|
export const getTeamPlayers = (_p_sport_id: number, |
||||||
|
_p_team_id: number) |
||||||
|
: Promise<Array<Player>> => { |
||||||
|
const config = { |
||||||
|
body: { |
||||||
|
params: { |
||||||
|
_p_sport_id, |
||||||
|
_p_team_id, |
||||||
|
}, |
||||||
|
proc, |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
return callApi({ |
||||||
|
config, |
||||||
|
url: DATA_URL, |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
import { API_ROOT } from 'config' |
||||||
|
import { callApi } from 'helpers' |
||||||
|
|
||||||
|
export type Props = { |
||||||
|
cardId: string, |
||||||
|
item: { |
||||||
|
duration: number, |
||||||
|
lang: string, |
||||||
|
matches: Array<number>, |
||||||
|
player_id: number, |
||||||
|
sport_id: number, |
||||||
|
stats: boolean, |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
export const onePayment = async ({ cardId, item }: Props) => { |
||||||
|
const config = { |
||||||
|
body: { |
||||||
|
action: 'one_payment', |
||||||
|
card_id: cardId, |
||||||
|
item, |
||||||
|
service: 'stripe_ott', |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
return callApi({ |
||||||
|
config, |
||||||
|
url: `${API_ROOT}/account/payments`, |
||||||
|
}) |
||||||
|
} |
||||||
Loading…
Reference in new issue