Studio: Add translation to demo site expiration date #16

katinthehatsite · 2024-04-23T11:08:03Z

Related to https://github.com/Automattic/dotcom-forge/issues/6666

Proposed Changes

This PR makes the demo site expiration date translatable into other languages.

Testing Instructions

Testing for a plural value

Pull the changes from this branch locally
Before starting the app, modify the language in locale.ts in getPreferredSystemLanguages to return Polish:

export function getPreferredSystemLanguages() {
	if ( process.platform === 'linux' && process.env.NODE_ENV !== 'test' ) {
			.getPreferredSystemLanguages()
			.filter( ( lang ) => supportedLocales.includes( lang ) );
	}
	return [ 'pl' ];
}

Open src/translations/local-environment-pl.jed.json and add the following translations to the file:

            "%d hour": [
                "%d godzinę",
                "%d godziny",
                "%d godzin"
            ],
            "%d minute": [
                "%d minutę",
                "%d minuty",
                "%d minut"
            ],
            "%d day": [
                "%d dzień",
                "%d dni",
                "%d dni"
            ]

Start the app with nvm use && npm install && npm start (this step is important as we just modified translations)
Create a demo site
Confirm that instead of days in English, you can see the Polish translation:

Close the app completely

Testing for a singular value

In src/hooks/use-expiration-date.ts, change the const endDate to the following value:

const endDate = new Date(now.getTime() + (1000 * 60 * 60 * 24) + (1000 * 60 * 20));

Start the app with nvm use && npm install && npm start
Create a demo site
Confirm that instead of day in English, you can see the Polish translation:

Testing for genitive case

In src/hooks/use-expiration-date.ts, change the const endDate to the following value:

const endDate = new Date( now.getTime() + 1000 * 60 * 60 * 26 );

Start the app with nvm use && npm install && npm start
Create a demo site
Confirm that instead of day in English, you can see the Polish translation:

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

sejas

It works as expected.
I edited src/translations/local-environment-es.jed.json and started Studio, and I confirm the formatDifference is translated.

I also investigated if date-fns has already these strings translated but I couldn't find anything. We can pass a function locale.formatDistance, but we will need to add the translations and replace the string anyway. There is an open issue where the solutions are very similar to ours date-fns/date-fns#2134

I just suggested using a for loop instead of a reduce function. But it's not a strong opinion.

sejas · 2024-04-24T11:29:29Z

src/hooks/use-expiration-date.ts

+	const countDownTranslated = [
+		{ key: 'days', value: __( 'days' ) },
+		{ key: 'day', value: __( 'day' ) },
+		{ key: 'hours', value: __( 'hours' ) },
+		{ key: 'hour', value: __( 'hour' ) },
+		{ key: 'minutes', value: __( 'minutes' ) },
+		{ key: 'minute', value: __( 'minute' ) },
+	];
+
+	// Map the translated values to the countDown string
+	const translatedCountDown = countDownTranslated.reduce( ( acc, { key, value } ) => {
+		return acc.replace( key, value );
+	}, countDown );


Nice!, I tested it and it works great.
As a suggestion, here is another alternative that I think is easier to understand:

