WS-NA: Temporal Migration (PR 3: Update formatDuration to use Temporal)

[Isabella-Mitchell]

Resolves JIRA: WS-NA - 10% time. See plan

Summary

Updates formatDuration to use Temporal. Requires global import of temporal polyfill for storybook and jest (and moved to _app out of specific components/ pages currently using it).

Note the only 'locale' related overrides we have to do are:

• Handle the arabic comma (see uses of string.replace(/,/g, '،'); in src/app/legacy/psammead/psammead-locales/moment)
• Overrides Pashto with Eastern Arabic Numerals (see EasternNumerals override insrc/app/legacy/psammead/psammead-locales/moment/ps.js)

Therefore, this is the easiest function in src/app/legacy/psammead/psammead-timestamp-container/src/utilities/index.ts to update to Temporal

Code changes

• List key code changes that have been made.

Testing

1. Automated tests (snapshots, unit tests, chromatic)

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[Copilot]

Pull request overview

Migrates legacy duration formatting from Moment.js to Temporal while preserving locale-aware output.

Changes:

• Adds Temporal/Intl duration and locale helpers with tests.
• Loads the Temporal polyfill globally for Next.js, Jest, and Storybook.
• Updates duration-formatting documentation and removes redundant imports.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
ws-nextjs-app/setupTests.ts	Loads Temporal for Next.js tests.
ws-nextjs-app/pages/[service]/watch/[id]/[live]/LiveTvPageLayout.tsx	Removes the local polyfill import.
ws-nextjs-app/pages/_app.page.tsx	Loads Temporal application-wide.
src/testHelpers/jest-setup.js	Loads Temporal for Jest.
src/app/legacy/psammead/psammead-timestamp-container/src/utilities/temporalHelpers/index.ts	Adds Temporal formatting helpers.
src/app/legacy/psammead/psammead-timestamp-container/src/utilities/temporalHelpers/index.test.ts	Tests the new helpers.
src/app/legacy/psammead/psammead-timestamp-container/src/utilities/index.ts	Migrates formatDuration to Temporal.
src/app/legacy/psammead/psammead-timestamp-container/README.md	Documents the migrated API.
src/app/components-webcore/SportDataHeader/head-to-head-v2/tests/helpers/index.test.ts	Removes a redundant test import.
.storybook/preview.tsx	Loads Temporal in Storybook and fixes indentation.

Suppressed comments (4)

src/app/legacy/psammead/psammead-timestamp-container/src/utilities/temporalHelpers/index.ts:50

• The overrides are keyed by language, but this lookup uses the complete canonical locale. Consequently valid Pashto variants such as ps-AF bypass the required arabext override even though the documented behavior applies to Pashto generally. Look up the override using the locale's language subtag.

  new Intl.NumberFormat(
    LOCALE_NUMBERING_SYSTEM_OVERRIDES[sanitisedLocale] ?? sanitisedLocale,

src/app/legacy/psammead/psammead-timestamp-container/src/utilities/index.ts:62

• This derives the language from the unsanitised input, so supported forms such as fa_af (explicitly documented above) or uppercase AR do not receive the Arabic comma. Derive it from sanitisedLocale, which has already normalized underscores and casing.

  // Extract language code (e.g., 'fa' from 'fa-AF', 'ar' from 'ar-EG')
  const langCode = locale.split('-')[0];

src/app/legacy/psammead/psammead-timestamp-container/src/utilities/temporalHelpers/index.ts:82

• DurationFormat permits repeated tokens (for example mm:mm), but each replace only handles the first occurrence; mm:mm therefore becomes 05:5m. Replace all occurrences so every value accepted by the public type formats correctly.

    return format
      .replace('h', values.h)
      .replace('mm', values.mm)
      .replace('ss', values.ss)
      .replace('m', values.m);

src/app/legacy/psammead/psammead-timestamp-container/src/utilities/index.ts:51

• Temporal accepts signed ISO durations, but flooring negative totals creates invalid clock components: -PT30S produces minutes -1 and seconds -30, rendered as -01:-30. Handle the sign separately from absolute components, or explicitly reject negative durations during sanitisation.

  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = Math.floor(totalSeconds % 60);

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.