{"version":3,"file":"js/scripts_react_mls-match-list_components_MatchModal_MatchModal_js.js?_t=40bbb114290c69e9079c","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA;AAAA;AAEA;AAEA;AACA;AAAA;AACA;AAEA;AAAA;AACA;AAEA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAEA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAAA;AAGA;AACA;AAEA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AAGA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAKA;AAGA;AACA;AAAA;AAGA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AAEA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AAGA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAOA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AAAA;AAGA;AAEA;AAEA;AACA;AACA;AAAA;AAGA;AACA;;;;;;;;;;;;;;;;;;;AC7LA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAEA;AAIA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAwBA;AAEA;;;;;;;;;;;;;;;;ACrDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AAEA;AAEA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAQA;AAAA;AACA;AACA;AAGA;AAMA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AAAA;AACA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAkBA;AAEA;AAOA;AA+BA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAWA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAIA;AAEA;AAQA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAIA;AAEA;AAaA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AACA;AAOA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AACA;AAOA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AACA;AAUA;AAEA;;;;;;;;;;;;;;;;ACnRA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAMA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAIA;AAGA;AAEA;;;;;;;;;;;;;;;;AC5BA","sources":["webpack://@mlssoccer/netcore/./scripts/react/mls-match-feed/utils.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/components/Club/Club.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/components/Club/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/components/MatchModal/MatchModal.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/TicketIcon/TicketIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/TicketIcon/index.js"],"sourcesContent":["import { periodTypes } from \"../mls-match-list/utils\";\nimport { matchEventSubtypes, matchEventTypes } from \"../mls-match-summary/utils\";\nimport { highlightTypes } from \"../shared/utils\";\n\nexport const feedTypes = {\n  goal: 'goal',\n};\n\nexport function getFeedType(type) {\n  switch (type) {\n    case feedTypes.goal:\n    default: {\n      return null;\n    }\n  }\n}\n\nexport function mergeFeedWithVideosAndPlayers({ feed, homeClub, mlsMatch, awayClub, videoList, players }) {\n  if (!feed || feed.length === 0) {\n    return null;\n  }\n\n  const { match_information } = mlsMatch;\n  const { home_team_goals = 0, away_team_goals = 0, home_team_penalty_goals = 0, away_team_penalty_goals = 0 } = match_information;\n\n  let homeScore = home_team_goals + home_team_penalty_goals;\n  let awayScore = away_team_goals + away_team_penalty_goals;\n\n  const composedFeed = [];\n\n  for (let i = 0; i < feed.length; i++) {\n    const current = feed[i] || {};\n    const { player_id, team_id, second_player_id } = current;\n    const isHome = team_id === homeClub?.team_id;\n    const isAway = team_id === awayClub?.team_id;\n\n    const isLastTimingCommentary = current?.type === matchEventTypes.startOfPeriod && current?.period === periodTypes.FirstHalf;\n\n    const matchedVideo = videoList != null && videoList.length > 0 ? videoList.find(video => {\n      const { fields } = video || {};\n      const { sportecEventId } = fields || {};\n\n      return sportecEventId === current?.event_id;\n    }) : null;\n\n    const matchedPlayer = Array.isArray(players) ? players?.find(player => player?.person_id === player_id) || null : null;\n    const secondMatchedPlayer = second_player_id ? Array.isArray(players) ? players?.find(player => player?.person_id === second_player_id) || null : null : null;\n\n    const { thumbnail, headshotNationalTeam, headshotClub } = matchedPlayer || {};\n\n    let adjustedHomeScore = homeScore;\n    let adjustedAwayScore = awayScore;\n\n    if (team_id) {\n      if (current.type === matchEventTypes.goal) {\n        if (isHome) {\n          adjustedHomeScore = adjustedHomeScore - 1;\n        }\n        else if (isAway) {\n          adjustedAwayScore = adjustedAwayScore - 1;\n        }\n      }\n\n      if (current.sub_type === matchEventSubtypes.ownGoal) {\n        if (team_id == homeClub?.sportecId) {\n          adjustedAwayScore = adjustedAwayScore - 1;\n        }\n        else if (team_id == awayClub?.sportecId) {\n          adjustedHomeScore = adjustedHomeScore - 1;\n        }\n      }\n    }\n\n    composedFeed.push({\n      ...current,\n      first_player: composePlayer(matchedPlayer),\n      second_player: composePlayer(secondMatchedPlayer),\n      headshotNationalTeam: headshotNationalTeam != null ? headshotNationalTeam : null,\n      headshotClub: headshotClub != null ? headshotClub : null,\n      image: thumbnail != null ? thumbnail : null,\n      video: matchedVideo != null ? matchedVideo : null,\n      homeScore,\n      awayScore,\n      isLastTimingCommentary,\n      scoreChange: adjustedHomeScore !== homeScore\n        ? \"home\"\n        : adjustedAwayScore !== awayScore\n          ? \"away\"\n          : null\n    });\n\n    homeScore = adjustedHomeScore;\n    awayScore = adjustedAwayScore;\n  }\n\n  return composedFeed;\n}\n\nfunction composePlayer(player = {}) {\n  return {\n    ...player,\n    known_name: player?.short_name,\n    full_name: `${player?.first_name} ${player?.last_name}`,\n    position: player?.playing_position,\n    jersey: player?.shirt_number,\n    slug: player?.person_id,\n  }\n}\n\nexport function mergePlayers({ away, home }) {\n  return [...away?.players, ...home?.players];\n}\n\nexport function mergePages(pages = []) {\n  return pages && pages.length > 0 ? pages.reduce((accum, current = []) => {\n    return [...accum, ...current];\n  }, []) : [];\n}\n\nexport function composeVideoList(forgeVideos, validators) {\n  if (forgeVideos == null) {\n    return [];\n  }\n\n  const {\n    fullGameTags,\n    condensedGameTags,\n    gameHighlightsTags\n  } = validators || {};\n\n  return forgeVideos.map(v => {\n    const { tags } = v || {};\n\n    if (tags == null) {\n      return v;\n    }\n\n    const tagList = [];\n    for (let i = 0; i < tags.length; i++) {\n      const currentTag = tags[i];\n      const neutralSlug = currentTag?.neutralSlug;\n\n      if (neutralSlug != null) {\n        tagList.push(neutralSlug);\n      }\n    }\n\n    const isFullGame = tagValidator(tagList, fullGameTags);\n    const isCondensedGame = tagValidator(tagList, condensedGameTags);\n    const isGameHighlights = tagValidator(tagList, gameHighlightsTags);\n\n    return {\n      ...v,\n      fields: {\n        ...v.fields,\n        highlightType: isFullGame\n          ? highlightTypes.fullGame\n          : isCondensedGame\n            ? highlightTypes.condensedGame\n            : isGameHighlights\n              ? highlightTypes.gameHighlights\n              : null\n      }\n    };\n  });\n}\n\nexport function removeDuplicates(items = [], key = \"\") {\n\n  if (!Array.isArray(items) || !key) {\n    return []\n  }\n\n  const itemIds = {};\n\n  items.forEach(item => {\n    itemIds[item[key]] = item;\n  })\n\n  return Object.values(itemIds);\n\n}\n\nfunction tagValidator(arr, target) {\n  if (arr == null || target == null) {\n    return false;\n  }\n\n  return target.every(v => arr.some(x => x.includes(v)));\n}\n","import React from 'react';\nimport Picture from \"../../../shared/components/Picture\";\nimport { formatImageUrl } from \"../../../shared/utils\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\n\nconst Club = ({ clubData, isHome, isWinner, showShortName = false, showAbbreviation = false }) => {\n  const { mediaQueries } = useReactAppState();\n\n  const { isMediumLargeMin } = mediaQueries || {};\n\n  const { abbreviation, fullName, shortName, logoColorUrl } = clubData || {};\n  const availableShortName = shortName ? shortName : fullName;\n  const isHomeModifierClass = `mls-o-match-strip__club--${isHome ? 'home' : 'away'}`;\n  const isWinnerModifierClass = `${isWinner ? 'mls-o-match-strip__club--winner' : ''}`;\n  if (!abbreviation && !availableShortName) {\n    return null;\n  }\n\n  const { highQuality } = logoColorUrl ? formatImageUrl(logoColorUrl, { format: \"w_128,h_128,c_pad\", extension: \"f_png\" }) : { highQuality: \"/assets/images/Fallbacklogo-grey.png\" };\n\n  return (\n    <div className={`mls-o-match-strip__club ${isHomeModifierClass} ${isWinnerModifierClass}`}>\n      <div className=\"mls-o-match-strip__club-name\">\n        <span className=\"mls-o-match-strip__club-logo\">\n            <Picture\n              src={highQuality}\n              title={name}\n              role=\"presentation\"/>\n          </span>\n        {\n          showAbbreviation\n            ? (\n              <span className=\"mls-o-match-strip__club-abbreviation\">\n                {abbreviation}\n              </span>\n            ) : isMediumLargeMin || showShortName\n              ? (\n                <span className=\"mls-o-match-strip__club-short-name\">\n                  {availableShortName}\n                </span>\n              )\n              :\n              (\n                <span className=\"mls-o-match-strip__club-abbreviation\">\n                  {abbreviation}\n                </span>\n              )\n        }\n      </div>\n    </div>\n  );\n};\n\nexport default Club;\n","export { default } from './Club';\n","import React from 'react';\nimport { useQuery } from \"react-query\";\nimport Club from \"../Club\";\nimport CloseIcon from \"../../../shared/svg/CloseIcon\";\nimport PlayCircleIcon from \"../../../shared/svg/PlayCircleIcon\";\nimport TicketIcon from \"../../../shared/svg/TicketIcon\";\nimport ToggleButton from \"../../../shared/components/ToggleButton\";\nimport { statusTypes } from \"../../utils\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { composeGeoLocatedProviders, countryTypes, highlightTypes, matchHighlightsTagSlug } from \"../../../shared/utils\";\nimport { modalActionTypes, modalTypes } from \"../../../shared/hooks/useModalOptions\";\nimport VideoModal from \"../../../shared/components/VideoModal\";\nimport { trackMatchHubClick } from '../../../../libraries/_modules/tracking/helpers';\nimport { fetchClient } from \"../../../shared/api/fetching\";\nimport { apiURL, forgeMatchContentVideosAPI, forgeMatchVideosAPI } from \"../../../shared/api/variables\";\nimport { composeVideoList } from \"../../../mls-match-feed/utils\";\n\nconst MatchModal = ({ queryConfig, matchSportecId, closeModal, slug, status, competition, homeClubData, awayClubData, matchDateTime, venue, listType, promoInfo, mediaProviders, winnerStatus, isTimeTbd }) => {\n  const { t, location, updateModalOptions, videoTags } = useReactAppState();\n\n  const forgeMatchVideosEndpoint = forgeMatchVideosAPI({ matchSportecId });\n  const forgeMatchContentVideosEndpoint = forgeMatchContentVideosAPI({ matchSlug: slug });\n\n  const { data: forgeMatchVideos } = useQuery({\n    queryKey: [\"forge-match-videos\", matchSportecId],\n    queryFn: () => fetchClient({ apiURL: apiURL.forgeDAPI, endpoint: forgeMatchVideosEndpoint }),\n    ...queryConfig,\n    select: videos => videos?.items\n  });\n\n  const { data: forgeMatchContentVideos } = useQuery({\n    queryKey: [\"forge-match-content-videos\", slug],\n    queryFn: () => fetchClient({ apiURL: apiURL.forgeDAPI, endpoint: forgeMatchContentVideosEndpoint }),\n    ...queryConfig,\n    select: videos => videos?.items\n  });\n\n  const videoList = React.useMemo(() => {\n    const matchVideos = forgeMatchVideos?.length >= 0 && forgeMatchContentVideos?.length >= 0 ? [...forgeMatchVideos, ...forgeMatchContentVideos] : [];\n    return composeVideoList(matchVideos, videoTags);\n  }, [forgeMatchVideos, forgeMatchContentVideos]);\n\n  const { country } = location || {};\n  const { streaming, national, radio } = composeGeoLocatedProviders(mediaProviders, country);\n\n  const { homeLinear, awayLinear, homeStreaming, awayStreaming, clubLinear, clubStreaming, clubRadio } = mediaProviders || {};\n\n  const isNorthAmerica = country === countryTypes.canada || country === countryTypes.unitedStates;\n\n  const mergedProviders = [...national, ...streaming, ...radio, ...(homeLinear != null ? homeLinear : []), ...(awayLinear != null ? awayLinear : []), ...(homeStreaming != null ? homeStreaming : []), ...(awayStreaming != null ? awayStreaming : []), ...(clubLinear != null ? clubLinear : []), ...(clubStreaming != null ? clubStreaming : []), ...(clubRadio != null ? clubRadio : [])];\n  const mergedStreaming = [...(clubStreaming != null ? clubStreaming : []), ...streaming, ...(homeStreaming != null ? homeStreaming : []), ...(awayStreaming != null ? awayStreaming : [])];\n\n  const { firstPartyTickets, thirdPartyTickets } = promoInfo || {};\n  const { fullDate, matchFullDateTime } = matchDateTime || {};\n\n  const { name, city } = venue || {};\n  const displayVenueLocation = name != null && city != null\n    ? `${name}, ${city}`\n    : name != null\n      ? name\n      : city != null\n        ? city\n        : null;\n\n  const {\n    isHomeWinner,\n    isAwayWinner\n  } = winnerStatus || {};\n\n  const title = status?.abbreviation === statusTypes.live\n    ? t(\"match_watch_live\")\n    : status?.abbreviation === statusTypes.pre\n      ? t(\"ticketing_buy_tickets\")\n      : t(\"match_replay\");\n\n  const toggleDialog = (currentVideo) => {\n    const foundVideoIndex = videoList.findIndex((video) => {\n      return currentVideo._entityId === video._entityId;\n    });\n\n    const videos = [\n      currentVideo, ...videoList.slice(0, foundVideoIndex),\n      ...videoList.slice(foundVideoIndex + 1)\n    ];\n\n    updateModalOptions({ type: modalActionTypes.modalClassName, payload: \"mls-o-modal mls-o-modal--dark mls-o-modal--video-playlist\" });\n    updateModalOptions({ type: modalActionTypes.modalType, payload: modalTypes.default });\n    updateModalOptions({ type: modalActionTypes.label, payload: t(\"match_highlights\") });\n    updateModalOptions({ type: modalActionTypes.component, payload: VideoModal });\n    updateModalOptions({ type: modalActionTypes.modalData, payload: { videoList: videos, video: currentVideo } });\n  };\n\n  const gameHighlights = videoList.find(video => video?.fields?.highlightType === highlightTypes.gameHighlights || video?.tags.find(tag => tag?.slug === matchHighlightsTagSlug));\n  const fullGame = videoList.find(video => video?.fields?.highlightType === highlightTypes.fullGame);\n  const condensedGame = videoList.find(video => video?.fields?.highlightType === highlightTypes.condensedGame);\n\n  const handleClick = (clickItem) => () => {\n    trackMatchHubClick({\n      clickType: 'match modal button',\n      clickItem,\n      match: slug,\n      matchState: status?.abbreviation,\n      competition: competition.shortName,\n    });\n  };\n\n  if (!status) {\n    return null;\n  }\n\n  return (\n    <div className=\"mls-o-modal mls-o-modal--match mls-o-match-strip\">\n      <button onClick={closeModal} className=\"mls-o-buttons__slideshow\">\n        <CloseIcon size=\"xx-small\" />\n      </button>\n      <div className=\"mls-o-modal__title\">{title}</div>\n      <div className=\"mls-o-modal__club-group\">\n        <Club clubData={homeClubData} isWinner={isHomeWinner} isHome showShortName />\n        <div className=\"mls-o-modal__versus\">{t(\"match_vs\")}</div>\n        <Club clubData={awayClubData} isWinner={isAwayWinner} isHome={false} showShortName />\n      </div>\n      {\n        status?.abbreviation === statusTypes.live\n          ? (\n            <ul className=\"mls-o-match-strip__tv-streaming-provider-list\">\n              {\n                mergedProviders && mergedProviders.length > 0\n                  ? mergedProviders.map((provider, index) => {\n                    const { broadcasterName, broadcasterTypeLabel } = provider || {};\n\n                    return (\n                      broadcasterName != null && broadcasterTypeLabel != null\n                        ? (\n                          <li key={`${broadcasterName}-${index}`} className=\"mls-o-match-strip__tv-streaming-provider-item\">\n                            <span className=\"mls-o-match-strip__tv-streaming-provider-label\">{broadcasterTypeLabel}</span>\n                            <span className=\"mls-o-match-strip__tv-streaming-provider\">{broadcasterName}</span>\n                          </li>\n                        ) : null\n                    );\n                  })\n                  : null\n              }\n            </ul>\n          )\n          : (\n            <div className=\"mls-o-modal__match-info\">\n              {isTimeTbd ? <div className=\"mls-o-modal__date-time\">{fullDate ? `${fullDate}, ` : \"\"}TBD</div>\n                :\n                matchFullDateTime ? (\n                  <div className=\"mls-o-modal__date-time\">\n                    {matchFullDateTime}\n                  </div>\n                ) : null\n              }\n              {\n                displayVenueLocation\n                  ? <div className=\"mls-o-modal__venue\">{displayVenueLocation}</div>\n                  : null\n              }\n            </div>\n          )\n      }\n      <div className=\"mls-o-modal__cta-group\">\n        {\n          status?.abbreviation === statusTypes.live && isNorthAmerica\n            ? (\n              mergedStreaming && mergedStreaming.length > 0\n                ? mergedStreaming.map((item, index) => {\n                  const { broadcasterName, broadcasterStreamingURL, broadcasterShortName } = item || {};\n                  return (\n                    <a\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"mls-o-modal__cta\"\n                      key={`${broadcasterName}-${index}`}\n                      onClick={handleClick(\"watch live\")}\n                      href={broadcasterStreamingURL}>\n                      <PlayCircleIcon extraClasses={\"mls-o-modal__play-circle\"} />\n                      <span className=\"mls-o-modal__cta-label\">{`${t(\"match_watch_live_on\")} ${broadcasterShortName ? broadcasterShortName : broadcasterName}`}</span>\n                    </a>\n                  );\n                })\n                : null\n            )\n            : status?.abbreviation === statusTypes.pre\n              ? (\n                <>\n                  {\n                    firstPartyTickets?.url\n                      ? (\n                        <ToggleButton\n                          target={`${firstPartyTickets?.openInNewTab ? \"_blank\" : \"_self\"}`}\n                          rel={`${firstPartyTickets?.openInNewTab ? \"noopener noreferrer\" : \"\"}`}\n                          alt={`${firstPartyTickets?.accessibleText ? firstPartyTickets.accessibleText : \"\"}`}\n                          href={firstPartyTickets.url}\n                          onClick={handleClick(\"buy from club\")}\n                          // className={`mls-o-modal__cta ${firstPartyTickets.url.includes(\"seatgeek\") ? \"mls-o-modal__cta--third\" : \"mls-o-modal__cta--first\"}`}>\n                          className=\"mls-o-modal__cta mls-o-modal__cta--first\">\n                          {\n                            // firstPartyTickets.url.includes(\"seatgeek\")\n                            // ? <SeatGeekIcon extraClasses={\"mls-o-modal__third-party\"} />\n                            <TicketIcon extraClasses={\"mls-o-modal__tickets mls-o-modal__tickets\"} />\n                          }\n                          <span className=\"mls-o-modal__cta-label\">{firstPartyTickets?.displayText ? firstPartyTickets.displayText : t(\"buy_from_club\")}</span>\n                        </ToggleButton>\n                      )\n                      : null\n                  }\n                  {\n                    thirdPartyTickets?.url\n                      ? (\n                        <ToggleButton\n                          target={`${thirdPartyTickets?.openInNewTab ? \"_blank\" : \"_self\"}`}\n                          rel={`${thirdPartyTickets?.openInNewTab ? \"noopener noreferrer\" : \"\"}`}\n                          alt={`${thirdPartyTickets?.accessibleText != null ? thirdPartyTickets.accessibleText : \"\"}`}\n                          href={thirdPartyTickets.url}\n                          onClick={handleClick(\"buy from fans\")}\n                          // className={`mls-o-modal__cta ${thirdPartyTickets.url.includes(\"seatgeek\") ? \"mls-o-modal__cta--third\" : \"mls-o-modal__cta--first\"}`}>\n                          className=\"mls-o-modal__cta mls-o-modal__cta--first\">\n                          {\n                            // thirdPartyTickets.url.includes(\"seatgeek\")\n                            // ? <SeatGeekIcon extraClasses={\"mls-o-modal__third-party\"} />\n                            <TicketIcon extraClasses={\"mls-o-modal__tickets mls-o-modal__tickets\"} />\n                          }\n                          <span className=\"mls-o-modal__cta-label\">{thirdPartyTickets?.displayText ? thirdPartyTickets.displayText : t(\"buy_from_fans\")}</span>\n                        </ToggleButton>\n                      )\n                      : null\n                  }\n                </>\n              )\n              : videoList && videoList.length > 0\n                ? (\n                  <>\n                    {\n                      fullGame != null\n                        ? (\n                          <ToggleButton\n                            className=\"mls-o-modal__cta\"\n                            onClick={() => toggleDialog(fullGame)}>\n                            <PlayCircleIcon extraClasses={\"mls-o-modal__play-circle\"} />\n                            <span className=\"mls-o-modal__cta-label\">{t(\"match_full_replay\")}</span>\n                          </ToggleButton>\n                        ) : null\n                    }\n                    {\n                      condensedGame != null\n                        ? (\n                          <ToggleButton\n                            className=\"mls-o-modal__cta\"\n                            onClick={() => toggleDialog(condensedGame)}>\n                            <PlayCircleIcon extraClasses={\"mls-o-modal__play-circle\"} />\n                            <span className=\"mls-o-modal__cta-label\">{t(\"match_mls_fifteen\")}</span>\n                          </ToggleButton>\n                        ) : null\n                    }\n                    {\n                      gameHighlights != null\n                        ? (\n                          <ToggleButton\n                            className=\"mls-o-modal__cta\"\n                            onClick={() => toggleDialog(gameHighlights)}>\n                            <PlayCircleIcon extraClasses={\"mls-o-modal__play-circle\"} />\n                            <span className=\"mls-o-modal__cta-label\">{t(\"match_highlights\")}</span>\n                          </ToggleButton>\n                        ) : null\n                    }\n                  </>\n                ) : null\n        }\n      </div>\n    </div>\n  );\n};\n\nexport default MatchModal;\n","import React, { useState } from 'react';\n\nconst TicketIcon = (props) => {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\", color = \"#000\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--ticket icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg viewBox=\"0 0 24 24\">\n          <g stroke={color} fill=\"none\" fillRule=\"evenodd\">\n            <path d=\"M15.629 15.558l-5.82 5.82-2.13-2.13c.559-.56 1.332-2.024.08-3.276-1.253-1.253-2.717-.48-3.276.08l-2.13-2.131c2.6-2.602 4.54-4.542 5.819-5.82\" />\n            <path d=\"M7.807 8.466l6.729-6.729 2.13 2.13c-.559.56-1.332 2.024-.08 3.276 1.253 1.253 2.717.48 3.276-.08l2.13 2.131c-3.207 3.208-5.45 5.45-6.728 6.73\" />\n            <path\n              strokeLinecap=\"square\"\n              strokeDasharray=\"1,3\"\n              d=\"M9.861 8.639l6.805 6.805\"\n            />\n          </g>\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n};\n\nexport default TicketIcon;\n","export { default } from './TicketIcon';\n"],"names":[],"sourceRoot":""}