- const countDown = formatDuration( + let countDown = formatDuration(

Suggested change

const countDownTranslated = [

{ key: 'days', value: __( 'days' ) },

{ key: 'day', value: __( 'day' ) },

{ key: 'hours', value: __( 'hours' ) },

{ key: 'hour', value: __( 'hour' ) },

{ key: 'minutes', value: __( 'minutes' ) },

{ key: 'minute', value: __( 'minute' ) },

];

// Map the translated values to the countDown string

const translatedCountDown = countDownTranslated.reduce( ( acc, { key, value } ) => {

return acc.replace( key, value );

}, countDown );

const countDownTranslated = {

days: __( 'days' ),

day: __( 'day' ),

hours: __( 'hours' ),

hour: __( 'hour' ),

minutes: __( 'minutes' ),

minute: __( 'minute' ),

};

// Replace each translated word to the countDown string

for ( const [ key, value ] of Object.entries( countDownTranslated ) ) {

countDown = countDown.replace( key, value );

}

- countDown: isExpired ? __( 'Expired' ) : translatedCountDown, + countDown: isExpired ? __( 'Expired' ) : countDown,

wojtekn · 2024-04-24T12:36:21Z

@katinthehatsite I see two possible issues with that approach. First, we don't handle plurals, so we would produce incorrect translations in some cases. E.g. in Polish, if we translate 'hour' to 'godzina' and 'hours' to 'godziny':

1 hour: 1 godzina
2, 3, 4 hours: 2, 3, 4 godziny
5 hours: 5 godziny, but should be 5 godzin

To cover for that, should we translate words with a number and support plurals e.g. _n( '%d hour', '%d hours', hour )?

The second one looks more complex. I'm wondering if there are any languages where translation would use a different order of days/hours/minutes. E.g. hypothetically, if there is a language where '3 days 4 hours' should be translated to '4 hours 3 days'. This might be challenging to solve, though, as we might need to have support for multiple plurals in a sentence.

sejas · 2024-04-24T14:26:00Z

To cover for that, should we translate words with a number and support plurals e.g. _n( '%d hour', '%d hours', hour )?

My understanding is that the date-fns library already outputs the "regular" singular and plural.
I agree that to cover the different order that Arabic or Chinese (RTL) could have, we should add the word and number (%d) into the translation string.

The options I see to cover the genitive plural are:

add a "complex" logic
add all the numbers into translation. 1-7 days, 1,23 hours, 1,59 minutes.
A workaround could be translating only the initial or first three letters for those languages that have different endings for plural of 5+.

Maybe there is a better way. My assumption is that _n won't work for that kind of plural.

katinthehatsite · 2024-04-24T14:29:23Z

I was just playing with _n and was not able to make it work for genitive plurals yet. I will take further look at what we can do.

katinthehatsite · 2024-04-24T15:00:10Z

A workaround could be translating only the initial or first three letters for those languages that have different endings for plural of 5+.

I think this might tricky because not all languages have the plural of 5+ that is different for the genitive case. For example, in Irish, there are special cases for 1, 2, 3-6, 7-11 and the rest of the numbers.

wojtekn · 2024-04-24T15:17:53Z

@katinthehatsite @sejas, what if we do the following for now?

if (need_days) {
_n( '%d day', '%d days', day ) + ', ' + _n( '%d hour', '%d hours', hour ) + ', ' + _n( '%d minute', '%d minutes', minute )
} else if (need_hours) {
_n( '%d hour', '%d hours', hour ) + ', ' + _n( '%d minute', '%d minutes', minute )
} else if (need_minutes) {
_n( '%d minute', '%d minutes', minute )
}

derekblank · 2024-04-25T04:54:41Z

+1 for continuing to explore a solution using date-fns/locale, even if it's not the short-term solution used in this PR.

It's a bit different than how we're currently handling it, but as you've probably already encountered with date-fns/locale i18n, locales can manually imported as needed and can be passed as options:

import { formatDistance } from "date-fns";
// Require Esperanto locale
import { eo } from "date-fns/locale";

const result = formatDistance(
  new Date(2016, 7, 1),
  new Date(2015, 0, 1),
  { locale: eo }, // Pass the locale as an option
);
//=> 'pli ol 1 jaro'

Some of the locales are quite robust in how they handle declension (depending on how well the locale has been set up). Each locale has an output snapshot where the cases can be reviewed -- check out the Polish locale snapshot, for example.

I understand that we'd already be importing the local-environment-**.jed.json translation files that may already have these words translated to some degree, but building a formatter using intervalToDuration and format from date-fns/locale as @sejas described in #16 (review) may be worth it to handle complex cases (where declensions like genitive plurals have already been handled).

Another simple alternative could be to just say the date: "Expires on January 1st, 2025".

wojtekn · 2024-04-25T07:22:19Z

Another simple alternative could be to just say the date: "Expires on January 1st, 2025".

A simple solution for a complex problem! 🧐

+1 for continuing to explore a solution using date-fns/locale, even if it's not the short-term solution used in this PR.

Wouldn't formatDuration() do exactly what we need?

formatDuration({
  years: 2,
  months: 9,
  weeks: 1,
  days: 7,
  hours: 5,
  minutes: 9,
  seconds: 30
})
//=> '2 years 9 months 1 week 7 days 5 hours 9 minutes 30 seconds'

katinthehatsite · 2024-04-25T07:47:16Z

Another simple alternative could be to just say the date: "Expires on January 1st, 2025".

I already thought about this 😅 But not sure if we would want to be more precise when the expiration date is less than 24 hours and we have to go for displaying minutes and hours unless we display some sort of timer instead 😅

I am going to try a couple more things based on the suggestions that came in and then we can go from there :)

sejas · 2024-04-25T09:02:32Z

Wouldn't formatDuration() do exactly what we need?

Yes! and it's what we are using, but it doesn't come with translations out of the box, but it offers locale.formatDistance as a custom function to add your own translations.
Kat and I checked that _n should handle genitive plurals (TIL), and that's why the translations JSON are arrays of strings instead of directly strings.

studio/src/hooks/use-expiration-date.ts

Lines 32 to 40 in 78e62b2

    
           const countDown = formatDuration( 
        
           	intervalToDuration( { 
        
           		start: now, 
        
           		// Add 1 hour to the end date serves us here, as for the last hour 
        
           		// we show the minutes left. 
        
           		end: addHours( endDate, 1 ), 
        
           	} ), 
        
           	{ format, delimiter: ', ' } 
        
           );

katinthehatsite · 2024-04-25T14:24:44Z

After some discussions with @sejas (thank you!), I have updated this PR to use formatDistance in the locale that is passed to formatDuration. Let me know what you think!

Alternatively, date-fns (as @derekblank mentioned) has its own locales that already take care of translating all of that. I explored this approach in an alternative PR: #34
Essentially I mapped our own locales to the locales that come from date-fns in that PR.

Both approaches work and we can use either. Personally, I think I prefer the approach in this PR because:

we use our own locales that we translate and take care of so we have control over that;
if we add more languages in the future, the new locales might not be available in date-fns.

Give it a try and let me know what you think!

cc @wojtekn @derekblank @sejas

wojtekn

@katinthehatsite, thanks for exploring an approach that handles plurals and for exploring an alternative approach that does that using locales built into the library and creating PR for that.

I reviewed and tested both of them. The above is the clearest one and works better than the other one. For '1 day, 1 hour, ' I've got '1 dzień, 1 godzinę,' which is clear and correct. The built-in locale produced '1 dzień, godzina,' which was not that clear.

Before starting the app, modify the language in locale.ts in getPreferredSystemLanguages to return Polish:

Alternatively, you could also change language in macOS' Language & Settings.

wojtekn · 2024-04-26T08:01:43Z

src/hooks/use-expiration-date.ts

+			locale: {
+				formatDistance: ( token, count ) => {
+					let stringToFormat = '';
+					switch ( token ) {


This is really readable and easy to understand!

katinthehatsite · 2024-04-26T08:58:40Z

I reviewed and tested both of them. The above is the clearest one and works better than the other one. For '1 day, 1 hour, ' I've got '1 dzień, 1 godzinę,' which is clear and correct. The built-in locale produced '1 dzień, godzina,' which was not that clear.

I think it is because _n handles the context better compared to data-fns.

I am going to merge this one and close the other one as it was meant only as exploration 😄

derekblank · 2024-04-29T06:29:08Z

Kat and I checked that _n should handle genitive plurals (TIL)

Oh cool, TIL as well. Great to see that a solution using _n worked out. 👍

Add basic logic for translation

4a242aa

katinthehatsite added the enhancement label Apr 23, 2024

katinthehatsite self-assigned this Apr 23, 2024

Kateryna Kodonenko added 4 commits April 23, 2024 13:08

Add back the comment that was accidentally removed

03e116d

Add singluar values for translation

4a76289

Refactor from using replace to using reduce

959b29c

Remove unncessary comment

d250930

derekblank self-requested a review April 24, 2024 02:12

Kateryna Kodonenko added 2 commits April 24, 2024 13:15

Move constants into strings

3ffd0b9

Remove double import

cbedb01

katinthehatsite requested review from a team and sejas April 24, 2024 11:18

sejas approved these changes Apr 24, 2024

View reviewed changes

Pass locale into formatDistance

115f9ec

katinthehatsite requested a review from a team April 25, 2024 14:25

katinthehatsite mentioned this pull request Apr 25, 2024

Studio: Add translation to demo site expiration date - solution 2 #34

Closed

1 task

wojtekn approved these changes Apr 26, 2024

View reviewed changes

katinthehatsite merged commit a8706f8 into trunk Apr 26, 2024

katinthehatsite deleted the add/expiration-date-string-translation branch April 26, 2024 08:59

rharunzade mentioned this pull request Aug 21, 2025

WordPress Studio 1.5.6 database pull is not working #1700

Closed

claude bot mentioned this pull request Nov 7, 2025

Add pm2 cli commands #2033

Merged

1 task

Studio: Add translation to demo site expiration date #16

Studio: Add translation to demo site expiration date #16

Uh oh!

Conversation

katinthehatsite commented Apr 23, 2024 • edited by wojtekn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

sejas left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sejas Apr 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wojtekn commented Apr 24, 2024

Uh oh!

sejas commented Apr 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

katinthehatsite commented Apr 24, 2024

Uh oh!

katinthehatsite commented Apr 24, 2024

Uh oh!

wojtekn commented Apr 24, 2024

Uh oh!

derekblank commented Apr 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wojtekn commented Apr 25, 2024

Uh oh!

katinthehatsite commented Apr 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sejas commented Apr 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

katinthehatsite commented Apr 25, 2024

Uh oh!

wojtekn left a comment

Choose a reason for hiding this comment

Uh oh!

wojtekn Apr 26, 2024

Choose a reason for hiding this comment

Uh oh!

katinthehatsite commented Apr 26, 2024

Uh oh!

derekblank commented Apr 29, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

katinthehatsite commented Apr 23, 2024 •

edited by wojtekn

Loading

sejas left a comment •

edited

Loading

sejas Apr 24, 2024 •

edited

Loading

sejas commented Apr 24, 2024 •

edited

Loading

derekblank commented Apr 25, 2024 •

edited

Loading

katinthehatsite commented Apr 25, 2024 •

edited

Loading

sejas commented Apr 25, 2024 •

edited

Loading