From 0914d4d2c84bd15292978aee92b8ba134cb06ab6 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 6 May 2024 12:45:59 +0530
Subject: [PATCH] feat: Revamp browser alert permission in profile settings
 (#9350)

---
 .../dashboard/i18n/locale/en/settings.json    |  3 +-
 .../personal/NotificationPreferences.vue      | 28 +++++++++++++------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index f28db9d70..1f4d44e22 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -109,7 +109,8 @@
           "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
           "SLA_MISSED_NEXT_RESPONSE": "A conversation misses next response SLA",
           "SLA_MISSED_RESOLUTION": "A conversation misses resolution SLA"
-        }
+        },
+        "BROWSER_PERMISSION": "Enable push notifications for your browser so you’re able to receive them"
       },
       "API": {
         "UPDATE_SUCCESS": "Your notification preferences are updated successfully",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
index a2c4555a7..8d9ce39d1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
@@ -31,10 +31,6 @@
             >
               {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
             </span>
-            <form-switch
-              :value="hasEnabledPushPermissions"
-              @input="onRequestPermissions"
-            />
           </div>
         </table-header-cell>
       </div>
@@ -94,10 +90,6 @@
         <span class="text-sm font-medium normal-case text-ash-900">
           {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
         </span>
-        <form-switch
-          :value="hasEnabledPushPermissions"
-          @input="onRequestPermissions"
-        />
       </div>
 
       <div class="flex flex-col gap-4">
@@ -116,6 +108,25 @@
         </div>
       </div>
     </div>
+
+    <div
+      class="flex items-center justify-between w-full gap-2 p-4 border border-solid border-ash-200 rounded-xl dark:bg-ash-25"
+    >
+      <div class="flex flex-row items-center gap-2">
+        <fluent-icon
+          icon="alert"
+          class="flex-shrink-0 text-ash-900"
+          size="18"
+        />
+        <span class="text-sm text-ash-900">
+          {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
+        </span>
+      </div>
+      <form-switch
+        :value="hasEnabledPushPermissions"
+        @input="onRequestPermissions"
+      />
+    </div>
   </div>
 </template>
 
@@ -139,7 +150,6 @@ export default {
   components: {
     TableHeaderCell,
     FormSwitch,
-
     CheckBox,
   },
   mixins: [alertMixin, configMixin, uiSettingsMixin],