Ws 2759 sport translations extend

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

@@ -1,9 +1,11 @@
+import { use } from 'react';
+import getServiceNumerals from '#app/components/MostRead/utilities/getServiceNumerals';
+import { ServiceContext } from '../../../../contexts/ServiceContext';
 import {
   isCalledOffStatus,
   isInProgressStatus,
   isResultStatus,
 } from '../helpers/event-status-groups';
-
 import Time from './fixture-time';
 import Score from './score';
 import styles from '../index.styles';
@@ -19,15 +21,22 @@ interface PlayedProps {
   data: HeadToHeadV2Data;
 }
 
-const Played = ({ data }: PlayedProps) => (
-  <Score
-    status={data.status}
-    home={data.home.score}
-    homeScoreUnconfirmed={data.home.scoreUnconfirmed}
-    away={data.away.score}
-    awayScoreUnconfirmed={data.away.scoreUnconfirmed}
-  />
-);
+const Played = ({ data }: PlayedProps) => {
+  const { service } = use(ServiceContext);
+  const numerals = getServiceNumerals(service);
+  const translateScore = (score?: string) =>
+    score?.replace(/\d/g, digit => numerals[Number(digit)] ?? digit);
+
+  return (
+    <Score
+      status={data.status}
+      home={translateScore(data.home.score)}
+      homeScoreUnconfirmed={data.home.scoreUnconfirmed}
+      away={translateScore(data.away.score)}
+      awayScoreUnconfirmed={data.away.scoreUnconfirmed}
+    />
+  );
+};
 
 interface CentreProps {
   data: HeadToHeadV2Data;

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

@@ -1,3 +1,5 @@
+import { use } from 'react';
+import { ServiceContext } from '#app/contexts/ServiceContext';
 import ActionGrid from './action-grid';
 import VisuallyHiddenText from '../../../../components/VisuallyHiddenText';
 import styles from '../index.styles';
@@ -31,51 +33,62 @@ interface GroupedEventsProps {
   homeName: string;
   awayName: string;
 }
-
 const GroupedEvents = ({
   groupedEvents,
   homeName,
   awayName,
-}: GroupedEventsProps) => (
-  <div css={styles.groupedEventsWrapper}>
-    {groupedEvents.map(
-      ({
-        groupName,
-        homeTeamActions,
-        homeTeamAccessibleActions,
-        awayTeamActions,
-        awayTeamAccessibleActions,
-      }) => (
-        <div css={styles.actionWrapper} key={groupName.fullName}>
-          <ActionGrid>
-            <div css={styles.groupLabel}>{groupName.fullName}</div>
-            <div css={styles.groupedHomeEvent}>
-              {homeTeamActions.length > 0 && (
-                <>
-                  <VisuallyHiddenText>{`${homeName},`}</VisuallyHiddenText>
-                  <ActionsDisplay
-                    teamActions={homeTeamActions}
-                    teamAccessibleActions={homeTeamAccessibleActions}
-                  />
-                </>
-              )}
-            </div>
-            <div css={styles.groupedAwayEvent}>
-              {awayTeamActions.length > 0 && (
-                <>
-                  <VisuallyHiddenText>{`${awayName},`}</VisuallyHiddenText>
-                  <ActionsDisplay
-                    teamActions={awayTeamActions}
-                    teamAccessibleActions={awayTeamAccessibleActions}
-                  />
-                </>
-              )}
+}: GroupedEventsProps) => {
+  const { translations } = use(ServiceContext);
+  const assistTranslation = translations?.sport?.assists;
+
+  return (
+    <div css={styles.groupedEventsWrapper}>
+      {groupedEvents.map(
+        ({
+          groupName,
+          homeTeamActions,
+          homeTeamAccessibleActions,
+          awayTeamActions,
+          awayTeamAccessibleActions,
+        }) => {
+          const displayName =
+            groupName.fullName === 'Assists' && assistTranslation
+              ? assistTranslation
+              : groupName.fullName;
+
+          return (
+            <div css={styles.actionWrapper} key={groupName.fullName}>
+              <ActionGrid>
+                <div css={styles.groupLabel}>{displayName}</div>
+                <div css={styles.groupedHomeEvent}>
+                  {homeTeamActions.length > 0 && (
+                    <>
+                      <VisuallyHiddenText>{`${homeName},`}</VisuallyHiddenText>
+                      <ActionsDisplay
+                        teamActions={homeTeamActions}
+                        teamAccessibleActions={homeTeamAccessibleActions}
+                      />
+                    </>
+                  )}
+                </div>
+                <div css={styles.groupedAwayEvent}>
+                  {awayTeamActions.length > 0 && (
+                    <>
+                      <VisuallyHiddenText>{`${awayName},`}</VisuallyHiddenText>
+                      <ActionsDisplay
+                        teamActions={awayTeamActions}
+                        teamAccessibleActions={awayTeamAccessibleActions}
+                      />
+                    </>
+                  )}
+                </div>
+              </ActionGrid>
             </div>
-          </ActionGrid>
-        </div>
-      ),
-    )}
-  </div>
-);
+          );
+        },
+      )}
+    </div>
+  );
+};
 
 export default GroupedEvents;

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

