From 0477b8ca143a68e6d8cb8b5b72feb7c4deab184d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 11 Apr 2024 21:34:31 +0530
Subject: [PATCH 1/5] fix: Widget iFrame is adding a white background (#9221)

---
 app/javascript/sdk/sdk.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/javascript/sdk/sdk.js b/app/javascript/sdk/sdk.js
index 313bbb88a..95d132258 100644
--- a/app/javascript/sdk/sdk.js
+++ b/app/javascript/sdk/sdk.js
@@ -23,6 +23,7 @@ export const SDK_CSS = `
 
 .woot-widget-holder iframe {
   border: 0;
+  color-scheme: normal;
   height: 100% !important;
   width: 100% !important;
   max-height: 100vh !important;

From e8fe3c7c05fc8e62baddf0eb2b068a5e3b05998d Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Thu, 11 Apr 2024 15:47:43 -0700
Subject: [PATCH 2/5] fix: Terminate IMAP connection after the job is complete
 (#9225)

---
 app/services/imap/base_fetch_email_service.rb    | 16 +++++++++++++++-
 app/services/imap/fetch_email_service.rb         |  2 +-
 .../imap/microsoft_fetch_email_service.rb        |  2 +-
 spec/services/imap/fetch_email_service_spec.rb   |  3 +++
 .../imap/microsoft_fetch_email_service_spec.rb   |  1 +
 5 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/services/imap/base_fetch_email_service.rb b/app/services/imap/base_fetch_email_service.rb
index 4f49dc980..1af3bdb5d 100644
--- a/app/services/imap/base_fetch_email_service.rb
+++ b/app/services/imap/base_fetch_email_service.rb
@@ -3,10 +3,17 @@ require 'net/imap'
 class Imap::BaseFetchEmailService
   pattr_initialize [:channel!]
 
-  def perform
+  def fetch_emails
     # Override this method
   end
 
+  def perform
+    inbound_emails = fetch_emails
+    terminate_imap_connection
+
+    inbound_emails
+  end
+
   private
 
   def authentication_type
@@ -105,6 +112,13 @@ class Imap::BaseFetchEmailService
     imap
   end
 
+  def terminate_imap_connection
+    imap_client.logout
+  rescue Net::IMAP::Error => e
+    Rails.logger.info "Logout failed for #{channel.email} - #{e.message}."
+    imap_client.disconnect
+  end
+
   def build_mail_from_string(raw_email_content)
     Mail.read_from_string(raw_email_content)
   end
diff --git a/app/services/imap/fetch_email_service.rb b/app/services/imap/fetch_email_service.rb
index f6d8de774..f602b3375 100644
--- a/app/services/imap/fetch_email_service.rb
+++ b/app/services/imap/fetch_email_service.rb
@@ -1,5 +1,5 @@
 class Imap::FetchEmailService < Imap::BaseFetchEmailService
-  def perform
+  def fetch_emails
     fetch_mail_for_channel
   end
 
diff --git a/app/services/imap/microsoft_fetch_email_service.rb b/app/services/imap/microsoft_fetch_email_service.rb
index b6d3c03b8..ed3eb20f1 100644
--- a/app/services/imap/microsoft_fetch_email_service.rb
+++ b/app/services/imap/microsoft_fetch_email_service.rb
@@ -1,5 +1,5 @@
 class Imap::MicrosoftFetchEmailService < Imap::BaseFetchEmailService
-  def perform
+  def fetch_emails
     return if channel.provider_config['access_token'].blank?
 
     fetch_mail_for_channel
diff --git a/spec/services/imap/fetch_email_service_spec.rb b/spec/services/imap/fetch_email_service_spec.rb
index 28a173951..46336bf0f 100644
--- a/spec/services/imap/fetch_email_service_spec.rb
+++ b/spec/services/imap/fetch_email_service_spec.rb
@@ -30,6 +30,7 @@ RSpec.describe Imap::FetchEmailService do
           allow(imap).to receive(:search).with(%w[SINCE 25-Oct-2020]).and_return([1])
           allow(imap).to receive(:fetch).with([1], 'BODY.PEEK[HEADER]').and_return([email_header])
           allow(imap).to receive(:fetch).with(1, 'RFC822').and_return([imap_fetch_mail])
+          allow(imap).to receive(:logout)
 
           result = described_class.new(channel: imap_email_channel).perform
 
@@ -39,6 +40,7 @@ RSpec.describe Imap::FetchEmailService do
           expect(imap).to have_received(:fetch).with([1], 'BODY.PEEK[HEADER]')
           expect(imap).to have_received(:fetch).with(1, 'RFC822')
           expect(logger).to have_received(:info).with("[IMAP::FETCH_EMAIL_SERVICE] Fetching mails from #{imap_email_channel.email}, found 1.")
+          expect(imap).to have_received(:logout)
         end
       end
 
@@ -51,6 +53,7 @@ RSpec.describe Imap::FetchEmailService do
 
           allow(imap).to receive(:search).with(%w[SINCE 25-Oct-2020]).and_return([1])
           allow(imap).to receive(:fetch).with([1], 'BODY.PEEK[HEADER]').and_return([email_header])
+          allow(imap).to receive(:logout)
 
           result = described_class.new(channel: imap_email_channel).perform
 
diff --git a/spec/services/imap/microsoft_fetch_email_service_spec.rb b/spec/services/imap/microsoft_fetch_email_service_spec.rb
index 8f79b86b5..3a13ce0c6 100644
--- a/spec/services/imap/microsoft_fetch_email_service_spec.rb
+++ b/spec/services/imap/microsoft_fetch_email_service_spec.rb
@@ -35,6 +35,7 @@ RSpec.describe Imap::MicrosoftFetchEmailService do
           allow(imap).to receive(:search).with(%w[SINCE 25-Oct-2020]).and_return([1])
           allow(imap).to receive(:fetch).with([1], 'BODY.PEEK[HEADER]').and_return([email_header])
           allow(imap).to receive(:fetch).with(1, 'RFC822').and_return([imap_fetch_mail])
+          allow(imap).to receive(:logout)
 
           result = described_class.new(channel: microsoft_channel).perform
 

From 3b6ae772bfb4cdb9f66ed6fde55d2a2345e2e70d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 12 Apr 2024 11:03:18 +0530
Subject: [PATCH 3/5] feat: SLA report filter (#9218)

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 app/javascript/dashboard/api/slaReports.js    |   4 +
 .../dashboard/api/specs/slaReports.spec.js    |   4 +
 .../dashboard/assets/scss/_date-picker.scss   |   7 +
 .../assets/scss/plugins/_multiselect.scss     |  23 ++
 .../widgets/TableFooterPagination.vue         |   2 +-
 .../dashboard/i18n/locale/en/report.json      |  26 ++-
 .../dashboard/settings/reports/SLAReports.vue |  31 ++-
 .../Filters/v3/ActiveFilterChip.vue           |  73 ++++++
 .../components/Filters/v3/AddFilterChip.vue   |  98 ++++++++
 .../components/Filters/v3/FilterButton.vue    |  35 ++-
 .../Filters/v3/FilterDropdownSearch.vue       |  10 +-
 .../Filters/v3/FilterListDropdown.vue         |  26 ++-
 .../Filters/v3/FilterListItemButton.vue       |   2 +-
 .../reports/components/SLA/SLAFilter.vue      | 210 ++++++++++++++++++
 .../components/SLA/SLAReportFilters.vue       |  41 ++--
 .../SLA/helpers/SLAFilterHelpers.js           |  37 +++
 app/javascript/packs/application.js           |   2 +
 enterprise/app/models/applied_sla.rb          |  12 +-
 .../accounts/applied_slas_controller_spec.rb  |   4 +-
 19 files changed, 580 insertions(+), 67 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/helpers/SLAFilterHelpers.js

diff --git a/app/javascript/dashboard/api/slaReports.js b/app/javascript/dashboard/api/slaReports.js
index c187c58a3..36a3a895c 100644
--- a/app/javascript/dashboard/api/slaReports.js
+++ b/app/javascript/dashboard/api/slaReports.js
@@ -13,6 +13,7 @@ class SLAReportsAPI extends ApiClient {
     inbox_id,
     team_id,
     sla_policy_id,
+    label_list,
     page,
   } = {}) {
     return axios.get(this.url, {
@@ -23,6 +24,7 @@ class SLAReportsAPI extends ApiClient {
         inbox_id,
         team_id,
         sla_policy_id,
+        label_list,
         page,
       },
     });
@@ -54,6 +56,7 @@ class SLAReportsAPI extends ApiClient {
     assigned_agent_id,
     inbox_id,
     team_id,
+    label_list,
     sla_policy_id,
   } = {}) {
     return axios.get(`${this.url}/metrics`, {
@@ -62,6 +65,7 @@ class SLAReportsAPI extends ApiClient {
         until: to,
         assigned_agent_id,
         inbox_id,
+        label_list,
         team_id,
         sla_policy_id,
       },
diff --git a/app/javascript/dashboard/api/specs/slaReports.spec.js b/app/javascript/dashboard/api/specs/slaReports.spec.js
index 51ac8bfe4..e69f527b2 100644
--- a/app/javascript/dashboard/api/specs/slaReports.spec.js
+++ b/app/javascript/dashboard/api/specs/slaReports.spec.js
@@ -35,6 +35,7 @@ describe('#SLAReports API', () => {
         inbox_id: 1,
         team_id: 1,
         sla_policy_id: 1,
+        label_list: ['label1'],
       });
       expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/applied_slas', {
         params: {
@@ -45,6 +46,7 @@ describe('#SLAReports API', () => {
           inbox_id: 1,
           team_id: 1,
           sla_policy_id: 1,
+          label_list: ['label1'],
         },
       });
     });
@@ -56,6 +58,7 @@ describe('#SLAReports API', () => {
         inbox_id: 1,
         team_id: 1,
         sla_policy_id: 1,
+        label_list: ['label1'],
       });
       expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/applied_slas/metrics',
@@ -67,6 +70,7 @@ describe('#SLAReports API', () => {
             inbox_id: 1,
             team_id: 1,
             sla_policy_id: 1,
+            label_list: ['label1'],
           },
         }
       );
diff --git a/app/javascript/dashboard/assets/scss/_date-picker.scss b/app/javascript/dashboard/assets/scss/_date-picker.scss
index 2132d5fd5..60c24b421 100644
--- a/app/javascript/dashboard/assets/scss/_date-picker.scss
+++ b/app/javascript/dashboard/assets/scss/_date-picker.scss
@@ -1,6 +1,13 @@
 @import '~vue2-datepicker/scss/index';
 
 .date-picker {
+  // To be removed one SLA reports date picker is created
+  &.small {
+    .mx-input {
+      @apply h-8 text-sm;
+    }
+  }
+
   &.no-margin {
     .mx-input {
       @apply mb-0;
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index 9170715e0..99b006045 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -153,6 +153,29 @@
 }
 
 .multiselect-wrap--small {
+  // To be removed one SLA reports date picker is created
+  &.tiny {
+    .multiselect.no-margin {
+      @apply min-h-[32px];
+    }
+
+    .multiselect__select {
+      @apply min-h-[32px] h-8;
+
+      &::before {
+        @apply top-[60%];
+      }
+    }
+
+    .multiselect__tags {
+      @apply min-h-[32px] max-h-[32px];
+
+      .multiselect__single {
+        @apply pt-1 pb-1;
+      }
+    }
+  }
+
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
diff --git a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
index c048b2eb7..38ebdc69c 100644
--- a/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooterPagination.vue
@@ -82,7 +82,7 @@
 </template>
 
 <script setup>
-import { computed, defineEmits } from 'vue';
+import { computed } from 'vue';
 
 // Props
 const props = defineProps({
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index 7a4bf60ad..172e5501d 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -138,7 +138,11 @@
         "groupBy": "Year"
       }
     ],
-    "BUSINESS_HOURS": "Business Hours"
+    "BUSINESS_HOURS": "Business Hours",
+    "FILTER_ACTIONS": {
+      "CLEAR_FILTER": "Clear filter",
+      "EMPTY_LIST": "No results found"
+    }
   },
   "AGENT_REPORTS": {
     "HEADER": "Agents Overview",
@@ -512,6 +516,26 @@
     "LOADING": "Loading SLA data...",
     "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
     "DOWNLOAD_FAILED": "Failed to download SLA Reports",
+    "DROPDOWN": {
+      "ADD_FIlTER": "Add filter",
+      "CLEAR_ALL": "Clear all",
+      "CLEAR_FILTER": "Clear filter",
+      "EMPTY_LIST": "No results found",
+      "NO_FILTER": "No filters available",
+      "SEARCH": "Search filter",
+      "INPUT_PLACEHOLDER": {
+        "SLA": "SLA name",
+        "AGENTS": "Agent name",
+        "INBOXES": "Inbox name",
+        "LABELS": "Label name",
+        "TEAMS": "Team name"
+      },
+      "SLA": "SLA Policy",
+      "INBOXES": "Inbox",
+      "AGENTS": "Agent",
+      "LABELS": "Label",
+      "TEAMS": "Team"
+    },
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index 9fe790c97..3c12a4527 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col flex-1 px-4 pt-4 overflow-auto">
+  <div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
     <SLAReportFilters @filter-change="onFilterChange" />
     <woot-button
       color-scheme="success"
@@ -44,8 +44,15 @@ export default {
   data() {
     return {
       pageNumber: 1,
-      from: 0,
-      to: 0,
+      activeFilter: {
+        from: 0,
+        to: 0,
+        assigned_agent_id: null,
+        inbox_id: null,
+        team_id: null,
+        sla_policy_id: null,
+        label_list: null,
+      },
     };
   },
   computed: {
@@ -57,6 +64,11 @@ export default {
     }),
   },
   mounted() {
+    this.$store.dispatch('agents/get');
+    this.$store.dispatch('inboxes/get');
+    this.$store.dispatch('teams/get');
+    this.$store.dispatch('labels/get');
+    this.$store.dispatch('sla/get');
     this.fetchSLAMetrics();
     this.fetchSLAReports();
   },
@@ -64,22 +76,17 @@ export default {
     fetchSLAReports({ pageNumber } = {}) {
       this.$store.dispatch('slaReports/get', {
         page: pageNumber || this.pageNumber,
-        from: this.from,
-        to: this.to,
+        ...this.activeFilter,
       });
     },
     fetchSLAMetrics() {
-      this.$store.dispatch('slaReports/getMetrics', {
-        from: this.from,
-        to: this.to,
-      });
+      this.$store.dispatch('slaReports/getMetrics', this.activeFilter);
     },
     onPageChange(pageNumber) {
       this.fetchSLAReports({ pageNumber });
     },
-    onFilterChange({ from, to }) {
-      this.from = from;
-      this.to = to;
+    onFilterChange(params) {
+      this.activeFilter = params;
       this.fetchSLAReports();
       this.fetchSLAMetrics();
     },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
new file mode 100644
index 000000000..7a6bd1f82
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
@@ -0,0 +1,73 @@
+<script setup>
+import FilterButton from './FilterButton.vue';
+import FilterListDropdown from './FilterListDropdown.vue';
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: Number,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  activeFilterType: {
+    type: String,
+    default: '',
+  },
+  showMenu: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  enableSearch: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'toggleDropdown',
+  'removeFilter',
+  'addFilter',
+  'closeDropdown',
+]);
+const toggleDropdown = () => emit('toggleDropdown', props.type);
+const removeFilter = () => emit('removeFilter', props.type);
+const addFilter = item => emit('addFilter', item);
+const closeDropdown = () => emit('closeDropdown');
+</script>
+
+<template>
+  <filter-button
+    right-icon="chevron-down"
+    :button-text="name"
+    class="bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
+    @click="toggleDropdown"
+  >
+    <template v-if="showMenu && activeFilterType === type" #dropdown>
+      <filter-list-dropdown
+        v-if="options"
+        v-on-clickaway="closeDropdown"
+        :list-items="options"
+        :active-filter-id="id"
+        :input-placeholder="placeholder"
+        :enable-search="enableSearch"
+        class="flex flex-col w-[240px] overflow-y-auto left-0 md:left-auto md:right-0 top-10"
+        @click="addFilter"
+        @removeFilter="removeFilter"
+      />
+    </template>
+  </filter-button>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
new file mode 100644
index 000000000..48a1c2701
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue
@@ -0,0 +1,98 @@
+<script setup>
+import FilterButton from './FilterButton.vue';
+import FilterListDropdown from './FilterListDropdown.vue';
+import FilterListItemButton from './FilterListItemButton.vue';
+import FilterDropdownEmptyState from './FilterDropdownEmptyState.vue';
+
+import { ref } from 'vue';
+
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  menuOption: {
+    type: Array,
+    default: () => [],
+  },
+  showMenu: {
+    type: Boolean,
+    default: false,
+  },
+  placeholderI18nKey: {
+    type: String,
+    default: '',
+  },
+  enableSearch: {
+    type: Boolean,
+    default: true,
+  },
+  emptyStateMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const hoveredItemId = ref(null);
+
+const showSubMenu = id => {
+  hoveredItemId.value = id;
+};
+
+const hideSubMenu = () => {
+  hoveredItemId.value = null;
+};
+
+const isHovered = id => hoveredItemId.value === id;
+
+const emit = defineEmits(['toggleDropdown', 'addFilter', 'closeDropdown']);
+const toggleDropdown = () => emit('toggleDropdown');
+const addFilter = item => {
+  emit('addFilter', item);
+  hideSubMenu();
+};
+const closeDropdown = () => {
+  hideSubMenu();
+  emit('closeDropdown');
+};
+</script>
+
+<template>
+  <filter-button :button-text="name" left-icon="filter" @click="toggleDropdown">
+    <!-- Dropdown with search and sub-dropdown -->
+    <template v-if="showMenu" #dropdown>
+      <filter-list-dropdown
+        v-on-clickaway="closeDropdown"
+        class="left-0 md:right-0 top-10"
+      >
+        <template #listItem>
+          <filter-dropdown-empty-state
+            v-if="!menuOption.length"
+            :message="emptyStateMessage"
+          />
+          <filter-list-item-button
+            v-for="item in menuOption"
+            :key="item.id"
+            :button-text="item.name"
+            @mouseenter="showSubMenu(item.id)"
+            @mouseleave="hideSubMenu"
+            @focus="showSubMenu(item.id)"
+          >
+            <!-- Submenu with search and clear button  -->
+            <template v-if="item.options && isHovered(item.id)" #dropdown>
+              <filter-list-dropdown
+                :list-items="item.options"
+                :input-placeholder="
+                  $t(`${placeholderI18nKey}.${item.type.toUpperCase()}`)
+                "
+                :enable-search="enableSearch"
+                class="flex flex-col w-[216px] overflow-y-auto top-0 left-36"
+                @click="addFilter"
+              />
+            </template>
+          </filter-list-item-button>
+        </template>
+      </filter-list-dropdown>
+    </template>
+  </filter-button>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterButton.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterButton.vue
index 2c9784705..3bbfb415c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterButton.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterButton.vue
@@ -4,23 +4,44 @@ defineProps({
     type: String,
     default: '',
   },
+  rightIcon: {
+    type: String,
+    default: '',
+  },
+  leftIcon: {
+    type: String,
+    default: '',
+  },
 });
 </script>
 <template>
   <button
-    class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 bg-white dark:bg-slate-900 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
+    class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
     @click="$emit('click')"
   >
-    <slot name="leftIcon" />
+    <slot name="leftIcon">
+      <fluent-icon
+        v-if="leftIcon"
+        :icon="leftIcon"
+        size="18"
+        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+      />
+    </slot>
     <span
       v-if="buttonText"
-      class="text-sm font-medium text-slate-900 dark:text-slate-50"
+      class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
     >
       {{ buttonText }}
     </span>
-    <slot name="rightIcon" />
-    <div v-if="$slots.dropdown" class="absolute right-0 top-10" @click.stop>
-      <slot name="dropdown" />
-    </div>
+    <slot name="rightIcon">
+      <fluent-icon
+        v-if="rightIcon"
+        :icon="rightIcon"
+        size="18"
+        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+      />
+    </slot>
+
+    <slot name="dropdown" />
   </button>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue
index ee090edf4..6a8d10724 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue
@@ -1,9 +1,5 @@
 <script setup>
 defineProps({
-  buttonText: {
-    type: String,
-    default: '',
-  },
   inputValue: {
     type: String,
     default: '',
@@ -18,7 +14,7 @@ defineProps({
   <div
     class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
   >
-    <div class="flex items-center gap-2">
+    <div class="flex items-center w-full gap-2">
       <fluent-icon
         icon="search"
         size="18"
@@ -32,14 +28,16 @@ defineProps({
         @input="$emit('input', $event.target.value)"
       />
     </div>
+    <!-- Clear filter button -->
     <woot-button
+      v-if="!inputValue"
       size="small"
       variant="clear"
       color-scheme="primary"
       class="!px-1 !py-1.5"
       @click="$emit('click')"
     >
-      {{ buttonText }}
+      {{ $t('REPORT.FILTER_ACTIONS.CLEAR_FILTER') }}
     </woot-button>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue
index fbb07db77..c6508229a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue
@@ -14,18 +14,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  inputButtonText: {
-    type: String,
-    default: '',
-  },
-  emptyListMessage: {
-    type: String,
-    default: '',
-  },
   inputPlaceholder: {
     type: String,
     default: '',
   },
+  activeFilterId: {
+    type: Number,
+    default: null,
+  },
 });
 
 const searchTerm = ref('');
@@ -42,29 +38,35 @@ const filteredListItems = computed(() => {
 const isDropdownListEmpty = computed(() => {
   return !filteredListItems.value.length;
 });
+
+const isFilterActive = id => {
+  if (!props.activeFilterId) return false;
+  return id === props.activeFilterId;
+};
 </script>
 <template>
   <div
-    class="z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-72"
+    class="absolute z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
+    @click.stop
   >
     <slot name="search">
       <filter-dropdown-search
         v-if="enableSearch && listItems.length"
-        :button-text="inputButtonText"
         :input-value="searchTerm"
         :input-placeholder="inputPlaceholder"
         @input="onSearch"
-        @click="onSearch('')"
+        @click="$emit('removeFilter')"
       />
     </slot>
     <slot name="listItem">
       <filter-dropdown-empty-state
         v-if="isDropdownListEmpty"
-        :message="emptyListMessage"
+        :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
       />
       <filter-list-item-button
         v-for="item in filteredListItems"
         :key="item.id"
+        :is-active="isFilterActive(item.id)"
         :button-text="item.name"
         @click="$emit('click', item)"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListItemButton.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListItemButton.vue
index 2fb99980a..3566686e1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListItemButton.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListItemButton.vue
@@ -13,7 +13,7 @@ defineProps({
 <template>
   <button
     class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
-    @click="$emit('click')"
+    @click.stop="$emit('click')"
     @mouseenter="$emit('mouseenter')"
     @mouseleave="$emit('mouseleave')"
     @focus="$emit('focus')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
new file mode 100644
index 000000000..80163ecd7
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
@@ -0,0 +1,210 @@
+<template>
+  <div
+    class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"
+  >
+    <!-- Active filters section -->
+    <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
+      <active-filter-chip
+        v-for="filter in activeFilters"
+        v-bind="filter"
+        :key="filter.type"
+        :placeholder="
+          $t(
+            `SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER.${filter.type.toUpperCase()}`
+          )
+        "
+        :active-filter-type="activeFilterType"
+        :show-menu="showSubDropdownMenu"
+        enable-search
+        @toggleDropdown="openActiveFilterDropdown"
+        @closeDropdown="closeActiveFilterDropdown"
+        @addFilter="addFilter"
+        @removeFilter="removeFilter"
+      />
+    </div>
+    <!-- Dividing line between Active filters and Add filter button -->
+    <div
+      v-if="hasActiveFilters && !isAllFilterSelected"
+      class="w-full h-px border md:w-px md:h-5 border-slate-75 dark:border-slate-800"
+    />
+    <!-- Add filter and clear filter button -->
+    <div class="flex items-center gap-2">
+      <add-filter-chip
+        v-if="!isAllFilterSelected"
+        placeholder-i18n-key="SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER"
+        :name="$t('SLA_REPORTS.DROPDOWN.ADD_FIlTER')"
+        :menu-option="filterListMenuItems"
+        :show-menu="showDropdownMenu"
+        :empty-state-message="$t('SLA_REPORTS.DROPDOWN.NO_FILTER')"
+        @toggleDropdown="showDropdown"
+        @closeDropdown="closeDropdown"
+        @addFilter="addFilter"
+      />
+
+      <!-- Dividing line between Add filter and Clear all filter button -->
+      <div
+        v-if="hasActiveFilters"
+        class="w-px h-5 border border-slate-75 dark:border-slate-800"
+      />
+      <!-- Clear all filter button -->
+      <filter-button
+        v-if="hasActiveFilters"
+        :button-text="$t('SLA_REPORTS.DROPDOWN.CLEAR_ALL')"
+        @click="clearAllFilters"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import {
+  buildFilterList,
+  getActiveFilter,
+  getFilterType,
+} from './helpers/SLAFilterHelpers';
+import FilterButton from '../Filters/v3/FilterButton.vue';
+import ActiveFilterChip from '../Filters/v3/ActiveFilterChip.vue';
+import AddFilterChip from '../Filters/v3/AddFilterChip.vue';
+
+export default {
+  components: {
+    FilterButton,
+    ActiveFilterChip,
+    AddFilterChip,
+  },
+  data() {
+    return {
+      showDropdownMenu: false,
+      showSubDropdownMenu: false,
+      activeFilterType: '',
+      appliedFilters: {
+        assigned_agent_id: null,
+        inbox_id: null,
+        team_id: null,
+        sla_policy_id: null,
+        label_list: null,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({
+      agents: 'agents/getAgents',
+      inboxes: 'inboxes/getInboxes',
+      teams: 'teams/getTeams',
+      labels: 'labels/getLabels',
+      sla: 'sla/getSLA',
+    }),
+    filterListMenuItems() {
+      const filterTypes = [
+        { id: '1', name: this.$t('SLA_REPORTS.DROPDOWN.SLA'), type: 'sla' },
+        {
+          id: '2',
+          name: this.$t('SLA_REPORTS.DROPDOWN.INBOXES'),
+          type: 'inboxes',
+        },
+        {
+          id: '3',
+          name: this.$t('SLA_REPORTS.DROPDOWN.AGENTS'),
+          type: 'agents',
+        },
+        { id: '4', name: this.$t('SLA_REPORTS.DROPDOWN.TEAMS'), type: 'teams' },
+        {
+          id: '5',
+          name: this.$t('SLA_REPORTS.DROPDOWN.LABELS'),
+          type: 'labels',
+        },
+      ];
+      // Filter out the active filters from the filter list
+      // We only want to show the filters that are not already applied
+      // In the add filter dropdown
+      const activeFilters = Object.keys(this.appliedFilters).filter(
+        key => this.appliedFilters[key]
+      );
+      const activeFilterTypes = activeFilters.map(key =>
+        getFilterType(key, 'keyToType')
+      );
+      return filterTypes
+        .filter(({ type }) => !activeFilterTypes.includes(type))
+        .map(({ id, name, type }) => ({
+          id,
+          name,
+          type,
+          options: buildFilterList(this[type], type),
+        }));
+    },
+    activeFilters() {
+      // Get the active filters from the applied filters
+      // and return the filter name, type and options
+      const activeKey = Object.keys(this.appliedFilters).filter(
+        key => this.appliedFilters[key]
+      );
+      return activeKey.map(key => {
+        const filterType = getFilterType(key, 'keyToType');
+        const item = getActiveFilter(
+          this[filterType],
+          filterType,
+          this.appliedFilters[key]
+        );
+        return {
+          id: item.id,
+          name: filterType === 'labels' ? item.title : item.name,
+          type: filterType,
+          options: buildFilterList(this[filterType], filterType),
+        };
+      });
+    },
+    hasActiveFilters() {
+      return Object.values(this.appliedFilters).some(value => value !== null);
+    },
+    isAllFilterSelected() {
+      return !this.filterListMenuItems.length;
+    },
+  },
+  methods: {
+    addFilter(item) {
+      const { type, id, name } = item;
+      const filterKey = getFilterType(type, 'typeToKey');
+      this.appliedFilters[filterKey] = type === 'labels' ? name : id;
+      this.$emit('filter-change', this.appliedFilters);
+      this.resetDropdown();
+    },
+    removeFilter(type) {
+      const filterKey = getFilterType(type, 'typeToKey');
+      this.appliedFilters[filterKey] = null;
+      this.$emit('filter-change', this.appliedFilters);
+    },
+    clearAllFilters() {
+      this.appliedFilters = {
+        assigned_agent_id: null,
+        inbox_id: null,
+        team_id: null,
+        sla_policy_id: null,
+        label_list: null,
+      };
+      this.$emit('filter-change', this.appliedFilters);
+      this.resetDropdown();
+    },
+    showDropdown() {
+      this.showSubDropdownMenu = false;
+      this.showDropdownMenu = !this.showDropdownMenu;
+    },
+    closeDropdown() {
+      this.showDropdownMenu = false;
+    },
+    openActiveFilterDropdown(filterType) {
+      this.closeDropdown();
+      this.activeFilterType = filterType;
+      this.showSubDropdownMenu = !this.showSubDropdownMenu;
+    },
+    closeActiveFilterDropdown() {
+      this.activeFilterType = '';
+      this.showSubDropdownMenu = false;
+    },
+    resetDropdown() {
+      this.closeDropdown();
+      this.closeActiveFilterDropdown();
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
index 5748366b6..123a921fc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
@@ -1,22 +1,25 @@
 <template>
-  <div class="flex flex-col md:flex-row justify-between mb-4">
-    <div class="md:grid flex flex-col filter-container gap-3 w-full">
-      <reports-filters-date-range @on-range-change="onDateRangeChange" />
-      <woot-date-range-picker
-        v-if="isDateRangeSelected"
-        show-range
-        class="no-margin auto-width"
-        :value="customDateRange"
-        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
-        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-        @change="onCustomDateRangeChange"
-      />
-    </div>
+  <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
+    <reports-filters-date-range
+      class="sm:min-w-[200px] tiny h-8"
+      @on-range-change="onDateRangeChange"
+    />
+    <woot-date-range-picker
+      v-if="isDateRangeSelected"
+      show-range
+      class="no-margin auto-width sm:min-w-[240px] small h-8"
+      :value="customDateRange"
+      :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+      :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+      @change="onCustomDateRangeChange"
+    />
+    <SLA-filter @filter-change="emitFilterChange" />
   </div>
 </template>
 <script>
 import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
 import ReportsFiltersDateRange from '../Filters/DateRange.vue';
+import SLAFilter from '../SLA/SLAFilter.vue';
 import subDays from 'date-fns/subDays';
 import { DATE_RANGE_OPTIONS } from '../../constants';
 import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
@@ -25,6 +28,7 @@ export default {
   components: {
     WootDateRangePicker,
     ReportsFiltersDateRange,
+    SLAFilter,
   },
 
   data() {
@@ -70,8 +74,13 @@ export default {
       this.$emit('filter-change', {
         from,
         to,
+        ...this.selectedGroupByFilter,
       });
     },
+    emitFilterChange(params) {
+      this.selectedGroupByFilter = params;
+      this.emitChange();
+    },
     onDateRangeChange(selectedRange) {
       this.selectedDateRange = selectedRange;
       this.emitChange();
@@ -83,9 +92,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.filter-container {
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/helpers/SLAFilterHelpers.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/helpers/SLAFilterHelpers.js
new file mode 100644
index 000000000..cac7e93c3
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/helpers/SLAFilterHelpers.js
@@ -0,0 +1,37 @@
+export const buildFilterList = (items, type) =>
+  // Build the filter list for the dropdown
+  items.map(item => ({
+    id: item.id,
+    name: type === 'labels' ? item.title : item.name,
+    type,
+  }));
+
+export const getActiveFilter = (filters, type, key) => {
+  // Method is used to get the active filter from the filter list
+  return filters.find(filterItem =>
+    type === 'labels'
+      ? filterItem.title === key
+      : filterItem.id.toString() === key.toString()
+  );
+};
+
+export const getFilterType = (input, direction) => {
+  // Method is used to map the filter key to the filter type
+  const filterMap = {
+    keyToType: {
+      assigned_agent_id: 'agents',
+      inbox_id: 'inboxes',
+      team_id: 'teams',
+      sla_policy_id: 'sla',
+      label_list: 'labels',
+    },
+    typeToKey: {
+      agents: 'assigned_agent_id',
+      inboxes: 'inbox_id',
+      teams: 'team_id',
+      sla: 'sla_policy_id',
+      labels: 'label_list',
+    },
+  };
+  return filterMap[direction][input];
+};
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 61d6dec8d..deeb88f0a 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -31,6 +31,7 @@ import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 import AnalyticsPlugin from '../dashboard/helper/AnalyticsHelper/plugin';
 import resizeDirective from '../dashboard/helper/directives/resize.js';
+import { directive as onClickaway } from 'vue-clickaway';
 
 Vue.config.env = process.env;
 
@@ -80,6 +81,7 @@ Vue.component('woot-wizard', WootWizard);
 Vue.component('fluent-icon', FluentIcon);
 
 Vue.directive('resize', resizeDirective);
+Vue.directive('on-clickaway', onClickaway);
 const i18nConfig = new VueI18n({
   locale: 'en',
   messages: i18n,
diff --git a/enterprise/app/models/applied_sla.rb b/enterprise/app/models/applied_sla.rb
index 0ae634536..6adeee036 100644
--- a/enterprise/app/models/applied_sla.rb
+++ b/enterprise/app/models/applied_sla.rb
@@ -30,14 +30,14 @@ class AppliedSla < ApplicationRecord
   enum sla_status: { active: 0, hit: 1, missed: 2, active_with_misses: 3 }
 
   scope :filter_by_date_range, ->(range) { where(created_at: range) if range.present? }
-  scope :filter_by_inbox_id, ->(inbox_id) { where(inbox_id: inbox_id) if inbox_id.present? }
-  scope :filter_by_team_id, ->(team_id) { where(team_id: team_id) if team_id.present? }
+  scope :filter_by_inbox_id, ->(inbox_id) { joins(:conversation).where(conversations: { inbox_id: inbox_id }) if inbox_id.present? }
+  scope :filter_by_team_id, ->(team_id) { joins(:conversation).where(conversations: { team_id: team_id }) if team_id.present? }
   scope :filter_by_sla_policy_id, ->(sla_policy_id) { where(sla_policy_id: sla_policy_id) if sla_policy_id.present? }
-  scope :filter_by_label_list, ->(label_list) { joins(:conversation).where(conversations: { cached_label_list: label_list }) if label_list.present? }
+  scope :filter_by_label_list, lambda { |label_list|
+                                 joins(:conversation).where('conversations.cached_label_list LIKE ?', "%#{label_list}%") if label_list.present?
+                               }
   scope :filter_by_assigned_agent_id, lambda { |assigned_agent_id|
-                                        if assigned_agent_id.present?
-                                          joins(:conversation).where(conversations: { assigned_agent_id: assigned_agent_id })
-                                        end
+                                        joins(:conversation).where(conversations: { assignee_id: assigned_agent_id }) if assigned_agent_id.present?
                                       }
   scope :missed, -> { where(sla_status: %i[missed active_with_misses]) }
 
diff --git a/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb b/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb
index 34389dad4..423f65711 100644
--- a/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb
+++ b/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb
@@ -92,7 +92,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago)
 
         get "/api/v1/accounts/#{account.id}/applied_slas/metrics",
-            params: { label_list: ['label1'] },
+            params: { label_list: 'label1' },
             headers: administrator.create_new_auth_token
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
@@ -205,7 +205,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago, sla_status: 'missed')
 
         get "/api/v1/accounts/#{account.id}/applied_slas",
-            params: { label_list: ['label1'] },
+            params: { label_list: 'label1' },
             headers: administrator.create_new_auth_token
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)

From dc757598f146d70db29ab14716c796a8eb910a54 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 12 Apr 2024 13:38:51 +0530
Subject: [PATCH 4/5] fix: Disable clear filter button in add filter dropdown
 (#9226)

---
 .../reports/components/Filters/v3/ActiveFilterChip.vue      | 1 +
 .../reports/components/Filters/v3/FilterDropdownSearch.vue  | 6 +++++-
 .../reports/components/Filters/v3/FilterListDropdown.vue    | 5 +++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
index 7a6bd1f82..67046acc4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
@@ -60,6 +60,7 @@ const closeDropdown = () => emit('closeDropdown');
       <filter-list-dropdown
         v-if="options"
         v-on-clickaway="closeDropdown"
+        show-clear-filter
         :list-items="options"
         :active-filter-id="id"
         :input-placeholder="placeholder"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue
index 6a8d10724..558816deb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue
@@ -8,6 +8,10 @@ defineProps({
     type: String,
     default: '',
   },
+  showClearFilter: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 <template>
@@ -30,7 +34,7 @@ defineProps({
     </div>
     <!-- Clear filter button -->
     <woot-button
-      v-if="!inputValue"
+      v-if="!inputValue && showClearFilter"
       size="small"
       variant="clear"
       color-scheme="primary"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue
index c6508229a..1a0543af3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue
@@ -22,6 +22,10 @@ const props = defineProps({
     type: Number,
     default: null,
   },
+  showClearFilter: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const searchTerm = ref('');
@@ -54,6 +58,7 @@ const isFilterActive = id => {
         v-if="enableSearch && listItems.length"
         :input-value="searchTerm"
         :input-placeholder="inputPlaceholder"
+        :show-clear-filter="showClearFilter"
         @input="onSearch"
         @click="$emit('removeFilter')"
       />

From bce2a07d03fd4be4b09f195d433dbc9eae01c237 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 12 Apr 2024 15:30:07 +0530
Subject: [PATCH 5/5] feat: do not send contact details to the widget (#9223)

* refactor: use has_email instead of email

* feat: remove usage of details directly in forms

* test: update payload

* test: fix transcript test

* refactor: use computed hasEmail

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../api/v1/widget/conversations_controller.rb |  4 +-
 app/javascript/widget/api/conversation.js     |  5 +--
 .../widget/components/ChatFooter.vue          | 12 +++---
 .../widget/components/PreChat/Form.vue        | 12 +++---
 .../modules/specs/contact/getters.spec.js     |  8 ++--
 .../modules/specs/contact/mutations.spec.js   |  4 +-
 .../v1/widget/contacts/set_user.json.jbuilder |  6 +--
 .../api/v1/widget/contacts/show.json.jbuilder |  6 +--
 .../v1/widget/contacts/update.json.jbuilder   |  6 +--
 .../api/v1/widget/contacts_controller_spec.rb | 40 +++++++++++++++++--
 .../widget/conversations_controller_spec.rb   |  4 +-
 11 files changed, 70 insertions(+), 37 deletions(-)

diff --git a/app/controllers/api/v1/widget/conversations_controller.rb b/app/controllers/api/v1/widget/conversations_controller.rb
index 1d1ba8a7e..7e6d84bd2 100644
--- a/app/controllers/api/v1/widget/conversations_controller.rb
+++ b/app/controllers/api/v1/widget/conversations_controller.rb
@@ -33,10 +33,10 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def transcript
-    if permitted_params[:email].present? && conversation.present?
+    if conversation.present? && conversation.contact.present? && conversation.contact.email.present?
       ConversationReplyMailer.with(account: conversation.account).conversation_transcript(
         conversation,
-        permitted_params[:email]
+        conversation.contact.email
       )&.deliver_later
     end
     head :ok
diff --git a/app/javascript/widget/api/conversation.js b/app/javascript/widget/api/conversation.js
index 5cae5bc13..1060b285d 100755
--- a/app/javascript/widget/api/conversation.js
+++ b/app/javascript/widget/api/conversation.js
@@ -38,10 +38,9 @@ const setUserLastSeenAt = async ({ lastSeen }) => {
     { contact_last_seen_at: lastSeen }
   );
 };
-const sendEmailTranscript = async ({ email }) => {
+const sendEmailTranscript = async () => {
   return API.post(
-    `/api/v1/widget/conversations/transcript${window.location.search}`,
-    { email }
+    `/api/v1/widget/conversations/transcript${window.location.search}`
   );
 };
 const toggleStatus = async () => {
diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue
index 2a8ef36dc..20d3d820f 100755
--- a/app/javascript/widget/components/ChatFooter.vue
+++ b/app/javascript/widget/components/ChatFooter.vue
@@ -87,7 +87,10 @@ export default {
       return !allowMessagesAfterResolved && status === 'resolved';
     },
     showEmailTranscriptButton() {
-      return this.currentUser && this.currentUser.email;
+      return this.hasEmail;
+    },
+    hasEmail() {
+      return this.currentUser && this.currentUser.has_email;
     },
     hasReplyTo() {
       return (
@@ -141,12 +144,9 @@ export default {
       this.inReplyTo = message;
     },
     async sendTranscript() {
-      const { email } = this.currentUser;
-      if (email) {
+      if (this.hasEmail) {
         try {
-          await sendEmailTranscript({
-            email,
-          });
+          await sendEmailTranscript();
           window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
             message: this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'),
             type: 'success',
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index 394b338d5..3ff597c67 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -1,7 +1,7 @@
 <template>
   <FormulateForm
     v-model="formValues"
-    class="flex flex-1 flex-col p-6 overflow-y-auto"
+    class="flex flex-col flex-1 p-6 overflow-y-auto"
     @submit="onSubmit"
   >
     <div
@@ -49,7 +49,7 @@
     />
 
     <custom-button
-      class="font-medium mt-2 mb-5"
+      class="mt-2 mb-5 font-medium"
       block
       :bg-color="widgetColor"
       :text-color="textColor"
@@ -133,9 +133,10 @@ export default {
       return this.preChatFormEnabled ? this.options.preChatFields : [];
     },
     filteredPreChatFields() {
-      const isUserEmailAvailable = !!this.currentUser.email;
-      const isUserPhoneNumberAvailable = !!this.currentUser.phone_number;
+      const isUserEmailAvailable = this.currentUser.has_email;
+      const isUserPhoneNumberAvailable = this.currentUser.has_phone_number;
       const isUserIdentifierAvailable = !!this.currentUser.identifier;
+
       const isUserNameAvailable = !!(
         isUserIdentifierAvailable ||
         isUserEmailAvailable ||
@@ -302,11 +303,10 @@ export default {
     },
     onSubmit() {
       const { emailAddress, fullName, phoneNumber, message } = this.formValues;
-      const { email } = this.currentUser;
       this.$emit('submit', {
         fullName,
         phoneNumber,
-        emailAddress: emailAddress || email,
+        emailAddress,
         message,
         activeCampaignId: this.activeCampaign.id,
         conversationCustomAttributes: this.conversationCustomAttributes,
diff --git a/app/javascript/widget/store/modules/specs/contact/getters.spec.js b/app/javascript/widget/store/modules/specs/contact/getters.spec.js
index 43b0f15d7..3b7e70dec 100644
--- a/app/javascript/widget/store/modules/specs/contact/getters.spec.js
+++ b/app/javascript/widget/store/modules/specs/contact/getters.spec.js
@@ -3,8 +3,8 @@ import { getters } from '../../contacts';
 describe('#getters', () => {
   it('getCurrentUser', () => {
     const user = {
-      email: 'thoma@sphadikam.com',
-      name: 'Adu Thoma',
+      has_email: true,
+      has_name: true,
       avatar_url: '',
       identifier_hash: 'malana_hash',
     };
@@ -12,8 +12,8 @@ describe('#getters', () => {
       currentUser: user,
     };
     expect(getters.getCurrentUser(state)).toEqual({
-      email: 'thoma@sphadikam.com',
-      name: 'Adu Thoma',
+      has_email: true,
+      has_name: true,
       avatar_url: '',
       identifier_hash: 'malana_hash',
     });
diff --git a/app/javascript/widget/store/modules/specs/contact/mutations.spec.js b/app/javascript/widget/store/modules/specs/contact/mutations.spec.js
index fed202bf2..5778be2fd 100644
--- a/app/javascript/widget/store/modules/specs/contact/mutations.spec.js
+++ b/app/javascript/widget/store/modules/specs/contact/mutations.spec.js
@@ -4,8 +4,8 @@ describe('#mutations', () => {
   describe('#SET_CURRENT_USER', () => {
     it('set current user', () => {
       const user = {
-        email: 'thoma@sphadikam.com',
-        name: 'Adu Thoma',
+        has_email: true,
+        has_name: true,
         avatar_url: '',
         identifier_hash: 'malana_hash',
       };
diff --git a/app/views/api/v1/widget/contacts/set_user.json.jbuilder b/app/views/api/v1/widget/contacts/set_user.json.jbuilder
index 8c770fe4f..e6283fa4f 100644
--- a/app/views/api/v1/widget/contacts/set_user.json.jbuilder
+++ b/app/views/api/v1/widget/contacts/set_user.json.jbuilder
@@ -1,5 +1,5 @@
 json.id @contact.id
-json.name @contact.name
-json.email @contact.email
-json.phone_number @contact.phone_number
+json.has_email @contact.email.present?
+json.has_name @contact.name.present?
+json.has_phone_number @contact.phone_number.present?
 json.widget_auth_token @widget_auth_token if @widget_auth_token.present?
diff --git a/app/views/api/v1/widget/contacts/show.json.jbuilder b/app/views/api/v1/widget/contacts/show.json.jbuilder
index 2e7a38277..26be98a3e 100644
--- a/app/views/api/v1/widget/contacts/show.json.jbuilder
+++ b/app/views/api/v1/widget/contacts/show.json.jbuilder
@@ -1,5 +1,5 @@
 json.id @contact.id
-json.name @contact.name
-json.email @contact.email
-json.phone_number @contact.phone_number
+json.has_email @contact.email.present?
+json.has_name @contact.name.present?
+json.has_phone_number @contact.phone_number.present?
 json.identifier @contact.identifier
diff --git a/app/views/api/v1/widget/contacts/update.json.jbuilder b/app/views/api/v1/widget/contacts/update.json.jbuilder
index d6228cbfe..21f3c37b7 100644
--- a/app/views/api/v1/widget/contacts/update.json.jbuilder
+++ b/app/views/api/v1/widget/contacts/update.json.jbuilder
@@ -1,4 +1,4 @@
 json.id @contact.id
-json.name @contact.name
-json.email @contact.email
-json.phone_number @contact.phone_number
+json.has_email @contact.email.present?
+json.has_name @contact.name.present?
+json.has_phone_number @contact.phone_number.present?
diff --git a/spec/controllers/api/v1/widget/contacts_controller_spec.rb b/spec/controllers/api/v1/widget/contacts_controller_spec.rb
index 336d9d9ca..7abbcf22e 100644
--- a/spec/controllers/api/v1/widget/contacts_controller_spec.rb
+++ b/spec/controllers/api/v1/widget/contacts_controller_spec.rb
@@ -48,7 +48,9 @@ RSpec.describe '/api/v1/widget/contacts', type: :request do
               headers: { 'X-Auth-Token' => token },
               as: :json
         body = response.parsed_body
-        expect(body['phone_number']).to eq('+745623239')
+        expect(body['has_phone_number']).to be true
+        contact.reload
+        expect(contact.phone_number).to eq('+745623239')
         expect(response).to have_http_status(:success)
       end
 
@@ -58,7 +60,9 @@ RSpec.describe '/api/v1/widget/contacts', type: :request do
               headers: { 'X-Auth-Token' => token },
               as: :json
         body = response.parsed_body
-        expect(body['phone_number']).to eq('+245623239')
+        expect(body['has_phone_number']).to be true
+        contact.reload
+        expect(contact.phone_number).to eq('+245623239')
         expect(response).to have_http_status(:success)
       end
 
@@ -68,7 +72,33 @@ RSpec.describe '/api/v1/widget/contacts', type: :request do
               headers: { 'X-Auth-Token' => token },
               as: :json
         body = response.parsed_body
-        expect(body['email']).to eq('test@test.com')
+        expect(body['has_email']).to be true
+        contact.reload
+        expect(contact.email).to eq('test@test.com')
+        expect(response).to have_http_status(:success)
+      end
+
+      it 'dont update email if empty value email passed' do
+        patch '/api/v1/widget/contact',
+              params: params.merge({ email: '' }),
+              headers: { 'X-Auth-Token' => token },
+              as: :json
+        body = response.parsed_body
+        expect(body['has_email']).to be true
+        contact.reload
+        expect(contact.email).to eq('test@test.com')
+        expect(response).to have_http_status(:success)
+      end
+
+      it 'dont update email if nil value email passed' do
+        patch '/api/v1/widget/contact',
+              params: params.merge({ email: nil }),
+              headers: { 'X-Auth-Token' => token },
+              as: :json
+        body = response.parsed_body
+        expect(body['has_email']).to be true
+        contact.reload
+        expect(contact.email).to eq('test@test.com')
         expect(response).to have_http_status(:success)
       end
 
@@ -78,7 +108,9 @@ RSpec.describe '/api/v1/widget/contacts', type: :request do
               headers: { 'X-Auth-Token' => token },
               as: :json
         body = response.parsed_body
-        expect(body['email']).to eq('test-1@test.com')
+        expect(body['has_email']).to be true
+        contact.reload
+        expect(contact.email).to eq('test-1@test.com')
         expect(response).to have_http_status(:success)
       end
     end
diff --git a/spec/controllers/api/v1/widget/conversations_controller_spec.rb b/spec/controllers/api/v1/widget/conversations_controller_spec.rb
index c3fd7ff26..e4f5a4bde 100644
--- a/spec/controllers/api/v1/widget/conversations_controller_spec.rb
+++ b/spec/controllers/api/v1/widget/conversations_controller_spec.rb
@@ -190,17 +190,19 @@ RSpec.describe '/api/v1/widget/conversations/toggle_typing', type: :request do
   describe 'POST /api/v1/widget/conversations/transcript' do
     context 'with a conversation' do
       it 'sends transcript email' do
+        contact.update(email: 'test@test.com')
         mailer = double
         allow(ConversationReplyMailer).to receive(:with).and_return(mailer)
         allow(mailer).to receive(:conversation_transcript)
 
         post '/api/v1/widget/conversations/transcript',
              headers: { 'X-Auth-Token' => token },
-             params: { website_token: web_widget.website_token, email: 'test@test.com' },
+             params: { website_token: web_widget.website_token },
              as: :json
 
         expect(response).to have_http_status(:success)
         expect(mailer).to have_received(:conversation_transcript).with(conversation, 'test@test.com')
+        contact.update(email: nil)
       end
     end
   end