WS-2610: Sport Data Polling (Front end changes)

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

@@ -69,7 +69,7 @@ type StoryData = HeadToHeadV2Data & {
 };
 
 interface ComponentProps {
-  data: StoryData;
+  initialSportData: StoryData;
   isConciseView?: boolean;
   shouldShowActions?: boolean;
   maximumContainerScoreDigits?: number;
@@ -80,15 +80,15 @@ const baseData = fixtureData.data.sportDataEventContent
   .sportDataEvent as unknown as StoryData;
 
 const Component = ({
-  data,
+  initialSportData,
   isConciseView = false,
   shouldShowActions = true,
   maximumContainerScoreDigits,
   teamBadgePlaceholderFallbackType = 'badge',
 }: ComponentProps) => {
   return (
     <HeadToHeadV2
-      data={data}
+      initialSportData={initialSportData}
       isConciseView={isConciseView}
       shouldShowActions={shouldShowActions}
       maximumContainerScoreDigits={maximumContainerScoreDigits}
@@ -97,9 +97,13 @@ const Component = ({
   );
 };
 
-export const Default = () => <Component data={baseData} />;
+export const Default = () => <Component initialSportData={baseData} />;
 export const ConciseView = () => (
-  <Component data={baseData} isConciseView shouldShowActions={false} />
+  <Component
+    initialSportData={baseData}
+    isConciseView
+    shouldShowActions={false}
+  />
 );
 
 export const CancelledEvent = HeadToHeadV2Component.bind({});
@@ -115,6 +119,7 @@ export const EventWithOnwardJourneyHoverConcise =
 
 // @ts-expect-error - PS copy and paste
 CancelledEvent.args = {
+  urn: 'urn:bbc:sportsdata:football:event:s-3y91hnyfjh24yxjhm77a7hy50',
   home: 'Fulham',
   away: 'Liverpool',
   baseData: cancelledEventData,

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

@@ -1,3 +1,5 @@
+import useSportDataPolling from '#app/hooks/useSportDataPolling';
+import useToggle from '#app/hooks/useToggle';
 import Footer from './components/footer';
 import HeadToHeadHeader from './components/head-to-head-header';
 import { HeadToHeadBanner } from './components/head-to-head-banner';
@@ -7,21 +9,30 @@ import { HeadToHeadV2Data } from './types';
 import styles from './index.styles';
 
 export const HeadToHeadV2 = ({
-  data,
+  initialSportData,
   isConciseView,
   shouldShowActions,
   maximumContainerScoreDigits,
   teamBadgePlaceholderFallbackType = 'badge',
+  isSportDataLive = false,
 }: {
-  data: HeadToHeadV2Data;
+  initialSportData: HeadToHeadV2Data;
   isConciseView?: boolean;
   shouldShowActions?: boolean;
   maximumContainerScoreDigits?: number;
   teamBadgePlaceholderFallbackType?: 'badge' | 'flag';
+  isSportDataLive?: boolean;
 }) => {
+  const { enabled: sportHeaderPollEnabled } = useToggle('sportDataPolling');
+
+  const { currentSportData } = useSportDataPolling(
+    initialSportData,
+    Boolean(sportHeaderPollEnabled) && isSportDataLive,
+  );
+
   const hasActions =
-    (data?.home?.actions?.length ?? 0) > 0 ||
-    (data?.away?.actions?.length ?? 0) > 0;
+    (currentSportData?.home?.actions?.length ?? 0) > 0 ||
+    (currentSportData?.away?.actions?.length ?? 0) > 0;
 
   // TODO: Re-enable badge visibility logic once we have the necessary badge mappings in place
   const shouldHideBadges = true;
@@ -32,26 +43,30 @@ export const HeadToHeadV2 = ({
         <div css={styles.container({ isConciseView })}>
           {!isConciseView && (
             <HeadToHeadHeader
-              date={data.date}
-              status={data.status}
-              tournamentDescriptionLabel={data.tournamentDescriptionLabel}
+              date={currentSportData.date}
+              status={currentSportData.status}
+              tournamentDescriptionLabel={
+                currentSportData.tournamentDescriptionLabel
+              }
             />
           )}
           <HeadToHeadBanner
-            data={data}
+            data={currentSportData}
             isConciseView={isConciseView ?? false}
-            eventSummary={data.accessibleEventSummary}
+            eventSummary={currentSportData.accessibleEventSummary}
             shouldHideBadges={shouldHideBadges}
             maxScoreLength={maximumContainerScoreDigits}
             teamBadgePlaceholderFallbackType={teamBadgePlaceholderFallbackType}
           />
-          {hasActions && shouldShowActions && <Actions data={data} />}
-          {!isConciseView && <Actions data={data} />}
+          {hasActions && shouldShowActions && (
+            <Actions data={currentSportData} />
+          )}
+          {!isConciseView && <Actions data={currentSportData} />}
           {!isConciseView && (
             <Footer
-              venue={data.venue?.name || 'To be confirmed'}
-              attendanceValue={data.attendance?.value}
-              attendanceInfo={data.attendance?.additionalInfo}
+              venue={currentSportData.venue?.name || 'To be confirmed'}
+              attendanceValue={currentSportData.attendance?.value}
+              attendanceInfo={currentSportData.attendance?.additionalInfo}
             />
           )}
         </div>

src/app/components-webcore/SportDataHeader/head-to-head-v2/storybook/helpers/base-component.tsx

@@ -96,7 +96,7 @@ export const HeadToHeadV2ConciseComponent = (args: StoryArgs) => {
 
   return (
     <HeadToHeadV2
-      data={updatedStoryBookControls}
+      initialSportData={updatedStoryBookControls}
       isConciseView
       shouldShowActions={false}
     />
@@ -153,7 +153,7 @@ export const HeadToHeadV2Component = (args: StoryArgs) => {
 
   return (
     <HeadToHeadV2
-      data={updatedStoryBookControls}
+      initialSportData={updatedStoryBookControls}
       isConciseView={false}
       shouldShowActions={false}
     />

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

@@ -29,6 +29,13 @@ import {
 import HeadToHead from '../head-to-head-v2';
 import type { HeadToHeadV2Data } from '../types';
 
+jest.mock('#app/hooks/useSportDataPolling', () => ({
+  __esModule: true,
+  default: jest.fn(initialSportData => ({
+    currentSportData: initialSportData,
+  })),
+}));
+
 interface RenderOptions {
   data: HeadToHeadV2Data;
   isConciseView?: boolean;
@@ -42,7 +49,7 @@ const renderHeadToHead = ({
 }: RenderOptions) =>
   render(
     <HeadToHead
-      data={data}
+      initialSportData={data}
       isConciseView={isConciseView}
       shouldShowActions={shouldShowActions}
     />,

src/app/components-webcore/SportDataHeader/head-to-head-v2/types.ts

@@ -116,6 +116,10 @@ export type Team = {
 };
 
 export type HeadToHeadV2Data = {
+  /**
+   * The event's unique urn.
+   */
+  urn: string;
   /**
    * The event's unique id.
    */
@@ -206,7 +210,7 @@ export type BadgeSize =
   | { small?: number; medium?: number; large?: number };
 
 export interface HeadToHeadV2Props {
-  data: HeadToHeadV2Data;
+  initialSportData: HeadToHeadV2Data;
   isConciseView: boolean;
   shouldShowActions?: boolean;
   /**

src/app/hooks/useSportDataPolling/fixture/fixtureSportData.js

@@ -0,0 +1,132 @@
+export default {
+  urn: 'urn:bbc:sportsdata:football:event:s-3y91hnyfjh24yxjhm77a7hy50',
+  home: {
+    id: 'ej5er0oyngdw138yuumwqbyqt',
+    fullName: 'Bologna',
+    shortName: 'Bologna',
+    urn: 'urn:bbc:sportsdata:football:team:bologna',
+    runningScores: {
+      halftime: '0',
+      fulltime: '1',
+      aggregate: '1',
+    },
+    scoreUnconfirmed: '1',
+    actions: [
+      {
+        playerUrn:
+          'urn:bbc:sportsdata:football:player:s-2bmeynv0dhsc8sjfuaprkexre',
+        playerName: 'J. Rowe',
+        actionType: 'goal',
+        actions: [
+          {
+            type: 'Goal',
+            typeLabel: { value: 'Goal', accessible: 'Goal' },
+            timeLabel: {
+              value: "90'",
+              accessible: '90 minutes',
+            },
+          },
+        ],
+      },
+    ],
+    score: '1',
+  },
+  away: {
+    id: 'b496gs285it6bheuikox6z9mj',
+    fullName: 'Aston Villa',
+    shortName: 'Aston Villa',
+    urn: 'urn:bbc:sportsdata:football:team:aston-villa',
+    runningScores: {
+      halftime: '1',
+      fulltime: '3',
+      aggregate: '3',
+    },
+    scoreUnconfirmed: '3',
+    actions: [
+      {
+        playerUrn:
+          'urn:bbc:sportsdata:football:player:s-8qys6qtdwgsycxducl062zld5',
+        playerName: 'E. Konsa',
+        actionType: 'goal',
+        actions: [
+          {
+            type: 'Goal',
+            typeLabel: { value: 'Goal', accessible: 'Goal' },
+            timeLabel: {
+              value: "44'",
+              accessible: '44 minutes',
+            },
+          },
+        ],
+      },
+      {
+        playerUrn:
+          'urn:bbc:sportsdata:football:player:s-5m0j33eoa5c8pqlr0tdf7undh',
+        playerName: 'O. Watkins',
+        actionType: 'goal',
+        actions: [
+          {
+            type: 'Goal',
+            typeLabel: { value: 'Goal', accessible: 'Goal' },
+            timeLabel: {
+              value: "51'",
+              accessible: '51 minutes',
+            },
+          },
+          {
+            type: 'Goal',
+            typeLabel: { value: 'Goal', accessible: 'Goal' },
+            timeLabel: {
+              value: "90'+4",
+              accessible: '90 minutes plus 4',
+            },
+          },
+        ],
+      },
+    ],
+    score: '3',
+  },
+  time: {
+    accessibleTime: '20:00',
+    displayTimeUK: '20:00',
+    timeCertainty: true,
+  },
+  date: 'Thu 9 Apr 2026',
+  tournament: {
+    id: '4c1nfi2j1m731hcay25fcgndq',
+    name: 'UEFA Europa League',
+    disambiguatedName: 'UEFA Europa League',
+    urn: 'urn:bbc:sportsdata:football:tournament:europa-league',
+    thingsGuid: '2afbdda7-71d4-544d-bcc6-d9ff50314b2a',
+  },
+  stage: {
+    id: '7wxuj38kqm8bz3cmi15vu4w7o',
+    name: 'Quarter-finals',
+    urn: '',
+  },
+  multiLeg: {
+    leg: 1,
+    relatedMatchId: 's-9ur6e6w5f4ahyxph7ef4rks2c',
+  },
+  period: 'ft',
+  venue: {
+    id: '2nrn0y55nz9ee7p9adzbb7fta',
+    urn: 'urn:bbc:sportsdata:football:venue:s-2nrn0y55nz9ee7p9adzbb7fta',
+    name: "Stadio Renato Dall'Ara",
+    shortName: "Stadio Renato Dall'Ara",
+  },
+  attendance: { value: 31142 },
+  status: 'PostEvent',
+  periodLabel: { value: 'FT', accessible: 'Full time' },
+  winner: 'away',
+  tournamentDescriptionLabel: 'UEFA Europa League - Quarter-finals',
+  groupedActions: [
+    {
+      groupName: { fullName: 'Assists', shortName: 'Assists' },
+      homeTeamActions: ["J. Lucumí (90')"],
+      awayTeamActions: ["Y. Tielemans (44', 90'+4)", "E. Buendía (51')"],
+    },
+  ],
+  accessibleEventSummary: 'Bologna 1 , Aston Villa 3 at Full time',
+  sportDiscipline: 'football',
+};