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;