feat(#2526): add sounds and fix label width, default values and disabled btn

src/components/AudioPlayer/index.tsx

@@ -9,10 +9,10 @@ type AudioPropsType = {
 }
 
 export const AudioPlayer = ({ url }: AudioPropsType) => {
-  const { toggle } = useAudioPlayer(url)
+  const { playing, toggle } = useAudioPlayer(url)
 
   return (
-    <ScAudioContainer onClick={toggle}>
+    <ScAudioContainer onClick={toggle} playing={playing}>
       <Icon refIcon='Sound' />
     </ScAudioContainer>
   )

src/components/AudioPlayer/styled.tsx

@@ -1,4 +1,6 @@
 import styled from 'styled-components/macro'
 
-export const ScAudioContainer = styled.div`
+export const ScAudioContainer = styled.div<{ playing: boolean }>`
+  opacity: ${({ playing }) => (playing ? 1 : 0.5)};
+  color: ${({ playing }) => (playing ? 'white' : '')};
 `

src/features/AddCardForm/components/Form/hooks/index.tsx

@@ -24,6 +24,7 @@ import { useObjectState } from 'hooks'
 
 import { useCardsStore } from 'features/CardsStore'
 import { useLexicsStore } from 'features/LexicsStore'
+import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
 
 import { dataForPayHighlights } from 'pages/HighlightsPage/storeHighlightsAtoms'
 
@@ -86,6 +87,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
   const [errorMessage, setErrorMessage] = useState('')
   const [loader, setLoader] = useState(false)
   const [dataHighlights, setDataHighlights] = useRecoilState(dataForPayHighlights)
+  const { onConfirmationSuccess, onUnsuccessfulSubscription } = useBuyMatchPopupStore()
 
   const {
     countries,
@@ -184,6 +186,7 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
         cardId: defaultCard?.id,
         order: { ...dataHighlights?.data },
       })
+        .then(() => onConfirmationSuccess, onUnsuccessfulSubscription)
         .then(() => {
           setDataHighlights((prev) => ({
             ...prev,
@@ -227,13 +230,14 @@ export const useFormSubmit = ({ onAddSuccess }: Props) => {
       setLoader(true)
       onAddCard(token.id)
         .then(onAddSuccess)
-        .then(() => setInputStates(initialState))
+        .then(() => defaultCard && isHighlightsPage && setInputStates(initialState))
         .then(() => {
-          if (defaultCard) {
+          if (defaultCard && isHighlightsPage) {
             onePayment({
               cardId: defaultCard.id,
               order: { ...dataHighlights?.data },
             })
+              // .then(notifySuccessfulSubscription)
               .then(() => {
                 setDataHighlights((prev) => ({
                   ...prev,

src/features/BuyMatchPopup/store/hooks/index.tsx

@@ -131,7 +131,7 @@ export const useBuyMatchPopup = () => {
 
   const onConfirmationSuccess = ({ id }: PaymentIntent) => {
     if (!selectedPackage) return
-    const item = selectedPackage.originalObject
+    const item = selectedPackage?.originalObject
     notifySuccessfulSubscription({ item, paymentIntentId: id })
       .then(onSuccessfulSubscription, goToError)
   }
@@ -189,10 +189,12 @@ export const useBuyMatchPopup = () => {
     match,
     matchSubscriptions,
     onBuyClick,
+    onConfirmationSuccess,
     onNext,
     onPackageSelect,
     onPeriodSelect,
     onSubscriptionSelect,
+    onUnsuccessfulSubscription,
     open: openPopup,
     postPaymentHandler,
     selectedPackage,

src/features/Combobox/index.tsx

@@ -121,7 +121,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
                   {option.name}
                   {option?.src
                     ? (
-                      <ScAudioWrap>
+                      <ScAudioWrap key={option.id}>
                         <AudioPlayer url={option?.src ?? ''} />
                       </ScAudioWrap>
                     ) : ''}

src/features/Combobox/styled.tsx

@@ -49,7 +49,7 @@ export const ListOption = styled.li.attrs(() => ({
     color: #fff;
   }
 `
-export const WrapperIcon = styled.div`
+export const WrapperIcon = styled.span`
   position: absolute;
   right: 22px;
   top: 50%;

src/features/Common/Input/styled.tsx

@@ -186,7 +186,7 @@ export const Error = styled(T9n)<ErrorProps>`
       : ''
   )}
 `
-export const LabelAfter = styled.p<TitleProps>`
+export const LabelAfter = styled.span<TitleProps>`
   font-style: normal;
   font-weight: normal;
   white-space: nowrap;

src/features/UserAccount/components/ChangeCardPopup/index.tsx

@@ -8,6 +8,7 @@ import { Modal } from './styled'
 type Props = {
   btnName?: string,
   changeCardPopupOpen: boolean,
+  closeButton?: boolean,
   setChangeCardPopupOpen: (open: boolean) => void,
   title?: string,
 }
@@ -15,6 +16,7 @@ type Props = {
 export const ChangeCardPopup = ({
   btnName,
   changeCardPopupOpen,
+  closeButton,
   setChangeCardPopupOpen,
   title,
 }: Props) => {
@@ -29,7 +31,7 @@ export const ChangeCardPopup = ({
     <Modal
       isOpen={changeCardPopupOpen}
       close={() => setChangeCardPopupOpen(false)}
-      withCloseButton
+      withCloseButton={closeButton}
     >
       <CardStep
         title={title ?? 'change_card'}

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

@@ -34,6 +34,7 @@ export type SportType = {
 }
 
 type SportTypeName = SportType & {
+  disabled?: boolean,
   name: string,
 }
 
@@ -63,7 +64,7 @@ type FormType = {
   selectedPlayer: PlayerType | null,
   selectedSound: Sound | null,
   selectedTeam: Team | null,
-  sport: SportTypeName,
+  sport: SportTypeName | null,
   stats: StatsType,
   teamValue: string,
 }
@@ -74,12 +75,75 @@ const sounds = [
     name: 'No',
   },
   {
-    id: 1,
+    id: 19469,
-    name: 'Sound 1',
+    lexic: 19469,
+    name: 'Main theme',
     src: '/sounds/background_track.mp3',
   },
+  {
+    id: 19470,
+    lexic: 19470,
+    name: 'First music',
+    src: 'sounds/1.mp3',
+  },
+  {
+    id: 19471,
+    lexic: 19471,
+    name: 'Basement by Monako',
+    src: '/sounds/basement by monako Artlist.mp3',
+  },
+  {
+    id: 19472,
+    lexic: 19472,
+    name: 'Buss-it by Yarin Primak',
+    src: '/sounds/buss-it---instrumental-version by yarin-primak Artlist.mp3',
+  },
+  {
+    id: 19473,
+    lexic: 19473,
+    name: "Can't stop me now by Brightout",
+    src:
+      '/sounds/cant-stop-me-now-instrumental-brightout-musicbed-licensed.mp3',
+  },
+  {
+    id: 19474,
+    lexic: 19474,
+    name: 'Follow me by ShyGhy',
+    src: '/sounds/follow-me-shyghy-musicbed-licensed.mp3',
+  },
+  {
+    id: 19475,
+    lexic: 19475,
+    name: 'Gravity by Stanley Gurvich',
+    src: '/sounds/gravity by stanley-gurvich Artlist.mp3',
+  },
+  {
+    id: 19476,
+    lexic: 19476,
+    name: 'Light it up by Bloom & the Bliss',
+    src:
+      '/sounds/light-it-up-instrumental-bloom-the-bliss-musicbed-licensed.mp3',
+  },
+  {
+    id: 19477,
+    lexic: 19477,
+    name: 'Living future memories by Generdyn',
+    src: '/sounds/living-future-memories-generdyn-musicbed-licensed.mp3',
+  },
+  {
+    id: 19478,
+    lexic: 19478,
+    name: 'Look at me now by Paper kings',
+    src:
+      '/sounds/look-at-me-now-instrumental-paper-kings-musicbed-licensed.mp3',
+  },
+  {
+    id: 19479,
+    lexic: 19479,
+    name: 'Unbroken by Roary',
+    src: '/sounds/unbroken-roary-musicbed-licensed.mp3',
+  },
 ]
-
 const summaryStats = [
   {
     id: 0,
@@ -91,6 +155,18 @@ const summaryStats = [
   },
 ]
 
+const defaultValues = {
+  duration: '2',
+  playerValue: '',
+  players: [],
+  selectedPlayer: null,
+  selectedSound: null,
+  selectedTeam: null,
+  sport: null,
+  stats: summaryStats[1],
+  teamValue: '',
+}
+
 export const useHighlightsForm = () => {
   const { playerHighlight } = useUserFavoritesStore()
 
@@ -98,7 +174,7 @@ export const useHighlightsForm = () => {
   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 [formState, setFormState] = useState<FormType>(defaultValues)
   const [playerMatches, setPlayerMatches] = useRecoilState(playerMatchesState)
   const setDatahighlights = useSetRecoilState(dataForPayHighlights)
 
@@ -193,13 +269,20 @@ export const useHighlightsForm = () => {
   useEffect(() => {
     getSportList()
       .then((res) => setSports(
-        res?.map((sport: SportType) => ({
+        res
-          ...sport,
+          ?.filter((sport: SportType) => sport.id === 3)
-          name: sport?.name_eng,
+          .map((sport: SportType) => ({
-        })),
+            ...sport,
+            name: sport?.name_eng,
+          })),
       ))
   }, [])
 
+  useEffect(() => {
+    onSportSelect(sports[0])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sports])
+
   useEffect(() => {
     if (playerHighlight?.sportType && playerHighlight?.profile) {
       setFormState((state: any) => ({
@@ -215,7 +298,7 @@ export const useHighlightsForm = () => {
   }, [sports, playerHighlight, teams])
 
   const fetchTeams = useMemo(
-    () => debounce(() => getSportTeams(
+    () => debounce(() => formState?.sport?.id && getSportTeams(
       formState?.sport?.id,
       -1,
       formState.teamValue,

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

@@ -21,7 +21,7 @@ import {
 
 import { PriceInfoType, PriceInfo } from '../PriceInfo'
 
-const labelWidth = 190
+const labelWidth = 100
 const wrapperHeight = 50
 
 export const FormHighlights = ({ price }: PriceInfoType) => {
@@ -117,6 +117,7 @@ export const FormHighlights = ({ price }: PriceInfoType) => {
           />
           <Input
             disabled={!sport}
+            defaultValue='2'
             value={duration?.toString() || ''}
             labelLexic='maximal_duration'
             labelWidth={labelWidth}

src/pages/HighlightsPage/components/MatchesHighlights/index.tsx

@@ -3,6 +3,7 @@ import { Checkbox } from 'features/Common/Checkbox'
 import { SportIcon } from 'features/SportIcon'
 
 import { isMobileDevice } from 'config/userAgent'
+import { format } from 'date-fns'
 
 import { useHighlighMatches } from './hooks'
 
@@ -53,7 +54,7 @@ export const MatchesHighlights = () => {
             label={(
               <ScLabel>
                 <ScDate>
-                  {date}
+                  {format(new Date(date), 'd MMM yyyy H:mm')}
                 </ScDate>&nbsp;
                 {team1.name_eng} - {team2.name_eng}
                 <ScTournament>
@@ -67,7 +68,7 @@ export const MatchesHighlights = () => {
             )}
           />
         ))) : (Array.from(Array(12)).map(() => (
-          <ScFakeWrapper>
+          <ScFakeWrapper key={Math.random()}>
             <ScFakeCheckbox />
             <ScFakeTournament>
               <ScFakeDate />

src/pages/HighlightsPage/components/ThanksPopup/index.tsx

@@ -33,7 +33,7 @@ export const ThanksPopup = () => {
       </ScText>
       <ScButton onClick={() => {
         setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })
-        window.location.reload()
+        window.location.href = '/'
       }}
       >
         Ok

src/pages/HighlightsPage/index.tsx

@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'
 import { isMobileDevice } from 'config/userAgent'
 import { PAGES } from 'config'
 
+import { isBoolean } from 'lodash'
+
 import { useRecoilValue, useRecoilState } from 'recoil'
 
 import { T9n } from 'features/T9n'
@@ -40,7 +42,8 @@ const HighlightsPage = () => {
   || !data?.player_id
   || !data?.sport_id
   || !data?.matches.length
-  || !data?.stats
+  || !isBoolean(data?.stats)
+  || data?.matches.length > 10
 
   const price = playerMatches?.filter(
     ({ isChecked }: MatchType) => isChecked,
@@ -72,6 +75,7 @@ const HighlightsPage = () => {
         changeCardPopupOpen={isOpenPopupChangeCard}
         setChangeCardPopupOpen={setIsOpenPopupChangeCard}
         title='payment'
+        closeButton={false}
       />
       <ThanksPopup />
     </ScWrapper>

src/requests/buySubscription/notifySuccessfulSubscription.tsx

@@ -4,7 +4,7 @@ import { callApi } from 'helpers'
 import type { SubscriptionResponse } from '../getSubscriptions'
 
 type Args = {
-  item: SubscriptionResponse,
+  item?: SubscriptionResponse,
   paymentIntentId: string,
 }