From 52f81a34c316dd915dd8531f743037234e211cf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Mon, 9 Jan 2023 10:31:00 +0100
Subject: [PATCH] fix(i18n): hint for settings on notifications page (#893)

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 ...ificationEnablePushNotification.client.vue | 21 ++++++++++++++++---
 locales/en-GB.json                            |  2 ++
 locales/en-US.json                            |  2 ++
 locales/es-ES.json                            |  2 ++
 pages/settings/notifications/index.vue        |  4 ++--
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/components/notification/NotificationEnablePushNotification.client.vue b/components/notification/NotificationEnablePushNotification.client.vue
index 175b33d7..3b1c654b 100644
--- a/components/notification/NotificationEnablePushNotification.client.vue
+++ b/components/notification/NotificationEnablePushNotification.client.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
 defineProps<{
   closeableHeader?: boolean
   busy?: boolean
@@ -11,6 +13,8 @@ defineSlots<{
   error: {}
 }>()
 
+const xl = useMediaQuery('(min-width: 1280px)')
+
 const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
 </script>
 
@@ -38,8 +42,19 @@ const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
         <span aria-hidden="true" i-ri:close-line />
       </button>
     </header>
-    <p>
-      {{ $t(`settings.notifications.push_notifications.warning.enable_description${closeableHeader ? '' : '_settings'}`) }}
+    <template v-if="closeableHeader">
+      <p xl:hidden>
+        {{ $t('settings.notifications.push_notifications.warning.enable_description') }}
+      </p>
+      <p xl:hidden>
+        {{ $t('settings.notifications.push_notifications.warning.enable_description_mobile') }}
+      </p>
+      <p :class="xl ? null : 'hidden'">
+        {{ $t('settings.notifications.push_notifications.warning.enable_description_desktop') }}
+      </p>
+    </template>
+    <p v-else>
+      {{ $t('settings.notifications.push_notifications.warning.enable_description_settings') }}
     </p>
     <p v-if="isLegacyAccount">
       {{ $t('settings.notifications.push_notifications.warning.re_auth') }}
@@ -52,7 +67,7 @@ const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
       @click="$emit('subscribe')"
     >
       <span aria-hidden="true" :class="busy && animate ? 'i-ri:loader-2-fill animate-spin' : 'i-ri:check-line'" />
-      {{ $t('settings.notifications.push_notifications.warning.enable_desktop') }}
+      <span>{{ $t('settings.notifications.push_notifications.warning.enable_desktop') }}</span>
     </button>
     <slot name="error" />
   </div>
diff --git a/locales/en-GB.json b/locales/en-GB.json
index 7cda0020..8589be68 100644
--- a/locales/en-GB.json
+++ b/locales/en-GB.json
@@ -245,6 +245,8 @@
         "warning": {
           "enable_close": "Close",
           "enable_description": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications via the \"@:settings.notifications.show_btn{'\"'} button above once enabled.",
+          "enable_description_desktop": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications in the navigation menu under \"Settings > Notifications > Push notifications settings\" once enabled.",
+          "enable_description_mobile": "You can also access the settings using the navigation menu under \"Settings > Notifications > Push notification settings\".",
           "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
           "enable_desktop": "Enable push notifications",
           "enable_title": "Never miss anything",
diff --git a/locales/en-US.json b/locales/en-US.json
index f096dfce..e5d77b50 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -304,6 +304,8 @@
         "warning": {
           "enable_close": "Close",
           "enable_description": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications via the \"@:settings.notifications.show_btn{'\"'} button above once enabled.",
+          "enable_description_desktop": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications in \"Settings > Notifications > Push notifications settings\" once enabled.",
+          "enable_description_mobile": "You can also access the settings using the navigation menu \"Settings > Notifications > Push notification settings\".",
           "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
           "enable_desktop": "Enable push notifications",
           "enable_title": "Never miss anything",
diff --git a/locales/es-ES.json b/locales/es-ES.json
index fd63b8a2..55cc9b00 100644
--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -304,6 +304,8 @@
         "warning": {
           "enable_close": "Cerrar",
           "enable_description": "Para recibir notificaciones cuando Elk no esté abierto, habilita las notificaciones push. Puedes controlar con precisión qué tipos de interacciones generan notificaciones push a través del botón \"@:settings.notifications.show_btn{'\"'} de arriba una vez que estén habilitadas.",
+          "enable_description_desktop": "Para recibir notificaciones cuando Elk no esté abierto, habilite las notificaciones push. Puedes controlar con precisión qué tipos de interacciones generan notificaciones push en el menú de navegación en \"Ajustes > Notificaciones > Ajustes de notificaciones push\" una vez que estén habilitadas.",
+          "enable_description_mobile": "También podrá acceder a la configuración utilizando el menú de navegación en \"Ajustes > Notificaciones > Ajutes de notificaciones push\".",
           "enable_description_settings": "Para recibir notificaciones cuando Elk no esté abierto, habilita las notificaciones push. Podrás controlar con precisión qué tipos de interacciones generan notificaciones push en esta misma pantalla una vez las habilites.",
           "enable_desktop": "Habilitar notificaciones push",
           "enable_title": "Nunca te pierdas nada",
diff --git a/pages/settings/notifications/index.vue b/pages/settings/notifications/index.vue
index fc010710..5fdfae41 100644
--- a/pages/settings/notifications/index.vue
+++ b/pages/settings/notifications/index.vue
@@ -7,7 +7,7 @@ const { t } = useI18n()
 const pwaEnabled = useRuntimeConfig().public.pwaEnabled
 
 useHeadFixed({
-  title: () => `${t('settings.notifications.notifications.label')} | ${t('nav.settings')}`,
+  title: () => `${t('settings.notifications.label')} | ${t('nav.settings')}`,
 })
 </script>
 
@@ -15,7 +15,7 @@ useHeadFixed({
   <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.notifications.notifications.label') }}</span>
+        <span>{{ $t('settings.notifications.label') }}</span>
       </div>
     </template>