Merge branch 'feat/CW-3458' into refactor/CW-3458-move-compsables

Gemfile

@@ -96,12 +96,12 @@ gem 'koala'
 # slack client
 gem 'slack-ruby-client', '~> 2.2.0'
 # for dialogflow integrations
-gem 'google-cloud-dialogflow-v2', '>= 0.24.0'
+gem 'google-cloud-dialogflow-v2'
 gem 'grpc'
 # Translate integrations
 # 'google-cloud-translate' gem depends on faraday 2.0 version
 # this dependency breaks the slack-ruby-client gem
-gem 'google-cloud-translate-v3', '>= 0.7.0'
+gem 'google-cloud-translate-v3'
 
 ##-- apm and error monitoring ---#
 # loaded only when environment variables are set.
@@ -165,7 +165,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-google-oauth2', '>= 1.1.3'
+gem 'omniauth-google-oauth2', '>= 1.1.2'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'
 
 ## Gems for reponse bot
@@ -200,7 +200,7 @@ group :development do
   gem 'rack-mini-profiler', '>= 3.2.0', require: false
   gem 'stackprof'
   # Should install the associated chrome extension to view query logs
-  gem 'meta_request', '>= 0.8.3'
+  gem 'meta_request', '>= 0.8.0'
 end
 
 group :test do

Gemfile.lock

@@ -257,7 +257,7 @@ GEM
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
-    faraday-retry (2.2.1)
+    faraday-retry (2.1.0)
       faraday (~> 2.0)
     fcm (1.0.8)
       faraday (>= 1.0.0, < 3.0)
@@ -271,7 +271,7 @@ GEM
     fugit (1.11.1)
       et-orbi (~> 1, >= 1.2.11)
       raabro (~> 1.4)
-    gapic-common (0.20.0)
+    gapic-common (0.18.0)
       faraday (>= 1.9, < 3.a)
       faraday-retry (>= 1.0, < 3.a)
       google-protobuf (~> 3.14)
@@ -301,15 +301,15 @@ GEM
     google-cloud-core (1.6.0)
       google-cloud-env (~> 1.0)
       google-cloud-errors (~> 1.0)
-    google-cloud-dialogflow-v2 (0.31.0)
-      gapic-common (>= 0.20.0, < 2.a)
+    google-cloud-dialogflow-v2 (0.23.0)
+      gapic-common (>= 0.18.0, < 2.a)
       google-cloud-errors (~> 1.0)
       google-cloud-location (>= 0.4, < 2.a)
     google-cloud-env (1.6.0)
       faraday (>= 0.17.3, < 3.0)
     google-cloud-errors (1.3.1)
-    google-cloud-location (0.6.0)
-      gapic-common (>= 0.20.0, < 2.a)
+    google-cloud-location (0.4.0)
+      gapic-common (>= 0.17.1, < 2.a)
       google-cloud-errors (~> 1.0)
     google-cloud-storage (1.44.0)
       addressable (~> 2.8)
@@ -319,17 +319,17 @@ GEM
       google-cloud-core (~> 1.6)
       googleauth (>= 0.16.2, < 2.a)
       mini_mime (~> 1.0)
-    google-cloud-translate-v3 (0.10.0)
-      gapic-common (>= 0.20.0, < 2.a)
+    google-cloud-translate-v3 (0.6.0)
+      gapic-common (>= 0.17.1, < 2.a)
       google-cloud-errors (~> 1.0)
     google-protobuf (3.25.3)
     google-protobuf (3.25.3-arm64-darwin)
     google-protobuf (3.25.3-x86_64-darwin)
     google-protobuf (3.25.3-x86_64-linux)
-    googleapis-common-protos (1.6.0)
-      google-protobuf (>= 3.18, < 5.a)
-      googleapis-common-protos-types (~> 1.7)
-      grpc (~> 1.41)
+    googleapis-common-protos (1.4.0)
+      google-protobuf (~> 3.14)
+      googleapis-common-protos-types (~> 1.2)
+      grpc (~> 1.27)
     googleapis-common-protos-types (1.14.0)
       google-protobuf (~> 3.18)
     googleauth (1.5.2)
@@ -457,7 +457,7 @@ GEM
     marcel (1.0.4)
     maxminddb (0.1.22)
     memoist (0.16.2)
-    meta_request (0.8.3)
+    meta_request (0.8.2)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
     method_source (1.1.0)
@@ -522,7 +522,7 @@ GEM
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
       rack-protection
-    omniauth-google-oauth2 (1.1.3)
+    omniauth-google-oauth2 (1.1.2)
       jwt (>= 2.0)
       oauth2 (~> 2.0)
       omniauth (~> 2.0)
@@ -881,9 +881,9 @@ DEPENDENCIES
   foreman
   geocoder
   gmail_xoauth
-  google-cloud-dialogflow-v2 (>= 0.24.0)
+  google-cloud-dialogflow-v2
   google-cloud-storage
-  google-cloud-translate-v3 (>= 0.7.0)
+  google-cloud-translate-v3
   groupdate
   grpc
   haikunator
@@ -903,14 +903,14 @@ DEPENDENCIES
   listen
   lograge (~> 0.14.0)
   maxminddb
-  meta_request (>= 0.8.3)
+  meta_request (>= 0.8.0)
   mock_redis
   neighbor
   net-smtp (~> 0.3.4)
   newrelic-sidekiq-metrics (>= 1.6.2)
   newrelic_rpm
   omniauth (>= 2.1.2)
-  omniauth-google-oauth2 (>= 1.1.3)
+  omniauth-google-oauth2 (>= 1.1.2)
   omniauth-oauth2
   omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
   pg

app/builders/account_builder.rb

@@ -32,8 +32,6 @@ class AccountBuilder
   end
 
   def validate_email
-    raise InvalidEmail.new({ domain_blocked: domain_blocked }) if domain_blocked?
-
     address = ValidEmail2::Address.new(@email)
     if address.valid? && !address.disposable?
       true
@@ -81,21 +79,4 @@ class AccountBuilder
     @user.confirm if @confirmed
     @user.save!
   end
-
-  def domain_blocked?
-    domain = @email.split('@').last
-
-    blocked_domains.each do |blocked_domain|
-      return true if domain.match?(blocked_domain)
-    end
-
-    false
-  end
-
-  def blocked_domains
-    domains = GlobalConfigService.load('BLOCKED_EMAIL_DOMAINS', '')
-    return [] if domains.blank?
-
-    domains.split("\n").map(&:strip)
-  end
 end

app/controllers/api/v1/accounts/agents_controller.rb

@@ -24,7 +24,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
 
   def update
     @agent.update!(agent_params.slice(:name).compact)
-    @agent.current_account_user.update!(agent_params.slice(*account_user_attributes).compact)
+    @agent.current_account_user.update!(agent_params.slice(:role, :availability, :auto_offline).compact)
   end
 
   def destroy
@@ -67,16 +67,8 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     @agent = agents.find(params[:id])
   end
 
-  def account_user_attributes
-    [:role, :availability, :auto_offline]
-  end
-
-  def allowed_agent_params
-    [:name, :email, :name, :role, :availability, :auto_offline]
-  end
-
   def agent_params
-    params.require(:agent).permit(allowed_agent_params)
+    params.require(:agent).permit(:name, :email, :name, :role, :availability, :auto_offline)
   end
 
   def new_agent_params
@@ -109,5 +101,3 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     DeleteObjectJob.perform_later(agent) if agent.reload.account_users.blank?
   end
 end
-
-Api::V1::Accounts::AgentsController.prepend_mod_with('Api::V1::Accounts::AgentsController')

app/controllers/api/v1/accounts/upload_controller.rb

@@ -1,68 +1,13 @@
 class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
   def create
-    result = if params[:attachment].present?
-               create_from_file
-             elsif params[:external_url].present?
-               create_from_url
-             else
-               render_error('No file or URL provided', :unprocessable_entity)
-             end
-
-    render_success(result) if result.is_a?(ActiveStorage::Blob)
-  end
-
-  private
-
-  def create_from_file
-    attachment = params[:attachment]
-    create_and_save_blob(attachment.tempfile, attachment.original_filename, attachment.content_type)
-  end
-
-  def create_from_url
-    uri = parse_uri(params[:external_url])
-    return if performed?
-
-    fetch_and_process_file_from_uri(uri)
-  end
-
-  def parse_uri(url)
-    uri = URI.parse(url)
-    validate_uri(uri)
-    uri
-  rescue URI::InvalidURIError, SocketError
-    render_error('Invalid URL provided', :unprocessable_entity)
-    nil
-  end
-
-  def validate_uri(uri)
-    raise URI::InvalidURIError unless uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS)
-  end
-
-  def fetch_and_process_file_from_uri(uri)
-    uri.open do |file|
-      create_and_save_blob(file, File.basename(uri.path), file.content_type)
-    end
-  rescue OpenURI::HTTPError => e
-    render_error("Failed to fetch file from URL: #{e.message}", :unprocessable_entity)
-  rescue SocketError
-    render_error('Invalid URL provided', :unprocessable_entity)
-  rescue StandardError
-    render_error('An unexpected error occurred', :internal_server_error)
-  end
-
-  def create_and_save_blob(io, filename, content_type)
-    ActiveStorage::Blob.create_and_upload!(
-      io: io,
-      filename: filename,
-      content_type: content_type
+    file_blob = ActiveStorage::Blob.create_and_upload!(
+      key: nil,
+      io: params[:attachment].tempfile,
+      filename: params[:attachment].original_filename,
+      content_type: params[:attachment].content_type
     )
-  end
+    file_blob.save!
 
-  def render_success(file_blob)
     render json: { file_url: url_for(file_blob), blob_key: file_blob.key, blob_id: file_blob.id }
   end
-
-  def render_error(message, status)
-    render json: { error: message }, status: status
-  end
 end

app/javascript/dashboard/components/ChatList.vue

@@ -4,7 +4,6 @@ import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAlert } from 'dashboard/composables';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import { useFilter } from 'shared/composables/useFilter';
 import VirtualList from 'vue-virtual-scroll-list';
 
 import ChatListHeader from './ChatListHeader.vue';
@@ -17,6 +16,7 @@ import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
+import filterMixin from 'shared/mixins/filterMixin';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
@@ -41,6 +41,7 @@ export default {
     IntersectionObserver,
     VirtualList,
   },
