Merge branch 'release/2.11.0'

2022-11-16 00:45:34 +00:00 · 2022-11-16 00:45:34 +00:00 · 8a0d6f6f50
commit 8a0d6f6f50
parent ce9c8645df f0ef497005
740 changed files with 17226 additions and 2665 deletions
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@ -54,3 +54,5 @@ exclude_patterns:
  - 'app/javascript/widget/i18n/index.js'
  - 'app/javascript/survey/i18n/index.js'
  - 'app/javascript/shared/constants/locales.js'
+  - 'app/javascript/dashboard/helper/specs/macrosFixtures.js'
+  - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js'
--- a/.env.example
+++ b/.env.example
@ -34,6 +34,11 @@ REDIS_SENTINELS=
 # You can find list of master using "SENTINEL masters" command
 REDIS_SENTINEL_MASTER_NAME=

+# By default Chatwoot will pass REDIS_PASSWORD as the password value for sentinels
+# Use the following environment variable to customize passwords for sentinels. 
+# Use empty string if sentinels are configured with out passwords
+# REDIS_SENTINEL_PASSWORD=
+
 # Redis premium breakage in heroku fix
 # enable the following configuration
 # ref: https://github.com/chatwoot/chatwoot/issues/2420
@ -51,7 +56,7 @@ RAILS_MAX_THREADS=5

 # The email from which all outgoing emails are sent
 # could user either  `email@yourdomain.com` or `BrandName <email@yourdomain.com>`
-MAILER_SENDER_EMAIL="Chatwoot <accounts@chatwoot.com>"
+MAILER_SENDER_EMAIL=Chatwoot <accounts@chatwoot.com>

 #SMTP domain key is set up for HELO checking
 SMTP_DOMAIN=chatwoot.com
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -6,6 +6,7 @@ labels: 'Bug'
 assignees: ''

 ---
+
 **Describe the bug**

 A clear and concise description of what the bug is.
@ -16,11 +17,11 @@ Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
-4. See error
+4. See the error

 **Expected behavior**

-A clear and concise description of what you expected to happen.
+Share a clear and concise description of what you expected to happen.

 **Screenshots**

@ -28,27 +29,50 @@ If applicable, add screenshots to help explain your problem.

 **Browser logs**

-Share the browser logs to debug the issue further
+Share the browser logs to debug the issue further.

 **Server logs**

-Share the server logs to debug the issue further
+Share the server logs to debug the issue further.

 **Environment**

-Describe whether you are using Chatwoot Cloud (app.chatwoot.com) or a self hosted installation of Chatwoot. If you are using a self hosted installation of Chatwoot describe the type of deployment (Docker/Linux VM installation/Heroku)
+Describe whether you are using Chatwoot Cloud (app.chatwoot.com) or a self-hosted installation of Chatwoot. If you are using a self-hosted installation of Chatwoot, describe the type of deployment (Docker/Linux VM installation/Heroku/Kubernetes/Other).

-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
+- [ ] app.chatwoot.com (Chatwoot Cloud)
+- [ ] Self-hosted
+- - [ ] Linux VM
+- - [ ] Docker
+- - [ ] Kubernetes
+- - [ ] Heroku
+- - [ ] Other (Please specify)
+
+
+**Desktop (please complete the following information)** (If applicable)
+ - OS: [e.g. Linux, Windows, MacOS]
+ - Browser [e.g. chrome, firefox, safari]
 - Version [e.g. 22]

-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
+**Smartphone (please complete the following information)** (If applicable)
+ - Device: [e.g. iPhone6, Pixel7]
 - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
+ - Browser [e.g. stock browser, firefox, safari]
 - Version [e.g. 22]

+**Docker** (If applicable)
+
+Please share the output of the following.
+- `docker version`
+- `docker info`
+- `docker-compose version`
+
+**Cloud Provider** (If applicable)
+- [ ] AWS
+- [ ] GCP
+- [ ] Azure
+- [ ] DigitalOcean
+- [ ] Others
+
 **Additional context**

 Add any other context about the problem here.
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -2,8 +2,7 @@

 ## Description

-Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
-
+Please include a summary of the change and issue(s) fixed. Also, mention relevant motivation, context, and any dependencies that this change requires.
 Fixes # (issue)

 ## Type of change
@ -12,18 +11,18 @@ Please delete options that are not relevant.

 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Breaking change (fix or feature that would cause existing functionality not to work as expected)
 - [ ] This change requires a documentation update

 ## How Has This Been Tested?

-Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.


 ## Checklist:

 - [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
+- [ ] I have performed a self-review of my code
 - [ ] I have commented on my code, particularly in hard-to-understand areas
 - [ ] I have made corresponding changes to the documentation
 - [ ] My changes generate no new warnings
--- a/.gitignore
+++ b/.gitignore
@ -60,3 +60,5 @@ test/cypress/videos/*

 /config/master.key
 /config/*.enc
+
+.vscode/settings.json
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1 @@
+{}
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -427,14 +427,14 @@ GEM
    netrc (0.11.0)
    newrelic_rpm (8.9.0)
    nio4r (2.5.8)
-    nokogiri (1.13.7)
+    nokogiri (1.13.9)
      mini_portile2 (~> 2.8.0)
      racc (~> 1.4)
-    nokogiri (1.13.7-arm64-darwin)
+    nokogiri (1.13.9-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.13.7-x86_64-darwin)
+    nokogiri (1.13.9-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.13.7-x86_64-linux)
+    nokogiri (1.13.9-x86_64-linux)
      racc (~> 1.4)
    oauth (0.5.10)
    orm_adapter (0.5.0)
@ -808,4 +808,4 @@ RUBY VERSION
   ruby 3.0.4p208

 BUNDLED WITH
-   2.3.18
+   2.3.16
--- a/app/builders/messages/instagram/message_builder.rb
+++ b/app/builders/messages/instagram/message_builder.rb
@ -72,6 +72,7 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder

  def build_message
    return if @outgoing_echo && already_sent_from_chatwoot?
+    return if message_content.blank? && all_unsupported_files?

    @message = conversation.messages.create!(message_params)

@ -117,6 +118,13 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
    cw_message.present?
  end

+  def all_unsupported_files?
+    return if attachments.empty?
+
+    attachments_type = attachments.pluck(:type).uniq.first
+    unsupported_file_type?(attachments_type)
+  end
+
  ### Sample response
  # {
  #   "object": "instagram",
--- a/app/builders/messages/message_builder.rb
+++ b/app/builders/messages/message_builder.rb
@ -35,7 +35,13 @@ class Messages::MessageBuilder
        file: uploaded_attachment
      )

-      attachment.file_type = file_type(uploaded_attachment&.content_type) if uploaded_attachment.is_a?(ActionDispatch::Http::UploadedFile)
+      attachment.file_type = if uploaded_attachment.is_a?(String)
+                               file_type_by_signed_id(
+                                 uploaded_attachment
+                               )
+                             else
+                               file_type(uploaded_attachment&.content_type)
+                             end
    end
  end

--- a/app/builders/messages/messenger/message_builder.rb
+++ b/app/builders/messages/messenger/message_builder.rb
@ -2,7 +2,8 @@ class Messages::Messenger::MessageBuilder
  include ::FileTypeHelper

  def process_attachment(attachment)
-    return if attachment['type'].to_sym == :template
+    # This check handles very rare case if there are multiple files to attach with only one usupported file
+    return if unsupported_file_type?(attachment['type'])

    attachment_obj = @message.attachments.new(attachment_params(attachment).except(:remote_file_url))
    attachment_obj.save!
@ -80,4 +81,10 @@ class Messages::Messenger::MessageBuilder
    ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
    {}
  end
+
+  private
+
+  def unsupported_file_type?(attachment_type)
+    [:template, :unsupported_type].include? attachment_type.to_sym
+  end
 end
--- a/app/controllers/api/v1/accounts/articles_controller.rb
+++ b/app/controllers/api/v1/accounts/articles_controller.rb
@ -5,9 +5,10 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
  before_action :set_current_page, only: [:index]

  def index
-    @articles_count = @portal.articles.count
-    @articles = @portal.articles
-    @articles = @articles.search(list_params) if list_params.present?
+    @portal_articles = @portal.articles
+    @all_articles = @portal_articles.search(list_params)
+    @articles_count = @all_articles.count
+    @articles = @all_articles.page(@current_page)
  end

  def create
@ -37,7 +38,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
  end

  def portal
-    @portal ||= Current.account.portals.find_by(slug: params[:portal_id])
+    @portal ||= Current.account.portals.find_by!(slug: params[:portal_id])
  end

  def article_params
--- a/app/controllers/api/v1/accounts/categories_controller.rb
+++ b/app/controllers/api/v1/accounts/categories_controller.rb
@ -5,6 +5,7 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
  before_action :set_current_page, only: [:index]

  def index
+    @current_locale = params[:locale]
    @categories = @portal.categories.search(params)
  end

--- a/app/controllers/api/v1/accounts/macros_controller.rb
+++ b/app/controllers/api/v1/accounts/macros_controller.rb
@ -1,6 +1,6 @@
 class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
-  before_action :check_authorization
  before_action :fetch_macro, only: [:show, :update, :destroy, :execute]
+  before_action :check_authorization, only: [:show, :update, :destroy, :execute]

  def index
    @macros = Macro.with_visibility(current_user, params)
@ -14,6 +14,8 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
    render json: { error: @macro.errors.messages }, status: :unprocessable_entity and return unless @macro.valid?

    @macro.save!
+    process_attachments
+    @macro
  end

  def show
@ -25,10 +27,21 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
    head :ok
  end

+  def attach_file
+    file_blob = ActiveStorage::Blob.create_and_upload!(
+      key: nil,
+      io: params[:attachment].tempfile,
+      filename: params[:attachment].original_filename,
+      content_type: params[:attachment].content_type
+    )
+    render json: { blob_key: file_blob.key, blob_id: file_blob.id }
+  end
+
  def update
    ActiveRecord::Base.transaction do
      @macro.update!(macros_with_user)
      @macro.set_visibility(current_user, permitted_params)
+      process_attachments
      @macro.save!
    rescue StandardError => e
      Rails.logger.error e
@ -42,6 +55,19 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
    head :ok
  end

+  private
+
+  def process_attachments
+    actions = @macro.actions.filter_map { |k, _v| k if k['action_name'] == 'send_attachment' }
+    return if actions.blank?
+
+    actions.each do |action|
+      blob_id = action['action_params']
+      blob = ActiveStorage::Blob.find_by(id: blob_id)
+      @macro.files.attach(blob)
+    end
+  end
+
  def permitted_params
    params.permit(
      :name, :account_id, :visibility,
@ -56,4 +82,8 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
  def fetch_macro
    @macro = Current.account.macros.find_by(id: params[:id])
  end
+
+  def check_authorization
+    authorize(@macro) if @macro.present?
+  end
 end
--- a/app/controllers/api/v1/accounts/portals_controller.rb
+++ b/app/controllers/api/v1/accounts/portals_controller.rb
@ -14,7 +14,10 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
    @portal.members << agents
  end

-  def show; end
+  def show
+    @all_articles = @portal.articles
+    @articles = @all_articles.search(locale: params[:locale])
+  end

  def create
    @portal = Current.account.portals.build(portal_params)
--- a/app/controllers/api/v1/widget/base_controller.rb
+++ b/app/controllers/api/v1/widget/base_controller.rb
@ -50,7 +50,9 @@ class Api::V1::Widget::BaseController < ApplicationController
  end

  def contact_name
-    params[:contact][:name] || contact_email.split('@')[0] if contact_email.present?
+    return if @contact.email.present? || @contact.phone_number.present? || @contact.identifier.present?
+
+    permitted_params.dig(:contact, :name) || (contact_email.split('@')[0] if contact_email.present?)
  end

  def contact_phone_number
--- a/app/controllers/api/v1/widget/conversations_controller.rb
+++ b/app/controllers/api/v1/widget/conversations_controller.rb
@ -17,7 +17,8 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
    @contact = ContactIdentifyAction.new(
      contact: @contact,
      params: { email: contact_email, phone_number: contact_phone_number, name: contact_name },
-      retain_original_contact_name: true
+      retain_original_contact_name: true,
+      discard_invalid_attrs: true
    ).perform
  end

--- a/app/controllers/platform/api/v1/accounts_controller.rb
+++ b/app/controllers/platform/api/v1/accounts_controller.rb
@ -1,18 +1,17 @@
 class Platform::Api::V1::AccountsController < PlatformController
  def create
    @resource = Account.new(account_params)
+    update_resource_features
    @resource.save!
    @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
-    render json: @resource
  end

-  def show
-    render json: @resource
-  end
+  def show; end

  def update
-    @resource.update!(account_params)
-    render json: @resource
+    @resource.assign_attributes(account_params)
+    update_resource_features
+    @resource.save!
  end

  def destroy
@ -27,6 +26,18 @@ class Platform::Api::V1::AccountsController < PlatformController
  end

  def account_params
-    params.permit(:name, :locale)
+    permitted_params.except(:features)
+  end
+
+  def update_resource_features
+    return if permitted_params[:features].blank?
+
+    permitted_params[:features].each do |key, value|
+      value.present? ? @resource.enable_features(key) : @resource.disable_features(key)
+    end
+  end
+
+  def permitted_params
+    params.permit(:name, :locale, :domain, :support_email, :status, features: {}, limits: {}, custom_attributes: {})
  end
 end
--- a/app/controllers/public/api/v1/inboxes/contacts_controller.rb
+++ b/app/controllers/public/api/v1/inboxes/contacts_controller.rb
@ -7,7 +7,7 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
    @contact_inbox = ::ContactInboxWithContactBuilder.new(
      source_id: source_id,
      inbox: @inbox_channel.inbox,
-      contact_attributes: permitted_params.except(:identifier, :identifier_hash)
+      contact_attributes: permitted_params.except(:identifier_hash)
    ).perform
  end

--- a/app/controllers/public/api/v1/inboxes_controller.rb
+++ b/app/controllers/public/api/v1/inboxes_controller.rb
@ -3,9 +3,15 @@ class Public::Api::V1::InboxesController < PublicController
  before_action :set_contact_inbox
  before_action :set_conversation

+  def show
+    @inbox_channel = ::Channel::Api.find_by!(identifier: params[:id])
+  end
+
  private

  def set_inbox_channel
+    return if params[:inbox_id].blank?
+
    @inbox_channel = ::Channel::Api.find_by!(identifier: params[:inbox_id])
  end

--- a/app/controllers/public/api/v1/portals/articles_controller.rb
+++ b/app/controllers/public/api/v1/portals/articles_controller.rb
@ -1,7 +1,7 @@
 class Public::Api::V1::Portals::ArticlesController < PublicController
  before_action :ensure_custom_domain_request, only: [:show, :index]
  before_action :portal
-  before_action :set_category
+  before_action :set_category, except: [:index]
  before_action :set_article, only: [:show]
  layout 'portal'

@ -20,7 +20,7 @@ class Public::Api::V1::Portals::ArticlesController < PublicController
  end

  def set_category
-    @category = @portal.categories.find_by!(slug: params[:category_slug])
+    @category = @portal.categories.find_by!(slug: params[:category_slug]) if params[:category_slug].present?
  end

  def portal
--- a/app/helpers/file_type_helper.rb
+++ b/app/helpers/file_type_helper.rb
@ -8,6 +8,12 @@ module FileTypeHelper
    :file
  end

+  # Used in case of DIRECT_UPLOADS_ENABLED=true
+  def file_type_by_signed_id(signed_id)
+    blob = ActiveStorage::Blob.find_signed(signed_id)
+    file_type(blob&.content_type)
+  end
+
  def image_file?(content_type)
    [
      'image/jpeg',
--- a/app/javascript/dashboard/api/helpCenter/categories.js
+++ b/app/javascript/dashboard/api/helpCenter/categories.js
@ -7,8 +7,8 @@ class CategoriesAPI extends PortalsAPI {
    super('categories', { accountScoped: true });
  }

-  get({ portalSlug }) {
-    return axios.get(`${this.url}/${portalSlug}/categories`);
+  get({ portalSlug, locale }) {
+    return axios.get(`${this.url}/${portalSlug}/categories?locale=${locale}`);
  }

  create({ portalSlug, categoryObj }) {
--- a/app/javascript/dashboard/api/helpCenter/portals.js
+++ b/app/javascript/dashboard/api/helpCenter/portals.js
@ -6,6 +6,10 @@ class PortalsAPI extends ApiClient {
    super('portals', { accountScoped: true });
  }

+  getPortal({ portalSlug, locale }) {
+    return axios.get(`${this.url}/${portalSlug}?locale=${locale}`);
+  }
+
  updatePortal({ portalSlug, portalObj }) {
    return axios.patch(`${this.url}/${portalSlug}`, portalObj);
  }
--- a/app/javascript/dashboard/api/inbox/conversation.js
+++ b/app/javascript/dashboard/api/inbox/conversation.js
@ -105,6 +105,16 @@ class ConversationApi extends ApiClient {
      custom_attributes: customAttributes,
    });
  }
+
+  fetchParticipants(conversationId) {
+    return axios.get(`${this.url}/${conversationId}/participants`);
+  }
+
+  updateParticipants({ conversationId, userIds }) {
+    return axios.patch(`${this.url}/${conversationId}/participants`, {
+      user_ids: userIds,
+    });
+  }
 }

 export default new ConversationApi();
--- a/app/javascript/dashboard/components/index.js
+++ b/app/javascript/dashboard/components/index.js
@ -5,9 +5,12 @@ import Button from './ui/WootButton';
 import Code from './Code';
 import ColorPicker from './widgets/ColorPicker';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
+import ConfirmModal from './widgets/modal/ConfirmationModal.vue';
+import ContextMenu from './ui/ContextMenu.vue';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
 import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
 import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import FeatureToggle from './widgets/FeatureToggle';
 import HorizontalBar from './widgets/chart/HorizontalBarChart';
 import Input from './widgets/forms/Input.vue';
 import Label from './ui/Label';
@ -21,8 +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 ConfirmModal from './widgets/modal/ConfirmationModal.vue';
-import ContextMenu from './ui/ContextMenu.vue';

 const WootUIKit = {
  AvatarUploader,
@ -31,9 +32,12 @@ const WootUIKit = {
  Code,
  ColorPicker,
  ConfirmDeleteModal,
+  ConfirmModal,
+  ContextMenu,
  DeleteModal,
  DropdownItem,
  DropdownMenu,
+  FeatureToggle,
  HorizontalBar,
  Input,
  Label,
@ -47,8 +51,6 @@ const WootUIKit = {
  Tabs,
  TabsItem,
  Thumbnail,
-  ConfirmModal,
-  ContextMenu,
  install(Vue) {
    const keys = Object.keys(this);
    keys.pop(); // remove 'install' from keys
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@ -26,7 +26,7 @@
          :class="{ 'text-truncate': shouldTruncate }"
        >
          {{ label }}
-          <span v-if="isHelpCenterSidebar && childItemCount" class="count-view">
+          <span v-if="showChildCount" class="count-view">
            {{ childItemCount }}
          </span>
        </span>
@ -76,7 +76,7 @@ export default {
      type: String,
      default: '',
    },
-    isHelpCenterSidebar: {
+    showChildCount: {
      type: Boolean,
      default: false,
    },
@ -127,11 +127,16 @@ $label-badge-size: var(--space-slab);
    color: var(--w-500);
    border-color: var(--w-25);
  }
+  &.is-active .count-view {
+    background: var(--w-75);
+    color: var(--w-500);
+  }
 }

 .menu-label {
  flex-grow: 1;
-  line-height: var(--space-two);
+  display: inline-flex;
+  align-items: center;
 }

 .inbox-icon {
@ -175,10 +180,6 @@ $label-badge-size: var(--space-slab);
  font-weight: var(--font-weight-bold);
  margin-left: var(--space-smaller);
  padding: var(--space-zero) var(--space-smaller);
-
-  &.is-active {
-    background: var(--w-50);
-    color: var(--w-500);
-  }
+  line-height: var(--font-size-small);
 }
 </style>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@ -4,16 +4,15 @@
      <span class="secondary-menu--header fs-small">
        {{ $t(`SIDEBAR.${menuItem.label}`) }}
      </span>
-      <div v-if="isHelpCenterSidebar" class="submenu-icons">
+      <div v-if="menuItem.showNewButton" class="submenu-icons">
        <woot-button
          size="tiny"
          variant="clear"
          color-scheme="secondary"
+          icon="add"
          class="submenu-icon"
          @click="onClickOpen"
-        >
-          <fluent-icon icon="add" size="16" />
-        </woot-button>
+        />
      </div>
    </div>
    <router-link
@ -28,11 +27,7 @@
        size="14"
      />
      {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      <span
-        v-if="isHelpCenterSidebar"
-        class="count-view"
-        :class="computedClass"
-      >
+      <span v-if="showChildCount(menuItem.count)" class="count-view">
        {{ `${menuItem.count}` }}
      </span>
      <span
@ -55,7 +50,7 @@
        :should-truncate="child.truncateLabel"
        :icon="computedInboxClass(child)"
        :warning-icon="computedInboxErrorClass(child)"
-        :is-help-center-sidebar="isHelpCenterSidebar"
+        :show-child-count="showChildCount(child.count)"
        :child-item-count="child.count"
      />
      <router-link
@ -64,10 +59,10 @@
        :to="menuItem.toState"
        custom
      >
-        <li>
+        <li class="menu-item--new">
          <a
            :href="href"
-            class="button small clear menu-item--new secondary"
+            class="button small link clear secondary"
            :class="{ 'is-active': isActive }"
            @click="e => newLinkClick(e, navigate)"
          >
@ -78,9 +73,6 @@
          </a>
        </li>
      </router-link>
-      <p v-if="isHelpCenterSidebar && isCategoryEmpty" class="empty-text">
-        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
-      </p>
    </ul>
  </li>
 </template>
@ -104,14 +96,6 @@ export default {
      type: Object,
      default: () => ({}),
    },
-    isHelpCenterSidebar: {
-      type: Boolean,
-      default: false,
-    },
-    isCategoryEmpty: {
-      type: Boolean,
-      default: false,
-    },
  },
  computed: {
    ...mapGetters({
@ -161,8 +145,8 @@ export default {
        this.menuItem.toStateName === 'settings_applications'
      );
    },
-    isArticlesView() {
-      return this.$store.state.route.name === this.menuItem.toStateName;
+    isCurrentRoute() {
+      return this.$store.state.route.name.includes(this.menuItem.toStateName);
    },

    computedClass() {
@ -181,12 +165,11 @@ export default {
        }
        return ' ';
      }
-      if (this.isHelpCenterSidebar) {
-        if (this.isArticlesView) {
+
+      if (this.isCurrentRoute) {
        return 'is-active';
      }
-        return ' ';
-      }
+
      return '';
    },
  },
@ -222,6 +205,9 @@ export default {
    onClickOpen() {
      this.$emit('open');
    },
+    showChildCount(count) {
+      return Number.isInteger(count);
+    },
  },
 };
 </script>
@ -277,6 +263,11 @@ export default {
    color: var(--w-500);
    border-color: var(--w-25);
  }
+
+  &.is-active .count-view {
+    background: var(--w-75);
+    color: var(--w-600);
+  }
 }

 .secondary-menu--icon {
@ -306,15 +297,12 @@ export default {
  top: -1px;
 }

-.sidebar-item .button.menu-item--new {
-  display: inline-flex;
-  height: var(--space-medium);
-  margin: var(--space-smaller) 0;
-  padding: var(--space-smaller);
-  color: var(--s-500);
+.sidebar-item .menu-item--new {
+  padding: var(--space-small) 0;

-  &:hover {
-    color: var(--w-500);
+  .button {
+    display: inline-flex;
+    color: var(--s-500);
  }
 }

@ -340,11 +328,6 @@ export default {
  font-weight: var(--font-weight-bold);
  margin-left: var(--space-smaller);
  padding: var(--space-zero) var(--space-smaller);
-
-  &.is-active {
-    background: var(--w-50);
-    color: var(--w-500);
-  }
 }

 .submenu-icons {
@ -356,10 +339,4 @@ export default {
    margin-left: var(--space-small);
  }
 }
-
-.empty-text {
-  color: var(--s-500);
-  font-size: var(--font-size-small);
-  margin: var(--space-smaller);
-}
 </style>
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@ -5,13 +5,11 @@
 </template>

 <script>
-const ZERO = 0;
 const MINUTE_IN_MILLI_SECONDS = 60000;
 const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
 const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;

 import timeMixin from 'dashboard/mixins/time';
-import { differenceInMilliseconds } from 'date-fns';

 export default {
  name: 'TimeAgo',
@ -28,51 +26,40 @@ export default {
  },
  data() {
    return {
-      timeAgo: '',
+      timeAgo: this.dynamicTime(this.timestamp),
      timer: null,
    };
  },
-  computed: {
+  watch: {
+    timestamp() {
+      this.timeAgo = this.dynamicTime(this.timestamp);
+    },
+  },
+  mounted() {
+    if (this.isAutoRefreshEnabled) {
+      this.createTimer();
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
+  methods: {
+    createTimer() {
+      this.timer = setTimeout(() => {
+        this.timeAgo = this.dynamicTime(this.timestamp);
+        this.createTimer();
+      }, this.refreshTime());
+    },
    refreshTime() {
-      const timeDiff = differenceInMilliseconds(
-        new Date(),
-        new Date(this.timestamp * 1000)
-      );
+      const timeDiff = Date.now() - this.timestamp * 1000;
      if (timeDiff > DAY_IN_MILLI_SECONDS) {
        return DAY_IN_MILLI_SECONDS;
      }
      if (timeDiff > HOUR_IN_MILLI_SECONDS) {
        return HOUR_IN_MILLI_SECONDS;
      }
-      if (timeDiff > MINUTE_IN_MILLI_SECONDS) {
+
      return MINUTE_IN_MILLI_SECONDS;
-      }
-      return ZERO;
-    },
-  },
-  mounted() {
-    this.timeAgo = this.dynamicTime(this.timestamp);
-    if (this.isAutoRefreshEnabled) {
-      this.createTimer();
-    }
-  },
-  beforeDestroy() {
-    this.clearTimer();
-  },
-  methods: {
-    createTimer() {
-      const refreshTime = this.refreshTime;
-      if (refreshTime > ZERO) {
-        this.timer = setTimeout(() => {
-          this.timeAgo = this.dynamicTime(this.timestamp);
-          this.createTimer();
-        }, refreshTime);
-      }
-    },
-    clearTimer() {
-      if (this.timer) {
-        clearTimeout(this.timer);
-      }
    },
  },
 };
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@ -1,8 +1,5 @@
 <template>
-  <div
-    class="filter"
-    :class="{ error: v.action_params.$dirty && v.action_params.$error }"
-  >
+  <div class="filter" :class="actionInputStyles">
    <div class="filter-inputs">
      <select
        v-model="action_name"
@ -21,14 +18,32 @@
      <div v-if="showActionInput" class="filter__answer--wrap">
        <div v-if="inputType">
          <div
-            v-if="inputType === 'multi_select'"
+            v-if="inputType === 'search_select'"
            class="multiselect-wrap--small"
          >
            <multiselect
              v-model="action_params"
              track-by="id"
              label="name"
-              :placeholder="'Select'"
+              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :max-height="160"
+              :options="dropdownValues"
+              :allow-empty="false"
+              :option-height="104"
+            />
+          </div>
+          <div
+            v-else-if="inputType === 'multi_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="action_params"
+              track-by="id"
+              label="name"
+              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
              :multiple="true"
              selected-label
              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
@ -36,6 +51,7 @@
              :max-height="160"
              :options="dropdownValues"
              :allow-empty="false"
+              :option-height="104"
            />
          </div>
          <input
@ -60,6 +76,7 @@
        </div>
      </div>
      <woot-button
+        v-if="!isMacro"
        icon="dismiss"
        variant="clear"
        color-scheme="secondary"
@ -120,6 +137,10 @@ export default {
      type: String,
      default: '',
    },
+    isMacro: {
+      type: Boolean,
+      default: false,
+    },
  },
  computed: {
    action_name: {
@ -146,6 +167,12 @@ export default {
      return this.actionTypes.find(action => action.key === this.action_name)
        .inputType;
    },
+    actionInputStyles() {
+      return {
+        'has-error': this.v.action_params.$dirty && this.v.action_params.$error,
+        'is-a-macro': this.isMacro,
+      };
+    },
  },
  methods: {
    removeAction() {
@ -165,9 +192,21 @@ export default {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-medium);
  margin-bottom: var(--space-small);
+
+  &.is-a-macro {
+    margin-bottom: 0;
+    background: var(--white);
+    padding: var(--space-zero);
+    border: unset;
+    border-radius: unset;
+  }
 }

-.filter.error {
+.no-margin-bottom {
+  margin-bottom: 0;
+}
+
+.filter.has-error {
  background: var(--r-50);
 }

@ -240,6 +279,6 @@ export default {
  margin-bottom: var(--space-zero);
 }
 .action-message {
-  margin: var(--space-small) 0 0;
+  margin: var(--space-small) var(--space-zero) var(--space-zero);
 }
 </style>
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@ -113,5 +113,6 @@ input[type='file'] {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
+  margin-bottom: 0;
 }
 </style>
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@ -1,10 +1,6 @@
 <template>
-  <div
-    class="avatar-container"
-    :style="[style, customStyle]"
-    aria-hidden="true"
-  >
-    <span>{{ userInitial }}</span>
+  <div class="avatar-container" :style="style" aria-hidden="true">
+    {{ userInitial }}
  </div>
 </template>

@ -16,69 +12,26 @@ export default {
      type: String,
      default: '',
    },
-    backgroundColor: {
-      type: String,
-      default: '#c2e1ff',
-    },
-    color: {
-      type: String,
-      default: '#1976cc',
-    },
-    customStyle: {
-      type: Object,
-      default: undefined,
-    },
    size: {
      type: Number,
      default: 40,
    },
-    src: {
-      type: String,
-      default: '',
-    },
-    rounded: {
-      type: Boolean,
-      default: true,
-    },
-    variant: {
-      type: String,
-      default: 'circle',
-    },
  },
  computed: {
    style() {
-      let style = {
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-        borderRadius:
-          this.variant === 'square' ? 'var(--border-radius-large)' : '50%',
-        lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
+      return {
        fontSize: `${Math.floor(this.size / 2.5)}px`,
      };
-
-      if (this.backgroundColor) {
-        style = { ...style, backgroundColor: this.backgroundColor };
-      }
-      if (this.color) {
-        style = { ...style, color: this.color };
-      }
-      return style;
    },
    userInitial() {
-      return this.initials || this.initial(this.username);
-    },
-  },
-  methods: {
-    initial(username) {
-      const parts = username ? username.split(/[ -]/) : [];
-      let initials = '';
-      for (let i = 0; i < parts.length; i += 1) {
-        initials += parts[i].charAt(0);
-      }
+      const parts = this.username.split(/[ -]/);
+      let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');
+
      if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
        initials = initials.replace(/[a-z]+/g, '');
      }
      initials = initials.substring(0, 2).toUpperCase();
+
      return initials;
    },
  },
@ -88,11 +41,13 @@ export default {
 <style lang="scss" scoped>
 .avatar-container {
  display: flex;
+  line-height: 100%;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
  color: var(--w-600);
+  cursor: default;
 }
 </style>
--- a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
+++ b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
@ -5,6 +5,11 @@
      :key="index"
      class="dashboard-app--list"
    >
+      <loading-state
+        v-if="iframeLoading"
+        :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
+        class="dashboard-app_loading-container"
+      />
      <iframe
        v-if="configItem.type === 'frame' && configItem.url"
        :id="`dashboard-app--frame-${index}`"
@ -16,7 +21,11 @@
 </template>

 <script>
+import LoadingState from 'dashboard/components/widgets/LoadingState';
 export default {
+  components: {
+    LoadingState,
+  },
  props: {
    config: {
      type: Array,
@ -27,6 +36,11 @@ export default {
      default: () => ({}),
    },
  },
+  data() {
+    return {
+      iframeLoading: true,
+    };
+  },
  computed: {
    dashboardAppContext() {
      return {
@ -57,6 +71,7 @@ export default {
      );
      const eventData = { event: 'appContext', data: this.dashboardAppContext };
      frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
+      this.iframeLoading = false;
    },
  },
 };
@ -73,4 +88,11 @@ export default {
 .dashboard-app--list iframe {
  border: 0;
 }
+.dashboard-app_loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
 </style>
--- a/app/javascript/dashboard/components/widgets/FeatureToggle.vue
+++ b/app/javascript/dashboard/components/widgets/FeatureToggle.vue
@ -0,0 +1,25 @@
+<template>
+  <div v-if="isFeatureEnabled">
+    <slot />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    featureKey: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      accountId: 'getCurrentAccountId',
+    }),
+    isFeatureEnabled() {
+      return this.isFeatureEnabledonAccount(this.accountId, this.featureKey);
+    },
+  },
+};
+</script>
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@ -32,6 +32,7 @@
            v-for="attribute in filterAttributes"
            :key="attribute.key"
            :value="attribute.key"
+            :disabled="attribute.disabled"
          >
            {{ attribute.name }}
          </option>
@ -173,6 +174,10 @@ export default {
      type: Array,
      default: () => [],
    },
+    customAttributeType: {
+      type: String,
+      default: '',
+    },
  },
  computed: {
    attributeKey: {
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@ -83,75 +83,71 @@ export default {
    },
    pageSize: {
      type: Number,
-      default: 15,
+      default: 25,
    },
    totalCount: {
      type: Number,
      default: 0,
    },
-    onPageChange: {
-      type: Function,
-      default: () => {},
-    },
  },
  computed: {
    isFooterVisible() {
      return this.totalCount && !(this.firstIndex > this.totalCount);
    },
    firstIndex() {
-      const firstIndex = this.pageSize * (this.currentPage - 1) + 1;
-      return firstIndex;
+      return this.pageSize * (this.currentPage - 1) + 1;
    },
    lastIndex() {
-      const index = Math.min(this.totalCount, this.pageSize * this.currentPage);
-      return index;
+      return Math.min(this.totalCount, this.pageSize * this.currentPage);
    },
    searchButtonClass() {
      return this.searchQuery !== '' ? 'show' : '';
    },
    hasLastPage() {
-      const isDisabled =
-        this.currentPage === Math.ceil(this.totalCount / this.pageSize);
-      return isDisabled;
+      return !!Math.ceil(this.totalCount / this.pageSize);
    },
    hasFirstPage() {
-      const isDisabled = this.currentPage === 1;
-      return isDisabled;
+      return this.currentPage === 1;
    },
    hasNextPage() {
-      const isDisabled =
-        this.currentPage === Math.ceil(this.totalCount / this.pageSize);
-      return isDisabled;
+      return this.currentPage === Math.ceil(this.totalCount / this.pageSize);
    },
    hasPrevPage() {
-      const isDisabled = this.currentPage === 1;
-      return isDisabled;
+      return this.currentPage === 1;
    },
  },
  methods: {
    onNextPage() {
-      if (this.hasNextPage) return;
+      if (this.hasNextPage) {
+        return;
+      }
      const newPage = this.currentPage + 1;
      this.onPageChange(newPage);
    },
    onPrevPage() {
-      if (this.hasPrevPage) return;
-
+      if (this.hasPrevPage) {
+        return;
+      }
      const newPage = this.currentPage - 1;
      this.onPageChange(newPage);
    },
    onFirstPage() {
-      if (this.hasFirstPage) return;
-
+      if (this.hasFirstPage) {
+        return;
+      }
      const newPage = 1;
      this.onPageChange(newPage);
    },
    onLastPage() {
-      if (this.hasLastPage) return;
-
+      if (this.hasLastPage) {
+        return;
+      }
      const newPage = Math.ceil(this.totalCount / this.pageSize);
      this.onPageChange(newPage);
    },
+    onPageChange(page) {
+      this.$emit('page-change', page);
+    },
  },
 };
 </script>
--- a/app/javascript/dashboard/components/widgets/Thumbnail.spec.js
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.spec.js
@ -2,49 +2,47 @@ import { mount } from '@vue/test-utils';
 import Avatar from './Avatar.vue';
 import Thumbnail from './Thumbnail.vue';

-describe(`when there are NO errors loading the thumbnail`, () => {
-  it(`should render the agent thumbnail`, () => {
+describe('Thumbnail.vue', () => {
+  it('should render the agent thumbnail if valid image is passed', () => {
    const wrapper = mount(Thumbnail, {
      propsData: {
        src: 'https://some_valid_url.com',
      },
      data() {
        return {
+          hasImageLoaded: true,
          imgError: false,
        };
      },
    });
-    expect(wrapper.find('#image').exists()).toBe(true);
+    expect(wrapper.find('.user-thumbnail').exists()).toBe(true);
    const avatarComponent = wrapper.findComponent(Avatar);
-    expect(avatarComponent.exists()).toBe(false);
-  });
+    expect(avatarComponent.isVisible()).toBe(false);
  });

-describe(`when there ARE errors loading the thumbnail`, () => {
-  it(`should render the agent avatar`, () => {
+  it('should render the avatar component if invalid image is passed', () => {
    const wrapper = mount(Thumbnail, {
      propsData: {
        src: 'https://some_invalid_url.com',
      },
      data() {
        return {
+          hasImageLoaded: true,
          imgError: true,
        };
      },
    });
    expect(wrapper.find('#image').exists()).toBe(false);
    const avatarComponent = wrapper.findComponent(Avatar);
-    expect(avatarComponent.exists()).toBe(true);
-  });
+    expect(avatarComponent.isVisible()).toBe(true);
  });

-describe(`when Avatar shows`, () => {
-  it(`initials shold correspond to username`, () => {
+  it('should the initial of the name if no image is passed', () => {
    const wrapper = mount(Avatar, {
      propsData: {
        username: 'Angie Rojas',
      },
    });
-    expect(wrapper.find('span').text()).toBe('AR');
+    expect(wrapper.find('div').text()).toBe('AR');
  });
 });
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@ -1,74 +1,29 @@
 <template>
-  <div class="user-thumbnail-box" :style="{ height: size, width: size }">
+  <div
+    :class="thumbnailBoxClass"
+    :style="{ height: size, width: size }"
+    :title="title"
+  >
+    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
    <img
-      v-if="!imgError && Boolean(src)"
-      id="image"
+      v-show="shouldShowImage"
      :src="src"
      :class="thumbnailClass"
-      @error="onImgError()"
+      @load="onImgLoad"
+      @error="onImgError"
    />
    <Avatar
-      v-else
+      v-show="!shouldShowImage"
      :username="userNameWithoutEmoji"
      :class="thumbnailClass"
      :size="avatarSize"
-      :variant="variant"
    />
    <img
-      v-if="badge === 'instagram_direct_message'"
-      id="badge"
+      v-if="badgeSrc"
      class="source-badge"
      :style="badgeStyle"
-      src="/integrations/channels/badges/instagram-dm.png"
-    />
-    <img
-      v-else-if="badge === 'facebook'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/messenger.png"
-    />
-    <img
-      v-else-if="badge === 'twitter-tweet'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/twitter-tweet.png"
-    />
-    <img
-      v-else-if="badge === 'twitter-dm'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/twitter-dm.png"
-    />
-    <img
-      v-else-if="badge === 'whatsapp'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/whatsapp.png"
-    />
-    <img
-      v-else-if="badge === 'sms'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/sms.png"
-    />
-    <img
-      v-else-if="badge === 'Channel::Line'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/line.png"
-    />
-    <img
-      v-else-if="badge === 'Channel::Telegram'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/telegram.png"
+      :src="`/integrations/channels/badges/${badgeSrc}.png`"
+      alt="Badge"
    />
    <div
      v-if="showStatusIndicator"
@ -103,7 +58,7 @@ export default {
    },
    badge: {
      type: String,
-      default: 'fb',
+      default: '',
    },
    username: {
      type: String,
@ -121,6 +76,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    title: {
+      type: String,
+      default: '',
+    },
    variant: {
      type: String,
      default: 'circle',
@ -128,6 +87,7 @@ export default {
  },
  data() {
    return {
+      hasImageLoaded: false,
      imgError: false,
    };
  },
@ -142,6 +102,19 @@ export default {
    avatarSize() {
      return Number(this.size.replace(/\D+/g, ''));
    },
+    badgeSrc() {
+      return {
+        instagram_direct_message: 'instagram-dm',
+        facebook: 'messenger',
+        'twitter-tweet': 'twitter-tweet',
+        'twitter-dm': 'twitter-dm',
+        whatsapp: 'whatsapp',
+        sms: 'sms',
+        'Channel::Line': 'line',
+        'Channel::Telegram': 'telegram',
+        'Channel::WebWidget': '',
+      }[this.badge];
+    },
    badgeStyle() {
      const size = Math.floor(this.avatarSize / 3);
      const badgeSize = `${size + 2}px`;
@ -158,20 +131,34 @@ export default {
        this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square';
      return `user-thumbnail ${classname} ${variant}`;
    },
+    thumbnailBoxClass() {
+      const boxClass = this.variant === 'circle' ? 'is-rounded' : '';
+      return `user-thumbnail-box ${boxClass}`;
+    },
+    shouldShowImage() {
+      if (!this.src) {
+        return false;
+      }
+      if (this.hasImageLoaded) {
+        return !this.imgError;
+      }
+      return false;
+    },
  },
  watch: {
-    src: {
-      handler(value, oldValue) {
+    src(value, oldValue) {
      if (value !== oldValue && this.imgError) {
        this.imgError = false;
      }
    },
  },
-  },
  methods: {
    onImgError() {
      this.imgError = true;
    },
+    onImgLoad() {
+      this.hasImageLoaded = true;
+    },
  },
 };
 </script>
@ -182,6 +169,10 @@ export default {
  max-width: 100%;
  position: relative;

+  &.is-rounded {
+    border-radius: 50%;
+  }
+
  .user-thumbnail {
    border-radius: 50%;
    &.thumbnail-square {
@ -191,6 +182,7 @@ export default {
    width: 100%;
    box-sizing: border-box;
    object-fit: cover;
+    vertical-align: initial;

    &.border {
      border: 1px solid white;
@ -229,9 +221,5 @@ export default {
  .user-online-status--offline {
    background: var(--s-500);
  }
-
-  .user-online-status--offline {
-    background: var(--s-500);
-  }
 }
 </style>
--- a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
+++ b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
@ -0,0 +1,89 @@
+<template>
+  <div class="overlapping-thumbnails">
+    <thumbnail
+      v-for="user in usersList"
+      :key="user.id"
+      v-tooltip="user.name"
+      :title="user.name"
+      :src="user.thumbnail"
+      :username="user.name"
+      :has-border="true"
+      :size="size"
+      :class="`overlapping-thumbnail gap-${gap}`"
+    />
+    <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
+      {{ moreThumbnailsText }}
+    </span>
+  </div>
+</template>
+<script>
+import Thumbnail from './Thumbnail';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    usersList: {
+      type: Array,
+      default: () => [],
+    },
+    size: {
+      type: String,
+      default: '24px',
+    },
+    showMoreThumbnailsCount: {
+      type: Boolean,
+      default: false,
+    },
+    moreThumbnailsText: {
+      type: String,
+      default: '',
+    },
+    gap: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        // The value must match one of these strings
+        return ['normal', '', 'tight'].includes(value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.overlapping-thumbnails {
+  display: flex;
+}
+
+.overlapping-thumbnail {
+  position: relative;
+  box-shadow: var(--shadow-small);
+
+  &:not(:first-child) {
+    margin-left: var(--space-minus-smaller);
+  }
+
+  .gap-tight {
+    margin-left: var(--space-minus-small);
+  }
+}
+
+.thumbnail-more-text {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+
+  margin-left: var(--space-minus-small);
+  padding: 0 var(--space-small);
+  box-shadow: var(--shadow-small);
+  background: var(--color-background);
+  border-radius: var(--space-giga);
+  border: 1px solid var(--white);
+
+  color: var(--s-600);
+  font-size: var(--font-size-mini);
+  font-weight: var(--font-weight-medium);
+}
+</style>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@ -42,7 +42,7 @@
    </div>
    <dashboard-app-frame
      v-else
-      :key="currentChat.id"
+      :key="currentChat.id + '-' + activeIndex"
      :config="dashboardApps[activeIndex - 1].content"
      :current-chat="currentChat"
    />
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@ -40,6 +40,12 @@
              :url="attachment.data_url"
              :readable-time="readableTime"
            />
+            <bubble-location
+              v-else-if="attachment.file_type === 'location'"
+              :latitude="attachment.coordinates_lat"
+              :longitude="attachment.coordinates_long"
+              :name="attachment.fallback_title"
+            />
            <bubble-file
              v-else
              :url="attachment.data_url"
@ -119,6 +125,7 @@ import BubbleImage from './bubble/Image';
 import BubbleFile from './bubble/File';
 import BubbleVideo from './bubble/Video.vue';
 import BubbleActions from './bubble/Actions';
+import BubbleLocation from './bubble/Location';

 import Spinner from 'shared/components/Spinner';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu';
@ -136,6 +143,7 @@ export default {
    BubbleFile,
    BubbleVideo,
    BubbleMailHead,
+    BubbleLocation,
    ContextMenu,
    Spinner,
  },
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@ -139,7 +139,6 @@ export default {
      listLoadingStatus: 'getAllMessagesLoaded',
      getUnreadCount: 'getUnreadCount',
      loadingChatList: 'getChatListLoadingStatus',
-      conversationLastSeen: 'getConversationLastSeen',
    }),
    inboxId() {
      return this.currentChat.inbox_id;
@ -234,7 +233,6 @@ export default {
      return 'arrow-chevron-left';
    },
    getLastSeenAt() {
-      if (this.conversationLastSeen) return this.conversationLastSeen;
      const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
      return contactLastSeenAt;
    },
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
@ -0,0 +1,78 @@
+<template>
+  <div class="location message-text__wrap">
+    <div class="icon-wrap">
+      <fluent-icon icon="location" class="file--icon" size="32" />
+    </div>
+    <div class="meta">
+      <h5 class="text-block-title text-truncate">
+        {{ name }}
+      </h5>
+      <div class="link-wrap">
+        <a
+          class="download clear link button small"
+          rel="noreferrer noopener nofollow"
+          target="_blank"
+          :href="mapUrl"
+        >
+          {{ $t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP') }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    latitude: {
+      type: Number,
+      default: undefined,
+    },
+    longitude: {
+      type: Number,
+      default: undefined,
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    mapUrl() {
+      return `https://maps.google.com/?q=${this.latitude},${this.longitude}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.location {
+  display: flex;
+  flex-direction: row;
+  padding: var(--space-smaller) 0;
+  cursor: pointer;
+
+  .icon-wrap {
+    color: var(--s-600);
+    line-height: 1;
+    margin: 0 var(--space-smaller);
+  }
+
+  .text-block-title {
+    margin: 0;
+    color: var(--s-800);
+    word-break: break-word;
+  }
+
+  .meta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-right: var(--space-normal);
+  }
+
+  .link-wrap {
+    display: flex;
+  }
+}
+</style>
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@ -17,7 +17,10 @@
        @click="snoozeConversation(option.snoozedUntil)"
      />
    </menu-item-with-submenu>
-    <menu-item-with-submenu :option="labelMenuConfig">
+    <menu-item-with-submenu
+      :option="labelMenuConfig"
+      :sub-menu-available="!!labels.length"
+    >
      <template>
        <menu-item
          v-for="label in labels"
@ -28,7 +31,10 @@
        />
      </template>
    </menu-item-with-submenu>
-    <menu-item-with-submenu :option="agentMenuConfig">
+    <menu-item-with-submenu
+      :option="agentMenuConfig"
+      :sub-menu-available="!!assignableAgents.length"
+    >
      <agent-loading-placeholder v-if="assignableAgentsUiFlags.isFetching" />
      <template v-else>
        <menu-item
@ -40,7 +46,10 @@
        />
      </template>
    </menu-item-with-submenu>
-    <menu-item-with-submenu :option="teamMenuConfig">
+    <menu-item-with-submenu
+      :option="teamMenuConfig"
+      :sub-menu-available="!!teams.length"
+    >
      <menu-item
        v-for="team in teams"
        :key="team.id"
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@ -18,7 +18,7 @@
      size="20px"
      class="agent-thumbnail"
    />
-    <p class="menu-label truncate-text">{{ option.label }}</p>
+    <p class="menu-label text-truncate">{{ option.label }}</p>
  </div>
 </template>

@ -50,7 +50,6 @@ export default {
  padding: var(--space-smaller);
  border-radius: var(--border-radius-small);
  overflow: hidden;
-
  .menu-label {
    margin: 0;
    font-size: var(--font-size-mini);
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@ -1,11 +1,14 @@
 <template>
-  <div class="menu-with-submenu flex-between">
+  <div
+    class="menu-with-submenu flex-between"
+    :class="{ disabled: !subMenuAvailable }"
+  >
    <div class="menu-left">
      <fluent-icon :icon="option.icon" size="14" class="menu-icon" />
      <p class="menu-label">{{ option.label }}</p>
    </div>
    <fluent-icon icon="chevron-right" size="12" />
-    <div class="submenu">
+    <div v-if="subMenuAvailable" class="submenu">
      <slot />
    </div>
  </div>
@ -18,6 +21,10 @@ export default {
      type: Object,
      default: () => {},
    },
+    subMenuAvailable: {
+      type: Boolean,
+      default: true,
+    },
  },
 };
 </script>
@ -55,6 +62,11 @@ export default {
    left: 100%;
    top: 0;
    display: none;
+    min-height: min-content;
+    max-height: var(--space-giga);
+    overflow-y: auto;
+    // Need this because Firefox adds a horizontal scrollbar, if a text is truncated inside.
+    overflow-x: hidden;
  }

  &:hover {
@ -73,5 +85,10 @@ export default {
      clip-path: polygon(100% 0, 0% 0%, 100% 100%);
    }
  }
+
+  &.disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
 }
 </style>
--- a/app/javascript/dashboard/components/widgets/conversation/stories/LocationBubble.stories.js
+++ b/app/javascript/dashboard/components/widgets/conversation/stories/LocationBubble.stories.js
@ -0,0 +1,34 @@
+import LocationBubble from '../bubble/Location.vue';
+
+export default {
+  title: 'Components/Help Center',
+  component: LocationBubble,
+  argTypes: {
+    latitude: {
+      defaultValue: 1,
+      control: {
+        type: 'number',
+      },
+    },
+    longitude: {
+      defaultValue: 1,
+      control: {
+        type: 'number',
+      },
+    },
+    name: {
+      defaultValue: '420, Dope street',
+      control: {
+        type: 'string',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { LocationBubble },
+  template: '<location-bubble v-bind="$props" />',
+});
+
+export const LocationBubbleView = Template.bind({});
--- a/app/javascript/dashboard/components/widgets/stories/ThumbnailGroup.stories.js
+++ b/app/javascript/dashboard/components/widgets/stories/ThumbnailGroup.stories.js
@ -0,0 +1,69 @@
+import ThumbnailGroup from '../ThumbnailGroup.vue';
+
+export default {
+  title: 'Components/ThumbnailGroup',
+  component: ThumbnailGroup,
+  argTypes: {
+    usersList: {
+      defaultValue: [
+        {
+          name: 'John',
+          id: 1,
+          thumbnail: '',
+        },
+        {
+          name: 'John',
+          id: 2,
+          thumbnail: '',
+        },
+        {
+          name: 'John',
+          id: 3,
+          thumbnail: '',
+        },
+        {
+          name: 'John',
+          id: 4,
+          thumbnail: '',
+        },
+        {
+          name: 'John',
+          id: 5,
+          thumbnail: '',
+        },
+        {
+          name: 'John',
+          id: 6,
+          thumbnail: '',
+        },
+      ],
+      control: {
+        type: 'object',
+      },
+    },
+    size: {
+      control: {
+        type: 'text',
+      },
+    },
+    moreThumbnailsText: {
+      control: {
+        type: 'text',
+        default: '2 more',
+      },
+    },
+    showMoreThumbnailsCount: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ThumbnailGroup },
+  template: '<ThumbnailGroup v-bind="$props"/>',
+});
+
+export const Primary = Template.bind({});
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/app/javascript/dashboard/helper/actionCable.js
@ -25,6 +25,7 @@ class ActionCableConnector extends BaseActionCableConnector {
      'notification.created': this.onNotificationCreated,
      'first.reply.created': this.onFirstReplyCreated,
      'conversation.read': this.onConversationRead,
+      'conversation.updated': this.onConversationUpdated,
    };
  }

@ -67,8 +68,7 @@ class ActionCableConnector extends BaseActionCableConnector {
  };

  onConversationRead = data => {
-    const { contact_last_seen_at: lastSeen } = data;
-    this.app.$store.dispatch('updateConversationRead', lastSeen);
+    this.app.$store.dispatch('updateConversation', data);
  };

  onLogout = () => AuthAPI.logout();
@ -85,6 +85,11 @@ class ActionCableConnector extends BaseActionCableConnector {
    this.fetchConversationStats();
  };

+  onConversationUpdated = data => {
+    this.app.$store.dispatch('updateConversation', data);
+    this.fetchConversationStats();
+  };
+
  onTypingOn = ({ conversation, user }) => {
    const conversationId = conversation.id;

--- a/app/javascript/dashboard/helper/actionQueryGenerator.js
+++ b/app/javascript/dashboard/helper/actionQueryGenerator.js
@ -22,7 +22,7 @@ const generatePayload = data => {
  let payload = actions.map(item => {
    if (Array.isArray(item.action_params)) {
      item.action_params = formatArray(item.action_params);
-    } else if (typeof item.values === 'object') {
+    } else if (typeof item.action_params === 'object') {
      item.action_params = [item.action_params.id];
    } else if (!item.action_params) {
      item.action_params = [];
--- a/app/javascript/dashboard/helper/automationHelper.js
+++ b/app/javascript/dashboard/helper/automationHelper.js
@ -0,0 +1,242 @@
+import {
+  OPERATOR_TYPES_1,
+  OPERATOR_TYPES_3,
+  OPERATOR_TYPES_4,
+} from 'dashboard/routes/dashboard/settings/automation/operators';
+import filterQueryGenerator from './filterQueryGenerator';
+import actionQueryGenerator from './actionQueryGenerator';
+const MESSAGE_CONDITION_VALUES = [
+  {
+    id: 'incoming',
+    name: 'Incoming Message',
+  },
+  {
+    id: 'outgoing',
+    name: 'Outgoing Message',
+  },
+];
+
+export const getCustomAttributeInputType = key => {
+  const customAttributeMap = {
+    date: 'date',
+    text: 'plain_text',
+    list: 'search_select',
+    checkbox: 'search_select',
+  };
+
+  return customAttributeMap[key] || 'plain_text';
+};
+
+export const isACustomAttribute = (customAttributes, key) => {
+  return customAttributes.find(attr => {
+    return attr.attribute_key === key;
+  });
+};
+
+export const getCustomAttributeListDropdownValues = (
+  customAttributes,
+  type
+) => {
+  return customAttributes
+    .find(attr => attr.attribute_key === type)
+    .attribute_values.map(item => {
+      return {
+        id: item,
+        name: item,
+      };
+    });
+};
+
+export const isCustomAttributeCheckbox = (customAttributes, key) => {
+  return customAttributes.find(attr => {
+    return (
+      attr.attribute_key === key && attr.attribute_display_type === 'checkbox'
+    );
+  });
+};
+
+export const isCustomAttributeList = (customAttributes, type) => {
+  return customAttributes.find(attr => {
+    return (
+      attr.attribute_key === type && attr.attribute_display_type === 'list'
+    );
+  });
+};
+
+export const getOperatorTypes = key => {
+  const operatorMap = {
+    list: OPERATOR_TYPES_1,
+    text: OPERATOR_TYPES_3,
+    number: OPERATOR_TYPES_1,
+    link: OPERATOR_TYPES_1,
+    date: OPERATOR_TYPES_4,
+    checkbox: OPERATOR_TYPES_1,
+  };
+
+  return operatorMap[key] || OPERATOR_TYPES_1;
+};
+
+export const generateCustomAttributeTypes = (customAttributes, type) => {
+  return customAttributes.map(attr => {
+    return {
+      key: attr.attribute_key,
+      name: attr.attribute_display_name,
+      inputType: getCustomAttributeInputType(attr.attribute_display_type),
+      filterOperators: getOperatorTypes(attr.attribute_display_type),
+      customAttributeType: type,
+    };
+  });
+};
+
+export const generateConditionOptions = (options, key = 'id') => {
+  return options.map(i => {
+    return {
+      id: i[key],
+      name: i.title,
+    };
+  });
+};
+
+export const getActionOptions = ({ teams, labels, type }) => {
+  const actionsMap = {
+    assign_team: teams,
+    send_email_to_team: teams,
+    add_label: generateConditionOptions(labels, 'title'),
+  };
+  return actionsMap[type];
+};
+
+export const getConditionOptions = ({
+  agents,
+  booleanFilterOptions,
+  campaigns,
+  contacts,
+  countries,
+  customAttributes,
+  inboxes,
+  languages,
+  statusFilterOptions,
+  teams,
+  type,
+}) => {
+  if (isCustomAttributeCheckbox(customAttributes, type)) {
+    return booleanFilterOptions;
+  }
+
+  if (isCustomAttributeList(customAttributes, type)) {
+    return getCustomAttributeListDropdownValues(customAttributes, type);
+  }
+
+  const conditionFilterMaps = {
+    status: statusFilterOptions,
+    assignee_id: agents,
+    contact: contacts,
+    inbox_id: inboxes,
+    team_id: teams,
+    campaigns: generateConditionOptions(campaigns),
+    browser_language: languages,
+    country_code: countries,
+    message_type: MESSAGE_CONDITION_VALUES,
+  };
+
+  return conditionFilterMaps[type];
+};
+
+export const getFileName = (action, files = []) => {
+  const blobId = action.action_params[0];
+  if (!blobId) return '';
+  if (action.action_name === 'send_attachment') {
+    const file = files.find(item => item.blob_id === blobId);
+    if (file) return file.filename.toString();
+  }
+  return '';
+};
+
+export const getDefaultConditions = eventName => {
+  if (eventName === 'message_created') {
+    return [
+      {
+        attribute_key: 'message_type',
+        filter_operator: 'equal_to',
+        values: '',
+        query_operator: 'and',
+        custom_attribute_type: '',
+      },
+    ];
+  }
+  return [
+    {
+      attribute_key: 'status',
+      filter_operator: 'equal_to',
+      values: '',
+      query_operator: 'and',
+      custom_attribute_type: '',
+    },
+  ];
+};
+
+export const getDefaultActions = () => {
+  return [
+    {
+      action_name: 'assign_team',
+      action_params: [],
+    },
+  ];
+};
+
+export const filterCustomAttributes = customAttributes => {
+  return customAttributes.map(attr => {
+    return {
+      key: attr.attribute_key,
+      name: attr.attribute_display_name,
+      type: attr.attribute_display_type,
+    };
+  });
+};
+
+export const getStandardAttributeInputType = (automationTypes, event, key) => {
+  return automationTypes[event].conditions.find(item => item.key === key)
+    .inputType;
+};
+
+export const generateAutomationPayload = payload => {
+  const automation = JSON.parse(JSON.stringify(payload));
+  automation.conditions[automation.conditions.length - 1].query_operator = null;
+  automation.conditions = filterQueryGenerator(automation.conditions).payload;
+  automation.actions = actionQueryGenerator(automation.actions);
+  return automation;
+};
+
+export const isCustomAttribute = (attrs, key) => {
+  return attrs.find(attr => attr.key === key);
+};
+
+export const generateCustomAttributes = (
+  conversationAttributes = [],
+  contactAttribtues = [],
+  conversationlabel,
+  contactlabel
+) => {
+  const customAttributes = [];
+  if (conversationAttributes.length) {
+    customAttributes.push(
+      {
+        key: `conversation_custom_attribute`,
+        name: conversationlabel,
+        disabled: true,
+      },
+      ...conversationAttributes
+    );
+  }
+  if (contactAttribtues.length) {
+    customAttributes.push(
+      {
+        key: `contact_custom_attribute`,
+        name: contactlabel,
+        disabled: true,
+      },
+      ...contactAttribtues
+    );
+  }
+  return customAttributes;
+};
--- a/app/javascript/dashboard/helper/filterQueryGenerator.js
+++ b/app/javascript/dashboard/helper/filterQueryGenerator.js
@ -1,15 +1,3 @@
-const lowerCaseValues = (operator, values) => {
-  if (operator === 'equal_to' || operator === 'not_equal_to') {
-    values = values.map(val => {
-      if (typeof val === 'string') {
-        return val.toLowerCase();
-      }
-      return val;
-    });
-  }
-  return values;
-};
-
 const generatePayload = data => {
  // Make a copy of data to avoid vue data reactivity issues
  const filters = JSON.parse(JSON.stringify(data));
@ -23,8 +11,6 @@ const generatePayload = data => {
    } else {
      item.values = [item.values];
    }
-    // Convert all values to lowerCase if operator_type is 'equal_to' or 'not_equal_to'
-    item.values = lowerCaseValues(item.filter_operator, item.values);
    return item;
  });
  // For every query added, the query_operator is set default to and so the
--- a/app/javascript/dashboard/helper/specs/filterQueryGenerator.spec.js
+++ b/app/javascript/dashboard/helper/specs/filterQueryGenerator.spec.js
@ -5,7 +5,7 @@ const testData = [
    attribute_key: 'status',
    filter_operator: 'equal_to',
    values: [
-      { id: 'PENDING', name: 'Pending' },
+      { id: 'pending', name: 'Pending' },
      { id: 'resolved', name: 'Resolved' },
    ],
    query_operator: 'and',
@ -18,7 +18,7 @@ const testData = [
      account_id: 1,
      auto_offline: true,
      confirmed: true,
-      email: 'fayazara@gmail.com',
+      email: 'fayaz@test.com',
      available_name: 'Fayaz',
      name: 'Fayaz',
      role: 'agent',
@ -52,7 +52,7 @@ const finalResult = {
    {
      attribute_key: 'id',
      filter_operator: 'equal_to',
-      values: ['this is a test'],
+      values: ['This is a test'],
    },
  ],
 };
--- a/app/javascript/dashboard/helper/specs/macrosFixtures.js
+++ b/app/javascript/dashboard/helper/specs/macrosFixtures.js
@ -0,0 +1,122 @@
+export const teams = [
+  {
+    id: 1,
+    name: '⚙️ sales team',
+    description: 'This is our internal sales team',
+    allow_auto_assign: true,
+    account_id: 1,
+    is_member: true,
+  },
+  {
+    id: 2,
+    name: '🤷‍♂️ fayaz',
+    description: 'Test',
+    allow_auto_assign: true,
+    account_id: 1,
+    is_member: true,
+  },
+  {
+    id: 3,
+    name: '🇮🇳 apac sales',
+    description: 'Sales team for France Territory',
+    allow_auto_assign: true,
+    account_id: 1,
+    is_member: true,
+  },
+];
+
+export const labels = [
+  {
+    id: 6,
+    title: 'sales',
+    description: 'sales team',
+    color: '#8EA20F',
+    show_on_sidebar: true,
+  },
+  {
+    id: 2,
+    title: 'billing',
+    description: 'billing',
+    color: '#4077DA',
+    show_on_sidebar: true,
+  },
+  {
+    id: 1,
+    title: 'snoozed',
+    description: 'Items marked for later',
+    color: '#D12F42',
+    show_on_sidebar: true,
+  },
+  {
+    id: 5,
+    title: 'mobile-app',
+    description: 'tech team',
+    color: '#2DB1CC',
+    show_on_sidebar: true,
+  },
+  {
+    id: 14,
+    title: 'human-resources-department-with-long-title',
+    description: 'Test',
+    color: '#FF6E09',
+    show_on_sidebar: true,
+  },
+  {
+    id: 22,
+    title: 'priority',
+    description: 'For important sales leads',
+    color: '#7E7CED',
+    show_on_sidebar: true,
+  },
+];
+
+export const agents = [
+  {
+    id: 1,
+    account_id: 1,
+    availability_status: 'offline',
+    auto_offline: true,
+    confirmed: true,
+    email: 'john@doe.com',
+    available_name: 'John Doe',
+    name: 'John Doe',
+    role: 'agent',
+    thumbnail:
+      'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--746506837470c1a3dd063e90211ba2386963d52f/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/batman_90804.png',
+  },
+  {
+    id: 9,
+    account_id: 1,
+    availability_status: 'offline',
+    auto_offline: true,
+    confirmed: true,
+    email: 'clark@kent.com',
+    available_name: 'Clark Kent',
+    name: 'Clark Kent',
+    role: 'agent',
+    thumbnail: '',
+  },
+];
+
+export const files = [
+  {
+    id: 76,
+    macro_id: 77,
+    file_type: 'image/jpeg',
+    account_id: 1,
+    file_url:
+      'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBYUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--aa41b5a779a83c1d86b28475a5cf0bd17f41f0ff/fayaz_cropped.jpeg',
+    blob_id: 88,
+    filename: 'fayaz_cropped.jpeg',
+  },
+  {
+    id: 82,
+    macro_id: 77,
+    file_type: 'image/png',
+    account_id: 1,
+    file_url:
+      'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBZdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--260fda80b77409ffaaac10b96681fba447600545/screenshot.png',
+    blob_id: 94,
+    filename: 'screenshot.png',
+  },
+];
--- a/app/javascript/dashboard/helper/specs/macrosHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/macrosHelper.spec.js
@ -0,0 +1,75 @@
+import {
+  emptyMacro,
+  resolveActionName,
+  resolveLabels,
+  resolveTeamIds,
+  getFileName,
+  resolveAgents,
+} from '../../routes/dashboard/settings/macros/macroHelper';
+import { MACRO_ACTION_TYPES } from '../../routes/dashboard/settings/macros/constants';
+import { teams, labels, files, agents } from './macrosFixtures';
+
+describe('#emptyMacro', () => {
+  const defaultMacro = {
+    name: '',
+    actions: [
+      {
+        action_name: 'assign_team',
+        action_params: [],
+      },
+    ],
+    visibility: 'global',
+  };
+  it('returns the default macro', () => {
+    expect(emptyMacro).toEqual(defaultMacro);
+  });
+});
+
+describe('#resolveActionName', () => {
+  it('resolve action name from key and return the correct label', () => {
+    expect(resolveActionName(MACRO_ACTION_TYPES[0].key)).toEqual(
+      MACRO_ACTION_TYPES[0].label
+    );
+    expect(resolveActionName(MACRO_ACTION_TYPES[1].key)).toEqual(
+      MACRO_ACTION_TYPES[1].label
+    );
+    expect(resolveActionName(MACRO_ACTION_TYPES[1].key)).not.toEqual(
+      MACRO_ACTION_TYPES[0].label
+    );
+  });
+});
+
+describe('#resolveTeamIds', () => {
+  it('resolves team names from ids, and returns a joined string', () => {
+    const resolvedTeams = '⚙️ sales team, 🤷‍♂️ fayaz';
+    expect(resolveTeamIds(teams, [1, 2])).toEqual(resolvedTeams);
+  });
+});
+
+describe('#resolveLabels', () => {
+  it('resolves labels names from ids and returns a joined string', () => {
+    const resolvedLabels = 'sales, billing';
+    expect(resolveLabels(labels, ['sales', 'billing'])).toEqual(resolvedLabels);
+  });
+});
+
+describe('#resolveAgents', () => {
+  it('resolves agents names from ids and returns a joined string', () => {
+    const resolvedAgents = 'John Doe';
+    expect(resolveAgents(agents, [1])).toEqual(resolvedAgents);
+  });
+});
+
+describe('#getFileName', () => {
+  it('returns the correct file name from the list of files', () => {
+    expect(getFileName(files[0].blob_id, 'send_attachment', files)).toEqual(
+      files[0].filename
+    );
+    expect(getFileName(files[1].blob_id, 'send_attachment', files)).toEqual(
+      files[1].filename
+    );
+    expect(getFileName(files[0].blob_id, 'wrong_action', files)).toEqual('');
+    expect(getFileName(null, 'send_attachment', files)).toEqual('');
+    expect(getFileName(files[0].blob_id, 'send_attachment', [])).toEqual('');
+  });
+});
--- a/app/javascript/dashboard/i18n/locale/ar/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/ar/agentBots.json
@ -0,0 +1,5 @@
+{
+  "AGENT_BOTS": {
+    "HEADER": "Bots"
+  }
+}
--- a/app/javascript/dashboard/i18n/locale/ar/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ar/automation.json
@ -86,7 +86,9 @@
      "RESET_MESSAGE": "تغيير نوع الحدث سوف يعيد تعيين الشروط والأحداث التي أضفتها أدناه"
    },
    "CONDITION": {
-      "DELETE_MESSAGE": "يجب أن يكون لديك على الأقل شرط واحد للحفظ"
+      "DELETE_MESSAGE": "يجب أن يكون لديك على الأقل شرط واحد للحفظ",
+      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
    },
    "ACTION": {
      "DELETE_MESSAGE": "يجب أن يكون لديك على الأقل شرط واحد للحفظ",
@ -109,7 +111,7 @@
      "UPLOAD_ERROR": "تعذر تحميل المرفق، الرجاء المحاولة مرة أخرى",
      "LABEL_IDLE": "ارفع المرفق",
      "LABEL_UPLOADING": "جاري الرفع...",
-      "LABEL_UPLOADED": "تم الرفع بنجاح",
+      "LABEL_UPLOADED": "Successfully Uploaded",
      "LABEL_UPLOAD_FAILED": "فشل الرفع"
    }
  }
--- a/app/javascript/dashboard/i18n/locale/ar/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ar/bulkActions.json
@ -2,9 +2,11 @@
  "BULK_ACTION": {
    "CONVERSATIONS_SELECTED": "%{conversationCount} المحادثات المحددة",
    "AGENT_SELECT_LABEL": "اختر وكيل",
-    "ASSIGN_CONFIRMATION_LABEL": "هل أنت متأكد من أنك تريد تعيين %{conversationCount} %{conversationLabel} إلى",
+    "ASSIGN_CONFIRMATION_LABEL": "Are you sure to assign %{conversationCount} %{conversationLabel} to",
+    "UNASSIGN_CONFIRMATION_LABEL": "Are you sure to unassign %{conversationCount} %{conversationLabel}?",
    "GO_BACK_LABEL": "العودة للخلف",
    "ASSIGN_LABEL": "تكليف",
+    "YES": "نعم",
    "ASSIGN_AGENT_TOOLTIP": "إسناد وكيل",
    "ASSIGN_SUCCESFUL": "تم تعيين المحادثات بنجاح",
    "ASSIGN_FAILED": "فشل في تعيين المحادثات، الرجاء المحاولة مرة أخرى",
--- a/app/javascript/dashboard/i18n/locale/ar/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ar/conversation.json
@ -208,7 +208,8 @@
      "CONVERSATION_LABELS": "وسوم المحادثة",
      "CONVERSATION_INFO": "معلومات المحادثة",
      "CONTACT_ATTRIBUTES": "سمات جهة الاتصال",
-      "PREVIOUS_CONVERSATION": "المحادثات السابقة"
+      "PREVIOUS_CONVERSATION": "المحادثات السابقة",
+      "MACROS": "Macros"
    }
  },
  "CONVERSATION_CUSTOM_ATTRIBUTES": {
--- a/app/javascript/dashboard/i18n/locale/ar/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ar/generalSettings.json
@ -54,7 +54,8 @@
    "MULTISELECT": {
      "ENTER_TO_SELECT": "اضغط على زر الإدخال للاختيار",
      "ENTER_TO_REMOVE": "اضغط على زر الإدخال للحذف",
-      "SELECT_ONE": "اختر واحدا"
+      "SELECT_ONE": "اختر واحدا",
+      "SELECT": "Select"
    }
  },
  "NOTIFICATIONS_PAGE": {
@ -136,5 +137,8 @@
      "UNTIL_NEXT_WEEK": "حتى الأسبوع القادم",
      "UNTIL_TOMORROW": "حتى الغد"
    }
+  },
+  "DASHBOARD_APPS": {
+    "LOADING_MESSAGE": "Loading Dashboard App..."
  }
 }
--- a/app/javascript/dashboard/i18n/locale/ar/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ar/helpCenter.json
@ -217,14 +217,14 @@
        "DOMAIN": {
          "LABEL": "نطاق مخصص",
          "PLACEHOLDER": "نطاق البوابة المخصص",
-          "HELP_TEXT": "أضف فقط إذا كنت ترغب في استخدام نطاق مخصص للبوابات الخاصة بك.",
-          "ERROR": "النطاق المخصص مطلوب"
+          "HELP_TEXT": "Add only If you want to use a custom domain for your portals. Eg: https://example.com",
+          "ERROR": "Enter a valid domain URL"
        },
        "HOME_PAGE_LINK": {
          "LABEL": "رابط الصفحة الرئيسية",
          "PLACEHOLDER": "رابط الصفحة الرئيسية للبوابة",
-          "HELP_TEXT": "الرابط المستخدم للعودة من البوابة إلى الصفحة الرئيسية.",
-          "ERROR": "رابط الصفحة الرئيسية مطلوب"
+          "HELP_TEXT": "The link used to return from the portal to the home page. Eg: https://example.com",
+          "ERROR": "Enter a valid home page URL"
        },
        "THEME_COLOR": {
          "LABEL": "لون قالب البوابة",
@ -306,7 +306,7 @@
    "PUBLISH_ARTICLE": {
      "API": {
        "ERROR": "حدث خطأ أثناء نشر المقالة",
-        "SUCCESS": "تم نشر المقالة بنجاح"
+        "SUCCESS": "Article published successfully"
      }
    },
    "ARCHIVE_ARTICLE": {
--- a/app/javascript/dashboard/i18n/locale/ar/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ar/inboxMgmt.json
@ -239,7 +239,9 @@
        },
        "API_CALLBACK": {
          "TITLE": "عنوان Callback URL",
-          "SUBTITLE": "يجب عليك تكوين URL webhook في بوابة مطور فيسبوك مع عنوان URL المذكور هنا."
+          "SUBTITLE": "You have to configure the webhook URL and the verification token in the Facebook Developer portal with the values shown below.",
+          "WEBHOOK_URL": "رابط Webhook",
+          "WEBHOOK_VERIFICATION_TOKEN": "Webhook Verification Token"
        },
        "SUBMIT_BUTTON": "إنشاء قناة واتساب",
        "API": {
--- a/app/javascript/dashboard/i18n/locale/ar/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ar/macros.json
@ -0,0 +1,78 @@
+{
+  "MACROS": {
+    "HEADER": "Macros",
+    "HEADER_BTN_TXT": "Add a new macro",
+    "HEADER_BTN_TXT_SAVE": "Save macro",
+    "LOADING": "Fetching macros",
+    "SIDEBAR_TXT": "<p><b>Macros</b><p>A macro is a set of saved actions that help customer service agents easily complete tasks. The agents can define a set of actions like tagging a conversation with a label, sending an email transcript, updating a custom attribute, etc., and they can run these actions in a single click. When the agents run the macro, the actions would be performed sequentially in the order they are defined. Macros improve productivity and increase consistency in actions. </p><p>A macro can be helpful in 2 ways. </p><p><b>As an agent assist:</b> If an agent performs a set of actions multiple times, they can save it as a macro and execute all the actions together using a single click.</p><p><b>As an option to onboard a team member:</b> Every agent has to perform many different checks/actions during each conversation. Onboarding a new support team member will be easy if pre-defined macros are available on the account. Instead of describing each step in detail, the manager/team lead can point to the macros used in different scenarios.</p>",
+    "ERROR": "Something went wrong. Please try again",
+    "ORDER_INFO": "Macros will run in the order you add your actions. You can rearrange them by dragging them by the handle beside each node.",
+    "ADD": {
+      "FORM": {
+        "NAME": {
+          "LABEL": "Macro name",
+          "PLACEHOLDER": "Enter a name for your macro",
+          "ERROR": "Name is required for creating a macro"
+        },
+        "ACTIONS": {
+          "LABEL": "الإجراءات"
+        }
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro added successfully",
+        "ERROR_MESSAGE": "Unable to create macro, Please try again later"
+      }
+    },
+    "LIST": {
+      "TABLE_HEADER": [
+        "الاسم",
+        "Created by",
+        "Last updated by",
+        "Visibility"
+      ],
+      "404": "No macros found"
+    },
+    "DELETE": {
+      "TOOLTIP": "Delete macro",
+      "CONFIRM": {
+        "MESSAGE": "هل أنت متأكد من الحذف ",
+        "YES": "نعم، احذف",
+        "NO": "لا"
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro deleted successfully",
+        "ERROR_MESSAGE": "There was an error deleting the macro. Please try again later"
+      }
+    },
+    "EDIT": {
+      "TOOLTIP": "Edit macro",
+      "API": {
+        "SUCCESS_MESSAGE": "Macro updated successfully",
+        "ERROR_MESSAGE": "Could not update Macro, Please try again later"
+      }
+    },
+    "EDITOR": {
+      "START_FLOW": "Start Flow",
+      "END_FLOW": "End Flow",
+      "LOADING": "Fetching macro",
+      "ADD_BTN_TOOLTIP": "Add new action",
+      "DELETE_BTN_TOOLTIP": "Delete Action",
+      "VISIBILITY": {
+        "LABEL": "Macro Visibility",
+        "GLOBAL": {
+          "LABEL": "Public",
+          "DESCRIPTION": "This macro is available publicly for all agents in this account."
+        },
+        "PERSONAL": {
+          "LABEL": "Private",
+          "DESCRIPTION": "This macro will be private to you and not be available to others."
+        }
+      }
+    },
+    "EXECUTE": {
+      "BUTTON_TOOLTIP": "Execute",
+      "PREVIEW": "Preview Macro",
+      "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    }
+  }
+}
--- a/app/javascript/dashboard/i18n/locale/ar/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ar/settings.json
@ -158,6 +158,9 @@
      "DOWNLOAD": "تنزيل",
      "UPLOADING": "جاري الرفع..."
    },
+    "LOCATION_BUBBLE": {
+      "SEE_ON_MAP": "See on map"
+    },
    "FORM_BUBBLE": {
      "SUBMIT": "إرسال"
    }
@ -179,6 +182,7 @@
    "CONTACTS": "جهات الاتصال",
    "HOME": "الرئيسية",
    "AGENTS": "موظف الدعم",
+    "AGENT_BOTS": "Bots",
    "INBOXES": "قنوات التواصل",
    "NOTIFICATIONS": "الإشعارات",
    "CANNED_RESPONSES": "الردود السريعة",
@ -189,6 +193,7 @@
    "LABELS": "الوسوم",
    "CUSTOM_ATTRIBUTES": "سمات مخصصة",
    "AUTOMATION": "الأتمتة",
+    "MACROS": "Macros",
    "TEAMS": "الفرق",
    "BILLING": "الفواتير",
    "CUSTOM_VIEWS_FOLDER": "المجلدات",
--- a/app/javascript/dashboard/i18n/locale/bg/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/bg/agentBots.json
@ -0,0 +1,5 @@
+{
+  "AGENT_BOTS": {
+    "HEADER": "Bots"
+  }
+}
--- a/app/javascript/dashboard/i18n/locale/bg/automation.json
+++ b/app/javascript/dashboard/i18n/locale/bg/automation.json
@ -86,7 +86,9 @@
      "RESET_MESSAGE": "Changing event type will reset the conditions and events you have added below"
    },
    "CONDITION": {
-      "DELETE_MESSAGE": "You need to have atleast one condition to save"
+      "DELETE_MESSAGE": "You need to have atleast one condition to save",
+      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
    },
    "ACTION": {
      "DELETE_MESSAGE": "You need to have atleast one action to save",
@ -109,7 +111,7 @@
      "UPLOAD_ERROR": "Could not upload attachment, Please try again",
      "LABEL_IDLE": "Upload Attachment",
      "LABEL_UPLOADING": "Качване...",
-      "LABEL_UPLOADED": "Succesfully Uploaded",
+      "LABEL_UPLOADED": "Successfully Uploaded",
      "LABEL_UPLOAD_FAILED": "Upload Failed"
    }
  }
--- a/app/javascript/dashboard/i18n/locale/bg/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/bg/bulkActions.json
@ -2,9 +2,11 @@
  "BULK_ACTION": {
    "CONVERSATIONS_SELECTED": "%{conversationCount} conversations selected",
    "AGENT_SELECT_LABEL": "Select Agent",
-    "ASSIGN_CONFIRMATION_LABEL": "Are you sure you want to assign %{conversationCount} %{conversationLabel} to",
+    "ASSIGN_CONFIRMATION_LABEL": "Are you sure to assign %{conversationCount} %{conversationLabel} to",
+    "UNASSIGN_CONFIRMATION_LABEL": "Are you sure to unassign %{conversationCount} %{conversationLabel}?",
    "GO_BACK_LABEL": "Go back",
    "ASSIGN_LABEL": "Assign",
+    "YES": "Yes",
    "ASSIGN_AGENT_TOOLTIP": "Assign Agent",
    "ASSIGN_SUCCESFUL": "Conversations assigned successfully",
    "ASSIGN_FAILED": "Failed to assign conversations, please try again",
--- a/app/javascript/dashboard/i18n/locale/bg/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/bg/conversation.json
@ -208,7 +208,8 @@
      "CONVERSATION_LABELS": "Етикети на разговора",
      "CONVERSATION_INFO": "Conversation Information",
      "CONTACT_ATTRIBUTES": "Contact Attributes",
-      "PREVIOUS_CONVERSATION": "Предишни разговори"
+      "PREVIOUS_CONVERSATION": "Предишни разговори",
+      "MACROS": "Macros"
    }
  },
  "CONVERSATION_CUSTOM_ATTRIBUTES": {
--- a/app/javascript/dashboard/i18n/locale/bg/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/bg/generalSettings.json
@ -54,7 +54,8 @@
    "MULTISELECT": {
      "ENTER_TO_SELECT": "Press enter to select",
      "ENTER_TO_REMOVE": "Press enter to remove",
-      "SELECT_ONE": "Select one"
+      "SELECT_ONE": "Select one",
+      "SELECT": "Select"
    }
  },
  "NOTIFICATIONS_PAGE": {
@ -136,5 +137,8 @@
      "UNTIL_NEXT_WEEK": "Until next week",
      "UNTIL_TOMORROW": "Until tomorrow"
    }
+  },
+  "DASHBOARD_APPS": {
+    "LOADING_MESSAGE": "Loading Dashboard App..."
  }
 }
--- a/app/javascript/dashboard/i18n/locale/bg/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/bg/helpCenter.json
@ -217,14 +217,14 @@
        "DOMAIN": {
          "LABEL": "Custom Domain",
          "PLACEHOLDER": "Portal custom domain",
-          "HELP_TEXT": "Add only If you want to use a custom domain for your portals.",
-          "ERROR": "Custom Domain is required"
+          "HELP_TEXT": "Add only If you want to use a custom domain for your portals. Eg: https://example.com",
+          "ERROR": "Enter a valid domain URL"
        },
        "HOME_PAGE_LINK": {
          "LABEL": "Home Page Link",
          "PLACEHOLDER": "Portal home page link",
-          "HELP_TEXT": "The link used to return from the portal to the home page.",
-          "ERROR": "Home Page Link is required"
+          "HELP_TEXT": "The link used to return from the portal to the home page. Eg: https://example.com",
+          "ERROR": "Enter a valid home page URL"
        },
        "THEME_COLOR": {
          "LABEL": "Portal theme color",
@ -306,7 +306,7 @@
    "PUBLISH_ARTICLE": {
      "API": {
        "ERROR": "Error while publishing article",
-        "SUCCESS": "Article publishied successfully"
+        "SUCCESS": "Article published successfully"
      }
    },
    "ARCHIVE_ARTICLE": {
--- a/app/javascript/dashboard/i18n/locale/bg/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/bg/inboxMgmt.json
@ -239,7 +239,9 @@
        },
        "API_CALLBACK": {
          "TITLE": "Callback URL",
-          "SUBTITLE": "You have to configure the webhook URL in facebook developer portal with the URL mentioned here."
+          "SUBTITLE": "You have to configure the webhook URL and the verification token in the Facebook Developer portal with the values shown below.",
+          "WEBHOOK_URL": "Webhook URL",
+          "WEBHOOK_VERIFICATION_TOKEN": "Webhook Verification Token"
        },
        "SUBMIT_BUTTON": "Create WhatsApp Channel",
        "API": {
--- a/app/javascript/dashboard/i18n/locale/bg/macros.json
+++ b/app/javascript/dashboard/i18n/locale/bg/macros.json
@ -0,0 +1,78 @@
+{
+  "MACROS": {
+    "HEADER": "Macros",
+    "HEADER_BTN_TXT": "Add a new macro",
+    "HEADER_BTN_TXT_SAVE": "Save macro",
+    "LOADING": "Fetching macros",
+    "SIDEBAR_TXT": "<p><b>Macros</b><p>A macro is a set of saved actions that help customer service agents easily complete tasks. The agents can define a set of actions like tagging a conversation with a label, sending an email transcript, updating a custom attribute, etc., and they can run these actions in a single click. When the agents run the macro, the actions would be performed sequentially in the order they are defined. Macros improve productivity and increase consistency in actions. </p><p>A macro can be helpful in 2 ways. </p><p><b>As an agent assist:</b> If an agent performs a set of actions multiple times, they can save it as a macro and execute all the actions together using a single click.</p><p><b>As an option to onboard a team member:</b> Every agent has to perform many different checks/actions during each conversation. Onboarding a new support team member will be easy if pre-defined macros are available on the account. Instead of describing each step in detail, the manager/team lead can point to the macros used in different scenarios.</p>",
+    "ERROR": "Something went wrong. Please try again",
+    "ORDER_INFO": "Macros will run in the order you add your actions. You can rearrange them by dragging them by the handle beside each node.",
+    "ADD": {
+      "FORM": {
+        "NAME": {
+          "LABEL": "Macro name",
+          "PLACEHOLDER": "Enter a name for your macro",
+          "ERROR": "Name is required for creating a macro"
+        },
+        "ACTIONS": {
+          "LABEL": "Действия"
+        }
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro added successfully",
+        "ERROR_MESSAGE": "Unable to create macro, Please try again later"
+      }
+    },
+    "LIST": {
+      "TABLE_HEADER": [
+        "Име",
+        "Created by",
+        "Last updated by",
+        "Visibility"
+      ],
+      "404": "No macros found"
+    },
+    "DELETE": {
+      "TOOLTIP": "Delete macro",
+      "CONFIRM": {
+        "MESSAGE": "Сигурни ли сте за изтриването ",
+        "YES": "Да, изтрий",
+        "NO": "No"
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro deleted successfully",
+        "ERROR_MESSAGE": "There was an error deleting the macro. Please try again later"
+      }
+    },
+    "EDIT": {
+      "TOOLTIP": "Edit macro",
+      "API": {
+        "SUCCESS_MESSAGE": "Macro updated successfully",
+        "ERROR_MESSAGE": "Could not update Macro, Please try again later"
+      }
+    },
+    "EDITOR": {
+      "START_FLOW": "Start Flow",
+      "END_FLOW": "End Flow",
+      "LOADING": "Fetching macro",
+      "ADD_BTN_TOOLTIP": "Add new action",
+      "DELETE_BTN_TOOLTIP": "Delete Action",
+      "VISIBILITY": {
+        "LABEL": "Macro Visibility",
+        "GLOBAL": {
+          "LABEL": "Public",
+          "DESCRIPTION": "This macro is available publicly for all agents in this account."
+        },
+        "PERSONAL": {
+          "LABEL": "Private",
+          "DESCRIPTION": "This macro will be private to you and not be available to others."
+        }
+      }
+    },
+    "EXECUTE": {
+      "BUTTON_TOOLTIP": "Execute",
+      "PREVIEW": "Preview Macro",
+      "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    }
+  }
+}
--- a/app/javascript/dashboard/i18n/locale/bg/settings.json
+++ b/app/javascript/dashboard/i18n/locale/bg/settings.json
@ -158,6 +158,9 @@
      "DOWNLOAD": "Download",
      "UPLOADING": "Качване..."
    },
+    "LOCATION_BUBBLE": {
+      "SEE_ON_MAP": "See on map"
+    },
    "FORM_BUBBLE": {
      "SUBMIT": "Изпращане"
    }
@ -179,6 +182,7 @@
    "CONTACTS": "Контакти",
    "HOME": "Home",
    "AGENTS": "Агенти",
+    "AGENT_BOTS": "Bots",
    "INBOXES": "Inboxes",
    "NOTIFICATIONS": "Notifications",
    "CANNED_RESPONSES": "Готови отговори",
@ -189,6 +193,7 @@
    "LABELS": "Labels",
    "CUSTOM_ATTRIBUTES": "Персонализирани атрибути",
    "AUTOMATION": "Автоматизация",
+    "MACROS": "Macros",
    "TEAMS": "Teams",
    "BILLING": "Billing",
    "CUSTOM_VIEWS_FOLDER": "Folders",
--- a/app/javascript/dashboard/i18n/locale/ca/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ca/advancedFilters.json
@ -1,48 +1,48 @@
 {
  "FILTER": {
-    "TITLE": "Filter Conversations",
+    "TITLE": "Filtre de converses",
    "SUBTITLE": "Add filters below and hit 'Apply filters' to filter conversations.",
-    "ADD_NEW_FILTER": "Add Filter",
+    "ADD_NEW_FILTER": "Afegeix filtre",
    "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
-    "SUBMIT_BUTTON_LABEL": "Apply filters",
+    "SUBMIT_BUTTON_LABEL": "Aplicar filtres",
    "CANCEL_BUTTON_LABEL": "Cancel·la",
    "CLEAR_BUTTON_LABEL": "Clear Filters",
-    "EMPTY_VALUE_ERROR": "Value is required",
-    "TOOLTIP_LABEL": "Filter conversations",
+    "EMPTY_VALUE_ERROR": "El valor és necessari",
+    "TOOLTIP_LABEL": "Filtre de converses",
    "QUERY_DROPDOWN_LABELS": {
-      "AND": "AND",
-      "OR": "OR"
+      "AND": "I",
+      "OR": "O"
    },
    "OPERATOR_LABELS": {
-      "equal_to": "Equal to",
-      "not_equal_to": "Not equal to",
-      "contains": "Contains",
-      "does_not_contain": "Does not contain",
-      "is_present": "Is present",
-      "is_not_present": "Is not present",
-      "is_greater_than": "Is greater than",
-      "is_less_than": "Is lesser than",
+      "equal_to": "Igual a",
+      "not_equal_to": "No és igual a",
+      "contains": "Conté",
+      "does_not_contain": "No conté",
+      "is_present": "És present",
+      "is_not_present": "No és present",
+      "is_greater_than": "És més gran que",
+      "is_less_than": "És més petit que",
      "days_before": "Is x days before"
    },
    "ATTRIBUTE_LABELS": {
-      "TRUE": "True",
-      "FALSE": "False"
+      "TRUE": "Cert",
+      "FALSE": "Fals"
    },
    "ATTRIBUTES": {
      "STATUS": "Estat",
      "ASSIGNEE_NAME": "Assignee Name",
      "INBOX_NAME": "Nom de la safata d'entrada",
-      "TEAM_NAME": "Team Name",
-      "CONVERSATION_IDENTIFIER": "Conversation Identifier",
+      "TEAM_NAME": "Nom de l'equip",
+      "CONVERSATION_IDENTIFIER": "Identificador de la conversa",
      "CAMPAIGN_NAME": "Campaign Name",
      "LABELS": "Etiquetes",
      "BROWSER_LANGUAGE": "Browser Language",
-      "COUNTRY_NAME": "Country Name",
+      "COUNTRY_NAME": "Nom del país",
      "REFERER_LINK": "Referer link",
      "CUSTOM_ATTRIBUTE_LIST": "List",
-      "CUSTOM_ATTRIBUTE_TEXT": "Text",
-      "CUSTOM_ATTRIBUTE_NUMBER": "Number",
-      "CUSTOM_ATTRIBUTE_LINK": "Link",
+      "CUSTOM_ATTRIBUTE_TEXT": "Llista",
+      "CUSTOM_ATTRIBUTE_NUMBER": "Número",
+      "CUSTOM_ATTRIBUTE_LINK": "Enllaç",
      "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
      "CREATED_AT": "Created At",
      "LAST_ACTIVITY": "Last Activity"
--- a/app/javascript/dashboard/i18n/locale/ca/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/ca/agentBots.json
@ -0,0 +1,5 @@
+{
+  "AGENT_BOTS": {
+    "HEADER": "Bots"
+  }
+}
--- a/app/javascript/dashboard/i18n/locale/ca/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ca/agentMgmt.json
@ -96,16 +96,16 @@
      "PLACEHOLDER": "Ningú",
      "TITLE": {
        "AGENT": "Seleccionar Agent",
-        "TEAM": "Select team"
+        "TEAM": "Selecciona equip"
      },
      "SEARCH": {
        "NO_RESULTS": {
          "AGENT": "No s'han trobat agents",
-          "TEAM": "No teams found"
+          "TEAM": "No s'han trobat equips"
        },
        "PLACEHOLDER": {
-          "AGENT": "Search agents",
-          "TEAM": "Search teams"
+          "AGENT": "Cerca agents",
+          "TEAM": "Cerca equips"
        }
      }
    }
--- a/app/javascript/dashboard/i18n/locale/ca/automation.json
+++ b/app/javascript/dashboard/i18n/locale/ca/automation.json
@ -20,7 +20,7 @@
          "ERROR": "Description is required"
        },
        "EVENT": {
-          "LABEL": "Event",
+          "LABEL": "Esdeveniment",
          "PLACEHOLDER": "Please select one",
          "ERROR": "Event is required"
        },
@ -86,7 +86,9 @@
      "RESET_MESSAGE": "Changing event type will reset the conditions and events you have added below"
    },
    "CONDITION": {
-      "DELETE_MESSAGE": "You need to have atleast one condition to save"
+      "DELETE_MESSAGE": "You need to have atleast one condition to save",
+      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
    },
    "ACTION": {
      "DELETE_MESSAGE": "You need to have atleast one action to save",
@ -109,7 +111,7 @@
      "UPLOAD_ERROR": "Could not upload attachment, Please try again",
      "LABEL_IDLE": "Upload Attachment",
      "LABEL_UPLOADING": "S'està carregant...",
-      "LABEL_UPLOADED": "Succesfully Uploaded",
+      "LABEL_UPLOADED": "Successfully Uploaded",
      "LABEL_UPLOAD_FAILED": "Upload Failed"
    }
  }
--- a/app/javascript/dashboard/i18n/locale/ca/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/ca/bulkActions.json
@ -2,9 +2,11 @@
  "BULK_ACTION": {
    "CONVERSATIONS_SELECTED": "%{conversationCount} conversations selected",
    "AGENT_SELECT_LABEL": "Seleccionar Agent",
-    "ASSIGN_CONFIRMATION_LABEL": "Are you sure you want to assign %{conversationCount} %{conversationLabel} to",
+    "ASSIGN_CONFIRMATION_LABEL": "Are you sure to assign %{conversationCount} %{conversationLabel} to",
+    "UNASSIGN_CONFIRMATION_LABEL": "Are you sure to unassign %{conversationCount} %{conversationLabel}?",
    "GO_BACK_LABEL": "Go back",
    "ASSIGN_LABEL": "Assignar",
+    "YES": "Si",
    "ASSIGN_AGENT_TOOLTIP": "Assign Agent",
    "ASSIGN_SUCCESFUL": "Conversations assigned successfully",
    "ASSIGN_FAILED": "Failed to assign conversations, please try again",
--- a/app/javascript/dashboard/i18n/locale/ca/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ca/cannedMgmt.json
@ -22,7 +22,7 @@
      "FORM": {
        "SHORT_CODE": {
          "LABEL": "Codi curt",
-          "PLACEHOLDER": "Please enter a short code",
+          "PLACEHOLDER": "Introduïu un codi curt",
          "ERROR": "És necessari el codi curt"
        },
        "CONTENT": {
--- a/app/javascript/dashboard/i18n/locale/ca/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ca/chatlist.json
@ -7,7 +7,7 @@
      "404": "No hi ha converses actives en aquest grup."
    },
    "TAB_HEADING": "Converses",
-    "MENTION_HEADING": "Mentions",
+    "MENTION_HEADING": "Mencions",
    "SEARCH": {
      "INPUT": "Cerca persones, xats, respostes desades .."
    },
@ -25,10 +25,10 @@
        "TEXT": "Resoltes"
      },
      "pending": {
-        "TEXT": "Pending"
+        "TEXT": "Pendent"
      },
      "snoozed": {
-        "TEXT": "Snoozed"
+        "TEXT": "Posposat"
      }
    },
    "ATTACHMENTS": {
@ -54,12 +54,12 @@
    "RECEIVED_VIA_EMAIL": "Rebut per correu electrònic",
    "VIEW_TWEET_IN_TWITTER": "Veure el tuit a Twitter",
    "REPLY_TO_TWEET": "Respon a aquest tuit",
-    "LINK_TO_STORY": "Go to instagram story",
-    "SENT": "Sent successfully",
+    "LINK_TO_STORY": "Ves a la història d'instagram",
+    "SENT": "Enviat correctament",
    "NO_MESSAGES": "Cap Missatge",
-    "NO_CONTENT": "No content available",
-    "HIDE_QUOTED_TEXT": "Hide Quoted Text",
-    "SHOW_QUOTED_TEXT": "Show Quoted Text",
-    "MESSAGE_READ": "Read"
+    "NO_CONTENT": "No hi ha contingut disponible",
+    "HIDE_QUOTED_TEXT": "Amaga text entre cometes",
+    "SHOW_QUOTED_TEXT": "Mostra text entre cometes",
+    "MESSAGE_READ": "Llegir"
  }
 }
--- a/app/javascript/dashboard/i18n/locale/ca/contact.json
+++ b/app/javascript/dashboard/i18n/locale/ca/contact.json
@ -3,40 +3,40 @@
    "NOT_AVAILABLE": "No disponible",
    "EMAIL_ADDRESS": "Adreça de correu electrònic",
    "PHONE_NUMBER": "Número de telèfon",
-    "IDENTIFIER": "Identifier",
+    "IDENTIFIER": "Identificador",
    "COPY_SUCCESSFUL": "S'ha copiat al porta-retalls amb èxit",
    "COMPANY": "Companyia",
    "LOCATION": "Ubicació",
-    "BROWSER_LANGUAGE": "Browser Language",
+    "BROWSER_LANGUAGE": "Idioma del navegador",
    "CONVERSATION_TITLE": "Detalls de les converses",
-    "VIEW_PROFILE": "View Profile",
+    "VIEW_PROFILE": "Veure perfil",
    "BROWSER": "Navegador",
    "OS": "Sistema operatiu",
    "INITIATED_FROM": "Iniciada des de",
    "INITIATED_AT": "Iniciada a les",
    "IP_ADDRESS": "Adreça IP",
-    "NEW_MESSAGE": "New message",
+    "NEW_MESSAGE": "Nou missatge",
    "CONVERSATIONS": {
      "NO_RECORDS_FOUND": "No hi han converses prèvies associades a aquest contacte.",
      "TITLE": "Converses prèvies"
    },
    "LABELS": {
      "CONTACT": {
-        "TITLE": "Contact Labels",
-        "ERROR": "Couldn't update labels"
+        "TITLE": "Etiquetes de contactes",
+        "ERROR": "No s'han pogut actualitzar les etiquetes"
      },
      "CONVERSATION": {
        "TITLE": "Etiquetes de converses",
-        "ADD_BUTTON": "Add Labels"
+        "ADD_BUTTON": "Afegir etiquetes"
      },
      "LABEL_SELECT": {
-        "TITLE": "Add Labels",
-        "PLACEHOLDER": "Search labels",
-        "NO_RESULT": "No labels found"
+        "TITLE": "Afegir etiquetes",
+        "PLACEHOLDER": "Cerca etiquetes",
+        "NO_RESULT": "No s'han trobat etiquetes"
      }
    },
-    "MERGE_CONTACT": "Merge contact",
-    "CONTACT_ACTIONS": "Contact actions",
+    "MERGE_CONTACT": "Reagrupa contacte",
+    "CONTACT_ACTIONS": "Accions de contacte",
    "MUTE_CONTACT": "Silencia la conversa",
    "UNMUTE_CONTACT": "Desactiva el silenci de la conversa",
    "MUTED_SUCCESS": "Aquesta conversa s'ha silenciat durant 6 hores",
@ -45,7 +45,7 @@
    "EDIT_LABEL": "Edita",
    "SIDEBAR_SECTIONS": {
      "CUSTOM_ATTRIBUTES": "Atributs personalitzats",
-      "CONTACT_LABELS": "Contact Labels",
+      "CONTACT_LABELS": "Etiquetes de contactes",
      "PREVIOUS_CONVERSATIONS": "Converses prèvies"
    }
  },
@ -60,30 +60,30 @@
    "DESC": "Afegir informació bàsica sobre el contacte."
  },
  "IMPORT_CONTACTS": {
-    "BUTTON_LABEL": "Import",
-    "TITLE": "Import Contacts",
-    "DESC": "Import contacts through a CSV file.",
-    "DOWNLOAD_LABEL": "Download a sample csv.",
+    "BUTTON_LABEL": "Importa",
+    "TITLE": "Importa contactes",
+    "DESC": "Importa contactes a través d'un fitxer CSV.",
+    "DOWNLOAD_LABEL": "Descarrega un csv d'exemple.",
    "FORM": {
-      "LABEL": "CSV File",
-      "SUBMIT": "Import",
+      "LABEL": "Fitxer CSV",
+      "SUBMIT": "Importa",
      "CANCEL": "Cancel·la"
    },
-    "SUCCESS_MESSAGE": "Contacts saved successfully",
+    "SUCCESS_MESSAGE": "Contactes desat correctament",
    "ERROR_MESSAGE": "S'ha produït un error; tornau-ho a provar"
  },
  "DELETE_NOTE": {
    "CONFIRM": {
      "TITLE": "Confirma l'esborrat",
-      "MESSAGE": "Are you want sure to delete this note?",
-      "YES": "Yes, Delete it",
+      "MESSAGE": "Vols suprimir aquesta nota amb seguretat?",
+      "YES": "Si, esborra'l",
      "NO": "No, manten-la"
    }
  },
  "DELETE_CONTACT": {
-    "BUTTON_LABEL": "Delete Contact",
-    "TITLE": "Delete contact",
-    "DESC": "Delete contact details",
+    "BUTTON_LABEL": "Contacte esborrat",
+    "TITLE": "Contacte esborrat",
+    "DESC": "Detalls del contacte esborrat",
    "CONFIRM": {
      "TITLE": "Confirma l'esborrat",
      "MESSAGE": "N'estas segur? ",
@ -91,8 +91,8 @@
      "NO": "No, segueix"
    },
    "API": {
-      "SUCCESS_MESSAGE": "Contact deleted successfully",
-      "ERROR_MESSAGE": "Could not delete contact. Please try again later."
+      "SUCCESS_MESSAGE": "Contacte esborrat correctament",
+      "ERROR_MESSAGE": "No s'ha pogut esborrar el contacte. Torneu-ho a provar."
    }
  },
  "CONTACT_FORM": {
@ -160,7 +160,7 @@
    "ERROR_MESSAGE": "S'ha produït un error; tornau-ho a provar"
  },
  "NEW_CONVERSATION": {
-    "BUTTON_LABEL": "Start conversation",
+    "BUTTON_LABEL": "Inicia la conversa",
    "TITLE": "Nova conversació",
    "DESC": "Start a new conversation by sending a new message.",
    "NO_INBOX": "Couldn't find an inbox to initiate a new conversation with this contact.",
--- a/app/javascript/dashboard/i18n/locale/ca/contactFilters.json
+++ b/app/javascript/dashboard/i18n/locale/ca/contactFilters.json
@ -2,26 +2,26 @@
    "CONTACTS_FILTER": {
        "TITLE": "Filter Contacts",
        "SUBTITLE": "Add filters below and hit 'Submit' to filter contacts.",
-        "ADD_NEW_FILTER": "Add Filter",
+        "ADD_NEW_FILTER": "Afegeix filtre",
        "CLEAR_ALL_FILTERS": "Clear All Filters",
        "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
        "SUBMIT_BUTTON_LABEL": "Envia",
        "CANCEL_BUTTON_LABEL": "Cancel·la",
        "CLEAR_BUTTON_LABEL": "Clear Filters",
-        "EMPTY_VALUE_ERROR": "Value is required",
+        "EMPTY_VALUE_ERROR": "El valor és necessari",
        "TOOLTIP_LABEL": "Filter contacts",
        "QUERY_DROPDOWN_LABELS": {
-            "AND": "AND",
-            "OR": "OR"
+            "AND": "I",
+            "OR": "O"
        },
        "OPERATOR_LABELS": {
-            "equal_to": "Equal to",
-            "not_equal_to": "Not equal to",
-            "contains": "Contains",
-            "does_not_contain": "Does not contain",
-            "is_present": "Is present",
-            "is_not_present": "Is not present",
-            "is_greater_than": "Is greater than",
+            "equal_to": "Igual a",
+            "not_equal_to": "No és igual a",
+            "contains": "Conté",
+            "does_not_contain": "No conté",
+            "is_present": "És present",
+            "is_not_present": "No és present",
+            "is_greater_than": "És més gran que",
            "is_lesser_than": "Is lesser than",
            "days_before": "Is x days before"
        },
@ -33,9 +33,9 @@
            "CITY": "City",
            "COUNTRY": "Country",
            "CUSTOM_ATTRIBUTE_LIST": "List",
-            "CUSTOM_ATTRIBUTE_TEXT": "Text",
-            "CUSTOM_ATTRIBUTE_NUMBER": "Number",
-            "CUSTOM_ATTRIBUTE_LINK": "Link",
+            "CUSTOM_ATTRIBUTE_TEXT": "Llista",
+            "CUSTOM_ATTRIBUTE_NUMBER": "Número",
+            "CUSTOM_ATTRIBUTE_LINK": "Enllaç",
            "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
            "CREATED_AT": "Created At",
            "LAST_ACTIVITY": "Last Activity",
--- a/app/javascript/dashboard/i18n/locale/ca/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ca/conversation.json
@ -208,7 +208,8 @@
      "CONVERSATION_LABELS": "Etiquetes de converses",
      "CONVERSATION_INFO": "Conversation Information",
      "CONTACT_ATTRIBUTES": "Contact Attributes",
-      "PREVIOUS_CONVERSATION": "Converses prèvies"
+      "PREVIOUS_CONVERSATION": "Converses prèvies",
+      "MACROS": "Macros"
    }
  },
  "CONVERSATION_CUSTOM_ATTRIBUTES": {
--- a/app/javascript/dashboard/i18n/locale/ca/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ca/generalSettings.json
@ -54,7 +54,8 @@
    "MULTISELECT": {
      "ENTER_TO_SELECT": "Presiona retorn (tecla enter) per seleccionar",
      "ENTER_TO_REMOVE": "Presiona retorn (tecla enter) per eliminar",
-      "SELECT_ONE": "Selecciona un"
+      "SELECT_ONE": "Selecciona un",
+      "SELECT": "Select"
    }
  },
  "NOTIFICATIONS_PAGE": {
@ -136,5 +137,8 @@
      "UNTIL_NEXT_WEEK": "Until next week",
      "UNTIL_TOMORROW": "Until tomorrow"
    }
+  },
+  "DASHBOARD_APPS": {
+    "LOADING_MESSAGE": "Loading Dashboard App..."
  }
 }
--- a/app/javascript/dashboard/i18n/locale/ca/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/ca/helpCenter.json
@ -217,14 +217,14 @@
        "DOMAIN": {
          "LABEL": "Custom Domain",
          "PLACEHOLDER": "Portal custom domain",
-          "HELP_TEXT": "Add only If you want to use a custom domain for your portals.",
-          "ERROR": "Custom Domain is required"
+          "HELP_TEXT": "Add only If you want to use a custom domain for your portals. Eg: https://example.com",
+          "ERROR": "Enter a valid domain URL"
        },
        "HOME_PAGE_LINK": {
          "LABEL": "Home Page Link",
          "PLACEHOLDER": "Portal home page link",
-          "HELP_TEXT": "The link used to return from the portal to the home page.",
-          "ERROR": "Home Page Link is required"
+          "HELP_TEXT": "The link used to return from the portal to the home page. Eg: https://example.com",
+          "ERROR": "Enter a valid home page URL"
        },
        "THEME_COLOR": {
          "LABEL": "Portal theme color",
@ -306,7 +306,7 @@
    "PUBLISH_ARTICLE": {
      "API": {
        "ERROR": "Error while publishing article",
-        "SUCCESS": "Article publishied successfully"
+        "SUCCESS": "Article published successfully"
      }
    },
    "ARCHIVE_ARTICLE": {
--- a/app/javascript/dashboard/i18n/locale/ca/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ca/inboxMgmt.json
@ -239,7 +239,9 @@
        },
        "API_CALLBACK": {
          "TITLE": "Callback URL",
-          "SUBTITLE": "You have to configure the webhook URL in facebook developer portal with the URL mentioned here."
+          "SUBTITLE": "You have to configure the webhook URL and the verification token in the Facebook Developer portal with the values shown below.",
+          "WEBHOOK_URL": "URL del webhook",
+          "WEBHOOK_VERIFICATION_TOKEN": "Webhook Verification Token"
        },
        "SUBMIT_BUTTON": "Create WhatsApp Channel",
        "API": {
--- a/app/javascript/dashboard/i18n/locale/ca/macros.json
+++ b/app/javascript/dashboard/i18n/locale/ca/macros.json
@ -0,0 +1,78 @@
+{
+  "MACROS": {
+    "HEADER": "Macros",
+    "HEADER_BTN_TXT": "Add a new macro",
+    "HEADER_BTN_TXT_SAVE": "Save macro",
+    "LOADING": "Fetching macros",
+    "SIDEBAR_TXT": "<p><b>Macros</b><p>A macro is a set of saved actions that help customer service agents easily complete tasks. The agents can define a set of actions like tagging a conversation with a label, sending an email transcript, updating a custom attribute, etc., and they can run these actions in a single click. When the agents run the macro, the actions would be performed sequentially in the order they are defined. Macros improve productivity and increase consistency in actions. </p><p>A macro can be helpful in 2 ways. </p><p><b>As an agent assist:</b> If an agent performs a set of actions multiple times, they can save it as a macro and execute all the actions together using a single click.</p><p><b>As an option to onboard a team member:</b> Every agent has to perform many different checks/actions during each conversation. Onboarding a new support team member will be easy if pre-defined macros are available on the account. Instead of describing each step in detail, the manager/team lead can point to the macros used in different scenarios.</p>",
+    "ERROR": "Something went wrong. Please try again",
+    "ORDER_INFO": "Macros will run in the order you add your actions. You can rearrange them by dragging them by the handle beside each node.",
+    "ADD": {
+      "FORM": {
+        "NAME": {
+          "LABEL": "Macro name",
+          "PLACEHOLDER": "Enter a name for your macro",
+          "ERROR": "Name is required for creating a macro"
+        },
+        "ACTIONS": {
+          "LABEL": "Accions"
+        }
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro added successfully",
+        "ERROR_MESSAGE": "Unable to create macro, Please try again later"
+      }
+    },
+    "LIST": {
+      "TABLE_HEADER": [
+        "Nom",
+        "Created by",
+        "Last updated by",
+        "Visibility"
+      ],
+      "404": "No macros found"
+    },
+    "DELETE": {
+      "TOOLTIP": "Delete macro",
+      "CONFIRM": {
+        "MESSAGE": "N'estas segur? ",
+        "YES": "Si, esborra",
+        "NO": "No"
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro deleted successfully",
+        "ERROR_MESSAGE": "There was an error deleting the macro. Please try again later"
+      }
+    },
+    "EDIT": {
+      "TOOLTIP": "Edit macro",
+      "API": {
+        "SUCCESS_MESSAGE": "Macro updated successfully",
+        "ERROR_MESSAGE": "Could not update Macro, Please try again later"
+      }
+    },
+    "EDITOR": {
+      "START_FLOW": "Start Flow",
+      "END_FLOW": "End Flow",
+      "LOADING": "Fetching macro",
+      "ADD_BTN_TOOLTIP": "Add new action",
+      "DELETE_BTN_TOOLTIP": "Delete Action",
+      "VISIBILITY": {
+        "LABEL": "Macro Visibility",
+        "GLOBAL": {
+          "LABEL": "Public",
+          "DESCRIPTION": "This macro is available publicly for all agents in this account."
+        },
+        "PERSONAL": {
+          "LABEL": "Private",
+          "DESCRIPTION": "This macro will be private to you and not be available to others."
+        }
+      }
+    },
+    "EXECUTE": {
+      "BUTTON_TOOLTIP": "Execute",
+      "PREVIEW": "Preview Macro",
+      "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    }
+  }
+}
--- a/app/javascript/dashboard/i18n/locale/ca/settings.json
+++ b/app/javascript/dashboard/i18n/locale/ca/settings.json
@ -158,6 +158,9 @@
      "DOWNLOAD": "Descarrega",
      "UPLOADING": "S'està carregant..."
    },
+    "LOCATION_BUBBLE": {
+      "SEE_ON_MAP": "See on map"
+    },
    "FORM_BUBBLE": {
      "SUBMIT": "Envia"
    }
@ -173,12 +176,13 @@
    "SWITCH": "Switch",
    "CONVERSATIONS": "Converses",
    "ALL_CONVERSATIONS": "All Conversations",
-    "MENTIONED_CONVERSATIONS": "Mentions",
+    "MENTIONED_CONVERSATIONS": "Mencions",
    "REPORTS": "Informes",
    "SETTINGS": "Configuracions",
    "CONTACTS": "Contactes",
    "HOME": "Inici",
    "AGENTS": "Agents",
+    "AGENT_BOTS": "Bots",
    "INBOXES": "Safates d'entrada",
    "NOTIFICATIONS": "Notificacions",
    "CANNED_RESPONSES": "Respostes predeterminades",
@ -189,14 +193,15 @@
    "LABELS": "Etiquetes",
    "CUSTOM_ATTRIBUTES": "Atributs personalitzats",
    "AUTOMATION": "Automation",
+    "MACROS": "Macros",
    "TEAMS": "Equips",
    "BILLING": "Billing",
    "CUSTOM_VIEWS_FOLDER": "Folders",
    "CUSTOM_VIEWS_SEGMENTS": "Segments",
    "ALL_CONTACTS": "All Contacts",
    "TAGGED_WITH": "Tagged with",
-    "NEW_LABEL": "New label",
-    "NEW_TEAM": "New team",
+    "NEW_LABEL": "Nova etiqueta",
+    "NEW_TEAM": "Nou equip",
    "NEW_INBOX": "New inbox",
    "REPORTS_CONVERSATION": "Converses",
    "CSAT": "CSAT",
--- a/app/javascript/dashboard/i18n/locale/cs/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/cs/agentBots.json
@ -0,0 +1,5 @@
+{
+  "AGENT_BOTS": {
+    "HEADER": "Bots"
+  }
+}
--- a/app/javascript/dashboard/i18n/locale/cs/automation.json
+++ b/app/javascript/dashboard/i18n/locale/cs/automation.json
@ -86,7 +86,9 @@
      "RESET_MESSAGE": "Changing event type will reset the conditions and events you have added below"
    },
    "CONDITION": {
-      "DELETE_MESSAGE": "You need to have atleast one condition to save"
+      "DELETE_MESSAGE": "You need to have atleast one condition to save",
+      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
    },
    "ACTION": {
      "DELETE_MESSAGE": "You need to have atleast one action to save",
@ -109,7 +111,7 @@
      "UPLOAD_ERROR": "Could not upload attachment, Please try again",
      "LABEL_IDLE": "Upload Attachment",
      "LABEL_UPLOADING": "Nahrávání...",
-      "LABEL_UPLOADED": "Succesfully Uploaded",
+      "LABEL_UPLOADED": "Successfully Uploaded",
      "LABEL_UPLOAD_FAILED": "Upload Failed"
    }
  }
--- a/app/javascript/dashboard/i18n/locale/cs/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/cs/bulkActions.json
@ -2,9 +2,11 @@
  "BULK_ACTION": {
    "CONVERSATIONS_SELECTED": "%{conversationCount} conversations selected",
    "AGENT_SELECT_LABEL": "Vybrat agenta",
-    "ASSIGN_CONFIRMATION_LABEL": "Are you sure you want to assign %{conversationCount} %{conversationLabel} to",
+    "ASSIGN_CONFIRMATION_LABEL": "Are you sure to assign %{conversationCount} %{conversationLabel} to",
+    "UNASSIGN_CONFIRMATION_LABEL": "Are you sure to unassign %{conversationCount} %{conversationLabel}?",
    "GO_BACK_LABEL": "Go back",
    "ASSIGN_LABEL": "Přiřadit",
+    "YES": "Ano",
    "ASSIGN_AGENT_TOOLTIP": "Assign Agent",
    "ASSIGN_SUCCESFUL": "Conversations assigned successfully",
    "ASSIGN_FAILED": "Failed to assign conversations, please try again",
--- a/app/javascript/dashboard/i18n/locale/cs/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/cs/conversation.json
@ -208,7 +208,8 @@
      "CONVERSATION_LABELS": "Štítky konverzace",
      "CONVERSATION_INFO": "Informace o konverzaci",
      "CONTACT_ATTRIBUTES": "Atributy kontaktu",
-      "PREVIOUS_CONVERSATION": "Předchozí konverzace"
+      "PREVIOUS_CONVERSATION": "Předchozí konverzace",
+      "MACROS": "Macros"
    }
  },
  "CONVERSATION_CUSTOM_ATTRIBUTES": {
--- a/app/javascript/dashboard/i18n/locale/cs/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/cs/generalSettings.json
@ -54,7 +54,8 @@
    "MULTISELECT": {
      "ENTER_TO_SELECT": "Stiskněte Enter pro vybrání",
      "ENTER_TO_REMOVE": "Stiskněte Enter pro odebrání",
-      "SELECT_ONE": "Vyberte jeden"
+      "SELECT_ONE": "Vyberte jeden",
+      "SELECT": "Select"
    }
  },
  "NOTIFICATIONS_PAGE": {
@ -136,5 +137,8 @@
      "UNTIL_NEXT_WEEK": "Until next week",
      "UNTIL_TOMORROW": "Until tomorrow"
    }
+  },
+  "DASHBOARD_APPS": {
+    "LOADING_MESSAGE": "Loading Dashboard App..."
  }
 }
--- a/app/javascript/dashboard/i18n/locale/cs/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/cs/helpCenter.json
@ -217,14 +217,14 @@
        "DOMAIN": {
          "LABEL": "Custom Domain",
          "PLACEHOLDER": "Portal custom domain",
-          "HELP_TEXT": "Add only If you want to use a custom domain for your portals.",
-          "ERROR": "Custom Domain is required"
+          "HELP_TEXT": "Add only If you want to use a custom domain for your portals. Eg: https://example.com",
+          "ERROR": "Enter a valid domain URL"
        },
        "HOME_PAGE_LINK": {
          "LABEL": "Home Page Link",
          "PLACEHOLDER": "Portal home page link",
-          "HELP_TEXT": "The link used to return from the portal to the home page.",
-          "ERROR": "Home Page Link is required"
+          "HELP_TEXT": "The link used to return from the portal to the home page. Eg: https://example.com",
+          "ERROR": "Enter a valid home page URL"
        },
        "THEME_COLOR": {
          "LABEL": "Portal theme color",
@ -306,7 +306,7 @@
    "PUBLISH_ARTICLE": {
      "API": {
        "ERROR": "Error while publishing article",
-        "SUCCESS": "Article publishied successfully"
+        "SUCCESS": "Article published successfully"
      }
    },
    "ARCHIVE_ARTICLE": {
--- a/app/javascript/dashboard/i18n/locale/cs/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/cs/inboxMgmt.json
@ -239,7 +239,9 @@
        },
        "API_CALLBACK": {
          "TITLE": "Callback URL",
-          "SUBTITLE": "You have to configure the webhook URL in facebook developer portal with the URL mentioned here."
+          "SUBTITLE": "You have to configure the webhook URL and the verification token in the Facebook Developer portal with the values shown below.",
+          "WEBHOOK_URL": "URL webového háčku",
+          "WEBHOOK_VERIFICATION_TOKEN": "Webhook Verification Token"
        },
        "SUBMIT_BUTTON": "Create WhatsApp Channel",
        "API": {
@ -357,7 +359,7 @@
    },
    "FINISH": {
      "TITLE": "Vaše doručená pošta je připravena!",
-      "MESSAGE": "Nyní se můžete spojit se svými zákazníky prostřednictvím nového kanálu. Šťastná podpora ",
+      "MESSAGE": "You can now engage with your customers through your new Channel. Happy supporting",
      "BUTTON_TEXT": "Vezmi mě tam",
      "MORE_SETTINGS": "More settings",
      "WEBSITE_SUCCESS": "Úspěšně jste dokončili vytvoření webového kanálu. Zkopírujte kód zobrazený níže a vložte jej na vaše webové stránky. Když zákazník příště použije živý chat, konverzace se automaticky objeví ve vaší doručené poště."
--- a/app/javascript/dashboard/i18n/locale/cs/macros.json
+++ b/app/javascript/dashboard/i18n/locale/cs/macros.json
@ -0,0 +1,78 @@
+{
+  "MACROS": {
+    "HEADER": "Macros",
+    "HEADER_BTN_TXT": "Add a new macro",
+    "HEADER_BTN_TXT_SAVE": "Save macro",
+    "LOADING": "Fetching macros",
+    "SIDEBAR_TXT": "<p><b>Macros</b><p>A macro is a set of saved actions that help customer service agents easily complete tasks. The agents can define a set of actions like tagging a conversation with a label, sending an email transcript, updating a custom attribute, etc., and they can run these actions in a single click. When the agents run the macro, the actions would be performed sequentially in the order they are defined. Macros improve productivity and increase consistency in actions. </p><p>A macro can be helpful in 2 ways. </p><p><b>As an agent assist:</b> If an agent performs a set of actions multiple times, they can save it as a macro and execute all the actions together using a single click.</p><p><b>As an option to onboard a team member:</b> Every agent has to perform many different checks/actions during each conversation. Onboarding a new support team member will be easy if pre-defined macros are available on the account. Instead of describing each step in detail, the manager/team lead can point to the macros used in different scenarios.</p>",
+    "ERROR": "Something went wrong. Please try again",
+    "ORDER_INFO": "Macros will run in the order you add your actions. You can rearrange them by dragging them by the handle beside each node.",
+    "ADD": {
+      "FORM": {
+        "NAME": {
+          "LABEL": "Macro name",
+          "PLACEHOLDER": "Enter a name for your macro",
+          "ERROR": "Name is required for creating a macro"
+        },
+        "ACTIONS": {
+          "LABEL": "Akce"
+        }
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro added successfully",
+        "ERROR_MESSAGE": "Unable to create macro, Please try again later"
+      }
+    },
+    "LIST": {
+      "TABLE_HEADER": [
+        "Název",
+        "Created by",
+        "Last updated by",
+        "Visibility"
+      ],
+      "404": "No macros found"
+    },
+    "DELETE": {
+      "TOOLTIP": "Delete macro",
+      "CONFIRM": {
+        "MESSAGE": "Opravdu chcete odstranit ",
+        "YES": "Ano, odstranit",
+        "NO": "Ne"
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Macro deleted successfully",
+        "ERROR_MESSAGE": "There was an error deleting the macro. Please try again later"
+      }
+    },
+    "EDIT": {
+      "TOOLTIP": "Edit macro",
+      "API": {
+        "SUCCESS_MESSAGE": "Macro updated successfully",
+        "ERROR_MESSAGE": "Could not update Macro, Please try again later"
+      }
+    },
+    "EDITOR": {
+      "START_FLOW": "Start Flow",
+      "END_FLOW": "End Flow",
+      "LOADING": "Fetching macro",
+      "ADD_BTN_TOOLTIP": "Add new action",
+      "DELETE_BTN_TOOLTIP": "Delete Action",
+      "VISIBILITY": {
+        "LABEL": "Macro Visibility",
+        "GLOBAL": {
+          "LABEL": "Public",
+          "DESCRIPTION": "This macro is available publicly for all agents in this account."
+        },
+        "PERSONAL": {
+          "LABEL": "Private",
+          "DESCRIPTION": "This macro will be private to you and not be available to others."
+        }
+      }
+    },
+    "EXECUTE": {
+      "BUTTON_TOOLTIP": "Execute",
+      "PREVIEW": "Preview Macro",
+      "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    }
+  }
+}
--- a/app/javascript/dashboard/i18n/locale/cs/settings.json
+++ b/app/javascript/dashboard/i18n/locale/cs/settings.json
@ -158,6 +158,9 @@
      "DOWNLOAD": "Stáhnout",
      "UPLOADING": "Nahrávání..."
    },
+    "LOCATION_BUBBLE": {
+      "SEE_ON_MAP": "See on map"
+    },
    "FORM_BUBBLE": {
      "SUBMIT": "Odeslat"
    }
@ -179,6 +182,7 @@
    "CONTACTS": "Kontakty",
    "HOME": "Domů",
    "AGENTS": "Agenti",
+    "AGENT_BOTS": "Bots",
    "INBOXES": "Schránky",
    "NOTIFICATIONS": "Oznámení",
    "CANNED_RESPONSES": "Konzervované odpovědi",
@ -189,6 +193,7 @@
    "LABELS": "Štítky",
    "CUSTOM_ATTRIBUTES": "Vlastní atributy",
    "AUTOMATION": "Automation",
+    "MACROS": "Macros",
    "TEAMS": "Týmy",
    "BILLING": "Billing",
    "CUSTOM_VIEWS_FOLDER": "Folders",
--- a/app/javascript/dashboard/i18n/locale/da/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/da/agentBots.json
@ -0,0 +1,5 @@
+{
+  "AGENT_BOTS": {
+    "HEADER": "Bots"
+  }
+}
--- a/app/javascript/dashboard/i18n/locale/da/automation.json
+++ b/app/javascript/dashboard/i18n/locale/da/automation.json
@ -86,7 +86,9 @@
      "RESET_MESSAGE": "Ændring af begivenhedstype vil nulstille de betingelser og begivenheder, du har tilføjet nedenfor"
    },
    "CONDITION": {
-      "DELETE_MESSAGE": "Du skal have mindst én betingelse for at gemme"
+      "DELETE_MESSAGE": "Du skal have mindst én betingelse for at gemme",
+      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
    },
    "ACTION": {
      "DELETE_MESSAGE": "Du skal have mindst én handling for at gemme",
@ -109,7 +111,7 @@
      "UPLOAD_ERROR": "Kunne ikke uploade vedhæftning, Prøv venligst igen",
      "LABEL_IDLE": "Upload Vedhæftning",
      "LABEL_UPLOADING": "Uploader...",
-      "LABEL_UPLOADED": "Succesfuldt Uploadet",
+      "LABEL_UPLOADED": "Successfully Uploaded",
      "LABEL_UPLOAD_FAILED": "Upload Mislykkedes"
    }
  }
--- a/app/javascript/dashboard/i18n/locale/da/bulkActions.json
+++ b/app/javascript/dashboard/i18n/locale/da/bulkActions.json
@ -2,9 +2,11 @@
  "BULK_ACTION": {
    "CONVERSATIONS_SELECTED": "%{conversationCount} samtaler valgt",
    "AGENT_SELECT_LABEL": "Vælg Agent",
-    "ASSIGN_CONFIRMATION_LABEL": "Er du sikker på, at du vil tildele %{conversationCount} %{conversationLabel} til",
+    "ASSIGN_CONFIRMATION_LABEL": "Are you sure to assign %{conversationCount} %{conversationLabel} to",
+    "UNASSIGN_CONFIRMATION_LABEL": "Are you sure to unassign %{conversationCount} %{conversationLabel}?",
    "GO_BACK_LABEL": "Gå tilbage",
    "ASSIGN_LABEL": "Tildel",
+    "YES": "Ja",
    "ASSIGN_AGENT_TOOLTIP": "Tildel Agent",
    "ASSIGN_SUCCESFUL": "Samtaler tildelt",
    "ASSIGN_FAILED": "Mislykkedes at tildele samtaler, prøv igen",
--- a/app/javascript/dashboard/i18n/locale/da/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/da/conversation.json
@ -208,7 +208,8 @@
      "CONVERSATION_LABELS": "Samtale Etiketter",
      "CONVERSATION_INFO": "Samtale Information",
      "CONTACT_ATTRIBUTES": "Kontakt Attributter",
-      "PREVIOUS_CONVERSATION": "Tidligere Samtaler"
+      "PREVIOUS_CONVERSATION": "Tidligere Samtaler",
+      "MACROS": "Macros"
    }
  },
  "CONVERSATION_CUSTOM_ATTRIBUTES": {
--- a/Show more
+++ b/Show more