diff --git a/frontend/components/notifications/NotificationsOverview.vue b/frontend/components/notifications/NotificationsOverview.vue index 6c208da86..1624e399d 100644 --- a/frontend/components/notifications/NotificationsOverview.vue +++ b/frontend/components/notifications/NotificationsOverview.vue @@ -30,10 +30,13 @@ const notificationsTotal = computed(() => { const { user } = useUserStore() const mailLimit = computed(() => user.value?.premium_perks.email_notifications_per_day ?? 0) -const resetHours = computed(() => overview.value?.next_email_count_reset_timestamp ?? 0) +const resetHours = computed( + () => getRelativeTime(overview.value?.next_email_count_reset_timestamp ?? 0), +) + const tooltipEmail = computed(() => { return $t('notifications.overview.email_tooltip', { - hours: resetHours.value, + in_x_hours: resetHours.value, limit: mailLimit.value, }) }) diff --git a/frontend/i18n/locales/en.json b/frontend/i18n/locales/en.json index 6861998b0..ae3830642 100644 --- a/frontend/i18n/locales/en.json +++ b/frontend/i18n/locales/en.json @@ -798,7 +798,7 @@ }, "overview": { "email_activate": "Click here to activate Email notifications", - "email_tooltip": "Your current limit is { limit } emails per day. Your email limit resets in { hours } hours. Upgrade to premium for more.", + "email_tooltip": "Your current limit is { limit } emails per day. Your email limit resets { in_x_hours }. Upgrade to premium for more.", "headers": { "account_groups": "Most notified account groups", "email_notifications": "Email Notifications", diff --git a/frontend/utils/time.ts b/frontend/utils/time.ts index 5fd7e6bf4..275124f83 100644 --- a/frontend/utils/time.ts +++ b/frontend/utils/time.ts @@ -49,3 +49,21 @@ export const formatSecondsTo = (seconds: number, minutes, } } + +export const getRelativeTime = (timestampInSeconds: number, { + locale = 'en-US', +}: { + locale?: string, +} = {}) => { + const seconds = timestampInSeconds - (Date.now() / 1000) + const minutes = (seconds / 60) + const hours = (minutes / 60) + + if (hours >= 1 || hours <= -1) { + return new Intl.RelativeTimeFormat(locale).format(Math.round(hours), 'hours') + } + if (minutes >= 1 || minutes <= -1) { + return new Intl.RelativeTimeFormat(locale).format(Math.round(minutes), 'minutes') + } + return new Intl.RelativeTimeFormat(locale).format(Math.round(seconds), 'seconds') +}