diff --git a/content/docs/platform/inbox/configuration/localization.mdx b/content/docs/platform/inbox/configuration/localization.mdx deleted file mode 100644 index aa9be84ed..000000000 --- a/content/docs/platform/inbox/configuration/localization.mdx +++ /dev/null @@ -1,67 +0,0 @@ ---- -pageTitle: 'Localizing the Inbox component' -title: 'Localization' -description: 'Learn how to localize the pre built Inbox component' -icon: 'Languages' ---- - -## Localization Prop - -The `localization` prop can be used to change the copywriting of the Inbox to a different language for your users or change the wording to suit your product. See the list of [available keys](https://github.com/novuhq/novu/blob/next/packages/js/src/ui/config/defaultLocalization.ts#L1), or use the fully typed TS auto complete to find the key you need. - -```tsx -import { Inbox } from '@novu/react'; - -function Novu() { - return ( - - `${notificationCount > 99 ? '99+' : notificationCount} new ${ - notificationCount === 1 ? 'notification' : 'notifications' - }`, - - // Individual notification actions - 'notification.actions.read.tooltip': 'Mark as read', - 'notification.actions.unread.tooltip': 'Mark as unread', - 'notification.actions.archive.tooltip': 'Archive', - 'notification.actions.unarchive.tooltip': 'Unarchive', - - // Preferences section - 'preferences.title': 'Preferences', - 'preferences.emptyNotice': 'No notification specific preferences yet.', - 'preferences.global': 'Global Preferences', - 'preferences.workflow.disabled.notice': - 'Contact admin to enable subscription management for this critical notification.', - 'preferences.workflow.disabled.tooltip': 'Contact admin to edit', - - // Set locale - locale: 'en-US', - - // Dynamic localization for workflow names - dynamic: { - // use the workflowId as a key to localize the workflow name - 'comment-on-post': 'Post comments', - } - }} - /> - ); -} -``` diff --git a/content/docs/platform/inbox/configuration/meta.json b/content/docs/platform/inbox/configuration/meta.json index 5ef953390..f7edecac0 100644 --- a/content/docs/platform/inbox/configuration/meta.json +++ b/content/docs/platform/inbox/configuration/meta.json @@ -1,6 +1,6 @@ { - "title": "Confiquration", + "title": "Configuration", "icon": "Layers", "pages": ["styling", "tabs", "preferences", "snooze", "data-object"], - "description": "Learn how to configure your inbox with styling, tabs, preferences, data objects, and snooze functionality." -} + "description": "Learn how to configure your inbox with styling, tabs, preferences, data objects, and snooze functionality" +} \ No newline at end of file diff --git a/content/docs/platform/inbox/localization.mdx b/content/docs/platform/inbox/localization.mdx new file mode 100644 index 000000000..1253b316f --- /dev/null +++ b/content/docs/platform/inbox/localization.mdx @@ -0,0 +1,141 @@ +--- +pageTitle: 'Localizing the Inbox component' +title: 'Localization' +description: 'Learn how to customize the Inbox UI for different languages using the localization prop.' +icon: 'Globe' +--- + +Localize the UI text of the Inbox component to align with your product’s voice or support multiple languages. This helps create a more consistent, accessible experience for subscribers across different regions. + +Localization only updates the UI text in the Inbox. It doesn’t translate the content of your notifications. To send messages in different languages, use the [Translations](/platform/workflow/translations). + +## Using the localization prop + +Override the default text in the Inbox component UI by passing a `localization` prop. This prop accepts an object of key-value pairs, where each key maps to a specific UI element and each value is your custom string. + +If you omit any keys, the component will fall back to the default `en-US` values. + +![Overriding the default text in the Inbox component UI using localization prop](/images/inbox/localization.png) + +```tsx +import { Inbox } from '@novu/react'; + +function NovuInbox() { + return ( + + ); +} + +export default NovuInbox; +``` + +Localization is also fully supported in @novu/react-native. + +## Available localization keys + +Here is a list of [all the keys available for localization](https://github.com/novuhq/novu/blob/next/packages/js/src/ui/config/defaultLocalization.ts#L1), grouped by their respective sections in the Inbox UI. + +### Filters + +| Key | Default Value | Description | +| ---------------------------------------- | --------------- | -------------------------------------- | +| `inbox.filters.dropdownOptions.unread` | `Unread only` | Text for the "unread" filter option. | +| `inbox.filters.dropdownOptions.default` | `Unread & read` | Text for the default filter option. | +| `inbox.filters.dropdownOptions.archived` | `Archived` | Text for the "archived" filter option. | +| `inbox.filters.dropdownOptions.snoozed` | `Snoozed` | Text for the "snoozed" filter option. | +| `inbox.filters.labels.unread` | `Unread` | Label for the unread tab. | +| `inbox.filters.labels.default` | `Inbox` | Label for the main inbox tab. | +| `inbox.filters.labels.archived` | `Archived` | Label for the archived tab. | +| `inbox.filters.labels.snoozed` | `Snoozed` | Label for the snoozed tab. | + +### Notifications + +| Key | Default Value | Description | +| ----------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | +| `notifications.emptyNotice` | `Quiet for now. Check back later.` | Message displayed when the notification list is empty. | +| `notifications.actions.readAll` | `Mark all as read` | Text for the action to mark all notifications as read. | +| `notifications.actions.archiveAll` | `Archive all` | Text for the action to archive all notifications. | +| `notifications.actions.archiveRead` | `Archive read` | Text for the action to archive all read notifications. | +| `notifications.newNotifications` | ``({ notificationCount }: { notificationCount: number }) => `${notificationCount} new notification(s)` `` | A function that returns the string for the new notifications indicator. | +| `notification.snoozedUntil` | `Snoozed until` | Text displayed before the unsnooze time on a snoozed notification. | + +### Notification actions (Tooltips) + +| Key | Default Value | Description | +| ---------------------------------------- | ---------------- | ---------------------------------------- | +| `notification.actions.read.tooltip` | `Mark as read` | Tooltip for the "mark as read" action. | +| `notification.actions.unread.tooltip` | `Mark as unread` | Tooltip for the "mark as unread" action. | +| `notification.actions.archive.tooltip` | `Archive` | Tooltip for the "archive" action. | +| `notification.actions.unarchive.tooltip` | `Unarchive` | Tooltip for the "unarchive" action. | +| `notification.actions.snooze.tooltip` | `Snooze` | Tooltip for the "snooze" action. | +| `notification.actions.unsnooze.tooltip` | `Unsnooze` | Tooltip for the "unsnooze" action. | + +### Snooze menu + +| Key | Default Value | Description | +| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | +| `snooze.options.anHourFromNow` | `An hour from now` | Text for the "snooze for one hour" option. | +| `snooze.options.inOneDay` | `Tomorrow` | Text for the "snooze for one day" option. | +| `snooze.options.inOneWeek` | `Next week` | Text for the "snooze for one week" option. | +| `snooze.options.customTime` | `Custom time...` | Text for the option to open the custom date picker. | +| `snooze.datePicker.timePickerLabel` | `Time` | Label for the time input in the date picker. | +| `snooze.datePicker.apply` | `Apply` | Text for the "Apply" button in the date picker. | +| `snooze.datePicker.cancel` | `Cancel` | Text for the "Cancel" button in the date picker. | +| `snooze.datePicker.pastDateTooltip` | `Selected time must be at least 3 minutes in the future` | Tooltip shown when a past time is selected. | +| `snooze.datePicker.noDateSelectedTooltip` | `Please select a date` | Tooltip shown when applying without selecting a date. | +| `snooze.datePicker.exceedingLimitTooltip` | ``({days}) => `Selected time cannot exceed ${days === 1 ? '24 hours' : `${days} days`} from now`` | Tooltip shown when the selected date exceeds the allowed snooze duration. | + + +### Preferences + +| Key | Default Value | Description | +| --------------------------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------- | +| `preferences.title` | `Preferences` | The main title of the preferences screen. | +| `preferences.emptyNotice` | `No notification specific preferences yet.` | Message shown when no workflow preferences are available. | +| `preferences.global` | `Global Preferences` | Title for the global preferences section. | +| `preferences.group.info` | `Applies to all notifications under this group.` | Informational text for grouped preferences. | +| `preferences.workflow.disabled.notice` | `Contact admin to enable subscription management for this critical notification.` | Notice shown for workflows where subscription management is disabled. | +| `preferences.workflow.disabled.tooltip` | `Contact admin to edit` | Tooltip shown for a disabled workflow preference. | + + +To view the latest and most complete key list, check the defaultLocalization.ts file. + + +## Localizing workflow names in preferences + +To display localized names for specific workflows in the Preferences UI, use the dynamic object within the localization prop. + +Each key in dynamic should match a workflow ID, and its value should be the localized workflow name. + +![Localizing workflow names in preferences](/images/inbox/localizing-workflow-names.png) + +```tsx +import { Inbox } from '@novu/react'; + +function NovuInbox() { + return ( + + ) +} +export default NovuInbox; + +``` \ No newline at end of file diff --git a/content/docs/platform/inbox/meta.json b/content/docs/platform/inbox/meta.json index 0d579b574..a09985d0a 100644 --- a/content/docs/platform/inbox/meta.json +++ b/content/docs/platform/inbox/meta.json @@ -5,6 +5,7 @@ "configuration", "advanced-customization", "prepare-for-production", + "localization", "tenants", "headless", "migration-guide" diff --git a/public/images/inbox/localization.png b/public/images/inbox/localization.png new file mode 100644 index 000000000..d52548fee Binary files /dev/null and b/public/images/inbox/localization.png differ diff --git a/public/images/inbox/localizing-workflow-names.png b/public/images/inbox/localizing-workflow-names.png new file mode 100644 index 000000000..738dcf1c2 Binary files /dev/null and b/public/images/inbox/localizing-workflow-names.png differ