Add translations for date-fns

[roryabraham]

Coming from https://expensify.slack.com/archives/C036QM0SLJK/p1718061682568429

Problem

date-fns supports localization, but we aren't localizing relative timestamps like 7 days ago into other locales anywhere in the app.

Solution

Add localization for date-fns in our translation layer, such that relative datetimes and other formatted strings produced by date-fns are translated according to the current locale.

Issue Owner

Current Issue Owner: @c3024

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @c3024 (External)

[melvin-bot[bot]]

Triggered auto assignment to @CortneyOfstad (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

date-fns should be translated based on the locale.

What is the root cause of that problem?

We don't use locale below:

https://github.com/Expensify/App/blob/76e96b9a2d3d8f88d031f979e93b51846212fab4/src/libs/DateUtils.ts#L239-L242

What changes do you think we should make in order to solve the problem?

Update datetimeToRelative to use locale:

formatDistanceToNow(date, {addSuffix: true, locale});

Example call:

DateUtils.datetimeToRelative(es, timestamp);

Import example for es:

import { es } from 'date-fns/locale';

Locale is being set below:

https://github.com/Expensify/App/blob/4622e19c1da5137bc7b227f5b65bf3d83f96a909/src/components/LocaleContextProvider.tsx#L76

Which is then being used as follows:

https://github.com/Expensify/App/blob/4622e19c1da5137bc7b227f5b65bf3d83f96a909/src/components/LocaleContextProvider.tsx#L89

Also, examine other places where this update might be needed.

[c3024]

@roryabraham

The Slack discussion appears to be in a private-channel.

I guess we'd like to show the time like less than a minute ago etc. in place of the exact time we are showing now.

We have a datetimeToRelative from the useLocalize hook which passes locale to the function DateUtils.datetimeToRelative already.

I think we need to change the usages of datetimeToCalendarTime in ReportActionItemThread and ReportActionItemDate to datetimeToRelative.

Should we also add a tooltip that shows the exact time when hovered over?

[ShridharGoel]

I guess we'd like to show the time like less than a minute ago etc. in place of the exact time we are showing now.

@c3024 I don't think that's what was indicated in the OP. It is only about the places at which less than a minute ago type of timestamps show.

[c3024]

@ShridharGoel thanks! I do not remember seeing this relative time anywhere in the app. That is why I must have misunderstood the OP.

Where all do we use relative time?

[ShridharGoel]

@c3024 In the accounting page: