From a74506847386bfc1eb04ebc121367c69458b8cd9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 19 Jan 2023 18:53:42 +0530
Subject: [PATCH] chore: Adds a settings button to the notification settings
 from the notification popup (#6233)

---
 .../components/NotificationPanel.vue          | 28 +++++++++++++++++--
 .../settings/profile/NotificationSettings.vue |  2 +-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
index ee31d94b2..7bed5ba88 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -25,6 +25,14 @@
           >
             {{ $t('NOTIFICATIONS_PAGE.MARK_ALL_DONE') }}
           </woot-button>
+          <woot-button
+            color-scheme="secondary"
+            variant="smooth"
+            size="tiny"
+            class-names="action-button"
+            icon="settings"
+            @click="openAudioNotificationSettings"
+          />
           <woot-button
             color-scheme="secondary"
             variant="link"
@@ -199,6 +207,22 @@ export default {
     onMarkAllDoneClick() {
       this.$store.dispatch('notifications/readAll');
     },
+    openAudioNotificationSettings() {
+      this.$router.push({ name: 'profile_settings_index' });
+      this.closeNotificationPanel();
+      this.$nextTick(() => {
+        const audioSettings = document.getElementById(
+          'profile-settings-notifications'
+        );
+        if (audioSettings) {
+          // TODO [ref](https://github.com/chatwoot/chatwoot/pull/6233#discussion_r1069636890)
+          audioSettings.scrollIntoView(
+            { behavior: 'smooth', block: 'start' },
+            150
+          );
+        }
+      });
+    },
     closeNotificationPanel() {
       this.$emit('close');
     },
@@ -244,13 +268,13 @@ export default {
   .total-count {
     padding: var(--space-smaller) var(--space-small);
     background: var(--b-50);
-    border-radius: var(--border-radius-rounded);
+    border-radius: var(--border-radius-normal);
     font-size: var(--font-size-micro);
     font-weight: var(--font-weight-bold);
+    margin-left: var(--space-smaller);
   }
 
   .action-button {
-    padding: var(--space-micro) var(--space-small);
     margin-right: var(--space-small);
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
index f6b216b96..5e287a686 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="profile-settings-notifications">
     <div class="profile--settings--row row">
       <div class="columns small-3 ">
         <h4 class="block-title">