chore: add packages

.env.example

@@ -23,9 +23,6 @@ FORCE_SSL=false
 ENABLE_ACCOUNT_SIGNUP=false
 
 # Redis config
-# specify the configs via single URL or individual variables
-# ref: https://www.iana.org/assignments/uri-schemes/prov/redis
-# You can also use the following format for the URL: redis://:password@host:port/db_number
 REDIS_URL=redis://redis:6379
 # If you are using docker-compose, set this variable's value to be any string,
 # which will be the password for the redis service running inside the docker-compose

Gemfile

@@ -71,13 +71,13 @@ gem 'barnes'
 ##--- gems for authentication & authorization ---##
 gem 'devise', '>= 4.9.4'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
-gem 'devise_token_auth', '>= 1.2.3'
+gem 'devise_token_auth'
 # authorization
 gem 'jwt'
 gem 'pundit'
 # super admin
 gem 'administrate', '>= 0.20.1'
-gem 'administrate-field-active_storage', '>= 1.0.2'
+gem 'administrate-field-active_storage', '>= 1.0.1'
 gem 'administrate-field-belongs_to_search', '>= 0.9.0'
 
 ##--- gems for pubsub service ---##
@@ -113,10 +113,10 @@ gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
 gem 'sentry-rails', '>= 5.14.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.15.0', require: false
+gem 'sentry-sidekiq', '>= 5.14.0', require: false
 
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.2.4'
+gem 'sidekiq', '>= 7.2.1'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
 
@@ -166,7 +166,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
 gem 'omniauth-google-oauth2', '>= 1.1.2'
-gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'
+gem 'omniauth-rails_csrf_protection', '~> 1.0'
 
 ## Gems for reponse bot
 # adds cosine similarity to postgres using vector extension

Gemfile.lock

@@ -113,7 +113,7 @@ GEM
       kaminari (~> 1.2.2)
       sassc-rails (~> 2.1)
       selectize-rails (~> 0.6)
-    administrate-field-active_storage (1.0.2)
+    administrate-field-active_storage (1.0.1)
       administrate (>= 0.2.2)
       rails (>= 7.0)
     administrate-field-belongs_to_search (0.9.0)
@@ -148,9 +148,8 @@ GEM
     barnes (0.0.9)
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
-    base64 (0.2.0)
+    base64 (0.1.1)
     bcrypt (3.1.20)
-    bigdecimal (3.1.7)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
@@ -200,10 +199,10 @@ GEM
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
-    devise_token_auth (1.2.3)
+    devise_token_auth (1.2.1)
       bcrypt (~> 3.0)
       devise (> 3.5.2, < 5)
-      rails (>= 4.2.0, < 7.2)
+      rails (>= 4.2.0, < 7.1)
     diff-lcs (1.5.0)
     digest-crc (0.6.4)
       rake (>= 12.0.0, < 14.0.0)
@@ -369,7 +368,7 @@ GEM
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.14.5)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
@@ -448,13 +447,13 @@ GEM
       net-imap
       net-pop
       net-smtp
-    marcel (1.0.4)
+    marcel (1.0.2)
     maxminddb (0.1.22)
     memoist (0.16.2)
     meta_request (0.8.2)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
-    method_source (1.1.0)
+    method_source (1.0.0)
     mime-types (3.4.1)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2023.0218.1)
@@ -474,7 +473,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.11)
+    net-imap (0.4.9)
       date
       net-protocol
     net-pop (0.1.2)
@@ -489,15 +488,15 @@ GEM
       sidekiq
     newrelic_rpm (9.6.0)
       base64
-    nio4r (2.7.3)
-    nokogiri (1.16.5)
+    nio4r (2.7.0)
+    nokogiri (1.16.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.5-arm64-darwin)
+    nokogiri (1.16.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-darwin)
+    nokogiri (1.16.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-linux)
+    nokogiri (1.16.4-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -524,7 +523,7 @@ GEM
     omniauth-oauth2 (1.8.0)
       oauth2 (>= 1.4, < 3)
       omniauth (~> 2.0)
-    omniauth-rails_csrf_protection (1.0.2)
+    omniauth-rails_csrf_protection (1.0.1)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
     openssl (3.1.0)
@@ -604,7 +603,7 @@ GEM
       ffi (~> 1.0)
     redis (5.0.6)
       redis-client (>= 0.9.0)
-    redis-client (0.22.1)
+    redis-client (0.19.1)
       connection_pool
     redis-namespace (1.10.0)
       redis (>= 4)
@@ -703,19 +702,18 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.17.3)
+    sentry-rails (5.14.0)
       railties (>= 5.0)
-      sentry-ruby (~> 5.17.3)
-    sentry-ruby (5.17.3)
-      bigdecimal
+      sentry-ruby (~> 5.14.0)
+    sentry-ruby (5.14.0)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.17.3)
-      sentry-ruby (~> 5.17.3)
+    sentry-sidekiq (5.14.0)
+      sentry-ruby (~> 5.14.0)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.2.4)
+    sidekiq (7.2.1)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)
@@ -819,7 +817,7 @@ GEM
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.6.14)
+    zeitwerk (2.6.13)
 
 PLATFORMS
   arm64-darwin-20
@@ -837,7 +835,7 @@ DEPENDENCIES
   activerecord-import
   acts-as-taggable-on
   administrate (>= 0.20.1)
-  administrate-field-active_storage (>= 1.0.2)
+  administrate-field-active_storage (>= 1.0.1)
   administrate-field-belongs_to_search (>= 0.9.0)
   annotate
   attr_extras
@@ -860,7 +858,7 @@ DEPENDENCIES
   debug (~> 1.8)
   devise (>= 4.9.4)
   devise-secure_password!
-  devise_token_auth (>= 1.2.3)
+  devise_token_auth
   dotenv-rails
   down
   elastic-apm
@@ -904,7 +902,7 @@ DEPENDENCIES
   omniauth (>= 2.1.2)
   omniauth-google-oauth2 (>= 1.1.2)
   omniauth-oauth2
-  omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
+  omniauth-rails_csrf_protection (~> 1.0)
   pg
   pg_search
   pgvector
@@ -933,9 +931,9 @@ DEPENDENCIES
   seed_dump
   sentry-rails (>= 5.14.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.15.0)
+  sentry-sidekiq (>= 5.14.0)
   shoulda-matchers
-  sidekiq (>= 7.2.4)
+  sidekiq (>= 7.2.1)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.2.0)

app.json

@@ -55,7 +55,7 @@
       "plan": "heroku-redis:mini"
     },
     {
-      "plan": "heroku-postgresql:essential-0"
+      "plan": "heroku-postgresql:mini"
     }
   ],
   "stack": "heroku-20",

app/builders/contact_inbox_with_contact_builder.rb

@@ -19,9 +19,9 @@ class ContactInboxWithContactBuilder
 
     ActiveRecord::Base.transaction(requires_new: true) do
       build_contact_with_contact_inbox
+      update_contact_avatar(@contact) unless @contact.avatar.attached?
+      @contact_inbox
     end
-    update_contact_avatar(@contact) unless @contact.avatar.attached?
-    @contact_inbox
   end
 
   private

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

@@ -21,6 +21,6 @@ class Api::V1::Accounts::BulkActionsController < Api::V1::Accounts::BaseControll
   end
 
   def permitted_params
-    params.permit(:type, :snoozed_until, ids: [], fields: [:status, :assignee_id, :team_id], labels: [add: [], remove: []])
+    params.permit(:type, ids: [], fields: [:status, :assignee_id, :team_id], labels: [add: [], remove: []])
   end
 end

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

@@ -46,8 +46,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
 
   def export
     column_names = params['column_names']
-    filter_params = { :payload => params.permit!['payload'], :label => params.permit!['label'] }
-    Account::ContactsExportJob.perform_later(Current.account.id, Current.user.id, column_names, filter_params)
+    Account::ContactsExportJob.perform_later(Current.account.id, column_names, Current.user.email)
     head :ok, message: I18n.t('errors.contacts.export.success')
   end
 
@@ -62,7 +61,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   def show; end
 
   def filter
-    result = ::Contacts::FilterService.new(Current.account, Current.user, params.permit!).perform
+    result = ::Contacts::FilterService.new(params.permit!, current_user).perform
     contacts = result[:contacts]
     @contacts_count = result[:count]
     @contacts = fetch_contacts(contacts)

app/controllers/api/v1/accounts/conversations/draft_messages_controller.rb

@@ -1,28 +0,0 @@
-class Api::V1::Accounts::Conversations::DraftMessagesController < Api::V1::Accounts::Conversations::BaseController
-  def show
-    render json: { has_draft: false } and return unless Redis::Alfred.exists?(draft_redis_key)
-
-    draft_message = Redis::Alfred.get(draft_redis_key)
-    render json: { has_draft: true, message: draft_message }
-  end
-
-  def update
-    Redis::Alfred.set(draft_redis_key, draft_message_params)
-    head :ok
-  end
-
-  def destroy
-    Redis::Alfred.delete(draft_redis_key)
-    head :ok
-  end
-
-  private
-
-  def draft_redis_key
-    format(Redis::Alfred::CONVERSATION_DRAFT_MESSAGE, id: @conversation.id)
-  end
-
-  def draft_message_params
-    params.dig(:draft_message, :message) || ''
-  end
-end

app/controllers/api/v1/accounts/integrations/linear_controller.rb

@@ -1,92 +0,0 @@
-class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::BaseController
-  before_action :fetch_conversation, only: [:link_issue, :linked_issue]
-
-  def teams
-    teams = linear_processor_service.teams
-    if teams.is_a?(Hash) && teams[:error]
-      render json: { error: teams[:error] }, status: :unprocessable_entity
-    else
-      render json: teams, status: :ok
-    end
-  end
-
-  def team_entities
-    team_id = params[:team_id]
-    entites = linear_processor_service.team_entities(team_id)
-    if entites.is_a?(Hash) && entites[:error]
-      render json: { error: entites[:error] }, status: :unprocessable_entity
-    else
-      render json: entites, status: :ok
-    end
-  end
-
-  def create_issue
-    issue = linear_processor_service.create_issue(permitted_params)
-    if issue.is_a?(Hash) && issue[:error]
-      render json: { error: issue[:error] }, status: :unprocessable_entity
-    else
-      render json: issue, status: :ok
-    end
-  end
-
-  def link_issue
-    issue_id = params[:issue_id]
-    issue = linear_processor_service.link_issue(conversation_link, issue_id)
-    if issue.is_a?(Hash) && issue[:error]
-      render json: { error: issue[:error] }, status: :unprocessable_entity
-    else
-      render json: issue, status: :ok
-    end
-  end
-
-  def unlink_issue
-    link_id = params[:link_id]
-    issue = linear_processor_service.unlink_issue(link_id)
-
-    if issue.is_a?(Hash) && issue[:error]
-      render json: { error: issue[:error] }, status: :unprocessable_entity
-    else
-      render json: issue, status: :ok
-    end
-  end
-
-  def linked_issue
-    issues = linear_processor_service.linked_issue(conversation_link)
-
-    if issues.is_a?(Hash) && issues[:error]
-      render json: { error: issues[:error] }, status: :unprocessable_entity
-    else
-      render json: issues, status: :ok
-    end
-  end
-
-  def search_issue
-    render json: { error: 'Specify search string with parameter q' }, status: :unprocessable_entity if params[:q].blank? && return
-
-    term = params[:q]
-    issues = linear_processor_service.search_issue(term)
-    if issues.is_a?(Hash) && issues[:error]
-      render json: { error: issues[:error] }, status: :unprocessable_entity
-    else
-      render json: issues, status: :ok
-    end
-  end
-
-  private
-
-  def conversation_link
-    "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{Current.account.id}/conversations/#{@conversation.display_id}"
-  end
-
-  def fetch_conversation
-    @conversation = Current.account.conversations.find_by!(display_id: permitted_params[:conversation_id])
-  end
-
-  def linear_processor_service
-    Integrations::Linear::ProcessorService.new(account: Current.account)
-  end
-
-  def permitted_params
-    params.permit(:team_id, :conversation_id, :issue_id, :link_id, :title, :description, :assignee_id, :priority, label_ids: [])
-  end
-end

app/dispatchers/async_dispatcher.rb

@@ -10,15 +10,14 @@ class AsyncDispatcher < BaseDispatcher
 
   def listeners
     [
-      AutomationRuleListener.instance,
       CampaignListener.instance,
       CsatSurveyListener.instance,
       HookListener.instance,
       InstallationWebhookListener.instance,
       NotificationListener.instance,
-      ParticipationListener.instance,
       ReportingEventListener.instance,
-      WebhookListener.instance
+      WebhookListener.instance,
+      AutomationRuleListener.instance
     ]
   end
 end

app/helpers/api/v2/accounts/reports_helper.rb

@@ -1,7 +1,7 @@
 module Api::V2::Accounts::ReportsHelper
   def generate_agents_report
     Current.account.users.map do |agent|
-      agent_report = report_builder({ type: :agent, id: agent.id }).summary
+      agent_report = generate_report({ type: :agent, id: agent.id })
       [agent.name] + generate_readable_report_metrics(agent_report)
     end
   end
@@ -15,7 +15,7 @@ module Api::V2::Accounts::ReportsHelper
 
   def generate_teams_report
     Current.account.teams.map do |team|
-      team_report = report_builder({ type: :team, id: team.id }).summary
+      team_report = generate_report({ type: :team, id: team.id })
       [team.name] + generate_readable_report_metrics(team_report)
     end
   end
@@ -27,7 +27,7 @@ module Api::V2::Accounts::ReportsHelper
     end
   end
 
-  def report_builder(report_params)
+  def generate_report(report_params)
     V2::ReportBuilder.new(
       Current.account,
       report_params.merge(
@@ -37,11 +37,7 @@ module Api::V2::Accounts::ReportsHelper
           business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
         }
       )
-    )
-  end
-
-  def generate_report(report_params)
-    report_builder(report_params).short_summary
+    ).short_summary
   end
 
   private
@@ -50,9 +46,7 @@ module Api::V2::Accounts::ReportsHelper
     [
       report_metric[:conversations_count],
       Reports::TimeFormatPresenter.new(report_metric[:avg_first_response_time]).format,
-      Reports::TimeFormatPresenter.new(report_metric[:avg_resolution_time]).format,
-      Reports::TimeFormatPresenter.new(report_metric[:reply_time]).format,
-      report_metric[:resolutions_count]
+      Reports::TimeFormatPresenter.new(report_metric[:avg_resolution_time]).format
     ]
   end
 end

app/javascript/dashboard/api/contacts.js

@@ -77,8 +77,8 @@ class ContactAPI extends ApiClient {
     return axios.delete(`${this.url}/${contactId}/avatar`);
   }
 
-  exportContacts(queryPayload) {
-    return axios.post(`${this.url}/export`, queryPayload);
+  exportContacts() {
+    return axios.get(`${this.url}/export`);
   }
 }
 

app/javascript/dashboard/api/integrations/linear.js

@@ -1,46 +0,0 @@
-/* global axios */
-
-import ApiClient from '../ApiClient';
-
-class LinearAPI extends ApiClient {
-  constructor() {
-    super('integrations/linear', { accountScoped: true });
-  }
-
-  getTeams() {
-    return axios.get(`${this.url}/teams`);
-  }
-
-  getTeamEntities(teamId) {
-    return axios.get(`${this.url}/team_entities?team_id=${teamId}`);
-  }
-
-  createIssue(data) {
-    return axios.post(`${this.url}/create_issue`, data);
-  }
-
-  link_issue(conversationId, issueId) {
-    return axios.post(`${this.url}/link_issue`, {
-      issue_id: issueId,
-      conversation_id: conversationId,
-    });
-  }
-
-  getLinkedIssue(conversationId) {
-    return axios.get(
-      `${this.url}/linked_issue?conversation_id=${conversationId}`
-    );
-  }
-
-  unlinkIssue(linkId) {
-    return axios.post(`${this.url}/unlink_issue`, {
-      link_id: linkId,
-    });
-  }
-
-  searchIssues(query) {
-    return axios.get(`${this.url}/search_issue?q=${query}`);
-  }
-}
-
-export default new LinearAPI();

app/javascript/dashboard/assets/scss/widgets/_base.scss

