diff --git a/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/centre.tsx b/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/centre.tsx
index e8a035d0c57..c4aaaff8de4 100644
--- a/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/centre.tsx
+++ b/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/centre.tsx
@@ -40,9 +40,9 @@ const Centre = ({ data, maxScoreLength }: CentreProps) => {
return (
{shouldShowScores(status) ? (
-
+
) : (
-
+
)}
);
diff --git a/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx b/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx
index efa3d9ba4d3..55e6e5d0331 100644
--- a/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx
+++ b/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx
@@ -1,5 +1,7 @@
+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;
@@ -7,16 +9,27 @@ interface TimeData {
}
interface TimeProps {
+ date: string;
time: TimeData;
}
-const Time = ({ time }: TimeProps) => (
- <>
-
- {time.accessibleTime}
- >
-);
+const Time = ({ date, time }: TimeProps) => {
+ const [localisedTime, setLocalisedTime] = useState(time.displayTimeUK);
+
+ useEffect(() => {
+ const clientTime = getLocalisedTime(date, time.displayTimeUK);
+ setLocalisedTime(clientTime);
+ }, []);
+
+ return (
+ <>
+
+
+ {localisedTime}
+ >
+ );
+};
export default Time;
diff --git a/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts b/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts
new file mode 100644
index 00000000000..3fdb59f169a
--- /dev/null
+++ b/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts
@@ -0,0 +1,50 @@
+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;
+
+ console.log(inputDate, inputTime, 'original input');
+
+ const ukDateTime = Temporal.ZonedDateTime.from({
+ timeZone: 'Europe/London',
+ year: Number(year),
+ month: monthIndex,
+ day: Number(day),
+ hour,
+ minute,
+ });
+
+ console.log(ukDateTime.toString(), 'temporal time');
+
+ const userLocalDateTime = ukDateTime
+ .withTimeZone(Temporal.Now.timeZoneId())
+ .toLocaleString(undefined, {
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: false,
+ numberingSystem: 'latn',
+ });
+
+ console.log(userLocalDateTime, 'user local time (only hours)');
+
+ return userLocalDateTime;
+};
+
+export default getLocalisedTime;