fix(#2526): add check empty form and send data profile player from player page

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) => ({
+        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))
     }
   }

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,10 +28,9 @@ 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 & {
@@ -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<string>,
   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<Array<PlayerType>>([])
   const [formState, setFormState] = useState<FormType>({} as FormType)
   const [playerMatches, setPlayerMatches] = useRecoilState(playerMatchesState)
-  const [dataHighlights, setDatahighlights] = useRecoilState(dataForPayHighlights)
+  const setDatahighlights = useSetRecoilState(dataForPayHighlights)
 
   const formRef = useRef<HTMLFormElement>(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,8 +191,9 @@ export const useHighlightsForm = () => {
   }
 
   useEffect(() => {
-    getSportList().then((state: any) => setSports(
-      state?.map((sport: SportType) => ({
+    getSportList()
+      .then((res) => setSports(
+        res?.map((sport: SportType) => ({
           ...sport,
           name: sport?.name_eng,
         })),
@@ -190,17 +201,25 @@ export const useHighlightsForm = () => {
   }, [])
 
   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 {

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,6 +54,7 @@ export const FormHighlights = ({ price }: PriceInfoType) => {
 
   return (
     <ScWrapper>
+      <ScInfoWrap>
         {isMobileDevice ? <PriceInfo price={price} /> : null}
         <ScInfoBlock>
           <ScTitle>
@@ -67,6 +68,7 @@ export const FormHighlights = ({ price }: PriceInfoType) => {
             />
           </ScText>
         </ScInfoBlock>
+      </ScInfoWrap>
       <ScForm
         ref={formRef}
       >
@@ -124,6 +126,7 @@ export const FormHighlights = ({ price }: PriceInfoType) => {
             wrapperHeight={wrapperHeight}
             labelAfter='min'
             className='FormHighlights__input__duration'
+            required
           />
           <Combobox
             disabled={!sport}

src/pages/HighlightsPage/components/FormHighlights/styled.tsx

@@ -20,12 +20,31 @@ export const ScInfoBlock = styled.div`
   flex-direction: column;
   justify-content: space-between;
   height: 186px;
+
+  ${isMobileDevice
+    ? css`
+        height: auto;
+        justify-content: start;
+
+        > * {
+          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

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 (
     <ScMatchesWrapper>
       <ScTitle>
-        <T9n t='matches_highlight' />{isMobileDevice ? ` (${playerMatches.length})` : ''}
+        <T9n t='matches_highlight' />
+        <ScCountMatches>
+          {isMobileDevice ? ` (${playerMatches.length})` : ''}
+        </ScCountMatches>
       </ScTitle>
       <ScMatchesList>
         {playerMatches.length ? (playerMatches?.map(({
@@ -73,9 +75,6 @@ export const MatchesHighlights = () => {
             </ScFakeTournament>
           </ScFakeWrapper>
         )))}
-        {/* <ScLoaderWrapper>
-          <ArrowLoader />
-        </ScLoaderWrapper> */}
       </ScMatchesList>
     </ScMatchesWrapper>
   )

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;
+`

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

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 = () => {
       <ScText>
         <T9n t='notify_by_email' />
       </ScText>
-      <ScButton onClick={() => setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })}>
+      <ScButton onClick={() => {
+        setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })
+        window.location.reload()
+      }}
+      >
         Ok
       </ScButton>
     </ScModal>

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 (
     <ScWrapper>
@@ -46,13 +54,16 @@ const HighlightsPage = () => {
         </Link>
       </ScHeader>
       <ScWrapperContent>
-        {isMobileDevice ? null : <PriceInfo price={countIsCheckedMatches * 25} />}
-        <FormHighlights price={countIsCheckedMatches * 25} />
+        {isMobileDevice ? null : <PriceInfo price={price} />}
+        <FormHighlights price={price} />
         <MatchesHighlights />
       </ScWrapperContent>
       <ScButtonWrap onClick={() => setIsOpenPopupChangeCard(true)}>
-        <ScButton disabled={!countIsCheckedMatches}>
+        <ScButton disabled={isNotEmpty}>
           <T9n t='order_and_buy' />
+          <ScPrice>
+            {isMobileDevice ? ` | $${price}` : ''}
+          </ScPrice>
         </ScButton>
       </ScButtonWrap>
       <CompanyInfo textAlign='center' />

src/pages/HighlightsPage/storeHighlightsAtoms.tsx

@@ -2,8 +2,11 @@ import { atom } from 'recoil'
 
 import type { Match } from 'requests'
 
-export type PlayerMatchesType = Array<Match & {isChecked: boolean}
->
+export type PlayerMatchesType = Array<MatchType>
+
+export type MatchType = Match & {
+  isChecked: boolean,
+}
 
 type DataForm = {
   data: {
@@ -15,6 +18,7 @@ type DataForm = {
     sport_id: number,
     stats: boolean,
   },
+  isDisabledButton: boolean,
   isOpenThanksPopup: boolean,
 }
 

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;
+`

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<SportList> => {

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