@@ -12,6 +12,7 @@ h6 {
 
 p {
   text-rendering: optimizeLegibility;
+  word-spacing: 0.12em;
 
   @apply mb-2 leading-[1.65] text-sm;
 

app/javascript/dashboard/components/ChannelSelector.vue

@@ -1,9 +1,9 @@
 <template>
   <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="sm:w-[50%] md:w-1/3 lg:w-1/4 bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
     @click="$emit('click')"
   >
-    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
+    <img :src="src" :alt="title" class="w-[50%] my-4 mx-auto" />
     <h3
       class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
     >

app/javascript/dashboard/components/ChatList.vue

@@ -288,6 +288,7 @@ export default {
       foldersQuery: {},
       showAddFoldersModal: false,
       showDeleteFoldersModal: false,
+      selectedConversations: [],
       selectedInboxes: [],
       isContextMenuOpen: false,
       appliedFilter: [],
@@ -328,7 +329,6 @@ export default {
       inboxesList: 'inboxes/getInboxes',
       campaigns: 'campaigns/getAllCampaigns',
       labels: 'labels/getLabels',
-      selectedConversations: 'bulkActions/getSelectedConversationIds',
     }),
     hasAppliedFilters() {
       return this.appliedFilters.length !== 0;
@@ -799,7 +799,7 @@ export default {
       });
     },
     resetBulkActions() {
-      this.$store.dispatch('bulkActions/clearSelectedConversationIds');
+      this.selectedConversations = [];
       this.selectedInboxes = [];
     },
     onBasicFilterChange(value, type) {
@@ -830,16 +830,12 @@ export default {
       return this.selectedConversations.includes(id);
     },
     selectConversation(conversationId, inboxId) {
-      this.$store.dispatch(
-        'bulkActions/setSelectedConversationIds',
-        conversationId
-      );
+      this.selectedConversations.push(conversationId);
       this.selectedInboxes.push(inboxId);
     },
     deSelectConversation(conversationId, inboxId) {
-      this.$store.dispatch(
-        'bulkActions/removeSelectedConversationIds',
-        conversationId
+      this.selectedConversations = this.selectedConversations.filter(
+        item => item !== conversationId
       );
       this.selectedInboxes = this.selectedInboxes.filter(
         item => item !== inboxId
@@ -847,10 +843,7 @@ export default {
     },
     selectAllConversations(check) {
       if (check) {
-        this.$store.dispatch(
-          'bulkActions/setSelectedConversationIds',
-          this.conversationList.map(item => item.id)
-        );
+        this.selectedConversations = this.conversationList.map(item => item.id);
         this.selectedInboxes = this.conversationList.map(item => item.inbox_id);
       } else {
         this.resetBulkActions();
@@ -866,7 +859,7 @@ export default {
             assignee_id: agent.id,
           },
         });
-        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
+        this.selectedConversations = [];
         if (conversationId) {
           this.showAlert(
             this.$t(
@@ -964,7 +957,7 @@ export default {
             add: labels,
           },
         });
-        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
+        this.selectedConversations = [];
         if (conversationId) {
           this.showAlert(
             this.$t(
@@ -991,13 +984,13 @@ export default {
             team_id: team.id,
           },
         });
-        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
+        this.selectedConversations = [];
         this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
       } catch (err) {
         this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
       }
     },
-    async onUpdateConversations(status, snoozedUntil) {
+    async onUpdateConversations(status) {
       try {
         await this.$store.dispatch('bulkActions/process', {
           type: 'Conversation',
@@ -1005,9 +998,8 @@ export default {
           fields: {
             status,
           },
-          snoozed_until: snoozedUntil,
         });
-        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
+        this.selectedConversations = [];
         this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
       } catch (err) {
         this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));

app/javascript/dashboard/components/CustomAttribute.vue

@@ -12,7 +12,7 @@
         </div>
         <div class="flex items-center justify-between w-full">
           <span
-            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
+            class="w-full font-medium text-sm mb-0"
             :class="
               $v.editedValue.$error
                 ? 'text-red-400 dark:text-red-500'
@@ -20,11 +20,6 @@
             "
           >
             {{ label }}
-            <helper-text-popup
-              v-if="description"
-              :message="description"
-              class="mt-0.5"
-            />
           </span>
           <woot-button
             v-if="showCopyAndDeleteButton"
@@ -46,7 +41,7 @@
             ref="inputfield"
             v-model="editedValue"
             :type="inputType"
-            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
+            class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
             autofocus="true"
             :class="{ error: $v.editedValue.$error }"
             @blur="$v.editedValue.$touch"
@@ -135,25 +130,22 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
-import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
 import customAttributeMixin from '../mixins/customAttributeMixin';
-
 const DATE_FORMAT = 'yyyy-MM-dd';
 
 export default {
   components: {
     MultiselectDropdown,
-    HelperTextPopup,
   },
-  mixins: [customAttributeMixin],
+  mixins: [customAttributeMixin, clickaway],
   props: {
     label: { type: String, required: true },
-    description: { type: String, default: '' },
     values: { type: Array, default: () => [] },
     value: { type: [String, Number, Boolean], default: '' },
     showActions: { type: Boolean, default: false },

app/javascript/dashboard/components/FormSection.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="flex flex-col items-start w-full gap-6">
-    <div class="flex flex-col w-full gap-4">
-      <h4 v-if="title" class="text-lg font-medium text-ash-900">
-        {{ title }}
-      </h4>
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex-grow h-px bg-ash-200" />
-      </div>
-      <p v-if="description" class="mb-0 text-sm font-normal text-ash-900">
-        {{ description }}
-      </p>
-    </div>
-    <div class="flex flex-col w-full gap-6">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>

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

@@ -88,6 +88,7 @@
 <script>
 import { getUnixTime } from 'date-fns';
 import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -108,7 +109,7 @@ export default {
     WootDropdownMenu,
     CustomSnoozeModal,
   },
-  mixins: [alertMixin, keyboardEventListenerMixins],
+  mixins: [clickaway, alertMixin, keyboardEventListenerMixins],
   props: { conversationId: { type: [String, Number], required: true } },
   data() {
     return {

app/javascript/dashboard/components/index.js

@@ -24,7 +24,6 @@ import SubmitButton from './buttons/FormSubmitButton';
 import Tabs from './ui/Tabs/Tabs';
 import TabsItem from './ui/Tabs/TabsItem';
 import Thumbnail from './widgets/Thumbnail.vue';
-import DatePicker from './ui/DatePicker/DatePicker.vue';
 
 const WootUIKit = {
   AvatarUploader,
@@ -52,7 +51,6 @@ const WootUIKit = {
   Tabs,
   TabsItem,
   Thumbnail,
-  DatePicker,
   install(Vue) {
     const keys = Object.keys(this);
     keys.pop(); // remove 'install' from keys

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -47,6 +47,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -66,7 +67,7 @@ export default {
     AvailabilityStatusBadge,
   },
 
-  mixins: [alertMixin],
+  mixins: [clickaway, alertMixin],
 
   data() {
     return {

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -106,6 +106,7 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
@@ -118,6 +119,7 @@ export default {
     WootDropdownItem,
     AvailabilityStatus,
   },
+  mixins: [clickaway],
   props: {
     show: {
       type: Boolean,

app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue

@@ -1,304 +0,0 @@
-<script setup>
-import { ref, watch } from 'vue';
-import {
-  getActiveDateRange,
-  moveCalendarDate,
-  DATE_RANGE_TYPES,
-  CALENDAR_TYPES,
-  CALENDAR_PERIODS,
-} from './helpers/DatePickerHelper';
-import {
-  isValid,
-  startOfMonth,
-  subDays,
-  startOfDay,
-  endOfDay,
-  isBefore,
-  subMonths,
-  addMonths,
-  isSameMonth,
-  differenceInCalendarMonths,
-  setMonth,
-  setYear,
-  isAfter,
-} from 'date-fns';
-
-import DatePickerButton from './components/DatePickerButton.vue';
-import CalendarDateInput from './components/CalendarDateInput.vue';
-import CalendarDateRange from './components/CalendarDateRange.vue';
-import CalendarYear from './components/CalendarYear.vue';
-import CalendarMonth from './components/CalendarMonth.vue';
-import CalendarWeek from './components/CalendarWeek.vue';
-import CalendarFooter from './components/CalendarFooter.vue';
-
-const { LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
-const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
-const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
-
-const showDatePicker = ref(false);
-const calendarViews = ref({ start: WEEK, end: WEEK });
-const currentDate = ref(new Date());
-const selectedStartDate = ref(startOfDay(subDays(currentDate.value, 6))); // LAST_7_DAYS
-const selectedEndDate = ref(endOfDay(currentDate.value));
-// Setting the start and end calendar
-const startCurrentDate = ref(startOfDay(selectedStartDate.value));
-const endCurrentDate = ref(
-  isSameMonth(selectedStartDate.value, selectedEndDate.value)
-    ? startOfMonth(addMonths(selectedEndDate.value, 1)) // Moves to the start of the next month if dates are in the same month (Mounted case LAST_7_DAYS)
-    : startOfMonth(selectedEndDate.value) // Always shows the month of the end date starting from the first (Mounted case LAST_7_DAYS)
-);
-const selectingEndDate = ref(false);
-const selectedRange = ref(LAST_7_DAYS);
-const hoveredEndDate = ref(null);
-
-const manualStartDate = ref(selectedStartDate.value);
-const manualEndDate = ref(selectedEndDate.value);
-
-const emit = defineEmits(['change']);
-
-// Watcher will set the start and end dates based on the selected range
-watch(selectedRange, newRange => {
-  if (newRange !== CUSTOM_RANGE) {
-    // If selecting a range other than last 7 days or last 30 days, set the start and end dates to the selected start and end dates
-    // If selecting last 7 days or last 30 days is, set the start date to the selected start date
-    // and the end date to one month ahead of the start date if the start date and end date are in the same month
-    // Otherwise set the end date to the selected end date
-    const isLastSevenOrThirtyDays =
-      newRange === LAST_7_DAYS || newRange === LAST_30_DAYS;
-    startCurrentDate.value = selectedStartDate.value;
-    endCurrentDate.value =
-      isLastSevenOrThirtyDays &&
-      isSameMonth(selectedStartDate.value, selectedEndDate.value)
-        ? startOfMonth(addMonths(selectedStartDate.value, 1))
-        : selectedEndDate.value;
-    selectingEndDate.value = false;
-  } else if (!selectingEndDate.value) {
-    // If selecting a custom range and not selecting an end date, set the start date to the selected start date
-    startCurrentDate.value = startOfDay(currentDate.value);
-  }
-});
-
-// Watcher will set the input values based on the selected start and end dates
-watch(
-  [selectedStartDate, selectedEndDate],
-  ([newStart, newEnd]) => {
-    if (isValid(newStart)) {
-      manualStartDate.value = newStart;
-    } else {
-      manualStartDate.value = selectedStartDate.value;
-    }
-
-    if (isValid(newEnd)) {
-      manualEndDate.value = newEnd;
-    } else {
-      manualEndDate.value = selectedEndDate.value;
-    }
-  },
-  { immediate: true }
-);
-
-// Watcher to ensure dates are always in logical order
-// This watch is will ensure that the start date is always before the end date
-watch(
-  [startCurrentDate, endCurrentDate],
-  ([newStart, newEnd], [oldStart, oldEnd]) => {
-    const monthDifference = differenceInCalendarMonths(newEnd, newStart);
-
-    if (newStart !== oldStart) {
-      if (isAfter(newStart, newEnd) || monthDifference === 0) {
-        // Adjust the end date forward if the start date is adjusted and is after the end date or in the same month
-        endCurrentDate.value = addMonths(newStart, 1);
-      }
-    }
-    if (newEnd !== oldEnd) {
-      if (isBefore(newEnd, newStart) || monthDifference === 0) {
-        // Adjust the start date backward if the end date is adjusted and is before the start date or in the same month
-        startCurrentDate.value = subMonths(newEnd, 1);
-      }
-    }
-  },
-  { immediate: true, deep: true }
-);
-
-const setDateRange = range => {
-  selectedRange.value = range.value;
-  const { start, end } = getActiveDateRange(range.value, currentDate.value);
-  selectedStartDate.value = start;
-  selectedEndDate.value = end;
-};
-
-const moveCalendar = (calendar, direction, period = MONTH) => {
-  const { start, end } = moveCalendarDate(
-    calendar,
-    startCurrentDate.value,
-    endCurrentDate.value,
-    direction,
-    period
-  );
-  startCurrentDate.value = start;
-  endCurrentDate.value = end;
-};
-
-const selectDate = day => {
-  selectedRange.value = CUSTOM_RANGE;
-  if (!selectingEndDate.value || day < selectedStartDate.value) {
-    selectedStartDate.value = day;
-    selectedEndDate.value = null;
-    selectingEndDate.value = true;
-  } else {
-    selectedEndDate.value = day;
-    selectingEndDate.value = false;
-  }
-};
-
-const setViewMode = (calendar, mode) => {
-  selectedRange.value = CUSTOM_RANGE;
-  calendarViews.value[calendar] = mode;
-};
-
-const openCalendar = (index, calendarType, period = MONTH) => {
-  const current =
-    calendarType === START_CALENDAR
-      ? startCurrentDate.value
-      : endCurrentDate.value;
-  const newDate =
-    period === MONTH
-      ? setMonth(startOfMonth(current), index)
-      : setYear(current, index);
-  if (calendarType === START_CALENDAR) {
-    startCurrentDate.value = newDate;
-  } else {
-    endCurrentDate.value = newDate;
-  }
-  setViewMode(calendarType, period === MONTH ? WEEK : MONTH);
-};
-
-const updateManualInput = (newDate, calendarType) => {
-  if (calendarType === START_CALENDAR) {
-    selectedStartDate.value = newDate;
-    startCurrentDate.value = newDate;
-  } else {
-    selectedEndDate.value = newDate;
-    endCurrentDate.value = newDate;
-  }
-  selectingEndDate.value = false;
-};
-
-const handleManualInputError = message => {
-  bus.$emit('newToastMessage', message);
-};
-
-const resetDatePicker = () => {
-  startCurrentDate.value = startOfDay(currentDate.value); // Resets to today at start of the day
-  endCurrentDate.value = addMonths(startOfDay(currentDate.value), 1); // Resets to one month ahead
-  selectedStartDate.value = startOfDay(subDays(currentDate.value, 6));
-  selectedEndDate.value = endOfDay(currentDate.value);
-  selectingEndDate.value = false;
-  selectedRange.value = LAST_7_DAYS;
-  // Reset view modes if they are being used to toggle between different calendar views
-  calendarViews.value = { start: WEEK, end: WEEK };
-};
-
-const emitDateRange = () => {
-  if (!isValid(selectedStartDate.value) || !isValid(selectedEndDate.value)) {
-    bus.$emit('newToastMessage', 'Please select a valid time range');
-  } else {
-    showDatePicker.value = false;
-    emit('dateRangeChanged', [selectedStartDate.value, selectedEndDate.value]);
-  }
-};
-</script>
-
-<template>
-  <div class="relative font-inter">
-    <DatePickerButton
-      :selected-start-date="selectedStartDate"
-      :selected-end-date="selectedEndDate"
-      :selected-range="selectedRange"
-      @open="showDatePicker = !showDatePicker"
-    />
-    <div
-      v-if="showDatePicker"
-      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] h-[490px] rounded-2xl border border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-800"
-    >
-      <CalendarDateRange
-        :selected-range="selectedRange"
-        @set-range="setDateRange"
-      />
-      <div
-        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
-      >
-        <div class="flex justify-around h-fit">
-          <!-- Calendars for Start and End Dates -->
-          <div
-            v-for="calendar in [START_CALENDAR, END_CALENDAR]"
-            :key="`${calendar}-calendar`"
-            class="flex flex-col items-center"
-          >
-            <CalendarDateInput
-              :calendar-type="calendar"
-              :date-value="
-                calendar === START_CALENDAR ? manualStartDate : manualEndDate
-              "
-              :compare-date="
-                calendar === START_CALENDAR ? manualEndDate : manualStartDate
-              "
-              :is-disabled="selectedRange !== CUSTOM_RANGE"
-              @update="
-                calendar === START_CALENDAR
-                  ? (manualStartDate = $event)
-                  : (manualEndDate = $event)
-              "
-              @validate="updateManualInput($event, calendar)"
-              @error="handleManualInputError($event)"
-            />
-            <div class="py-5 border-b border-slate-50 dark:border-slate-700/50">
-              <div
-                class="flex flex-col items-center gap-2 px-5 min-w-[340px] max-h-[352px]"
-                :class="
-                  calendar === START_CALENDAR &&
-                  'ltr:border-r rtl:border-l border-slate-50 dark:border-slate-700/50'
-                "
-              >
-                <CalendarYear
-                  v-if="calendarViews[calendar] === YEAR"
-                  :calendar-type="calendar"
-                  :start-current-date="startCurrentDate"
-                  :end-current-date="endCurrentDate"
-                  @select-year="openCalendar($event, calendar, YEAR)"
-                />
-                <CalendarMonth
-                  v-else-if="calendarViews[calendar] === MONTH"
-                  :calendar-type="calendar"
-                  :start-current-date="startCurrentDate"
-                  :end-current-date="endCurrentDate"
-                  @select-month="openCalendar($event, calendar)"
-                  @set-view="setViewMode"
-                  @prev="moveCalendar(calendar, 'prev', YEAR)"
-                  @next="moveCalendar(calendar, 'next', YEAR)"
-                />
-                <CalendarWeek
-                  v-else-if="calendarViews[calendar] === WEEK"
-                  :calendar-type="calendar"
-                  :current-date="currentDate"
-                  :start-current-date="startCurrentDate"
-                  :end-current-date="endCurrentDate"
-                  :selected-start-date="selectedStartDate"
-                  :selected-end-date="selectedEndDate"
-                  :selecting-end-date="selectingEndDate"
-                  :hovered-end-date="hoveredEndDate"
-                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @select-date="selectDate"
-                  @set-view="setViewMode"
-                  @prev="moveCalendar(calendar, 'prev')"
-                  @next="moveCalendar(calendar, 'next')"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <CalendarFooter @change="emitDateRange" @clear="resetDatePicker" />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue

@@ -1,79 +0,0 @@
-<script setup>
-import { CALENDAR_PERIODS } from '../helpers/DatePickerHelper';
-
-defineProps({
-  calendarType: {
-    type: String,
-    default: 'start',
-  },
-  firstButtonLabel: {
-    type: String,
-    default: '',
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-  viewMode: {
-    type: String,
-    default: '',
-  },
-});
-const emit = defineEmits(['prev', 'next', 'set-view']);
-
-const { YEAR } = CALENDAR_PERIODS;
-
-const onClickPrev = type => {
-  emit('prev', type);
-};
-
-const onClickNext = type => {
-  emit('next', type);
-};
-
-const onClickSetView = (type, mode) => {
-  emit('set-view', type, mode);
-};
-</script>
-
-<template>
-  <div class="flex items-start justify-between w-full h-9">
-    <button
-      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
-      @click="onClickPrev(calendarType)"
-    >
-      <fluent-icon
-        icon="chevron-left"
-        size="14"
-        class="text-slate-900 dark:text-slate-50"
-      />
-    </button>
-    <div class="flex items-center gap-1">
-      <button
-        v-if="firstButtonLabel"
-        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50 hover:text-woot-600 dark:hover:text-woot-600"
-        @click="onClickSetView(calendarType, viewMode)"
-      >
-        {{ firstButtonLabel }}
-      </button>
-      <button
-        v-if="buttonLabel"
-        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50"
-        :class="{ 'hover:text-woot-600 dark:hover:text-woot-600': viewMode }"
-        @click="onClickSetView(calendarType, YEAR)"
-      >
-        {{ buttonLabel }}
-      </button>
-    </div>
-    <button
-      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
-      @click="onClickNext(calendarType)"
-    >
-      <fluent-icon
-        icon="chevron-right"
-        size="14"
-        class="text-slate-900 dark:text-slate-50"
-      />
-    </button>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue

@@ -1,74 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { parse, isValid, isAfter, isBefore } from 'date-fns';
-import {
-  getIntlDateFormatForLocale,
-  CALENDAR_TYPES,
-} from '../helpers/DatePickerHelper';
-
-const props = defineProps({
-  calendarType: {
-    type: String,
-    default: '',
-  },
-  dateValue: Date,
-  compareDate: Date,
-  isDisabled: Boolean,
-});
-
-const emit = defineEmits(['update', 'validate', 'error']);
-
-const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
-
-const dateFormat = computed(() => getIntlDateFormatForLocale()?.toUpperCase());
-
-const localDateValue = computed({
-  get: () => props.dateValue?.toLocaleDateString(navigator.language) || '',
-  set: newValue => {
-    const format = getIntlDateFormatForLocale();
-    const parsedDate = parse(newValue, format, new Date());
-    if (isValid(parsedDate)) {
-      emit('update', parsedDate);
-    }
-  },
-});
-
-const validateDate = () => {
-  if (!isValid(props.dateValue)) {
-    emit('error', `Please enter the date in valid format: ${dateFormat.value}`);
-    return;
-  }
-
-  const { calendarType, compareDate, dateValue } = props;
-  const isStartCalendar = calendarType === START_CALENDAR;
-  const isEndCalendar = calendarType === END_CALENDAR;
-
-  if (compareDate && isStartCalendar && isAfter(dateValue, compareDate)) {
-    emit('error', 'Start date must be before the end date.');
-  } else if (compareDate && isEndCalendar && isBefore(dateValue, compareDate)) {
-    emit('error', 'End date must be after the start date.');
-  } else {
-    emit('validate', dateValue);
-  }
-};
-</script>
-
-<template>
-  <div class="h-[82px] flex flex-col items-start px-5 gap-1.5 pt-4 w-full">
-    <span class="text-sm font-medium text-slate-800 dark:text-slate-50">
-      {{
-        calendarType === START_CALENDAR
-          ? $t('DATE_PICKER.DATE_RANGE_INPUT.START')
-          : $t('DATE_PICKER.DATE_RANGE_INPUT.END')
-      }}
-    </span>
-    <input
-      v-model="localDateValue"
-      type="text"
-      class="reset-base border bg-slate-25 dark:bg-slate-900 ring-offset-ash-900 border-slate-50 dark:border-slate-700/50 w-full disabled:text-slate-200 dark:disabled:text-slate-700 disabled:cursor-not-allowed text-slate-800 dark:text-slate-50 px-1.5 py-1 text-sm rounded-xl h-10"
-      :placeholder="dateFormat"
-      :disabled="isDisabled"
-      @keypress.enter="validateDate"
-    />
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue

@@ -1,41 +0,0 @@
-<script setup>
-import { dateRanges } from '../helpers/DatePickerHelper';
-
-defineProps({
-  selectedRange: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['set-range']);
-
-const setDateRange = range => {
-  emit('set-range', range);
-};
-</script>
-
-<template>
-  <div class="w-[200px] flex flex-col items-start">
-    <h4
-      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-slate-600 dark:text-slate-200"
-    >
-      {{ $t('DATE_PICKER.DATE_RANGE_OPTIONS.TITLE') }}
-    </h4>
-    <div class="flex flex-col items-start w-full">
-      <button
-        v-for="range in dateRanges"
-        :key="range.label"
-        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-slate-50 dark:hover:bg-slate-700"
-        :class="
-          range.value === selectedRange
-            ? 'text-slate-800 dark:text-slate-50 bg-slate-50 dark:bg-slate-700'
-            : 'text-slate-600 dark:text-slate-200'
-        "
-        @click="setDateRange(range)"
-      >
-        {{ $t(range.label) }}
-      </button>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue

@@ -1,28 +0,0 @@
-<script setup>
-const emit = defineEmits(['clear', 'apply']);
-
-const onClickClear = () => {
-  emit('clear');
-};
-
-const onClickApply = () => {
-  emit('change');
-};
-</script>
-
-<template>
-  <div class="h-[56px] flex justify-between px-5 py-3 items-center">
-    <button
-      class="p-1.5 rounded-lg w-fit text-sm font-medium text-slate-600 dark:text-slate-200 hover:text-slate-800 dark:hover:text-slate-100"
-      @click="onClickClear"
-    >
-      {{ $t('DATE_PICKER.CLEAR_BUTTON') }}
-    </button>
-    <button
-      class="p-1.5 rounded-lg w-fit text-sm font-medium text-woot-500 dark:text-woot-300 hover:text-woot-700 dark:hover:text-woot-500"
-      @click="onClickApply"
-    >
-      {{ $t('DATE_PICKER.APPLY_BUTTON') }}
-    </button>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue

@@ -1,86 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { format, getMonth, setMonth, startOfMonth } from 'date-fns';
-import {
-  yearName,
-  CALENDAR_TYPES,
-  CALENDAR_PERIODS,
-} from '../helpers/DatePickerHelper';
-
-import CalendarAction from './CalendarAction.vue';
-
-const props = defineProps({
-  calendarType: {
-    type: String,
-    default: 'start',
-  },
-  startCurrentDate: Date,
-  endCurrentDate: Date,
-});
-
-const { START_CALENDAR } = CALENDAR_TYPES;
-const { MONTH, YEAR } = CALENDAR_PERIODS;
-
-const months = Array.from({ length: 12 }, (_, index) =>
-  format(setMonth(startOfMonth(new Date()), index), 'MMM')
-);
-
-const activeMonthIndex = computed(() => {
-  const date =
-    props.calendarType === START_CALENDAR
-      ? props.startCurrentDate
-      : props.endCurrentDate;
-  return getMonth(date);
-});
-
-const emit = defineEmits(['select-month', 'prev', 'next', 'set-view']);
-
-const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
-};
-
-const onClickPrev = () => {
-  emit('prev');
-};
-
-const onClickNext = () => {
-  emit('next');
-};
-
-const selectMonth = index => {
-  emit('select-month', index);
-};
-</script>
-
-<template>
-  <div class="flex flex-col w-full gap-2 max-h-[312px]">
-    <CalendarAction
-      :view-mode="YEAR"
-      :calendar-type="calendarType"
-      :button-label="
-        yearName(
-          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate,
-          MONTH
-        )
-      "
-      @set-view="setViewMode"
-      @prev="onClickPrev"
-      @next="onClickNext"
-    />
-
-    <div class="grid w-full grid-cols-3 gap-x-3 gap-y-2 auto-rows-[61px]">
-      <button
-        v-for="(month, index) in months"
-        :key="index"
-        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[92px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
-        :class="{
-          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:bg-woot-700':
-            index === activeMonthIndex,
-        }"
-        @click="selectMonth(index)"
-      >
-        {{ month }}
-      </button>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue

@@ -1,172 +0,0 @@
-<script setup>
-import {
-  monthName,
-  yearName,
-  getWeeksForMonth,
-  isToday,
-  dayIsInRange,
-  isCurrentMonth,
-  isLastDayOfMonth,
-  isHoveringDayInRange,
-  isHoveringNextDayInRange,
-  CALENDAR_TYPES,
-  CALENDAR_PERIODS,
-} from '../helpers/DatePickerHelper';
-
-import CalendarWeekLabel from './CalendarWeekLabel.vue';
-import CalendarAction from './CalendarAction.vue';
-
-const props = defineProps({
-  calendarType: {
-    type: String,
-    default: 'start',
-  },
-  currentDate: Date,
-  startCurrentDate: Date,
-  endCurrentDate: Date,
-  selectedStartDate: Date,
-  selectingEndDate: Boolean,
-  selectedEndDate: Date,
-  hoveredEndDate: Date,
-});
-
-const emit = defineEmits([
-  'update-hovered-end-date',
-  'select-date',
-  'prev',
-  'next',
-  'set-view',
-]);
-
-const { START_CALENDAR } = CALENDAR_TYPES;
-const { MONTH } = CALENDAR_PERIODS;
-
-const emitHoveredEndDate = day => {
-  emit('update-hovered-end-date', day);
-};
-
-const emitSelectDate = day => {
-  emit('select-date', day);
-};
-const onClickPrev = () => {
-  emit('prev');
-};
-
-const onClickNext = () => {
-  emit('next');
-};
-
-const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
-};
-
-const weeks = calendarType => {
-  return getWeeksForMonth(
-    calendarType === START_CALENDAR
-      ? props.startCurrentDate
-      : props.endCurrentDate
-  );
-};
-
-const isSelectedStartOrEndDate = day => {
-  return (
-    dayIsInRange(day, props.selectedStartDate, props.selectedStartDate) ||
-    dayIsInRange(day, props.selectedEndDate, props.selectedEndDate)
-  );
-};
-
-const isInRange = day => {
-  return dayIsInRange(day, props.selectedStartDate, props.selectedEndDate);
-};
-
-const isInCurrentMonth = day => {
-  return isCurrentMonth(
-    day,
-    props.calendarType === START_CALENDAR
-      ? props.startCurrentDate
-      : props.endCurrentDate
-  );
-};
-
-const isHoveringInRange = day => {
-  return isHoveringDayInRange(
-    day,
-    props.selectedStartDate,
-    props.selectingEndDate,
-    props.hoveredEndDate
-  );
-};
-
-const isNextDayInRange = day => {
-  return isHoveringNextDayInRange(
-    day,
-    props.selectedStartDate,
-    props.selectedEndDate,
-    props.hoveredEndDate
-  );
-};
-
-const dayClasses = day => ({
-  'text-slate-500 dark:text-slate-400 pointer-events-none':
-    !isInCurrentMonth(day),
-  'text-slate-800 dark:text-slate-50 hover:text-slate-800 dark:hover:text-white hover:bg-woot-100 dark:hover:bg-woot-700':
-    isInCurrentMonth(day),
-  'bg-woot-600 dark:bg-woot-600 text-white dark:text-white':
-    isSelectedStartOrEndDate(day) && isInCurrentMonth(day),
-  'bg-woot-50 dark:bg-woot-800':
-    (isInRange(day) || isHoveringInRange(day)) &&
-    !isSelectedStartOrEndDate(day) &&
-    isInCurrentMonth(day),
-  'outline outline-1 outline-woot-200 -outline-offset-1 dark:outline-woot-700 text-woot-600 dark:text-woot-400':
-    isToday(props.currentDate, day) && !isSelectedStartOrEndDate(day),
-});
-</script>
-
-<template>
-  <div class="flex flex-col w-full gap-2 max-h-[312px]">
-    <CalendarAction
-      :view-mode="MONTH"
-      :calendar-type="calendarType"
-      :first-button-label="
-        monthName(
-          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate
-        )
-      "
-      :button-label="
-        yearName(
-          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate
-        )
-      "
-      @prev="onClickPrev"
-      @next="onClickNext"
-      @set-view="setViewMode"
-    />
-    <CalendarWeekLabel />
-    <div
-      v-for="week in weeks(calendarType)"
-      :key="week[0].getTime()"
-      class="grid max-w-md grid-cols-7 gap-2 mx-auto overflow-hidden rounded-lg"
-    >
-      <div
-        v-for="day in week"
-        :key="day.getTime()"
-        class="flex relative items-center justify-center w-9 h-8 py-1.5 px-2 font-medium text-sm rounded-lg cursor-pointer"
-        :class="dayClasses(day)"
-        @mouseenter="emitHoveredEndDate(day)"
-        @mouseleave="emitHoveredEndDate(null)"
-        @click="emitSelectDate(day)"
-      >
-        {{ day.getDate() }}
-        <span
-          v-if="
-            (isInRange(day) || isHoveringInRange(day)) &&
-            isNextDayInRange(day) &&
-            !isLastDayOfMonth(day) &&
-            isInCurrentMonth(day)
-          "
-          class="absolute bottom-0 w-6 h-8 ltr:-right-4 rtl:-left-4 bg-woot-50 dark:bg-woot-800 -z-10"
-        />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue

@@ -1,15 +0,0 @@
-<script setup>
-import { calendarWeeks } from '../helpers/DatePickerHelper';
-</script>
-
-<template>
-  <div class="max-w-md mx-auto grid grid-cols-7 gap-2">
-    <div
-      v-for="day in calendarWeeks"
-      :key="day.id"
-      class="flex items-center justify-center font-medium text-sm w-9 h-7 py-1.5 px-2"
-    >
-      {{ day.label }}
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue

@@ -1,86 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { getYear, addYears, subYears } from 'date-fns';
-import { CALENDAR_TYPES } from '../helpers/DatePickerHelper';
-
-import CalendarAction from './CalendarAction.vue';
-
-const props = defineProps({
-  calendarType: {
-    type: String,
-    default: 'start',
-  },
-  startCurrentDate: Date,
-  endCurrentDate: Date,
-});
-
-const { START_CALENDAR } = CALENDAR_TYPES;
-
-const calculateStartYear = date => {
-  const year = getYear(date);
-  return year - (year % 10); // Align with the beginning of a decade
-};
-
-const startYear = ref(
-  calculateStartYear(
-    props.calendarType === START_CALENDAR
-      ? props.startCurrentDate
-      : props.endCurrentDate
-  )
-);
-
-const years = computed(() =>
-  Array.from({ length: 10 }, (_, i) => startYear.value + i)
-);
-
-const firstYear = computed(() => years.value[0]);
-const lastYear = computed(() => years.value[years.value.length - 1]);
-
-const activeYear = computed(() => {
-  const date =
-    props.calendarType === START_CALENDAR
-      ? props.startCurrentDate
-      : props.endCurrentDate;
-  return getYear(date);
-});
-
-const onClickPrev = () => {
-  startYear.value = subYears(new Date(startYear.value, 0, 1), 10).getFullYear();
-};
-
-const onClickNext = () => {
-  startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
-};
-
-const emit = defineEmits(['select-year']);
-
-const selectYear = year => {
-  emit('select-year', year);
-};
-</script>
-
-<template>
-  <div class="flex flex-col w-full gap-2 max-h-[312px]">
-    <CalendarAction
-      :calendar-type="calendarType"
-      :button-label="`${firstYear} - ${lastYear}`"
-      @prev="onClickPrev"
-      @next="onClickNext"
-    />
-
-    <div class="grid grid-cols-2 gap-x-3 gap-y-2 w-full auto-rows-[47px]">
-      <button
-        v-for="year in years"
-        :key="year"
-        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[144px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
-        :class="{
-          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:hover:bg-woot-700':
-            year === activeYear,
-        }"
-        @click="selectYear(year)"
-      >
-        {{ year }}
-      </button>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue

@@ -1,71 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { dateRanges } from '../helpers/DatePickerHelper';
-import { format, isSameYear, isValid } from 'date-fns';
-
-const props = defineProps({
-  selectedStartDate: Date,
-  selectedEndDate: Date,
-  selectedRange: {
-    type: String,
-    default: '',
-  },
-});
-
-const formatDateRange = computed(() => {
-  const startDate = props.selectedStartDate;
-  const endDate = props.selectedEndDate;
-
-  if (!isValid(startDate) || !isValid(endDate)) {
-    return 'Select a date range';
-  }
-
-  const formatString = isSameYear(startDate, endDate)
-    ? 'MMM d' // Same year: "Apr 1"
-    : 'MMM d yyyy'; // Different years: "Apr 1 2025"
-
-  if (isSameYear(startDate, new Date()) && isSameYear(endDate, new Date())) {
-    // Both dates are in the current year
-    return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d')}`;
-  }
-  // At least one date is not in the current year
-  return `${format(startDate, formatString)} - ${format(
-    endDate,
-    formatString
-  )}`;
-});
-
-const activeDateRange = computed(
-  () => dateRanges.find(range => range.value === props.selectedRange).label
-);
-
-const emit = defineEmits(['open']);
-
-const openDatePicker = () => {
-  emit('open');
-};
-</script>
-
-<template>
-  <button
-    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-slate-50 dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
-    @click="openDatePicker"
-  >
-    <fluent-icon
-      class="text-slate-800 dark:text-slate-50"
-      icon="calendar"
-      size="16"
-    />
-    <span class="text-sm font-medium text-slate-800 dark:text-slate-50">
-      {{ $t(activeDateRange) }}
-    </span>
-    <span class="text-sm font-medium text-slate-600 dark:text-slate-200">
-      {{ formatDateRange }}
-    </span>
-    <fluent-icon
-      class="text-slate-800 dark:text-slate-50"
-      icon="chevron-down"
-      size="14"
-    />
-  </button>
-</template>

app/javascript/dashboard/components/ui/DatePicker/helpers/DatePickerHelper.js

@@ -1,219 +0,0 @@
-import {
-  startOfDay,
-  subDays,
-  endOfDay,
-  subMonths,
-  addMonths,
-  subYears,
-  addYears,
-  startOfMonth,
-  isSameMonth,
-  format,
-  startOfWeek,
-  addDays,
-  eachDayOfInterval,
-  endOfMonth,
-  isSameDay,
-  isWithinInterval,
-} from 'date-fns';
-
-// Constants for calendar and date ranges
-export const calendarWeeks = [
-  { id: 1, label: 'M' },
-  { id: 2, label: 'T' },
-  { id: 3, label: 'W' },
-  { id: 4, label: 'T' },
-  { id: 5, label: 'F' },
-  { id: 6, label: 'S' },
-  { id: 7, label: 'S' },
-];
-
-export const dateRanges = [
-  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_7_DAYS', value: 'last7days' },
-  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_30_DAYS', value: 'last30days' },
-  {
-    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_3_MONTHS',
-    value: 'last3months',
-  },
-  {
-    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_6_MONTHS',
-    value: 'last6months',
-  },
-  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_YEAR', value: 'lastYear' },
-  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.CUSTOM_RANGE', value: 'custom' },
-];
-
-export const DATE_RANGE_TYPES = {
-  LAST_7_DAYS: 'last7days',
-  LAST_30_DAYS: 'last30days',
-  LAST_3_MONTHS: 'last3months',
-  LAST_6_MONTHS: 'last6months',
-  LAST_YEAR: 'lastYear',
-  CUSTOM_RANGE: 'custom',
-};
-
-export const CALENDAR_TYPES = {
-  START_CALENDAR: 'start',
-  END_CALENDAR: 'end',
-};
-
-export const CALENDAR_PERIODS = {
-  WEEK: 'week',
-  MONTH: 'month',
-  YEAR: 'year',
-};
-
-// Utility functions for date operations
-export const monthName = currentDate => format(currentDate, 'MMMM');
-export const yearName = currentDate => format(currentDate, 'yyyy');
-
-export const getIntlDateFormatForLocale = () => {
-  const year = 2222;
-  const month = 12;
-  const day = 15;
-  const date = new Date(year, month - 1, day);
-  const formattedDate = new Intl.DateTimeFormat(navigator.language).format(
-    date
-  );
-  return formattedDate
-    .replace(`${year}`, 'yyyy')
-    .replace(`${month}`, 'MM')
-    .replace(`${day}`, 'dd');
-};
-
-// Utility functions for calendar operations
-export const chunk = (array, size) =>
-  Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>
-    array.slice(index * size, index * size + size)
-  );
-
-export const getWeeksForMonth = (date, weekStartsOn = 1) => {
-  const startOfTheMonth = startOfMonth(date);
-  const startOfTheFirstWeek = startOfWeek(startOfTheMonth, { weekStartsOn });
-  const endOfTheLastWeek = addDays(startOfTheFirstWeek, 41); // Covering six weeks to fill the calendar
-  return chunk(
-    eachDayOfInterval({ start: startOfTheFirstWeek, end: endOfTheLastWeek }),
-    7
-  );
-};
-
-export const moveCalendarDate = (
-  calendar,
-  startCurrentDate,
-  endCurrentDate,
-  direction,
-  period
-) => {
-  const adjustFunctions = {
-    month: { prev: subMonths, next: addMonths },
-    year: { prev: subYears, next: addYears },
-  };
-
-  const adjust = adjustFunctions[period][direction];
-
-  if (calendar === 'start') {
-    const newStart = adjust(startCurrentDate, 1);
-    return { start: newStart, end: endCurrentDate };
-  }
-  const newEnd = adjust(endCurrentDate, 1);
-  return { start: startCurrentDate, end: newEnd };
-};
-
-// Date comparison functions
-export const isToday = (currentDate, date) =>
-  date.getDate() === currentDate.getDate() &&
-  date.getMonth() === currentDate.getMonth() &&
-  date.getFullYear() === currentDate.getFullYear();
-
-export const isCurrentMonth = (day, referenceDate) =>
-  isSameMonth(day, referenceDate);
-
-export const isLastDayOfMonth = day => {
-  const lastDay = endOfMonth(day);
-  return day.getDate() === lastDay.getDate();
-};
-
-export const dayIsInRange = (date, startDate, endDate) => {
-  if (!startDate || !endDate) {
-    return false;
-  }
-  // Normalize dates to ignore time differences
-  let startOfDayStart = startOfDay(startDate);
-  let startOfDayEnd = startOfDay(endDate);
-  // Swap if start is greater than end
-  if (startOfDayStart > startOfDayEnd) {
-    [startOfDayStart, startOfDayEnd] = [startOfDayEnd, startOfDayStart];
-  }
-  // Check if the date is within the interval or is the same as the start date
-  return (
-    isSameDay(date, startOfDayStart) ||
-    isWithinInterval(date, {
-      start: startOfDayStart,
-      end: startOfDayEnd,
-    })
-  );
-};
-
-// Handling hovering states in date range pickers
-export const isHoveringDayInRange = (
-  day,
-  startDate,
-  endDate,
-  hoveredEndDate
-) => {
-  if (endDate && hoveredEndDate && startDate <= hoveredEndDate) {
-    // Ensure the start date is not after the hovered end date
-    return isWithinInterval(day, { start: startDate, end: hoveredEndDate });
-  }
-  return false;
-};
-
-export const isHoveringNextDayInRange = (
-  day,
-  startDate,
-  endDate,
-  hoveredEndDate
-) => {
-  if (startDate && !endDate && hoveredEndDate) {
-    // If a start date is selected, and we're hovering (but haven't clicked an end date yet)
-    const nextDay = addDays(day, 1);
-    return isWithinInterval(nextDay, { start: startDate, end: hoveredEndDate });
-  }
-  if (startDate && endDate) {
-    // Normal range checking between selected start and end dates
-    const nextDay = addDays(day, 1);
-    return isWithinInterval(nextDay, { start: startDate, end: endDate });
-  }
-  return false;
-};
-
-// Helper func to determine active date ranges based on user selection
-export const getActiveDateRange = (range, currentDate) => {
-  const ranges = {
-    last7days: () => ({
-      start: startOfDay(subDays(currentDate, 6)),
-      end: endOfDay(currentDate),
-    }),
-    last30days: () => ({
-      start: startOfDay(subDays(currentDate, 29)),
-      end: endOfDay(currentDate),
-    }),
-    last3months: () => ({
-      start: startOfDay(subMonths(currentDate, 3)),
-      end: endOfDay(currentDate),
-    }),
-    last6months: () => ({
-      start: startOfDay(subMonths(currentDate, 6)),
-      end: endOfDay(currentDate),
-    }),
-    lastYear: () => ({
-      start: startOfDay(subMonths(currentDate, 12)),
-      end: endOfDay(currentDate),
-    }),
-    custom: () => ({ start: currentDate, end: currentDate }),
-  };
-
-  return (
-    ranges[range] || (() => ({ start: currentDate, end: currentDate }))
-  )();
-};

app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js

@@ -1,309 +0,0 @@
-import {
-  monthName,
-  yearName,
-  getIntlDateFormatForLocale,
-  getWeeksForMonth,
-  isToday,
-  isCurrentMonth,
-  isLastDayOfMonth,
-  dayIsInRange,
-  getActiveDateRange,
-  isHoveringDayInRange,
-  isHoveringNextDayInRange,
-  moveCalendarDate,
-  chunk,
-} from '../DatePickerHelper';
-
-describe('Date formatting functions', () => {
-  const testDate = new Date(2020, 4, 15); // May 15, 2020
-
-  beforeEach(() => {
-    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('returns the correct month name from a date', () => {
-    expect(monthName(testDate)).toBe('May');
-  });
-
-  it('returns the correct year from a date', () => {
-    expect(yearName(testDate)).toBe('2020');
-  });
-
-  it('returns the correct date format for the current locale en-US', () => {
-    const expected = 'MM/dd/yyyy';
-    expect(getIntlDateFormatForLocale()).toBe(expected);
-  });
-
-  it('returns the correct date format for the current locale en-IN', () => {
-    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
-    const expected = 'dd/MM/yyyy';
-    expect(getIntlDateFormatForLocale()).toBe(expected);
-  });
-});
-
-describe('chunk', () => {
-  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
-
-  it('correctly chunks an array into smaller arrays of given size', () => {
-    const expected = [
-      [1, 2, 3],
-      [4, 5, 6],
-      [7, 8, 9],
-    ];
-    expect(chunk(array, 3)).toEqual(expected);
-  });
-
-  it('handles arrays that do not divide evenly by the chunk size', () => {
-    const expected = [[1, 2], [3, 4], [5, 6], [7, 8], [9]];
-    expect(chunk(array, 2)).toEqual(expected);
-  });
-});
-
-describe('getWeeksForMonth', () => {
-  it('returns the correct weeks array for a month starting on Monday', () => {
-    const date = new Date(2020, 3, 1); // April 2020
-    const weeks = getWeeksForMonth(date, 1);
-    expect(weeks.length).toBe(6);
-    expect(weeks[0][0]).toEqual(new Date(2020, 2, 30)); // Check if first day of the first week is correct
-  });
-});
-
-describe('moveCalendarDate', () => {
-  it('handles the year transition when moving the start date backward by one month from January', () => {
-    const startDate = new Date(2021, 0, 1);
-    const endDate = new Date(2021, 0, 31);
-    const result = moveCalendarDate(
-      'start',
-      startDate,
-      endDate,
-      'prev',
-      'month'
-    );
-    const expectedStartDate = new Date(2020, 11, 1);
-    expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString());
-    expect(result.end.toISOString()).toEqual(endDate.toISOString());
-  });
-
-  it('handles the year transition when moving the start date forward by one month from January', () => {
-    const startDate = new Date(2020, 0, 1);
-    const endDate = new Date(2020, 1, 31);
-    const result = moveCalendarDate(
-      'start',
-      startDate,
-      endDate,
-      'next',
-      'month'
-    );
-    const expectedStartDate = new Date(2020, 1, 1);
-    expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString());
-    expect(result.end.toISOString()).toEqual(endDate.toISOString());
-  });
-
-  it('handles the year transition when moving the end date forward by one month from December', () => {
-    const startDate = new Date(2021, 11, 1);
-    const endDate = new Date(2021, 11, 31);
-    const result = moveCalendarDate('end', startDate, endDate, 'next', 'month');
-    const expectedEndDate = new Date(2022, 0, 31);
-    expect(result.start).toEqual(startDate);
-    expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString());
-  });
-  it('handles the year transition when moving the end date backward by one month from December', () => {
-    const startDate = new Date(2021, 11, 1);
-    const endDate = new Date(2021, 11, 31);
-    const result = moveCalendarDate('end', startDate, endDate, 'prev', 'month');
-    const expectedEndDate = new Date(2021, 10, 30);
-
-    expect(result.start).toEqual(startDate);
-    expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString());
-  });
-});
-
-describe('isToday', () => {
-  it('returns true if the dates are the same', () => {
-    const today = new Date();
-    const alsoToday = new Date(today);
-    expect(isToday(today, alsoToday)).toBeTruthy();
-  });
-
-  it('returns false if the dates are not the same', () => {
-    const today = new Date();
-    const notToday = new Date(
-      today.getFullYear(),
-      today.getMonth(),
-      today.getDate() - 1
-    );
-    expect(isToday(today, notToday)).toBeFalsy();
-  });
-});
-
-describe('isCurrentMonth', () => {
-  const referenceDate = new Date(2020, 6, 15); // July 15, 2020
-
-  it('returns true if the day is in the same month as the reference date', () => {
-    const testDay = new Date(2020, 6, 1);
-    expect(isCurrentMonth(testDay, referenceDate)).toBeTruthy();
-  });
-
-  it('returns false if the day is not in the same month as the reference date', () => {
-    const testDay = new Date(2020, 5, 30);
-    expect(isCurrentMonth(testDay, referenceDate)).toBeFalsy();
-  });
-});
-
-describe('isLastDayOfMonth', () => {
-  it('returns true if the day is the last day of the month', () => {
-    const testDay = new Date(2020, 6, 31); // July 31, 2020
-    expect(isLastDayOfMonth(testDay)).toBeTruthy();
-  });
-
-  it('returns false if the day is not the last day of the month', () => {
-    const testDay = new Date(2020, 6, 30); // July 30, 2020
-    expect(isLastDayOfMonth(testDay)).toBeFalsy();
-  });
-});
-
-describe('dayIsInRange', () => {
-  it('returns true if the date is within the range', () => {
-    const start = new Date(2020, 1, 10);
-    const end = new Date(2020, 1, 20);
-    const testDate = new Date(2020, 1, 15);
-    expect(dayIsInRange(testDate, start, end)).toBeTruthy();
-  });
-
-  it('returns true if the date is the same as the start date', () => {
-    const start = new Date(2020, 1, 10);
-    const end = new Date(2020, 1, 20);
-    const testDate = new Date(2020, 1, 10);
-    expect(dayIsInRange(testDate, start, end)).toBeTruthy();
-  });
-
-  it('returns false if the date is outside the range', () => {
-    const start = new Date(2020, 1, 10);
-    const end = new Date(2020, 1, 20);
-    const testDate = new Date(2020, 1, 9);
-    expect(dayIsInRange(testDate, start, end)).toBeFalsy();
-  });
-});
-
-describe('isHoveringDayInRange', () => {
-  const startDate = new Date(2020, 6, 10);
-  const endDate = new Date(2020, 6, 20);
-  const hoveredEndDate = new Date(2020, 6, 15);
-
-  it('returns true if the day is within the start and hovered end dates', () => {
-    const testDay = new Date(2020, 6, 12);
-    expect(
-      isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate)
-    ).toBeTruthy();
-  });
-
-  it('returns false if the day is outside the hovered date range', () => {
-    const testDay = new Date(2020, 6, 16);
-    expect(
-      isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate)
-    ).toBeFalsy();
-  });
-});
-
-describe('isHoveringNextDayInRange', () => {
-  const startDate = new Date(2020, 6, 10);
-  const hoveredEndDate = new Date(2020, 6, 15);
-
-  it('returns true if the next day after the given day is within the start and hovered end dates', () => {
-    const testDay = new Date(2020, 6, 14);
-    expect(
-      isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate)
-    ).toBeTruthy();
-  });
-
-  it('returns false if the next day is outside the start and hovered end dates', () => {
-    const testDay = new Date(2020, 6, 15);
-    expect(
-      isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate)
-    ).toBeFalsy();
-  });
-});
-
-describe('getActiveDateRange', () => {
-  const currentDate = new Date(2020, 5, 15, 12, 0); // May 15, 2020, at noon
-
-  beforeAll(() => {
-    // Mocking the current date to ensure consistency in tests
-    jest.useFakeTimers().setSystemTime(currentDate.getTime());
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  it('returns the correct range for "last7days"', () => {
-    const range = getActiveDateRange('last7days', new Date());
-    const expectedStart = new Date(2020, 5, 9);
-    expectedStart.setHours(0, 0, 0, 0);
-    const expectedEnd = new Date();
-    expectedEnd.setHours(23, 59, 59, 999);
-
-    expect(range.start).toEqual(expectedStart);
-    expect(range.end).toEqual(expectedEnd);
-  });
-
-  it('returns the correct range for "last30days"', () => {
-    const range = getActiveDateRange('last30days', new Date());
-    const expectedStart = new Date(2020, 4, 17);
-    expectedStart.setHours(0, 0, 0, 0);
-    const expectedEnd = new Date();
-    expectedEnd.setHours(23, 59, 59, 999);
-
-    expect(range.start).toEqual(expectedStart);
-    expect(range.end).toEqual(expectedEnd);
-  });
-
-  it('returns the correct range for "last3months"', () => {
-    const range = getActiveDateRange('last3months', new Date());
-    const expectedStart = new Date(2020, 2, 15);
-    expectedStart.setHours(0, 0, 0, 0);
-    const expectedEnd = new Date();
-    expectedEnd.setHours(23, 59, 59, 999);
-
-    expect(range.start).toEqual(expectedStart);
-    expect(range.end).toEqual(expectedEnd);
-  });
-
-  it('returns the correct range for "last6months"', () => {
-    const range = getActiveDateRange('last6months', new Date());
-    const expectedStart = new Date(2019, 11, 15);
-    expectedStart.setHours(0, 0, 0, 0);
-    const expectedEnd = new Date();
-    expectedEnd.setHours(23, 59, 59, 999);
-
-    expect(range.start).toEqual(expectedStart);
-    expect(range.end).toEqual(expectedEnd);
-  });
-
-  it('returns the correct range for "lastYear"', () => {
-    const range = getActiveDateRange('lastYear', new Date());
-    const expectedStart = new Date(2019, 5, 15);
-    expectedStart.setHours(0, 0, 0, 0);
-    const expectedEnd = new Date();
-    expectedEnd.setHours(23, 59, 59, 999);
-
-    expect(range.start).toEqual(expectedStart);
-    expect(range.end).toEqual(expectedEnd);
-  });
-
-  it('returns the correct range for "custom date range"', () => {
-    const range = getActiveDateRange('custom', new Date());
-    expect(range.start).toEqual(new Date(currentDate));
-    expect(range.end).toEqual(new Date(currentDate));
-  });
-
-  it('handles an unknown range label gracefully', () => {
-    const range = getActiveDateRange('unknown', new Date());
-    expect(range.start).toEqual(new Date(currentDate));
-    expect(range.end).toEqual(new Date(currentDate));
-  });
-});

app/javascript/dashboard/components/ui/HelperTextPopup.vue

@@ -1,24 +0,0 @@
-<script setup>
-defineProps({
-  message: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-<template>
-  <div class="relative group w-[inherit] whitespace-normal z-20">
-    <fluent-icon
-      icon="info"
-      size="14"
-      class="mt-0.5 text-slate-600 absolute dark:text-slate-400"
-    />
-    <div
-      class="bg-white dark:bg-slate-900 w-fit ltr:left-4 rtl:right-4 top-0 border p-2.5 group-hover:flex items-center hidden absolute border-slate-75 dark:border-slate-800 rounded-lg shadow-md"
-    >
-      <p class="text-slate-800 dark:text-slate-75 mb-0 text-xs">
-        {{ message }}
-      </p>
-    </div>
-  </div>
-</template>

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

@@ -18,11 +18,13 @@
 
 <script>
 import { Chrome } from 'vue-color';
+import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Chrome,
   },
+  mixins: [clickaway],
   props: {
     value: {
       type: String,

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

@@ -33,6 +33,7 @@
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
+import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
 
 export default {
@@ -41,7 +42,7 @@ export default {
     LabelDropdown,
   },
 
-  mixins: [adminMixin, keyboardEventListenerMixins],
+  mixins: [clickaway, adminMixin, keyboardEventListenerMixins],
 
   props: {
     allLabels: {

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

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import getUuid from 'widget/helpers/uuid';
 import 'video.js/dist/video-js.css';
 import 'videojs-record/dist/css/videojs.record.css';
 
@@ -29,25 +28,9 @@ import OpusRecorderEngine from 'videojs-record/dist/plugins/videojs.record.opus-
 
 import { format, addSeconds } from 'date-fns';
 import { AUDIO_FORMATS } from 'shared/constants/messages';
-import { convertWavToMp3 } from './utils/mp3ConversionUtils';
 
 WaveSurfer.microphone = MicrophonePlugin;
 
-const RECORDER_CONFIG = {
-  [AUDIO_FORMATS.WAV]: {
-    audioMimeType: 'audio/wav',
-    audioWorkerURL: waveWorker,
-  },
-  [AUDIO_FORMATS.MP3]: {
-    audioMimeType: 'audio/wav',
-    audioWorkerURL: waveWorker,
-  },
-  [AUDIO_FORMATS.OGG]: {
-    audioMimeType: 'audio/ogg',
-    audioWorkerURL: encoderWorker,
-  },
-};
-
 export default {
   name: 'WootAudioRecorder',
   mixins: [alertMixin],
@@ -56,10 +39,6 @@ export default {
       type: String,
       default: AUDIO_FORMATS.WAV,
     },
-    isAWhatsAppChannel: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
@@ -109,7 +88,14 @@ export default {
             audioSampleRate: 48000,
             audioBitRate: 128,
             audioEngine: 'opus-recorder',
-            ...RECORDER_CONFIG[this.audioRecordFormat],
+            ...(this.audioRecordFormat === AUDIO_FORMATS.WAV && {
+              audioMimeType: 'audio/wav',
+              audioWorkerURL: waveWorker,
+            }),
+            ...(this.audioRecordFormat === AUDIO_FORMATS.OGG && {
+              audioMimeType: 'audio/ogg',
+              audioWorkerURL: encoderWorker,
+            }),
           },
         },
       },
@@ -147,11 +133,7 @@ export default {
   methods: {
     deviceReady() {
       if (this.player.record().engine instanceof OpusRecorderEngine) {
-        if (
-          [AUDIO_FORMATS.WAV, AUDIO_FORMATS.MP3].includes(
-            this.audioRecordFormat
-          )
-        ) {
+        if (this.audioRecordFormat === AUDIO_FORMATS.WAV) {
           this.player.record().engine.audioType = 'audio/wav';
         }
       }
@@ -163,16 +145,12 @@ export default {
     stopRecord() {
       this.fireStateRecorderChanged('stopped');
     },
-    async finishRecord() {
-      let recordedContent = this.player.recordedData;
-      let fileName = this.player.recordedData.name;
-      let type = this.player.recordedData.type;
-      if (this.audioRecordFormat === AUDIO_FORMATS.MP3) {
-        recordedContent = await convertWavToMp3(this.player.recordedData);
-        fileName = `${getUuid()}.mp3`;
-        type = AUDIO_FORMATS.MP3;
-      }
-      const file = new File([recordedContent], fileName, { type });
+    finishRecord() {
+      const file = new File(
+        [this.player.recordedData],
+        this.player.recordedData.name,
+        { type: this.player.recordedData.type }
+      );
       this.fireRecorderBlob(file);
     },
     progressRecord() {
@@ -253,13 +231,11 @@ export default {
     @apply bg-transparent max-h-60 min-h-[3rem] pt-4 px-0 pb-0 resize-none;
   }
 }
-
 // Added to override the default text and bg style to support dark and light mode.
 .video-js .vjs-control-bar,
 .vjs-record.video-js .vjs-control.vjs-record-indicator:before {
   @apply text-slate-600 dark:text-slate-200 bg-transparent dark:bg-transparent;
 }
-
 // Added to fix  div overlays the screen and takes over the button clicks
 // https://github.com/collab-project/videojs-record/issues/688
 // https://github.com/collab-project/videojs-record/pull/709

app/javascript/dashboard/components/widgets/WootWriter/utils/mp3ConversionUtils.js

@@ -1,53 +0,0 @@
-import lamejs from 'lamejs';
-/**
- * Encodes a mono channel audio stream to MP3 format.
- * @param {number} channels - Number of audio channels.
- * @param {number} sampleRate - Sample rate in Hz.
- * @param {Int16Array} samples - Audio samples to be encoded.
- * @returns {Blob} - The MP3 encoded audio as a Blob.
- */
-export const encodeToMP3 = (channels, sampleRate, samples) => {
-  const outputBuffer = [];
-  const encoder = new lamejs.Mp3Encoder(channels, sampleRate, 128);
-  const maxSamplesPerFrame = 1152;
-
-  for (let offset = 0; offset < samples.length; offset += maxSamplesPerFrame) {
-    const sliceEnd = Math.min(offset + maxSamplesPerFrame, samples.length);
-    const sampleSlice = samples.subarray(offset, sliceEnd);
-    const mp3Buffer = encoder.encodeBuffer(sampleSlice);
-
-    if (mp3Buffer.length > 0) {
-      outputBuffer.push(new Int8Array(mp3Buffer));
-    }
-  }
-
-  const remainingData = encoder.flush();
-  if (remainingData.length > 0) {
-    outputBuffer.push(new Int8Array(remainingData));
-  }
-
-  return new Blob(outputBuffer, { type: 'audio/mp3' });
-};
-
-/**
- * Converts a WAV audio Blob to an MP3 format Blob.
- * @param {Blob} blob - The audio data in WAV format as a Blob.
- * @returns {Promise<Blob>} - A Blob containing the MP3 encoded audio.
- */
-export const convertWavToMp3 = async blob => {
-  try {
-    const audioBuffer = await blob.arrayBuffer();
-    const wavHeader = lamejs.WavHeader.readHeader(new DataView(audioBuffer));
-    const samples = new Int16Array(
-      audioBuffer,
-      wavHeader.dataOffset,
-      wavHeader.dataLen / 2
-    );
-
-    return encodeToMP3(wavHeader.channels, wavHeader.sampleRate, samples);
-  } catch (error) {
-    // eslint-disable-next-line
-    console.log('Failed to convert WAV to MP3:', error);
-    throw new Error('Conversion from WAV to MP3 failed.');
-  }
-};

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

@@ -45,6 +45,7 @@
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
 import FilterItem from './FilterItem.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
@@ -52,7 +53,7 @@ export default {
   components: {
     FilterItem,
   },
-  mixins: [uiSettingsMixin],
+  mixins: [clickaway, uiSettingsMixin],
   data() {
     return {
       showActionsDropdown: false,

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

@@ -37,6 +37,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
@@ -51,7 +52,7 @@ export default {
     EmailTranscriptModal,
     ResolveAction,
   },
-  mixins: [alertMixin],
+  mixins: [alertMixin, clickaway],
   data() {
     return {
       showEmailActionsModal: false,

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

@@ -153,6 +153,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
@@ -217,6 +218,7 @@ export default {
     ArticleSearchPopover,
   },
   mixins: [
+    clickaway,
     inboxMixin,
     uiSettingsMixin,
     alertMixin,
@@ -501,10 +503,11 @@ export default {
       return `draft-${this.conversationIdByRoute}-${this.replyType}`;
     },
     audioRecordFormat() {
-      if (this.isAWhatsAppChannel || this.isATelegramChannel) {
-        return AUDIO_FORMATS.MP3;
-      }
-      if (this.isAPIInbox) {
+      if (
+        this.isAWhatsAppChannel ||
+        this.isAPIInbox ||
+        this.isATelegramChannel
+      ) {
         return AUDIO_FORMATS.OGG;
       }
       return AUDIO_FORMATS.WAV;
@@ -1252,7 +1255,6 @@ export default {
     }
   }
 }
-
 .send-button {
   @apply mb-0;
 }
@@ -1277,7 +1279,6 @@ export default {
 
 .emoji-dialog--rtl {
   @apply left-[unset] -right-80;
-
   &::before {
     transform: rotate(90deg);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));

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

@@ -9,7 +9,7 @@
           <woot-input
             v-model.trim="$v.toEmailsVal.$model"
             type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             :class="{ error: $v.toEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
@@ -25,7 +25,7 @@
         <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
           <woot-input
             v-model.trim="$v.ccEmailsVal.$model"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             type="text"
             :class="{ error: $v.ccEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@@ -54,7 +54,7 @@
           <woot-input
             v-model.trim="$v.bccEmailsVal.$model"
             type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             :class="{ error: $v.bccEmailsVal.$error }"
             :placeholder="
               $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')

app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue

@@ -7,10 +7,8 @@
       'bg-woot-600 text-woot-50': messageType === MESSAGE_TYPE.OUTGOING,
       '-mx-2': !parentHasAttachments,
     }"
-    @click="scrollToMessage"
   >
     <message-preview
-      class="cursor-pointer"
       :message="message"
       :show-message-type="false"
       :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
@@ -21,7 +19,6 @@
 <script>
 import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
 import { MESSAGE_TYPE } from 'shared/constants/messages';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   name: 'ReplyTo',
@@ -45,10 +42,5 @@ export default {
   data() {
     return { MESSAGE_TYPE };
   },
-  methods: {
-    scrollToMessage() {
-      bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId: this.message.id });
-    },
-  },
 };
 </script>

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

@@ -180,6 +180,7 @@
   </woot-modal>
 </template>
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import timeMixin from 'dashboard/mixins/time';
@@ -199,7 +200,7 @@ export default {
   components: {
     Thumbnail,
   },
-  mixins: [keyboardEventListenerMixins, timeMixin],
+  mixins: [keyboardEventListenerMixins, clickaway, timeMixin],
   props: {
     show: {
       type: Boolean,

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

@@ -49,8 +49,9 @@
 </template>
 
 <script>
-import { evaluateSLAStatus } from '@chatwoot/utils';
+import { evaluateSLAStatus } from '../helpers/SLAHelper';
 import SLAPopoverCard from './SLAPopoverCard.vue';
+import { mixin as clickaway } from 'vue-clickaway';
 
 const REFRESH_INTERVAL = 60000;
 
@@ -58,6 +59,7 @@ export default {
   components: {
     SLAPopoverCard,
   },
+  mixins: [clickaway],
   props: {
     chat: {
       type: Object,
@@ -137,10 +139,7 @@ export default {
       }, REFRESH_INTERVAL);
     },
     updateSlaStatus() {
-      this.slaStatus = evaluateSLAStatus({
-        appliedSla: this.appliedSLA,
-        chat: this.chat,
-      });
+      this.slaStatus = evaluateSLAStatus(this.appliedSLA, this.chat);
     },
     openSlaPopover() {
       if (!this.showExtendedInfo) return;

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

@@ -101,12 +101,14 @@
 import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner.vue';
+import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Thumbnail,
     Spinner,
   },
+  mixins: [clickaway],
   props: {
     selectedInboxes: {
       type: Array,

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

@@ -95,40 +95,20 @@
     <div v-if="allConversationsSelected" class="bulk-action__alert">
       {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
     </div>
-    <woot-modal
-      :show.sync="showCustomTimeSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
-      />
-    </woot-modal>
   </div>
 </template>
 
 <script>
-import { getUnixTime } from 'date-fns';
-import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
-import wootConstants from 'dashboard/constants/globals';
-import {
-  CMD_BULK_ACTION_SNOOZE_CONVERSATION,
-  CMD_BULK_ACTION_REOPEN_CONVERSATION,
-  CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-} from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
-
 import AgentSelector from './AgentSelector.vue';
 import UpdateActions from './UpdateActions.vue';
 import LabelActions from './LabelActions.vue';
 import TeamActions from './TeamActions.vue';
-import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 export default {
   components: {
     AgentSelector,
     UpdateActions,
     LabelActions,
     TeamActions,
-    CustomSnoozeModal,
   },
   props: {
     conversations: {
@@ -163,56 +143,17 @@ export default {
       showLabelActions: false,
       showTeamsList: false,
       popoverPositions: {},
-      showCustomTimeSnoozeModal: false,
     };
   },
-  mounted() {
-    bus.$on(CMD_BULK_ACTION_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
-    bus.$on(CMD_BULK_ACTION_REOPEN_CONVERSATION, this.onCmdReopenConversation);
-    bus.$on(
-      CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-      this.onCmdResolveConversation
-    );
-  },
-  destroyed() {
-    bus.$off(CMD_BULK_ACTION_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
-    bus.$off(CMD_BULK_ACTION_REOPEN_CONVERSATION, this.onCmdReopenConversation);
-    bus.$off(
-      CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-      this.onCmdResolveConversation
-    );
-  },
   methods: {
-    onCmdSnoozeConversation(snoozeType) {
-      if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
-        this.showCustomTimeSnoozeModal = true;
-      } else {
-        this.updateConversations('snoozed', findSnoozeTime(snoozeType) || null);
-      }
-    },
-    onCmdReopenConversation() {
-      this.updateConversations('open', null);
-    },
-    onCmdResolveConversation() {
-      this.updateConversations('resolved', null);
-    },
-    customSnoozeTime(customSnoozedTime) {
-      this.showCustomTimeSnoozeModal = false;
-      if (customSnoozedTime) {
-        this.updateConversations('snoozed', getUnixTime(customSnoozedTime));
-      }
-    },
-    hideCustomSnoozeModal() {
-      this.showCustomTimeSnoozeModal = false;
-    },
     selectAll(e) {
       this.$emit('select-all-conversations', e.target.checked);
     },
     submit(agent) {
       this.$emit('assign-agent', agent);
     },
-    updateConversations(status, snoozedUntil) {
-      this.$emit('update-conversations', status, snoozedUntil);
+    updateConversations(status) {
+      this.$emit('update-conversations', status);
     },
     assignLabels(labels) {
       this.$emit('assign-labels', labels);

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

@@ -74,9 +74,11 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 
 export default {
+  mixins: [clickaway],
   data() {
     return {
       query: '',

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

@@ -59,8 +59,10 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 export default {
+  mixins: [clickaway],
   data() {
     return {
       query: '',

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

@@ -1,98 +1,12 @@
-<script setup>
-import { useI18n } from 'dashboard/composables/useI18n';
-import { ref } from 'vue';
-
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-
-const { t } = useI18n();
-
-const emits = defineEmits(['update', 'close']);
-
-const props = defineProps({
-  selectedInboxes: {
-    type: Array,
-    default: () => [],
-  },
-  conversationCount: {
-    type: Number,
-    default: 0,
-  },
-  showResolve: {
-    type: Boolean,
-    default: true,
-  },
-  showReopen: {
-    type: Boolean,
-    default: true,
-  },
-  showSnooze: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const actions = ref([
-  { icon: 'checkmark', key: 'resolved' },
-  { icon: 'arrow-redo', key: 'open' },
-  { icon: 'send-clock', key: 'snoozed' },
-]);
-
-const updateConversations = key => {
-  if (key === 'snoozed') {
-    // If the user clicks on the snooze option from the bulk action change status dropdown.
-    // Open the snooze option for bulk action in the cmd bar.
-    const ninja = document.querySelector('ninja-keys');
-    ninja?.open({ parent: 'bulk_action_snooze_conversation' });
-  } else {
-    emits('update', key);
-  }
-};
-
-const onClose = () => {
-  emits('close');
-};
-
-const showAction = key => {
-  const actionsMap = {
-    resolved: props.showResolve,
-    open: props.showReopen,
-    snoozed: props.showSnooze,
-  };
-  return actionsMap[key] || false;
-};
-
-const actionLabel = key => {
-  const labelsMap = {
-    resolved: t('CONVERSATION.HEADER.RESOLVE_ACTION'),
-    open: t('CONVERSATION.HEADER.REOPEN_ACTION'),
-    snoozed: t('BULK_ACTION.UPDATE.SNOOZE_UNTIL'),
-  };
-  return labelsMap[key] || '';
-};
-</script>
-
 <template>
-  <div
-    v-on-clickaway="onClose"
-    class="absolute right-2 top-12 origin-top-right w-auto z-20 bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md"
-  >
-    <div
-      class="right-[var(--triangle-position)] block z-10 absolute text-left -top-3"
-    >
+  <div v-on-clickaway="onClose" class="actions-container">
+    <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
-        <path
-          d="M20 12l-8-8-12 12"
-          fill-rule="evenodd"
-          stroke-width="1px"
-          class="fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50"
-        />
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
-    <div class="p-2.5 flex gap-1 items-center justify-between">
-      <span class="text-sm font-medium text-slate-600 dark:text-slate-100">
-        {{ $t('BULK_ACTION.UPDATE.CHANGE_STATUS') }}
-      </span>
+    <div class="header flex items-center justify-between">
+      <span>{{ $t('BULK_ACTION.UPDATE.CHANGE_STATUS') }}</span>
       <woot-button
         size="tiny"
         variant="clear"
@@ -101,8 +15,8 @@ const actionLabel = key => {
         @click="onClose"
       />
     </div>
-    <div class="px-2.5 pt-0 pb-2.5">
-      <woot-dropdown-menu class="m-0 list-none">
+    <div class="container">
+      <woot-dropdown-menu>
         <template v-for="action in actions">
           <woot-dropdown-item v-if="showAction(action.key)" :key="action.key">
             <woot-button
@@ -120,3 +34,116 @@ const actionLabel = key => {
     </div>
   </div>
 </template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+
+export default {
+  components: {
+    WootDropdownItem,
+    WootDropdownMenu,
+  },
+  mixins: [clickaway],
+  props: {
+    selectedInboxes: {
+      type: Array,
+      default: () => [],
+    },
+    conversationCount: {
+      type: Number,
+      default: 0,
+    },
+    showResolve: {
+      type: Boolean,
+      default: true,
+    },
+    showReopen: {
+      type: Boolean,
+      default: true,
+    },
+    showSnooze: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      query: '',
+      selectedAction: null,
+      actions: [
+        {
+          icon: 'checkmark',
+          key: 'resolved',
+        },
+        {
+          icon: 'arrow-redo',
+          key: 'open',
+        },
+        {
+          icon: 'send-clock',
+          key: 'snoozed',
+        },
+      ],
+    };
+  },
+  methods: {
+    updateConversations(key) {
+      this.$emit('update', key);
+    },
+    goBack() {
+      this.selectedAgent = null;
+    },
+    onClose() {
+      this.$emit('close');
+    },
+    showAction(key) {
+      const actionsMap = {
+        resolved: this.showResolve,
+        open: this.showReopen,
+        snoozed: this.showSnooze,
+      };
+      return actionsMap[key] || false;
+    },
+    actionLabel(key) {
+      const labelsMap = {
+        resolved: this.$t('CONVERSATION.HEADER.RESOLVE_ACTION'),
+        open: this.$t('CONVERSATION.HEADER.REOPEN_ACTION'),
+        snoozed: this.$t('BULK_ACTION.UPDATE.SNOOZE_UNTIL_NEXT_REPLY'),
+      };
+      return labelsMap[key] || '';
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.actions-container {
+  @apply absolute right-2 top-12 origin-top-right w-auto z-20 bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
+
+  .header {
+    @apply p-2.5;
+
+    span {
+      @apply text-sm font-medium;
+    }
+  }
+  .container {
+    @apply px-2.5 pt-0 pb-2.5;
+  }
+
+  .triangle {
+    right: var(--triangle-position);
+    @apply block z-10 absolute text-left -top-3;
+
+    svg path {
+      @apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
+    }
+  }
+}
+
+ul {
+  @apply m-0 list-none;
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/helpers/SLAHelper.js

@@ -0,0 +1,117 @@
+const calculateThreshold = (timeOffset, threshold) => {
+  // Calculate the time left for the SLA to breach or the time since the SLA has missed
+  if (threshold === null) return null;
+  const currentTime = Math.floor(Date.now() / 1000);
+  return timeOffset + threshold - currentTime;
+};
+
+const findMostUrgentSLAStatus = SLAStatuses => {
+  // Sort the SLAs based on the threshold and return the most urgent SLA
+  SLAStatuses.sort(
+    (sla1, sla2) => Math.abs(sla1.threshold) - Math.abs(sla2.threshold)
+  );
+  return SLAStatuses[0];
+};
+
+const formatSLATime = seconds => {
+  const units = {
+    y: 31536000, // 60 * 60 * 24 * 365
+    mo: 2592000, // 60 * 60 * 24 * 30
+    d: 86400, // 60 * 60 * 24
+    h: 3600, // 60 * 60
+    m: 60,
+  };
+
+  if (seconds < 60) {
+    return '1m';
+  }
+
+  // we will only show two parts, two max granularity's, h-m, y-d, d-h, m, but no seconds
+  const parts = [];
+
+  Object.keys(units).forEach(unit => {
+    const value = Math.floor(seconds / units[unit]);
+    if (seconds < 60 && parts.length > 0) return;
+    if (parts.length === 2) return;
+    if (value > 0) {
+      parts.push(value + unit);
+      seconds -= value * units[unit];
+    }
+  });
+  return parts.join(' ');
+};
+
+const createSLAObject = (
+  type,
+  {
+    sla_first_response_time_threshold: frtThreshold,
+    sla_next_response_time_threshold: nrtThreshold,
+    sla_resolution_time_threshold: rtThreshold,
+    created_at: createdAt,
+  } = {},
+  {
+    first_reply_created_at: firstReplyCreatedAt,
+    waiting_since: waitingSince,
+    status,
+  } = {}
+) => {
+  // Mapping of breach types to their logic
+  const SLATypes = {
+    FRT: {
+      threshold: calculateThreshold(createdAt, frtThreshold),
+      //   Check FRT only if threshold is not null and first reply hasn't been made
+      condition:
+        frtThreshold !== null &&
+        (!firstReplyCreatedAt || firstReplyCreatedAt === 0),
+    },
+    NRT: {
+      threshold: calculateThreshold(waitingSince, nrtThreshold),
+      // Check NRT only if threshold is not null, first reply has been made and we are waiting since
+      condition:
+        nrtThreshold !== null && !!firstReplyCreatedAt && !!waitingSince,
+    },
+    RT: {
+      threshold: calculateThreshold(createdAt, rtThreshold),
+      // Check RT only if the conversation is open and threshold is not null
+      condition: status === 'open' && rtThreshold !== null,
+    },
+  };
+
+  const SLAStatus = SLATypes[type];
+  return SLAStatus ? { ...SLAStatus, type } : null;
+};
+
+const evaluateSLAConditions = (appliedSla, chat) => {
+  // Filter out the SLA based on conditions and update the object with the breach status(icon, isSlaMissed)
+  const SLATypes = ['FRT', 'NRT', 'RT'];
+  return SLATypes.map(type => createSLAObject(type, appliedSla, chat))
+    .filter(SLAStatus => SLAStatus && SLAStatus.condition)
+    .map(SLAStatus => ({
+      ...SLAStatus,
+      icon: SLAStatus.threshold <= 0 ? 'flame' : 'alarm',
+      isSlaMissed: SLAStatus.threshold <= 0,
+    }));
+};
+
+export const evaluateSLAStatus = (appliedSla, chat) => {
+  if (!appliedSla || !chat)
+    return { type: '', threshold: '', icon: '', isSlaMissed: false };
+
+  // Filter out the SLA and create the object for each breach
+  const SLAStatuses = evaluateSLAConditions(appliedSla, chat);
+
+  // Return the most urgent SLA which is latest to breach or has missed
+  const mostUrgent = findMostUrgentSLAStatus(SLAStatuses);
+  return mostUrgent
+    ? {
+        type: mostUrgent.type,
+        threshold: formatSLATime(
+          mostUrgent.threshold <= 0
+            ? -mostUrgent.threshold
+            : mostUrgent.threshold
+        ),
+        icon: mostUrgent.icon,
+        isSlaMissed: mostUrgent.isSlaMissed,
+      }
+    : { type: '', threshold: '', icon: '', isSlaMissed: false };
+};

app/javascript/dashboard/components/widgets/conversation/helpers/specs/SLAHelper.spec.js

@@ -0,0 +1,150 @@
+import { evaluateSLAStatus } from '../SLAHelper';
+
+beforeEach(() => {
+  jest
+    .spyOn(Date, 'now')
+    .mockImplementation(() => new Date('2024-01-01T00:00:00Z').getTime());
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('SLAHelper', () => {
+  describe('evaluateSLAStatus', () => {
+    it('returns an empty object when sla or chat is not present', () => {
+      expect(evaluateSLAStatus(null, null)).toEqual({
+        type: '',
+        threshold: '',
+        icon: '',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when FRT SLA is missed
+    it('correctly identifies a missed FRT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704066540,
+      };
+      const chatMissed = {
+        first_reply_created_at: 0,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'FRT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when FRT SLA is not missed
+    it('correctly identifies an FRT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704066660,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 0,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'FRT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when NRT SLA is missed
+    it('correctly identifies a missed NRT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065200,
+      };
+      const chatMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 1704065940,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'NRT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when NRT SLA is not missed
+    it('correctly identifies an NRT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065200 - 2000,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 1704066060,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'NRT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when RT SLA is missed
+    it('correctly identifies a missed RT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065340,
+      };
+      const chatMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'RT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when RT SLA is not missed
+    it('correctly identifies an RT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065460,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'RT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+  });
+});

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -15,7 +15,6 @@
     <span v-if="error" class="message">
       {{ error }}
     </span>
-    <slot name="masked" />
   </label>
 </template>
 

app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

@@ -1,16 +1,9 @@
 <template>
   <div class="phone-input--wrap relative">
-    <div
-      class="flex items-center dark:bg-slate-900 justify-start rounded-md border border-solid"
-      :class="
-        error
-          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
-          : 'mb-4 border-slate-200 dark:border-slate-600'
-      "
-    >
+    <div class="phone-input" :class="{ 'has-error': error }">
       <div
         class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
-        @click.prevent="toggleCountryDropdown"
+        @click="toggleCountryDropdown"
       >
         <h5 v-if="activeCountry" class="mb-0">
           {{ activeCountry.emoji }}
@@ -20,15 +13,14 @@
       </div>
       <span
         v-if="activeDialCode"
-        class="flex bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
+        class="flex bg-white dark:bg-slate-900 font-medium text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
       >
         {{ activeDialCode }}
       </span>
       <input
-        ref="phoneNumberInput"
         :value="phoneNumber"
         type="tel"
-        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
+        class="phone-input--field"
         :placeholder="placeholder"
         :readonly="readonly"
         :style="styles"
@@ -36,36 +28,24 @@
         @blur="onBlur"
       />
     </div>
-    <div
-      v-if="showDropdown"
-      ref="dropdown"
-      v-on-clickaway="onOutsideClick"
-      tabindex="0"
-      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
-      @keydown.prevent.up="moveUp"
-      @keydown.prevent.down="moveDown"
-      @keydown.prevent.enter="
-        onSelectCountry(filteredCountriesBySearch[selectedIndex])
-      "
-    >
-      <div class="top-0 sticky bg-white dark:bg-slate-900 p-1">
+    <div v-if="showDropdown" ref="dropdown" class="country-dropdown">
+      <div class="dropdown-search--wrap">
         <input
           ref="searchbar"
           v-model="searchCountry"
           type="text"
           placeholder="Search"
-          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-200 dark:!border-slate-600"
-          @input="onSearchCountry"
+          class="dropdown-search"
         />
       </div>
       <div
         v-for="(country, index) in filteredCountriesBySearch"
         ref="dropdownItem"
         :key="index"
-        class="flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700"
+        class="country-dropdown--item"
         :class="{
-          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
-          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
+          active: country.id === activeCountryCode,
+          focus: index === selectedIndex,
         }"
         @click="onSelectCountry(country)"
       >
@@ -94,8 +74,10 @@
 <script>
 import countries from 'shared/constants/countries.js';
 import parsePhoneNumber from 'libphonenumber-js';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 export default {
+  mixins: [keyboardEventListenerMixins],
   props: {
     value: {
       type: [String, Number],
@@ -120,6 +102,15 @@ export default {
   },
   data() {
     return {
+      countries: [
+        {
+          name: 'Select Country',
+          dial_code: '',
+          emoji: '',
+          id: '',
+        },
+        ...countries,
+      ],
       selectedIndex: -1,
       showDropdown: false,
       searchCountry: '',
@@ -129,20 +120,6 @@ export default {
     };
   },
   computed: {
-    countries() {
-      return [
-        {
-          name: this.dropdownFirstItemName,
-          dial_code: '',
-          emoji: '',
-          id: '',
-        },
-        ...countries,
-      ];
-    },
-    dropdownFirstItemName() {
-      return this.activeCountryCode ? 'Clear selection' : 'Select Country';
-    },
     filteredCountriesBySearch() {
       return this.countries.filter(country => {
         const { name, dial_code, id } = country;
@@ -177,8 +154,12 @@ export default {
     },
   },
   mounted() {
+    window.addEventListener('mouseup', this.onOutsideClick);
     this.setActiveCountry();
   },
+  beforeDestroy() {
+    window.removeEventListener('mouseup', this.onOutsideClick);
+  },
   methods: {
     onOutsideClick(e) {
       if (
@@ -196,14 +177,28 @@ export default {
     onBlur(e) {
       this.$emit('blur', e.target.value);
     },
-    onSearchCountry() {
-      // Reset selected index to 0
-      this.selectedIndex = 0;
+    dropdownItem() {
+      if (!this.showDropdown) return [];
+      return Array.from(
+        this.$refs.dropdown.querySelectorAll(
+          'div.country-dropdown div.country-dropdown--item'
+        )
+      );
+    },
+    focusedItem() {
+      if (!this.showDropdown) return [];
+      return Array.from(
+        this.$refs.dropdown.querySelectorAll('div.country-dropdown div.focus')
+      );
+    },
+    focusedItemIndex() {
+      if (!this.showDropdown) return -1;
+      return Array.from(this.dropdownItem()).indexOf(this.focusedItem()[0]);
     },
     moveUp() {
       if (!this.showDropdown) return;
       this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
-      this.scrollToSelected();
+      this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
     },
     moveDown() {
       if (!this.showDropdown) return;
@@ -211,27 +206,14 @@ export default {
         this.selectedIndex + 1,
         this.filteredCountriesBySearch.length - 1
       );
-      this.scrollToSelected();
-    },
-    scrollToSelected() {
-      this.$nextTick(() => {
-        const dropdown = this.$refs.dropdown;
-        const selectedItem = this.$refs.dropdownItem[this.selectedIndex];
-        const dropdownSearchbarHeight = 40;
-        if (selectedItem) {
-          const selectedItemTop = selectedItem.offsetTop;
-          dropdown.scrollTop = selectedItemTop - dropdownSearchbarHeight;
-        }
-      });
+      this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
     },
     onSelectCountry(country) {
-      if (!country || !this.showDropdown) return;
       this.activeCountryCode = country.id;
       this.searchCountry = '';
       this.activeDialCode = country.dial_code;
       this.$emit('setCode', country.dial_code);
       this.closeDropdown();
-      this.$refs.phoneNumberInput.focus();
     },
     setActiveCountry() {
       const { phoneNumber } = this;
@@ -242,6 +224,33 @@ export default {
         this.activeDialCode = number.countryCallingCode;
       }
     },
+    getKeyboardEvents() {
+      return {
+        ArrowUp: {
+          action: e => {
+            e.preventDefault();
+            this.moveUp();
+          },
+          allowOnFocusedInput: true,
+        },
+        ArrowDown: {
+          action: e => {
+            e.preventDefault();
+            this.moveDown();
+          },
+          allowOnFocusedInput: true,
+        },
+        Enter: {
+          action: e => {
+            e.preventDefault();
+            this.onSelectCountry(
+              this.filteredCountriesBySearch[this.selectedIndex]
+            );
+          },
+          allowOnFocusedInput: true,
+        },
+      };
+    },
     toggleCountryDropdown() {
       this.showDropdown = !this.showDropdown;
       this.selectedIndex = -1;
@@ -258,3 +267,46 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+.phone-input--wrap {
+  .phone-input {
+    @apply flex items-center dark:bg-slate-900 justify-start mb-4 rounded-md border border-solid border-slate-200 dark:border-slate-600;
+
+    &.has-error {
+      @apply border border-solid border-red-400 dark:border-red-400;
+    }
+  }
+
+  .phone-input--field {
+    @apply mb-0 rounded-tl-none rounded-bl-none border-0 w-full dark:bg-slate-900 text-base px-1.5;
+
+    &::placeholder {
+      @apply font-normal;
+    }
+  }
+
+  .country-dropdown {
+    @apply z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900;
+
+    .dropdown-search--wrap {
+      @apply top-0 sticky bg-white dark:bg-slate-900 p-1;
+
+      .dropdown-search {
+        @apply h-8 mb-0 text-sm border border-solid border-slate-200 dark:border-slate-600;
+      }
+    }
+
+    .country-dropdown--item {
+      @apply flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700;
+
+      &.active {
+        @apply bg-slate-50 dark:bg-slate-700;
+      }
+
+      &.focus {
+        @apply bg-slate-25 dark:bg-slate-800;
+      }
+    }
+  }
+}
+</style>

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -87,6 +87,7 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { SHORTCUT_KEYS } from './constants';
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
 
@@ -94,6 +95,7 @@ export default {
   components: {
     Hotkey,
   },
+  mixins: [clickaway],
   props: {
     show: {
       type: Boolean,

app/javascript/dashboard/composables/index.js

@@ -1,12 +0,0 @@
-import { getCurrentInstance } from 'vue';
-
-export const useTrack = () => {
-  const vm = getCurrentInstance();
-  if (!vm) throw new Error('must be called in setup');
-
-  return vm.proxy.$track;
-};
-
-export function useAlert(message, action) {
-  bus.$emit('newToastMessage', message, action);
-}

app/javascript/dashboard/composables/route.js

@@ -1,30 +0,0 @@
-import { getCurrentInstance, reactive, watchEffect } from 'vue';
-
-/**
- * Returns the current route location. Equivalent to using `$route` inside
- * templates.
- */
-export function useRoute() {
-  const instance = getCurrentInstance();
-  const route = reactive(Object.assign({}, instance.proxy.$root.$route));
-  watchEffect(() => {
-    Object.assign(route, instance.proxy.$root.$route);
-  });
-
-  return route;
-}
-
-/**
- * Returns the router instance. Equivalent to using `$router` inside
- * templates.
- */
-export function useRouter() {
-  const instance = getCurrentInstance();
-  const router = instance.proxy.$root.$router;
-  watchEffect(() => {
-    if (router) {
-      Object.assign(router, instance.proxy.$root.$router);
-    }
-  });
-  return router;
-}

app/javascript/dashboard/composables/store.js

@@ -1,23 +0,0 @@
-import { computed } from 'vue';
-import { getCurrentInstance } from 'vue';
-
-export const useStore = () => {
-  const vm = getCurrentInstance();
-  if (!vm) throw new Error('must be called in setup');
-  return vm.proxy.$store;
-};
-
-export const useStoreGetters = () => {
-  const store = useStore();
-  return Object.fromEntries(
-    Object.keys(store.getters).map(getter => [
-      getter,
-      computed(() => store.getters[getter]),
-    ])
-  );
-};
-
-export const mapGetter = key => {
-  const store = useStore();
-  return computed(() => store.getters[key]);
-};

app/javascript/dashboard/featureFlags.js

@@ -30,5 +30,4 @@ export const FEATURE_FLAGS = {
   EMAIL_CONTINUITY_ON_API_CHANNEL: 'email_continuity_on_api_channel',
   INBOUND_EMAILS: 'inbound_emails',
   IP_LOOKUP: 'ip_lookup',
-  LINEAR: 'linear_integration',
 };

app/javascript/dashboard/i18n/locale/am/bulkActions.json

@@ -17,7 +17,7 @@
     "AGENT_LIST_LOADING": "Loading agents",
     "UPDATE": {
       "CHANGE_STATUS": "Change status",
-      "SNOOZE_UNTIL": "Snooze",
+      "SNOOZE_UNTIL_NEXT_REPLY": "Snooze until next reply.",
       "UPDATE_SUCCESFUL": "Conversation status updated successfully.",
       "UPDATE_FAILED": "Failed to update conversations. Please try again."
     },

app/javascript/dashboard/i18n/locale/am/contact.json

@@ -48,8 +48,7 @@
     "SIDEBAR_SECTIONS": {
       "CUSTOM_ATTRIBUTES": "Custom Attributes",
       "CONTACT_LABELS": "Contact Labels",
-      "PREVIOUS_CONVERSATIONS": "Previous Conversations",
-      "NO_RECORDS_FOUND": "No attributes found"
+      "PREVIOUS_CONVERSATIONS": "Previous Conversations"
     }
   },
   "EDIT_CONTACT": {
@@ -84,7 +83,6 @@
     "CONFIRM": {
       "TITLE": "Export Contacts",
       "MESSAGE": "Are you sure you want to export all contacts?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
       "YES": "Yes, Export",
       "NO": "No, Cancel"
     }

app/javascript/dashboard/i18n/locale/am/conversation.json

@@ -280,7 +280,6 @@
   },
   "CONVERSATION_CUSTOM_ATTRIBUTES": {
     "ADD_BUTTON_TEXT": "Create attribute",
-    "NO_RECORDS_FOUND": "No attributes found",
     "UPDATE": {
       "SUCCESS": "Attribute updated successfully",
       "ERROR": "Unable to update attribute. Please try again later"

app/javascript/dashboard/i18n/locale/am/datePicker.json

@@ -1,19 +0,0 @@
-{
-  "DATE_PICKER": {
-    "APPLY_BUTTON": "Apply",
-    "CLEAR_BUTTON": "Clear",
-    "DATE_RANGE_INPUT": {
-      "START": "Start Date",
-      "END": "End Date"
-    },
-    "DATE_RANGE_OPTIONS": {
-      "TITLE": "DATE RANGE",
-      "LAST_7_DAYS": "Last 7 days",
-      "LAST_30_DAYS": "Last 30 days",
-      "LAST_3_MONTHS": "Last 3 months",
-      "LAST_6_MONTHS": "Last 6 months",
-      "LAST_YEAR": "Last year",
-      "CUSTOM_RANGE": "Custom date range"
-    }
-  }
-}

app/javascript/dashboard/i18n/locale/am/generalSettings.json

@@ -107,7 +107,6 @@
       "GENERAL": "General",
       "REPORTS": "Reports",
       "CONVERSATION": "Conversation",
-      "BULK_ACTIONS": "Bulk Actions",
       "CHANGE_ASSIGNEE": "Change Assignee",
       "CHANGE_PRIORITY": "Change Priority",
       "CHANGE_TEAM": "Change Team",

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

@@ -22,7 +22,7 @@
         "body": "Add agents to the created inbox."
       },
       {
-        "title": "Voilà!",
+        "title": "Voila!",
         "route": "settings_inbox_finish",
         "body": "You are all set to go!"
       }
@@ -43,7 +43,7 @@
         "CHOOSE_PLACEHOLDER": "Select a page from the list",
         "INBOX_NAME": "Inbox Name",
         "ADD_NAME": "Add a name for your inbox",
-        "PICK_NAME": "Pick a Name for your Inbox",
+        "PICK_NAME": "Pick A Name Your Inbox",
         "PICK_A_VALUE": "Pick a value"
       },
       "TWITTER": {
@@ -62,7 +62,7 @@
         },
         "CHANNEL_WEBHOOK_URL": {
           "LABEL": "Webhook URL",
-          "PLACEHOLDER": "Please enter your Webhook URL",
+          "PLACEHOLDER": "Enter your Webhook URL",
           "ERROR": "Please enter a valid URL"
         },
         "CHANNEL_DOMAIN": {
@@ -143,7 +143,7 @@
           "ERROR": "This field is required"
         },
         "PHONE_NUMBER": {
-          "LABEL": "Phone Number",
+          "LABEL": "Phone number",
           "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
           "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
         },
@@ -175,12 +175,12 @@
           },
           "API_KEY": {
             "LABEL": "API Key",
-            "PLACEHOLDER": "Please enter your Bandwidth API Key",
+            "PLACEHOLDER": "Please enter your Bandwith API Key",
             "ERROR": "This field is required"
           },
           "API_SECRET": {
             "LABEL": "API Secret",
-            "PLACEHOLDER": "Please enter your Bandwidth API Secret",
+            "PLACEHOLDER": "Please enter your Bandwith API Secret",
             "ERROR": "This field is required"
           },
           "APPLICATION_ID": {
@@ -239,7 +239,7 @@
         },
         "WEBHOOK_VERIFY_TOKEN": {
           "LABEL": "Webhook Verify Token",
-          "PLACEHOLDER": "Enter a verify token which you want to configure for Facebook webhooks.",
+          "PLACEHOLDER": "Enter a verify token which you want to configure for facebook webhooks.",
           "ERROR": "Please enter a valid value."
         },
         "API_KEY": {
@@ -269,7 +269,7 @@
         },
         "WEBHOOK_URL": {
           "LABEL": "Webhook URL",
-          "SUBTITLE": "Configure the URL where you want to receive callbacks on events.",
+          "SUBTITLE": "Configure the URL where you want to recieve callbacks on events.",
           "PLACEHOLDER": "Webhook URL"
         },
         "SUBMIT_BUTTON": "Create API Channel",
@@ -279,7 +279,7 @@
       },
       "EMAIL_CHANNEL": {
         "TITLE": "Email Channel",
-        "DESC": "Integrate your email inbox.",
+        "DESC": "Integrate you email inbox.",
         "CHANNEL_NAME": {
           "LABEL": "Channel Name",
           "PLACEHOLDER": "Please enter a channel name",
@@ -345,7 +345,7 @@
       "AGENTS": {
         "TITLE": "Agents",
         "DESC": "Here you can add agents to manage your newly created inbox. Only these selected agents will have access to your inbox. Agents which are not part of this inbox will not be able to see or respond to messages in this inbox when they login. <br> <b>PS:</b> As an administrator, if you need access to all inboxes, you should add yourself as agent to all inboxes that you create.",
-        "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
+        "VALIDATION_ERROR": "Add atleast one agent to your new Inbox",
         "PICK_AGENTS": "Pick agents for the inbox"
       },
       "DETAILS": {
@@ -406,7 +406,7 @@
       },
       "SENDER_NAME_SECTION": {
         "TITLE": "Sender name",
-        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
+        "SUB_TEXT": "Select the name shown to the your customer when they receive emails from your agents.",
         "FOR_EG": "For eg:",
         "FRIENDLY": {
           "TITLE": "Friendly",
@@ -508,12 +508,12 @@
       "ALLOW_MESSAGES_AFTER_RESOLVED": "Allow messages after conversation resolved",
       "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Allow the end-users to send messages even after the conversation is resolved.",
       "WHATSAPP_SECTION_SUBHEADER": "This API Key is used for the integration with the WhatsApp APIs.",
-      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the new API key to be used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the updated key to be used for the integration with the WhatsApp APIs.",
       "WHATSAPP_SECTION_TITLE": "API Key",
       "WHATSAPP_SECTION_UPDATE_TITLE": "Update API Key",
       "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Enter the new API Key here",
       "WHATSAPP_SECTION_UPDATE_BUTTON": "Update",
-      "WHATSAPP_WEBHOOK_TITLE": "Webhook Verification Token",
+      "WHATSAPP_WEBHOOK_TITLE": "Webhook Verify Token",
       "WHATSAPP_WEBHOOK_SUBHEADER": "This token is used to verify the authenticity of the webhook endpoint.",
       "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings"
     },
@@ -585,7 +585,7 @@
       "NOTE_TEXT": "To enable SMTP, please configure IMAP.",
       "UPDATE": "Update IMAP settings",
       "TOGGLE_AVAILABILITY": "Enable IMAP configuration for this inbox",
-      "TOGGLE_HELP": "Enabling IMAP will help the user to receive email",
+      "TOGGLE_HELP": "Enabling IMAP will help the user to recieve email",
       "EDIT": {
         "SUCCESS_MESSAGE": "IMAP settings updated successfully",
         "ERROR_MESSAGE": "Unable to update IMAP settings"

app/javascript/dashboard/i18n/locale/am/settings.json

@@ -10,7 +10,6 @@
     "PASSWORD_UPDATE_SUCCESS": "Your password has been changed successfully",
     "AFTER_EMAIL_CHANGED": "Your profile has been updated successfully, please login again as your login credentials are changed",
     "FORM": {
-      "PICTURE": "Profile Picture",
       "AVATAR": "Profile Image",
       "ERROR": "Please fix form errors",
       "REMOVE_IMAGE": "Remove",
@@ -57,19 +56,13 @@
       },
       "ACCESS_TOKEN": {
         "TITLE": "Access Token",
-        "NOTE": "This token can be used if you are building an API based integration",
-        "COPY": "Copy"
+        "NOTE": "This token can be used if you are building an API based integration"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
         "TITLE": "Audio Notifications",
         "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
-        "ALERT_TYPES": {
-          "NONE": "None",
-          "MINE": "Assigned",
-          "ALL": "All"
-        },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "Alert events:",
           "NONE": "None",
           "ASSIGNED": "Assigned Conversations",
           "ALL_CONVERSATIONS": "All Conversations"
@@ -95,23 +88,6 @@
         "SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
         "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
       },
-      "NOTIFICATIONS": {
-        "TITLE": "Notification preferences",
-        "TYPE_TITLE": "Notification type",
-        "EMAIL": "Email",
-        "PUSH": "Push notification",
-        "TYPES": {
-          "CONVERSATION_CREATED": "A new conversation is created",
-          "CONVERSATION_ASSIGNED": "A conversation is assigned to you",
-          "CONVERSATION_MENTION": "You are mentioned in a conversation",
-          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "A new message is created in an assigned conversation",
-          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "A new message is created in a participating conversation",
-          "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
-          "SLA_MISSED_NEXT_RESPONSE": "A conversation misses next response SLA",
-          "SLA_MISSED_RESOLUTION": "A conversation misses resolution SLA"
-        },
-        "BROWSER_PERMISSION": "Enable push notifications for your browser so you’re able to receive them"
-      },
       "API": {
         "UPDATE_SUCCESS": "Your notification preferences are updated successfully",
         "UPDATE_ERROR": "There is an error while updating the preferences, please try again"
@@ -344,6 +320,7 @@
       "GO_TO_REPORTS_SIDEBAR": "Go to Reports sidebar",
       "MOVE_TO_NEXT_TAB": "Move to next tab in conversation list",
       "GO_TO_SETTINGS": "Go to Settings",
+      "SWITCH_CONVERSATION_STATUS": "Switch to the next conversation status",
       "SWITCH_TO_PRIVATE_NOTE": "Switch to Private Note",
       "SWITCH_TO_REPLY": "Switch to Reply",
       "TOGGLE_SNOOZE_DROPDOWN": "Toggle snooze dropdown"

app/javascript/dashboard/i18n/locale/am/sla.json

@@ -6,18 +6,6 @@
     "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
     "LEARN_MORE": "Learn more about SLA",
     "LOADING": "Fetching SLAs",
-    "PAYWALL": {
-      "TITLE": "Upgrade to create SLAs",
-      "AVAILABLE_ON": "The SLA feature is only available in the Business and Enterprise plans.",
-      "UPGRADE_PROMPT": "Upgrade your plan to get access to advanced features like team management, automations, custom attributes, and more.",
-      "UPGRADE_NOW": "Upgrade now",
-      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
-    },
-    "ENTERPRISE_PAYWALL": {
-      "AVAILABLE_ON": "The SLA feature is only available in the paid plans.",
-      "UPGRADE_PROMPT": "Upgrade to a paid plan to access advanced features like audit logs, agent capacity, and more.",
-      "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
-    },
     "LIST": {
       "404": "There are no SLAs available in this account.",
       "EMPTY": {
@@ -105,4 +93,4 @@
       "HIDE": "Hide {count} rows"
     }
   }
-}
+}

app/javascript/dashboard/i18n/locale/ar/automation.json

@@ -87,8 +87,8 @@
     },
     "CONDITION": {
       "DELETE_MESSAGE": "يجب أن يكون لديك على الأقل شرط واحد للحفظ",
-      "CONTACT_CUSTOM_ATTR_LABEL": "سمة مخصصة لجهة اتصال",
-      "CONVERSATION_CUSTOM_ATTR_LABEL": "سمة مخصصة للمحادثة"
+      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
     },
     "ACTION": {
       "DELETE_MESSAGE": "يجب أن يكون لديك على الأقل شرط واحد للحفظ",
@@ -111,7 +111,7 @@
       "UPLOAD_ERROR": "تعذر تحميل المرفق، الرجاء المحاولة مرة أخرى",
       "LABEL_IDLE": "ارفع المرفق",
       "LABEL_UPLOADING": "جاري الرفع...",
-      "LABEL_UPLOADED": "تم الرفع بنجاح",
+      "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "فشل الرفع"
     }
   }

app/javascript/dashboard/i18n/locale/ar/bulkActions.json

@@ -17,7 +17,7 @@
     "AGENT_LIST_LOADING": "جاري تحميل الوكلاء",
     "UPDATE": {
       "CHANGE_STATUS": "تغيير الحالة",
-      "SNOOZE_UNTIL": "غفوة",
+      "SNOOZE_UNTIL_NEXT_REPLY": "غفوة حتى الرد القادم.",
       "UPDATE_SUCCESFUL": "تم تحديث حالة المحادثة بنجاح.",
       "UPDATE_FAILED": "Failed to update conversations. Please try again."
     },

app/javascript/dashboard/i18n/locale/ar/cannedMgmt.json

@@ -1,8 +1,8 @@
 {
   "CANNED_MGMT": {
     "HEADER": "الردود السريعة",
-    "HEADER_BTN_TXT": "إضافة رد جاهز",
-    "LOADING": "جاري جلب الردود الجاهزة...",
+    "HEADER_BTN_TXT": "Add canned response",
+    "LOADING": "Fetching canned responses...",
     "SEARCH_404": "لا توجد عناصر مطابقة لهذا الاستعلام.",
     "SIDEBAR_TXT": "<p><b>Canned Responses</b> </p><p> Canned Responses are pre-written reply templates that help you quickly respond to a conversation. To insert a canned response during a chat, agents can type a short code preceded by a '/' character. </p><p> You can manage your canned responses from this page or create new ones using the \"Add canned response\" button.</p><p>Open the <a target=\"_blank\" href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677501325-how-to-create-saved-reply-templates-with-canned-responses\">Canned Responses handbook</a> in another tab for a helping hand.</p><p>Also, check out the all-new <a href=\"https://www.chatwoot.com/tools/canned-responses-library\" target=\"_blank\">Canned Responses Library</a>.</p>",
     "LIST": {
@@ -10,66 +10,66 @@
       "TITLE": "إدارة الردود الجاهزة",
       "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
       "TABLE_HEADER": [
-        "كود مختصر",
+        "Short code",
         "المحتوى",
         "الإجراءات"
       ]
     },
     "ADD": {
-      "TITLE": "إضافة رد جاهز",
+      "TITLE": "Add canned response",
       "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to conversations.",
       "CANCEL_BUTTON_TEXT": "إلغاء",
       "FORM": {
         "SHORT_CODE": {
-          "LABEL": "كود مختصر",
-          "PLACEHOLDER": "من فضلك ادخل الكود مختصر.",
-          "ERROR": "الكود مختصر مطلوب."
+          "LABEL": "Short code",
+          "PLACEHOLDER": "Please enter a short code.",
+          "ERROR": "Short Code is required."
         },
         "CONTENT": {
           "LABEL": "رسالة",
-          "PLACEHOLDER": "من فضلك ادخل نص لرسالة التي ترغب في حفظها كقالب لاستخدامها لاحقاُ.",
-          "ERROR": "الرسالة مطلوبة."
+          "PLACEHOLDER": "Please write the message you want to save as a template to use later.",
+          "ERROR": "Message is required."
         },
         "SUBMIT": "إرسال"
       },
       "API": {
-        "SUCCESS_MESSAGE": "تم إضافة الرد المعد مسبقاً بنجاح.",
+        "SUCCESS_MESSAGE": "Canned response added successfully.",
         "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
       }
     },
     "EDIT": {
-      "TITLE": "تعديل الرد المعد مسبقاً",
+      "TITLE": "Edit canned response",
       "CANCEL_BUTTON_TEXT": "إلغاء",
       "FORM": {
         "SHORT_CODE": {
-          "LABEL": "كود مختصر",
-          "PLACEHOLDER": "من فضلك ادخل الكود مختصر.",
-          "ERROR": "الكود مختصر مطلوب."
+          "LABEL": "Short code",
+          "PLACEHOLDER": "Please enter a shortcode.",
+          "ERROR": "Short code is required."
         },
         "CONTENT": {
           "LABEL": "رسالة",
-          "PLACEHOLDER": "من فضلك ادخل نص لرسالة التي ترغب في حفظها كقالب لاستخدامها لاحقاُ.",
+          "PLACEHOLDER": "Please write the message you want to save as a template to use later.",
           "ERROR": "الرسالة مطلوبة."
         },
         "SUBMIT": "إرسال"
       },
       "BUTTON_TEXT": "تعديل",
       "API": {
-        "SUCCESS_MESSAGE": "تم تحديث الرد المعد مسبقاً بنجاح.",
+        "SUCCESS_MESSAGE": "Canned response is updated successfully.",
         "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
       }
     },
     "DELETE": {
       "BUTTON_TEXT": "حذف",
       "API": {
-        "SUCCESS_MESSAGE": "تم حذف الرد المعد مسبقاً بنجاح.",
+        "SUCCESS_MESSAGE": "Canned response deleted successfully.",
         "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
       },
       "CONFIRM": {
         "TITLE": "تأكيد الحذف",
         "MESSAGE": "هل أنت متأكد من الحذف ",
-        "YES": "نعم, حذف ",
-        "NO": "لا, قم بالابقاء عليه "
+        "YES": "Yes, delete ",
+        "NO": "No, keep "
       }
     }
   }

app/javascript/dashboard/i18n/locale/ar/chatlist.json

@@ -43,7 +43,7 @@
     },
     "CHAT_TIME_STAMP": {
       "CREATED": {
-        "LATEST": "مضاف",
+        "LATEST": "Created",
         "OLDEST": "تم إنشاؤها في:"
       },
       "LAST_ACTIVITY": {
@@ -53,10 +53,10 @@
     },
     "SORT_ORDER_ITEMS": {
       "last_activity_at_asc": {
-        "TEXT": "اخر نشاط: آلأقدم أولا"
+        "TEXT": "Last activity: Oldest first"
       },
       "last_activity_at_desc": {
-        "TEXT": "اخر نشاط: الأحدث أولا"
+        "TEXT": "Last activity: Newest first"
       },
       "created_at_desc": {
         "TEXT": "Created at: Newest first"
@@ -111,7 +111,7 @@
         },
         "LAST_USER_MESSAGE_AT": {
           "NAME": "Last user message at",
-          "LABEL": "أخر رسالة"
+          "LABEL": "Last message"
         }
       }
     },

app/javascript/dashboard/i18n/locale/ar/contact.json

@@ -15,7 +15,7 @@
     "INITIATED_FROM": "تم البدء من",
     "INITIATED_AT": "تم البدء في",
     "IP_ADDRESS": "عنوان IP",
-    "CREATED_AT_LABEL": "أضيفت",
+    "CREATED_AT_LABEL": "Created",
     "NEW_MESSAGE": "رسالة جديدة",
     "CONVERSATIONS": {
       "NO_RECORDS_FOUND": "لا توجد محادثات سابقة مرتبطة بجهة الاتصال هذه.",
@@ -39,17 +39,16 @@
     },
     "MERGE_CONTACT": "دمج جهة الاتصال",
     "CONTACT_ACTIONS": "إجراءات جهات الاتصال",
-    "MUTE_CONTACT": "احجب جهة الاتصال",
-    "UNMUTE_CONTACT": "إلغاء حجب جهة الاتصال",
+    "MUTE_CONTACT": "Block Contact",
+    "UNMUTE_CONTACT": "Unblock Contact",
     "MUTED_SUCCESS": "This contact is blocked successfully. You will not be notified of any future conversations.",
-    "UNMUTED_SUCCESS": "تم إلغاء حجب جهة الاتصال بنجاح.",
+    "UNMUTED_SUCCESS": "This contact is unblocked successfully.",
     "SEND_TRANSCRIPT": "إرسال النص",
     "EDIT_LABEL": "تعديل",
     "SIDEBAR_SECTIONS": {
       "CUSTOM_ATTRIBUTES": "سمات مخصصة",
       "CONTACT_LABELS": "تصنفيات جهات الاتصال",
-      "PREVIOUS_CONVERSATIONS": "المحادثات السابقة",
-      "NO_RECORDS_FOUND": "لم يتم العثور على سمات"
+      "PREVIOUS_CONVERSATIONS": "المحادثات السابقة"
     }
   },
   "EDIT_CONTACT": {
@@ -76,17 +75,16 @@
     "ERROR_MESSAGE": "حدث خطأ، الرجاء المحاولة مرة أخرى"
   },
   "EXPORT_CONTACTS": {
-    "BUTTON_LABEL": "تصدير",
-    "TITLE": "تصدير جهات الاتصال",
-    "DESC": "تصدير جهات الاتصال إلى ملف CSV.",
+    "BUTTON_LABEL": "Export",
+    "TITLE": "Export Contacts",
+    "DESC": "Export contacts to a CSV file.",
     "SUCCESS_MESSAGE": "Export is in progress, You will be notified via email when export file is ready to dowanlod.",
     "ERROR_MESSAGE": "حدث خطأ، الرجاء المحاولة مرة أخرى",
     "CONFIRM": {
-      "TITLE": "تصدير جهات الاتصال",
+      "TITLE": "Export Contacts",
       "MESSAGE": "Are you sure you want to export all contacts?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
-      "YES": "نعم, قم بالتصدير",
-      "NO": "نعم, إلغاء"
+      "YES": "Yes, Export",
+      "NO": "No, Cancel"
     }
   },
   "DELETE_NOTE": {
@@ -150,15 +148,15 @@
         "LABEL": "اسم الشركة"
       },
       "COUNTRY": {
-        "PLACEHOLDER": "إدخال اسم الدولة",
+        "PLACEHOLDER": "Enter the country name",
         "LABEL": "اسم الدولة",
         "SELECT_PLACEHOLDER": "اختر",
         "REMOVE": "حذف",
-        "SELECT_COUNTRY": "أختر الدولة"
+        "SELECT_COUNTRY": "Select Country"
       },
       "CITY": {
-        "PLACEHOLDER": "إدخال اسم المدينة",
-        "LABEL": "اسم المدينة"
+        "PLACEHOLDER": "Enter the city name",
+        "LABEL": "City Name"
       },
       "SOCIAL_PROFILES": {
         "FACEBOOK": {
@@ -199,7 +197,7 @@
       },
       "INBOX": {
         "LABEL": "صندوق الوارد",
-        "PLACEHOLDER": "اختر صندوق المصدر",
+        "PLACEHOLDER": "Choose source inbox",
         "ERROR": "حدد صندوق الوارد"
       },
       "SUBJECT": {

app/javascript/dashboard/i18n/locale/ar/conversation.json

@@ -149,7 +149,7 @@
       "PRIVATE_NOTE": "إضافة ملاحظة خاصة",
       "SEND": "إرسال",
       "CREATE": "إضافة ملاحظة",
-      "INSERT_READ_MORE": "اقرأ المزيد",
+      "INSERT_READ_MORE": "Read more",
       "DISMISS_REPLY": "Dismiss reply",
       "REPLYING_TO": "Replying to:",
       "TIP_FORMAT_ICON": "عرض محرر النصوص",
@@ -280,7 +280,6 @@
   },
   "CONVERSATION_CUSTOM_ATTRIBUTES": {
     "ADD_BUTTON_TEXT": "إنشاء سمة جديدة",
-    "NO_RECORDS_FOUND": "لم يتم العثور على سمات",
     "UPDATE": {
       "SUCCESS": "تم تحديث السمة المخصصة بنجاح",
       "ERROR": "غير قادر على تحديث السمة. الرجاء المحاولة مرة أخرى لاحقاً"

app/javascript/dashboard/i18n/locale/ar/csatMgmt.json

@@ -3,11 +3,11 @@
     "TITLE": "قيم محادثتك",
     "PLACEHOLDER": "أخبرنا المزيد...",
     "RATINGS": {
-      "POOR": "😞 سيئ",
-      "FAIR": "مقبول😑",
-      "AVERAGE": "😐 متوسط",
-      "GOOD": "😀 جيد",
-      "EXCELLENT": "😍 ممتاز"
+      "POOR": "😞 Poor",
+      "FAIR": "😑 Fair",
+      "AVERAGE": "😐 Average",
+      "GOOD": "😀 Good",
+      "EXCELLENT": "😍 Excellent"
     }
   }
 }

app/javascript/dashboard/i18n/locale/ar/datePicker.json

@@ -1,19 +0,0 @@
-{
-  "DATE_PICKER": {
-    "APPLY_BUTTON": "تطبيق",
-    "CLEAR_BUTTON": "Clear",
-    "DATE_RANGE_INPUT": {
-      "START": "Start Date",
-      "END": "End Date"
-    },
-    "DATE_RANGE_OPTIONS": {
-      "TITLE": "DATE RANGE",
-      "LAST_7_DAYS": "آخر 7 أيام",
-      "LAST_30_DAYS": "آخر 30 يوماً",
-      "LAST_3_MONTHS": "آخر 3 أشهر",
-      "LAST_6_MONTHS": "آخر 6 أشهر",
-      "LAST_YEAR": "العام الماضي",
-      "CUSTOM_RANGE": "تحديد نطاق المدة"
-    }
-  }
-}

app/javascript/dashboard/i18n/locale/ar/general.json

@@ -1,5 +1,5 @@
 {
   "GENERAL": {
-    "SHOWING_RESULTS": "عرض{firstIndex}-{lastIndex} من {totalCount} إجماليي العناصر"
+    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
   }
 }

app/javascript/dashboard/i18n/locale/ar/generalSettings.json

@@ -3,7 +3,7 @@
     "TITLE": "إعدادات الحساب",
     "SUBMIT": "تحديث الإعدادات",
     "BACK": "العودة",
-    "DISMISS": "تجاهل",
+    "DISMISS": "Dismiss",
     "UPDATE": {
       "ERROR": "تعذر تحديث الإعدادات، الرجاء المحاولة مرة أخرى!",
       "SUCCESS": "تم تحديث إعدادات الحساب بنجاح"
@@ -52,7 +52,7 @@
     "LEARN_MORE": "اعرف المزيد",
     "PAYMENT_PENDING": "Your payment is pending. Please update your payment information to continue using Chatwoot",
     "LIMITS_UPGRADE": "Your account has exceeded the usage limits, please upgrade your plan to continue using Chatwoot",
-    "OPEN_BILLING": "فتح الفواتير"
+    "OPEN_BILLING": "Open billing"
   },
   "FORMS": {
     "MULTISELECT": {
@@ -107,17 +107,16 @@
       "GENERAL": "عام",
       "REPORTS": "التقارير",
       "CONVERSATION": "المحادثات",
-      "BULK_ACTIONS": "Bulk Actions",
       "CHANGE_ASSIGNEE": "تغيير المحال إليه",
-      "CHANGE_PRIORITY": "تغيير الأولوية",
+      "CHANGE_PRIORITY": "Change Priority",
       "CHANGE_TEAM": "تغيير الفريق",
       "SNOOZE_CONVERSATION": "تأجيل المحادثة",
       "ADD_LABEL": "إضافة تسمية إلى المحادثة",
       "REMOVE_LABEL": "إزالة التسمية من المحادثة",
       "SETTINGS": "الإعدادات",
       "AI_ASSIST": "AI Assist",
-      "APPEARANCE": "مظهر",
-      "SNOOZE_NOTIFICATION": "تأجيل التنبيهات"
+      "APPEARANCE": "Appearance",
+      "SNOOZE_NOTIFICATION": "Snooze Notification"
     },
     "COMMANDS": {
       "GO_TO_CONVERSATION_DASHBOARD": "الذهاب إلى لوحة المحادثة",
@@ -140,7 +139,7 @@
       "ADD_LABELS_TO_CONVERSATION": "إضافة تسمية إلى المحادثة",
       "ASSIGN_AN_AGENT": "تعيين وكيل",
       "AI_ASSIST": "AI Assist",
-      "ASSIGN_PRIORITY": "تعيين الأولوية",
+      "ASSIGN_PRIORITY": "Assign priority",
       "ASSIGN_A_TEAM": "تعيين فريق",
       "MUTE_CONVERSATION": "كتم المحادثة",
       "UNMUTE_CONVERSATION": "إلغاء كتم المحادثة",
@@ -152,21 +151,21 @@
       "UNTIL_NEXT_REPLY": "حتى الرد القادم",
       "UNTIL_NEXT_WEEK": "حتى الأسبوع القادم",
       "UNTIL_TOMORROW": "حتى الغد",
-      "UNTIL_NEXT_MONTH": "حتي الشهر القادم",
-      "AN_HOUR_FROM_NOW": "حتي ساعة من الأن",
-      "CUSTOM": "مخصص...",
-      "CHANGE_APPEARANCE": "تغيير المظهر",
+      "UNTIL_NEXT_MONTH": "Until next month",
+      "AN_HOUR_FROM_NOW": "Until an hour from now",
+      "CUSTOM": "Custom...",
+      "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
-      "DARK_MODE": "مظلم",
-      "SYSTEM_MODE": "نظام",
-      "SNOOZE_NOTIFICATION": "تأجيل التنبيهات"
+      "DARK_MODE": "Dark",
+      "SYSTEM_MODE": "System",
+      "SNOOZE_NOTIFICATION": "Snooze Notification"
     }
   },
   "DASHBOARD_APPS": {
     "LOADING_MESSAGE": "تحميل تطبيق لوحة التحكم..."
   },
   "COMMON": {
-    "OR": "أو",
+    "OR": "Or",
     "CLICK_HERE": "اضغط هنا"
   }
 }

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

@@ -22,7 +22,7 @@
         "body": "إضافة موظفين إلى صندوق الوارد الخاص بقناة التواصل التي تم إنشاؤها."
       },
       {
-        "title": "Voilà!",
+        "title": "مرحى!",
         "route": "settings_inbox_finish",
         "body": "أصبح كل شيء جاهزاً الآن!"
       }
@@ -43,7 +43,7 @@
         "CHOOSE_PLACEHOLDER": "اختر صفحة من القائمة",
         "INBOX_NAME": "اسم صندوق الوارد لقناة التواصل",
         "ADD_NAME": "قم بتعيين اسم لصندوق الوارد الخاص بقناتك الجديدة",
-        "PICK_NAME": "Pick a Name for your Inbox",
+        "PICK_NAME": "اختر اسم لقناة التواصل الخاصة بك",
         "PICK_A_VALUE": "اختر قيمة"
       },
       "TWITTER": {
@@ -62,7 +62,7 @@
         },
         "CHANNEL_WEBHOOK_URL": {
           "LABEL": "رابط Webhook",
-          "PLACEHOLDER": "Please enter your Webhook URL",
+          "PLACEHOLDER": "أدخل رابط Webhook",
           "ERROR": "الرجاء إدخال عنوان URL صالح"
         },
         "CHANNEL_DOMAIN": {
@@ -112,14 +112,14 @@
           "ERROR": "هذا الحقل مطلوب"
         },
         "API_KEY": {
-          "USE_API_KEY": "استخدم مفتاح مصادقة API",
-          "LABEL": "مفتاح API SID",
-          "PLACEHOLDER": "الرجاء إدخال معرف مفتاح واجهة برمجة التطبيقات API الخاص بك",
+          "USE_API_KEY": "Use API Key Authentication",
+          "LABEL": "API Key SID",
+          "PLACEHOLDER": "Please enter your API Key SID",
           "ERROR": "هذا الحقل مطلوب"
         },
         "API_KEY_SECRET": {
-          "LABEL": "مفتاح سر API",
-          "PLACEHOLDER": "الرجاء إدخال سر مفتاح API الخاص بك",
+          "LABEL": "API Key Secret",
+          "PLACEHOLDER": "Please enter your API Key Secret",
           "ERROR": "هذا الحقل مطلوب"
         },
         "MESSAGING_SERVICE_SID": {
@@ -175,12 +175,12 @@
           },
           "API_KEY": {
             "LABEL": "مفتاح API",
-            "PLACEHOLDER": "Please enter your Bandwidth API Key",
+            "PLACEHOLDER": "الرجاء إدخال مفتاح API الخاص بك",
             "ERROR": "هذا الحقل مطلوب"
           },
           "API_SECRET": {
             "LABEL": "سرية API",
-            "PLACEHOLDER": "Please enter your Bandwidth API Secret",
+            "PLACEHOLDER": "الرجاء إدخال مفتاح API الخاص بك",
             "ERROR": "هذا الحقل مطلوب"
           },
           "APPLICATION_ID": {
@@ -239,7 +239,7 @@
         },
         "WEBHOOK_VERIFY_TOKEN": {
           "LABEL": "رمز التحقق من Webhook",
-          "PLACEHOLDER": "Enter a verify token which you want to configure for Facebook webhooks.",
+          "PLACEHOLDER": "أدخل رمز التحقق الذي تريد إعداده لفيسبوك على شبكة الويب.",
           "ERROR": "الرجاء إدخال اسم صالح."
         },
         "API_KEY": {
@@ -269,7 +269,7 @@
         },
         "WEBHOOK_URL": {
           "LABEL": "رابط Webhook",
-          "SUBTITLE": "Configure the URL where you want to receive callbacks on events.",
+          "SUBTITLE": "تكوين عنوان URL حيث تريد تلقي ردود المكالمات على الأحداث.",
           "PLACEHOLDER": "رابط Webhook"
         },
         "SUBMIT_BUTTON": "إنشاء قناة API",
@@ -279,7 +279,7 @@
       },
       "EMAIL_CHANNEL": {
         "TITLE": "قناة البريد الالكتروني",
-        "DESC": "Integrate your email inbox.",
+        "DESC": "ربط البريد الإلكتروني الخاص بك.",
         "CHANNEL_NAME": {
           "LABEL": "اسم القناة",
           "PLACEHOLDER": "الرجاء إدخال اسم القناة",
@@ -345,7 +345,7 @@
       "AGENTS": {
         "TITLE": "موظف الدعم",
         "DESC": "هنا يمكنك إضافة موظفين لإدارة صندوق الوارد الخاص بقناة تواصلك التي تم إنشاؤها حديثاً. الموظفين الذين يتم تحديدهم هنا هم فقط من يمكنهم الوصول إلى صندوق الوارد الخاص بتلك القناة. الموظفين الذين ليسوا جزءاً من صندوق الوارد هذا لن يكونوا قادرين على رؤية أو الرد على الرسائل في قناة التواصل هذه عند تسجيل الدخول. <br> <b>ملحوظة:</b> كمسؤول، إذا كنت بحاجة إلى الوصول إلى جميع صناديق الوارد، يجب عليك إضافة نفسك كموظف لجميع صناديق الوارد الخاصة بقنوات التواصل التي تنشئها.",
-        "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
+        "VALIDATION_ERROR": "إضافة وكيل واحد على الأقل إلى علبة الوارد الجديدة",
         "PICK_AGENTS": "اختر وكلاء لصندوق الوارد"
       },
       "DETAILS": {
@@ -357,7 +357,7 @@
         "DESC": "لقد تم بنجاح ربط صفحة فيسبوك الخاصة بك مع Chatwoot. في المرة القادمة التي يرسل فيها العملاء رسالة إلى صفحتك، ستظهر المحادثة تلقائيًا على صندوق الوارد الخاص بك هنا.<br>نحن نزودك أيضًا بالكود النصي لصندوق دردشة الماسنجر والذي يمكنك إضافته بسهولة إلى الموقع الخاص بك لاستقبال الرسائل من الزوار كذلك. بمجرد أن يتم ذلك على موقع الويب الخاص بك، يمكن للعملاء مراسلتك من موقع الويب الخاص بك بدون الحاجة لأي أدوات خارجية وستظهر المحادثة هنا على Chatwoot.<br>رائع، أليس كذلك؟ نحن بالتأكيد نحاول أن نكون الأفضل :)"
       },
       "EMAIL_PROVIDER": {
-        "TITLE": "حدد مزود البريد الإلكتروني الخاص بك",
+        "TITLE": "Select your email provider",
         "DESCRIPTION": "Select an email provider from the list below. If you don't see your email provider in the list, you can select the other provider option and provide the IMAP and SMTP Credentials."
       },
       "MICROSOFT": {
@@ -406,7 +406,7 @@
       },
       "SENDER_NAME_SECTION": {
         "TITLE": "Sender name",
-        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
+        "SUB_TEXT": "Select the name shown to the your customer when they receive emails from your agents.",
         "FOR_EG": "For eg:",
         "FRIENDLY": {
           "TITLE": "Friendly",
@@ -508,7 +508,7 @@
       "ALLOW_MESSAGES_AFTER_RESOLVED": "السماح بالرسائل بعد حل المحادثة",
       "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "السماح للمستخدمين النهائيين بإرسال رسائل حتى بعد تسوية المحادثة.",
       "WHATSAPP_SECTION_SUBHEADER": "يتم استخدام مفتاح API هذا للتكامل مع واتسب APIs.",
-      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the new API key to be used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the updated key to be used for the integration with the WhatsApp APIs.",
       "WHATSAPP_SECTION_TITLE": "مفتاح API",
       "WHATSAPP_SECTION_UPDATE_TITLE": "Update API Key",
       "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Enter the new API Key here",
@@ -585,7 +585,7 @@
       "NOTE_TEXT": "لتمكين SMTP ، الرجاء تكوين IMAP.",
       "UPDATE": "تحديث الإعدادات",
       "TOGGLE_AVAILABILITY": "تمكين تكوين IMAP لهذا البريد الوارد",
-      "TOGGLE_HELP": "Enabling IMAP will help the user to receive email",
+      "TOGGLE_HELP": "تمكين IMAP سيساعد المستخدم على تلقي البريد الإلكتروني",
       "EDIT": {
         "SUCCESS_MESSAGE": "تم تحديث إعدادات IMAP بنجاح",
         "ERROR_MESSAGE": "غير قادر على تحديث إعدادات IMAP"

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

@@ -131,7 +131,7 @@
         "KEY_PLACEHOLDER": "Enter your OpenAI API key",
         "BUTTONS": {
           "NEED_HELP": "تحتاج مساعدة؟",
-          "DISMISS": "تجاهل",
+          "DISMISS": "Dismiss",
           "FINISH": "Finish Setup"
         },
         "DISMISS_MESSAGE": "You can setup OpenAI integration later Whenever you want.",

app/javascript/dashboard/i18n/locale/ar/labelsMgmt.json

@@ -46,7 +46,7 @@
         "DISMISS": "Dismiss suggestion"
       },
       "POWERED_BY": "Chatwoot AI",
-      "DISMISS": "تجاهل",
+      "DISMISS": "Dismiss",
       "ADD_SELECTED_LABELS": "Add selected labels",
       "ADD_SELECTED_LABEL": "Add selected label",
       "ADD_ALL_LABELS": "Add all labels"

app/javascript/dashboard/i18n/locale/ar/login.json

@@ -16,9 +16,9 @@
       "UNAUTH": "اسم المستخدم / كلمة المرور غير صحيحة. الرجاء المحاولة مرة أخرى"
     },
     "OAUTH": {
-      "GOOGLE_LOGIN": "تسجيل الدخول بواسطة جوجل",
-      "BUSINESS_ACCOUNTS_ONLY": "الرجاء استخدام عنوان البريد الإلكتروني الخاص بشركتك لتسجيل الدخول",
-      "NO_ACCOUNT_FOUND": "لم نتمكن من العثور على حساب لعنوان البريد الإلكتروني الخاص بك."
+      "GOOGLE_LOGIN": "Login with Google",
+      "BUSINESS_ACCOUNTS_ONLY": "Please use your company email address to login",
+      "NO_ACCOUNT_FOUND": "We couldn't find an account for your email address."
     },
     "FORGOT_PASSWORD": "نسيت كلمة المرور؟",
     "CREATE_NEW_ACCOUNT": "إنشاء حساب جديد",

app/javascript/dashboard/i18n/locale/ar/search.json

@@ -17,7 +17,7 @@
     "INPUT_PLACEHOLDER": "Search messages, contacts or conversations",
     "EMPTY_STATE_DEFAULT": "Search by conversation id, email, phone number, messages for better search results.",
     "BOT_LABEL": "رد آلي",
-    "READ_MORE": "اقرأ المزيد",
+    "READ_MORE": "Read more",
     "WROTE": "wrote:",
     "FROM": "من",
     "EMAIL": "البريد الإلكتروني"

app/javascript/dashboard/i18n/locale/ar/setNewPassword.json

@@ -1,13 +1,13 @@
 {
   "SET_NEW_PASSWORD": {
-    "TITLE": "تعيين كلمة مرور جديدة",
+    "TITLE": "Set new password",
     "PASSWORD": {
       "LABEL": "كلمة المرور",
       "PLACEHOLDER": "كلمة المرور",
-      "ERROR": "كلمة المرور قصيرة جداً."
+      "ERROR": "Password is too short."
     },
     "CONFIRM_PASSWORD": {
-      "LABEL": "تأكيد كلمة المرور",
+      "LABEL": "Confirm password",
       "PLACEHOLDER": "تأكيد كلمة المرور",
       "ERROR": "كلمة المرور غير متطابقة."
     },

app/javascript/dashboard/i18n/locale/ar/settings.json

@@ -10,7 +10,6 @@
     "PASSWORD_UPDATE_SUCCESS": "تم تغيير كلمة المرور بنجاح",
     "AFTER_EMAIL_CHANGED": "تم تحديث ملفك الشخصي بنجاح، الرجاء تسجيل الدخول مرة أخرى حيث أنه قد تم تغيير بيانات تسجيل الدخول الخاصة بك",
     "FORM": {
-      "PICTURE": "Profile Picture",
       "AVATAR": "صورة الملف الشخصي",
       "ERROR": "الرجاء إصلاح الأخطاء في النموذج",
       "REMOVE_IMAGE": "حذف",
@@ -57,19 +56,13 @@
       },
       "ACCESS_TOKEN": {
         "TITLE": "رمز المصادقة",
-        "NOTE": "يمكن استخدام هذا رمز المصادقة إذا كنت تبني تطبيقات API للتكامل مع Chatwoot",
-        "COPY": "نسخ"
+        "NOTE": "يمكن استخدام هذا رمز المصادقة إذا كنت تبني تطبيقات API للتكامل مع Chatwoot"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
         "TITLE": "الإشعارات الصوتية",
         "NOTE": "تمكين التنبيهات الصوتية في لوحة التحكم للرسائل والمحادثات الجديدة.",
-        "ALERT_TYPES": {
-          "NONE": "لا شيء",
-          "MINE": "Assigned",
-          "ALL": "الكل"
-        },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "أحداث التنبيه:",
           "NONE": "لا شيء",
           "ASSIGNED": "المحادثات المسندة",
           "ALL_CONVERSATIONS": "كل المحادثات"
@@ -95,23 +88,6 @@
         "SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
         "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
       },
-      "NOTIFICATIONS": {
-        "TITLE": "Notification preferences",
-        "TYPE_TITLE": "Notification type",
-        "EMAIL": "البريد الإلكتروني",
-        "PUSH": "الإشعارات الفورية",
-        "TYPES": {
-          "CONVERSATION_CREATED": "A new conversation is created",
-          "CONVERSATION_ASSIGNED": "A conversation is assigned to you",
-          "CONVERSATION_MENTION": "You are mentioned in a conversation",
-          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "A new message is created in an assigned conversation",
-          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "A new message is created in a participating conversation",
-          "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
-          "SLA_MISSED_NEXT_RESPONSE": "A conversation misses next response SLA",
-          "SLA_MISSED_RESOLUTION": "A conversation misses resolution SLA"
-        },
-        "BROWSER_PERMISSION": "Enable push notifications for your browser so you’re able to receive them"
-      },
       "API": {
         "UPDATE_SUCCESS": "يتم تحديث إعدادات الإشعارات بنجاح",
         "UPDATE_ERROR": "حدث خطأ أثناء تحديث الإعدادات، الرجاء المحاولة مرة أخرى"
@@ -182,7 +158,7 @@
     "SELECTOR_SUBTITLE": "اختر حساباً من القائمة التالية",
     "PROFILE_SETTINGS": "إعدادات الملف الشخصي",
     "KEYBOARD_SHORTCUTS": "اختصارات لوحة المفاتيح",
-    "APPEARANCE": "تغيير المظهر",
+    "APPEARANCE": "Change Appearance",
     "SUPER_ADMIN_CONSOLE": "وحدة تحكم المدير المتميز",
     "LOGOUT": "تسجيل الخروج"
   },
@@ -344,6 +320,7 @@
       "GO_TO_REPORTS_SIDEBAR": "الذهاب إلى شريط التقارير الجانبي",
       "MOVE_TO_NEXT_TAB": "نقل إلى علامة التبويب التالية في قائمة المحادثات",
       "GO_TO_SETTINGS": "انتقل إلى الإعدادات",
+      "SWITCH_CONVERSATION_STATUS": "التبديل إلى حالة المحادثة التالية",
       "SWITCH_TO_PRIVATE_NOTE": "التبديل إلى الملاحظة الخاصة",
       "SWITCH_TO_REPLY": "التبديل إلى الرد",
       "TOGGLE_SNOOZE_DROPDOWN": "تبديل القائمة المنسدلة"

app/javascript/dashboard/i18n/locale/ar/sla.json

@@ -6,18 +6,6 @@
     "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
     "LEARN_MORE": "Learn more about SLA",
     "LOADING": "Fetching SLAs",
-    "PAYWALL": {
-      "TITLE": "Upgrade to create SLAs",
-      "AVAILABLE_ON": "The SLA feature is only available in the Business and Enterprise plans.",
-      "UPGRADE_PROMPT": "Upgrade your plan to get access to advanced features like team management, automations, custom attributes, and more.",
-      "UPGRADE_NOW": "Upgrade now",
-      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
-    },
-    "ENTERPRISE_PAYWALL": {
-      "AVAILABLE_ON": "The SLA feature is only available in the paid plans.",
-      "UPGRADE_PROMPT": "Upgrade to a paid plan to access advanced features like audit logs, agent capacity, and more.",
-      "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
-    },
     "LIST": {
       "404": "There are no SLAs available in this account.",
       "EMPTY": {
@@ -105,4 +93,4 @@
       "HIDE": "Hide {count} rows"
     }
   }
-}
+}

app/javascript/dashboard/i18n/locale/bg/bulkActions.json

@@ -17,7 +17,7 @@
     "AGENT_LIST_LOADING": "Loading agents",
     "UPDATE": {
       "CHANGE_STATUS": "Change status",
-      "SNOOZE_UNTIL": "Snooze",
+      "SNOOZE_UNTIL_NEXT_REPLY": "Snooze until next reply.",
       "UPDATE_SUCCESFUL": "Conversation status updated successfully.",
       "UPDATE_FAILED": "Failed to update conversations. Please try again."
     },

app/javascript/dashboard/i18n/locale/bg/contact.json

@@ -48,8 +48,7 @@
     "SIDEBAR_SECTIONS": {
       "CUSTOM_ATTRIBUTES": "Персонализирани атрибути",
       "CONTACT_LABELS": "Етикети на контакта",
-      "PREVIOUS_CONVERSATIONS": "Предишни разговори",
-      "NO_RECORDS_FOUND": "Няма намерени атрибути"
+      "PREVIOUS_CONVERSATIONS": "Предишни разговори"
     }
   },
   "EDIT_CONTACT": {
@@ -84,7 +83,6 @@
     "CONFIRM": {
       "TITLE": "Export Contacts",
       "MESSAGE": "Are you sure you want to export all contacts?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
       "YES": "Yes, Export",
       "NO": "No, Cancel"
     }

app/javascript/dashboard/i18n/locale/bg/conversation.json

@@ -280,7 +280,6 @@
   },
   "CONVERSATION_CUSTOM_ATTRIBUTES": {
     "ADD_BUTTON_TEXT": "Create attribute",
-    "NO_RECORDS_FOUND": "Няма намерени атрибути",
     "UPDATE": {
       "SUCCESS": "Атрибута е обновен успешно",
       "ERROR": "Атрибута не бе обновен. Моля, опитайте отново по-късно"

app/javascript/dashboard/i18n/locale/bg/datePicker.json

@@ -1,19 +0,0 @@
-{
-  "DATE_PICKER": {
-    "APPLY_BUTTON": "Apply",
-    "CLEAR_BUTTON": "Clear",
-    "DATE_RANGE_INPUT": {
-      "START": "Start Date",
-      "END": "End Date"
-    },
-    "DATE_RANGE_OPTIONS": {
-      "TITLE": "DATE RANGE",
-      "LAST_7_DAYS": "Last 7 days",
-      "LAST_30_DAYS": "Last 30 days",
-      "LAST_3_MONTHS": "Last 3 months",
-      "LAST_6_MONTHS": "Last 6 months",
-      "LAST_YEAR": "Last year",
-      "CUSTOM_RANGE": "Custom date range"
-    }
-  }
-}

app/javascript/dashboard/i18n/locale/bg/generalSettings.json

@@ -107,7 +107,6 @@
       "GENERAL": "General",
       "REPORTS": "Reports",
       "CONVERSATION": "Разговор",
-      "BULK_ACTIONS": "Bulk Actions",
       "CHANGE_ASSIGNEE": "Change Assignee",
       "CHANGE_PRIORITY": "Change Priority",
       "CHANGE_TEAM": "Change Team",

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

@@ -22,7 +22,7 @@
         "body": "Add agents to the created inbox."
       },
       {
-        "title": "Voilà!",
+        "title": "Voila!",
         "route": "settings_inbox_finish",
         "body": "You are all set to go!"
       }
@@ -43,7 +43,7 @@
         "CHOOSE_PLACEHOLDER": "Select a page from the list",
         "INBOX_NAME": "Inbox Name",
         "ADD_NAME": "Add a name for your inbox",
-        "PICK_NAME": "Pick a Name for your Inbox",
+        "PICK_NAME": "Pick A Name Your Inbox",
         "PICK_A_VALUE": "Pick a value"
       },
       "TWITTER": {
@@ -62,7 +62,7 @@
         },
         "CHANNEL_WEBHOOK_URL": {
           "LABEL": "Webhook URL",
-          "PLACEHOLDER": "Please enter your Webhook URL",
+          "PLACEHOLDER": "Enter your Webhook URL",
           "ERROR": "Please enter a valid URL"
         },
         "CHANNEL_DOMAIN": {
@@ -143,7 +143,7 @@
           "ERROR": "This field is required"
         },
         "PHONE_NUMBER": {
-          "LABEL": "Телефон",
+          "LABEL": "Phone number",
           "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
           "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
         },
@@ -175,12 +175,12 @@
           },
           "API_KEY": {
             "LABEL": "API Key",
-            "PLACEHOLDER": "Please enter your Bandwidth API Key",
+            "PLACEHOLDER": "Please enter your Bandwith API Key",
             "ERROR": "This field is required"
           },
           "API_SECRET": {
             "LABEL": "API Secret",
-            "PLACEHOLDER": "Please enter your Bandwidth API Secret",
+            "PLACEHOLDER": "Please enter your Bandwith API Secret",
             "ERROR": "This field is required"
           },
           "APPLICATION_ID": {
@@ -223,7 +223,7 @@
           "ERROR": "This field is required"
         },
         "PHONE_NUMBER": {
-          "LABEL": "Телефон",
+          "LABEL": "Phone number",
           "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
           "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
         },
@@ -239,7 +239,7 @@
         },
         "WEBHOOK_VERIFY_TOKEN": {
           "LABEL": "Webhook Verify Token",
-          "PLACEHOLDER": "Enter a verify token which you want to configure for Facebook webhooks.",
+          "PLACEHOLDER": "Enter a verify token which you want to configure for facebook webhooks.",
           "ERROR": "Please enter a valid value."
         },
         "API_KEY": {
@@ -269,7 +269,7 @@
         },
         "WEBHOOK_URL": {
           "LABEL": "Webhook URL",
-          "SUBTITLE": "Configure the URL where you want to receive callbacks on events.",
+          "SUBTITLE": "Configure the URL where you want to recieve callbacks on events.",
           "PLACEHOLDER": "Webhook URL"
         },
         "SUBMIT_BUTTON": "Create API Channel",
@@ -279,7 +279,7 @@
       },
       "EMAIL_CHANNEL": {
         "TITLE": "Email Channel",
-        "DESC": "Integrate your email inbox.",
+        "DESC": "Integrate you email inbox.",
         "CHANNEL_NAME": {
           "LABEL": "Channel Name",
           "PLACEHOLDER": "Please enter a channel name",
@@ -345,7 +345,7 @@
       "AGENTS": {
         "TITLE": "Агенти",
         "DESC": "Here you can add agents to manage your newly created inbox. Only these selected agents will have access to your inbox. Agents which are not part of this inbox will not be able to see or respond to messages in this inbox when they login. <br> <b>PS:</b> As an administrator, if you need access to all inboxes, you should add yourself as agent to all inboxes that you create.",
-        "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
+        "VALIDATION_ERROR": "Add atleast one agent to your new Inbox",
         "PICK_AGENTS": "Pick agents for the inbox"
       },
       "DETAILS": {
@@ -406,7 +406,7 @@
       },
       "SENDER_NAME_SECTION": {
         "TITLE": "Sender name",
-        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
+        "SUB_TEXT": "Select the name shown to the your customer when they receive emails from your agents.",
         "FOR_EG": "For eg:",
         "FRIENDLY": {
           "TITLE": "Friendly",
@@ -508,12 +508,12 @@
       "ALLOW_MESSAGES_AFTER_RESOLVED": "Allow messages after conversation resolved",
       "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Allow the end-users to send messages even after the conversation is resolved.",
       "WHATSAPP_SECTION_SUBHEADER": "This API Key is used for the integration with the WhatsApp APIs.",
-      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the new API key to be used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the updated key to be used for the integration with the WhatsApp APIs.",
       "WHATSAPP_SECTION_TITLE": "API Key",
       "WHATSAPP_SECTION_UPDATE_TITLE": "Update API Key",
       "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Enter the new API Key here",
       "WHATSAPP_SECTION_UPDATE_BUTTON": "Обновяване",
-      "WHATSAPP_WEBHOOK_TITLE": "Webhook Verification Token",
+      "WHATSAPP_WEBHOOK_TITLE": "Webhook Verify Token",
       "WHATSAPP_WEBHOOK_SUBHEADER": "This token is used to verify the authenticity of the webhook endpoint.",
       "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings"
     },
@@ -585,7 +585,7 @@
       "NOTE_TEXT": "To enable SMTP, please configure IMAP.",
       "UPDATE": "Update IMAP settings",
       "TOGGLE_AVAILABILITY": "Enable IMAP configuration for this inbox",
-      "TOGGLE_HELP": "Enabling IMAP will help the user to receive email",
+      "TOGGLE_HELP": "Enabling IMAP will help the user to recieve email",
       "EDIT": {
         "SUCCESS_MESSAGE": "IMAP settings updated successfully",
         "ERROR_MESSAGE": "Unable to update IMAP settings"

app/javascript/dashboard/i18n/locale/bg/settings.json

@@ -10,7 +10,6 @@
     "PASSWORD_UPDATE_SUCCESS": "Your password has been changed successfully",
     "AFTER_EMAIL_CHANGED": "Your profile has been updated successfully, please login again as your login credentials are changed",
     "FORM": {
-      "PICTURE": "Profile Picture",
       "AVATAR": "Profile Image",
       "ERROR": "Please fix form errors",
       "REMOVE_IMAGE": "Remove",
@@ -57,19 +56,13 @@
       },
       "ACCESS_TOKEN": {
         "TITLE": "Access Token",
-        "NOTE": "This token can be used if you are building an API based integration",
-        "COPY": "Copy"
+        "NOTE": "This token can be used if you are building an API based integration"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
         "TITLE": "Audio Notifications",
         "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
-        "ALERT_TYPES": {
-          "NONE": "Нито един",
-          "MINE": "Assigned",
-          "ALL": "Всички"
-        },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "Alert events:",
           "NONE": "Нито един",
           "ASSIGNED": "Assigned Conversations",
           "ALL_CONVERSATIONS": "All Conversations"
@@ -95,23 +88,6 @@
         "SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
         "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
       },
-      "NOTIFICATIONS": {
-        "TITLE": "Notification preferences",
-        "TYPE_TITLE": "Notification type",
-        "EMAIL": "Имейл",
-        "PUSH": "Push notification",
-        "TYPES": {
-          "CONVERSATION_CREATED": "A new conversation is created",
-          "CONVERSATION_ASSIGNED": "A conversation is assigned to you",
-          "CONVERSATION_MENTION": "You are mentioned in a conversation",
-          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "A new message is created in an assigned conversation",
-          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "A new message is created in a participating conversation",
-          "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
-          "SLA_MISSED_NEXT_RESPONSE": "A conversation misses next response SLA",
-          "SLA_MISSED_RESOLUTION": "A conversation misses resolution SLA"
-        },
-        "BROWSER_PERMISSION": "Enable push notifications for your browser so you’re able to receive them"
-      },
       "API": {
         "UPDATE_SUCCESS": "Your notification preferences are updated successfully",
         "UPDATE_ERROR": "There is an error while updating the preferences, please try again"
@@ -344,6 +320,7 @@
       "GO_TO_REPORTS_SIDEBAR": "Go to Reports sidebar",
       "MOVE_TO_NEXT_TAB": "Move to next tab in conversation list",
       "GO_TO_SETTINGS": "Go to Settings",
+      "SWITCH_CONVERSATION_STATUS": "Switch to the next conversation status",
       "SWITCH_TO_PRIVATE_NOTE": "Switch to Private Note",
       "SWITCH_TO_REPLY": "Switch to Reply",
       "TOGGLE_SNOOZE_DROPDOWN": "Toggle snooze dropdown"

app/javascript/dashboard/i18n/locale/bg/sla.json

@@ -6,18 +6,6 @@
     "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
     "LEARN_MORE": "Learn more about SLA",
     "LOADING": "Fetching SLAs",
-    "PAYWALL": {
-      "TITLE": "Upgrade to create SLAs",
-      "AVAILABLE_ON": "The SLA feature is only available in the Business and Enterprise plans.",
-      "UPGRADE_PROMPT": "Upgrade your plan to get access to advanced features like team management, automations, custom attributes, and more.",
-      "UPGRADE_NOW": "Upgrade now",
-      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
-    },
-    "ENTERPRISE_PAYWALL": {
-      "AVAILABLE_ON": "The SLA feature is only available in the paid plans.",
-      "UPGRADE_PROMPT": "Upgrade to a paid plan to access advanced features like audit logs, agent capacity, and more.",
-      "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
-    },
     "LIST": {
       "404": "There are no SLAs available in this account.",
       "EMPTY": {
@@ -105,4 +93,4 @@
       "HIDE": "Hide {count} rows"
     }
   }
-}
+}

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

@@ -1,17 +1,17 @@
 {
   "FILTER": {
     "TITLE": "Filtre de converses",
-    "SUBTITLE": "Afegiu els vostres filtres a continuació i premeu 'Aplicar filtres' per eliminar el desordre del xat.",
-    "EDIT_CUSTOM_FILTER": "Edita la carpeta",
-    "CUSTOM_VIEWS_SUBTITLE": "Afegeix o elimina filtres i actualitza la teva carpeta.",
-    "ADD_NEW_FILTER": "Afegeix un filtre",
-    "FILTER_DELETE_ERROR": "Vaja, sembla que no podem desar res! Afegiu almenys un filtre per desar-lo.",
+    "SUBTITLE": "Add your filters below and hit 'Apply filters' to cut through the chat clutter.",
+    "EDIT_CUSTOM_FILTER": "Edit Folder",
+    "CUSTOM_VIEWS_SUBTITLE": "Add or remove filters and update your folder.",
+    "ADD_NEW_FILTER": "Add filter",
+    "FILTER_DELETE_ERROR": "Oops, looks like we can't save nothing! Please add at least one filter to save it.",
     "SUBMIT_BUTTON_LABEL": "Aplicar filtres",
-    "UPDATE_BUTTON_LABEL": "Actualitza la carpeta",
+    "UPDATE_BUTTON_LABEL": "Update folder",
     "CANCEL_BUTTON_LABEL": "Cancel·la",
-    "CLEAR_BUTTON_LABEL": "Esborra els filtres",
-    "FOLDER_LABEL": "Nom de la carpeta",
-    "FOLDER_QUERY_LABEL": "Consulta de carpeta",
+    "CLEAR_BUTTON_LABEL": "Clear filters",
+    "FOLDER_LABEL": "Folder Name",
+    "FOLDER_QUERY_LABEL": "Folder Query",
     "EMPTY_VALUE_ERROR": "El valor és necessari.",
     "TOOLTIP_LABEL": "Filtre de converses",
     "QUERY_DROPDOWN_LABELS": {
@@ -27,8 +27,8 @@
       "is_not_present": "No és present",
       "is_greater_than": "És més gran que",
       "is_less_than": "És més petit que",
-      "days_before": "És x dies abans",
-      "starts_with": "Comença amb"
+      "days_before": "Is x days before",
+      "starts_with": "Starts with"
     },
     "ATTRIBUTE_LABELS": {
       "TRUE": "Cert",
@@ -36,66 +36,66 @@
     },
     "ATTRIBUTES": {
       "STATUS": "Estat",
-      "ASSIGNEE_NAME": "Nom assignat",
-      "INBOX_NAME": "Nom de la safata d'entrada",
-      "TEAM_NAME": "Nom de l'equip",
-      "CONVERSATION_IDENTIFIER": "Identificador de conversa",
-      "CAMPAIGN_NAME": "Nom de la campanya",
+      "ASSIGNEE_NAME": "Assignee name",
+      "INBOX_NAME": "Inbox name",
+      "TEAM_NAME": "Team name",
+      "CONVERSATION_IDENTIFIER": "Conversation identifier",
+      "CAMPAIGN_NAME": "Campaign name",
       "LABELS": "Etiquetes",
-      "BROWSER_LANGUAGE": "Idioma del navegador",
-      "PRIORITY": "Prioritat",
-      "COUNTRY_NAME": "Nom del país",
-      "REFERER_LINK": "Enllaç de referència",
-      "CUSTOM_ATTRIBUTE_LIST": "Llista",
+      "BROWSER_LANGUAGE": "Browser language",
+      "PRIORITY": "Priority",
+      "COUNTRY_NAME": "Country name",
+      "REFERER_LINK": "Referer link",
+      "CUSTOM_ATTRIBUTE_LIST": "List",
       "CUSTOM_ATTRIBUTE_TEXT": "Llista",
       "CUSTOM_ATTRIBUTE_NUMBER": "Número",
       "CUSTOM_ATTRIBUTE_LINK": "Enllaç",
-      "CUSTOM_ATTRIBUTE_CHECKBOX": "Casella de selecció",
-      "CREATED_AT": "Creat a",
-      "LAST_ACTIVITY": "Última activitat"
+      "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
+      "CREATED_AT": "Created at",
+      "LAST_ACTIVITY": "Last activity"
     },
     "GROUPS": {
-      "STANDARD_FILTERS": "Filtres estàndard",
-      "ADDITIONAL_FILTERS": "Filtres addicionals",
-      "CUSTOM_ATTRIBUTES": "Atributs personalitzats"
+      "STANDARD_FILTERS": "Standard filters",
+      "ADDITIONAL_FILTERS": "Additional filters",
+      "CUSTOM_ATTRIBUTES": "Custom attributes"
     },
     "CUSTOM_VIEWS": {
       "ADD": {
-        "TITLE": "Vols desar aquest filtre?",
-        "LABEL": "Anomena aquest filtre",
-        "PLACEHOLDER": "Anomena el teu filtre per referir-lo més endavant.",
-        "ERROR_MESSAGE": "El nom és obligatori.",
-        "SAVE_BUTTON": "Desa el filtre",
+        "TITLE": "Do you want to save this filter?",
+        "LABEL": "Name this filter",
+        "PLACEHOLDER": "Name your filter to refer it later.",
+        "ERROR_MESSAGE": "Name is required.",
+        "SAVE_BUTTON": "Save filter",
         "CANCEL_BUTTON": "Cancel·la",
         "API_FOLDERS": {
-          "SUCCESS_MESSAGE": "Carpeta creada correctament.",
-          "ERROR_MESSAGE": "S'ha produït un error en crear la carpeta."
+          "SUCCESS_MESSAGE": "Folder created successfully.",
+          "ERROR_MESSAGE": "Error while creating folder."
         },
         "API_SEGMENTS": {
-          "SUCCESS_MESSAGE": "Segment creat correctament.",
-          "ERROR_MESSAGE": "S'ha produït un error en crear el segment."
+          "SUCCESS_MESSAGE": "Segment created successfully.",
+          "ERROR_MESSAGE": "Error while creating segment."
         }
       },
       "EDIT": {
-        "EDIT_BUTTON": "Editar la carpeta"
+        "EDIT_BUTTON": "Edit folder"
       },
       "DELETE": {
-        "DELETE_BUTTON": "Suprimir el filtre",
+        "DELETE_BUTTON": "Delete filter",
         "MODAL": {
           "CONFIRM": {
-            "TITLE": "Confirmar la supressió",
-            "MESSAGE": "Esteu segur que suprimiu el filtre ",
-            "YES": "Sí, esborra",
-            "NO": "No, guarda-ho"
+            "TITLE": "Confirm deletion",
+            "MESSAGE": "Are you sure to delete the filter ",
+            "YES": "Yes, delete",
+            "NO": "No, keep it"
           }
         },
         "API_FOLDERS": {
-          "SUCCESS_MESSAGE": "La carpeta s'ha suprimit correctament.",
-          "ERROR_MESSAGE": "S'ha produït un error en suprimir la carpeta."
+          "SUCCESS_MESSAGE": "Folder deleted successfully.",
+          "ERROR_MESSAGE": "Error while deleting folder."
         },
         "API_SEGMENTS": {
-          "SUCCESS_MESSAGE": "El segment s'ha suprimit correctament.",
-          "ERROR_MESSAGE": "S'ha produït un error en suprimir el segment."
+          "SUCCESS_MESSAGE": "Segment deleted successfully.",
+          "ERROR_MESSAGE": "Error while deleting segment."
         }
       }
     }

app/javascript/dashboard/i18n/locale/ca/agentBots.json

@@ -1,7 +1,7 @@
 {
   "AGENT_BOTS": {
     "HEADER": "Bots",
-    "LOADING_EDITOR": "S'està carregant l'editor...",
+    "LOADING_EDITOR": "Loading editor...",
     "HEADER_BTN_TXT": "Add bot configuration",
     "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.</p> <p> You can manage your bots from this page or create new ones using the 'Add bot configuraton' button.</p> <p> Open the <a href=\"https://www.chatwoot.com/hc/chatwoot-user-guide-cloud-version/articles/1677497472-how-to-use-agent-bots\" target=\"blank\">Agent bots handbook</a> in another tab for a helping hand.</p>",
     "CSML_BOT_EDITOR": {

app/javascript/dashboard/i18n/locale/ca/agentMgmt.json

@@ -3,7 +3,7 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Afegir Agent",
     "LOADING": "S'està recollint la llista d'agents",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> Un <b>Agent</b> és membre del vostre equip d’atenció al client. </p><p> Els agents podran veure i respondre missatges dels teus usuaris. La llista mostra tots els agents que hi ha actualment al teu compte.</p><p> Fer clic a <b>Afegeix Agent</b> per afegir un agent nou. L´agent que afegeixes rebrà un correu electrònic amb un enllaç de confirmació per activar el seu compte, després del qual podrà accedir a Chatwoot i respondre als missatges. </p><p> L´accés a les funcions de Chatwoot es basa en els següents rols.</p><p> <b>Agent</b> - Els agents amb aquesta funció només poden accedir a les bústies d´entrada, als informes i a les converses. Poden assignar converses a altres agents o a ells mateixos i resoldre converses.</p><p> <b>Administrador</b> - L´administrador tindrà accés a totes les funcions de Chatwoot habilitades per al teu compte, inclosa la configuració, juntament amb tots els privilegis dels agents normals.</p>",
+    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> Un <b>Agent</b> és membre del vostre equip d’atenció al client. </p><p> Els agents podran veure i respondre missatges dels teus usuaris. La llista mostra tots els agents que hi ha actualment al teu compte.</p><p> Fer clic a <b>Afegeix Agent</b> per afegir un agent nou. L’agent que afegeixes rebrà un correu electrònic amb un enllaç de confirmació per activar el seu compte, després del qual podrà accedir a Chatwoot i respondre als missatges. </p><p> L’accés a les funcions de Chatwoot es basa en els següents rols.</p><p> <b>Agent</b> - Els agents amb aquesta funció només poden accedir a les bústies d’entrada, als informes i a les converses. Poden assignar converses a altres agents o a ells mateixos i resoldre converses.</p><p> <b>Administrador</b> - L'administrador tindrà accés a totes les funcions de Chatwoot habilitades per al teu compte, inclosa la configuració, juntament amb tots els privilegis dels agents normals.</p>",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrador/a",
       "AGENT": "Agent"
@@ -31,7 +31,7 @@
         "AGENT_TYPE": {
           "LABEL": "Tipus d'Agent",
           "PLACEHOLDER": "Selecciona un tipus",
-          "ERROR": "El rol és necessari"
+          "ERROR": "El tipus d'Agent és necessari"
         },
         "EMAIL": {
           "LABEL": "Adreça de correu electrònic",
@@ -76,8 +76,8 @@
         },
         "AGENT_AVAILABILITY": {
           "LABEL": "Disponibilitat",
-          "PLACEHOLDER": "Seleccioneu un estat de disponibilitat",
-          "ERROR": "Es requereix disponibilitat"
+          "PLACEHOLDER": "Please select an availability status",
+          "ERROR": "Availability is required"
         },
         "SUBMIT": "Editar l'agent"
       },
@@ -111,7 +111,7 @@
         "PLACEHOLDER": {
           "AGENT": "Cerca agents",
           "TEAM": "Cerca equips",
-          "INPUT": "Cerca agents"
+          "INPUT": "Search for agents"
         }
       }
     }

app/javascript/dashboard/i18n/locale/ca/auditLogs.json

@@ -11,7 +11,7 @@
       "DESC": "Audit Logs are trails for events and actions in a Chatwoot System.",
       "TABLE_HEADER": [
         "User",
-        "Temps",
+        "Action",
         "Adreça IP"
       ]
     },

app/javascript/dashboard/i18n/locale/ca/bulkActions.json

@@ -17,7 +17,7 @@
     "AGENT_LIST_LOADING": "Loading agents",
     "UPDATE": {
       "CHANGE_STATUS": "Change status",
-      "SNOOZE_UNTIL": "Snooze",
+      "SNOOZE_UNTIL_NEXT_REPLY": "Snooze until next reply.",
       "UPDATE_SUCCESFUL": "Conversation status updated successfully.",
       "UPDATE_FAILED": "Failed to update conversations. Please try again."
     },

app/javascript/dashboard/i18n/locale/ca/campaign.json

@@ -98,7 +98,7 @@
         "CREATED_AT": "Created at"
       },
       "BUTTONS": {
-        "ADD": "Afegir",
+        "ADD": "Add",
         "EDIT": "Edita",
         "DELETE": "Esborrar"
       },