+  mixins: [filterMixin],
   provide() {
     return {
       // Actions to be performed on virtual list item and context menu.
@@ -90,15 +91,6 @@ export default {
 
     const conversationListRef = ref(null);
 
-    const {
-      setFilterAttributes,
-      initializeStatusAndAssigneeFilterToModal,
-      initializeInboxTeamAndLabelFilterToModal,
-    } = useFilter({
-      filteri18nKey: 'FILTER',
-      attributeModel: 'conversation_attribute',
-    });
-
     const getKeyboardListenerParams = () => {
       const allConversations = conversationListRef.value.querySelectorAll(
         'div.conversations-list div.conversation'
@@ -117,41 +109,35 @@ export default {
         lastConversationIndex,
       };
     };
-    const handleConversationNavigation = direction => {
+    const handlePreviousConversation = () => {
+      const { allConversations, activeConversationIndex } =
+        getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[0].click();
+      }
+      if (activeConversationIndex >= 1) {
+        allConversations[activeConversationIndex - 1].click();
+      }
+    };
+    const handleNextConversation = () => {
       const {
         allConversations,
         activeConversationIndex,
         lastConversationIndex,
       } = getKeyboardListenerParams();
-
-      // Determine the new index based on the direction
-      const newIndex =
-        direction === 'previous'
-          ? activeConversationIndex - 1
-          : activeConversationIndex + 1;
-
-      // Check if the new index is within the valid range
-      if (
-        allConversations.length > 0 &&
-        newIndex >= 0 &&
-        newIndex <= lastConversationIndex
-      ) {
-        // Click the conversation at the new index
-        allConversations[newIndex].click();
-      } else if (allConversations.length > 0) {
-        // If the new index is out of range, click the first or last conversation based on the direction
-        const fallbackIndex =
-          direction === 'previous' ? 0 : lastConversationIndex;
-        allConversations[fallbackIndex].click();
+      if (activeConversationIndex === -1) {
+        allConversations[lastConversationIndex].click();
+      } else if (activeConversationIndex < lastConversationIndex) {
+        allConversations[activeConversationIndex + 1].click();
       }
     };
     const keyboardEvents = {
       'Alt+KeyJ': {
-        action: () => handleConversationNavigation('previous'),
+        action: () => handlePreviousConversation(),
         allowOnFocusedInput: true,
       },
       'Alt+KeyK': {
-        action: () => handleConversationNavigation('next'),
+        action: () => handleNextConversation(),
         allowOnFocusedInput: true,
       },
     };
@@ -160,9 +146,6 @@ export default {
     return {
       uiSettings,
       conversationListRef,
-      setFilterAttributes,
-      initializeStatusAndAssigneeFilterToModal,
-      initializeInboxTeamAndLabelFilterToModal,
     };
   },
   data() {
@@ -877,25 +860,6 @@ export default {
     onContextMenuToggle(state) {
       this.isContextMenuOpen = state;
     },
-    initializeExistingFilterToModal() {
-      const statusFilter = this.initializeStatusAndAssigneeFilterToModal(
-        this.activeStatus,
-        this.currentUserDetails,
-        this.activeAssigneeTab
-      );
-      if (statusFilter) {
-        this.appliedFilter.push(statusFilter);
-      }
-
-      const otherFilters = this.initializeInboxTeamAndLabelFilterToModal(
-        this.conversationInbox,
-        this.inbox,
-        this.teamId,
-        this.activeTeam,
-        this.label
-      );
-      this.appliedFilter.push(...otherFilters);
-    },
   },
 };
 </script>

app/javascript/dashboard/components/CustomAttribute.vue

@@ -331,12 +331,10 @@ export default {
 ::v-deep {
   .selector-wrap {
     @apply m-0 top-1;
-
     .selector-name {
       @apply ml-0;
     }
   }
-
   .name {
     @apply ml-0;
   }

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -13,7 +13,7 @@ import wootConstants from 'dashboard/constants/globals';
 import {
   CMD_REOPEN_CONVERSATION,
   CMD_RESOLVE_CONVERSATION,
-} from 'dashboard/helper/commandbar/events';
+} from 'dashboard/helper/commandBar/events';
 
 const store = useStore();
 const getters = useStoreGetters();

app/javascript/dashboard/components/widgets/AIAssistanceButton.vue

@@ -7,7 +7,7 @@ import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useAI } from 'dashboard/composables/useAI';
 import AICTAModal from './AICTAModal.vue';
 import AIAssistanceModal from './AIAssistanceModal.vue';
-import { CMD_AI_ASSIST } from 'dashboard/helper/commandbar/events';
+import { CMD_AI_ASSIST } from 'dashboard/helper/commandBar/events';
 import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';
 
 export default {

app/javascript/dashboard/components/widgets/AIAssistanceModal.vue

@@ -1,12 +1,13 @@
 <script>
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { useAI } from 'dashboard/composables/useAI';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import AILoader from './AILoader.vue';
 
 export default {
   components: {
     AILoader,
   },
+  mixins: [messageFormatterMixin],
   props: {
     aiOption: {
       type: String,
@@ -14,9 +15,12 @@ export default {
     },
   },
   setup() {
-    const { formatMessage } = useMessageFormatter();
     const { draftMessage, processEvent, recordAnalytics } = useAI();
-    return { draftMessage, processEvent, recordAnalytics, formatMessage };
+    return {
+      draftMessage,
+      processEvent,
+      recordAnalytics,
+    };
   },
   data() {
     return {

app/javascript/dashboard/components/widgets/ShowMore.vue

@@ -1,34 +1,38 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'dashboard/composables/useI18n';
-
-const props = defineProps({
-  text: {
-    type: String,
-    default: '',
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: '',
+    },
+    limit: {
+      type: Number,
+      default: 120,
+    },
   },
-  limit: {
-    type: Number,
-    default: 120,
+  data() {
+    return {
+      showMore: false,
+    };
   },
-});
-const { t } = useI18n();
-const showMore = ref(false);
+  computed: {
+    textToBeDisplayed() {
+      if (this.showMore || this.text.length <= this.limit) {
+        return this.text;
+      }
 
-const textToBeDisplayed = computed(() => {
-  if (showMore.value || props.text.length <= props.limit) {
-    return props.text;
-  }
-
-  return props.text.slice(0, props.limit) + '...';
-});
-const buttonLabel = computed(() => {
-  const i18nKey = !showMore.value ? 'SHOW_MORE' : 'SHOW_LESS';
-  return t(`COMPONENTS.SHOW_MORE_BLOCK.${i18nKey}`);
-});
-
-const toggleShowMore = () => {
-  showMore.value = !showMore.value;
+      return this.text.slice(0, this.limit) + '...';
+    },
+    buttonLabel() {
+      const i18nKey = !this.showMore ? 'SHOW_MORE' : 'SHOW_LESS';
+      return this.$t(`COMPONENTS.SHOW_MORE_BLOCK.${i18nKey}`);
+    },
+  },
+  methods: {
+    toggleShowMore() {
+      this.showMore = !this.showMore;
+    },
+  },
 };
 </script>
 
@@ -37,10 +41,16 @@ const toggleShowMore = () => {
     {{ textToBeDisplayed }}
     <button
       v-if="text.length > limit"
-      class="text-woot-500 !p-0 !border-0 align-top"
+      class="show-more--button"
       @click="toggleShowMore"
     >
       {{ buttonLabel }}
     </button>
   </span>
 </template>
+
+<style scoped>
+.show-more--button {
+  color: var(--w-500);
+}
+</style>

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -17,8 +17,6 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import TagAgents from '../conversation/TagAgents.vue';
 import CannedResponse from '../conversation/CannedResponse.vue';
 import VariableList from '../conversation/VariableList.vue';
-import KeyboardEmojiSelector from './keyboardEmojiSelector.vue';
-
 import {
   appendSignature,
   removeSignature,
@@ -26,7 +24,6 @@ import {
   scrollCursorIntoView,
   findNodeToInsertImage,
   setURLWithQueryAndSize,
-  getContentNode,
 } from 'dashboard/helper/editorHelper';
 
 const TYPING_INDICATOR_IDLE_TIME = 4000;
@@ -38,8 +35,10 @@ import {
 } from 'shared/helpers/KeyboardHelpers';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-
-import { createTypingIndicator } from '@chatwoot/utils';
+import {
+  replaceVariablesInMessage,
+  createTypingIndicator,
+} from '@chatwoot/utils';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
@@ -72,12 +71,7 @@ const createState = (
 
 export default {
   name: 'WootMessageEditor',
-  components: {
-    TagAgents,
-    CannedResponse,
-    VariableList,
-    KeyboardEmojiSelector,
-  },
+  components: { TagAgents, CannedResponse, VariableList },
   mixins: [keyboardEventListenerMixins],
   props: {
     value: { type: String, default: '' },
@@ -125,11 +119,9 @@ export default {
       showUserMentions: false,
       showCannedMenu: false,
       showVariables: false,
-      showEmojiMenu: false,
       mentionSearchKey: '',
       cannedSearchTerm: '',
       variableSearchTerm: '',
-      emojiSearchTerm: '',
       editorView: null,
       range: null,
       state: undefined,
@@ -177,7 +169,7 @@ export default {
             this.editorView = args.view;
             this.range = args.range;
 
-            this.mentionSearchKey = args.text;
+            this.mentionSearchKey = args.text.replace('@', '');
 
             return false;
           },
@@ -206,7 +198,7 @@ export default {
             this.editorView = args.view;
             this.range = args.range;
 
-            this.cannedSearchTerm = args.text;
+            this.cannedSearchTerm = args.text.replace('/', '');
             return false;
           },
           onExit: () => {
@@ -234,7 +226,7 @@ export default {
             this.editorView = args.view;
             this.range = args.range;
 
-            this.variableSearchTerm = args.text;
+            this.variableSearchTerm = args.text.replace('{{', '');
             return false;
           },
           onExit: () => {
@@ -246,31 +238,6 @@ export default {
             return event.keyCode === 13 && this.showVariables;
           },
         }),
-        suggestionsPlugin({
-          matcher: triggerCharacters(':', 1), // Trigger after ':' and at least 1 characters
-          suggestionClass: '',
-          onEnter: args => {
-            this.showEmojiMenu = true;
-            this.emojiSearchTerm = args.text || '';
-            this.range = args.range;
-            this.editorView = args.view;
-            return false;
-          },
-          onChange: args => {
-            this.editorView = args.view;
-            this.range = args.range;
-            this.emojiSearchTerm = args.text;
-            return false;
-          },
-          onExit: () => {
-            this.emojiSearchTerm = '';
-            this.showEmojiMenu = false;
-            return false;
-          },
-          onKeyDown: ({ event }) => {
-            return event.keyCode === 13 && this.showEmojiMenu;
-          },
-        }),
       ];
     },
     sendWithSignature() {
@@ -300,8 +267,6 @@ export default {
     },
     editorId() {
       this.showCannedMenu = false;
-      this.showEmojiMenu = false;
-      this.showVariables = false;
       this.cannedSearchTerm = '';
       this.reloadState(this.value);
     },
@@ -552,36 +517,57 @@ export default {
       this.editorView.dispatch(tr.setSelection(selection));
       this.editorView.focus();
     },
-    /**
-     * Inserts special content (mention, canned response, variable, emoji) into the editor.
-     * @param {string} type - The type of special content to insert. Possible values: 'mention', 'canned_response', 'variable', 'emoji'.
-     * @param {Object|string} content - The content to insert, depending on the type.
-     */
-    insertSpecialContent(type, content) {
+    insertMentionNode(mentionItem) {
       if (!this.editorView) {
-        return;
+        return null;
+      }
+      const node = this.editorView.state.schema.nodes.mention.create({
+        userId: mentionItem.id,
+        userFullName: mentionItem.name,
+      });
+
+      this.insertNodeIntoEditor(node, this.range.from, this.range.to);
+      this.$track(CONVERSATION_EVENTS.USED_MENTIONS);
+
+      return false;
+    },
+    insertCannedResponse(cannedItem) {
+      const updatedMessage = replaceVariablesInMessage({
+        message: cannedItem,
+        variables: this.variables,
+      });
+
+      if (!this.editorView) {
+        return null;
       }
 
-      let { node, from, to } = getContentNode(
-        this.editorView,
-        type,
-        content,
-        this.range,
-        this.variables
+      let node = new MessageMarkdownTransformer(messageSchema).parse(
+        updatedMessage
       );
 
-      if (!node) return;
+      const from =
+        node.textContent === updatedMessage
+          ? this.range.from
+          : this.range.from - 1;
+
+      this.insertNodeIntoEditor(node, from, this.range.to);
+
+      this.$track(CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE);
+      return false;
+    },
+    insertVariable(variable) {
+      if (!this.editorView) {
+        return null;
+      }
+
+      const content = `{{${variable}}}`;
+      let node = this.editorView.state.schema.text(content);
+      const { from, to } = this.range;
 
       this.insertNodeIntoEditor(node, from, to);
-
-      const event_map = {
-        mention: CONVERSATION_EVENTS.USED_MENTIONS,
-        cannedResponse: CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE,
-        variable: CONVERSATION_EVENTS.INSERTED_A_VARIABLE,
-        emoji: CONVERSATION_EVENTS.INSERTED_AN_EMOJI,
-      };
-
-      this.$track(event_map[type]);
+      this.showVariables = false;
+      this.$track(CONVERSATION_EVENTS.INSERTED_A_VARIABLE);
+      return false;
     },
     openFileBrowser() {
       this.$refs.imageUpload.click();
@@ -701,22 +687,17 @@ export default {
     <TagAgents
       v-if="showUserMentions && isPrivate"
       :search-key="mentionSearchKey"
-      @click="content => insertSpecialContent('mention', content)"
+      @click="insertMentionNode"
     />
     <CannedResponse
       v-if="shouldShowCannedResponses"
       :search-key="cannedSearchTerm"
-      @click="content => insertSpecialContent('cannedResponse', content)"
+      @click="insertCannedResponse"
     />
     <VariableList
       v-if="shouldShowVariables"
       :search-key="variableSearchTerm"
-      @click="content => insertSpecialContent('variable', content)"
-    />
-    <KeyboardEmojiSelector
-      v-if="showEmojiMenu"
-      :search-key="emojiSearchTerm"
-      @click="emoji => insertSpecialContent('emoji', emoji)"
+      @click="insertVariable"
     />
     <input
       ref="imageUpload"

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -120,6 +120,7 @@ export default {
         if (fileUrl) {
           this.onImageUploadStart(fileUrl);
         }
+        useAlert(this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.SUCCESS'));
       } catch (error) {
         useAlert(this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.ERROR'));
       }
@@ -172,18 +173,6 @@ export default {
           blur: () => {
             this.onBlur();
           },
-          paste: (view, event) => {
-            const data = event.clipboardData.files;
-            if (data.length > 0) {
-              data.forEach(file => {
-                // Check if the file is an image
-                if (file.type.includes('image')) {
-                  this.uploadImageToStorage(file);
-                }
-              });
-              event.preventDefault();
-            }
-          },
         },
       });
     },

app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue

@@ -1,68 +0,0 @@
-<script setup>
-import { shallowRef, computed, onMounted } from 'vue';
-import emojis from 'shared/components/emoji/emojisGroup.json';
-import MentionBox from '../mentions/MentionBox.vue';
-
-const props = defineProps({
-  searchKey: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['click']);
-
-const allEmojis = shallowRef([]);
-
-const items = computed(() => {
-  if (!props.searchKey) return [];
-  const searchTerm = props.searchKey.toLowerCase();
-  return allEmojis.value.filter(emoji =>
-    emoji.searchString.includes(searchTerm)
-  );
-});
-
-function loadEmojis() {
-  allEmojis.value = emojis.flatMap(group =>
-    group.emojis.map(emoji => ({
-      ...emoji,
-      searchString: `${emoji.slug} ${emoji.name}`.toLowerCase(),
-    }))
-  );
-}
-
-function handleMentionClick(item = {}) {
-  emit('click', item.emoji);
-}
-
-onMounted(() => {
-  loadEmojis();
-});
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <MentionBox
-    v-if="items.length"
-    type="emoji"
-    :items="items"
-    @mentionSelect="handleMentionClick"
-  >
-    <template #default="{ item, selected }">
-      <span
-        class="max-w-full inline-flex items-center gap-0.5 min-w-0 mb-0 text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 truncate"
-      >
-        {{ item.emoji }}
-        <p
-          class="relative mb-0 truncate bottom-px"
-          :class="{
-            'text-woot-500 dark:text-woot-500': selected,
-            'font-normal': !selected,
-          }"
-        >
-          :{{ item.slug }}
-        </p>
-      </span>
-    </template>
-  </MentionBox>
-</template>

app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue

@@ -41,11 +41,14 @@ export default {
 };
 </script>
 
-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <MentionBox
     v-if="items.length"
     :items="items"
     @mentionSelect="handleMentionClick"
-  />
+  >
+    <template slot-scope="{ item }">
+      <strong>{{ item.label }}</strong> - {{ item.description }}
+    </template>
+  </MentionBox>
 </template>

app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue

@@ -5,7 +5,7 @@ import languages from './advancedFilterItems/languages';
 import countries from 'shared/constants/countries.js';
 import { mapGetters } from 'vuex';
 import { filterAttributeGroups } from './advancedFilterItems';
-import { useFilter } from 'shared/composables/useFilter';
+import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
@@ -14,6 +14,7 @@ export default {
   components: {
     FilterInputBox,
   },
+  mixins: [filterMixin],
   props: {
     onClose: {
       type: Function,
@@ -36,15 +37,6 @@ export default {
       default: false,
     },
   },
-  setup() {
-    const { setFilterAttributes } = useFilter({
-      filteri18nKey: 'FILTER',
-      attributeModel: 'conversation_attribute',
-    });
-    return {
-      setFilterAttributes,
-    };
-  },
   data() {
     return {
       show: true,
@@ -75,11 +67,7 @@ export default {
     },
   },
   mounted() {
-    const { filterGroups, filterTypes } = this.setFilterAttributes();
-
-    this.filterTypes = [...this.filterTypes, ...filterTypes];
-    this.filterGroups = filterGroups;
-
+    this.setFilterAttributes();
     this.$store.dispatch('campaigns/get');
     if (this.getAppliedConversationFilters.length) {
       this.appliedFilters = [];
@@ -338,11 +326,7 @@ export default {
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
           grouped-filters
-          :error-message="
-            validationErrors[`filter_${i}`]
-              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
-              : ''
-          "
+          :error-message="validationErrors[`filter_${i}`]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -1,5 +1,5 @@
 <script>
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import BubbleActions from './bubble/Actions.vue';
 import BubbleContact from './bubble/Contact.vue';
 import BubbleFile from './bubble/File.vue';
@@ -39,6 +39,7 @@ export default {
     InstagramStoryReply,
     Spinner,
   },
+  mixins: [messageFormatterMixin],
   props: {
     data: {
       type: Object,
@@ -73,12 +74,6 @@ export default {
       default: () => ({}),
     },
   },
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
   data() {
     return {
       showContextMenu: false,

app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue

@@ -1,10 +1,11 @@
 <script>
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { ATTACHMENT_ICONS } from 'shared/constants/messages';
 
 export default {
   name: 'MessagePreview',
+  mixins: [messageFormatterMixin],
   props: {
     message: {
       type: Object,
@@ -19,12 +20,6 @@ export default {
       default: '',
     },
   },
-  setup() {
-    const { getPlainText } = useMessageFormatter();
-    return {
-      getPlainText,
-    };
-  },
   computed: {
     messageByAgent() {
       const { message_type: messageType } = this.message;

app/javascript/dashboard/components/widgets/conversation/MoreActions.vue

@@ -7,7 +7,7 @@ import {
   CMD_MUTE_CONVERSATION,
   CMD_SEND_TRANSCRIPT,
   CMD_UNMUTE_CONVERSATION,
-} from 'dashboard/helper/commandbar/events';
+} from 'dashboard/helper/commandBar/events';
 
 export default {
   components: {

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -17,6 +17,7 @@ import Banner from 'dashboard/components/ui/Banner.vue';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import WootAudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder.vue';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { AUDIO_FORMATS } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
@@ -60,7 +61,12 @@ export default {
     MessageSignatureMissingAlert,
     ArticleSearchPopover,
   },
-  mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
+  mixins: [
+    inboxMixin,
+    messageFormatterMixin,
+    fileUploadMixin,
+    keyboardEventListenerMixins,
+  ],
   props: {
     popoutReplyBox: {
       type: Boolean,
@@ -237,9 +243,6 @@ export default {
       if (this.isASmsInbox) {
         return MESSAGE_MAX_LENGTH.TWILIO_SMS;
       }
-      if (this.isAnEmailChannel) {
-        return MESSAGE_MAX_LENGTH.EMAIL;
-      }
       return MESSAGE_MAX_LENGTH.GENERAL;
     },
     showFileUpload() {

app/javascript/dashboard/components/widgets/conversation/VariableList.vue

@@ -56,14 +56,20 @@ export default {
 };
 </script>
 
-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <MentionBox
     v-if="items.length"
     type="variable"
     :items="items"
     @mentionSelect="handleVariableClick"
-  />
+  >
+    <template slot-scope="{ item }">
+      <span class="text-capitalize variable--list-label">
+        {{ item.description }}
+      </span>
+      ({{ item.label }})
+    </template>
+  </MentionBox>
 </template>
 
 <style scoped>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -6,7 +6,7 @@ import {
   CMD_BULK_ACTION_SNOOZE_CONVERSATION,
   CMD_BULK_ACTION_REOPEN_CONVERSATION,
   CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-} from 'dashboard/helper/commandbar/events';
+} from 'dashboard/helper/commandBar/events';
 
 import AgentSelector from './AgentSelector.vue';
 import UpdateActions from './UpdateActions.vue';

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -48,7 +48,11 @@ const loadLinkedIssue = async () => {
     const issues = response.data;
     linkedIssue.value = issues && issues.length ? issues[0] : null;
   } catch (error) {
-    // We don't want to show an error message here, as it's not critical. When someone clicks on the Linear icon, we can inform them that the integration is disabled.
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.LOADING_ERROR')
+    );
+    useAlert(errorMessage);
   }
 };
 

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -90,24 +90,22 @@ const variableKey = (item = {}) => {
           }"
           @click="onListItemSelection(index)"
         >
-          <slot :item="item" :index="index" :selected="index === selectedIndex">
-            <p
-              class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
-              :class="{
-                'text-woot-500 dark:text-woot-500': index === selectedIndex,
-              }"
-            >
-              {{ item.description }}
-            </p>
-            <p
-              class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
-              :class="{
-                'text-woot-500 dark:text-woot-500': index === selectedIndex,
-              }"
-            >
-              {{ variableKey(item) }}
-            </p>
-          </slot>
+          <p
+            class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+            :class="{
+              'text-woot-500 dark:text-woot-500': index === selectedIndex,
+            }"
+          >
+            {{ item.description }}
+          </p>
+          <p
+            class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+            :class="{
+              'text-woot-500 dark:text-woot-500': index === selectedIndex,
+            }"
+          >
+            {{ variableKey(item) }}
+          </p>
         </button>
       </woot-dropdown-item>
     </ul>

app/javascript/dashboard/composables/commands/spec/useGoToCommandHotKeys.spec.js

@@ -1,188 +0,0 @@
-import { useGoToCommandHotKeys } from '../useGoToCommandHotKeys';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useI18n } from 'dashboard/composables/useI18n';
-import { useRouter } from 'dashboard/composables/route';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-import { MOCK_FEATURE_FLAGS } from './fixtures';
-
-vi.mock('dashboard/composables/store');
-vi.mock('dashboard/composables/useI18n');
-vi.mock('dashboard/composables/route');
-vi.mock('dashboard/composables/useAdmin');
-vi.mock('dashboard/helper/URLHelper');
-
-const mockRoutes = [
-  { path: 'accounts/:accountId/dashboard', name: 'dashboard' },
-  {
-    path: 'accounts/:accountId/contacts',
-    name: 'contacts',
-    featureFlag: MOCK_FEATURE_FLAGS.CRM,
-  },
-  {
-    path: 'accounts/:accountId/settings/agents/list',
-    name: 'agent_settings',
-    featureFlag: MOCK_FEATURE_FLAGS.AGENT_MANAGEMENT,
-  },
-  {
-    path: 'accounts/:accountId/settings/teams/list',
-    name: 'team_settings',
-    featureFlag: MOCK_FEATURE_FLAGS.TEAM_MANAGEMENT,
-  },
-  {
-    path: 'accounts/:accountId/settings/inboxes/list',
-    name: 'inbox_settings',
-    featureFlag: MOCK_FEATURE_FLAGS.INBOX_MANAGEMENT,
-  },
-  { path: 'accounts/:accountId/profile/settings', name: 'profile_settings' },
-  { path: 'accounts/:accountId/notifications', name: 'notifications' },
-  {
-    path: 'accounts/:accountId/reports/overview',
-    name: 'reports_overview',
-    featureFlag: MOCK_FEATURE_FLAGS.REPORTS,
-  },
-  {
-    path: 'accounts/:accountId/settings/labels/list',
-    name: 'label_settings',
-    featureFlag: MOCK_FEATURE_FLAGS.LABELS,
-  },
-  {
-    path: 'accounts/:accountId/settings/canned-response/list',
-    name: 'canned_responses',
-    featureFlag: MOCK_FEATURE_FLAGS.CANNED_RESPONSES,
-  },
-  {
-    path: 'accounts/:accountId/settings/applications',
-    name: 'applications',
-    featureFlag: MOCK_FEATURE_FLAGS.INTEGRATIONS,
-  },
-];
-
-describe('useGoToCommandHotKeys', () => {
-  let store;
-
-  beforeEach(() => {
-    store = {
-      getters: {
-        getCurrentAccountId: 1,
-        'accounts/isFeatureEnabledonAccount': vi.fn().mockReturnValue(true),
-      },
-    };
-
-    useStore.mockReturnValue(store);
-    useMapGetter.mockImplementation(key => ({
-      value: store.getters[key],
-    }));
-
-    useI18n.mockReturnValue({ t: vi.fn(key => key) });
-    useRouter.mockReturnValue({ push: vi.fn() });
-    useAdmin.mockReturnValue({ isAdmin: { value: true } });
-    frontendURL.mockImplementation(url => url);
-  });
-
-  it('should return goToCommandHotKeys computed property', () => {
-    const { goToCommandHotKeys } = useGoToCommandHotKeys();
-    expect(goToCommandHotKeys.value).toBeDefined();
-    expect(goToCommandHotKeys.value.length).toBeGreaterThan(0);
-  });
-
-  it('should filter commands based on feature flags', () => {
-    store.getters['accounts/isFeatureEnabledonAccount'] = vi.fn(
-      (accountId, flag) => flag !== MOCK_FEATURE_FLAGS.CRM
-    );
-    const { goToCommandHotKeys } = useGoToCommandHotKeys();
-
-    mockRoutes.forEach(route => {
-      const command = goToCommandHotKeys.value.find(cmd =>
-        cmd.id.includes(route.name)
-      );
-      if (route.featureFlag === MOCK_FEATURE_FLAGS.CRM) {
-        expect(command).toBeUndefined();
-      } else if (!route.featureFlag) {
-        expect(command).toBeDefined();
-      }
-    });
-  });
-
-  it('should filter commands for non-admin users', () => {
-    useAdmin.mockReturnValue({ isAdmin: { value: false } });
-    const { goToCommandHotKeys } = useGoToCommandHotKeys();
-
-    const adminOnlyCommands = goToCommandHotKeys.value.filter(
-      cmd =>
-        cmd.id.includes('agent_settings') ||
-        cmd.id.includes('team_settings') ||
-        cmd.id.includes('inbox_settings')
-    );
-    expect(adminOnlyCommands.length).toBe(0);
-  });
-
-  it('should include commands for both admin and agent roles when user is admin', () => {
-    const { goToCommandHotKeys } = useGoToCommandHotKeys();
-    const adminCommand = goToCommandHotKeys.value.find(cmd =>
-      cmd.id.includes('agent_settings')
-    );
-    const agentCommand = goToCommandHotKeys.value.find(cmd =>
-      cmd.id.includes('profile_settings')
-    );
-    expect(adminCommand).toBeDefined();
-    expect(agentCommand).toBeDefined();
-  });
-
-  it('should translate section and title for each command', () => {
-    const { goToCommandHotKeys } = useGoToCommandHotKeys();
-    goToCommandHotKeys.value.forEach(command => {
-      expect(useI18n().t).toHaveBeenCalledWith(
-        expect.stringContaining('COMMAND_BAR.SECTIONS.')
-      );
-      expect(useI18n().t).toHaveBeenCalledWith(
-        expect.stringContaining('COMMAND_BAR.COMMANDS.')
-      );
-      expect(command.section).toBeDefined();
-      expect(command.title).toBeDefined();
-    });
-  });
-
-  it('should call router.push with correct URL when handler is called', () => {
-    const { goToCommandHotKeys } = useGoToCommandHotKeys();
-    goToCommandHotKeys.value.forEach(command => {
-      command.handler();
-      expect(useRouter().push).toHaveBeenCalledWith(expect.any(String));
-    });
-  });
-
-  it('should use current account ID in the path', () => {
-    store.getters.getCurrentAccountId = 42;
-    const { goToCommandHotKeys } = useGoToCommandHotKeys();
-    goToCommandHotKeys.value.forEach(command => {
-      command.handler();
-      expect(useRouter().push).toHaveBeenCalledWith(
-        expect.stringContaining('42')
-      );
-    });
-  });
-
-  it('should include icon for each command', () => {
-    const { goToCommandHotKeys } = useGoToCommandHotKeys();
-    goToCommandHotKeys.value.forEach(command => {
-      expect(command.icon).toBeDefined();
-    });
-  });
-
-  it('should return commands for all enabled features', () => {
-    const { goToCommandHotKeys } = useGoToCommandHotKeys();
-    const enabledFeatureCommands = goToCommandHotKeys.value.filter(cmd =>
-      mockRoutes.some(route => route.featureFlag && cmd.id.includes(route.name))
-    );
-    expect(enabledFeatureCommands.length).toBeGreaterThan(0);
-  });
-
-  it('should not return commands for disabled features', () => {
-    store.getters['accounts/isFeatureEnabledonAccount'] = vi.fn(() => false);
-    const { goToCommandHotKeys } = useGoToCommandHotKeys();
-    const disabledFeatureCommands = goToCommandHotKeys.value.filter(cmd =>
-      mockRoutes.some(route => route.featureFlag && cmd.id.includes(route.name))
-    );
-    expect(disabledFeatureCommands.length).toBe(0);
-  });
-});

app/javascript/dashboard/composables/commands/spec/useInboxHotKeys.spec.js

@@ -1,37 +0,0 @@
-import { useInboxHotKeys } from '../useInboxHotKeys';
-import { useI18n } from 'dashboard/composables/useI18n';
-import { useRoute } from 'dashboard/composables/route';
-import { isAInboxViewRoute } from 'dashboard/helper/routeHelpers';
-
-vi.mock('dashboard/composables/useI18n');
-vi.mock('dashboard/composables/route');
-vi.mock('dashboard/helper/routeHelpers');
-vi.mock('shared/helpers/mitt');
-
-describe('useInboxHotKeys', () => {
-  beforeEach(() => {
-    useI18n.mockReturnValue({ t: vi.fn(key => key) });
-    useRoute.mockReturnValue({ name: 'inbox_dashboard' });
-    isAInboxViewRoute.mockReturnValue(true);
-  });
-
-  it('should return inbox hot keys when on an inbox view route', () => {
-    const { inboxHotKeys } = useInboxHotKeys();
-    expect(inboxHotKeys.value.length).toBeGreaterThan(0);
-    expect(inboxHotKeys.value[0].id).toBe('snooze_notification');
-  });
-
-  it('should return an empty array when not on an inbox view route', () => {
-    isAInboxViewRoute.mockReturnValue(false);
-    const { inboxHotKeys } = useInboxHotKeys();
-    expect(inboxHotKeys.value).toEqual([]);
-  });
-
-  it('should have the correct structure for snooze actions', () => {
-    const { inboxHotKeys } = useInboxHotKeys();
-    const snoozeNotificationAction = inboxHotKeys.value.find(
-      action => action.id === 'snooze_notification'
-    );
-    expect(snoozeNotificationAction).toBeDefined();
-  });
-});

app/javascript/dashboard/composables/commands/specs/fixtures.js

@@ -184,14 +184,3 @@ export const mockInactiveLabels = [
     show_on_sidebar: true,
   },
 ];
-
-export const MOCK_FEATURE_FLAGS = {
-  CRM: 'crm',
-  AGENT_MANAGEMENT: 'agent_management',
-  TEAM_MANAGEMENT: 'team_management',
-  INBOX_MANAGEMENT: 'inbox_management',
-  REPORTS: 'reports',
-  LABELS: 'labels',
-  CANNED_RESPONSES: 'canned_responses',
-  INTEGRATIONS: 'integrations',
-};

app/javascript/dashboard/composables/commands/specs/useBulkActionsHotKeys.spec.js

@@ -27,6 +27,14 @@ describe('useBulkActionsHotKeys', () => {
     emitter.emit = vi.fn();
   });
 
+  it('should return the correct computed properties', () => {
+    const { selectedConversations, bulkActionsHotKeys } =
+      useBulkActionsHotKeys();
+
+    expect(selectedConversations.value).toEqual([]);
+    expect(bulkActionsHotKeys.value).toEqual([]);
+  });
+
   it('should return bulk actions when conversations are selected', () => {
     store.getters['bulkActions/getSelectedConversationIds'] = [1, 2, 3];
     const { bulkActionsHotKeys } = useBulkActionsHotKeys();

app/javascript/dashboard/composables/commands/specs/useConversationHotKeys.spec.js

@@ -57,8 +57,24 @@ describe('useConversationHotKeys', () => {
   });
 
   it('should return the correct computed properties', () => {
-    const { conversationHotKeys } = useConversationHotKeys();
+    const {
+      assignableAgents,
+      currentChat,
+      teamsList,
+      activeLabels,
+      draftMessage,
+      replyMode,
+      contextMenuChatId,
+      conversationHotKeys,
+    } = useConversationHotKeys();
 
+    expect(assignableAgents.value).toEqual(mockAssignableAgents);
+    expect(currentChat.value).toEqual(mockCurrentChat);
+    expect(teamsList.value).toEqual(mockTeamsList);
+    expect(activeLabels.value).toEqual(mockActiveLabels);
+    expect(draftMessage.value).toBeUndefined();
+    expect(replyMode.value).toBe(REPLY_EDITOR_MODES.REPLY);
+    expect(contextMenuChatId.value).toBeNull();
     expect(conversationHotKeys.value).toBeDefined();
   });
 

app/javascript/dashboard/composables/commands/useAppearanceHotKeys.js

@@ -5,7 +5,7 @@ import {
   ICON_LIGHT_MODE,
   ICON_DARK_MODE,
   ICON_SYSTEM_MODE,
-} from 'dashboard/helper/commandbar/icons';
+} from 'dashboard/helper/commandBar/icons';
 import { LocalStorage } from 'shared/helpers/localStorage';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { setColorTheme } from 'dashboard/helper/themeHelper.js';

app/javascript/dashboard/composables/commands/useBulkActionsHotKeys.js

@@ -7,15 +7,15 @@ import {
   CMD_BULK_ACTION_SNOOZE_CONVERSATION,
   CMD_BULK_ACTION_REOPEN_CONVERSATION,
   CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-} from 'dashboard/helper/commandbar/events';
+} from 'dashboard/helper/commandBar/events';
 import {
   ICON_SNOOZE_CONVERSATION,
   ICON_REOPEN_CONVERSATION,
   ICON_RESOLVE_CONVERSATION,
-} from 'dashboard/helper/commandbar/icons';
+} from 'dashboard/helper/commandBar/icons';
 import { emitter } from 'shared/helpers/mitt';
 
-import { createSnoozeHandlers } from 'dashboard/helper/commandbar/actions';
+import { createSnoozeHandlers } from 'dashboard/helper/commandBar/actions';
 
 const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
 
@@ -84,6 +84,7 @@ export function useBulkActionsHotKeys() {
   });
 
   return {
+    selectedConversations,
     bulkActionsHotKeys,
   };
 }

app/javascript/dashboard/composables/commands/useConversationHotKeys.js

@@ -6,7 +6,7 @@ import { emitter } from 'shared/helpers/mitt';
 import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
 import { useAI } from 'dashboard/composables/useAI';
 import { useAgentsList } from 'dashboard/composables/useAgentsList';
-import { CMD_AI_ASSIST } from 'dashboard/helper/commandbar/events';
+import { CMD_AI_ASSIST } from 'dashboard/helper/commandBar/events';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 
 import wootConstants from 'dashboard/constants/globals';
@@ -27,7 +27,7 @@ import {
   ICON_AI_SHORTEN,
   ICON_AI_EXPAND,
   ICON_AI_GRAMMAR,
-} from 'dashboard/helper/commandbar/icons';
+} from 'dashboard/helper/commandBar/icons';
 
 import {
   OPEN_CONVERSATION_ACTIONS,
@@ -36,7 +36,7 @@ import {
   SEND_TRANSCRIPT_ACTION,
   UNMUTE_ACTION,
   MUTE_ACTION,
-} from 'dashboard/helper/commandbar/actions';
+} from 'dashboard/helper/commandBar/actions';
 import {
   isAConversationRoute,
   isAInboxViewRoute,
@@ -152,7 +152,7 @@ export function useConversationHotKeys() {
   } = useConversationLabels();
 
   const { isAIIntegrationEnabled } = useAI();
-  const { agentsList } = useAgentsList();
+  const { agentsList, assignableAgents } = useAgentsList();
 
   const currentChat = useMapGetter('getSelectedChat');
   const replyMode = useMapGetter('draftMessages/getReplyEditorMode');
@@ -403,6 +403,13 @@ export function useConversationHotKeys() {
   });
 
   return {
+    assignableAgents,
+    currentChat,
+    teamsList,
+    activeLabels,
+    draftMessage,
+    replyMode,
+    contextMenuChatId,
     conversationHotKeys,
   };
 }

app/javascript/dashboard/composables/commands/useGoToCommandHotKeys.js

@@ -19,7 +19,7 @@ import {
   ICON_TEAM_REPORTS,
   ICON_USER_PROFILE,
   ICON_CONVERSATION_REPORTS,
-} from 'dashboard/helper/commandbar/icons';
+} from 'dashboard/helper/commandBar/icons';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 

app/javascript/dashboard/composables/commands/useInboxHotKeys.js

@@ -3,8 +3,8 @@ import { useI18n } from 'dashboard/composables/useI18n';
 import { useRoute } from 'dashboard/composables/route';
 import wootConstants from 'dashboard/constants/globals';
 
-import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandbar/events';
-import { ICON_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandbar/icons';
+import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandBar/events';
+import { ICON_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandBar/icons';
 import { emitter } from 'shared/helpers/mitt';
 
 import { isAInboxViewRoute } from 'dashboard/helper/routeHelpers';

app/javascript/dashboard/composables/spec/fixtures/reportFixtures.js

@@ -1,37 +0,0 @@
-export const summary = {
-  avg_first_response_time: '198.6666666666667',
-  avg_resolution_time: '208.3333333333333',
-  conversations_count: 5000,
-  incoming_messages_count: 5,
-  outgoing_messages_count: 3,
-  previous: {
-    avg_first_response_time: '89.0',
-    avg_resolution_time: '145.0',
-    conversations_count: 4,
-    incoming_messages_count: 5,
-    outgoing_messages_count: 4,
-    resolutions_count: 0,
-  },
-  resolutions_count: 3,
-};
-
-export const botSummary = {
-  bot_resolutions_count: 10,
-  bot_handoffs_count: 20,
-  previous: {
-    bot_resolutions_count: 8,
-    bot_handoffs_count: 5,
-  },
-};
-
-export const report = {
-  data: [
-    { value: '0.00', timestamp: 1647541800, count: 0 },
-    { value: '0.00', timestamp: 1647628200, count: 0 },
-    { value: '0.00', timestamp: 1647714600, count: 0 },
-    { value: '0.00', timestamp: 1647801000, count: 0 },
-    { value: '0.01', timestamp: 1647887400, count: 4 },
-    { value: '0.00', timestamp: 1647973800, count: 0 },
-    { value: '0.00', timestamp: 1648060200, count: 0 },
-  ],
-};

app/javascript/dashboard/composables/spec/useAutomation.spec.js

@@ -1,295 +0,0 @@
-import { useAutomation } from '../useAutomation';
-import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from '../useI18n';
-import * as automationHelper from 'dashboard/helper/automationHelper';
-import {
-  customAttributes,
-  agents,
-  teams,
-  labels,
-  statusFilterOptions,
-  campaigns,
-  contacts,
-  inboxes,
-  languages,
-  countries,
-  slaPolicies,
-} from 'dashboard/helper/specs/fixtures/automationFixtures.js';
-import { MESSAGE_CONDITION_VALUES } from 'dashboard/constants/automation';
-
-vi.mock('dashboard/composables/store');
-vi.mock('dashboard/composables');
-vi.mock('../useI18n');
-vi.mock('dashboard/helper/automationHelper');
-
-describe('useAutomation', () => {
-  beforeEach(() => {
-    useStoreGetters.mockReturnValue({
-      'attributes/getAttributes': { value: customAttributes },
-      'attributes/getAttributesByModel': {
-        value: model => {
-          return model === 'conversation_attribute'
-            ? [{ id: 1, name: 'Conversation Attribute' }]
-            : [{ id: 2, name: 'Contact Attribute' }];
-        },
-      },
-    });
-    useMapGetter.mockImplementation(getter => {
-      const getterMap = {
-        'agents/getAgents': agents,
-        'campaigns/getAllCampaigns': campaigns,
-        'contacts/getContacts': contacts,
-        'inboxes/getInboxes': inboxes,
-        'labels/getLabels': labels,
-        'teams/getTeams': teams,
-        'sla/getSLA': slaPolicies,
-      };
-      return { value: getterMap[getter] };
-    });
-    useI18n.mockReturnValue({ t: key => key });
-    useAlert.mockReturnValue(vi.fn());
-
-    // Mock getConditionOptions for different types
-    automationHelper.getConditionOptions.mockImplementation(options => {
-      const { type } = options;
-      switch (type) {
-        case 'status':
-          return statusFilterOptions;
-        case 'team_id':
-          return teams;
-        case 'assignee_id':
-          return agents;
-        case 'contact':
-          return contacts;
-        case 'inbox_id':
-          return inboxes;
-        case 'campaigns':
-          return campaigns;
-        case 'browser_language':
-          return languages;
-        case 'country_code':
-          return countries;
-        case 'message_type':
-          return MESSAGE_CONDITION_VALUES;
-        default:
-          return [];
-      }
-    });
-
-    // Mock getActionOptions for different types
-    automationHelper.getActionOptions.mockImplementation(options => {
-      const { type } = options;
-      switch (type) {
-        case 'add_label':
-          return labels;
-        case 'assign_team':
-          return teams;
-        case 'assign_agent':
-          return agents;
-        case 'send_email_to_team':
-          return teams;
-        case 'send_message':
-          return [];
-        case 'add_sla':
-          return slaPolicies;
-        default:
-          return [];
-      }
-    });
-  });
-
-  it('initializes computed properties correctly', () => {
-    const {
-      agents: computedAgents,
-      campaigns: computedCampaigns,
-      contacts: computedContacts,
-      inboxes: computedInboxes,
-      labels: computedLabels,
-      teams: computedTeams,
-      slaPolicies: computedSlaPolicies,
-    } = useAutomation();
-
-    expect(computedAgents.value).toEqual(agents);
-    expect(computedCampaigns.value).toEqual(campaigns);
-    expect(computedContacts.value).toEqual(contacts);
-    expect(computedInboxes.value).toEqual(inboxes);
-    expect(computedLabels.value).toEqual(labels);
-    expect(computedTeams.value).toEqual(teams);
-    expect(computedSlaPolicies.value).toEqual(slaPolicies);
-  });
-
-  it('appends new condition and action correctly', () => {
-    const { appendNewCondition, appendNewAction } = useAutomation();
-    const mockAutomation = {
-      event_name: 'message_created',
-      conditions: [],
-      actions: [],
-    };
-
-    automationHelper.getDefaultConditions.mockReturnValue([{}]);
-    automationHelper.getDefaultActions.mockReturnValue([{}]);
-
-    appendNewCondition(mockAutomation);
-    appendNewAction(mockAutomation);
-
-    expect(automationHelper.getDefaultConditions).toHaveBeenCalledWith(
-      'message_created'
-    );
-    expect(automationHelper.getDefaultActions).toHaveBeenCalled();
-    expect(mockAutomation.conditions).toHaveLength(1);
-    expect(mockAutomation.actions).toHaveLength(1);
-  });
-
-  it('removes filter and action correctly', () => {
-    const { removeFilter, removeAction } = useAutomation();
-    const mockAutomation = {
-      conditions: [{ id: 1 }, { id: 2 }],
-      actions: [{ id: 1 }, { id: 2 }],
-    };
-
-    removeFilter(mockAutomation, 0);
-    removeAction(mockAutomation, 0);
-
-    expect(mockAutomation.conditions).toHaveLength(1);
-    expect(mockAutomation.actions).toHaveLength(1);
-    expect(mockAutomation.conditions[0].id).toBe(2);
-    expect(mockAutomation.actions[0].id).toBe(2);
-  });
-
-  it('resets filter and action correctly', () => {
-    const { resetFilter, resetAction } = useAutomation();
-    const mockAutomation = {
-      event_name: 'message_created',
-      conditions: [
-        {
-          attribute_key: 'status',
-          filter_operator: 'equal_to',
-          values: 'open',
-        },
-      ],
-      actions: [{ action_name: 'assign_agent', action_params: [1] }],
-    };
-    const mockAutomationTypes = {
-      message_created: {
-        conditions: [
-          { key: 'status', filterOperators: [{ value: 'not_equal_to' }] },
-        ],
-      },
-    };
-
-    resetFilter(
-      mockAutomation,
-      mockAutomationTypes,
-      0,
-      mockAutomation.conditions[0]
-    );
-    resetAction(mockAutomation, 0);
-
-    expect(mockAutomation.conditions[0].filter_operator).toBe('not_equal_to');
-    expect(mockAutomation.conditions[0].values).toBe('');
-    expect(mockAutomation.actions[0].action_params).toEqual([]);
-  });
-
-  it('formats automation correctly', () => {
-    const { formatAutomation } = useAutomation();
-    const mockAutomation = {
-      conditions: [{ attribute_key: 'status', values: ['open'] }],
-      actions: [{ action_name: 'assign_agent', action_params: [1] }],
-    };
-    const mockAutomationTypes = {};
-    const mockAutomationActionTypes = [
-      { key: 'assign_agent', inputType: 'search_select' },
-    ];
-
-    automationHelper.getConditionOptions.mockReturnValue([
-      { id: 'open', name: 'open' },
-    ]);
-    automationHelper.getActionOptions.mockReturnValue([
-      { id: 1, name: 'Agent 1' },
-    ]);
-
-    const result = formatAutomation(
-      mockAutomation,
-      customAttributes,
-      mockAutomationTypes,
-      mockAutomationActionTypes
-    );
-
-    expect(result.conditions[0].values).toEqual([{ id: 'open', name: 'open' }]);
-    expect(result.actions[0].action_params).toEqual([
-      { id: 1, name: 'Agent 1' },
-    ]);
-  });
-
-  it('manifests custom attributes correctly', () => {
-    const { manifestCustomAttributes } = useAutomation();
-    const mockAutomationTypes = {
-      message_created: { conditions: [] },
-      conversation_created: { conditions: [] },
-      conversation_updated: { conditions: [] },
-      conversation_opened: { conditions: [] },
-    };
-
-    automationHelper.generateCustomAttributeTypes.mockReturnValue([]);
-    automationHelper.generateCustomAttributes.mockReturnValue([]);
-
-    manifestCustomAttributes(mockAutomationTypes);
-
-    expect(automationHelper.generateCustomAttributeTypes).toHaveBeenCalledTimes(
-      2
-    );
-    expect(automationHelper.generateCustomAttributes).toHaveBeenCalledTimes(1);
-    Object.values(mockAutomationTypes).forEach(type => {
-      expect(type.conditions).toHaveLength(0);
-    });
-  });
-
-  it('gets condition dropdown values correctly', () => {
-    const { getConditionDropdownValues } = useAutomation();
-
-    expect(getConditionDropdownValues('status')).toEqual(statusFilterOptions);
-    expect(getConditionDropdownValues('team_id')).toEqual(teams);
-    expect(getConditionDropdownValues('assignee_id')).toEqual(agents);
-    expect(getConditionDropdownValues('contact')).toEqual(contacts);
-    expect(getConditionDropdownValues('inbox_id')).toEqual(inboxes);
-    expect(getConditionDropdownValues('campaigns')).toEqual(campaigns);
-    expect(getConditionDropdownValues('browser_language')).toEqual(languages);
-    expect(getConditionDropdownValues('country_code')).toEqual(countries);
-    expect(getConditionDropdownValues('message_type')).toEqual(
-      MESSAGE_CONDITION_VALUES
-    );
-  });
-
-  it('gets action dropdown values correctly', () => {
-    const { getActionDropdownValues } = useAutomation();
-
-    expect(getActionDropdownValues('add_label')).toEqual(labels);
-    expect(getActionDropdownValues('assign_team')).toEqual(teams);
-    expect(getActionDropdownValues('assign_agent')).toEqual(agents);
-    expect(getActionDropdownValues('send_email_to_team')).toEqual(teams);
-    expect(getActionDropdownValues('send_message')).toEqual([]);
-    expect(getActionDropdownValues('add_sla')).toEqual(slaPolicies);
-  });
-
-  it('handles event change correctly', () => {
-    const { onEventChange } = useAutomation();
-    const mockAutomation = {
-      event_name: 'message_created',
-      conditions: [],
-      actions: [],
-    };
-
-    automationHelper.getDefaultConditions.mockReturnValue([{}]);
-    automationHelper.getDefaultActions.mockReturnValue([{}]);
-
-    onEventChange(mockAutomation);
-
-    expect(automationHelper.getDefaultConditions).toHaveBeenCalledWith(
-      'message_created'
-    );
-    expect(automationHelper.getDefaultActions).toHaveBeenCalled();
-    expect(mockAutomation.conditions).toHaveLength(1);
-    expect(mockAutomation.actions).toHaveLength(1);
-  });
-});

app/javascript/dashboard/composables/spec/useMacros.spec.js

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { useMacros } from '../useMacros';
 import { useStoreGetters } from 'dashboard/composables/store';
-import { PRIORITY_CONDITION_VALUES } from 'dashboard/constants/automation';
+import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
 
 vi.mock('dashboard/composables/store');
 vi.mock('dashboard/helper/automationHelper.js');

app/javascript/dashboard/composables/spec/useReportMetrics.spec.js

@@ -1,61 +0,0 @@
-import { ref } from 'vue';
-import { useReportMetrics } from '../useReportMetrics';
-import { useMapGetter } from 'dashboard/composables/store';
-import { summary, botSummary } from './fixtures/reportFixtures';
-
-vi.mock('dashboard/composables/store');
-vi.mock('@chatwoot/utils', () => ({
-  formatTime: vi.fn(time => `formatted_${time}`),
-}));
-
-describe('useReportMetrics', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    useMapGetter.mockReturnValue(ref(summary));
-  });
-
-  it('calculates trend correctly', () => {
-    const { calculateTrend } = useReportMetrics();
-
-    expect(calculateTrend('conversations_count')).toBe(124900);
-    expect(calculateTrend('incoming_messages_count')).toBe(0);
-    expect(calculateTrend('avg_first_response_time')).toBe(123);
-  });
-
-  it('returns 0 for trend when previous value is not available', () => {
-    const { calculateTrend } = useReportMetrics();
-
-    expect(calculateTrend('non_existent_key')).toBe(0);
-  });
-
-  it('identifies average metric types correctly', () => {
-    const { isAverageMetricType } = useReportMetrics();
-
-    expect(isAverageMetricType('avg_first_response_time')).toBe(true);
-    expect(isAverageMetricType('avg_resolution_time')).toBe(true);
-    expect(isAverageMetricType('reply_time')).toBe(true);
-    expect(isAverageMetricType('conversations_count')).toBe(false);
-  });
-
-  it('displays metrics correctly for account', () => {
-    const { displayMetric } = useReportMetrics();
-
-    expect(displayMetric('conversations_count')).toBe('5,000');
-    expect(displayMetric('incoming_messages_count')).toBe('5');
-  });
-
-  it('displays the metric for bot', () => {
-    const customKey = 'getBotSummary';
-    useMapGetter.mockReturnValue(ref(botSummary));
-    const { displayMetric } = useReportMetrics(customKey);
-
-    expect(displayMetric('bot_resolutions_count')).toBe('10');
-    expect(displayMetric('bot_handoffs_count')).toBe('20');
-  });
-
-  it('handles non-existent metrics', () => {
-    const { displayMetric } = useReportMetrics();
-
-    expect(displayMetric('non_existent_key')).toBe('0');
-  });
-});

app/javascript/dashboard/composables/useAutomation.js

@@ -1,349 +0,0 @@
-import { computed } from 'vue';
-import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from './useI18n';
-import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
-import countries from 'shared/constants/countries';
-import {
-  generateCustomAttributeTypes,
-  getActionOptions,
-  getConditionOptions,
-  getCustomAttributeInputType,
-  getDefaultConditions,
-  getDefaultActions,
-  filterCustomAttributes,
-  getStandardAttributeInputType,
-  isCustomAttribute,
-  generateCustomAttributes,
-} from 'dashboard/helper/automationHelper';
-
-/**
- * Composable for handling automation-related functionality.
- * @returns {Object} An object containing various automation-related functions and computed properties.
- */
-export function useAutomation() {
-  const getters = useStoreGetters();
-  const { t } = useI18n();
-
-  const agents = useMapGetter('agents/getAgents');
-  const campaigns = useMapGetter('campaigns/getAllCampaigns');
-  const contacts = useMapGetter('contacts/getContacts');
-  const inboxes = useMapGetter('inboxes/getInboxes');
-  const labels = useMapGetter('labels/getLabels');
-  const teams = useMapGetter('teams/getTeams');
-  const slaPolicies = useMapGetter('sla/getSLA');
-
-  const booleanFilterOptions = computed(() => [
-    { id: true, name: t('FILTER.ATTRIBUTE_LABELS.TRUE') },
-    { id: false, name: t('FILTER.ATTRIBUTE_LABELS.FALSE') },
-  ]);
-
-  const statusFilterOptions = computed(() => {
-    const statusFilters = t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
-    return [
-      ...Object.keys(statusFilters).map(status => ({
-        id: status,
-        name: statusFilters[status].TEXT,
-      })),
-      { id: 'all', name: t('CHAT_LIST.FILTER_ALL') },
-    ];
-  });
-
-  /**
-   * Handles the event change for an automation.
-   * @param {Object} automation - The automation object to update.
-   */
-  const onEventChange = automation => {
-    automation.conditions = getDefaultConditions(automation.event_name);
-    automation.actions = getDefaultActions();
-  };
-
-  /**
-   * Gets the condition dropdown values for a given type.
-   * @param {string} type - The type of condition.
-   * @returns {Array} An array of condition dropdown values.
-   */
-  const getConditionDropdownValues = type => {
-    return getConditionOptions({
-      agents: agents.value,
-      booleanFilterOptions: booleanFilterOptions.value,
-      campaigns: campaigns.value,
-      contacts: contacts.value,
-      customAttributes: getters['attributes/getAttributes'].value,
-      inboxes: inboxes.value,
-      statusFilterOptions: statusFilterOptions.value,
-      teams: teams.value,
-      languages,
-      countries,
-      type,
-    });
-  };
-
-  /**
-   * Appends a new condition to the automation.
-   * @param {Object} automation - The automation object to update.
-   */
-  const appendNewCondition = automation => {
-    automation.conditions.push(...getDefaultConditions(automation.event_name));
-  };
-
-  /**
-   * Appends a new action to the automation.
-   * @param {Object} automation - The automation object to update.
-   */
-  const appendNewAction = automation => {
-    automation.actions.push(...getDefaultActions());
-  };
-
-  /**
-   * Removes a filter from the automation.
-   * @param {Object} automation - The automation object to update.
-   * @param {number} index - The index of the filter to remove.
-   */
-  const removeFilter = (automation, index) => {
-    if (automation.conditions.length <= 1) {
-      useAlert(t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
-    } else {
-      automation.conditions.splice(index, 1);
-    }
-  };
-
-  /**
-   * Removes an action from the automation.
-   * @param {Object} automation - The automation object to update.
-   * @param {number} index - The index of the action to remove.
-   */
-  const removeAction = (automation, index) => {
-    if (automation.actions.length <= 1) {
-      useAlert(t('AUTOMATION.ACTION.DELETE_MESSAGE'));
-    } else {
-      automation.actions.splice(index, 1);
-    }
-  };
-
-  /**
-   * Resets a filter in the automation.
-   * @param {Object} automation - The automation object to update.
-   * @param {Object} automationTypes - The automation types object.
-   * @param {number} index - The index of the filter to reset.
-   * @param {Object} currentCondition - The current condition object.
-   */
-  const resetFilter = (
-    automation,
-    automationTypes,
-    index,
-    currentCondition
-  ) => {
-    automation.conditions[index].filter_operator = automationTypes[
-      automation.event_name
-    ].conditions.find(
-      condition => condition.key === currentCondition.attribute_key
-    ).filterOperators[0].value;
-    automation.conditions[index].values = '';
-  };
-
-  /**
-   * Resets an action in the automation.
-   * @param {Object} automation - The automation object to update.
-   * @param {number} index - The index of the action to reset.
-   */
-  const resetAction = (automation, index) => {
-    automation.actions[index].action_params = [];
-  };
-
-  /**
-   * This function sets the conditions for automation.
-   * It help to format the conditions for the automation when we open the edit automation modal.
-   * @param {Object} automation - The automation object containing conditions to manifest.
-   * @param {Array} allCustomAttributes - List of all custom attributes.
-   * @param {Object} automationTypes - Object containing automation type definitions.
-   * @returns {Array} An array of manifested conditions.
-   */
-  const manifestConditions = (
-    automation,
-    allCustomAttributes,
-    automationTypes
-  ) => {
-    const customAttributes = filterCustomAttributes(allCustomAttributes);
-    return automation.conditions.map(condition => {
-      const customAttr = isCustomAttribute(
-        customAttributes,
-        condition.attribute_key
-      );
-      let inputType = 'plain_text';
-      if (customAttr) {
-        inputType = getCustomAttributeInputType(customAttr.type);
-      } else {
-        inputType = getStandardAttributeInputType(
-          automationTypes,
-          automation.event_name,
-          condition.attribute_key
-        );
-      }
-      if (inputType === 'plain_text' || inputType === 'date') {
-        return { ...condition, values: condition.values[0] };
-      }
-      if (inputType === 'comma_separated_plain_text') {
-        return { ...condition, values: condition.values.join(',') };
-      }
-      return {
-        ...condition,
-        query_operator: condition.query_operator || 'and',
-        values: [...getConditionDropdownValues(condition.attribute_key)].filter(
-          item => [...condition.values].includes(item.id)
-        ),
-      };
-    });
-  };
-
-  /**
-   * Gets the action dropdown values for a given type.
-   * @param {string} type - The type of action.
-   * @returns {Array} An array of action dropdown values.
-   */
-  const getActionDropdownValues = type => {
-    return getActionOptions({
-      agents: agents.value,
-      labels: labels.value,
-      teams: teams.value,
-      slaPolicies: slaPolicies.value,
-      languages,
-      type,
-    });
-  };
-
-  /**
-   * Generates an array of actions for the automation.
-   * @param {Object} action - The action object.
-   * @param {Array} automationActionTypes - List of available automation action types.
-   * @returns {Array|Object} Generated actions array or object based on input type.
-   */
-  const generateActionsArray = (action, automationActionTypes) => {
-    const params = action.action_params;
-    const inputType = automationActionTypes.find(
-      item => item.key === action.action_name
-    ).inputType;
-    if (inputType === 'multi_select' || inputType === 'search_select') {
-      return [...getActionDropdownValues(action.action_name)].filter(item =>
-        [...params].includes(item.id)
-      );
-    }
-    if (inputType === 'team_message') {
-      return {
-        team_ids: [...getActionDropdownValues(action.action_name)].filter(
-          item => [...params[0].team_ids].includes(item.id)
-        ),
-        message: params[0].message,
-      };
-    }
-    return [...params];
-  };
-
-  /**
-   * This function sets the actions for automation.
-   * It help to format the actions for the automation when we open the edit automation modal.
-   * @param {Object} automation - The automation object containing actions.
-   * @param {Array} automationActionTypes - List of available automation action types.
-   * @returns {Array} An array of manifested actions.
-   */
-  const manifestActions = (automation, automationActionTypes) => {
-    return automation.actions.map(action => ({
-      ...action,
-      action_params: action.action_params.length
-        ? generateActionsArray(action, automationActionTypes)
-        : [],
-    }));
-  };
-
-  /**
-   * Formats the automation object for use when we edit the automation.
-   * It help to format the conditions and actions for the automation when we open the edit automation modal.
-   * @param {Object} automation - The automation object to format.
-   * @param {Array} allCustomAttributes - List of all custom attributes.
-   * @param {Object} automationTypes - Object containing automation type definitions.
-   * @param {Array} automationActionTypes - List of available automation action types.
-   * @returns {Object} A new object with formatted automation data, including automation conditions and actions.
-   */
-  const formatAutomation = (
-    automation,
-    allCustomAttributes,
-    automationTypes,
-    automationActionTypes
-  ) => {
-    return {
-      ...automation,
-      conditions: manifestConditions(
-        automation,
-        allCustomAttributes,
-        automationTypes
-      ),
-      actions: manifestActions(automation, automationActionTypes),
-    };
-  };
-
-  /**
-   * This function formats the custom attributes for automation types.
-   * It retrieves custom attributes for conversations and contacts,
-   * generates custom attribute types, and adds them to the relevant automation types.
-   * @param {Object} automationTypes - The automation types object to update with custom attributes.
-   */
-  const manifestCustomAttributes = automationTypes => {
-    const conversationCustomAttributesRaw = getters[
-      'attributes/getAttributesByModel'
-    ].value('conversation_attribute');
-    const contactCustomAttributesRaw =
-      getters['attributes/getAttributesByModel'].value('contact_attribute');
-
-    const conversationCustomAttributeTypes = generateCustomAttributeTypes(
-      conversationCustomAttributesRaw,
-      'conversation_attribute'
-    );
-    const contactCustomAttributeTypes = generateCustomAttributeTypes(
-      contactCustomAttributesRaw,
-      'contact_attribute'
-    );
-
-    const manifestedCustomAttributes = generateCustomAttributes(
-      conversationCustomAttributeTypes,
-      contactCustomAttributeTypes,
-      t('AUTOMATION.CONDITION.CONVERSATION_CUSTOM_ATTR_LABEL'),
-      t('AUTOMATION.CONDITION.CONTACT_CUSTOM_ATTR_LABEL')
-    );
-
-    automationTypes.message_created.conditions.push(
-      ...manifestedCustomAttributes
-    );
-    automationTypes.conversation_created.conditions.push(
-      ...manifestedCustomAttributes
-    );
-    automationTypes.conversation_updated.conditions.push(
-      ...manifestedCustomAttributes
-    );
-    automationTypes.conversation_opened.conditions.push(
-      ...manifestedCustomAttributes
-    );
-  };
-
-  return {
-    agents,
-    campaigns,
-    contacts,
-    inboxes,
-    labels,
-    teams,
-    slaPolicies,
-    booleanFilterOptions,
-    statusFilterOptions,
-    onEventChange,
-    getConditionDropdownValues,
-    appendNewCondition,
-    appendNewAction,
-    removeFilter,
-    removeAction,
-    resetFilter,
-    resetAction,
-    formatAutomation,
-    getActionDropdownValues,
-    manifestCustomAttributes,
-  };
-}

app/javascript/dashboard/composables/useMacros.js

@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 import { useStoreGetters } from 'dashboard/composables/store';
-import { PRIORITY_CONDITION_VALUES } from 'dashboard/constants/automation';
+import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
 
 /**
  * Composable for handling macro-related functionality

app/javascript/dashboard/composables/useReportMetrics.js

@@ -1,57 +0,0 @@
-import { useMapGetter } from 'dashboard/composables/store';
-import { formatTime } from '@chatwoot/utils';
-
-/**
- * A composable function for report metrics calculations and display.
- *
- * @param {string} [accountSummaryKey='getAccountSummary'] - The key for accessing account summary data.
- * @returns {Object} An object containing utility functions for report metrics.
- */
-export function useReportMetrics(accountSummaryKey = 'getAccountSummary') {
-  const accountSummary = useMapGetter(accountSummaryKey);
-
-  /**
-   * Calculates the trend percentage for a given metric.
-   *
-   * @param {string} key - The key of the metric to calculate trend for.
-   * @returns {number} The calculated trend percentage, rounded to the nearest integer.
-   */
-  const calculateTrend = key => {
-    if (!accountSummary.value.previous[key]) return 0;
-    const diff = accountSummary.value[key] - accountSummary.value.previous[key];
-    return Math.round((diff / accountSummary.value.previous[key]) * 100);
-  };
-
-  /**
-   * Checks if a given metric key represents an average metric type.
-   *
-   * @param {string} key - The key of the metric to check.
-   * @returns {boolean} True if the metric is an average type, false otherwise.
-   */
-  const isAverageMetricType = key => {
-    return [
-      'avg_first_response_time',
-      'avg_resolution_time',
-      'reply_time',
-    ].includes(key);
-  };
-
-  /**
-   * Formats and displays a metric value based on its type.
-   *
-   * @param {string} key - The key of the metric to display.
-   * @returns {string} The formatted metric value as a string.
-   */
-  const displayMetric = key => {
-    if (isAverageMetricType(key)) {
-      return formatTime(accountSummary.value[key]);
-    }
-    return Number(accountSummary.value[key] || '').toLocaleString();
-  };
-
-  return {
-    calculateTrend,
-    isAverageMetricType,
-    displayMetric,
-  };
-}

app/javascript/dashboard/constants/automation.js

@@ -1,70 +0,0 @@
-export const DEFAULT_MESSAGE_CREATED_CONDITION = [
-  {
-    attribute_key: 'message_type',
-    filter_operator: 'equal_to',
-    values: '',
-    query_operator: 'and',
-    custom_attribute_type: '',
-  },
-];
-
-export const DEFAULT_CONVERSATION_OPENED_CONDITION = [
-  {
-    attribute_key: 'browser_language',
-    filter_operator: 'equal_to',
-    values: '',
-    query_operator: 'and',
-    custom_attribute_type: '',
-  },
-];
-
-export const DEFAULT_OTHER_CONDITION = [
-  {
-    attribute_key: 'status',
-    filter_operator: 'equal_to',
-    values: '',
-    query_operator: 'and',
-    custom_attribute_type: '',
-  },
-];
-
-export const DEFAULT_ACTIONS = [
-  {
-    action_name: 'assign_agent',
-    action_params: [],
-  },
-];
-
-export const MESSAGE_CONDITION_VALUES = [
-  {
-    id: 'incoming',
-    name: 'Incoming Message',
-  },
-  {
-    id: 'outgoing',
-    name: 'Outgoing Message',
-  },
-];
-
-export const PRIORITY_CONDITION_VALUES = [
-  {
-    id: 'nil',
-    name: 'None',
-  },
-  {
-    id: 'low',
-    name: 'Low',
-  },
-  {
-    id: 'medium',
-    name: 'Medium',
-  },
-  {
-    id: 'high',
-    name: 'High',
-  },
-  {
-    id: 'urgent',
-    name: 'Urgent',
-  },
-];

app/javascript/dashboard/helper/AnalyticsHelper/events.js

@@ -5,7 +5,6 @@ export const CONVERSATION_EVENTS = Object.freeze({
   INSERTED_A_CANNED_RESPONSE: 'Inserted a canned response',
   TRANSLATE_A_MESSAGE: 'Translated a message',
   INSERTED_A_VARIABLE: 'Inserted a variable',
-  INSERTED_AN_EMOJI: 'Inserted an emoji',
   USED_MENTIONS: 'Used mentions',
   SEARCH_CONVERSATION: 'Searched conversations',
   APPLY_FILTER: 'Applied filters in the conversation list',

app/javascript/dashboard/helper/CommandBar/actions.js

@@ -8,7 +8,7 @@ import {
   CMD_SEND_TRANSCRIPT,
   CMD_SNOOZE_CONVERSATION,
   CMD_UNMUTE_CONVERSATION,
-} from 'dashboard/helper/commandbar/events';
+} from './events';
 
 import {
   ICON_MUTE_CONVERSATION,
@@ -17,7 +17,7 @@ import {
   ICON_SEND_TRANSCRIPT,
   ICON_SNOOZE_CONVERSATION,
   ICON_UNMUTE_CONVERSATION,
-} from 'dashboard/helper/commandbar/icons';
+} from './icons';
 
 const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
 
@@ -46,7 +46,6 @@ export const SNOOZE_CONVERSATION_ACTIONS = [
   {
     id: 'snooze_conversation',
     title: 'COMMAND_BAR.COMMANDS.SNOOZE_CONVERSATION',
-    section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
     icon: ICON_SNOOZE_CONVERSATION,
     children: Object.values(SNOOZE_OPTIONS),
   },

app/javascript/dashboard/helper/automationHelper.js

@@ -3,16 +3,41 @@ import {
   OPERATOR_TYPES_3,
   OPERATOR_TYPES_4,
 } from 'dashboard/routes/dashboard/settings/automation/operators';
-import {
-  DEFAULT_MESSAGE_CREATED_CONDITION,
-  DEFAULT_CONVERSATION_OPENED_CONDITION,
-  DEFAULT_OTHER_CONDITION,
-  DEFAULT_ACTIONS,
-  MESSAGE_CONDITION_VALUES,
-  PRIORITY_CONDITION_VALUES,
-} from 'dashboard/constants/automation';
 import filterQueryGenerator from './filterQueryGenerator';
 import actionQueryGenerator from './actionQueryGenerator';
+const MESSAGE_CONDITION_VALUES = [
+  {
+    id: 'incoming',
+    name: 'Incoming Message',
+  },
+  {
+    id: 'outgoing',
+    name: 'Outgoing Message',
+  },
+];
+
+export const PRIORITY_CONDITION_VALUES = [
+  {
+    id: 'nil',
+    name: 'None',
+  },
+  {
+    id: 'low',
+    name: 'Low',
+  },
+  {
+    id: 'medium',
+    name: 'Medium',
+  },
+  {
+    id: 'high',
+    name: 'High',
+  },
+  {
+    id: 'urgent',
+    name: 'Urgent',
+  },
+];
 
 export const getCustomAttributeInputType = key => {
   const customAttributeMap = {
@@ -173,16 +198,45 @@ export const getFileName = (action, files = []) => {
 
 export const getDefaultConditions = eventName => {
   if (eventName === 'message_created') {
-    return DEFAULT_MESSAGE_CREATED_CONDITION;
+    return [
+      {
+        attribute_key: 'message_type',
+        filter_operator: 'equal_to',
+        values: '',
+        query_operator: 'and',
+        custom_attribute_type: '',
+      },
+    ];
   }
   if (eventName === 'conversation_opened') {
-    return DEFAULT_CONVERSATION_OPENED_CONDITION;
+    return [
+      {
+        attribute_key: 'browser_language',
+        filter_operator: 'equal_to',
+        values: '',
+        query_operator: 'and',
+        custom_attribute_type: '',
+      },
+    ];
   }
-  return DEFAULT_OTHER_CONDITION;
+  return [
+    {
+      attribute_key: 'status',
+      filter_operator: 'equal_to',
+      values: '',
+      query_operator: 'and',
+      custom_attribute_type: '',
+    },
+  ];
 };
 
 export const getDefaultActions = () => {
-  return DEFAULT_ACTIONS;
+  return [
+    {
+      action_name: 'assign_agent',
+      action_params: [],
+    },
+  ];
 };
 
 export const filterCustomAttributes = customAttributes => {
@@ -243,100 +297,3 @@ export const generateCustomAttributes = (
   }
   return customAttributes;
 };
-
-/**
- * Get attributes for a given key from automation types.
- * @param {Object} automationTypes - Object containing automation types.
- * @param {string} key - The key to get attributes for.
- * @returns {Array} Array of condition objects for the given key.
- */
-export const getAttributes = (automationTypes, key) => {
-  return automationTypes[key].conditions;
-};
-
-/**
- * Get the automation type for a given key.
- * @param {Object} automationTypes - Object containing automation types.
- * @param {Object} automation - The automation object.
- * @param {string} key - The key to get the automation type for.
- * @returns {Object} The automation type object.
- */
-export const getAutomationType = (automationTypes, automation, key) => {
-  return automationTypes[automation.event_name].conditions.find(
-    condition => condition.key === key
-  );
-};
-
-/**
- * Get the input type for a given key.
- * @param {Array} allCustomAttributes - Array of all custom attributes.
- * @param {Object} automationTypes - Object containing automation types.
- * @param {Object} automation - The automation object.
- * @param {string} key - The key to get the input type for.
- * @returns {string} The input type.
- */
-export const getInputType = (
-  allCustomAttributes,
-  automationTypes,
-  automation,
-  key
-) => {
-  const customAttribute = isACustomAttribute(allCustomAttributes, key);
-  if (customAttribute) {
-    return getCustomAttributeInputType(customAttribute.attribute_display_type);
-  }
-  const type = getAutomationType(automationTypes, automation, key);
-  return type.inputType;
-};
-
-/**
- * Get operators for a given key.
- * @param {Array} allCustomAttributes - Array of all custom attributes.
- * @param {Object} automationTypes - Object containing automation types.
- * @param {Object} automation - The automation object.
- * @param {string} mode - The mode ('edit' or other).
- * @param {string} key - The key to get operators for.
- * @returns {Array} Array of operators.
- */
-export const getOperators = (
-  allCustomAttributes,
-  automationTypes,
-  automation,
-  mode,
-  key
-) => {
-  if (mode === 'edit') {
-    const customAttribute = isACustomAttribute(allCustomAttributes, key);
-    if (customAttribute) {
-      return getOperatorTypes(customAttribute.attribute_display_type);
-    }
-  }
-  const type = getAutomationType(automationTypes, automation, key);
-  return type.filterOperators;
-};
-
-/**
- * Get the custom attribute type for a given key.
- * @param {Object} automationTypes - Object containing automation types.
- * @param {Object} automation - The automation object.
- * @param {string} key - The key to get the custom attribute type for.
- * @returns {string} The custom attribute type.
- */
-export const getCustomAttributeType = (automationTypes, automation, key) => {
-  return automationTypes[automation.event_name].conditions.find(
-    i => i.key === key
-  ).customAttributeType;
-};
-
-/**
- * Determine if an action input should be shown.
- * @param {Array} automationActionTypes - Array of automation action type objects.
- * @param {string} action - The action to check.
- * @returns {boolean} True if the action input should be shown, false otherwise.
- */
-export const showActionInput = (automationActionTypes, action) => {
-  if (action === 'send_email_to_team' || action === 'send_message')
-    return false;
-  const type = automationActionTypes.find(i => i.key === action).inputType;
-  return !!type;
-};

app/javascript/dashboard/helper/editorHelper.js

@@ -3,8 +3,6 @@ import {
   MessageMarkdownTransformer,
   MessageMarkdownSerializer,
 } from '@chatwoot/prosemirror-schema';
-import { replaceVariablesInMessage } from '@chatwoot/utils';
-
 import * as Sentry from '@sentry/browser';
 
 /**
@@ -283,92 +281,3 @@ export function setURLWithQueryAndSize(selectedImageNode, size, editorView) {
     }
   }
 }
-
-/**
- * Content Node Creation Helper Functions for
- * - mention
- * - canned response
- * - variable
- * - emoji
- */
-
-/**
- * Centralized node creation function that handles the creation of different types of nodes based on the specified type.
- * @param {Object} editorView - The editor view instance.
- * @param {string} nodeType - The type of node to create ('mention', 'cannedResponse', 'variable', 'emoji').
- * @param {Object|string} content - The content needed to create the node, which varies based on node type.
- * @returns {Object|null} - The created ProseMirror node or null if the type is not supported.
- */
-const createNode = (editorView, nodeType, content) => {
-  const { state } = editorView;
-  switch (nodeType) {
-    case 'mention':
-      return state.schema.nodes.mention.create({
-        userId: content.id,
-        userFullName: content.name,
-      });
-    case 'cannedResponse':
-      return new MessageMarkdownTransformer(messageSchema).parse(content);
-    case 'variable':
-      return state.schema.text(`{{${content}}}`);
-    case 'emoji':
-      return state.schema.text(content);
-    default:
-      return null;
-  }
-};
-
-/**
- * Object mapping types to their respective node creation functions.
- */
-const nodeCreators = {
-  mention: (editorView, content, from, to) => ({
-    node: createNode(editorView, 'mention', content),
-    from,
-    to,
-  }),
-  cannedResponse: (editorView, content, from, to, variables) => {
-    const updatedMessage = replaceVariablesInMessage({
-      message: content,
-      variables,
-    });
-    const node = createNode(editorView, 'cannedResponse', updatedMessage);
-    return {
-      node,
-      from: node.textContent === updatedMessage ? from : from - 1,
-      to,
-    };
-  },
-  variable: (editorView, content, from, to) => ({
-    node: createNode(editorView, 'variable', content),
-    from,
-    to,
-  }),
-  emoji: (editorView, content, from, to) => ({
-    node: createNode(editorView, 'emoji', content),
-    from,
-    to,
-  }),
-};
-
-/**
- * Retrieves a content node based on the specified type and content, using a functional approach to select the appropriate node creation function.
- * @param {Object} editorView - The editor view instance.
- * @param {string} type - The type of content node to create ('mention', 'cannedResponse', 'variable', 'emoji').
- * @param {string|Object} content - The content to be transformed into a node.
- * @param {Object} range - An object containing 'from' and 'to' properties indicating the range in the document where the node should be placed.
- * @param {Object} variables - Optional. Variables to replace in the content, used for 'cannedResponse' type.
- * @returns {Object} - An object containing the created node and the updated 'from' and 'to' positions.
- */
-export const getContentNode = (
-  editorView,
-  type,
-  content,
-  { from, to },
-  variables
-) => {
-  const creator = nodeCreators[type];
-  return creator
-    ? creator(editorView, content, from, to, variables)
-    : { node: null, from, to };
-};

app/javascript/dashboard/helper/featureHelper.js

@@ -9,7 +9,6 @@ const FEATURE_HELP_URLS = {
   custom_attributes: 'https://chwt.app/hc/custom-attributes',
   dashboard_apps: 'https://chwt.app/hc/dashboard-apps',
   help_center: 'https://chwt.app/hc/help-center',
-  inboxes: 'https://chwt.app/hc/inboxes',
   integrations: 'https://chwt.app/hc/integrations',
   labels: 'https://chwt.app/hc/labels',
   macros: 'https://chwt.app/hc/macros',
@@ -17,7 +16,6 @@ const FEATURE_HELP_URLS = {
   reports: 'https://chwt.app/hc/reports',
   sla: 'https://chwt.app/hc/sla',
   team_management: 'https://chwt.app/hc/teams',
-  webhook: 'https://chwt.app/hc/webhooks',
 };
 
 export function getHelpUrlForFeature(featureName) {

app/javascript/dashboard/helper/specs/editorContentHelper.spec.js

@@ -1,127 +0,0 @@
-// Moved from editorHelper.spec.js to editorContentHelper.spec.js
-// the mock of chatwoot/prosemirror-schema is getting conflicted with other specs
-import { getContentNode } from '../editorHelper';
-import {
-  MessageMarkdownTransformer,
-  messageSchema,
-} from '@chatwoot/prosemirror-schema';
-import { replaceVariablesInMessage } from '@chatwoot/utils';
-
-vi.mock('@chatwoot/prosemirror-schema', () => ({
-  MessageMarkdownTransformer: vi.fn(),
-  messageSchema: {},
-}));
-
-vi.mock('@chatwoot/utils', () => ({
-  replaceVariablesInMessage: vi.fn(),
-}));
-
-describe('getContentNode', () => {
-  let editorView;
-
-  beforeEach(() => {
-    editorView = {
-      state: {
-        schema: {
-          nodes: {
-            mention: {
-              create: vi.fn(),
-            },
-          },
-          text: vi.fn(),
-        },
-      },
-    };
-  });
-
-  describe('getMentionNode', () => {
-    it('should create a mention node', () => {
-      const content = { id: 1, name: 'John Doe' };
-      const from = 0;
-      const to = 10;
-      getContentNode(editorView, 'mention', content, {
-        from,
-        to,
-      });
-
-      expect(editorView.state.schema.nodes.mention.create).toHaveBeenCalledWith(
-        {
-          userId: content.id,
-          userFullName: content.name,
-        }
-      );
-    });
-  });
-
-  describe('getCannedResponseNode', () => {
-    it('should create a canned response node', () => {
-      const content = 'Hello {{name}}';
-      const variables = { name: 'John' };
-      const from = 0;
-      const to = 10;
-      const updatedMessage = 'Hello John';
-
-      replaceVariablesInMessage.mockReturnValue(updatedMessage);
-      MessageMarkdownTransformer.mockImplementation(() => ({
-        parse: vi.fn().mockReturnValue({ textContent: updatedMessage }),
-      }));
-
-      const { node } = getContentNode(
-        editorView,
-        'cannedResponse',
-        content,
-        { from, to },
-        variables
-      );
-
-      expect(replaceVariablesInMessage).toHaveBeenCalledWith({
-        message: content,
-        variables,
-      });
-      expect(MessageMarkdownTransformer).toHaveBeenCalledWith(messageSchema);
-      expect(node.textContent).toBe(updatedMessage);
-    });
-  });
-
-  describe('getVariableNode', () => {
-    it('should create a variable node', () => {
-      const content = 'name';
-      const from = 0;
-      const to = 10;
-      getContentNode(editorView, 'variable', content, {
-        from,
-        to,
-      });
-
-      expect(editorView.state.schema.text).toHaveBeenCalledWith('{{name}}');
-    });
-  });
-
-  describe('getEmojiNode', () => {
-    it('should create an emoji node', () => {
-      const content = '😊';
-      const from = 0;
-      const to = 2;
-      getContentNode(editorView, 'emoji', content, {
-        from,
-        to,
-      });
-
-      expect(editorView.state.schema.text).toHaveBeenCalledWith('😊');
-    });
-  });
-
-  describe('getContentNode', () => {
-    it('should return null for invalid type', () => {
-      const content = 'invalid';
-      const from = 0;
-      const to = 10;
-      const { node } = getContentNode(editorView, 'invalid', content, {
-        from,
-        to,
-      });
-
-      expect(node).toBeNull();
-    });
-  });
-});

app/javascript/dashboard/i18n/locale/en/advancedFilters.json

@@ -55,9 +55,6 @@
       "CREATED_AT": "Created at",
       "LAST_ACTIVITY": "Last activity"
     },
-    "ERRORS": {
-      "VALUE_REQUIRED": "Value is required"
-    },
     "GROUPS": {
       "STANDARD_FILTERS": "Standard filters",
       "ADDITIONAL_FILTERS": "Additional filters",

app/javascript/dashboard/i18n/locale/en/attributesMgmt.json

@@ -3,8 +3,7 @@
     "HEADER": "Custom Attributes",
     "HEADER_BTN_TXT": "Add Custom Attribute",
     "LOADING": "Fetching custom attributes",
-    "DESCRIPTION": "A custom attribute tracks additional details about your contacts or conversations—such as the subscription plan or the date of their first purchase. You can add different types of custom attributes, such as text, lists, or numbers, to capture the specific information you need.",
-    "LEARN_MORE": "Learn more about custom attributes",
+    "SIDEBAR_TXT": "<p><b>Custom Attributes</b> <p>A custom attribute tracks facts about your contacts/conversation — like the subscription plan, or when they ordered the first item etc. <br /><br />For creating a Custom Attribute, just click on the <b>Add Custom Attribute.</b> You can also edit or delete an existing  Custom Attribute by clicking on the Edit or Delete button.</p>",
     "ADD": {
       "TITLE": "Add Custom Attribute",
       "SUBMIT": "Create",
@@ -92,12 +91,7 @@
       "CONTACT": "Contact"
     },
     "LIST": {
-      "TABLE_HEADER": [
-        "Name",
-        "Description",
-        "Type",
-        "Key"
-      ],
+      "TABLE_HEADER": ["Name", "Description", "Type", "Key"],
       "BUTTONS": {
         "EDIT": "Edit",
         "DELETE": "Delete"

app/javascript/dashboard/i18n/locale/en/contactFilters.json

@@ -30,9 +30,6 @@
       "is_lesser_than": "Is lesser than",
       "days_before": "Is x days before"
     },
-    "ERRORS": {
-      "VALUE_REQUIRED": "Value is required"
-    },
     "ATTRIBUTES": {
       "NAME": "Name",
       "EMAIL": "Email",

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -1,8 +1,7 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
-    "DESCRIPTION": "A channel is the mode of communication your customer chooses to interact with you. An inbox is where you manage interactions for a specific channel. It can include communications from various sources such as email, live chat, and social media.",
-    "LEARN_MORE": "Learn more about inboxes",
+    "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
     "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
     "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
@@ -746,18 +745,6 @@
       "MICROSOFT": "Microsoft",
       "GOOGLE": "Google",
       "OTHER_PROVIDERS": "Other Providers"
-    },
-    "CHANNELS": {
-      "MESSENGER": "Messenger",
-      "WEB_WIDGET": "Website",
-      "TWITTER_PROFILE": "Twitter",
-      "TWILIO_SMS": "Twilio SMS",
-      "WHATSAPP": "WhatsApp",
-      "SMS": "SMS",
-      "EMAIL": "Email",
-      "TELEGRAM": "Telegram",
-      "LINE": "Line",
-      "API": "API Channel"
     }
   }
 }

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -12,7 +12,6 @@
     },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
-      "LEARN_MORE": "Learn more about webhooks",
       "FORM": {
         "CANCEL": "Cancel",
         "DESC": "Webhook events provide you the realtime information about what's happening in your Chatwoot account. Please enter a valid URL to configure a callback.",

app/javascript/dashboard/mixins/automations/methodsMixin.js

@@ -0,0 +1,314 @@
+import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
+import countries from 'shared/constants/countries';
+import { validateAutomation } from 'dashboard/helper/validations';
+
+import {
+  generateCustomAttributeTypes,
+  getActionOptions,
+  getConditionOptions,
+  getCustomAttributeInputType,
+  getOperatorTypes,
+  isACustomAttribute,
+  getFileName,
+  getDefaultConditions,
+  getDefaultActions,
+  filterCustomAttributes,
+  generateAutomationPayload,
+  getStandardAttributeInputType,
+  isCustomAttribute,
+  generateCustomAttributes,
+} from 'dashboard/helper/automationHelper';
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+
+export default {
+  computed: {
+    ...mapGetters({
+      agents: 'agents/getAgents',
+      campaigns: 'campaigns/getAllCampaigns',
+      contacts: 'contacts/getContacts',
+      inboxes: 'inboxes/getInboxes',
+      labels: 'labels/getLabels',
+      teams: 'teams/getTeams',
+      slaPolicies: 'sla/getSLA',
+    }),
+    booleanFilterOptions() {
+      return [
+        {
+          id: true,
+          name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
+        },
+        {
+          id: false,
+          name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
+        },
+      ];
+    },
+
+    statusFilterOptions() {
+      const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
+      return [
+        ...Object.keys(statusFilters).map(status => {
+          return {
+            id: status,
+            name: statusFilters[status].TEXT,
+          };
+        }),
+        {
+          id: 'all',
+          name: this.$t('CHAT_LIST.FILTER_ALL'),
+        },
+      ];
+    },
+  },
+  methods: {
+    getFileName,
+    onEventChange() {
+      this.automation.conditions = getDefaultConditions(
+        this.automation.event_name
+      );
+      this.automation.actions = getDefaultActions();
+    },
+    getAttributes(key) {
+      return this.automationTypes[key].conditions;
+    },
+    getInputType(key) {
+      const customAttribute = isACustomAttribute(this.allCustomAttributes, key);
+      if (customAttribute) {
+        return getCustomAttributeInputType(
+          customAttribute.attribute_display_type
+        );
+      }
+      const type = this.getAutomationType(key);
+      return type.inputType;
+    },
+    getOperators(key) {
+      if (this.mode === 'edit') {
+        const customAttribute = isACustomAttribute(
+          this.allCustomAttributes,
+          key
+        );
+        if (customAttribute) {
+          return getOperatorTypes(customAttribute.attribute_display_type);
+        }
+      }
+      const type = this.getAutomationType(key);
+      return type.filterOperators;
+    },
+    getAutomationType(key) {
+      return this.automationTypes[this.automation.event_name].conditions.find(
+        condition => condition.key === key
+      );
+    },
+    getCustomAttributeType(key) {
+      const type = this.automationTypes[
+        this.automation.event_name
+      ].conditions.find(i => i.key === key).customAttributeType;
+      return type;
+    },
+    getConditionDropdownValues(type) {
+      const {
+        agents,
+        allCustomAttributes: customAttributes,
+        booleanFilterOptions,
+        campaigns,
+        contacts,
+        inboxes,
+        statusFilterOptions,
+        teams,
+      } = this;
+      return getConditionOptions({
+        agents,
+        booleanFilterOptions,
+        campaigns,
+        contacts,
+        customAttributes,
+        inboxes,
+        statusFilterOptions,
+        teams,
+        languages,
+        countries,
+        type,
+      });
+    },
+    appendNewCondition() {
+      this.automation.conditions.push(
+        ...getDefaultConditions(this.automation.event_name)
+      );
+    },
+    appendNewAction() {
+      this.automation.actions.push(...getDefaultActions());
+    },
+    removeFilter(index) {
+      if (this.automation.conditions.length <= 1) {
+        useAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
+      } else {
+        this.automation.conditions.splice(index, 1);
+      }
+    },
+    removeAction(index) {
+      if (this.automation.actions.length <= 1) {
+        useAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
+      } else {
+        this.automation.actions.splice(index, 1);
+      }
+    },
+    submitAutomation() {
+      // we assign it to this.errors so that it can be accessed in the template
+      // it is supposed to be declared in the data function
+      this.errors = validateAutomation(this.automation);
+      if (Object.keys(this.errors).length === 0) {
+        const automation = generateAutomationPayload(this.automation);
+        this.$emit('saveAutomation', automation, this.mode);
+      }
+    },
+    resetFilter(index, currentCondition) {
+      this.automation.conditions[index].filter_operator = this.automationTypes[
+        this.automation.event_name
+      ].conditions.find(
+        condition => condition.key === currentCondition.attribute_key
+      ).filterOperators[0].value;
+      this.automation.conditions[index].values = '';
+    },
+    showUserInput(type) {
+      return !(type === 'is_present' || type === 'is_not_present');
+    },
+    showActionInput(action) {
+      if (action === 'send_email_to_team' || action === 'send_message')
+        return false;
+      const type = this.automationActionTypes.find(
+        i => i.key === action
+      ).inputType;
+      return !!type;
+    },
+    resetAction(index) {
+      this.automation.actions[index].action_params = [];
+    },
+    manifestConditions(automation) {
+      const customAttributes = filterCustomAttributes(this.allCustomAttributes);
+      const conditions = automation.conditions.map(condition => {
+        const customAttr = isCustomAttribute(
+          customAttributes,
+          condition.attribute_key
+        );
+        let inputType = 'plain_text';
+        if (customAttr) {
+          inputType = getCustomAttributeInputType(customAttr.type);
+        } else {
+          inputType = getStandardAttributeInputType(
+            this.automationTypes,
+            automation.event_name,
+            condition.attribute_key
+          );
+        }
+        if (inputType === 'plain_text' || inputType === 'date') {
+          return {
+            ...condition,
+            values: condition.values[0],
+          };
+        }
+        if (inputType === 'comma_separated_plain_text') {
+          return {
+            ...condition,
+            values: condition.values.join(','),
+          };
+        }
+        return {
+          ...condition,
+          query_operator: condition.query_operator || 'and',
+          values: [
+            ...this.getConditionDropdownValues(condition.attribute_key),
+          ].filter(item => [...condition.values].includes(item.id)),
+        };
+      });
+      return conditions;
+    },
+    generateActionsArray(action) {
+      const params = action.action_params;
+      let actionParams = [];
+      const inputType = this.automationActionTypes.find(
+        item => item.key === action.action_name
+      ).inputType;
+      if (inputType === 'multi_select' || inputType === 'search_select') {
+        actionParams = [
+          ...this.getActionDropdownValues(action.action_name),
+        ].filter(item => [...params].includes(item.id));
+      } else if (inputType === 'team_message') {
+        actionParams = {
+          team_ids: [
+            ...this.getActionDropdownValues(action.action_name),
+          ].filter(item => [...params[0].team_ids].includes(item.id)),
+          message: params[0].message,
+        };
+      } else actionParams = [...params];
+      return actionParams;
+    },
+    manifestActions(automation) {
+      let actionParams = [];
+      const actions = automation.actions.map(action => {
+        if (action.action_params.length) {
+          actionParams = this.generateActionsArray(action);
+        }
+        return {
+          ...action,
+          action_params: actionParams,
+        };
+      });
+      return actions;
+    },
+    formatAutomation(automation) {
+      this.automation = {
+        ...automation,
+        conditions: this.manifestConditions(automation),
+        actions: this.manifestActions(automation),
+      };
+    },
+    getActionDropdownValues(type) {
+      const { agents, labels, teams, slaPolicies } = this;
+      return getActionOptions({
+        agents,
+        labels,
+        teams,
+        slaPolicies,
+        languages,
+        type,
+      });
+    },
+    manifestCustomAttributes() {
+      const conversationCustomAttributesRaw = this.$store.getters[
+        'attributes/getAttributesByModel'
+      ]('conversation_attribute');
+
+      const contactCustomAttributesRaw =
+        this.$store.getters['attributes/getAttributesByModel'](
+          'contact_attribute'
+        );
+      const conversationCustomAttributeTypes = generateCustomAttributeTypes(
+        conversationCustomAttributesRaw,
+        'conversation_attribute'
+      );
+      const contactCustomAttributeTypes = generateCustomAttributeTypes(
+        contactCustomAttributesRaw,
+        'contact_attribute'
+      );
+      let manifestedCustomAttributes = generateCustomAttributes(
+        conversationCustomAttributeTypes,
+        contactCustomAttributeTypes,
+        this.$t('AUTOMATION.CONDITION.CONVERSATION_CUSTOM_ATTR_LABEL'),
+        this.$t('AUTOMATION.CONDITION.CONTACT_CUSTOM_ATTR_LABEL')
+      );
+      this.automationTypes.message_created.conditions.push(
+        ...manifestedCustomAttributes
+      );
+      this.automationTypes.conversation_created.conditions.push(
+        ...manifestedCustomAttributes
+      );
+      this.automationTypes.conversation_updated.conditions.push(
+        ...manifestedCustomAttributes
+      );
+      this.automationTypes.conversation_opened.conditions.push(
+        ...manifestedCustomAttributes
+      );
+    },
+  },
+};

app/javascript/dashboard/mixins/reportMixin.js

@@ -0,0 +1,51 @@
+import { mapGetters } from 'vuex';
+import { formatTime } from '@chatwoot/utils';
+
+export default {
+  props: {
+    accountSummaryKey: {
+      type: String,
+      default: 'getAccountSummary',
+    },
+  },
+  computed: {
+    ...mapGetters({
+      accountReport: 'getAccountReports',
+    }),
+    accountSummary() {
+      return this.$store.getters[this.accountSummaryKey];
+    },
+  },
+  methods: {
+    calculateTrend(key) {
+      if (!this.accountSummary.previous[key]) return 0;
+      const diff = this.accountSummary[key] - this.accountSummary.previous[key];
+      return Math.round((diff / this.accountSummary.previous[key]) * 100);
+    },
+    displayMetric(key) {
+      if (this.isAverageMetricType(key)) {
+        return formatTime(this.accountSummary[key]);
+      }
+      return Number(this.accountSummary[key] || '').toLocaleString();
+    },
+    displayInfoText(key) {
+      if (this.metrics[this.currentSelection].KEY !== key) {
+        return '';
+      }
+      if (this.isAverageMetricType(key)) {
+        const total = this.accountReport.data
+          .map(item => item.count)
+          .reduce((prev, curr) => prev + curr, 0);
+        return `${this.metrics[this.currentSelection].INFO_TEXT} ${total}`;
+      }
+      return '';
+    },
+    isAverageMetricType(key) {
+      return [
+        'avg_first_response_time',
+        'avg_resolution_time',
+        'reply_time',
+      ].includes(key);
+    },
+  },
+};

app/javascript/dashboard/mixins/specs/reportMixin.spec.js

@@ -0,0 +1,136 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import reportMixin from '../reportMixin';
+import reportFixtures from './reportMixinFixtures';
+import Vuex from 'vuex';
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('reportMixin', () => {
+  let getters;
+  let store;
+  beforeEach(() => {
+    getters = {
+      getAccountSummary: () => reportFixtures.summary,
+      getBotSummary: () => reportFixtures.botSummary,
+      getAccountReports: () => reportFixtures.report,
+    };
+    store = new Vuex.Store({ getters });
+  });
+
+  it('display the metric for account', async () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    await wrapper.setProps({
+      accountSummaryKey: 'getAccountSummary',
+    });
+    expect(wrapper.vm.displayMetric('conversations_count')).toEqual('5,000');
+    expect(wrapper.vm.displayMetric('avg_first_response_time')).toEqual(
+      '3 Min 18 Sec'
+    );
+  });
+
+  it('display the metric for bot', async () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    await wrapper.setProps({
+      accountSummaryKey: 'getBotSummary',
+    });
+    expect(wrapper.vm.displayMetric('bot_resolutions_count')).toEqual('10');
+    expect(wrapper.vm.displayMetric('bot_handoffs_count')).toEqual('20');
+  });
+
+  it('display the metric', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.displayMetric('conversations_count')).toEqual('5,000');
+    expect(wrapper.vm.displayMetric('avg_first_response_time')).toEqual(
+      '3 Min 18 Sec'
+    );
+  });
+
+  it('calculate the trend', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.calculateTrend('conversations_count')).toEqual(124900);
+    expect(wrapper.vm.calculateTrend('resolutions_count')).toEqual(0);
+  });
+
+  it('display info text', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+      data() {
+        return {
+          currentSelection: 0,
+        };
+      },
+      computed: {
+        metrics() {
+          return [
+            {
+              DESC: '( Avg )',
+              INFO_TEXT: 'Total number of conversations used for computation:',
+              KEY: 'avg_first_response_time',
+              NAME: 'First Response Time',
+            },
+          ];
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.displayInfoText('avg_first_response_time')).toEqual(
+      'Total number of conversations used for computation: 4'
+    );
+  });
+
+  it('do not display info text', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [reportMixin],
+      data() {
+        return {
+          currentSelection: 0,
+        };
+      },
+      computed: {
+        metrics() {
+          return [
+            {
+              DESC: '( Total )',
+              INFO_TEXT: '',
+              KEY: 'conversation_count',
+              NAME: 'Conversations',
+            },
+            {
+              DESC: '( Avg )',
+              INFO_TEXT: 'Total number of conversations used for computation:',
+              KEY: 'avg_first_response_time',
+              NAME: 'First Response Time',
+            },
+          ];
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.displayInfoText('conversation_count')).toEqual('');
+    expect(wrapper.vm.displayInfoText('incoming_messages_count')).toEqual('');
+  });
+});

app/javascript/dashboard/mixins/specs/reportMixinFixtures.js

@@ -0,0 +1,37 @@
+export default {
+  summary: {
+    avg_first_response_time: '198.6666666666667',
+    avg_resolution_time: '208.3333333333333',
+    conversations_count: 5000,
+    incoming_messages_count: 5,
+    outgoing_messages_count: 3,
+    previous: {
+      avg_first_response_time: '89.0',
+      avg_resolution_time: '145.0',
+      conversations_count: 4,
+      incoming_messages_count: 5,
+      outgoing_messages_count: 4,
+      resolutions_count: 0,
+    },
+    resolutions_count: 3,
+  },
+  botSummary: {
+    bot_resolutions_count: 10,
+    bot_handoffs_count: 20,
+    previous: {
+      bot_resolutions_count: 8,
+      bot_handoffs_count: 5,
+    },
+  },
+  report: {
+    data: [
+      { value: '0.00', timestamp: 1647541800, count: 0 },
+      { value: '0.00', timestamp: 1647628200, count: 0 },
+      { value: '0.00', timestamp: 1647714600, count: 0 },
+      { value: '0.00', timestamp: 1647801000, count: 0 },
+      { value: '0.01', timestamp: 1647887400, count: 4 },
+      { value: '0.00', timestamp: 1647973800, count: 0 },
+      { value: '0.00', timestamp: 1648060200, count: 0 },
+    ],
+  },
+};

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -1,7 +1,7 @@
 <script>
 import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { conversationUrl, frontendURL } from '../../../helper/URLHelper';
@@ -18,6 +18,7 @@ export default {
     TranslateModal,
     MenuItem,
   },
+  mixins: [messageFormatterMixin],
   props: {
     message: {
       type: Object,
@@ -36,12 +37,6 @@ export default {
       default: () => ({}),
     },
   },
-  setup() {
-    const { getPlainText } = useMessageFormatter();
-    return {
-      getPlainText,
-    };
-  },
   data() {
     return {
       isCannedResponseModalOpen: false,

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -1,12 +1,15 @@
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 
 export default {
   components: {
     Thumbnail,
   },
+
+  mixins: [messageFormatterMixin],
+
   props: {
     id: {
       type: Number,
@@ -25,12 +28,6 @@ export default {
       default: 0,
     },
   },
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
   data() {
     return {
       showDeleteModal: false,

app/javascript/dashboard/modules/search/components/MessageContent.vue

@@ -1,11 +1,12 @@
 <script>
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import ReadMore from './ReadMore.vue';
 
 export default {
   components: {
     ReadMore,
   },
+  mixins: [messageFormatterMixin],
   props: {
     author: {
       type: String,
@@ -20,13 +21,6 @@ export default {
       default: '',
     },
   },
-  setup() {
-    const { formatMessage, highlightContent } = useMessageFormatter();
-    return {
-      formatMessage,
-      highlightContent,
-    };
-  },
   data() {
     return {
       isOverflowing: false,

app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue

@@ -6,7 +6,7 @@ import { useI18n } from 'dashboard/composables/useI18n';
 import { useEmitter } from 'dashboard/composables/emitter';
 import { getUnixTime } from 'date-fns';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
-import { CMD_SNOOZE_CONVERSATION } from 'dashboard/helper/commandbar/events';
+import { CMD_SNOOZE_CONVERSATION } from 'dashboard/helper/commandBar/events';
 import wootConstants from 'dashboard/constants/globals';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 

app/javascript/dashboard/routes/dashboard/commands/commandbar.vue

@@ -1,8 +1,9 @@
 <script setup>
 import '@chatwoot/ninja-keys';
-import { ref, computed, watchEffect, onMounted } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useTrack } from 'dashboard/composables';
+import { useRoute } from 'dashboard/composables/route';
 import { useI18n } from 'dashboard/composables/useI18n';
 import { useAppearanceHotKeys } from 'dashboard/composables/commands/useAppearanceHotKeys';
 import { useInboxHotKeys } from 'dashboard/composables/commands/useInboxHotKeys';
@@ -13,6 +14,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { GENERAL_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
 const store = useStore();
+const route = useRoute();
 const track = useTrack();
 const { t } = useI18n();
 
@@ -26,10 +28,20 @@ const selectedSnoozeType = ref(null);
 const { goToAppearanceHotKeys } = useAppearanceHotKeys();
 const { inboxHotKeys } = useInboxHotKeys();
 const { goToCommandHotKeys } = useGoToCommandHotKeys();
-const { bulkActionsHotKeys } = useBulkActionsHotKeys();
-const { conversationHotKeys } = useConversationHotKeys();
+const { bulkActionsHotKeys, selectedConversations } = useBulkActionsHotKeys();
+const {
+  conversationHotKeys,
+  assignableAgents,
+  currentChat,
+  teamsList,
+  activeLabels,
+  draftMessage,
+  replyMode,
+  contextMenuChatId,
+} = useConversationHotKeys();
 
 const placeholder = computed(() => t('COMMAND_BAR.SEARCH_PLACEHOLDER'));
+const routeName = computed(() => route.name);
 
 const hotKeys = computed(() => [
   ...inboxHotKeys.value,
@@ -73,11 +85,22 @@ const onClosed = () => {
   }
 };
 
-watchEffect(() => {
-  if (ninjakeys.value) {
-    ninjakeys.value.data = hotKeys.value;
+watch(
+  [
+    routeName,
+    selectedConversations,
+    assignableAgents,
+    currentChat,
+    teamsList,
+    activeLabels,
+    draftMessage,
+    replyMode,
+    contextMenuChatId,
+  ],
+  () => {
+    setCommandBarData();
   }
-});
+);
 
 onMounted(setCommandBarData);
 </script>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -4,7 +4,7 @@ import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue
 import countries from 'shared/constants/countries.js';
 import { mapGetters } from 'vuex';
 import { filterAttributeGroups } from '../contactFilterItems';
-import { useFilter } from 'shared/composables/useFilter';
+import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
@@ -13,6 +13,7 @@ export default {
   components: {
     FilterInputBox,
   },
+  mixins: [filterMixin],
   props: {
     onClose: {
       type: Function,
@@ -35,15 +36,6 @@ export default {
       default: '',
     },
   },
-  setup() {
-    const { setFilterAttributes } = useFilter({
-      filteri18nKey: 'CONTACTS_FILTER',
-      attributeModel: 'contact_attribute',
-    });
-    return {
-      setFilterAttributes,
-    };
-  },
   data() {
     return {
       show: true,
@@ -77,10 +69,7 @@ export default {
     },
   },
   mounted() {
-    const { filterGroups, filterTypes } = this.setFilterAttributes();
-    this.filterTypes = [...this.filterTypes, ...filterTypes];
-    this.filterGroups = filterGroups;
-
+    this.setFilterAttributes();
     if (this.getAppliedContactFilters.length) {
       this.appliedFilters = [...this.getAppliedContactFilters];
     } else if (!this.isSegmentsView) {
@@ -308,11 +297,7 @@ export default {
           :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :error-message="
-            validationErrors[`filter_${i}`]
-              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
-              : ''
-          "
+          :error-message="validationErrors[`filter_${i}`]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -1,5 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SwitchLayout from './SwitchLayout.vue';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 export default {
@@ -13,6 +14,7 @@ export default {
       },
     },
   },
+  mixins: [messageFormatterMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { getUnixTime } from 'date-fns';
-import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandbar/events';
+import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandBar/events';
 import wootConstants from 'dashboard/constants/globals';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';

app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue

@@ -22,21 +22,17 @@ defineProps({
 <template>
   <div class="flex flex-col w-full h-full gap-10 font-inter">
     <slot name="header" />
-    <!-- Added to render any templates that should be rendered before body -->
-    <div>
-      <slot name="preBody" />
-      <slot v-if="isLoading" name="loading">
-        <woot-loading-state :message="loadingMessage" />
-      </slot>
-      <p
-        v-else-if="noRecordsFound"
-        class="flex-1 text-slate-700 dark:text-slate-100 flex items-center justify-center text-base"
-      >
-        {{ noRecordsMessage }}
-      </p>
-      <slot v-else name="body" />
-      <!-- Do not delete the slot below. It is required to render anything that is not defined in the above slots. -->
-      <slot />
-    </div>
+    <slot v-if="isLoading" name="loading">
+      <woot-loading-state :message="loadingMessage" />
+    </slot>
+    <p
+      v-else-if="noRecordsFound"
+      class="flex-1 text-slate-700 dark:text-slate-100 flex items-center justify-center text-base"
+    >
+      {{ noRecordsMessage }}
+    </p>
+    <slot v-else name="body" />
+    <!-- Do not delete the slot below. It is required to render anything that is not defined in the above slots. -->
+    <slot />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue

@@ -12,12 +12,6 @@ export default {
       type: Function,
       default: () => {},
     },
-    // Passes 0 or 1 based on the selected AttributeModel tab selected in the UI
-    // Needs a better data type, todo: refactor this component later
-    selectedAttributeModelTab: {
-      type: Number,
-      default: 0,
-    },
   },
   setup() {
     return { v$: useVuelidate() };
@@ -26,10 +20,7 @@ export default {
     return {
       displayName: '',
       description: '',
-      // Using the prop as default. There is no side effect here as the component
-      // is destroyed completely when the modal is closed. The prop doesn't change
-      // dynamically when the modal is active.
-      attributeModel: this.selectedAttributeModelTab || 0,
+      attributeModel: 0,
       attributeType: 0,
       attributeKey: '',
       regexPattern: null,
@@ -289,16 +280,13 @@ export default {
   padding: 0 var(--space-small) var(--space-small) 0;
   font-family: monospace;
 }
-
 .multiselect--wrap {
   margin-bottom: var(--space-normal);
-
   .error-message {
     color: var(--r-400);
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-normal);
   }
-
   .invalid {
     ::v-deep {
       .multiselect__tags {
@@ -307,16 +295,13 @@ export default {
     }
   }
 }
-
 ::v-deep {
   .multiselect {
     margin-bottom: 0;
   }
-
   .multiselect__content-wrapper {
     display: none;
   }
-
   .multiselect--active .multiselect__tags {
     border-radius: var(--border-radius-normal);
   }

app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue

@@ -1,141 +1,195 @@
-<script setup>
+<script>
+import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import EditAttribute from './EditAttribute.vue';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { computed, ref } from 'vue';
-import { useI18n } from 'dashboard/composables/useI18n';
-const props = defineProps({
-  attributeModel: {
-    type: String,
-    default: 'conversation_attribute',
+
+export default {
+  components: {
+    EditAttribute,
   },
-});
+  data() {
+    return {
+      selectedTabIndex: 0,
+      showEditPopup: false,
+      showDeletePopup: false,
+      selectedAttribute: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'attributes/getUIFlags',
+    }),
+    attributes() {
+      const attributeModel = this.selectedTabIndex
+        ? 'contact_attribute'
+        : 'conversation_attribute';
 
-const { t } = useI18n();
-
-const showEditPopup = ref(false);
-const showDeletePopup = ref(false);
-const selectedAttribute = ref({});
-
-const getters = useStoreGetters();
-const store = useStore();
-
-const attributes = computed(() =>
-  getters['attributes/getAttributesByModel'].value(props.attributeModel)
-);
-const uiFlags = computed(() => getters['attributes/getUIFlags'].value);
-
-const attributeDisplayName = computed(
-  () => selectedAttribute.value.attribute_display_name
-);
-const deleteConfirmText = computed(
-  () =>
-    `${t('ATTRIBUTES_MGMT.DELETE.CONFIRM.YES')} ${attributeDisplayName.value}`
-);
-const deleteRejectText = computed(() => t('ATTRIBUTES_MGMT.DELETE.CONFIRM.NO'));
-const confirmDeleteTitle = computed(() =>
-  t('ATTRIBUTES_MGMT.DELETE.CONFIRM.TITLE', {
-    attributeName: attributeDisplayName.value,
-  })
-);
-const confirmPlaceHolderText = computed(
-  () =>
-    `${t('ATTRIBUTES_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
-      attributeName: attributeDisplayName.value,
-    })}`
-);
-
-const deleteAttributes = async ({ id }) => {
-  try {
-    await store.dispatch('attributes/delete', id);
-    useAlert(t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message || t('ATTRIBUTES_MGMT.DELETE.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-const openEditPopup = response => {
-  showEditPopup.value = true;
-  selectedAttribute.value = response;
-};
-const hideEditPopup = () => {
-  showEditPopup.value = false;
-};
-
-const closeDelete = () => {
-  showDeletePopup.value = false;
-  selectedAttribute.value = {};
-};
-const confirmDeletion = () => {
-  deleteAttributes(selectedAttribute.value);
-  closeDelete();
-};
-const openDelete = value => {
-  showDeletePopup.value = true;
-  selectedAttribute.value = value;
+      return this.$store.getters['attributes/getAttributesByModel'](
+        attributeModel
+      );
+    },
+    tabs() {
+      return [
+        {
+          key: 0,
+          name: this.$t('ATTRIBUTES_MGMT.TABS.CONVERSATION'),
+        },
+        {
+          key: 1,
+          name: this.$t('ATTRIBUTES_MGMT.TABS.CONTACT'),
+        },
+      ];
+    },
+    deleteConfirmText() {
+      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.YES')} ${
+        this.selectedAttribute.attribute_display_name
+      }`;
+    },
+    deleteRejectText() {
+      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.NO');
+    },
+    confirmDeleteTitle() {
+      return this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.TITLE', {
+        attributeName: this.selectedAttribute.attribute_display_name,
+      });
+    },
+    confirmPlaceHolderText() {
+      return `${this.$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+        attributeName: this.selectedAttribute.attribute_display_name,
+      })}`;
+    },
+  },
+  mounted() {
+    this.fetchAttributes(this.selectedTabIndex);
+  },
+  methods: {
+    onClickTabChange(index) {
+      this.selectedTabIndex = index;
+      this.fetchAttributes(index);
+    },
+    fetchAttributes(index) {
+      this.$store.dispatch('attributes/get', index);
+    },
+    async deleteAttributes({ id }) {
+      try {
+        await this.$store.dispatch('attributes/delete', id);
+        useAlert(this.$t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        const errorMessage =
+          error?.response?.message ||
+          this.$t('ATTRIBUTES_MGMT.DELETE.API.ERROR_MESSAGE');
+        useAlert(errorMessage);
+      }
+    },
+    openEditPopup(response) {
+      this.showEditPopup = true;
+      this.selectedAttribute = response;
+    },
+    hideEditPopup() {
+      this.showEditPopup = false;
+    },
+    confirmDeletion() {
+      this.deleteAttributes(this.selectedAttribute);
+      this.closeDelete();
+    },
+    openDelete(value) {
+      this.showDeletePopup = true;
+      this.selectedAttribute = value;
+    },
+    closeDelete() {
+      this.showDeletePopup = false;
+      this.selectedAttribute = {};
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <table class="min-w-full overflow-x-auto">
-      <thead>
-        <th
-          v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
-          :key="tableHeader"
-          class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+  <div class="flex flex-row gap-4 p-8">
+    <div class="w-full lg:w-3/5">
+      <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
+        <woot-tabs-item
+          v-for="tab in tabs"
+          :key="tab.key"
+          :name="tab.name"
+          :show-badge="false"
+        />
+      </woot-tabs>
+
+      <div class="w-full">
+        <p
+          v-if="!uiFlags.isFetching && !attributes.length"
+          class="flex items-center justify-center mt-12"
         >
-          {{ tableHeader }}
-        </th>
-      </thead>
-      <tbody
-        class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
-      >
-        <tr v-for="attribute in attributes" :key="attribute.attribute_key">
-          <td
-            class="py-4 ltr:pr-4 rtl:pl-4 overflow-hidden whitespace-nowrap text-ellipsis"
-          >
-            {{ attribute.attribute_display_name }}
-          </td>
-          <td class="py-4 ltr:pr-4 rtl:pl-4">
-            {{ attribute.attribute_description }}
-          </td>
-          <td
-            class="py-4 ltr:pr-4 rtl:pl-4 overflow-hidden whitespace-nowrap text-ellipsis"
-          >
-            {{ attribute.attribute_display_type }}
-          </td>
-          <td
-            class="py-4 ltr:pr-4 rtl:pl-4 attribute-key overflow-hidden whitespace-nowrap text-ellipsis"
-          >
-            {{ attribute.attribute_key }}
-          </td>
-          <td class="py-4 min-w-xs">
-            <div class="flex gap-1">
-              <woot-button
-                v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
-                variant="smooth"
-                size="tiny"
-                color-scheme="secondary"
-                class-names="grey-btn"
-                icon="edit"
-                @click="openEditPopup(attribute)"
-              />
-              <woot-button
-                v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
-                variant="smooth"
-                color-scheme="alert"
-                size="tiny"
-                icon="dismiss-circle"
-                class-names="grey-btn"
-                @click="openDelete(attribute)"
-              />
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+          {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.isFetching"
+          :message="$t('ATTRIBUTES_MGMT.LOADING')"
+        />
+        <table
+          v-if="!uiFlags.isFetching && attributes.length"
+          class="w-full mt-2 table-fixed woot-table"
+        >
+          <thead>
+            <th
+              v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
+              :key="tableHeader"
+              class="pl-0 max-w-[6.25rem] min-w-[5rem]"
+            >
+              {{ tableHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <tr v-for="attribute in attributes" :key="attribute.attribute_key">
+              <td
+                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
+                {{ attribute.attribute_display_name }}
+              </td>
+              <td
+                class="pl-0 max-w-[10rem] min-w-[6.25rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
+                {{ attribute.attribute_description }}
+              </td>
+              <td
+                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
+                {{ attribute.attribute_display_type }}
+              </td>
+              <td
+                class="attribute-key pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
+              >
+                {{ attribute.attribute_key }}
+              </td>
+              <td class="button-wrapper">
+                <woot-button
+                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
+                  variant="smooth"
+                  size="tiny"
+                  color-scheme="secondary"
+                  class-names="grey-btn"
+                  icon="edit"
+                  @click="openEditPopup(attribute)"
+                />
+                <woot-button
+                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
+                  icon="dismiss-circle"
+                  class-names="grey-btn"
+                  @click="openDelete(attribute)"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="hidden w-1/3 lg:block">
+      <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
+    </div>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <EditAttribute
         :selected-attribute="selectedAttribute"
@@ -162,4 +216,17 @@ const openDelete = value => {
 .attribute-key {
   font-family: monospace;
 }
+
+::v-deep {
+  .tabs--container {
+    .tabs {
+      @apply p-0;
+    }
+  }
+
+  .tabs-title a {
+    font-weight: var(--font-weight-medium);
+    padding-top: 0;
+  }
+}
 </style>

app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue

@@ -1,112 +1,40 @@
-<script setup>
-import { computed, onMounted, ref } from 'vue';
-import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+<script>
 import AddAttribute from './AddAttribute.vue';
 import CustomAttribute from './CustomAttribute.vue';
-import SettingsLayout from '../SettingsLayout.vue';
-import { useI18n } from 'dashboard/composables/useI18n';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-
-const { t } = useI18n();
-
-const getters = useStoreGetters();
-const store = useStore();
-
-const showAddPopup = ref(false);
-const selectedTabIndex = ref(0);
-const uiFlags = computed(() => getters['attributes/getUIFlags'].value);
-
-const openAddPopup = () => {
-  showAddPopup.value = true;
-};
-const hideAddPopup = () => {
-  showAddPopup.value = false;
-};
-
-const tabs = computed(() => {
-  return [
-    {
-      key: 0,
-      name: t('ATTRIBUTES_MGMT.TABS.CONVERSATION'),
+export default {
+  components: {
+    AddAttribute,
+    CustomAttribute,
+  },
+  data() {
+    return {
+      showAddPopup: false,
+    };
+  },
+  methods: {
+    openAddPopup() {
+      this.showAddPopup = true;
     },
-    {
-      key: 1,
-      name: t('ATTRIBUTES_MGMT.TABS.CONTACT'),
+    hideAddPopup() {
+      this.showAddPopup = false;
     },
-  ];
-});
-
-onMounted(() => {
-  store.dispatch('attributes/get');
-});
-
-const attributeModel = computed(() =>
-  selectedTabIndex.value ? 'contact_attribute' : 'conversation_attribute'
-);
-
-const attributes = computed(() =>
-  getters['attributes/getAttributesByModel'].value(attributeModel.value)
-);
-
-const onClickTabChange = index => {
-  selectedTabIndex.value = index;
+  },
 };
 </script>
 
 <template>
-  <SettingsLayout
-    :is-loading="uiFlags.isFetching"
-    :loading-message="$t('ATTRIBUTES_MGMT.LOADING')"
-    :no-records-found="!attributes.length"
-    :no-records-message="$t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404')"
-  >
-    <template #header>
-      <BaseSettingsHeader
-        :title="$t('ATTRIBUTES_MGMT.HEADER')"
-        :description="$t('ATTRIBUTES_MGMT.DESCRIPTION')"
-        :link-text="$t('ATTRIBUTES_MGMT.LEARN_MORE')"
-        feature-name="custom_attributes"
-      >
-        <template #actions>
-          <woot-button
-            class="button nice rounded-md"
-            icon="add-circle"
-            @click="openAddPopup"
-          >
-            {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
-          </woot-button>
-        </template>
-      </BaseSettingsHeader>
-    </template>
-    <template #preBody>
-      <woot-tabs
-        class="font-medium [&_.tabs]:p-0 mb-4"
-        :index="selectedTabIndex"
-        @change="onClickTabChange"
-      >
-        <woot-tabs-item
-          v-for="tab in tabs"
-          :key="tab.key"
-          :name="tab.name"
-          :show-badge="false"
-        />
-      </woot-tabs>
-    </template>
-    <template #body>
-      <CustomAttribute
-        :key="attributeModel"
-        :attribute-model="attributeModel"
-      />
-    </template>
-    <woot-modal
-      v-if="showAddPopup"
-      :show.sync="showAddPopup"
-      :on-close="hideAddPopup"
+  <div class="flex-1 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup()"
     >
-      <AddAttribute
-        :on-close="hideAddPopup"
-        :selected-attribute-model-tab="selectedTabIndex"
-      />
+      {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
+    </woot-button>
+    <CustomAttribute />
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <AddAttribute :on-close="hideAddPopup" />
     </woot-modal>
-  </SettingsLayout>
+  </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js

@@ -1,12 +1,17 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
+const SettingsContent = () => import('../Wrapper.vue');
 const AttributesHome = () => import('./Index.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/custom-attributes'),
-      component: SettingsWrapper,
+      component: SettingsContent,
+      props: {
+        headerTitle: 'ATTRIBUTES_MGMT.HEADER',
+        icon: 'code',
+        showNewButton: false,
+      },
       children: [
         {
           path: '',

app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue

@@ -1,17 +1,9 @@
 <script>
 import { mapGetters } from 'vuex';
+import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
 import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
 import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-import { useAutomation } from 'dashboard/composables/useAutomation';
-import { validateAutomation } from 'dashboard/helper/validations';
-import {
-  generateAutomationPayload,
-  getAttributes,
-  getInputType,
-  getOperators,
-  getCustomAttributeType,
-  showActionInput,
-} from 'dashboard/helper/automationHelper';
+
 import {
   AUTOMATION_RULE_EVENTS,
   AUTOMATION_ACTION_TYPES,
@@ -22,38 +14,13 @@ export default {
     FilterInputBox,
     AutomationActionInput,
   },
+  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
       default: () => {},
     },
   },
-  setup() {
-    const {
-      onEventChange,
-      getConditionDropdownValues,
-      appendNewCondition,
-      appendNewAction,
-      removeFilter,
-      removeAction,
-      resetFilter,
-      resetAction,
-      getActionDropdownValues,
-      manifestCustomAttributes,
-    } = useAutomation();
-    return {
-      onEventChange,
-      getConditionDropdownValues,
-      appendNewCondition,
-      appendNewAction,
-      removeFilter,
-      removeAction,
-      resetFilter,
-      resetAction,
-      getActionDropdownValues,
-      manifestCustomAttributes,
-    };
-  },
   data() {
     return {
       automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -115,24 +82,12 @@ export default {
     this.$store.dispatch('labels/get');
     this.$store.dispatch('campaigns/get');
     this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-    this.manifestCustomAttributes(this.automationTypes);
+    this.manifestCustomAttributes();
   },
   methods: {
-    getAttributes,
-    getInputType,
-    getOperators,
-    getCustomAttributeType,
-    showActionInput,
     isFeatureEnabled(flag) {
       return this.isFeatureEnabledonAccount(this.accountId, flag);
     },
-    emitSaveAutomation() {
-      this.errors = validateAutomation(this.automation);
-      if (Object.keys(this.errors).length === 0) {
-        const automation = generateAutomationPayload(this.automation);
-        this.$emit('saveAutomation', automation, this.mode);
-      }
-    },
   },
 };
 </script>
@@ -166,7 +121,7 @@ export default {
             <select
               v-model="automation.event_name"
               class="m-0"
-              @change="onEventChange(automation)"
+              @change="onEventChange()"
             >
               <option
                 v-for="event in automationRuleEvents"
@@ -199,26 +154,9 @@ export default {
               v-for="(condition, i) in automation.conditions"
               :key="i"
               v-model="automation.conditions[i]"
-              :filter-attributes="
-                getAttributes(automationTypes, automation.event_name)
-              "
-              :input-type="
-                getInputType(
-                  allCustomAttributes,
-                  automationTypes,
-                  automation,
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :operators="
-                getOperators(
-                  allCustomAttributes,
-                  automationTypes,
-                  automation,
-                  mode,
-                  automation.conditions[i].attribute_key
-                )
-              "
+              :filter-attributes="getAttributes(automation.event_name)"
+              :input-type="getInputType(automation.conditions[i].attribute_key)"
+              :operators="getOperators(automation.conditions[i].attribute_key)"
               :dropdown-values="
                 getConditionDropdownValues(
                   automation.conditions[i].attribute_key
@@ -226,26 +164,15 @@ export default {
               "
               :show-query-operator="i !== automation.conditions.length - 1"
               :custom-attribute-type="
-                getCustomAttributeType(
-                  automationTypes,
-                  automation,
-                  automation.conditions[i].attribute_key
-                )
+                getCustomAttributeType(automation.conditions[i].attribute_key)
               "
               :error-message="
                 errors[`condition_${i}`]
                   ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
                   : ''
               "
-              @resetFilter="
-                resetFilter(
-                  automation,
-                  automationTypes,
-                  i,
-                  automation.conditions[i]
-                )
-              "
-              @removeFilter="removeFilter(automation, i)"
+              @resetFilter="resetFilter(i, automation.conditions[i])"
+              @removeFilter="removeFilter(i)"
             />
             <div class="mt-4">
               <woot-button
@@ -253,7 +180,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewCondition(automation)"
+                @click="appendNewCondition"
               >
                 {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
               </woot-button>
@@ -278,18 +205,15 @@ export default {
                 getActionDropdownValues(automation.actions[i].action_name)
               "
               :show-action-input="
-                showActionInput(
-                  automationActionTypes,
-                  automation.actions[i].action_name
-                )
+                showActionInput(automation.actions[i].action_name)
               "
               :error-message="
                 errors[`action_${i}`]
                   ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
                   : ''
               "
-              @resetAction="resetAction(automation, i)"
-              @removeAction="removeAction(automation, i)"
+              @resetAction="resetAction(i)"
+              @removeAction="removeAction(i)"
             />
             <div class="mt-4">
               <woot-button
@@ -297,7 +221,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewAction(automation)"
+                @click="appendNewAction"
               >
                 {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
               </woot-button>
@@ -310,7 +234,7 @@ export default {
             <woot-button class="button clear" @click.prevent="onClose">
               {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
             </woot-button>
-            <woot-button @click="emitSaveAutomation">
+            <woot-button @click="submitAutomation">
               {{ $t('AUTOMATION.ADD.SUBMIT') }}
             </woot-button>
           </div>

app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue

@@ -1,18 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
-import { useAutomation } from 'dashboard/composables/useAutomation';
+import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
 import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
 import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-import {
-  getFileName,
-  generateAutomationPayload,
-  getAttributes,
-  getInputType,
-  getOperators,
-  getCustomAttributeType,
-  showActionInput,
-} from 'dashboard/helper/automationHelper';
-import { validateAutomation } from 'dashboard/helper/validations';
 
 import {
   AUTOMATION_RULE_EVENTS,
@@ -25,6 +15,7 @@ export default {
     FilterInputBox,
     AutomationActionInput,
   },
+  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
@@ -35,34 +26,6 @@ export default {
       default: () => {},
     },
   },
-  setup() {
-    const {
-      onEventChange,
-      getConditionDropdownValues,
-      appendNewCondition,
-      appendNewAction,
-      removeFilter,
-      removeAction,
-      resetFilter,
-      resetAction,
-      getActionDropdownValues,
-      formatAutomation,
-      manifestCustomAttributes,
-    } = useAutomation();
-    return {
-      onEventChange,
-      getConditionDropdownValues,
-      appendNewCondition,
-      appendNewAction,
-      removeFilter,
-      removeAction,
-      resetFilter,
-      resetAction,
-      getActionDropdownValues,
-      formatAutomation,
-      manifestCustomAttributes,
-    };
-  },
   data() {
     return {
       automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -98,33 +61,14 @@ export default {
     },
   },
   mounted() {
-    this.manifestCustomAttributes(this.automationTypes);
+    this.manifestCustomAttributes();
     this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-
-    this.automation = this.formatAutomation(
-      this.selectedResponse,
-      this.allCustomAttributes,
-      this.automationTypes,
-      this.automationActionTypes
-    );
+    this.formatAutomation(this.selectedResponse);
   },
   methods: {
-    getFileName,
-    getAttributes,
-    getInputType,
-    getOperators,
-    getCustomAttributeType,
-    showActionInput,
     isFeatureEnabled(flag) {
       return this.isFeatureEnabledonAccount(this.accountId, flag);
     },
-    emitSaveAutomation() {
-      this.errors = validateAutomation(this.automation);
-      if (Object.keys(this.errors).length === 0) {
-        const automation = generateAutomationPayload(this.automation);
-        this.$emit('saveAutomation', automation, this.mode);
-      }
-    },
   },
 };
 </script>
@@ -155,10 +99,7 @@ export default {
         <div class="event_wrapper">
           <label :class="{ error: errors.event_name }">
             {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select
-              v-model="automation.event_name"
-              @change="onEventChange(automation)"
-            >
+            <select v-model="automation.event_name" @change="onEventChange()">
               <option
                 v-for="event in automationRuleEvents"
                 :key="event.key"
@@ -184,37 +125,16 @@ export default {
               v-for="(condition, i) in automation.conditions"
               :key="i"
               v-model="automation.conditions[i]"
-              :filter-attributes="
-                getAttributes(automationTypes, automation.event_name)
-              "
-              :input-type="
-                getInputType(
-                  allCustomAttributes,
-                  automationTypes,
-                  automation,
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :operators="
-                getOperators(
-                  allCustomAttributes,
-                  automationTypes,
-                  automation,
-                  mode,
-                  automation.conditions[i].attribute_key
-                )
-              "
+              :filter-attributes="getAttributes(automation.event_name)"
+              :input-type="getInputType(automation.conditions[i].attribute_key)"
+              :operators="getOperators(automation.conditions[i].attribute_key)"
               :dropdown-values="
                 getConditionDropdownValues(
                   automation.conditions[i].attribute_key
                 )
               "
               :custom-attribute-type="
-                getCustomAttributeType(
-                  automationTypes,
-                  automation,
-                  automation.conditions[i].attribute_key
-                )
+                getCustomAttributeType(automation.conditions[i].attribute_key)
               "
               :show-query-operator="i !== automation.conditions.length - 1"
               :error-message="
@@ -222,15 +142,8 @@ export default {
                   ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
                   : ''
               "
-              @resetFilter="
-                resetFilter(
-                  automation,
-                  automationTypes,
-                  i,
-                  automation.conditions[i]
-                )
-              "
-              @removeFilter="removeFilter(automation, i)"
+              @resetFilter="resetFilter(i, automation.conditions[i])"
+              @removeFilter="removeFilter(i)"
             />
             <div class="mt-4">
               <woot-button
@@ -238,7 +151,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewCondition(automation)"
+                @click="appendNewCondition"
               >
                 {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
               </woot-button>
@@ -260,17 +173,15 @@ export default {
               v-model="automation.actions[i]"
               :action-types="automationActionTypes"
               :dropdown-values="getActionDropdownValues(action.action_name)"
-              :show-action-input="
-                showActionInput(automationActionTypes, action.action_name)
-              "
+              :show-action-input="showActionInput(action.action_name)"
               :error-message="
                 errors[`action_${i}`]
                   ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
                   : ''
               "
               :initial-file-name="getFileName(action, automation.files)"
-              @resetAction="resetAction(automation, i)"
-              @removeAction="removeAction(automation, i)"
+              @resetAction="resetAction(i)"
+              @removeAction="removeAction(i)"
             />
             <div class="mt-4">
               <woot-button
@@ -278,7 +189,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewAction(automation)"
+                @click="appendNewAction"
               >
                 {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
               </woot-button>
@@ -295,7 +206,7 @@ export default {
             >
               {{ $t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT') }}
             </woot-button>
-            <woot-button @click="emitSaveAutomation">
+            <woot-button @click="submitAutomation">
               {{ $t('AUTOMATION.EDIT.SUBMIT') }}
             </woot-button>
           </div>

app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue

@@ -1,5 +1,5 @@
 <script>
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 import { mapGetters } from 'vuex';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -7,12 +7,12 @@ import BillingItem from './components/BillingItem.vue';
 
 export default {
   components: { BillingItem },
+  mixins: [messageFormatterMixin],
   setup() {
     const { accountId } = useAccount();
-    const { formatMessage } = useMessageFormatter();
+
     return {
       accountId,
-      formatMessage,
     };
   },
   computed: {

app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue

@@ -4,7 +4,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import { useCampaign } from 'shared/composables/useCampaign';
+import campaignMixin from 'shared/mixins/campaignMixin';
 import WootDateTimePicker from 'dashboard/components/ui/DateTimePicker.vue';
 import { URLPattern } from 'urlpattern-polyfill';
 import { CAMPAIGNS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
@@ -14,9 +14,9 @@ export default {
     WootDateTimePicker,
     WootMessageEditor,
   },
+  mixins: [campaignMixin],
   setup() {
-    const { campaignType, isOngoingType, isOneOffType } = useCampaign();
-    return { v$: useVuelidate(), campaignType, isOngoingType, isOneOffType };
+    return { v$: useVuelidate() };
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import { useCampaign } from 'shared/composables/useCampaign';
+import campaignMixin from 'shared/mixins/campaignMixin';
 import CampaignsTable from './CampaignsTable.vue';
 import EditCampaign from './EditCampaign.vue';
 export default {
@@ -9,16 +9,13 @@ export default {
     CampaignsTable,
     EditCampaign,
   },
+  mixins: [campaignMixin],
   props: {
     type: {
       type: String,
       default: '',
     },
   },
-  setup() {
-    const { campaignType } = useCampaign();
-    return { campaignType };
-  },
   data() {
     return {
       showEditPopup: false,

app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue

@@ -1,7 +1,7 @@
 <script>
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import InboxName from 'dashboard/components/widgets/InboxName.vue';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { messageStamp } from 'shared/helpers/timeHelper';
 
 export default {
@@ -9,6 +9,7 @@ export default {
     UserAvatarWithName,
     InboxName,
   },
+  mixins: [messageFormatterMixin],
   props: {
     campaign: {
       type: Object,
@@ -19,12 +20,7 @@ export default {
       default: true,
     },
   },
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
+
   computed: {
     campaignStatus() {
       if (this.isOngoingType) {

app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue

@@ -1,7 +1,7 @@
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { useCampaign } from 'shared/composables/useCampaign';
+import campaignMixin from 'shared/mixins/campaignMixin';
 import CampaignCard from './CampaignCard.vue';
 
 export default {
@@ -10,6 +10,9 @@ export default {
     Spinner,
     CampaignCard,
   },
+
+  mixins: [campaignMixin],
+
   props: {
     campaigns: {
       type: Array,
@@ -24,10 +27,7 @@ export default {
       default: false,
     },
   },
-  setup() {
-    const { isOngoingType } = useCampaign();
-    return { isOngoingType };
-  },
+
   computed: {
     currentInboxId() {
       return this.$route.params.inboxId;

app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue

@@ -4,13 +4,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import { useCampaign } from 'shared/composables/useCampaign';
+import campaignMixin from 'shared/mixins/campaignMixin';
 import { URLPattern } from 'urlpattern-polyfill';
 
 export default {
   components: {
     WootMessageEditor,
   },
+  mixins: [campaignMixin],
   props: {
     selectedCampaign: {
       type: Object,
@@ -18,8 +19,7 @@ export default {
     },
   },
   setup() {
-    const { isOngoingType } = useCampaign();
-    return { v$: useVuelidate(), isOngoingType };
+    return { v$: useVuelidate() };
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue

@@ -1,5 +1,5 @@
 <script>
-import { useCampaign } from 'shared/composables/useCampaign';
+import campaignMixin from 'shared/mixins/campaignMixin';
 import Campaign from './Campaign.vue';
 import AddCampaign from './AddCampaign.vue';
 
@@ -8,10 +8,7 @@ export default {
     Campaign,
     AddCampaign,
   },
-  setup() {
-    const { isOngoingType } = useCampaign();
-    return { isOngoingType };
-  },
+  mixins: [campaignMixin],
   data() {
     return { showAddPopup: false };
   },

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -1,177 +1,219 @@
-<script setup>
+<script>
+import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { useAdmin } from 'dashboard/composables/useAdmin';
-import SettingsLayout from '../SettingsLayout.vue';
-import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
-import { computed, ref } from 'vue';
-import { useI18n } from 'dashboard/composables/useI18n';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import ChannelName from './components/ChannelName.vue';
+import { useAccount } from 'dashboard/composables/useAccount';
+import Settings from './Settings.vue';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
-const getters = useStoreGetters();
-const store = useStore();
-const { t } = useI18n();
-const { isAdmin } = useAdmin();
+export default {
+  components: {
+    Settings,
+  },
+  mixins: [globalConfigMixin],
+  setup() {
+    const { isAdmin } = useAdmin();
+    const { accountScopedUrl } = useAccount();
+    return {
+      isAdmin,
+      accountScopedUrl,
+    };
+  },
+  data() {
+    return {
+      loading: {},
+      showSettings: false,
+      showDeletePopup: false,
+      selectedInbox: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      inboxesList: 'inboxes/getInboxes',
+      globalConfig: 'globalConfig/get',
+    }),
+    // Delete Modal
+    deleteConfirmText() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${
+        this.selectedInbox.name
+      }`;
+    },
+    deleteRejectText() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${
+        this.selectedInbox.name
+      }`;
+    },
+    confirmDeleteMessage() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${
+        this.selectedInbox.name
+      }?`;
+    },
+    confirmPlaceHolderText() {
+      return `${this.$t('INBOX_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+        inboxName: this.selectedInbox.name,
+      })}`;
+    },
+  },
+  methods: {
+    twilioChannelName(item) {
+      const { medium = '' } = item;
+      if (medium === 'whatsapp') return 'WhatsApp';
+      return 'Twilio SMS';
+    },
+    openSettings(inbox) {
+      this.showSettings = true;
+      this.selectedInbox = inbox;
+    },
+    closeSettings() {
+      this.showSettings = false;
+      this.selectedInbox = {};
+    },
+    async deleteInbox({ id }) {
+      try {
+        await this.$store.dispatch('inboxes/delete', id);
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
+      }
+    },
 
-const showDeletePopup = ref(false);
-const selectedInbox = ref({});
-
-const inboxesList = computed(() => getters['inboxes/getInboxes'].value);
-const uiFlags = computed(() => getters['inboxes/getUIFlags'].value);
-
-const deleteConfirmText = computed(
-  () => `${t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${selectedInbox.value.name}`
-);
-
-const deleteRejectText = computed(
-  () => `${t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${selectedInbox.value.name}`
-);
-
-const confirmDeleteMessage = computed(
-  () => `${t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${selectedInbox.value.name}?`
-);
-const confirmPlaceHolderText = computed(
-  () =>
-    `${t('INBOX_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
-      inboxName: selectedInbox.value.name,
-    })}`
-);
-
-const deleteInbox = async ({ id }) => {
-  try {
-    await store.dispatch('inboxes/delete', id);
-    useAlert(t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
-  }
-};
-const closeDelete = () => {
-  showDeletePopup.value = false;
-  selectedInbox.value = {};
-};
-
-const confirmDeletion = () => {
-  deleteInbox(selectedInbox.value);
-  closeDelete();
-};
-const openDelete = inbox => {
-  showDeletePopup.value = true;
-  selectedInbox.value = inbox;
+    confirmDeletion() {
+      this.deleteInbox(this.selectedInbox);
+      this.closeDelete();
+    },
+    openDelete(inbox) {
+      this.showDeletePopup = true;
+      this.selectedInbox = inbox;
+    },
+    closeDelete() {
+      this.showDeletePopup = false;
+      this.selectedInbox = {};
+    },
+  },
 };
 </script>
 
 <template>
-  <SettingsLayout
-    :no-records-found="!inboxesList.length"
-    :no-records-message="$t('INBOX_MGMT.LIST.404')"
-    :is-loading="uiFlags.isFetching"
-  >
-    <template #header>
-      <BaseSettingsHeader
-        :title="$t('INBOX_MGMT.HEADER')"
-        :description="$t('INBOX_MGMT.DESCRIPTION')"
-        :link-text="$t('INBOX_MGMT.LEARN_MORE')"
-        feature-name="inboxes"
-      >
-        <template #actions>
+  <div class="flex-1 overflow-auto">
+    <div class="flex flex-row gap-4 p-8">
+      <div class="w-full lg:w-3/5">
+        <p
+          v-if="!inboxesList.length"
+          class="flex flex-col items-center justify-center h-full"
+        >
+          {{ $t('INBOX_MGMT.LIST.404') }}
           <router-link
             v-if="isAdmin"
-            class="button nice rounded-md"
-            :to="{ name: 'settings_inbox_new' }"
+            :to="accountScopedUrl('settings/inboxes/new')"
           >
-            <fluent-icon icon="add-circle" />
             {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
           </router-link>
-        </template>
-      </BaseSettingsHeader>
-    </template>
-    <template #body>
-      <table
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
-      >
-        <tbody
-          class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
-        >
-          <tr v-for="inbox in inboxesList" :key="inbox.id">
-            <td class="py-4 ltr:pr-4 rtl:pl-4">
-              <div class="flex items-center flex-row gap-4">
-                <Thumbnail
-                  v-if="inbox.avatar_url"
-                  class="bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
-                  :src="inbox.avatar_url"
-                  :username="inbox.name"
-                  size="48px"
+        </p>
+
+        <table v-if="inboxesList.length" class="woot-table">
+          <tbody>
+            <tr v-for="item in inboxesList" :key="item.id">
+              <td>
+                <img
+                  v-if="item.avatar_url"
+                  class="woot-thumbnail"
+                  :src="item.avatar_url"
+                  alt="No Page Image"
                 />
-                <div
+                <img
                   v-else
-                  class="w-12 h-12 bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm block"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="32"
-                    height="32"
-                    viewBox="0 0 24 24"
-                    class="opacity-80 p-1"
+                  class="woot-thumbnail"
+                  src="~dashboard/assets/images/flag.svg"
+                  alt="No Page Image"
+                />
+              </td>
+              <!-- Short Code  -->
+              <td>
+                <span class="agent-name">{{ item.name }}</span>
+                <span v-if="item.channel_type === 'Channel::FacebookPage'">
+                  {{ 'Facebook' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::WebWidget'">
+                  {{ 'Website' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::TwitterProfile'">
+                  {{ 'Twitter' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::TwilioSms'">
+                  {{ twilioChannelName(item) }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Whatsapp'">
+                  {{ 'Whatsapp' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Sms'">
+                  {{ 'Sms' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Email'">
+                  {{ 'Email' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Telegram'">
+                  {{ 'Telegram' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Line'">
+                  {{ 'Line' }}
+                </span>
+                <span v-if="item.channel_type === 'Channel::Api'">
+                  {{ globalConfig.apiChannelName || 'API' }}
+                </span>
+              </td>
+
+              <!-- Action Buttons -->
+              <td>
+                <div class="button-wrapper">
+                  <router-link
+                    :to="accountScopedUrl(`settings/inboxes/${item.id}`)"
                   >
-                    <path
-                      fill="currentColor"
-                      d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12"
-                      opacity=".35"
-                    />
-                    <path
-                      fill="currentColor"
-                      d="M2.61 21.389c1.612 1.61 4.205 1.61 9.39 1.61s7.778 0 9.39-1.61c1.492-1.493 1.601-3.829 1.61-8.29h-3.476c-.996 0-1.494 0-1.931.202c-.438.201-.762.58-1.41 1.335l-.666.777c-.648.756-.972 1.134-1.41 1.335s-.935.202-1.93.202h-.353c-.996 0-1.494 0-1.931-.202c-.438-.2-.762-.579-1.41-1.335l-.666-.777c-.648-.756-.972-1.134-1.41-1.335s-.935-.201-1.93-.201H1c.008 4.46.118 6.796 1.61 8.289"
+                    <woot-button
+                      v-if="isAdmin"
+                      v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
+                      variant="smooth"
+                      size="tiny"
+                      icon="settings"
+                      color-scheme="secondary"
+                      class-names="grey-btn"
                     />
-                  </svg>
-                </div>
-                <div>
-                  <span class="block font-medium capitalize">
-                    {{ inbox.name }}
-                  </span>
-                  <ChannelName
-                    :channel-type="inbox.channel_type"
-                    :medium="inbox.medium"
-                  />
-                </div>
-              </div>
-            </td>
+                  </router-link>
 
-            <td class="py-4">
-              <div class="flex gap-1 justify-end">
-                <router-link
-                  :to="{
-                    name: 'settings_inbox_show',
-                    params: { inboxId: inbox.id },
-                  }"
-                >
                   <woot-button
                     v-if="isAdmin"
-                    v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
+                    v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
                     variant="smooth"
+                    color-scheme="alert"
                     size="tiny"
-                    icon="settings"
-                    color-scheme="secondary"
                     class-names="grey-btn"
+                    :is-loading="loading[item.id]"
+                    icon="dismiss-circle"
+                    @click="openDelete(item)"
                   />
-                </router-link>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
-                <woot-button
-                  v-if="isAdmin"
-                  v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  class-names="grey-btn"
-                  icon="dismiss-circle"
-                  @click="openDelete(inbox)"
-                />
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </template>
+      <div class="hidden w-1/3 lg:block">
+        <span
+          v-dompurify-html="
+            useInstallationName(
+              $t('INBOX_MGMT.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
+      </div>
+    </div>
+    <Settings
+      v-if="showSettings"
+      :show.sync="showSettings"
+      :on-close="closeSettings"
+      :inbox="selectedInbox"
+    />
 
     <woot-confirm-delete-modal
       v-if="showDeletePopup"
@@ -185,5 +227,5 @@ const openDelete = inbox => {
       @onConfirm="confirmDeletion"
       @onClose="closeDelete"
     />
-  </SettingsLayout>
+  </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue

@@ -1,55 +0,0 @@
-<script setup>
-import { useI18n } from 'dashboard/composables/useI18n';
-import { useStoreGetters } from 'dashboard/composables/store';
-import { computed } from 'vue';
-
-const props = defineProps({
-  channelType: {
-    type: String,
-    required: true,
-  },
-  medium: {
-    type: String,
-    default: '',
-  },
-});
-const getters = useStoreGetters();
-const { t } = useI18n();
-const globalConfig = computed(() => getters['globalConfig/get'].value);
-
-const i18nMap = {
-  'Channel::FacebookPage': 'MESSENGER',
-  'Channel::WebWidget': 'WEB_WIDGET',
-  'Channel::TwitterProfile': 'TWITTER_PROFILE',
-  'Channel::TwilioSms': 'TWILIO_SMS',
-  'Channel::Whatsapp': 'WHATSAPP',
-  'Channel::Sms': 'SMS',
-  'Channel::Email': 'EMAIL',
-  'Channel::Telegram': 'TELEGRAM',
-  'Channel::Line': 'LINE',
-  'Channel::Api': 'API',
-};
-
-const twilioChannelName = () => {
-  if (props.medium === 'whatsapp') {
-    return t(`INBOX_MGMT.CHANNELS.WHATSAPP`);
-  }
-  return t(`INBOX_MGMT.CHANNELS.TWILIO_SMS`);
-};
-
-const readableChannelName = computed(() => {
-  if (props.channelType === 'Channel::Api') {
-    return globalConfig.value.apiChannelName || t('INBOX_MGMT.CHANNELS.API');
-  }
-  if (props.channelType === 'Channel::TwilioSms') {
-    return twilioChannelName();
-  }
-  return t(`INBOX_MGMT.CHANNELS.${i18nMap[props.channelType]}`);
-});
-</script>
-
-<template>
-  <span>
-    {{ readableChannelName }}
-  </span>
-</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js

@@ -1,8 +1,8 @@
+/* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../../helper/URLHelper';
 import channelFactory from './channel-factory';
 
 const SettingsContent = () => import('../Wrapper.vue');
-const SettingWrapper = () => import('../SettingsWrapper.vue');
 const InboxHome = () => import('./Index.vue');
 const Settings = () => import('./Settings.vue');
 const InboxChannel = () => import('./InboxChannels.vue');
@@ -12,24 +12,6 @@ const FinishSetup = () => import('./FinishSetup.vue');
 
 export default {
   routes: [
-    {
-      path: frontendURL('accounts/:accountId/settings/inboxes'),
-      component: SettingWrapper,
-      children: [
-        {
-          path: '',
-          redirect: 'list',
-        },
-        {
-          path: 'list',
-          name: 'settings_inbox_list',
-          component: InboxHome,
-          meta: {
-            permissions: ['administrator'],
-          },
-        },
-      ],
-    },
     {
       path: frontendURL('accounts/:accountId/settings/inboxes'),
       component: SettingsContent,
@@ -44,6 +26,18 @@ export default {
         };
       },
       children: [
+        {
+          path: '',
+          redirect: 'list',
+        },
+        {
+          path: 'list',
+          name: 'settings_inbox_list',
+          component: InboxHome,
+          meta: {
+            permissions: ['administrator'],
+          },
+        },
         {
           path: 'new',
           component: InboxChannel,

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Integration from './Integration.vue';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SelectChannelWarning from './Slack/SelectChannelWarning.vue';
 import SlackIntegrationHelpText from './Slack/SlackIntegrationHelpText.vue';
 import Spinner from 'shared/components/Spinner.vue';
@@ -12,7 +13,7 @@ export default {
     SelectChannelWarning,
     SlackIntegrationHelpText,
   },
-  mixins: [globalConfigMixin],
+  mixins: [globalConfigMixin, messageFormatterMixin],
   props: {
     code: { type: String, default: '' },
   },

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue

@@ -2,22 +2,16 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
-  mixins: [globalConfigMixin],
+  mixins: [globalConfigMixin, messageFormatterMixin],
   props: {
     hasConnectedAChannel: {
       type: Boolean,
       default: true,
     },
   },
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
   data() {
     return { selectedChannelId: '', availableChannels: [] };
   },

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue

@@ -1,18 +1,13 @@
 <script>
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 export default {
+  mixins: [messageFormatterMixin],
   props: {
     selectedChannelName: {
       type: String,
       required: true,
     },
   },
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
 };
 </script>
 

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue

@@ -3,18 +3,16 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import NewWebhook from './NewWebHook.vue';
 import EditWebhook from './EditWebHook.vue';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import WebhookRow from './WebhookRow.vue';
-import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
-import SettingsLayout from '../../SettingsLayout.vue';
 
 export default {
   components: {
-    SettingsLayout,
-    BaseSettingsHeader,
     NewWebhook,
     EditWebhook,
     WebhookRow,
   },
+  mixins: [globalConfigMixin],
   data() {
     return {
       loading: {},
@@ -28,10 +26,8 @@ export default {
     ...mapGetters({
       records: 'webhooks/getWebhooks',
       uiFlags: 'webhooks/getUIFlags',
+      globalConfig: 'globalConfig/get',
     }),
-    integration() {
-      return this.$store.getters['integrations/getIntegration']('webhook');
-    },
   },
   mounted() {
     this.$store.dispatch('webhooks/get');
@@ -79,59 +75,69 @@ export default {
 </script>
 
 <template>
-  <SettingsLayout
-    :is-loading="uiFlags.fetchingList"
-    :loading-message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
-    :no-records-message="$t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404')"
-    :no-records-found="!records.length"
-  >
-    <template #header>
-      <BaseSettingsHeader
-        v-if="integration.name"
-        :title="integration.name"
-        :description="integration.description"
-        :link-text="$t('INTEGRATION_SETTINGS.WEBHOOK.LEARN_MORE')"
-        feature-name="webhook"
-        :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
-      >
-        <template #actions>
-          <woot-button
-            class="button nice rounded-md"
-            icon="add-circle"
-            @click="openAddPopup"
-          >
-            {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
-          </woot-button>
-        </template>
-      </BaseSettingsHeader>
-    </template>
-    <template #body>
-      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
-        <thead>
-          <th
-            v-for="thHeader in $t(
-              'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
-            )"
-            :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300 last:text-right last:pr-4"
-          >
-            {{ thHeader }}
-          </th>
-        </thead>
-        <tbody
-          class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
+  <div class="flex-1 p-4 overflow-auto">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="add-circle"
+      @click="openAddPopup"
+    >
+      {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
+    </woot-button>
+
+    <div class="flex flex-row gap-4">
+      <div class="w-full lg:w-3/5">
+        <p
+          v-if="!uiFlags.fetchingList && !records.length"
+          class="flex flex-col items-center justify-center h-full"
         >
-          <WebhookRow
-            v-for="(webHookItem, index) in records"
-            :key="webHookItem.id"
-            :index="index"
-            :webhook="webHookItem"
-            @edit="openEditPopup"
-            @delete="openDeletePopup"
-          />
-        </tbody>
-      </table>
-    </template>
+          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404') }}
+        </p>
+        <woot-loading-state
+          v-if="uiFlags.fetchingList"
+          :message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
+        />
+
+        <table
+          v-if="!uiFlags.fetchingList && records.length"
+          class="woot-table"
+        >
+          <thead>
+            <th
+              v-for="thHeader in $t(
+                'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
+              )"
+              :key="thHeader"
+              class="last:text-right"
+            >
+              {{ thHeader }}
+            </th>
+          </thead>
+          <tbody>
+            <WebhookRow
+              v-for="(webHookItem, index) in records"
+              :key="webHookItem.id"
+              :index="index"
+              :webhook="webHookItem"
+              @edit="openEditPopup"
+              @delete="openDeletePopup"
+            />
+          </tbody>
+        </table>
+      </div>
+
+      <div class="hidden w-1/3 lg:block">
+        <span
+          v-dompurify-html="
+            useInstallationName(
+              $t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
+      </div>
+    </div>
+
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
       <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
     </woot-modal>
@@ -157,5 +163,5 @@ export default {
       :confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
       :reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
     />
-  </SettingsLayout>
+  </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue

@@ -1,8 +1,8 @@
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, url, minLength } from '@vuelidate/validators';
+import webhookMixin from './webhookMixin';
 import wootConstants from 'dashboard/constants/globals';
-import { getEventNamei18n } from './webhookHelper';
 
 const { EXAMPLE_WEBHOOK_URL } = wootConstants;
 
@@ -18,6 +18,7 @@ const SUPPORTED_WEBHOOK_EVENTS = [
 ];
 
 export default {
+  mixins: [webhookMixin],
   props: {
     value: {
       type: Object,
@@ -69,7 +70,6 @@ export default {
         subscriptions: this.subscriptions,
       });
     },
-    getEventNamei18n,
   },
 };
 </script>
@@ -105,10 +105,10 @@ export default {
             type="checkbox"
             :value="event"
             name="subscriptions"
-            class="mr-2"
+            class="checkbox"
           />
           <label :for="event" class="text-sm">
-            {{ `${$t(getEventNamei18n(event))} (${event})` }}
+            {{ `${getEventLabel(event)} (${event})` }}
           </label>
         </div>
       </div>
@@ -129,3 +129,9 @@ export default {
     </div>
   </form>
 </template>
+
+<style lang="scss" scoped>
+.checkbox {
+  @apply mr-2;
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue

@@ -1,58 +1,59 @@
-<script setup>
-import { computed } from 'vue';
-import { getEventNamei18n } from './webhookHelper';
+<script>
+import webhookMixin from './webhookMixin';
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
-import { useI18n } from 'dashboard/composables/useI18n';
 
-const props = defineProps({
-  webhook: {
-    type: Object,
-    required: true,
+export default {
+  components: { ShowMore },
+  mixins: [webhookMixin],
+  props: {
+    webhook: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
   },
-  index: {
-    type: Number,
-    required: true,
+  computed: {
+    subscribedEvents() {
+      const { subscriptions } = this.webhook;
+      return subscriptions.map(event => this.getEventLabel(event)).join(', ');
+    },
   },
-});
-const { t } = useI18n();
-const subscribedEvents = computed(() => {
-  const { subscriptions } = props.webhook;
-  return subscriptions.map(event => t(getEventNamei18n(event))).join(', ');
-});
+};
 </script>
 
 <template>
-  <tr>
-    <td class="py-4 ltr:pr-4 rtl:pl-4">
+  <tr class="space-x-2">
+    <td class="max-w-2xl">
       <div class="font-medium break-words text-slate-700 dark:text-slate-100">
         {{ webhook.url }}
       </div>
-      <div class="text-sm text-slate-500 dark:text-slate-400 block mt-1">
+      <span class="text-xs text-slate-500 dark:text-slate-400">
         <span class="font-medium">
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
         </span>
         <ShowMore :text="subscribedEvents" :limit="60" />
-      </div>
+      </span>
     </td>
-    <td class="py-4 min-w-xs">
-      <div class="flex gap-1 justify-end">
-        <woot-button
-          v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
-          variant="smooth"
-          size="tiny"
-          color-scheme="secondary"
-          icon="edit"
-          @click="$emit('edit', webhook)"
-        />
-        <woot-button
-          v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
-          variant="smooth"
-          color-scheme="alert"
-          size="tiny"
-          icon="dismiss-circle"
-          @click="$emit('delete', webhook, index)"
-        />
-      </div>
+    <td class="min-w-[7rem] flex gap-1 justify-end flex-shrink-0">
+      <woot-button
+        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
+        variant="smooth"
+        size="tiny"
+        color-scheme="secondary"
+        icon="edit"
+        @click="$emit('edit', webhook)"
+      />
+      <woot-button
+        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="dismiss-circle"
+        @click="$emit('delete', webhook, index)"
+      />
     </td>
   </tr>
 </template>

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/specs/webhookHelper.spec.js

@@ -1,9 +0,0 @@
-import { getEventNamei18n } from '../webhookHelper';
-
-describe('#getEventNamei18n', () => {
-  it('returns correct i18n translation text', () => {
-    expect(getEventNamei18n('message_created')).toEqual(
-      `INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.MESSAGE_CREATED`
-    );
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/specs/webhookMixin.spec.js

@@ -0,0 +1,26 @@
+import { createWrapper } from '@vue/test-utils';
+import webhookMixin from '../webhookMixin';
+import Vue from 'vue';
+
+describe('webhookMixin', () => {
+  describe('#getEventLabel', () => {
+    it('returns correct i18n translation:', () => {
+      const Component = {
+        render() {},
+        title: 'WebhookComponent',
+        mixins: [webhookMixin],
+        methods: {
+          $t(text) {
+            return text;
+          },
+        },
+      };
+      const Constructor = Vue.extend(Component);
+      const vm = new Constructor().$mount();
+      const wrapper = createWrapper(vm);
+      expect(wrapper.vm.getEventLabel('message_created')).toEqual(
+        `INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.MESSAGE_CREATED`
+      );
+    });
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/webhookHelper.js

@@ -1,4 +0,0 @@
-export const getEventNamei18n = event => {
-  const eventName = event.toUpperCase();
-  return `INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.${eventName}`;
-};

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/webhookMixin.js

@@ -0,0 +1,10 @@
+export default {
+  methods: {
+    getEventLabel(event) {
+      const eventName = event.toUpperCase();
+      return this.$t(
+        `INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.${eventName}`
+      );
+    },
+  },
+};

app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js

@@ -30,14 +30,6 @@ export default {
             permissions: ['administrator'],
           },
         },
-        {
-          path: 'webhook',
-          component: Webhook,
-          name: 'settings_integrations_webhook',
-          meta: {
-            permissions: ['administrator'],
-          },
-        },
       ],
     },
     {
@@ -57,6 +49,14 @@ export default {
         };
       },
       children: [
+        {
+          path: 'webhook',
+          component: Webhook,
+          name: 'settings_integrations_webhook',
+          meta: {
+            permissions: ['administrator'],
+          },
+        },
         {
           path: 'slack',
           name: 'settings_integrations_slack',

app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue

@@ -3,6 +3,7 @@ import { useAlert } from 'dashboard/composables';
 import BotMetrics from './components/BotMetrics.vue';
 import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
+import reportMixin from 'dashboard/mixins/reportMixin';
 import ReportContainer from './ReportContainer.vue';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
@@ -13,6 +14,7 @@ export default {
     ReportFilterSelector,
     ReportContainer,
   },
+  mixins: [reportMixin],
   data() {
     return {
       from: 0,

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -4,6 +4,7 @@ import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
+import reportMixin from 'dashboard/mixins/reportMixin';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import ReportContainer from './ReportContainer.vue';
 
@@ -23,6 +24,7 @@ export default {
     ReportFilterSelector,
     ReportContainer,
   },
+  mixins: [reportMixin],
   data() {
     return {
       from: 0,

app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue

@@ -1,23 +1,19 @@
 <script>
-import { mapGetters } from 'vuex';
-import { useReportMetrics } from 'dashboard/composables/useReportMetrics';
 import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import { formatTime } from '@chatwoot/utils';
+import reportMixin from 'dashboard/mixins/reportMixin';
 import ChartStats from './components/ChartElements/ChartStats.vue';
 
 export default {
   components: { ChartStats },
+  mixins: [reportMixin],
   props: {
     groupBy: {
       type: Object,
       default: () => ({}),
     },
-    accountSummaryKey: {
-      type: String,
-      default: 'getAccountSummary',
-    },
     reportKeys: {
       type: Object,
       default: () => ({
@@ -31,16 +27,7 @@ export default {
       }),
     },
   },
-  setup(props) {
-    const { calculateTrend, isAverageMetricType } = useReportMetrics(
-      props.accountSummaryKey
-    );
-    return { calculateTrend, isAverageMetricType };
-  },
   computed: {
-    ...mapGetters({
-      accountReport: 'getAccountReports',
-    }),
     metrics() {
       const reportKeys = Object.keys(this.reportKeys);
       const infoText = {
@@ -134,12 +121,12 @@ export default {
 
 <template>
   <div
-    class="grid grid-cols-1 p-2 bg-white border rounded-md md:grid-cols-2 lg:grid-cols-3 dark:bg-slate-800 border-slate-100 dark:border-slate-700"
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-white dark:bg-slate-800 p-2 border border-slate-100 dark:border-slate-700 rounded-md"
   >
     <div
       v-for="metric in metrics"
       :key="metric.KEY"
-      class="p-4 mb-3 rounded-md"
+      class="p-4 rounded-md mb-3"
     >
       <ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
       <div class="mt-4 h-72">
@@ -148,12 +135,12 @@ export default {
           class="text-xs"
           :message="$t('REPORT.LOADING_CHART')"
         />
-        <div v-else class="flex items-center justify-center h-72">
+        <div v-else class="h-72 flex items-center justify-center">
           <woot-bar
             v-if="accountReport.data[metric.KEY].length"
             :collection="getCollection(metric)"
             :chart-options="getChartOptions(metric)"
-            class="w-full h-72"
+            class="h-72 w-full"
           />
           <span v-else class="text-sm text-slate-600">
             {{ $t('REPORT.NO_ENOUGH_DATA') }}

app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue

@@ -1,30 +1,25 @@
-<script setup>
-import { useReportMetrics } from 'dashboard/composables/useReportMetrics';
-
-const props = defineProps({
-  metric: {
-    type: Object,
-    default: () => ({}),
+<script>
+import reportMixin from 'dashboard/mixins/reportMixin';
+export default {
+  mixins: [reportMixin],
+  props: {
+    metric: {
+      type: Object,
+      default: () => ({}),
+    },
   },
-  accountSummaryKey: {
-    type: String,
-    default: 'getAccountSummary',
+  methods: {
+    trendColor(value, key) {
+      if (this.isAverageMetricType(key)) {
+        return value > 0
+          ? 'border-red-500 text-red-500'
+          : 'border-green-500 text-green-500';
+      }
+      return value < 0
+        ? 'border-red-500 text-red-500'
+        : 'border-green-500 text-green-500';
+    },
   },
-});
-
-const { calculateTrend, displayMetric, isAverageMetricType } = useReportMetrics(
-  props.accountSummaryKey
-);
-
-const trendColor = (value, key) => {
-  if (isAverageMetricType(key)) {
-    return value > 0
-      ? 'border-red-500 text-red-500'
-      : 'border-green-500 text-green-500';
-  }
-  return value < 0
-    ? 'border-red-500 text-red-500'
-    : 'border-green-500 text-green-500';
 };
 </script>
 
@@ -34,7 +29,7 @@ const trendColor = (value, key) => {
       {{ metric.NAME }}
     </span>
     <div class="flex items-end">
-      <div class="text-xl font-medium">
+      <div class="font-medium text-xl">
         {{ displayMetric(metric.KEY) }}
       </div>
       <div v-if="metric.trend" class="text-xs ml-4 flex items-center mb-0.5">