fc50095b36
## Issue
Desktop 7022: i18n: Notification title localization lost
## Approach
The current code breaks up the string into an array of strings, so i18n is somewhat impossible.
Since 99%¹ of dynamic notifications come with a `dynamic` property for all the replaceable values, we can actually reconstruct the string however we want.
¹ <sub>_as far as I can find, only `fiat_tip` does not provide the value via `dynamic`, i.e. hardcoded in the string. Boo._</sub>
### Benefits of this approach:
- able to localize the string again
- able to customize the string (e.g. making claim titles italic, fix typos, use more concise strings, etc.)
### Problems with this approach:
- if the api overloads a particular notification type with several strings, then the approach is broken.
- Ex. For the case of `comment` type, the overload is whether the comment is a normal comment or hyperchat. But I was able to replicate the logic to differentiate them, so all is good.
- For the case of "livestream reminder in 30 minutes", we would have to inspect the string to differentiate against "is live streaming". I think this reminder is not being used, so I didn't do it yet.
- some work is needed to maintain the code when the server side updates something. But we are already manually maintaining the i18n strings anyway, so it shouldn't be too much of a burden.
- With the exception of the overload problem, any new notification type will simply pass through as un-localized, so things should continue to work, i.e. no need to update the front-end immediately 🤞
117 lines
3.9 KiB
JavaScript
117 lines
3.9 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import LbcMessage from 'component/common/lbc-message';
|
|
import I18nMessage from 'component/i18nMessage';
|
|
import UriIndicator from 'component/uriIndicator';
|
|
import { RULE } from 'constants/notifications';
|
|
|
|
function getChannelNameLink(channelUrl: string, channelName: ?string) {
|
|
return <UriIndicator link showAtSign uri={channelUrl} channelInfo={{ uri: channelUrl, name: channelName }} />;
|
|
}
|
|
|
|
export function generateNotificationTitle(rule: string, notificationParams: any, channelName: ?string) {
|
|
switch (rule) {
|
|
case RULE.COMMENT: {
|
|
const channelUrl = notificationParams?.dynamic?.comment_author;
|
|
if (notificationParams?.dynamic?.amount > 0) {
|
|
const amountStr = `${parseFloat(notificationParams.dynamic.amount)} ${
|
|
notificationParams.dynamic.currency || 'LBC'
|
|
}`;
|
|
return channelUrl ? (
|
|
<I18nMessage
|
|
tokens={{
|
|
commenter: getChannelNameLink(channelUrl, channelName),
|
|
amount: <LbcMessage>{amountStr}</LbcMessage>,
|
|
title: <span className="notification__claim-title">{notificationParams.dynamic?.claim_title}</span>,
|
|
}}
|
|
>
|
|
%commenter% sent a %amount% hyperchat on %title%
|
|
</I18nMessage>
|
|
) : (
|
|
notificationParams.device.title
|
|
);
|
|
} else {
|
|
return channelUrl ? (
|
|
<I18nMessage
|
|
tokens={{
|
|
commenter: getChannelNameLink(channelUrl, channelName),
|
|
title: <span className="notification__claim-title">{notificationParams.dynamic?.claim_title}</span>,
|
|
}}
|
|
>
|
|
%commenter% commented on %title%
|
|
</I18nMessage>
|
|
) : (
|
|
notificationParams.device.title
|
|
);
|
|
}
|
|
}
|
|
|
|
case RULE.CREATOR_COMMENT: {
|
|
const channelUrl = notificationParams?.dynamic?.comment_author;
|
|
return channelUrl ? (
|
|
<I18nMessage
|
|
tokens={{
|
|
commenter: getChannelNameLink(channelUrl, channelName),
|
|
title: <span className="notification__claim-title">{notificationParams.dynamic?.claim_title}</span>,
|
|
}}
|
|
>
|
|
%commenter% commented on %title%
|
|
</I18nMessage>
|
|
) : (
|
|
notificationParams.device.title
|
|
);
|
|
}
|
|
|
|
case RULE.COMMENT_REPLY: {
|
|
const channelUrl = notificationParams?.dynamic?.reply_author;
|
|
return channelUrl ? (
|
|
<I18nMessage
|
|
tokens={{
|
|
commenter: getChannelNameLink(channelUrl, channelName),
|
|
title: <span className="notification__claim-title">{notificationParams.dynamic?.claim_title}</span>,
|
|
}}
|
|
>
|
|
%commenter% replied to you on %title%
|
|
</I18nMessage>
|
|
) : (
|
|
notificationParams.device.title
|
|
);
|
|
}
|
|
|
|
case RULE.NEW_CONTENT: {
|
|
const channelUrl = notificationParams?.dynamic?.channel_url;
|
|
return channelUrl ? (
|
|
<I18nMessage tokens={{ creator: getChannelNameLink(channelUrl, channelName) }}>
|
|
New content from %creator%
|
|
</I18nMessage>
|
|
) : (
|
|
notificationParams.device.title
|
|
);
|
|
}
|
|
|
|
case RULE.NEW_LIVESTREAM: {
|
|
const channelUrl = notificationParams?.dynamic?.channel_url;
|
|
return channelUrl ? (
|
|
<I18nMessage tokens={{ streamer: getChannelNameLink(channelUrl, channelName) }}>
|
|
%streamer% is live streaming!
|
|
</I18nMessage>
|
|
) : (
|
|
notificationParams.device.title
|
|
);
|
|
}
|
|
|
|
case RULE.CREATOR_SUBSCRIBER:
|
|
case RULE.DAILY_WATCH_AVAILABLE:
|
|
case RULE.DAILY_WATCH_REMIND:
|
|
case RULE.WEEKLY_WATCH_REMINDER:
|
|
case RULE.MISSED_OUT:
|
|
case RULE.REWARDS_APPROVAL_PROMPT:
|
|
case RULE.FIAT_TIP:
|
|
// Use Commentron default
|
|
return __(notificationParams.device.title);
|
|
|
|
default:
|
|
console.log(`TITLE: Unhandled notification_rule:%c ${rule}`, 'color:yellow'); // eslint-disable-line
|
|
return __(notificationParams.device.title);
|
|
}
|
|
}
|