{"version":3,"file":"js/react/mls-featured-match-app.js?_t=ac88d48783df69b74a2c","mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AAGA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAEA;AAGA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAQA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAyDA;AACA;AAEA;AAGA;AAgBA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AACA;AAQA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AACA;AAaA;AAGA;AAEA;;;;;;;;;;;;;;;;;;AC1RA;AACA;AACA;AAEA;AACA;AAEA;AAoBA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAiBA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAcA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAGA;AAEA;AAIA;AAIA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AAcA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AAYA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AAUA;AAAA;AAAA;AACA;AACA;AAAA;AACA;AAQA;AAGA;AAEA;;;;;;;;;;;;;;;;;AClJA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGA;AAEA;AAMA;AAEA;;;;;;;;;;;;;;;;ACnBA;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAGA;AAiCA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AAOA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AAOA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AAOA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AAYA;AAEA;;;;;;;;;;;;;;;;AChHA;;;;;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAIA;AAAA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AAGA;AA+BA;AAGA;AAEA;;;;;;;;;;;;;;;;AChFA;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAaA;AAEA;;;;;;;;;;;;;;;;ACnCA;;;;;;;;;;;;;;;;ACAA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AACA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;AC3BA;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://@mlssoccer/netcore/./scripts/react/mls-featured-match/app.js","webpack://@mlssoccer/netcore/./scripts/react/mls-featured-match/components/FeaturedMatchBlock/FeaturedMatchBlock.js","webpack://@mlssoccer/netcore/./scripts/react/mls-featured-match/loader.js","webpack://@mlssoccer/netcore/./scripts/react/mls-featured-match/main.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/components/MatchInfo/MatchInfo.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/components/MatchInfo/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/components/MatchPromo/MatchPromo.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/components/MatchPromo/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-scoreboard/components/VerticalMatch/VerticalMatch.js","webpack://@mlssoccer/netcore/./scripts/react/mls-scoreboard/components/VerticalMatch/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Sponsor/Sponsor.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Sponsor/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/BroadcastIcon/BroadcastIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/BroadcastIcon/index.js","webpack://@mlssoccer/netcore/./.yarn/cache/date-fns-npm-2.29.2-da48c27e93-0ac440a105.zip/node_modules/date-fns/esm/isYesterday/index.js"],"sourcesContent":["export { default } from './main';\n","import React from 'react';\nimport { useQuery } from \"react-query\";\nimport { format } from 'date-fns';\nimport { formatScores, statusTypes, useMatchData } from \"../../../mls-match-list/utils\";\nimport MatchInfo from \"../../../mls-match-list/components/MatchInfo\";\nimport Sponsor from \"../../../shared/components/Sponsor\";\nimport Club from \"../../../mls-match-list/components/Club\";\nimport ToggleButton from \"../../../shared/components/ToggleButton\";\nimport TicketIcon from \"../../../shared/svg/TicketIcon\";\nimport PlayCircleIcon from \"../../../shared/svg/PlayCircleIcon\";\nimport MatchPromo from \"../../../mls-match-list/components/MatchPromo\";\nimport MatchScoreBox from \"../../../mls-match-list/components/MatchScoreBox\";\nimport BroadcastIcon from \"../../../shared/svg/BroadcastIcon\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { modalActionTypes, modalTypes } from \"../../../shared/hooks/useModalOptions\";\nimport MatchModal from \"../../../mls-match-list/components/MatchModal/MatchModal\";\nimport { trackMatchInteraction } from '../../../../libraries/_modules/tracking/helpers';\nimport {\n  apiURL,\n  forgeMatchContentVideosAPI,\n  forgeMatchVideosAPI,\n} from \"../../../shared/api/variables\";\nimport { composeVideoList } from \"../../../mls-match-feed/utils\";\nimport { highlightTypes, composeGeoLocatedProviders, matchHighlightsTagSlug } from \"../../../shared/utils\";\nimport { fetchClient } from \"../../../shared/api/fetching\";\n\nfunction FeaturedMatchBlock() {\n  const { urlList, directoryList, t, updateModalOptions, videoTags, location } = useReactAppState();\n  const { baseUrl } = urlList || {};\n  const { matchHubDir } = directoryList || {};\n\n  const { mediaProviders, matchDateTime, status, minuteDisplay, promoInfo, homeClubData, awayClubData, advertiser, isRecentGoal, count, slug, season, competition, venue, listType, queryConfig, matchOptaId, winnerStatus, resultType, period, isTimeTbd } = useMatchData();\n  const {\n    isHomeWinner,\n    isAwayWinner\n  } = winnerStatus || {};\n\n  const { slug: competitionSlug } = competition || {};\n  const { optaId: seasonOptaId } = season || {};\n\n  const matchPageUrl = `${baseUrl}/${matchHubDir}/${competitionSlug}/${seasonOptaId}/matches/${slug}`;\n  const { localTime } = matchDateTime || {};\n  const date = localTime ? format(localTime, \"E, LLL d\") : null;\n  const timePeriod = localTime ? format(localTime, \"a\") : null;\n  const time = localTime ? format(localTime, `p`).slice(0, -3) : null;\n\n  const trackButton = (label) => {\n    trackMatchInteraction({\n      clickType: 'button',\n      ctaLabel: label,\n      match: slug,\n      matchState: status?.abbreviation,\n      competition: competition?.shortName,\n    });\n  };\n\n  const trackCard = () => {\n    trackMatchInteraction({\n      clickType: 'featured match',\n      ctaLabel: undefined,\n      match: slug,\n      matchState: status?.abbreviation,\n      competition: competition?.shortName,\n    });\n  };\n\n  const trackingData = {\n    id: slug,\n    name: undefined,\n    creative: 'featured match',\n    position: undefined\n  };\n\n  const handleClick = (e, label) => {\n    e.preventDefault();\n    trackButton(label);\n    updateModalOptions({ type: modalActionTypes.modalClassName, payload: \"mls-o-modal mls-o-modal--match\" });\n    updateModalOptions({ type: modalActionTypes.modalType, payload: modalTypes.animated });\n    updateModalOptions({ type: modalActionTypes.label, payload: 'match modal' });\n    updateModalOptions({ type: modalActionTypes.component, payload: MatchModal });\n    updateModalOptions({ type: modalActionTypes.modalData, payload: { queryConfig, matchOptaId, homeClubData, awayClubData, matchDateTime, venue, status, listType, mediaProviders, promoInfo, winnerStatus, slug, isTimeTbd } });\n    updateModalOptions({ type: modalActionTypes.show });\n  };\n\n  const {\n    firstPartyTickets,\n    thirdPartyTickets,\n    sponsorImage,\n    promotionalSponsor\n  } = promoInfo;\n  const { assetUrl } = sponsorImage || {};\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 mergedProviders = [\n    ...national,\n    ...streaming,\n    ...radio,\n    ...(homeLinear != null ? homeLinear : []),\n    ...(awayLinear != null ? awayLinear : []),\n    ...(homeStreaming != null ? homeStreaming : []),\n    ...(awayStreaming != null ? awayStreaming : []),\n    ...(clubLinear != null ? clubLinear : []),\n    ...(clubStreaming != null ? clubStreaming : []),\n    ...(clubRadio != null ? clubRadio : []),\n  ];\n\n  const { homeScore, awayScore, shootoutResult } = formatScores({\n    homeClubData,\n    awayClubData,\n    period,\n    resultType\n  });\n\n  const showTicketButton = firstPartyTickets?.url || thirdPartyTickets?.url;\n\n  const forgeMatchVideosEndpoint = forgeMatchVideosAPI({ matchOptaId });\n  const forgeMatchContentVideosEndpoint = forgeMatchContentVideosAPI({ matchSlug: slug });\n\n  const { data: forgeMatchVideos } = useQuery({\n    queryKey: [`forge-match-videos`, { matchOptaId }],\n    queryFn: () => fetchClient({ apiURL: apiURL.forgeDAPI, endpoint: forgeMatchVideosEndpoint }),\n    ...queryConfig,\n    enabled: status?.abbreviation === statusTypes.post,\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    enabled: status?.abbreviation === statusTypes.post,\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 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  return (\n    <>\n      <div className=\"mls-o-match-strip__match\" data-tracking-block-impression={JSON.stringify(trackingData)}>\n        <a className=\"mls-o-match-strip__matchhub-link\" href={matchPageUrl}\n          onClick={trackCard} />\n        <div className=\"mls-o-match-strip__header\">\n          {\n            status?.abbreviation === statusTypes.live\n              ? <div className=\"mls-o-label\">{t(\"match_live\")}</div>\n              : null\n          }\n          <MatchInfo />\n          <Sponsor\n            hasPresBy={false}\n            templateUrl={assetUrl}\n            url={promotionalSponsor?.url}\n            accessibleText={promotionalSponsor?.accessibleText}\n            displayText={promotionalSponsor?.displayText}\n            openInNewTab={promotionalSponsor?.openInNewTab}\n          />\n        </div>\n        <div className=\"mls-o-match-strip__club-group\">\n          <Club clubData={homeClubData} isWinner={isHomeWinner} isHome showShortName />\n          {\n            status?.abbreviation === statusTypes.pre\n              ? <div className=\"mls-o-match-strip__club-separator\">\n                {date ? <div className=\"mls-o-match-strip__date\">{date}</div> : null}\n                {isTimeTbd\n                  ? <div className=\"mls-o-match-strip__time mls-o-match-strip__tbd\">\n                    {t(\"tbd\")?.toUpperCase()}\n                  </div>\n                  : <div className=\"mls-o-match-strip__time-wrapper\">\n                    {time ? <div className=\"mls-o-match-strip__time\">{time}</div> : null}\n                    {timePeriod ? <div className=\"mls-o-match-strip__time-period\">{timePeriod}</div> : null}\n                    {/* <div className=\"mls-o-match-strip__time-zone\">{t(\"match_timezone\")}</div> */}\n                  </div>\n                }\n              </div>\n              : <div className=\"mls-o-match-strip__club-separator\">\n                <div className=\"mls-o-match-strip__match-period\">\n                  {\n                    status?.abbreviation === statusTypes.live\n                      ? (\n                        <>\n                          {advertiser ? <p className=\"mls-o-match-strip__advertiser\">{advertiser}</p> : null}\n                          <p className=\"mls-o-match-strip__minute\">{minuteDisplay}</p>\n                        </>\n                      )\n                      : status?.abbreviation === statusTypes.post\n                      ? t(\"match_final\")\n                      : status?.abbreviation === statusTypes.abandoned ? t(\"match_abandoned\") :\n                        <div className=\"mls-o-match-strip__time\">{period}</div>\n                  }\n                </div>\n                { \n                  status?.abbreviation !== statusTypes.postponed && status?.abbreviation !== statusTypes.abandoned\n                    ? <MatchScoreBox isRecentGoal={isRecentGoal} count={count} awayScore={awayScore} homeScore={homeScore} isLive={status?.abbreviation === statusTypes.live} />\n                    : null\n                }\n              </div>\n          }\n          <Club clubData={awayClubData} isWinner={isAwayWinner} isHome={false} showShortName />\n        </div>\n        {\n          shootoutResult\n            ? <div className=\"mls-o-match-strip__shootout-description\">{shootoutResult}</div>\n            : mergedProviders && mergedProviders.length > 0\n              ? (\n                <div className=\"mls-o-match-strip__broadcaster-list\">\n                  <>\n                    <span className=\"mls-o-match-strip__broadcaster-icon\">\n                      <BroadcastIcon size=\"x-small\" />\n                    </span>\n                    {\n                      mergedProviders.map((provider, index) => {\n                        const { broadcasterShortName, broadcasterName } = provider || {};\n                        const name = broadcasterShortName ? broadcasterShortName : broadcasterName;\n\n                        return (\n                          <span key={`${name}-${index}`} className=\"mls-o-match-strip__broadcaster\">\n                            {`${name}${index < mergedProviders.length - 1 ? \",\" : \"\"}`}\n                          </span>\n                        );\n                      })\n                    }\n                  </>\n                </div>\n              ) : null\n        }\n        <div className=\"mls-o-match-strip__cta-wrapper\">\n          {\n            status?.abbreviation === statusTypes.pre\n              ? (\n                <>\n                  {\n                    showTicketButton\n                      ? (\n                        <ToggleButton\n                          href={`${firstPartyTickets?.url ? firstPartyTickets.url : \"#\"}`}\n                          target={`${firstPartyTickets?.openInNewTab ? \"_blank\" : \"_self\"}`}\n                          className=\"mls-o-match-strip__cta\"\n                          alt={`${firstPartyTickets?.accessibleText ? firstPartyTickets.accessibleText : \"\"}`}\n                          rel={`${firstPartyTickets?.openInNewTab ? \"noopener noreferrer\" : \"\"}`}\n                          onClick={(e) => handleClick(e, (firstPartyTickets?.displayText ? firstPartyTickets.displayText : t(\"buy_tickets\")))}\n                        >\n                          <TicketIcon extraClasses={\"mls-o-match-strip__tickets\"} />\n                          <span className=\"mls-o-match-strip__cta-label\">{firstPartyTickets?.displayText ? firstPartyTickets.displayText : t(\"buy_tickets\")}</span>\n                        </ToggleButton>\n                      )\n                      : null\n                  }\n                </>\n              )\n              : gameHighlights || condensedGame || fullGame || status?.abbreviation === statusTypes.live ? (\n                <ToggleButton\n                  className=\"mls-o-match-strip__cta\"\n                  onClick={(e) => handleClick(e, (status?.abbreviation === statusTypes.live ? t(\"match_watch_live_on\") : t(\"match_watch_highlights\")))}>\n                  <PlayCircleIcon extraClasses={\"mls-o-match-strip__play-circle\"} />\n                  <span className=\"mls-o-match-strip__cta-label\">{status?.abbreviation === statusTypes.live ? t(\"match_watch_live\") : t(\"match_watch_highlights\")}</span>\n                </ToggleButton>\n              ) : null\n          }\n        </div>\n        {\n          status?.abbreviation === statusTypes.pre\n            ? <MatchPromo />\n            : null\n        }\n      </div>\n    </>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nFeaturedMatchBlock = React.memo(FeaturedMatchBlock);\n\nexport default FeaturedMatchBlock;\n","import React from 'react';\nimport Picture from \"../shared/components/Picture\";\nimport { useReactAppState } from \"../shared/containers/utils\";\n\nfunction FeaturedMatchLoader() {\n  const { t } = useReactAppState();\n\n  return (\n    <div className=\"mls-o-match-strip mls-o-match-strip--post mls-o-match-strip--matches mls-o-match-strip--hide-promo \">\n      <div className=\"mls-o-match-strip__match\">\n        <div className=\"mls-o-match-strip__header\">\n          <div className=\"mls-o-match-strip__match-info\">\n            <div className=\"mls-o-match-strip__match-title\">\n              <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--4rem\" />\n            </div>\n            <div className=\"mls-o-match-strip__venue\">\n              <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--5rem\" />\n            </div>\n          </div>\n          <div className=\"mls-o-sponsor\">\n            <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--2rem\" />\n          </div>\n        </div>\n        <div className=\"mls-o-match-strip__club-group\">\n          <div className=\"mls-o-match-strip__club mls-o-match-strip__club--home \">\n            <div className=\"mls-o-match-strip__club-name\">\n              <span className=\"mls-o-match-strip__club-logo\">\n                <Picture\n                  extraClasses=\"mls-o-loading mls-o-loading--glow\"\n                  src=\"/assets/images/Fallbacklogo-grey.png\"\n                  title={t(\"fallback_logo\")} />\n              </span>\n              <div className=\"mls-o-match-strip__club-short-name\">\n                <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--3rem\" />\n              </div></div>\n          </div>\n          <div className=\"mls-o-match-strip__club-separator\">\n            <div className=\"mls-o-match-strip__match-period\">\n              <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--3rem\" />\n            </div>\n            <div className=\"mls-o-match-strip__score-box\">\n              <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--3rem\" />\n            </div>\n          </div>\n          <div className=\"mls-o-match-strip__club mls-o-match-strip__club--away \">\n            <div className=\"mls-o-match-strip__club-name\">\n              <span className=\"mls-o-match-strip__club-logo\">\n                <Picture\n                  extraClasses=\"mls-o-loading mls-o-loading--glow\"\n                  src=\"/assets/images/Fallbacklogo-grey.png\"\n                  title={t(\"fallback_logo\")} />\n              </span>\n              <div className=\"mls-o-match-strip__club-short-name\">\n                <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--3rem\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        <div className=\"mls-o-match-strip__cta-wrapper\">\n          <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--5rem\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default FeaturedMatchLoader;\n","import React, { useState, useEffect } from 'react';\nimport { useQuery } from \"react-query\";\nimport { apiURL, d3SingleMatchAPI, d3DateRangeAPI } from \"../shared/api/variables\";\nimport { fetchClient } from \"../shared/api/fetching\";\nimport MatchStrip from \"../mls-match-list/components/MatchStrip\";\nimport FeaturedMatchBlock from \"./components/FeaturedMatchBlock/FeaturedMatchBlock\";\nimport { formatImageUrl, filterTypes } from \"../shared/utils\";\nimport Picture from \"../shared/components/Picture\";\nimport { listTypes, dateRangeTypes } from \"../mls-match-list/utils\";\nimport ErrorDisplay from \"../shared/components/ErrorDisplay\";\nimport { useReactAppState } from \"../shared/containers/utils\";\nimport FeaturedMatchLoader from \"./loader\";\nimport {\n  formatISO,\n  subMonths,\n  addMonths,\n  isToday,\n  isBefore, isYesterday\n} from \"date-fns\";\nimport dayjs from 'dayjs';\nimport VerticalMatch from '../mls-scoreboard/components/VerticalMatch';\n\nfunction FeaturedMatch({ options }) {\n  const { match: appMatch, t } = useReactAppState();\n  const [featuredMatches, setFeaturedMatches] = useState(null);\n\n  const matchOptaId = options.matchOptaId || appMatch?.optaId;\n  const blockHeader = options.blockHeader;\n  const hideBlockHeaderName = options.hideBlockHeaderName;\n  const showPreviousMatch = options?.showPreviousMatch?.length > 0 && options?.showPreviousMatch !== \"0\";\n  const nextMatchesCount = options?.nextMatchesCount;\n  const brandedImageTemplateUrl = options.brandedImageTemplateUrl;\n  const currentDate = options?.matchDate && matchOptaId ? dayjs(options?.matchDate).toDate() : dayjs().toDate();\n  const previousMonth = dayjs(subMonths(currentDate, 1)).toDate();\n  const nextMonths = dayjs(addMonths(currentDate, 11)).toDate();\n  const { highQuality } = brandedImageTemplateUrl ? formatImageUrl(brandedImageTemplateUrl, { format: \"w_200,c_scale\", extension: \"f_png\" }) : {};\n\n  const dateEndpoint = d3DateRangeAPI({ isoStringRE: formatISO(nextMonths), isoStringRS: formatISO(previousMonth), competitionOptaId: filterTypes.allCompetitions, excludeSecondaryTeams: true, extendDays: true });\n  const matchEndpoint = d3SingleMatchAPI({ matchOptaId });\n  const {\n    isLoading: isLoadingMatch,\n    isError: isErrorMatch,\n    data: match,\n    error: matchError\n  } = useQuery({\n    queryKey: [`d3-match`, { matchOptaId }],\n    queryFn: () => fetchClient({ endpoint: matchEndpoint, apiURL: apiURL.d3SportsAPI }),\n    enabled: !!matchOptaId,\n  });\n\n  const {\n    data: matches,\n  } = useQuery({\n    queryKey: [`d3-featured-matches-${currentDate}`],\n    queryFn: () => fetchClient({ endpoint: dateEndpoint, apiURL: apiURL.d3SportsAPI }),\n    select: matches => matches?.sort((a, b) => dayjs(a?.matchDate)?.toDate() - dayjs(b?.matchDate)?.toDate())\n  });\n\n  const isTodayBeforeOrAt4am = dayjs().toDate() <= dayjs().startOf(\"day\").add(4, \"hour\").toDate();\n  const isDefaultFeaturedMatch = (elMatchDate) => {\n    const matchDate = dayjs(elMatchDate)?.toDate();\n    return isToday(matchDate) || (isTodayBeforeOrAt4am && isYesterday(matchDate));\n  };\n\n  if (matches) {\n    const todayMatch = matches?.find(el => isDefaultFeaturedMatch(el?.matchDate));\n    const currentMatch = match ? match : (\n      todayMatch ? todayMatch : matches?.find(el => dayjs(el?.matchDate)?.toDate() >= currentDate)\n    );\n    const matchDate = match ? dayjs(match?.matchDate)?.toDate() : dayjs(currentMatch?.matchDate)?.toDate();\n\n    const nextMatches = nextMatchesCount ? matches\n      ?.filter(m => dayjs(m?.matchDate)?.toDate() > matchDate)\n      ?.slice(0, nextMatchesCount) : [];\n\n    const previousMatch = showPreviousMatch ? matches\n      ?.reverse()\n      ?.find(el => isBefore(dayjs(el?.matchDate)?.toDate(), matchDate)) : null;\n\n    if (!featuredMatches && currentMatch) {\n      setFeaturedMatches({\n        currentMatch,\n        nextMatches,\n        previousMatch\n      });\n    }\n  }\n\n  return (\n    <>\n      {\n        hideBlockHeaderName && highQuality\n          ? (\n            <div className=\"mls-o-featured-match__branded-image\">\n              <Picture src={highQuality} title={\"branded image\"} />\n            </div>\n          )\n          : blockHeader ? <div className=\"mls-o-featured-match__block-header\">{blockHeader}</div> : null\n      }\n      {\n        featuredMatches?.previousMatch\n          ? <div className=\"mls-o-scoreboard mls-o-scoreboard--vertical mls-o-scoreboard__matches mls-o-featured-previous-match\">\n            <MatchStrip\n              listType={listTypes}\n              match={featuredMatches?.previousMatch}>\n              <VerticalMatch showMatchWatch match={featuredMatches?.previousMatch} />\n            </MatchStrip>\n          </div>\n          : null\n      }\n      <div role=\"region\" className={`mls-o-featured-match`}>\n        {\n          isLoadingMatch\n            ? <FeaturedMatchLoader />\n            : isErrorMatch\n              ? <ErrorDisplay error={matchError} />\n              : (\n                <MatchStrip\n                  listType={listTypes.matches}\n                  match={match ? match : featuredMatches?.currentMatch}>\n                  <FeaturedMatchBlock />\n                </MatchStrip>\n              )\n        }\n      </div>\n      {\n        featuredMatches?.nextMatches?.length\n          ? <div className=\"mls-o-featured-next-matches\">\n            {featuredMatches?.nextMatches?.map((nextMatch, i) =>\n              <div key={`${nextMatch?.optaId}-${i}`} className=\"mls-o-scoreboard mls-o-scoreboard--vertical mls-o-scoreboard__matches mls-o-featured-next-match\">\n                <MatchStrip\n                  listType={listTypes}\n                  match={nextMatch}>\n                  <VerticalMatch key={nextMatch?.optaId} showMatchWatch match={nextMatch} />\n                </MatchStrip>\n              </div>)}\n          </div>\n          : null\n      }\n    </>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nFeaturedMatch = React.memo(FeaturedMatch);\n\nexport default FeaturedMatch;\n","import React from 'react';\nimport { listTypes, useMatchData } from \"../../utils\";\n\nconst MatchInfo = () => {\n  const { listType, venue, leagueMatchTitle, competition } = useMatchData();\n  if (listType !== listTypes.matches) {\n    return null;\n  }\n\n  const { name } = venue || {};\n\n  return (\n    <div className=\"mls-o-match-strip__match-info\">\n      <p className=\"mls-o-match-strip__match-title\">{leagueMatchTitle ? leagueMatchTitle : competition?.name}</p>\n      <p className=\"mls-o-match-strip__venue\">{name}</p>\n    </div>\n  );\n};\n\nexport default MatchInfo;\n","export { default } from './MatchInfo';\n","import React from 'react';\nimport ReactMarkdown from \"react-markdown\";\nimport { useMatchData } from \"../../utils\";\nimport { Chevron } from \"../../../shared/svg\";\nimport ToggleButton from \"../../../shared/components/ToggleButton\";\nimport { chevronDirection } from \"../../../shared/svg/Svg\";\n\nconst MatchPromo = () => {\n  const { promoInfo } = useMatchData();\n\n  const {\n    matchPromo,\n    promotionalMisc1,\n    promotionalMisc2\n  } = promoInfo;\n\n  return (\n    matchPromo\n      ? (\n        <div className=\"mls-o-match-strip__promo-wrapper\">\n          {\n            matchPromo?.headline || matchPromo?.description\n              ? (\n                <div className=\"mls-o-match-strip__promo\">\n                  {\n                    matchPromo?.headline\n                      ? <div className=\"mls-o-match-strip__promo-headline\">{matchPromo.headline}</div>\n                      : null\n                  }\n                  {\n                    matchPromo?.description\n                      ? (\n                        <div className=\"mls-o-match-strip__promo-description\">\n                          <ReactMarkdown source={matchPromo.description} />\n                        </div>\n                      )\n                      : null\n                  }\n                </div>\n              )\n              : null\n          }\n          {\n            matchPromo?.callToAction1 || matchPromo?.callToAction2 || promotionalMisc1?.displayText !== \"\" || promotionalMisc2.displayText !== \"\"\n              ? (\n                <div className=\"mls-o-match-strip__promo-cta-group\">\n                  {\n                    matchPromo?.callToAction1?.displayText && matchPromo?.callToAction1?.url && matchPromo?.callToAction1?.url !== \"\" ?\n                      (\n                        <ToggleButton\n                          target={`${matchPromo?.callToAction1?.openInNewTab ? \"_blank\" : \"_self\"}`}\n                          rel={`${matchPromo?.callToAction1?.openInNewTab ? \"noopener noreferrer\" : \"\"}`}\n                          alt={`${matchPromo?.callToAction1?.accessibleText ? matchPromo?.callToAction1?.accessibleText : \"\"}`}\n                          href={`${matchPromo?.callToAction1?.url ? matchPromo?.callToAction1?.url : \"#\"}`}\n                          className=\"mls-o-buttons__icon mls-o-buttons__icon--right\">\n                          {matchPromo?.callToAction1?.displayText}\n                          <Chevron direction={chevronDirection.right} />\n                        </ToggleButton>\n                      ) : null\n                  }\n                  {\n                    matchPromo?.callToAction2?.displayText && matchPromo?.callToAction2?.url && matchPromo?.callToAction2?.url !== \"\" ?\n                      (\n                        <ToggleButton\n                          target={`${matchPromo?.callToAction2?.openInNewTab ? \"_blank\" : \"_self\"}`}\n                          rel={`${matchPromo?.callToAction2?.openInNewTab ? \"noopener noreferrer\" : \"\"}`}\n                          alt={`${matchPromo?.callToAction2?.accessibleText ? matchPromo?.callToAction2?.accessibleText : \"\"}`}\n                          href={`${matchPromo?.callToAction2?.url ? matchPromo?.callToAction2?.url : \"#\"}`}\n                          className=\"mls-o-buttons__icon mls-o-buttons__icon--right\">\n                          {matchPromo?.callToAction2?.displayText}\n                          <Chevron direction={chevronDirection.right} />\n                        </ToggleButton>\n                      ) : null\n                  }\n                  {\n                    promotionalMisc1?.displayText ?\n                      (\n                        <ToggleButton\n                          target={`${promotionalMisc1?.openInNewTab ? \"_blank\" : \"_self\"}`}\n                          rel={`${promotionalMisc1?.openInNewTab ? \"noopener noreferrer\" : \"\"}`}\n                          alt={`${promotionalMisc1?.accessibleText ? promotionalMisc1?.accessibleText : \"\"}`}\n                          href={`${promotionalMisc1?.url ? promotionalMisc1?.url : \"#\"}`}\n                          className=\"mls-o-buttons__icon mls-o-buttons__icon--right\">\n                          {promotionalMisc1?.displayText}\n                          <Chevron direction={chevronDirection.right} />\n                        </ToggleButton>\n                      ) : null\n                  }\n                  {\n                    promotionalMisc2?.displayText ?\n                      (\n                        <ToggleButton\n                          target={`${promotionalMisc2?.openInNewTab ? \"_blank\" : \"_self\"}`}\n                          rel={`${promotionalMisc2?.openInNewTab ? \"noopener noreferrer\" : \"\"}`}\n                          alt={`${promotionalMisc2?.accessibleText ? promotionalMisc2?.accessibleText : \"\"}`}\n                          href={`${promotionalMisc2?.url ? promotionalMisc2?.url : \"#\"}`}\n                          className=\"mls-o-buttons__icon mls-o-buttons__icon--right\">\n                          {promotionalMisc2?.displayText}\n                          <Chevron direction={chevronDirection.right} />\n                        </ToggleButton>\n                      ) : null\n                  }\n                </div>\n              )\n              : null\n          }\n        </div>\n      )\n      : null\n  );\n};\n\nexport default MatchPromo;\n","export { default } from './MatchPromo';\n","import React from 'react';\nimport ClubSeparator from \"../../../mls-match-list/components/ClubSeparator\";\nimport MatchWatch from \"../../../mls-match-list/components/MatchWatch\";\nimport Club from '../../../mls-match-list/components/Club';\nimport MatchTime from \"../../../mls-match-list/components/MatchTime\";\nimport { useMatchData, formatScores, statusTypes } from \"../../../mls-match-list/utils\";\nimport ToggleButton from \"../../../shared/components/ToggleButton\";\nimport { Chevron } from \"../../../shared/svg\";\nimport { chevronDirection } from \"../../../shared/svg/Svg\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { composeGeoLocatedProviders, stringifyGeoProviders } from \"../../../shared/utils\";\n\nfunction VerticalMatch({ position, showMatchWatch = false }) {\n  const { location } = useReactAppState();\n  const { country } = location || {};\n  const { matchPageUrl, homeClubData, awayClubData, status, slug, mediaProviders, winnerStatus, period, resultType } = useMatchData();\n  const {\n    isHomeWinner,\n    isAwayWinner\n  } = winnerStatus || {};\n\n  const { homeScore, awayScore, shootoutResult } = formatScores({\n    homeClubData,\n    awayClubData,\n    period,\n    resultType\n  });\n\n  const { national, streaming, radio } = status?.abbreviation === statusTypes.pre || status?.abbreviation === statusTypes.live\n    ? composeGeoLocatedProviders(mediaProviders, country)\n    : { national: null, streaming: null, radio: null };\n\n  const trackingData = {\n    id: slug,\n    creative: 'match',\n    position\n  };\n\n  const trackingClickData = {\n    clickItem: 'match',\n    match: slug,\n    matchState: status?.abbreviation\n  };\n\n  return (\n    <div className=\"mls-o-match-strip__match\" data-tracking-block-impression={JSON.stringify(trackingData)} data-tracking-block-click={JSON.stringify(trackingClickData)} >\n      <a href={matchPageUrl} className=\"mls-o-match-strip__matchhub-link\" />\n      {status?.abbreviation === statusTypes.abandoned ? null : <MatchTime isScoreboard isHorizontalScoreboard={false} />}\n      <div className=\"mls-o-match-strip__club-group\">\n        <Club showAbbreviation isWinner={isHomeWinner} clubData={homeClubData} isHome />\n        <ClubSeparator homeScore={homeScore} awayScore={awayScore} />\n        <Club showAbbreviation isWinner={isAwayWinner} clubData={awayClubData} isHome={false} />\n      </div>\n      {status?.abbreviation !== statusTypes.abandoned ?\n        <ToggleButton className=\"mls-o-match-strip__matchhub-arrow\" tabIndex=\"-1\">\n          {showMatchWatch ?\n            <MatchWatch hideLabel arrowFallback playIconSize={\"x-small\"} iconColor={\"#707576\"} />\n            : <Chevron direction={chevronDirection.right} size={\"medium\"} />}\n        </ToggleButton> : null}\n      {\n        shootoutResult\n          ? <div className=\"mls-o-match-strip__shootout-description\">{shootoutResult}</div>\n          : status?.abbreviation === statusTypes.pre || status?.abbreviation === statusTypes.live\n            ? (\n              national && national.length > 0\n                ? <div className=\"mls-o-match-strip__broadcaster\">{stringifyGeoProviders(national)}</div>\n                : streaming && streaming.length > 0\n                  ? <div className=\"mls-o-match-strip__broadcaster\">{stringifyGeoProviders(streaming)}</div>\n                  : radio && radio.length > 0\n                    ? <div className=\"mls-o-match-strip__broadcaster\">{stringifyGeoProviders(radio)}</div>\n                    : null\n            ) : null\n      }\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nVerticalMatch = React.memo(VerticalMatch);\n\nexport default VerticalMatch;\n","export { default } from './VerticalMatch';\n","import React from 'react';\nimport ToggleButton from \"../ToggleButton\";\nimport Picture from \"../Picture\";\nimport { formatImageUrl } from \"../../utils\";\n\nfunction Sponsor({ openInNewTab, accessibleText, url, templateUrl, displayText, hasPresBy }) {\n  const { highQuality } = templateUrl ? formatImageUrl(templateUrl, { format: \"w_175,c_scale\", extension: \"f_png\" }) : {};\n\n  return (\n    highQuality ? (\n      (url) ? (<ToggleButton\n        target={`${openInNewTab ? \"_blank\" : \"_self\"}`}\n        rel={`${openInNewTab ? \"noopener noreferrer\" : \"\"}`}\n        alt={`${accessibleText ? accessibleText : \"\"}`}\n        href={url} className=\"mls-o-sponsor\">\n        {\n          hasPresBy\n            ? <div className=\"mls-o-sponsor__label\">{displayText ? displayText : \"Presented By\"}</div>\n            : null\n        }\n        <Picture src={highQuality} title=\"sponsor\" loadingSrc={null} fallbackSrc={null} extraClasses=\"mls-o-sponsor__image\" />\n      </ToggleButton>)\n        :\n        (<span className=\"mls-o-sponsor\">\n          {\n            hasPresBy\n              ? <div className=\"mls-o-sponsor__label\">{displayText ? displayText : \"Presented By\"}</div>\n              : null\n          }\n          <Picture src={highQuality} title=\"sponsor\" loadingSrc={null} fallbackSrc={null} extraClasses=\"mls-o-sponsor__image\" />\n        </span>)\n    ) : null\n  );\n}\n\nexport default Sponsor;\n","export { default } from './Sponsor';\n","import React from 'react';\n\nconst BroadcastIcon = ({ extraClasses, size = \"small\" }) => {\n  return (\n    <span\n      role=\"img\"\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--broadcast icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg viewBox=\"0 0 11 10\">\n          <g\n            transform=\"translate(-138 -68)\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n          >\n            <path stroke=\"#707576\" d=\"M139 68.5h9V74h-9z\" />\n            <path\n              stroke=\"#707576\"\n              strokeLinecap=\"square\"\n              d=\"M143.5 74.375v2.25m1.923 0h-3.846\"\n            />\n          </g>\n        </svg>\n      </span>\n    </span>\n  );\n};\n\nexport default BroadcastIcon;\n","export { default } from './BroadcastIcon';\n","import isSameDay from \"../isSameDay/index.js\";\nimport subDays from \"../subDays/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isYesterday\n * @category Day Helpers\n * @summary Is the given date yesterday?\n * @pure false\n *\n * @description\n * Is the given date yesterday?\n *\n * > ⚠️ Please note that this function is not present in the FP submodule as\n * > it uses `Date.now()` internally hence impure and can't be safely curried.\n *\n * @param {Date|Number} date - the date to check\n * @returns {Boolean} the date is yesterday\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // If today is 6 October 2014, is 5 October 14:00:00 yesterday?\n * const result = isYesterday(new Date(2014, 9, 5, 14, 0))\n * //=> true\n */\n\nexport default function isYesterday(dirtyDate) {\n  requiredArgs(1, arguments);\n  return isSameDay(dirtyDate, subDays(Date.now(), 1));\n}"],"names":[],"sourceRoot":""}