\n toggleDialog(gameHighlights || fullGame || condensedGame)\n }\n backgroundColor={backgroundTypes.black}\n >\n {t(\"highlights\")}\n \n )}\n \n {hasBuyTickets && }\n {hasHotelBooking && }\n
\n {appleStreamURL && (\n \n trackButton()}\n >\n \n \n \n )}\n \n );\n};\nexport default MatchHubButtons;\n","import styled from \"styled-components\";\n\nexport const StyledMatchHubButtons = styled.div`\n display: flex;\n justify-content: center;\n gap: 12px;\n z-index: 1;\n margin-top: auto;\n\n .mls-c-matchbutton {\n min-width: 230px;\n }\n\n .mls-c-matchbutton__apple {\n &--full {\n width: 300px;\n }\n }\n\n .mls-c-match-buttons__external-buttons {\n display: flex;\n justify-content: space-between;\n gap: 8px;\n }\n\n &.xs,\n &.xxs,\n &.sm {\n width: 100%;\n display: block;\n\n .mls-c-match-buttons__external-buttons {\n margin-bottom: .5rem;\n margin-top: .5rem;\n }\n\n .mls-c-matchbutton {\n min-width: auto;\n padding: 0;\n }\n\n a {\n width: 100%;\n }\n\n .mls-c-matchbutton__apple {\n &--full {\n width: 100%;\n }\n }\n }\n`;\n","import styled from \"styled-components\";\n\nconst StyledTicketButton = styled.div`\n width: 100%;\n`;\n\nconst StyledTicketButtonWrapper = styled.div`\n width: 100%;\n`;\n\nexport { StyledTicketButton, StyledTicketButtonWrapper };\n","import React, { useState } from \"react\";\n\nimport ReactDOM from \"react-dom\";\nimport { trackMatchInteraction } from \"../../../../libraries/_modules/tracking/helpers\";\nimport { statusTypes, useMatchData } from \"../../../mls-match-list/utils\";\nimport { Link } from \"../../../shared/components/Link/Link\";\nimport MatchButton from \"../../../shared/components/MatchButton/MatchButton\";\nimport TicketModal from \"../../../shared/components/TicketModal/main\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { backgroundTypes } from \"../../../shared/styled/Theme\";\nimport { StyledTicketButton } from \"./StyledTicketButton\";\nimport { getTicketMasterIconUrl, getTicketMasterUrl } from \"../../../shared/utils\";\nimport { TicketIconV2 } from \"../../../shared/svg/TicketIconV2/TicketIconV2\";\n\nconst TicketButton = ({\n backgroundColor = backgroundTypes.black,\n size = \"100%\",\n}) => {\n const { t } = useReactAppState();\n const [isOpen, setIsOpen] = useState(false);\n const { competition, promoInfo, slug, status } = useMatchData();\n const { firstPartyTickets, thirdPartyTickets } = promoInfo || {};\n const ticketMasterIconUrl = getTicketMasterIconUrl({ variant: \"light\" });\n const hasTicketMasterUrl = getTicketMasterUrl([firstPartyTickets?.url, thirdPartyTickets?.url]);\n\n\n const altText =\n promoInfo?.firstPartyTickets?.accessibleText ||\n promoInfo?.thirdPartyTickets?.accessibleText;\n\n const url =\n promoInfo?.firstPartyTickets?.url || promoInfo?.thirdPartyTickets?.url;\n\n const getCtaFromStatus = () =>\n promoInfo?.firstPartyTickets?.displayText ||\n promoInfo?.thirdPartyTickets?.displayText ||\n t(\"buy_tickets\");\n\n const trackButton = () => {\n trackMatchInteraction({\n clickType: \"button\",\n ctaLabel: getCtaFromStatus(),\n match: slug,\n matchState: status?.abbreviation,\n competition: competition?.shortName,\n });\n };\n\n const shouldOpenTicketModal =\n status?.abbreviation === statusTypes.pre &&\n promoInfo?.firstPartyTickets?.url &&\n promoInfo?.thirdPartyTickets?.url;\n\n const SideIcon = hasTicketMasterUrl ? 
\n : \n\n if (shouldOpenTicketModal) {\n return (\n \n setIsOpen(true)}\n sideIcon={SideIcon}\n >\n {t(\"buy_tickets\")}\n \n {ReactDOM.createPortal(\n setIsOpen(false)} />,\n document.getElementById(\"react-root\")\n )}\n \n );\n }\n\n return (\n \n \n trackButton()}\n sideIcon={SideIcon}\n >\n {getCtaFromStatus()}\n \n \n \n );\n};\nexport default TicketButton;\n","import React from \"react\";\nimport {\n StyledMatchHubTileWrapper,\n StyledMatchHubTile,\n StyledMatchHubColumn,\n} from \"./StyledMatchHubTile\";\nimport ClubV2 from \"../../../shared/components/ClubV2\";\nimport Scorebug from \"../../../shared/components/Scorebug/Scorebug\";\nimport { formatScores, useMatchData } from \"../../../mls-match-list/utils\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { isMobile } from \"../../../shared/styled/Theme\";\n\nfunction MatchHubTile({ queryClassName, showClubRanks }) {\n const {\n homeClubData,\n awayClubData,\n status,\n period,\n resultType,\n matchKickOffTime,\n homeClubRank,\n awayClubRank,\n } = useMatchData();\n\n const { t } = useReactAppState();\n\n const { localTime } = matchKickOffTime || {};\n\n const { homeScore, awayScore } = formatScores({\n homeClubData,\n awayClubData,\n period,\n resultType,\n });\n\n return (\n \n \n \n \n \n\n \n \n \n\n \n \n \n \n \n );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nMatchHubTile = React.memo(MatchHubTile);\n\nexport default MatchHubTile;\n","import styled from \"styled-components\";\n\nexport const StyledMatchHubTile = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 100%;\n position: relative;\n font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n gap: 18px;\n\n .mls-c-club__shortname,\n .mls-c-club__abbreviation {\n color: ${(props) => props.theme.rgba.white_100};\n }\n\n .mls-c-club.--home .mls-c-club__shortname {\n margin-right: 14px;\n }\n\n .mls-c-club.--away .mls-c-club__shortname {\n margin-left: 14px;\n }\n\n .mls-c-club__shortname {\n font-family: ${(props) =>\n props.theme.figma.base.fontfamily_mlstifo_headline};\n font-size: ${(props) => props.theme.mixins.pxToRem(28)};\n font-weight: 700;\n line-height: 30px;\n }\n\n .mls-c-club__abbreviation {\n font-family: ${(props) =>\n props.theme.figma.base.fontfamily_mlstifo_headline};\n font-size: ${(props) => props.theme.mixins.pxToRem(18)};\n font-weight: 700;\n line-height: 20px;\n }\n\n .mls-c-club.--home .mls-c-club__abbreviation {\n margin-right: 8px;\n }\n\n .mls-c-club.--away .mls-c-club__abbreviation {\n margin-left: 8px;\n }\n\n .mls-c-scorebug,\n .mls-c-scorebug__post,\n .mls-c-scorebug__live {\n width: 103px;\n height: 50px;\n\n .mls-c-scorebug__score,\n .mls-c-scorebug__goal {\n font-size: ${(props) => props.theme.mixins.pxToRem(30)};\n }\n\n .mls-c-scorebug__separator {\n height: 34px;\n border-right: 2px solid rgba(255, 255, 255, 0.25);\n }\n }\n\n picture,\n .mls-c-club__picture {\n width: 60px;\n height: 60px;\n display: flex;\n flex-shrink: 0;\n }\n\n .mls-c-club__name {\n align-items: center;\n }\n\n &.xs,\n &.xxs,\n &.sm {\n picture,\n .mls-c-club__picture {\n width: 50px;\n height: 50px;\n }\n\n .mls-c-scorebug,\n .mls-c-scorebug__post,\n .mls-c-scorebug__live {\n width: 72px;\n height: 36px;\n }\n\n .mls-c-scorebug__score,\n .mls-c-scorebug__goal {\n font-size: ${(props) => props.theme.mixins.pxToRem(20)};\n }\n }\n\n &.xs,\n &.xxs {\n .mls-c-club__abbreviation {\n display: none;\n }\n }\n`;\n\nexport const StyledMatchHubTileWrapper = styled.div`\n display: flex;\n align-items: center;\n width: 100%;\n`;\n\nexport const StyledMatchHubColumn = styled.div`\n &.--club {\n width: 100%;\n flex: 1;\n }\n\n &.--pre,\n &.--ppd,\n &.--canc,\n &.--dly,\n &.--aban {\n .mls-c-scorebug--horizontal {\n align-items: center;\n\n span {\n font-size: 22px;\n }\n }\n }\n\n &.xs,\n &.xxs,\n &.sm {\n &.--pre {\n .mls-c-scorebug--horizontal {\n align-items: center;\n\n span {\n font-size: 18px;\n }\n }\n }\n }\n`;\n","import classNames from \"classnames\";\nimport React, { useState } from \"react\";\nimport { ContainerQuery } from \"react-container-query\";\nimport { useQuery } from \"react-query\";\nimport MatchDataLayer from \"../../../mls-match-list/components/MatchDataLayer\";\nimport { periodTypes } from \"../../../mls-match-list/utils\";\nimport { fetchClient } from \"../../../shared/api/fetching\";\nimport {\n d3SingleMatchAPI,\n mlsSingleMatchStatsAPI,\n} from \"../../../shared/api/variables\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { mergeMlsMatchAPIResults } from \"../../../shared/match/utils\";\nimport { query } from \"../../../shared/styled/Theme\";\nimport MatchHub from \"../MatchHub/MatchHub\";\nimport { StyledMatchHubWrapper } from \"../MatchHub/StyledMatchHub\";\n\nfunction MatchHubWrapper({ options }) {\n const { apiList } = useReactAppState();\n const { statsAPI, d3SportsAPI } = apiList || {};\n const matchOptaId = options?.matchOptaId;\n const [refetchInterval, setRefetchInterval] = useState(60000);\n\n const mlsMatchEndpoint = mlsSingleMatchStatsAPI({\n matchOptaId,\n });\n\n const { data: statsAPIMatch } = useQuery({\n queryKey: [`mls-match`, { matchOptaId }],\n queryFn: () =>\n fetchClient({ endpoint: mlsMatchEndpoint, apiURL: statsAPI }),\n select: (data) => (data && data.length > 0 ? data[0] : null),\n enabled: !!matchOptaId,\n refetchInterval,\n });\n\n const matchEndpoint = d3SingleMatchAPI({ matchOptaId });\n\n const { data: sportAPIMatch } = useQuery({\n queryKey: [`d3-match`, { matchOptaId }],\n queryFn: () =>\n fetchClient({ endpoint: matchEndpoint, apiURL: d3SportsAPI }),\n enabled: !!matchOptaId,\n });\n\n const mergedMatch =\n statsAPIMatch && sportAPIMatch\n ? mergeMlsMatchAPIResults({ sportAPIMatch, statsAPIMatch })\n : null;\n\n if (!mergedMatch || !matchOptaId) {\n return null;\n }\n\n if (\n !!refetchInterval &&\n (statsAPIMatch?.period === periodTypes.FullTime ||\n statsAPIMatch?.period === periodTypes.Cancelled ||\n statsAPIMatch?.period === periodTypes.Abandoned ||\n statsAPIMatch?.period === periodTypes.Postponed)\n ) {\n setRefetchInterval(null);\n }\n\n return (\n \n {(params) => (\n \n \n \n \n \n )}\n \n );\n}\n\n// eslint-disable-next-line no-func-assign\nMatchHubWrapper = React.memo(MatchHubWrapper);\n\nexport default MatchHubWrapper;\n","import React from \"react\";\nimport { ThemeProvider } from \"styled-components\";\nimport { Theme, themeTypes } from \"../shared/styled/Theme\";\nimport MatchHubWrapper from \"./components/MatchHubWrapper/MatchHubWrapper\";\n\nfunction MatchHubhMain({ options }) {\n return (\n \n \n \n );\n}\n\n// eslint-disable-next-line no-func-assign\nMatchHubhMain = React.memo(MatchHubhMain);\n\nexport default MatchHubhMain;\n","import React, { Fragment } from \"react\";\nimport { trackMatchHubClick } from \"../../../../libraries/_modules/tracking/helpers\";\nimport PenaltyCardIcon from \"../../svg/PenaltyCardIcon\";\n\nimport { matchEventTypes } from \"../../../mls-match-summary/utils\";\nimport {\n StyledCommentary,\n StyledCommentaryLastName,\n StyledMatchCommentary,\n StyledCommentaryMinute,\n} from \"./StyledCommentary\";\nimport { useMatchData } from \"../../../mls-match-list/utils\";\nimport { svgSizes } from \"../../utils\";\n\nfunction MatchCommentary({ summary, isHome }) {\n const { slug, status, competition } = useMatchData();\n\n const handleClick = (playerName) => () => {\n trackMatchHubClick({\n clickType: \"player\",\n match: slug,\n matchState: status?.abbreviation,\n competition: competition?.shortName,\n playerName,\n });\n };\n\n if (!summary?.length) {\n return null;\n }\n\n if (!summary || summary.length === 0) {\n return null;\n }\n\n const getDisplayName = (known_name, last_name, first_name) => {\n if (known_name) return known_name;\n if (last_name && first_name) return `${first_name.charAt(0)}. ${last_name}`;\n return last_name || first_name || \"\";\n };\n\n const summaryToShow = summary.reduce((final, item) => {\n const { last_name, known_name, first_name, minute, type } = item || {};\n const displayName = getDisplayName(known_name, last_name, first_name);\n const displayMinute = { minute, type };\n const existingScorer = final.find(\n (item) => item.displayName === displayName\n );\n if (!existingScorer) {\n return [...final, { displayName, minutes: [displayMinute], ...item }];\n } else {\n existingScorer.minutes.push({ minute, type });\n return final;\n }\n }, []);\n\n const Scorer = ({ displayName, minutes }) => {\n const composeMinutes = (minute, type) => {\n if (!minute) return null;\n\n switch (type) {\n case matchEventTypes.redCard:\n case matchEventTypes.secondYellowCard:\n return (\n <>\n {\" \"}\n {minute}\n \n );\n case matchEventTypes.ownGoal:\n return `${minute} OG`;\n case matchEventTypes.penaltyGoal:\n return `${minute} PK`;\n default:\n return minute;\n }\n };\n return (\n <>\n \n {displayName}\n \n \n {minutes?.length ? \"(\" : \"\"}\n {minutes?.map(({ minute, type }, index) => (\n \n {composeMinutes(minute, type)}\n {minutes.length - 1 === index ? \"\" : \", \"}\n \n ))}\n {minutes?.length ? \")\" : \"\"}\n \n \n );\n };\n\n return (\n \n {summaryToShow.map((commentary, index) => {\n const { displayName, minutes } = commentary || {};\n\n return (\n handleClick(displayName)}\n className=\"mls-c-match-commentary__scorer\"\n >\n \n {summaryToShow.length - 1 === index ? \"\" : \",\"}\n \n );\n })}\n \n );\n}\n\n// eslint-disable-next-line no-func-assign\nMatchCommentary = React.memo(MatchCommentary);\n\nexport default MatchCommentary;\n","import styled from \"styled-components\";\n\nexport const StyledMatchCommentary = styled.div`\n font-size: ${(props) => props.theme.mixins.pxToRem(12)};\n font-weight: 500;\n display: flex;\n flex-wrap: wrap;\n`;\n\nexport const StyledCommentary = styled.span`\n display: flex;\n flex-wrap: nowrap;\n margin-left: 2px;\n white-space: nowrap;\n`;\n\nexport const StyledCommentaryMinute = styled.span`\n margin-left: 3px;\n .mls-o-svg {\n display: inline;\n position: static;\n svg {\n max-width: 12.5px;\n }\n }\n`;\n\nexport const StyledCommentaryLastName = styled.span``;\n","import React from \"react\";\n\nexport const TicketIconV2 = ({ width, height, extraClasses = \"\", viewBox = \"0 0 17 17\" }) => {\n return (\n \n \n \n \n \n \n \n );\n};\n"],"names":[],"sourceRoot":""}