feat: Revamp browser alert permission in profile settings (#9350)

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",

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],