Ws 2759: Expand on sport translations

src/app/components-webcore/SportDataHeader/head-to-head-v2/components/actions-time.tsx

@@ -1,23 +1,39 @@
+import { use } from 'react';
+import { ServiceContext } from '#app/contexts/ServiceContext';
 import VisuallyHiddenText from '../../../../components/VisuallyHiddenText';
 import styles from '../index.styles';
 import Card from './card';
 import type { PlayerActions } from '../types';
 
+// TODO - get a translation for this
 const goalTypesHandled: Record<string, string> = {
-  Penalty: 'pen',
   'Own Goal': 'og',
 };
 
-const displayGoalType = (goalType: string) =>
-  goalTypesHandled[goalType] ? ` ${goalTypesHandled[goalType]}` : '';
+const displayGoalType = (goalType: string, penaltiesTranslation: string) => {
+  if (goalType === 'Penalty') {
+    return ` ${penaltiesTranslation}`;
+  }
+
+  if (goalTypesHandled[goalType]) {
+    return ` ${goalTypesHandled[goalType]}`;
+  }
+
+  return '';
+};
 
 interface ActionsTimeProps {
   player: PlayerActions;
 }
 
 const ActionsTime = ({ player }: ActionsTimeProps) => {
+  const { translations } = use(ServiceContext);
+  const penaltiesTranslation =
+    translations?.sport?.penaltyAbbreviation || 'pen';
+
   const times = player.actions.map(
-    action => `${action.timeLabel.value}${displayGoalType(action.type)}`,
+    action =>
+      `${action.timeLabel.translated || action.timeLabel.value}${displayGoalType(action.type, penaltiesTranslation)}`,
   );
   const timesAccessible = player.actions
     .map(

src/app/components-webcore/SportDataHeader/head-to-head-v2/components/actions.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable import/prefer-default-export */
+import { use } from 'react';
+import { ServiceContext } from '#app/contexts/ServiceContext';
 import GroupedEvents from './grouped-events';
 import ActionGrid from './action-grid';
 import ScoreDetails from './score-details';
@@ -10,6 +12,8 @@ interface ActionsProps {
 }
 
 export const Actions = ({ data }: ActionsProps) => {
+  const { translations } = use(ServiceContext);
+
   const homeKeyEvents = data.home?.actions || [];
   const awayKeyEvents = data.away?.actions || [];
 
@@ -25,6 +29,7 @@ export const Actions = ({ data }: ActionsProps) => {
           awayName={data.away.fullName}
           homeRunningScores={data.home.runningScores}
           awayRunningScores={data.away.runningScores}
+          translations={translations?.sport}
         />
         {hasKeyEvents && (
           <KeyEvents

src/app/components-webcore/SportDataHeader/head-to-head-v2/components/match-progress.tsx

@@ -22,14 +22,14 @@ const MatchProgress = ({ data, isConciseView }: MatchProgressProps) => {
 
   const fallbackPeriod =
     periodLabel &&
-    getFallbackFootballPeriodLabel(
-      periodLabel,
+    getFallbackFootballPeriodLabel({
+      labels: periodLabel,
       status,
-      home.runningScores,
-      away.runningScores,
-      home.fullName,
-      away.fullName,
-    );
+      homeRunningScores: home.runningScores,
+      awayRunningScores: away.runningScores,
+      homeName: home.fullName,
+      awayName: away.fullName,
+    });
 
   const shouldDisplayPeriod =
     periodLabel && fallbackPeriod && shouldShowScores(status);

src/app/components-webcore/SportDataHeader/head-to-head-v2/components/penalty-scores.tsx

@@ -1,3 +1,5 @@
+import { use } from 'react';
+import { ServiceContext } from '#app/contexts/ServiceContext';
 import VisuallyHiddenText from '../../../../components/VisuallyHiddenText';
 import styles from '../index.styles';
 import type { HeadToHeadV2Data } from '../types';
@@ -9,6 +11,11 @@ interface PenaltyScoresProps {
 const PenaltyScores = ({ data }: PenaltyScoresProps) => {
   const { winner, seriesWinner, multiLeg, status } = data;
 
+  const { translations } = use(ServiceContext);
+  const { winOnPenalties } = translations?.sport || {};
+  const { prefix = 'win', suffix = 'on penalties' } = winOnPenalties ?? {};
+  const shortSuffix = suffix === 'on penalties' ? 'on pens' : suffix;
+
   const isPostEvent = status?.toLowerCase() === 'postevent';
   const hasWinner = winner !== undefined;
   const isDrawWithNoSeriesWinner = winner === 'draw' && !seriesWinner;
@@ -36,15 +43,15 @@ const PenaltyScores = ({ data }: PenaltyScoresProps) => {
   return (
     <div css={styles.penaltyScoresContainer}>
       <VisuallyHiddenText>
-        {`${winnerOnPenaltiesName} win ${winnerOnPenaltiesScore} - ${loserOnPenaltiesScore} on penalties`}
+        {`${winnerOnPenaltiesName} ${prefix} ${winnerOnPenaltiesScore} - ${loserOnPenaltiesScore} ${suffix}`}
       </VisuallyHiddenText>
       <div
         css={styles.penaltiesText}
         aria-hidden="true"
         data-testid="penalties-text"
       >
         <span css={styles.winningTeamName}>{`${winnerOnPenaltiesName}`}</span>
-        {` win ${winnerOnPenaltiesScore}-${loserOnPenaltiesScore} on pens`}
+        {` ${prefix} ${winnerOnPenaltiesScore}-${loserOnPenaltiesScore} ${shortSuffix}`}
       </div>
     </div>
   );

src/app/components-webcore/SportDataHeader/head-to-head-v2/components/period.tsx

@@ -1,10 +1,13 @@
+import { use } from 'react';
+import { ServiceContext } from '#app/contexts/ServiceContext';
 import { getFallbackFootballPeriodLabel } from '../helpers/event-summary';
 import styles from '../index.styles';
 import type { EventStatusType, RunningScores } from '../types';
 
 interface PeriodLabels {
   value: string;
   accessible: string;
+  translation?: string;
 }
 
 interface PeriodProps {
@@ -20,15 +23,20 @@ const Period = ({
   homeRunningScores,
   awayRunningScores,
 }: PeriodProps) => {
-  const period = getFallbackFootballPeriodLabel(
+  const { translations } = use(ServiceContext);
+
+  const period = getFallbackFootballPeriodLabel({
     labels,
     status,
     homeRunningScores,
     awayRunningScores,
-  );
+    translations: translations?.sport,
+  });
+
+  const periodValue = period?.translation || period?.value;
   return (
     <div css={styles.period} aria-hidden="true">
-      <div>{period.value}</div>
+      <div>{periodValue}</div>
     </div>
   );
 };

src/app/components-webcore/SportDataHeader/head-to-head-v2/components/score-details.tsx

@@ -1,3 +1,4 @@
+import { Translations } from '#app/models/types/translations';
 import VisuallyHiddenText from '../../../../components/VisuallyHiddenText';
 import styles from '../index.styles';
 import type { RunningScores } from '../types';
@@ -7,13 +8,15 @@ interface ScoreDetailsProps {
   awayName: string;
   homeRunningScores?: RunningScores;
   awayRunningScores?: RunningScores;
+  translations?: Translations['sport'];
 }
 
 const ScoreDetails = ({
   homeName,
   awayName,
   homeRunningScores,
   awayRunningScores,
+  translations,
 }: ScoreDetailsProps) => {
   const shouldDisplayHT = Boolean(
     homeRunningScores?.halftime && awayRunningScores?.halftime,
@@ -29,27 +32,31 @@ const ScoreDetails = ({
     return null;
   }
 
+  const { ft = 'FT', ht = 'HT' } = translations || {};
+  const ftAccessible = ft === 'FT' ? 'Full Time' : ft;
+  const htAccessible = ht === 'HT' ? 'Half Time' : ht;
+
   return (
     <div css={styles.scoreDetailsWrapper}>
       {shouldDisplayFT && (
         <>
-          <VisuallyHiddenText>{`Full Time ${homeName} ${homeRunningScores?.fulltime} , ${awayName} ${awayRunningScores?.fulltime}`}</VisuallyHiddenText>
+          <VisuallyHiddenText>{`${ftAccessible} ${homeName} ${homeRunningScores?.fulltime} , ${awayName} ${awayRunningScores?.fulltime}`}</VisuallyHiddenText>
 
           <div
             css={styles.scoreDetailsScore}
             aria-hidden="true"
-          >{`FT ${homeRunningScores?.fulltime}-${awayRunningScores?.fulltime}`}</div>
+          >{`${ft} ${homeRunningScores?.fulltime}-${awayRunningScores?.fulltime}`}</div>
 
           <span css={styles.scoreDetailsComma}>,</span>
         </>
       )}
       {shouldDisplayHT && (
         <>
-          <VisuallyHiddenText>{`Half Time ${homeName} ${homeRunningScores?.halftime} , ${awayName} ${awayRunningScores?.halftime}`}</VisuallyHiddenText>{' '}
+          <VisuallyHiddenText>{`${htAccessible} ${homeName} ${homeRunningScores?.halftime} , ${awayName} ${awayRunningScores?.halftime}`}</VisuallyHiddenText>{' '}
           <div
             css={styles.scoreDetailsScore}
             aria-hidden="true"
-          >{`HT ${homeRunningScores?.halftime}-${awayRunningScores?.halftime}`}</div>
+          >{`${ht} ${homeRunningScores?.halftime}-${awayRunningScores?.halftime}`}</div>
         </>
       )}
     </div>

src/app/components-webcore/SportDataHeader/head-to-head-v2/head-to-head-v2.tsx

@@ -25,7 +25,7 @@ export const HeadToHeadV2 = ({
   isSportDataLive?: boolean;
 }) => {
   const { enabled: sportHeaderPollEnabled } = useToggle('sportDataPolling');
-  const { translations } = use(ServiceContext);
+  const { translations, service } = use(ServiceContext);
 
   const { currentSportData } = useSportDataPolling(
     initialSportData,
@@ -42,6 +42,7 @@ export const HeadToHeadV2 = ({
   const translatedSportData = translateSportData(
     currentSportData,
     translations,
+    service,
   );
 
   return (

src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/event-summary.ts

@@ -1,9 +1,10 @@
+import { Translations } from '#app/models/types/translations';
 import { EventStatus, HeadToHeadV2Data } from '../types';
 
 const ftFallback = { value: 'FT', accessible: 'Full time' };
 const aetFallback = { value: 'AET', accessible: 'After extra time' };
 
-type PeriodLabel = { value: string; accessible: string };
+type PeriodLabel = { value: string; accessible: string; translation?: string };
 
 type RunningScores = {
   halftime?: string;
@@ -30,16 +31,33 @@ type EventSummaryParams = {
   period?: string;
 };
 
-export const getFallbackFootballPeriodLabel = (
-  labels: PeriodLabel,
-  status: EventStatus | string,
-  homeRunningScores?: RunningScores,
-  awayRunningScores?: RunningScores,
-  homeName?: string,
-  awayName?: string,
-): PeriodLabel => {
+type FallbackPeriodLabelParams = {
+  labels: PeriodLabel;
+  status: EventStatus | string;
+  homeRunningScores?: RunningScores;
+  awayRunningScores?: RunningScores;
+  homeName?: string;
+  awayName?: string;
+  translations?: Translations['sport'];
+};
+
+export const getFallbackFootballPeriodLabel = ({
+  labels,
+  status,
+  homeRunningScores,
+  awayRunningScores,
+  homeName,
+  awayName,
+  translations,
+}: FallbackPeriodLabelParams): PeriodLabel => {
   const isPens = labels?.value?.toLowerCase() === 'pens';
 
+  const {
+    penalties: penaltiesTranslation = 'Penalties',
+    afterExtraTime: aetTranslation,
+    ft: ftTranslation,
+  } = translations || {};
+
   if (status?.toLowerCase() === 'midevent' && isPens) {
     const accessibleText = [
       homeName,
@@ -56,15 +74,28 @@ export const getFallbackFootballPeriodLabel = (
       : '';
 
     return {
-      value: `Penalties${scoreText}`,
-      accessible: `Penalties ${accessibleText}`,
+      value: `${penaltiesTranslation}${scoreText}`,
+      accessible: `${penaltiesTranslation} ${accessibleText}`,
     };
   }
 
   if (isPens) {
-    return homeRunningScores?.extratime && awayRunningScores?.extratime
-      ? aetFallback
+    const aetTranslatedFallback = aetTranslation
+      ? {
+          value: aetTranslation,
+          accessible: aetTranslation,
+        }
+      : aetFallback;
+    const ftTranslatedFallback = ftTranslation
+      ? {
+          value: ftTranslation,
+          accessible: ftTranslation,
+        }
       : ftFallback;
+
+    return homeRunningScores?.extratime && awayRunningScores?.extratime
+      ? aetTranslatedFallback
+      : ftTranslatedFallback;
   }
 
   return labels;
@@ -149,12 +180,12 @@ export const getConciseFootballEventSummary = ({
       summary.push('at');
     }
 
-    const fallbackPeriod = getFallbackFootballPeriodLabel(
-      periodLabel ?? ftFallback,
+    const fallbackPeriod = getFallbackFootballPeriodLabel({
+      labels: periodLabel ?? ftFallback,
       status,
-      home.runningScores,
-      away.runningScores,
-    );
+      homeRunningScores: home.runningScores,
+      awayRunningScores: away.runningScores,
+    });
 
     summary.push(fallbackPeriod.accessible);