From fcc5c27a13cd5133f0eef71104d43d8e6b1bf5a5 Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Thu, 30 Jun 2022 21:22:40 +0700 Subject: [PATCH] fix(#2526): add check empty form and send data profile player from player page --- .../components/Form/hooks/index.tsx | 36 ++++++-- .../components/FormHighlights/hooks.tsx | 90 ++++++++++++------- .../components/FormHighlights/index.tsx | 33 +++---- .../components/FormHighlights/styled.tsx | 35 ++++++++ .../components/MatchesHighlights/index.tsx | 11 ++- .../components/MatchesHighlights/styled.tsx | 20 +++++ .../components/PriceInfo/styled.tsx | 9 ++ .../components/ThanksPopup/index.tsx | 8 +- src/pages/HighlightsPage/index.tsx | 31 ++++--- .../HighlightsPage/storeHighlightsAtoms.tsx | 8 +- src/pages/HighlightsPage/styled.tsx | 10 +++ src/requests/getSportList.tsx | 2 + src/requests/onePayment.tsx | 5 +- 13 files changed, 222 insertions(+), 76 deletions(-) diff --git a/src/features/AddCardForm/components/Form/hooks/index.tsx b/src/features/AddCardForm/components/Form/hooks/index.tsx index 7de52d65..6d3b6b7d 100644 --- a/src/features/AddCardForm/components/Form/hooks/index.tsx +++ b/src/features/AddCardForm/components/Form/hooks/index.tsx @@ -74,9 +74,9 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => { const elements = useElements() const { translate } = useLexicsStore() const { - onAddCard, defaultCard, isHighlightsPage, + onAddCard, setError: setCardError, } = useCardsStore() const [name, setName] = useState('') @@ -87,8 +87,6 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => { const [loader, setLoader] = useState(false) const [dataHighlights, setDataHighlights] = useRecoilState(dataForPayHighlights) -console.log('inputStates', inputStates) - const { countries, selectedCountry, @@ -181,13 +179,19 @@ console.log('inputStates', inputStates) if (isHighlightsPage && defaultCard && allInputEmpty) { setErrorMessage('') + setLoader(true) onePayment({ cardId: defaultCard?.id, - order: { ...dataHighlights.data }, - }).then(() => setDataHighlights((prev) => ({ - ...prev, - isOpenThanksPopup: true, - }))) + order: { ...dataHighlights?.data }, + }) + .then(() => { + setDataHighlights((prev) => ({ + ...prev, + isOpenThanksPopup: true, + })) + }) + .catch(() => setErrorMessage(translate('error_payment_unsuccessful'))) + .finally(() => setLoader(false)) return } @@ -223,6 +227,22 @@ console.log('inputStates', inputStates) setLoader(true) onAddCard(token.id) .then(onAddSuccess) + .then(() => setInputStates(initialState)) + .then(() => { + if (defaultCard) { + onePayment({ + cardId: defaultCard.id, + order: { ...dataHighlights?.data }, + }) + .then(() => { + setDataHighlights((prev) => ({ + ...prev, + isOpenThanksPopup: true, + })) + }) + .catch(() => setErrorMessage(translate('error_payment_unsuccessful'))) + } + }) .finally(() => setLoader(false)) } } diff --git a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx index 2a2aa07e..9280a3a7 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx +++ b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx @@ -9,10 +9,12 @@ import { import debounce from 'lodash/debounce' -import { useRecoilState } from 'recoil' +import { useRecoilState, useSetRecoilState } from 'recoil' import { useUserFavoritesStore } from 'features/UserFavorites/store' +import type { Match } from 'requests/getMatches/types' + import { getSportList } from 'requests/getSportList' import { getSportTeams, @@ -26,13 +28,12 @@ import { playerMatchesState, dataForPayHighlights } from '../../storeHighlightsA export type SportType = { id: number, - lexic: string, - name: string, + lexic: number, name_eng: string, - name_rus?: string, + name_rus: string, } -type SportTypeName = SportType& { +type SportTypeName = SportType & { name: string, } @@ -44,18 +45,26 @@ type TeamType = Team & { name: string, } +type Sound = { + id: number, + name: string, + src?: string, +} + +type StatsType = { + id: number, + name: string, +} + type FormType = { duration: string, playerValue: string, players: Array, selectedPlayer: PlayerType | null, - selectedSound: any, + selectedSound: Sound | null, selectedTeam: Team | null, sport: SportTypeName, - stats: { - id: number, - name: string, - }, + stats: StatsType, teamValue: string, } @@ -91,7 +100,7 @@ export const useHighlightsForm = () => { const [players, setPlayers] = useState>([]) const [formState, setFormState] = useState({} as FormType) const [playerMatches, setPlayerMatches] = useRecoilState(playerMatchesState) - const [dataHighlights, setDatahighlights] = useRecoilState(dataForPayHighlights) + const setDatahighlights = useSetRecoilState(dataForPayHighlights) const formRef = useRef(null) @@ -107,6 +116,7 @@ export const useHighlightsForm = () => { })) setTeams([]) setPlayers([]) + setPlayerMatches([]) } } @@ -127,7 +137,7 @@ export const useHighlightsForm = () => { })) } - const onSoundSelect = (selectedSound: any) => { + const onSoundSelect = (selectedSound: Sound | null) => { if (!selectedSound) return setFormState((state) => ({ ...state, @@ -135,7 +145,7 @@ export const useHighlightsForm = () => { })) } - const onStatsSelect = (stats: any) => { + const onStatsSelect = (stats: StatsType | null) => { if (!stats) return setFormState((state) => ({ ...state, @@ -181,26 +191,35 @@ export const useHighlightsForm = () => { } useEffect(() => { - getSportList().then((state: any) => setSports( - state?.map((sport: SportType) => ({ - ...sport, - name: sport?.name_eng, - })), - )) + getSportList() + .then((res) => setSports( + res?.map((sport: SportType) => ({ + ...sport, + name: sport?.name_eng, + })), + )) }, []) useEffect(() => { - if (playerHighlight?.sportType) { - setFormState((prevState: any) => ({ - ...prevState, + if (playerHighlight?.sportType && playerHighlight?.profile) { + setFormState((state: any) => ({ + ...state, + selectedPlayer: { + ...playerHighlight.profile, + name: `${playerHighlight.profile?.name_eng}`, + }, + selectedTeam: playerHighlight?.profile?.additionalInfo, 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( + () => debounce(() => getSportTeams( + formState?.sport?.id, + -1, + formState.teamValue, + ).then( ({ data }: SportTeamsType) => setTeams( data?.map((team: Team) => ({ ...team, @@ -208,6 +227,7 @@ export const useHighlightsForm = () => { })), ), ), 300), + // eslint-disable-next-line react-hooks/exhaustive-deps [formState.teamValue], ) @@ -215,36 +235,43 @@ export const useHighlightsForm = () => { if (formState?.teamValue?.length >= 3 && formState?.sport) { fetchTeams() } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [formState.teamValue, formState?.sport, playerHighlight]) useEffect(() => { - if (formState?.selectedPlayer?.id) { + if (formState?.selectedPlayer?.id && formState?.sport) { setDatahighlights({ data: { duration: Number(formState?.duration), lang: 'en', - matches: playerMatches?.map((match) => match.id), + matches: playerMatches?.filter(({ isChecked }) => (isChecked)).map(({ id }) => id), player_id: formState?.selectedPlayer?.id, price: playerMatches?.length * 25, sport_id: formState?.sport.id, stats: Boolean(formState?.stats?.id), }, + isDisabledButton: true, isOpenThanksPopup: false, }) } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [formState, playerMatches]) useEffect(() => { - formState?.selectedTeam - && getTeamPlayers(formState?.sport?.id, formState?.selectedTeam?.id) - .then((state: any) => setPlayersData(state?.map((player: PlayerType) => ({ + formState?.selectedTeam?.id + && getTeamPlayers( + formState?.sport?.id || playerHighlight.sportType, formState?.selectedTeam?.id + || playerHighlight?.profile?.additionalInfo?.id, + ) + .then((state) => setPlayersData(state?.map((player: Player) => ({ ...player, name: `${player?.firstname_eng} ${player?.lastname_eng}`, })))) + // eslint-disable-next-line react-hooks/exhaustive-deps }, [formState?.selectedTeam, playerHighlight]) useEffect(() => { - if (!formState?.selectedPlayer) return + if (!formState?.selectedPlayer || !formState?.sport) return formState?.selectedPlayer && getPlayerMatches({ @@ -254,8 +281,9 @@ export const useHighlightsForm = () => { sportType: formState?.sport?.id, }) .then(({ broadcast }) => setPlayerMatches( - broadcast.map((match: any) => ({ ...match, isChecked: false })), + broadcast.map((match: Match) => ({ ...match, isChecked: false })), )) + // eslint-disable-next-line react-hooks/exhaustive-deps }, [formState?.selectedPlayer, formState?.selectedTeam]) return { diff --git a/src/pages/HighlightsPage/components/FormHighlights/index.tsx b/src/pages/HighlightsPage/components/FormHighlights/index.tsx index 25035e03..21b2cc60 100644 --- a/src/pages/HighlightsPage/components/FormHighlights/index.tsx +++ b/src/pages/HighlightsPage/components/FormHighlights/index.tsx @@ -16,11 +16,12 @@ import { ScInputGroup, ScForm, ScInfoBlock, + ScInfoWrap, } from './styled' import { PriceInfoType, PriceInfo } from '../PriceInfo' -const labelWidth = 180 +const labelWidth = 190 const wrapperHeight = 50 export const FormHighlights = ({ price }: PriceInfoType) => { @@ -36,7 +37,6 @@ export const FormHighlights = ({ price }: PriceInfoType) => { stats, teamValue, }, - handleSubmit, onChangeMaxDuration, onChangePlayer, onChangeTeam, @@ -54,19 +54,21 @@ export const FormHighlights = ({ price }: PriceInfoType) => { return ( - {isMobileDevice ? : null} - - - - - -
- - - + + {isMobileDevice ? : null} + + + + + +
+ + + + @@ -124,6 +126,7 @@ export const FormHighlights = ({ price }: PriceInfoType) => { wrapperHeight={wrapperHeight} labelAfter='min' className='FormHighlights__input__duration' + required /> * { + margin-bottom: 10px; + } + ` + : ''}; ` export const ScTitle = styled.span` font-weight: 700; font-size: 34px; line-height: 40px; + + ${isMobileDevice + ? css` + font-size: 13px; + line-height: 150%; + ` + : ''}; + /* margin-bottom: 15px; */ ` @@ -33,6 +52,18 @@ export const ScText = styled.div` font-weight: 400; font-size: 16px; line-height: 28px; + + ${isMobileDevice + ? css` + font-size: 9px; + line-height: 150%; + ` + : ''}; +` + +export const ScInfoWrap = styled.div` + display: flex; + flex-direction: row; ` export const ScInputGroup = styled.div` @@ -68,6 +99,10 @@ export const ScForm = styled.form` & ul { max-height: 200px; } + & input { + text-overflow: ellipsis; + + } } ${isMobileDevice diff --git a/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx b/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx index cec6dab2..5e82da69 100644 --- a/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx +++ b/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx @@ -1,6 +1,5 @@ import { T9n } from 'features/T9n' import { Checkbox } from 'features/Common/Checkbox' -import { ArrowLoader } from 'features/ArrowLoader' import { SportIcon } from 'features/SportIcon' import { isMobileDevice } from 'config/userAgent' @@ -21,7 +20,7 @@ import { ScFakeTournament, ScFakeCheckbox, ScFakeWrapper, - ScLoaderWrapper, + ScCountMatches, } from './styled' export const MatchesHighlights = () => { @@ -30,7 +29,10 @@ export const MatchesHighlights = () => { return ( - {isMobileDevice ? ` (${playerMatches.length})` : ''} + + + {isMobileDevice ? ` (${playerMatches.length})` : ''} + {playerMatches.length ? (playerMatches?.map(({ @@ -73,9 +75,6 @@ export const MatchesHighlights = () => { )))} - {/* - - */} ) diff --git a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx index eb3222e8..8c67f7df 100644 --- a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx +++ b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx @@ -8,6 +8,13 @@ export const ScMatchesWrapper = styled.div` flex-direction: column; color: white; min-width: 360px; + + ${isMobileDevice + ? css` + margin-top: 20px; + align-items: center; + ` + : ''}; ` export const ScTitle = styled.span` @@ -19,6 +26,9 @@ export const ScTitle = styled.span` ${isMobileDevice ? css` text-align: center; + font-size: 13px; + line-height: 150%; + margin-bottom: 20px; ` : ''}; ` @@ -29,6 +39,11 @@ export const ScMatchesList = styled.div` position: relative; ${customScrollbar} + + ${isMobileDevice + ? css` + ` + : ''}; ` export const ScLabel = styled.div` @@ -61,6 +76,7 @@ export const ScCountryFlag = styled.img` margin-left: 0.567rem; object-fit: contain; object-position: bottom; + ${isMobileDevice ? css` width: 12px; @@ -112,3 +128,7 @@ export const ScLoaderWrapper = styled.div` top: 50%; z-index: 1; ` + +export const ScCountMatches = styled.span` + font-weight: 400; +` diff --git a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx b/src/pages/HighlightsPage/components/PriceInfo/styled.tsx index 8219861b..ec9ce29c 100644 --- a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx +++ b/src/pages/HighlightsPage/components/PriceInfo/styled.tsx @@ -19,12 +19,21 @@ export const ScPriceInfo = styled.div` > * { margin: 10px 0; + + ${isMobileDevice + ? css` + margin: 0; + ` + : ''}; } ${isMobileDevice ? css` font-size: 10px; padding: 5px; + height: auto; + border-radius: 14px; + margin-right: 15px; ` : ''}; ` diff --git a/src/pages/HighlightsPage/components/ThanksPopup/index.tsx b/src/pages/HighlightsPage/components/ThanksPopup/index.tsx index dfbc152a..aebcffab 100644 --- a/src/pages/HighlightsPage/components/ThanksPopup/index.tsx +++ b/src/pages/HighlightsPage/components/ThanksPopup/index.tsx @@ -1,6 +1,5 @@ import { Icon } from 'features/Icon' import { T9n } from 'features/T9n' -import { useState } from 'react' import { useRecoilState } from 'recoil' @@ -15,7 +14,6 @@ import { import { dataForPayHighlights } from '../../storeHighlightsAtoms' export const ThanksPopup = () => { - const [isOpenThanksPopup, setIsOpenThanksPopup] = useState(true) const [dataHighlights, setDataHighlights] = useRecoilState(dataForPayHighlights) return ( @@ -33,7 +31,11 @@ export const ThanksPopup = () => { - setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })}> + { + setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false }) + window.location.reload() + }} + > Ok diff --git a/src/pages/HighlightsPage/index.tsx b/src/pages/HighlightsPage/index.tsx index f0840c3a..b6a72cd5 100644 --- a/src/pages/HighlightsPage/index.tsx +++ b/src/pages/HighlightsPage/index.tsx @@ -8,7 +8,6 @@ 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 { FormHighlights } from './components/FormHighlights' @@ -16,8 +15,10 @@ import { MatchesHighlights } from './components/MatchesHighlights' import { ThanksPopup } from './components/ThanksPopup' import { - playerMatchesState, + dataForPayHighlights, + MatchType, openPopupChangeCard, + playerMatchesState, } from './storeHighlightsAtoms' import { @@ -27,16 +28,23 @@ import { ScWrapperContent, ScButton, ScButtonWrap, + ScPrice, } from './styled' const HighlightsPage = () => { const playerMatches = useRecoilValue(playerMatchesState) const [isOpenPopupChangeCard, setIsOpenPopupChangeCard] = useRecoilState(openPopupChangeCard) - const countIsCheckedMatches = playerMatches?.filter( - ({ isChecked }: any) => isChecked, - ).length + const { data } = useRecoilValue(dataForPayHighlights) + + const isNotEmpty = !data?.duration + || !data?.player_id + || !data?.sport_id + || !data?.matches.length + || !data?.stats - console.log(playerMatches) + const price = playerMatches?.filter( + ({ isChecked }: MatchType) => isChecked, + ).length * 25 return ( @@ -46,13 +54,16 @@ const HighlightsPage = () => { - {isMobileDevice ? null : } - + {isMobileDevice ? null : } + setIsOpenPopupChangeCard(true)}> - + + + {isMobileDevice ? ` | $${price}` : ''} + @@ -64,7 +75,7 @@ const HighlightsPage = () => { /> -) + ) } export default HighlightsPage diff --git a/src/pages/HighlightsPage/storeHighlightsAtoms.tsx b/src/pages/HighlightsPage/storeHighlightsAtoms.tsx index 78374610..33a68085 100644 --- a/src/pages/HighlightsPage/storeHighlightsAtoms.tsx +++ b/src/pages/HighlightsPage/storeHighlightsAtoms.tsx @@ -2,8 +2,11 @@ import { atom } from 'recoil' import type { Match } from 'requests' -export type PlayerMatchesType = Array +export type PlayerMatchesType = Array + +export type MatchType = Match & { + isChecked: boolean, +} type DataForm = { data: { @@ -15,6 +18,7 @@ type DataForm = { sport_id: number, stats: boolean, }, + isDisabledButton: boolean, isOpenThanksPopup: boolean, } diff --git a/src/pages/HighlightsPage/styled.tsx b/src/pages/HighlightsPage/styled.tsx index d2e869d2..3e3c23fc 100644 --- a/src/pages/HighlightsPage/styled.tsx +++ b/src/pages/HighlightsPage/styled.tsx @@ -32,6 +32,11 @@ export const ScWrapperContent = styled.div` ? css` padding: 5px; flex-direction: column; + + + @media screen and (orientation: landscape) { + align-items: center; + } ` : ''}; ` @@ -50,3 +55,8 @@ export const ScButtonWrap = styled.div` justify-content: center; margin-bottom: 100px; ` + +export const ScPrice = styled.span` + font-weight: 400; + font-size: 14px; +` diff --git a/src/requests/getSportList.tsx b/src/requests/getSportList.tsx index 0f915faa..edb7f7fd 100644 --- a/src/requests/getSportList.tsx +++ b/src/requests/getSportList.tsx @@ -10,6 +10,8 @@ const proc = PROCEDURES.get_sport_list export type SportList = Array<{ id: SportTypes, lexic: number, + name_eng: string, + name_rus: string, }> export const getSportList = (): Promise => { diff --git a/src/requests/onePayment.tsx b/src/requests/onePayment.tsx index c1ac9ace..8535756d 100644 --- a/src/requests/onePayment.tsx +++ b/src/requests/onePayment.tsx @@ -1,6 +1,8 @@ import { API_ROOT } from 'config' import { callApi } from 'helpers' +import { handleUnsuccessfulSubscription } from './buySubscription/handleUnsuccessfulSubscription' + export type Props = { cardId: string, order: { @@ -28,6 +30,7 @@ export const onePayment = async ({ order, price: order.price, }, + type: 'highlights', }, service: 'stripe_ott', }, @@ -36,5 +39,5 @@ export const onePayment = async ({ return callApi({ config, url: `${API_ROOT}/account/payments`, - }) + }).catch(handleUnsuccessfulSubscription) }