[WS-2756] Localise football match kick off time in Sport Header

package.json

@@ -86,6 +86,7 @@
     "react-dom": "19.2.6",
     "react-helmet": "6.1.0",
     "react-lazyload": "3.2.1",
+    "temporal-polyfill": "0.3.0",
     "undici": "8.3.0",
     "uuid": "13.0.1",
     "winston": "patch:winston@3.8.2#./patches/winston-file-descriptor.patch"
@@ -184,4 +185,4 @@
     ]
   },
   "packageManager": "yarn@4.9.4"
-}
+}

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

@@ -42,7 +42,7 @@ const Centre = ({ data, maxScoreLength }: CentreProps) => {
       {shouldShowScores(status) ? (
         <Played data={data} />
       ) : (
-        <Time time={data.time} />
+        <Time date={data.date} time={data.time} />
       )}
     </div>
   );

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

@@ -1,22 +1,35 @@
+import { useEffect, useState } from 'react';
 import VisuallyHiddenText from '../../../../components/VisuallyHiddenText';
 import styles from '../index.styles';
+import getLocalisedTime from '../helpers/localise-time';
 
 interface TimeData {
   displayTimeUK: string;
   accessibleTime: string;
 }
 
 interface TimeProps {
+  date: string;
   time: TimeData;
 }
 
-const Time = ({ time }: TimeProps) => (
-  <>
-    <time css={styles.fixtureTime} aria-hidden="true">
-      {time.displayTimeUK}
-    </time>
-    <VisuallyHiddenText>{time.accessibleTime}</VisuallyHiddenText>
-  </>
-);
+const Time = ({ date, time }: TimeProps) => {
+  const [localisedTime, setLocalisedTime] = useState(time.displayTimeUK);
+
+  useEffect(() => {
+    const clientTime = getLocalisedTime(date, time.displayTimeUK);
+    setLocalisedTime(clientTime);
+  }, []);
+
+  return (
+    <>
+      <time css={styles.fixtureTime} aria-hidden="true">
+        {localisedTime}
+      </time>
+
+      <VisuallyHiddenText>{localisedTime}</VisuallyHiddenText>
+    </>
+  );
+};
 
 export default Time;

src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts

@@ -0,0 +1,44 @@
+import 'temporal-polyfill/global';
+
+const getLocalisedTime = (inputDate, inputTime) => {
+  const [, day, monthName, year] = inputDate.split(' ');
+  const [hour, minute] = inputTime.split(':').map(Number);
+
+  const monthIndex =
+    [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ].indexOf(monthName) + 1;
+
+  const ukDateTime = Temporal.ZonedDateTime.from({
+    timeZone: 'Europe/London',
+    year: Number(year),
+    month: monthIndex,
+    day: Number(day),
+    hour,
+    minute,
+  });
+
+  const userLocalDateTime = ukDateTime
+    .withTimeZone(Temporal.Now.timeZoneId())
+    .toLocaleString(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+      numberingSystem: 'latn',
+    });
+
+  return userLocalDateTime;
+};
+
+export default getLocalisedTime;

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

@@ -0,0 +1,77 @@
+import 'temporal-polyfill/global';
+import getLocalisedTime from '../../helpers/localise-time';
+
+describe('getLocalisedTime', () => {
+  const originalTimeZoneId = Temporal.Now.timeZoneId;
+
+  afterEach(() => {
+    Temporal.Now.timeZoneId = originalTimeZoneId;
+  });
+
+  it('should return the same time when user is in UK timezone', () => {
+    Temporal.Now.timeZoneId = () => 'Europe/London';
+
+    const result = getLocalisedTime('Sat 15 Jun 2024', '15:00');
+    expect(result).toBe('15:00');
+  });
+
+  it('should convert UK time to CET timezone (1 hour ahead in summer)', () => {
+    Temporal.Now.timeZoneId = () => 'Europe/Paris';
+
+    const result = getLocalisedTime('Sat 15 Jun 2024', '15:00');
+    expect(result).toBe('16:00');
+  });
+
+  it('should convert UK time to EST timezone (5 hours behind in summer)', () => {
+    Temporal.Now.timeZoneId = () => 'America/New_York';
+
+    const result = getLocalisedTime('Sat 15 Jun 2024', '15:00');
+    expect(result).toBe('10:00');
+  });
+
+  it('should handle midnight correctly', () => {
+    Temporal.Now.timeZoneId = () => 'Europe/London';
+
+    const result = getLocalisedTime('Mon 1 Jan 2024', '00:00');
+    expect(result).toBe('00:00');
+  });
+
+  it('should handle day transition when converting to later timezone', () => {
+    Temporal.Now.timeZoneId = () => 'Asia/Tokyo';
+
+    const result = getLocalisedTime('Sat 15 Jun 2024', '20:00');
+    expect(result).toBe('04:00');
+  });
+
+  it('should parse all months correctly', () => {
+    Temporal.Now.timeZoneId = () => 'Europe/London';
+
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
+
+    months.forEach((month, index) => {
+      const day = index + 1;
+      const result = getLocalisedTime(`Mon ${day} ${month} 2024`, '12:00');
+      expect(result).toBe('12:00');
+    });
+  });
+
+  it('should handle winter time correctly with GMT offset', () => {
+    Temporal.Now.timeZoneId = () => 'Europe/Paris';
+
+    const result = getLocalisedTime('Sat 15 Jan 2024', '15:00');
+    expect(result).toBe('16:00');
+  });
+});

yarn.lock

@@ -15866,6 +15866,7 @@ __metadata:
     retry: "npm:0.13.1"
     storybook: "npm:10.3.6"
     supertest: "npm:7.2.2"
+    temporal-polyfill: "npm:0.3.0"
     timemachine: "npm:0.3.2"
     ts-jest: "npm:29.4.9"
     typescript: "npm:5.9.3"