@@ -44,6 +44,7 @@ const PenaltyScores = ({ data }: PenaltyScoresProps) => {
         data-testid="penalties-text"
       >
         <span css={styles.winningTeamName}>{`${winnerOnPenaltiesName}`}</span>
+        {/* // hard coded */}
         {` win ${winnerOnPenaltiesScore}-${loserOnPenaltiesScore} on pens`}
       </div>
     </div>

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

@@ -56,8 +56,8 @@ export const getFallbackFootballPeriodLabel = (
       : '';
 
     return {
-      value: `Penalties${scoreText}`,
-      accessible: `Penalties ${accessibleText}`,
+      value: `Penalties${scoreText}`, // hard coded
+      accessible: `Penalties ${accessibleText}`, // hard coded
     };
   }
 

src/app/components/MostRead/Amp/getRemoteDataScript/index.ts

@@ -1,5 +1,5 @@
 import { Services } from '../../../../models/types/global';
-import { serviceNumerals } from '../../Canonical/Rank';
+import serviceNumerals from '../../utilities/getServiceNumerals';
 
 export const transformData = () => {
   return `

src/app/components/MostRead/Canonical/Rank/index.tsx

@@ -1,29 +1,11 @@
-import {
-  Burmese,
-  Bengali,
-  EasternArabic,
-  Nepali,
-  WesternArabic,
-} from '../../../../legacy/psammead/psammead-locales/src/numerals';
 import { Services } from '../../../../models/types/global';
 import { ColumnLayout, MostReadRankProps, Size } from '../../types';
 import styles, {
   getOneColumnCss,
   getTwoColumnCss,
   getMultiColumnCss,
 } from './index.styles';
-
-export const serviceNumerals = (service: Services) => {
-  const servicesNonWesternNumerals = {
-    bengali: Bengali,
-    burmese: Burmese,
-    dari: EasternArabic,
-    nepali: Nepali,
-    pashto: EasternArabic,
-    persian: EasternArabic,
-  };
-  return servicesNonWesternNumerals[service] || WesternArabic;
-};
+import serviceNumerals from '../../utilities/getServiceNumerals';
 
 interface ColumnCssProps {
   listIndex: number | string;

src/app/components/MostRead/utilities/getServiceNumerals.ts

@@ -0,0 +1,22 @@
+import { Services } from '../../../models/types/global';
+import {
+  Burmese,
+  Bengali,
+  EasternArabic,
+  Nepali,
+  WesternArabic,
+} from '../../../legacy/psammead/psammead-locales/src/numerals';
+
+const serviceNumerals = (service: Services) => {
+  const servicesNonWesternNumerals = {
+    bengali: Bengali,
+    burmese: Burmese,
+    dari: EasternArabic,
+    nepali: Nepali,
+    pashto: EasternArabic,
+    persian: EasternArabic,
+  };
+  return servicesNonWesternNumerals[service] || WesternArabic;
+};
+
+export default serviceNumerals;

src/app/lib/config/services/afrique.ts

@@ -309,6 +309,9 @@ export const service: DefaultServiceConfig = {
       },
       topStoriesTitle: 'À la une',
       featuresAnalysisTitle: 'Le choix de la rédaction',
+      sport: {
+        assists: 'Passes décisives',
+      },
     },
     mostRead: {
       header: 'Les plus populaires',

src/app/models/types/translations.ts

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 export interface Translations {
-  matchSummary?: string;
+  matchSummary?: string; // opportunity to refactor?
   and?: string;
   pagination?: {
     page?: string;
@@ -242,6 +242,9 @@ export interface Translations {
     previous?: string;
     next?: string;
   };
+  sport?: {
+    assists?: string;
+  };
 }
 
 export interface TranslationsError {