From 015a15cdc557c247a70c317d1aa7013605da73f6 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 26 Apr 2024 10:36:56 +0530
Subject: [PATCH] chore: code cleanups

---
 .../settings/personal/HotKeyCard.vue          | 15 ++++++--
 .../dashboard/settings/personal/Index.vue     | 11 ++++--
 .../personal/NotificationPreferences.vue      | 38 +++++++++++++++----
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
index 61951d83c..e88e4aced 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
@@ -14,7 +14,7 @@
         <input
           :checked="active"
           type="radio"
-          name="hotkey"
+          :name="`hotkey-${title}`"
           class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-5 h-5 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[18px] checked:before:h-[18px] checked:border checked:border-primary-600"
         />
       </div>
@@ -24,10 +24,17 @@
     </div>
 
     <div>
-      <img :src="lightImage" class="block object-cover w-full dark:hidden" />
-      <img :src="darkImage" class="hidden object-cover w-full dark:block" />
+      <img
+        :src="lightImage"
+        :alt="`Light themed image for ${title}`"
+        class="block object-cover w-full dark:hidden"
+      />
+      <img
+        :src="darkImage"
+        :alt="`Dark themed image for ${title}`"
+        class="hidden object-cover w-full dark:block"
+      />
     </div>
-    <slot />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
index f4adde52c..dc2738902 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
@@ -50,6 +50,7 @@
                 class="reset-base"
               >
                 <hot-key-card
+                  :key="hotKey.title"
                   :title="hotKey.title"
                   :description="hotKey.description"
                   :light-image="hotKey.lightImage"
@@ -63,7 +64,6 @@
         </base-personal-item>
         <base-personal-item
           :header="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE')"
-          description=""
         >
           <template #settingsItem>
             <change-password v-if="!globalConfig.disableUserProfileUpdate" />
@@ -121,11 +121,11 @@ import { clearCookiesOnLogout } from '../../../../store/utils/api';
 
 import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
-import NotificationPreferences from './NotificationPreferences.vue';
-import AudioNotifications from './AudioNotifications.vue';
 import MessageSignature from './MessageSignature.vue';
 import HotKeyCard from './HotKeyCard.vue';
 import ChangePassword from './ChangePassword.vue';
+import NotificationPreferences from './NotificationPreferences.vue';
+import AudioNotifications from './AudioNotifications.vue';
 import AccessToken from './AccessToken.vue';
 import BasePersonalItem from './BasePersonalItem.vue';
 
@@ -210,6 +210,11 @@ export default {
       const { name, email, displayName, messageSignature } = userAttributes;
       const hasEmailChanged =
         this.currentUser.email !== email && type === 'profile';
+      if (type === 'profile') {
+        this.name = name || this.name;
+        this.email = email || this.email;
+        this.displayName = displayName || this.displayName;
+      }
       try {
         await this.$store.dispatch('updateProfile', {
           name: name || this.name,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
index 47a6c43b9..d0758efd4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
@@ -1,20 +1,30 @@
 <template>
   <div id="profile-settings-notifications" class="flex flex-col gap-6">
+    <!-- Layout for desktop devices -->
     <div class="hidden sm:block">
       <div
         class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
       >
-        <table-header-cell :span="7" label="Notification type">
+        <table-header-cell
+          :span="7"
+          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE')}`"
+        >
           <span class="text-sm font-normal uppercase text-ash-900">
             {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE') }}
           </span>
         </table-header-cell>
-        <table-header-cell :span="2" label="Email">
+        <table-header-cell
+          :span="2"
+          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL')}`"
+        >
           <span class="text-sm font-medium uppercase text-ash-900">
             {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL') }}
           </span>
         </table-header-cell>
-        <table-header-cell :span="3" label="Push notification">
+        <table-header-cell
+          :span="3"
+          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH')}`"
+        >
           <div class="flex items-center justify-between gap-1">
             <span
               class="text-sm font-medium uppercase text-ash-900 whitespace-nowrap"
@@ -28,7 +38,10 @@
           </div>
         </table-header-cell>
       </div>
-      <div v-for="(notification, index) in notificationTypes" :key="index">
+      <div
+        v-for="(notification, index) in filteredNotificationTypes"
+        :key="index"
+      >
         <div
           class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
         >
@@ -53,14 +66,14 @@
         </div>
       </div>
     </div>
-
+    <!--  Layout for mobile devices -->
     <div class="flex flex-col gap-6 sm:hidden">
       <span class="text-sm font-medium uppercase text-ash-900">
         {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
       </span>
       <div class="flex flex-col gap-4">
         <div
-          v-for="(notification, index) in notificationTypes"
+          v-for="(notification, index) in filteredNotificationTypes"
           :key="index"
           class="flex flex-row items-start gap-2"
         >
@@ -86,7 +99,7 @@
 
       <div class="flex flex-col gap-4">
         <div
-          v-for="(notification, index) in notificationTypes"
+          v-for="(notification, index) in filteredNotificationTypes"
           :key="index"
           class="flex flex-row items-start gap-2"
         >
@@ -189,6 +202,17 @@ export default {
     isSLAEnabled() {
       return this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.SLA);
     },
+    filteredNotificationTypes() {
+      return this.notificationTypes.filter(notification =>
+        this.isSLAEnabled
+          ? true
+          : ![
+              'sla_missed_first_response',
+              'sla_missed_next_response',
+              'sla_missed_resolution',
+            ].includes(notification.value)
+      );
+    },
   },
   watch: {
     emailFlags(value) {