[WS-2756] Implementation with Temporal

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

@@ -40,9 +40,9 @@ const Centre = ({ data, maxScoreLength }: CentreProps) => {
   return (
     <div css={styles.centre(maxScoreLength)}>
       {shouldShowScores(status) ? (
-        <Played data={data} />
+        <Time date={data.date} time={data.time} />
       ) : (
-        <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,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;