Next available day/hour is not properly translated

[micheh]

Describe the bug

When the working hours are set, the widget shows the time or day when agents will be back online. This works fine in English, but not so much in other languages. The problem is that there are some hard coded English strings in the mixing timeLeftToBackInOnline or the translations are not available like tomorrow:

chatwoot/app/javascript/widget/mixins/nextAvailabilityTime.js

Lines 156 to 176 in 8957277

	timeLeftToBackInOnline() {
	if (
	this.hoursAndMinutesBackInOnline.hoursLeft >= 24 ||
	(this.timeSlot.day !== this.currentDay && this.dayDiff === 0)
	) {
	const hourRelative = generateRelativeTime(
	this.dayDiff + 1,
	'days',
	this.languageCode
	);
	return `${hourRelative}`;
	}
	if (
	this.dayDiff >= 1 &&
	this.presentHour >= this.currentDayTimings.closeHour
	) {
	return `on ${this.dayNameOfNextWorkingDay}`;
	}
	return this.hoursAndMinutesToBack;
	},
	},

This results in a mix of English and the other locale. In addition, the date string is added after the translation REPLY_TIME.BACK_IN. Other languages may have a different sentence structure and even if the relative dates strings are translated correctly, it will look strange when the time is added at the end.

To Reproduce

1. Use the web widget with a locale different than English.
2. Enable the working hours and make sure it is currently outside of the working hours
3. Open the widget and see the wrong translated string

Expected behavior

No response

Environment

app.chatwoot.com

Cloud Provider

None

Platform

None

Operating system

No response

Browser and version

No response

Docker (if applicable)

No response

Additional context

No response

[linear]

PR-1056 Next available day/hour is not properly translated

[vishnu-narayanan]

@micheh Thank you for reporting this. If possible, could you share a screenshot of it? Which language are you using?

The only hard-coded string in this method would be days right. Anything else?

[micheh]

Hello @vishnu-narayanan, here is a screenshot:

I tested it with German (de), but could replicate the issue in other languages like French (fr), Italian (it) and Spanish (es).

Almost all methods in nextAvailabilityTime.js are affected.

generateRelativeTime returns an English string:

chatwoot/app/javascript/widget/mixins/nextAvailabilityTime.js

Lines 161 to 165 in 8957277

	const hourRelative = generateRelativeTime(
	this.dayDiff + 1,
	'days',
	this.languageCode
	);

Line 172 returns the hard coded string on and the translated day:

chatwoot/app/javascript/widget/mixins/nextAvailabilityTime.js

Line 172 in 8957277

return `on ${this.dayNameOfNextWorkingDay}`;

hoursAndMinutesToBack and the other methods used like exactTimeInAmPm also return hard coded strings:

chatwoot/app/javascript/widget/mixins/nextAvailabilityTime.js

Lines 146 to 154 in 8957277

	hoursAndMinutesToBack() {
	const { hoursLeft, minutesLeft } = this.hoursAndMinutesBackInOnline;
	if (hoursLeft >= 3) {
	return this.exactTimeInAmPm;
	}
	if (hoursLeft > 0 || minutesLeft > 0) {
	return this.hoursAndMinutesLeft;
	}
	return 'in some time';

In the German language, the relative time should be in another place.
EN: We'll be back online tomorrow
DE: Wir werden morgen wieder online sein

[iamsivin]

@micheh Thank you for reporting the issue. We are currently working on a solution to fix the translation problem, as there is an open PR to address it. #9097
cc @vishnu-narayanan